Update index.html

index.html

@@ -30,11 +30,78 @@
         <script type="module" crossorigin src="https://gradio.s3-us-west-2.amazonaws.com/3.0.9b12/assets/index.8eca4ae7.js"></script>
         <link rel="stylesheet" href="https://gradio.s3-us-west-2.amazonaws.com/3.0.9b12/assets/index.cbea297d.css">
         <style>
-            #screenshot {
-                display: none;
+            body {
+                min-height: 100vh;
+                margin: 0;
+                padding: 0;
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
+                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            }
+            #root {
+                display: flex;
+                flex-direction: column;
+                flex-grow: 1;
+                align-items: center;
+                justify-content: center;
+                min-height: 100vh;
+            }
+            .container {
+                background: #fff;
+                border-radius: 18px;
+                box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+                padding: 2.5rem 2rem 2rem 2rem;
+                max-width: 800px;
+                margin: 2rem auto;
+                width: 100%;
+            }
+            input[type="text"], textarea {
+                width: 100%;
+                padding: 0.75rem 1rem;
+                border: 1px solid #e0e0e0;
+                border-radius: 8px;
+                font-size: 1rem;
+                margin-bottom: 1rem;
+                background: #f9fafb;
+                transition: border 0.2s;
+            }
+            input[type="text"]:focus, textarea:focus {
+                border: 1.5px solid #7b61ff;
+                outline: none;
+            }
+            button, #screenshot {
+                background: linear-gradient(90deg, #7b61ff 0%, #5eead4 100%);
+                color: #fff;
+                border: none;
+                border-radius: 8px;
+                padding: 0.75rem 1.5rem;
+                font-size: 1.1rem;
+                font-weight: 600;
+                cursor: pointer;
+                box-shadow: 0 2px 8px rgba(123,97,255,0.08);
+                transition: background 0.2s, transform 0.1s;
+                margin-bottom: 1rem;
+            }
+            button:hover, #screenshot:hover {
+                background: linear-gradient(90deg, #5eead4 0%, #7b61ff 100%);
+                transform: translateY(-2px) scale(1.03);
+            }
+            .gallery {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+                gap: 1.2rem;
+                margin-top: 1.5rem;
+            }
+            .gallery img {
+                width: 100%;
+                border-radius: 12px;
+                box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+                background: #f3f4f6;
             }
             .container > div > div {
-                padding: 0.5rem;                
+                padding: 0.5rem;
             }
             footer a {
                 color: rgb(156 163 175) !important;