Update templates/index.html

templates/index.html

@@ -10,9 +10,10 @@
     body { 
       background: linear-gradient(135deg,#667eea,#764ba2);
       padding:2rem; color:#fff; min-height:100vh;
+      display:flex; justify-content:center; align-items:flex-start;
     }
-    .container { max-width: 1200px; margin:auto; }
-    header { text-align:center; margin-bottom:2rem; }
+    .container { width:100%; max-width:1000px; margin:auto; display:flex; flex-direction:column; gap:2rem; }
+    header { text-align:center; margin-bottom:1rem; }
     h1 { font-size:3rem; font-weight:800; background: linear-gradient(90deg,#ff9a9e,#fad0c4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
     p { font-size:1.1rem; margin-top:8px; color:#f0f0f0; }
     
@@ -20,27 +21,25 @@
       background: rgba(255,255,255,0.1); 
       backdrop-filter: blur(12px);
       border-radius:20px; padding:2rem; 
-      margin-bottom:2rem; 
       box-shadow:0 20px 40px rgba(0,0,0,0.2); 
-      transition: transform 0.3s, box-shadow 0.3s;
+      display:flex; flex-direction:column; gap:1rem;
     }
-    .card:hover { transform: translateY(-5px); box-shadow:0 25px 50px rgba(0,0,0,0.25); }
 
     .btn { 
-      display:inline-block; padding:12px 24px; border-radius:12px; 
+      padding:12px 24px; border-radius:12px; 
       border:none; cursor:pointer; font-weight:700; 
       background: linear-gradient(135deg,#ff758c,#ff7eb3); color:#fff; 
-      transition: all 0.3s;
+      transition: all 0.3s; 
       box-shadow: 0 6px 15px rgba(0,0,0,0.2);
     }
     .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.25); }
 
-    .tools { display:flex; flex-wrap:wrap; gap:12px; margin-top:1rem; }
+    .tools { display:flex; flex-wrap:wrap; gap:12px; margin-top:0.5rem; align-items:center; }
     .tools input { flex:1; padding:12px; border-radius:10px; border:none; outline:none; }
 
     .small { font-size:0.85rem; color:#e0e0e0; margin-top:6px; }
 
-    .grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:1rem; }
+    .grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:1rem; justify-items:center; }
     .gallery img { width:100%; border-radius:16px; object-fit:cover; height:180px; transition: transform 0.3s, filter 0.3s; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3)); }
     .gallery img:hover { transform: scale(1.07) rotate(-1deg); filter: drop-shadow(0 10px 25px rgba(0,0,0,0.4)); }
 
@@ -49,6 +48,8 @@
     @media (max-width: 768px){ 
       h1{font-size:2rem;} 
       .gallery img{height:150px;}
+      .tools { flex-direction:column; }
+      .tools input, .tools button { width:100%; }
     }
   </style>
 </head>