Update static/index.html

static/index.html

@@ -18,125 +18,45 @@
       margin: 0;
     }
      #cont {
-        border: 2px solid blue;
-    width: 265px;
-    height: 50px;
-    display: flex;
-    flex-direction: column;
-    overflow-y: scroll;
-    margin: auto;
-    margin-top: 30px;
-    padding-bottom: 7px;
-    gap: 14px;
-    background: linear-gradient(black , black) padding-box,
-                linear-gradient(to right, red, blue) border-box;
-    border-radius: 20px;
-    border: 2.5px solid transparent;
-}
-    
+      background-color: #030303;
+      padding: 0px;
+      border-radius: 12px;
+      box-shadow: 8px 8px 16px #050505, -8px -8px 16px #080808;
+      display: flex;
+      align-items: center;
+      border: 2px solid rgb(247, 6, 187);
+    }
       #prompt {
       flex-grow: 1;
-  padding: 10px;
-  margin: 10px;
-  background: transparent;
-  border: none;
-  border-radius: 8px;
-  box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
-  color: #fff;
-  outline: none;
+      padding: 10px;
+      margin: 10px;
+      background: transparent;
+      border: none;
+      border-radius: 8px;
+      box-shadow: linear-gradient(145deg, rgb(0, 249, 153), #ff002b);
+      color: #fff;
+      outline: none;
     }
-#generatePrompts {
-        background-image: linear-gradient(
-        45deg,
-        hsl(240deg 75% 29%) 0%,
-        hsl(254deg 78% 28%) 6%,
-        hsl(264deg 82% 27%) 13%,
-        hsl(272deg 87% 26%) 19%,
-        hsl(278deg 93% 25%) 25%,
-        hsl(284deg 98% 24%) 31%,
-        hsl(289deg 100% 23%) 37%,
-        hsl(294deg 100% 23%) 44%,
-        hsl(299deg 100% 22%) 50%,
-        hsl(303deg 100% 23%) 56%,
-        hsl(307deg 100% 24%) 63%,
-        hsl(311deg 100% 25%) 69%,
-        hsl(313deg 100% 26%) 75%,
-        hsl(316deg 95% 28%) 81%,
-        hsl(320deg 88% 30%) 87%,
-        hsl(323deg 81% 32%) 94%,
-        hsl(326deg 75% 33%) 100%
-    );
-    border: none;
-    color: white;
-    padding: 10px 20px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin-top: 10px;
-    cursor: pointer;
-    border-radius: 5px;
-    display: block;
-    margin: 0 auto;
-    width: 200px;
-}
-   #generatePrompts:hover {
-     /* Hover effect for the button */
-
-    background-color: #45a049;
-}
+#cont button {
+      padding: 2.5vh 4.6vh;
+      margin: 1vh;
+      background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
+      border: none;
+      border-radius: 8px;
+      color: #fff;
+      cursor: pointer;
+    }
+   #cont button:hover {
+      background: linear-gradient(145deg, #00ffab, #4e00f9, rgb(255, 0, 43));
     }
-      #generate {
-        background-image: linear-gradient(
-        45deg,
-        hsl(240deg 75% 29%) 0%,
-        hsl(254deg 78% 28%) 6%,
-        hsl(264deg 82% 27%) 13%,
-        hsl(272deg 87% 26%) 19%,
-        hsl(278deg 93% 25%) 25%,
-        hsl(284deg 98% 24%) 31%,
-        hsl(289deg 100% 23%) 37%,
-        hsl(294deg 100% 23%) 44%,
-        hsl(299deg 100% 22%) 50%,
-        hsl(303deg 100% 23%) 56%,
-        hsl(307deg 100% 24%) 63%,
-        hsl(311deg 100% 25%) 69%,
-        hsl(313deg 100% 26%) 75%,
-        hsl(316deg 95% 28%) 81%,
-        hsl(320deg 88% 30%) 87%,
-        hsl(323deg 81% 32%) 94%,
-        hsl(326deg 75% 33%) 100%
-    );
-    border: none;
-    color: white;
-    padding: 10px 20px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin-top: 10px;
-    cursor: pointer;
-    border-radius: 5px;
-    display: block;
-    margin: 0 auto;
-    width: 200px;
-}
-   #generate:hover {
-     /* Hover effect for the button */
-
-    background-color: #45a049;
-}
-  }
         .container {
             text-align: center;
         }
 
         h1 {
-           text-align: center;
-    margin-bottom: 20px;
-    font-family: 'Barlow Condensed';
-    color: pink;
-    font-size: 40px; /* Adjust the font size as needed */
+            margin-bottom: 20px;
+            font-family: 'Barlow Condensed';
+            color: pink;
         }
     #inputs {
   flex-grow: 1;
