Update templates/index.html

templates/index.html

@@ -36,7 +36,7 @@
                 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;
+            z-index: -2;
         }
 
         @keyframes backgroundPulse {
@@ -54,6 +54,217 @@
             }
         }
 
+        /* Animated character backgrounds */
+        .character-animations {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+            overflow: hidden;
+        }
+
+        /* Boy using mobile animation */
+        .mobile-boy {
+            position: absolute;
+            top: 15%;
+            left: 8%;
+            font-size: 80px;
+            animation: mobileUsage 4s ease-in-out infinite;
+            opacity: 0.4;
+            filter: blur(1px);
+        }
+
+        .mobile-boy::before {
+            content: '🧑‍💻📱';
+            display: block;
+            animation: phoneGlow 2s ease-in-out infinite alternate;
+        }
+
+        .mobile-boy::after {
+            content: '💭📲';
+            position: absolute;
+            top: -20px;
+            right: -30px;
+            font-size: 30px;
+            animation: thoughtBubble 3s ease-in-out infinite;
+        }
+
+        @keyframes mobileUsage {
+            0%, 100% { 
+                transform: translateY(0px) rotate(-2deg);
+                opacity: 0.4;
+            }
+            25% {
+                transform: translateY(-5px) rotate(1deg);
+                opacity: 0.6;
+            }
+            50% { 
+                transform: translateY(-8px) rotate(-1deg);
+                opacity: 0.5;
+            }
+            75% {
+                transform: translateY(-3px) rotate(2deg);
+                opacity: 0.6;
+            }
+        }
+
+        @keyframes phoneGlow {
+            0% { filter: brightness(1) drop-shadow(0 0 5px rgba(102, 126, 234, 0.3)); }
+            100% { filter: brightness(1.2) drop-shadow(0 0 15px rgba(102, 126, 234, 0.6)); }
+        }
+
+        @keyframes thoughtBubble {
+            0%, 100% { 
+                opacity: 0.3;
+                transform: translateY(0px) scale(0.8);
+            }
+            50% { 
+                opacity: 0.7;
+                transform: translateY(-10px) scale(1.1);
+            }
+        }
+
+        /* Boy sleeping animation */
+        .sleeping-boy {
+            position: absolute;
+            bottom: 20%;
+            right: 10%;
+            font-size: 70px;
+            animation: sleepingMotion 5s ease-in-out infinite;
+            opacity: 0.4;
+            filter: blur(1px);
+        }
+
+        .sleeping-boy::before {
+            content: '😴🛏️';
+            display: block;
+            animation: sleepBreathing 3s ease-in-out infinite;
+        }
+
+        .sleeping-boy::after {
+            content: '💤zzZ';
+            position: absolute;
+            top: -25px;
+            left: 40px;
+            font-size: 35px;
+            animation: sleepZzz 2s ease-in-out infinite;
+            color: rgba(255, 255, 255, 0.8);
+        }
+
+        @keyframes sleepingMotion {
+            0%, 100% { 
+                transform: translateY(0px) rotate(0deg);
+                opacity: 0.4;
+            }
+            50% { 
+                transform: translateY(-3px) rotate(-1deg);
+                opacity: 0.6;
+            }
+        }
+
+        @keyframes sleepBreathing {
+            0%, 100% { 
+                transform: scale(1);
+                filter: brightness(0.9);
+            }
+            50% { 
+                transform: scale(1.05);
+                filter: brightness(1.1);
+            }
+        }
+
+        @keyframes sleepZzz {
+            0% { 
+                opacity: 0;
+                transform: translateY(0px) scale(0.8);
+            }
+            25% {
+                opacity: 0.8;
+                transform: translateY(-10px) scale(1);
+            }
+            50% {
+                opacity: 0.6;
+                transform: translateY(-20px) scale(1.1);
+            }
+            75% {
+                opacity: 0.4;
+                transform: translateY(-30px) scale(0.9);
+            }
+            100% { 
+                opacity: 0;
+                transform: translateY(-40px) scale(0.7);
+            }
+        }
+
+        /* Additional mobile addiction scene */
+        .addiction-scene {
+            position: absolute;
+            top: 60%;
+            left: 5%;
+            font-size: 45px;
+            animation: addictionWarning 6s ease-in-out infinite;
+            opacity: 0.3;
+            filter: blur(0.5px);
+        }
+
+        .addiction-scene::before {
+            content: '😰📱⚠️';
+            display: block;
+            animation: warningPulse 1.5s ease-in-out infinite;
+        }
+
+        @keyframes addictionWarning {
+            0%, 100% { 
+                transform: translateX(0px) scale(1);
+                opacity: 0.3;
+            }
+            50% { 
+                transform: translateX(10px) scale(1.1);
+                opacity: 0.5;
+            }
+        }
+
+        @keyframes warningPulse {
+            0%, 100% { filter: brightness(1) hue-rotate(0deg); }
+            50% { filter: brightness(1.3) hue-rotate(30deg); }
+        }
+
+        /* Good sleep scene */
+        .good-sleep-scene {
+            position: absolute;
+            bottom: 10%;
+            left: 15%;
+            font-size: 50px;
+            animation: peacefulSleep 7s ease-in-out infinite;
+            opacity: 0.35;
+            filter: blur(0.5px);
+        }
+
+        .good-sleep-scene::before {
+            content: '😇🌙✨';
+            display: block;
+            animation: peacefulGlow 3s ease-in-out infinite;
+        }
+
+        @keyframes peacefulSleep {
+            0%, 100% { 
+                transform: translateY(0px) rotate(0deg);
+                opacity: 0.35;
+            }
+            50% { 
+                transform: translateY(-5px) rotate(1deg);
+                opacity: 0.5;
+            }
+        }
+
+        @keyframes peacefulGlow {
+            0%, 100% { filter: brightness(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); }
+            50% { filter: brightness(1.4) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6)); }
+        }
+
         /* Floating decorative elements */
         .floating-elements {
             position: fixed;
@@ -261,6 +472,7 @@
             transform: translateY(0);
             position: relative;
             overflow: hidden;
+            z-index: 10;
         }
 
         .container::before {
@@ -649,6 +861,22 @@
             .floating-shape {
                 font-size: 30px !important;
             }
+
+            .mobile-boy {
+                font-size: 50px;
+            }
+
+            .sleeping-boy {
+                font-size: 45px;
+            }
+
+            .addiction-scene {
+                font-size: 30px;
+            }
+
+            .good-sleep-scene {
+                font-size: 35px;
+            }
         }
 
         @media (max-width: 768px) {
@@ -798,6 +1026,21 @@
     </style>
 </head>
 <body>
+    <!-- Character Animations -->
+    <div class="character-animations">
+        <!-- Boy using mobile -->
+        <div class="mobile-boy"></div>
+        
+        <!-- Boy sleeping -->
+        <div class="sleeping-boy"></div>
+        
+        <!-- Mobile addiction scene -->
+        <div class="addiction-scene"></div>
+        
+        <!-- Good sleep scene -->
+        <div class="good-sleep-scene"></div>
+    </div>
+
     <!-- Floating decorative elements -->
     <div class="floating-elements">
         <div class="floating-shape shape-1">🧠</div>