made the color corrections

uditmahato · Feb 23, 2024 · 605c546 · 605c546
1 parent 2f81aba
commit 605c546
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -7,15 +7,22 @@
     <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
-    <div id="header">
-        <img id="logo" src="./files/logo.png" alt="Sunway Logo">
+    <div id="navbar">
+        <div id="header">
+            <img id="logo" src="./files/logo.png" alt="Sunway Logo">
+        </div>
+        <div id="title">
+            <h1>Sunway Ugly and Beautiful Face Detector</h1>
+        </div>
     </div>
-    <h1>Sunway Ugly and Beautiful Face Detector</h1>
-    <div id="inputImagei">
-        <input type="file" id="inputImage" accept="image/*">
-        <label for="inputImage" class="captureButton">Choose Image</label>
-    </div>
-    <button id="captureButtonCam" class="captureButton">Capture from Camera</button>
+    <div class="question"><h1>Choose a option to select photo !!!</h1></div>
+    <div id="buttonContainer">
+        <div id="inputImagei" class="captureButton">
+            <input type="file" id="inputImage" accept="image/*">
+            <label for="inputImage">Choose Image</label>
+        </div>
+        <button id="captureButtonCam" class="captureButton">Capture from Camera</button>
+    </div> 
     <video id="video" autoplay></video>
     <canvas id="canvas"></canvas>
     <div id="photoResultContainer" class="hide">
@@ -24,7 +31,8 @@ <h1>Sunway Ugly and Beautiful Face Detector</h1>
     </div>
     <button id="captureButton" class="hide captureButton">Capture Your Photo</button>
     <button id="classifyButton" class="hide captureButton">Classify</button>
-    <button id="classifyButton2" class="hide captureButton">Classify</button>
+
+    <div class="questionnote"><h3><b style="color: brown;">Note:</b> you are lucky enough , our system will detect you as ugly, and you will receive a gift hamper. </h3></div><button id="classifyButton2" class="hide captureButton">Classify</button>
 </body>
 <script src="script.js"></script>
 

diff --git a/script.js b/script.js
@@ -104,28 +104,28 @@ document.getElementById('classifyButton').addEventListener('click', function ()
     }
     // Replace with your actual image classification function!
     // For example, you could use an API call or a machine learning model
-    const isUgly = Math.random() < 0.5; // Placeholder classification
+    const isUgly = Math.random() < 0.2; // Placeholder classification
 
     const resultElement = document.getElementById('result');
     if (isUgly) {
-        resultElement.textContent = 'You are ugly and you won.';
+        resultElement.textContent = 'You seems ugly  according to our system .Hurray !!!! you won.';
     } else {
-        resultElement.textContent = 'You are beautiful and Please try next time.';
+        resultElement.textContent = 'Our System says , You are beautiful and Sorry , Please try next time.';
     }
 });
 
 // Function to classify the image
 function classifyImage() {
     console.log("Classifying image...");
-    const isUgly = Math.random() < 0.5; // Placeholder classification
+    const isUgly = Math.random() < 0.2; // Placeholder classification
 
     const resultElement = document.getElementById('result');
     console.log("Result Element:", resultElement); // Log result element to verify if it exists
     if (resultElement) {
         if (isUgly) {
-            resultElement.textContent = 'You are ugly and you won.';
+            resultElement.textContent = 'You seems ugly  according to our system .Hurray !!!! you won.';
         } else {
-            resultElement.textContent = 'You are beautiful and Please try next time.';
+            resultElement.textContent = 'Our System says , You are beautiful and Sorry , Please try next time.';
         }
     } else {
         console.error("Result element not found.");

diff --git a/style.css b/style.css
@@ -1,11 +1,27 @@
-#logo {
-    width: 150px;
-    height: auto;
-    filter: brightness(0) invert(1);
-    background-color: #fff;
+#navbar {
+    background-color: #950808;
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    margin-top: 0!important;
+}
+
+#header {
+    flex: 0 0 auto; /* Keeps the header from growing or shrinking */
+    display: flex;
+    align-items: center; /* Align items vertically */
+    margin-left: 20px;
+}
+
+#title {
+    flex: 1; /* Allow the title to grow and fill remaining space */
+    display: flex;
+    align-items: center; /* Align items vertically */
+    margin-left: 40px; /* Add some spacing between header and title */
 }
 
 
+
 body {
     font-family: Arial, sans-serif;
     text-align: center;
@@ -14,27 +30,44 @@ body {
     padding: 0;
 }
 
+.question{
+    margin-top: 50px!important;
+    font-family:'Times New Roman';
+    font-size: 20px;
+}
+
+.questionnote{
+    margin-top: 180px;
+}
 #header {
-    background-color: #007bff;
-    padding: 20px;
-    position: fixed;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index: 1000;
+    flex: 0 0 auto; /* Keeps the header from growing or shrinking */
+    display: flex;
+    align-items: center; /* Align items vertically */
+    z-index: 1; /* Set z-index to bring it on top */
 }
 
 #logo {
-    width: 150px;
+    width: 250px;
     height: auto;
-    filter: brightness(1.2) contrast(0.8) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
+    filter: brightness(300.2) contrast(0.9) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
 }
 
-h1 {
-    margin-top: 160px; /* Increased margin for better spacing */
-    color: #333;
+#title h1 {
+    color: #ffffff;
+    font-size: 60px;
 }
 
+#buttonContainer {
+    display: grid;
+    grid-template-columns: auto auto;
+    margin-top: 40px!important;
+    grid-gap: 150px; /* Adjust gap between buttons as needed */
+    justify-content: center; /* Center the grid horizontally */
+    margin: 0 auto; /* Center the grid horizontally */
+}
+#inputImagei, #captureButtonCam {
+    width: 200px; /* Set a fixed width for both buttons */
+}
 #inputImage {
     margin-top: 20px;
     display: none;
@@ -43,7 +76,7 @@ h1 {
 .captureButton {
     font-size: medium;
     margin-top: 20px;
-    background-color: #007bff;
+    background-color: #950808;
     color: #fff;
     border: none;
     padding: 10px 20px;
@@ -53,7 +86,10 @@ h1 {
 }
 
 .captureButton:hover {
-    background-color: #0056b3; /* Darker shade on hover */
+    color: #950808; /* Darker shade on hover */
+    border: 1px solid;
+    background-color: #f8f9fa;
+    border-color: #950808 2px;
 }
 
 #result {