@@ -160,7 +80,7 @@
         }
 
         .image-box {
-    width: 100px; /* Adjust the width as needed */
+    width: 200px; /* Adjust the width as needed */
     height: 200px; /* Adjust the height as needed */
     border: 2px solid #ffffff; /* Set the border color to white */
     border-radius: 10px;
@@ -210,8 +130,8 @@
         }
           #image-box {
   border: 2px solid blue;
-  width: 265px;
-  height: 300px;
+  width: 330px;
+  height: 330px;
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
@@ -226,57 +146,20 @@
 }
 
 #image-box p {
-
+  width: 80%;
   font-size: 20px;
   color: white; 
-  text-align :center ;
 }
-#showadv {
-    padding: 10px 20px;
-    /* Auto margin for centering horizontally */
-    background-image: linear-gradient(
-        45deg,
-        hsl(240deg 75% 29%) 0%,
-        hsl(254deg 78% 28%) 6%,
-        hsl(264deg 82% 27%) 13%,
-        hsl(272deg 87% 26%) 19%,
-        hsl(278deg 93% 25%) 25%,
-        hsl(284deg 98% 24%) 31%,
-        hsl(289deg 100% 23%) 37%,
-        hsl(294deg 100% 23%) 44%,
-        hsl(299deg 100% 22%) 50%,
-        hsl(303deg 100% 23%) 56%,
-        hsl(307deg 100% 24%) 63%,
-        hsl(311deg 100% 25%) 69%,
-        hsl(313deg 100% 26%) 75%,
-        hsl(316deg 95% 28%) 81%,
-        hsl(320deg 88% 30%) 87%,
-        hsl(323deg 81% 32%) 94%,
-        hsl(326deg 75% 33%) 100%
-    );
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    color: #fff;
-     text-align: center;
-     display: inline-block;
-     margin: 0 auto;
-    width: 200px;
-    border: none;
-    color: white;
-    padding: 10px 20px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin-top: 10px;
-    cursor: pointer;
-    border-radius: 5px;
-    display: block;
-    margin: 0 auto;
-    width: 200px;
-}
-
+  #showadv{
+            padding: 10px 20px;
+            margin: 10px;
+            background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            color: #fff;
+            
+        }
  #advanced-options {
              flex-grow: 1;
       padding: 10px;
@@ -294,7 +177,6 @@
        display: none;
       align-items: center;
       border: 2px solid rgb(247, 6, 187);
-      text-align :center ;
         }
         #advanced-options label, #advanced-options input {
             margin: 10px;
@@ -307,48 +189,12 @@
         }
         #advanced-options button {
             padding: 10px 20px;
