Update templates/index.html

templates/index.html

@@ -13,19 +13,113 @@
 
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
             min-height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
             padding: 20px;
-            animation: backgroundShift 10s ease-in-out infinite;
             position: relative;
+            overflow-x: hidden;
         }
 
-        @keyframes backgroundShift {
-            0%, 100% { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
-            50% { background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); }
+        /* Animated background with floating shapes */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: 
+                radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 70%),
+                radial-gradient(circle at 75% 75%, rgba(255,255,255,0.08) 0%, transparent 70%),
+                radial-gradient(circle at 50% 50%, rgba(102,126,234,0.1) 0%, transparent 60%);
+            animation: backgroundPulse 8s ease-in-out infinite;
+            z-index: -1;
+        }
+
+        @keyframes backgroundPulse {
+            0%, 100% { 
+                background: 
+                    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.1) 0%, transparent 70%),
+                    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.08) 0%, transparent 70%),
+                    radial-gradient(circle at 50% 50%, rgba(102,126,234,0.1) 0%, transparent 60%);
+            }
+            50% { 
+                background: 
+                    radial-gradient(circle at 75% 25%, rgba(255,255,255,0.12) 0%, transparent 70%),
+                    radial-gradient(circle at 25% 75%, rgba(255,255,255,0.1) 0%, transparent 70%),
+                    radial-gradient(circle at 50% 50%, rgba(118,75,162,0.1) 0%, transparent 60%);
+            }
+        }
+
+        /* Floating decorative elements */
+        .floating-elements {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+        }
+
+        .floating-shape {
+            position: absolute;
+            opacity: 0.6;
+            animation: float 6s ease-in-out infinite;
+        }
+
+        .shape-1 {
+            top: 20%;
+            left: 10%;
+            font-size: 60px;
+            animation-delay: 0s;
+            animation-duration: 8s;
+        }
+
+        .shape-2 {
+            top: 60%;
+            right: 15%;
+            font-size: 45px;
+            animation-delay: 2s;
+            animation-duration: 7s;
+        }
+
+        .shape-3 {
+            top: 80%;
+            left: 20%;
+            font-size: 50px;
+            animation-delay: 4s;
+            animation-duration: 9s;
+        }
+
+        .shape-4 {
+            top: 15%;
+            right: 25%;
+            font-size: 40px;
+            animation-delay: 1s;
+            animation-duration: 6s;
+        }
+
+        .shape-5 {
+            top: 45%;
+            left: 5%;
+            font-size: 35px;
+            animation-delay: 3s;
+            animation-duration: 8s;
+        }
+
+        @keyframes float {
+            0%, 100% { 
+                transform: translateY(0px) rotate(0deg); 
+                opacity: 0.6;
+            }
+            50% { 
+                transform: translateY(-20px) rotate(180deg); 
+                opacity: 0.8;
+            }
         }
 
         .developer-info {
@@ -152,25 +246,79 @@
         }
 
         .container {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
+            background: rgba(255, 255, 255, 0.98);
+            backdrop-filter: blur(20px);
             padding: 40px;
-            border-radius: 20px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.1);
+            border-radius: 24px;
+            box-shadow: 
+                0 25px 50px rgba(0,0,0,0.15), 
+                0 0 0 1px rgba(255,255,255,0.2),
+                inset 0 1px 0 rgba(255,255,255,0.3);
             width: 100%;
             max-width: 450px;
             text-align: center;
             animation: containerFloat 6s ease-in-out infinite;
             transform: translateY(0);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .container::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: conic-gradient(
+                from 0deg at 50% 50%,
+                transparent 0deg,
+                rgba(102, 126, 234, 0.03) 90deg,
+                transparent 180deg,
+                rgba(118, 75, 162, 0.03) 270deg,
+                transparent 360deg
+            );
+            animation: rotate 20s linear infinite;
+            z-index: -1;
+        }
+
+        @keyframes rotate {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
 
         @keyframes containerFloat {
-            0%, 100% { transform: translateY(0px) scale(1); }
-            50% { transform: translateY(-5px) scale(1.01); }
+            0%, 100% { 
+                transform: translateY(0px) scale(1);
+                box-shadow: 
+                    0 25px 50px rgba(0,0,0,0.15), 
+                    0 0 0 1px rgba(255,255,255,0.2),
+                    inset 0 1px 0 rgba(255,255,255,0.3);
+            }
+            50% { 
+                transform: translateY(-8px) scale(1.01);
+                box-shadow: 
+                    0 35px 70px rgba(0,0,0,0.2), 
+                    0 0 0 1px rgba(255,255,255,0.3),
+                    inset 0 1px 0 rgba(255,255,255,0.4);
+            }
         }
 
         .header {
             margin-bottom: 30px;
+            position: relative;
+        }
+
+        .header-icon {
+            font-size: 48px;
+            margin-bottom: 15px;
+            animation: headerIconFloat 4s ease-in-out infinite;
+            filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
+        }
+
+        @keyframes headerIconFloat {
+            0%, 100% { transform: translateY(0px) rotate(0deg); }
+            50% { transform: translateY(-5px) rotate(5deg); }
         }
 
         h1 {
@@ -213,7 +361,8 @@
             border-radius: 12px;
             font-size: 16px;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            background: #ffffff;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(5px);
             outline: none;
             position: relative;
         }
@@ -222,6 +371,7 @@
             border-color: #667eea;
             box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
             transform: translateY(-2px);
+            background: rgba(255, 255, 255, 1);
         }
 
         input[type="number"]::placeholder {
@@ -241,6 +391,7 @@
             transform: translateY(-50%);
             color: #a0aec0;
             transition: all 0.3s ease;
+            font-size: 18px;
         }
 
         input[type="number"]:focus + .input-icon {
@@ -276,7 +427,7 @@
         }
 
         .predict-btn:hover {
-            transform: translateY(-2px);
+            transform: translateY(-3px);
             box-shadow: 0 12px 25px rgba(102, 126, 234, 0.4);
         }
 
