Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Raindrop Quest: Harvest Hero</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| margin: 0; | |
| overflow: hidden; /* Hide overflow from falling raindrops */ | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background: linear-gradient(135deg, #87CEEB 0%, #ADD8E6 50%, #4682B4 100%); /* Blue sky to deeper blue water */ | |
| position: relative; | |
| color: #fff; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
| background-size: 200% 200%; | |
| animation: gradientAnimation 15s ease infinite; | |
| } | |
| @keyframes gradientAnimation { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .landing-container { | |
| text-align: center; | |
| z-index: 10; | |
| position: relative; | |
| background: rgba(0, 0, 0, 0.4); /* Semi-transparent overlay for text readability */ | |
| padding: 40px 60px; | |
| border-radius: 20px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| border: 5px solid #FFD700; /* Gold border */ | |
| animation: pulseBorder 2s infinite alternate; | |
| } | |
| @keyframes pulseBorder { | |
| 0% { border-color: #FFD700; box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); } | |
| 100% { border-color: #FFA500; box-shadow: 0 0 25px rgba(255, 165, 0, 0.9); } | |
| } | |
| h1 { | |
| font-family: 'Fredoka One', cursive; | |
| font-size: 4.5em; /* Large game title */ | |
| margin-bottom: 10px; | |
| color: #FFFFF0; /* Ivory/cream for title */ | |
| letter-spacing: 2px; | |
| text-shadow: 4px 4px 8px rgba(0,0,0,0.6); | |
| line-height: 1; | |
| } | |
| p { | |
| font-size: 1.5em; | |
| margin-top: 0; | |
| margin-bottom: 40px; | |
| font-weight: 700; | |
| } | |
| .play-button { | |
| display: inline-block; | |
| background-color: #2ECC71; /* Green, like a "go" button */ | |
| color: white; | |
| padding: 20px 40px; | |
| font-size: 2em; | |
| font-family: 'Fredoka One', cursive; | |
| text-decoration: none; | |
| border-radius: 50px; /* Pill shape */ | |
| box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| border: none; | |
| cursor: pointer; | |
| outline: none; | |
| } | |
| .play-button:hover { | |
| background-color: #27AE60; /* Darker green on hover */ | |
| transform: translateY(-3px) scale(1.02); | |
| box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4); | |
| } | |
| .play-button:active { | |
| transform: translateY(1px) scale(0.98); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| } | |
| /* Water-related decorative elements (simple CSS shapes) */ | |
| .water-tank { | |
| position: absolute; | |
| bottom: -50px; | |
| left: 50%; | |
| transform: translateX(-50%) rotate(5deg); | |
| width: 180px; | |
| height: 250px; | |
| background: linear-gradient(to right, #6A82FB, #2196F3); | |
| border-radius: 10% 10% 50% 50% / 5% 5% 30% 30%; | |
| box-shadow: inset 0 0 15px rgba(0,0,0,0.3); | |
| z-index: 5; | |
| animation: floatTank 8s ease-in-out infinite alternate; | |
| } | |
| .water-tank::before { /* Water level */ | |
| content: ''; | |
| position: absolute; | |
| top: 20%; | |
| left: 0; | |
| width: 100%; | |
| height: 80%; | |
| background: rgba(173, 216, 230, 0.7); /* Light blue water */ | |
| border-radius: 0 0 50% 50% / 0 0 30% 30%; | |
| animation: fillWater 8s ease-in-out infinite alternate; | |
| } | |
| .water-tank::after { /* Spout */ | |
| content: ''; | |
| position: absolute; | |
| top: 40%; | |
| left: -30px; | |
| width: 40px; | |
| height: 20px; | |
| background-color: #A9A9A9; | |
| border-radius: 5px 0 0 5px; | |
| } | |
| @keyframes floatTank { | |
| 0% { transform: translateX(-50%) rotate(5deg); bottom: -50px; } | |
| 50% { transform: translateX(-50%) rotate(-5deg); bottom: -60px; } | |
| 100% { transform: translateX(-50%) rotate(5deg); bottom: -50px; } | |
| } | |
| @keyframes fillWater { | |
| 0% { top: 70%; } | |
| 50% { top: 20%; } | |
| 100% { top: 70%; } | |
| } | |
| .raindrop { | |
| position: absolute; | |
| background-color: rgba(255, 255, 255, 0.7); | |
| border-radius: 50%; | |
| opacity: 0; | |
| animation: fall 5s linear infinite; | |
| pointer-events: none; /* Make sure they don't block clicks */ | |
| } | |
| @keyframes fall { | |
| 0% { | |
| transform: translateY(-100px) scale(0.5); | |
| opacity: 0; | |
| } | |
| 20% { | |
| opacity: 0.8; | |
| } | |
| 100% { | |
| transform: translateY(110vh) scale(1.2); | |
| opacity: 0; | |
| } | |
| } | |
| /* Generate multiple raindrops with varying sizes, delays, and positions */ | |
| .raindrop:nth-child(1) { left: 10%; width: 15px; height: 15px; animation-delay: 0s; } | |
| .raindrop:nth-child(2) { left: 25%; width: 10px; height: 10px; animation-delay: 1.5s; background-color: rgba(255, 255, 255, 0.5); } | |
| .raindrop:nth-child(3) { left: 40%; width: 20px; height: 20px; animation-delay: 3s; } | |
| .raindrop:nth-child(4) { left: 60%; width: 12px; height: 12px; animation-delay: 0.5s; background-color: rgba(255, 255, 255, 0.6); } | |
| .raindrop:nth-child(5) { left: 75%; width: 18px; height: 18px; animation-delay: 2.5s; } | |
| .raindrop:nth-child(6) { left: 85%; width: 8px; height: 8px; animation-delay: 4s; background-color: rgba(255, 255, 255, 0.4); } | |
| /* Add more for a denser effect */ | |
| .raindrop:nth-child(7) { left: 5%; width: 14px; height: 14px; animation-delay: 1s; } | |
| .raindrop:nth-child(8) { left: 30%; width: 11px; height: 11px; animation-delay: 2s; background-color: rgba(255, 255, 255, 0.6); } | |
| .raindrop:nth-child(9) { left: 50%; width: 16px; height: 16px; animation-delay: 0.8s; } | |
| .raindrop:nth-child(10) { left: 70%; width: 9px; height: 9px; animation-delay: 3.5s; background-color: rgba(255, 255, 255, 0.5); } | |
| </style> | |
| </head> | |
| <body> | |
| <img src="/static/WhatsApp Image 2025-09-18 at 18.33.55_105edc80.jpg" alt="Logo" style="position: fixed; top: 20px; right: 30px; width: 80px; height: auto; z-index: 1000; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);"> | |
| <div class="landing-container"> | |
| <h1>💧 Raindrop Quest: Harvest Hero</h1> | |
| <p>Learn about Rainwater Harvesting in a Fun Way!</p> | |
| <a href="{{ url_for('dashboard') }}" class="play-button">Start Your Journey!</a> | |
| </div> | |
| <div class="water-tank"></div> | |
| <!-- Falling raindrops for background effect --> | |
| <div class="raindrop"></div> | |
| <div class="raindrop"></div> | |
| <div class="raindrop"></div> | |
| <div class="raindrop"></div> | |
| <div class="raindrop"></div> | |
| <div class="raindrop"></div> | |
| <div class="raindrop"></div> | |
| <div class="raindrop"></div> | |
| <div class="raindrop"></div> | |
| <div class="raindrop"></div> | |
| </body> | |
| </html> |