-    /* Auto margin for centering horizontally */
-    background-image: linear-gradient(
-        45deg,
-        hsl(240deg 75% 29%) 0%,
-        hsl(254deg 78% 28%) 6%,
-        hsl(264deg 82% 27%) 13%,
-        hsl(272deg 87% 26%) 19%,
-        hsl(278deg 93% 25%) 25%,
-        hsl(284deg 98% 24%) 31%,
-        hsl(289deg 100% 23%) 37%,
-        hsl(294deg 100% 23%) 44%,
-        hsl(299deg 100% 22%) 50%,
-        hsl(303deg 100% 23%) 56%,
-        hsl(307deg 100% 24%) 63%,
-        hsl(311deg 100% 25%) 69%,
-        hsl(313deg 100% 26%) 75%,
-        hsl(316deg 95% 28%) 81%,
-        hsl(320deg 88% 30%) 87%,
-        hsl(323deg 81% 32%) 94%,
-        hsl(326deg 75% 33%) 100%
-    );
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    color: #fff;
-     text-align: center;
-     display: inline-block;
-     margin: 0 auto;
-    width: 50px;
-    border: none;
-    color: white;
-    padding: 10px 20px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin-top: 10px;
-    cursor: pointer;
-    border-radius: 5px;
-    display: block;
-    margin: 0 auto;
-    width: 200px;
+            margin: 10px;
+            background: linear-gradient(145deg, rgb(0, 149, 249), #ff0095, rgb(255, 0, 43));
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            color: #fff;
             
         }
         #advanced-options button:hover {
@@ -363,29 +209,27 @@
         <h1>Aiconvert.online </h1>
        
         <div id="cont">
-            
-            
-                <input type="text" id="prompt" name="prompt"placeholder="Enter Text Idea">
-            
+            <div>
+                <label for="prompt">Enter text:</label>
+                <input type="text" id="prompt" name="prompt">
+            </div>
             <br>
-        
-        </div>
             <div>
-                <button id="generatePrompts" onclick="generatePrompts()">Generate Prompts</button>
-              
+                <button onclick="generatePrompts()">Generate Prompts</button>
+                <div id="promptSpinner" class="spinner" style="display: none;"></div>
             </div>
+        </div>
         <br>
-      <div id="cont" style="position: relative;">
-    <div>
-        <div id="promptSpinner" class="spinner" style="display: none;"></div>
-  
-        <input type="text" id="inputs" name="inputs" placeholder="Enter prompt" >
-    </div>
-
-
-            
+        <div id="cont">
+            <div>
+                <label for="inputs">Enter prompt:</label>
+                <input type="text" id="inputs" name="inputs">
+            </div>
             <br>
-        
+            <div>
+                <button onclick="sendInputs()">generate image </button>
+                <div id="sendSpinner" class="spinner" style="display: none;"></div>
+            </div>
         </div>
         <br>
          <button id="showadv" onclick="toggleAdvancedOptions()">Advanced Options</button>
@@ -410,17 +254,12 @@
 <span id="noise-level-value">0</span>
 
             <br>
-            <button onclick="toggleAdvancedOptions()">Hide </button>
+            <button onclick="toggleAdvancedOptions()">Hide Advanced Options</button>
         </div>
         <br>
-        	    <div>
-                <button id ="generate" onclick="sendInputs()">generate image </button>
-               
-            </div>
         <div id="output-container" class="image-container">
             <div id="image-box" class="image-box">
-                <p>Your Generated Image Will Appear Here</p>
-                 <div id="sendSpinner" class="spinner" style="display: none;"></div>
+                <p>Your Generated Arts Will Appear Here</p>
             </div>
         </div>
     </div>
@@ -472,7 +311,6 @@ function sendInputs() {
         })
         .then(data => {
             const imageBox = document.getElementById("image-box");
-            imageBox.innerHTML = ""; // Clear previous content
             const img = new Image();
             img.src = 'data:image/jpeg;base64,' + data.image_base64;
             const maxWidth = 200;
@@ -493,7 +331,6 @@ function sendInputs() {
         });
 }
 
-
 function toggleAdvancedOptions() {
     const advancedOptions = document.getElementById("advanced-options");
     if (advancedOptions.style.display === "none") {
@@ -531,4 +368,4 @@ function toggleAdvancedOptions() {
 
 </script>
 </body>
-</html>
+</html>