@@ -403,12 +554,14 @@
         }
 
         .result-card {
-            background: linear-gradient(135deg, #f7fafc, #edf2f7);
+            background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(247,250,252,0.9));
+            backdrop-filter: blur(10px);
             border-radius: 16px;
             padding: 25px;
-            border: 1px solid #e2e8f0;
+            border: 1px solid rgba(226,232,240,0.5);
             position: relative;
             overflow: hidden;
+            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
         }
 
         .result-card::before {
@@ -418,13 +571,8 @@
             left: -50%;
             width: 200%;
             height: 200%;
-            background: conic-gradient(from 0deg, transparent, rgba(102, 126, 234, 0.1), transparent);
-            animation: rotate 4s linear infinite;
-        }
-
-        @keyframes rotate {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+            background: conic-gradient(from 0deg, transparent, rgba(102, 126, 234, 0.05), transparent);
+            animation: rotate 8s linear infinite;
         }
 
         .result-content {
@@ -497,6 +645,10 @@
                 margin-bottom: 20px;
                 max-width: 100%;
             }
+
+            .floating-shape {
+                font-size: 30px !important;
+            }
         }
 
         @media (max-width: 768px) {
@@ -537,7 +689,7 @@
         .copyright {
             margin-top: 25px;
             padding-top: 20px;
-            border-top: 1px solid #e2e8f0;
+            border-top: 1px solid rgba(226,232,240,0.5);
             color: #718096;
             font-size: 12px;
             font-weight: 500;
@@ -549,12 +701,12 @@
             bottom: 20px;
             left: 20px;
             background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
+            backdrop-filter: blur(15px);
+            border-radius: 16px;
             padding: 15px;
             max-width: 280px;
-            box-shadow: 0 10px 25px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.1);
-            border: 1px solid #e2e8f0;
+            box-shadow: 0 15px 35px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.1);
+            border: 1px solid rgba(226,232,240,0.3);
             animation: slideInLeft 0.8s ease-out 1s both;
             z-index: 1000;
         }
@@ -626,10 +778,6 @@
             box-shadow: 0 4px 12px rgba(229, 62, 62, 0.4);
         }
 
-        .close-btn:active {
-            transform: scale(1.05);
-        }
-
         .close-btn:active {
             transform: scale(0.95);
         }
@@ -647,14 +795,18 @@
             pointer-events: none;
             transition: all 0.5s ease !important;
         }
-
-        .developer-header-title {
-            flex: 1;
-            text-align: center;
-        }
     </style>
 </head>
 <body>
+    <!-- Floating decorative elements -->
+    <div class="floating-elements">
+        <div class="floating-shape shape-1">🧠</div>
+        <div class="floating-shape shape-2">💚</div>
+        <div class="floating-shape shape-3">⭐</div>
+        <div class="floating-shape shape-4">🌟</div>
+        <div class="floating-shape shape-5">✨</div>
+    </div>
+
     <!-- Developer Information Panel -->
     <div class="developer-info" id="developerInfo">
         <div class="developer-header">
@@ -682,6 +834,7 @@
 
     <div class="container">
         <div class="header">
+            <div class="header-icon">🧠💡</div>
             <h1>Mental Wellness Predictor</h1>
             <p class="subtitle">Analyze your digital habits for wellness insights</p>
         </div>