Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>AquaQuest — Rainwater Harvesting Gamification</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary: #0ea5e9; | |
| --primary-dark: #0284c7; | |
| --secondary: #06b6d4; | |
| --accent: #10b981; | |
| --warning: #f59e0b; | |
| --success: #22c55e; | |
| --error: #ef4444; | |
| --bg-primary: #f8fafc; | |
| --bg-secondary: #ffffff; | |
| --text-primary: #0f172a; | |
| --text-secondary: #64748b; | |
| --text-muted: #94a3b8; | |
| --border: #e2e8f0; | |
| --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); | |
| --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); | |
| --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); | |
| --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); | |
| --radius: 16px; | |
| --radius-sm: 8px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; | |
| background: linear-gradient(135deg, #e0f7ff 0%, #f0f9ff 50%, #f8fafc 100%); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| .header-bg { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="water" patternUnits="userSpaceOnUse" width="10" height="10"><circle cx="5" cy="5" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23water)"/></svg>'); | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero { | |
| padding: 60px 0; | |
| text-align: center; | |
| color: white; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.5rem, 5vw, 4rem); | |
| font-weight: 800; | |
| margin-bottom: 16px; | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .hero .subtitle { | |
| font-size: 1.25rem; | |
| opacity: 0.9; | |
| margin-bottom: 32px; | |
| } | |
| .main-content { | |
| padding: 60px 0; | |
| background: var(--bg-primary); | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 48px; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: 16px; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .section-title p { | |
| font-size: 1.1rem; | |
| color: var(--text-secondary); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .cards-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); | |
| gap: 32px; | |
| margin-bottom: 60px; | |
| } | |
| .card { | |
| background: var(--bg-secondary); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow-lg); | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| border: 1px solid var(--border); | |
| position: relative; | |
| cursor: pointer; | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .card:hover { | |
| transform: translateY(-12px) scale(1.02); | |
| box-shadow: var(--shadow-xl); | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, rgba(14, 165, 233, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .card:hover::before { | |
| opacity: 1; | |
| } | |
| .card-image { | |
| width: 100%; | |
| height: 200px; | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card-image::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%); | |
| } | |
| .card-header { | |
| padding: 32px; | |
| background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); | |
| position: relative; | |
| } | |
| .card-icon { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 20px; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 24px; | |
| box-shadow: var(--shadow-md); | |
| position: absolute; | |
| top: -40px; | |
| right: 20px; | |
| } | |
| .card-icon i { | |
| font-size: 2rem; | |
| color: white; | |
| } | |
| .card-title { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 12px; | |
| color: var(--text-primary); | |
| margin-right: 100px; | |
| } | |
| .card-description { | |
| color: var(--text-secondary); | |
| font-size: 1rem; | |
| line-height: 1.6; | |
| } | |
| .card-body { | |
| padding: 32px; | |
| } | |
| .play-indicator { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 50px; | |
| height: 50px; | |
| background: linear-gradient(135deg, var(--accent) 0%, var(--success) 100%); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.2rem; | |
| box-shadow: var(--shadow-md); | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover .play-indicator { | |
| transform: scale(1.1); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .notification { | |
| position: fixed; | |
| top: 24px; | |
| right: 24px; | |
| background: var(--success); | |
| color: white; | |
| padding: 16px 24px; | |
| border-radius: var(--radius-sm); | |
| box-shadow: var(--shadow-lg); | |
| transform: translateX(400px); | |
| transition: transform 0.3s ease; | |
| z-index: 1000; | |
| } | |
| .notification.show { | |
| transform: translateX(0); | |
| } | |
| @media (max-width: 768px) { | |
| .hero { | |
| padding: 40px 0; | |
| } | |
| .cards-grid { | |
| grid-template-columns: 1fr; | |
| gap: 24px; | |
| } | |
| .card-header, .card-body { | |
| padding: 24px; | |
| } | |
| .card-title { | |
| font-size: 1.3rem; | |
| margin-right: 80px; | |
| } | |
| .card-icon { | |
| width: 60px; | |
| height: 60px; | |
| top: -30px; | |
| right: 15px; | |
| } | |
| .card-icon i { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header-bg"> | |
| <div class="container"> | |
| <div class="hero"> | |
| <h1><i class="fas fa-tint"></i> AquaQuest</h1> | |
| <p class="subtitle">Gamify Your Rainwater Harvesting Journey</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="main-content"> | |
| <div class="container"> | |
| <div class="cards-grid"> | |
| <!-- Learning Module Game Card --> | |
| <!-- Learning Module Game Card --> | |
| <a href="https://pranit144-gameforrhw.hf.space" class="card" target="_blank"> | |
| <div class="card-image" style="background-image: url('static/images/1 (1).png');"> | |
| </div> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-gamepad"></i> | |
| </div> | |
| <h3 class="card-title">Learning Module Using Gamification</h3> | |
| <p class="card-description">Interactive educational games that teach rainwater harvesting concepts through engaging gameplay and challenges</p> | |
| </div> | |
| <div class="play-indicator"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </a> | |
| <!-- Challenge Game Card --> | |
| <a href="https://huggingface.co/spaces/RushiMane2003/page3" class="card" target="_blank"> | |
| <div class="card-image" style="background-image: url('static/images/1 (2).png');"> | |
| </div> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-bullseye"></i> | |
| </div> | |
| <h3 class="card-title">Rainwater Harvesting Challenges</h3> | |
| <p class="card-description">Take on exciting challenges that test your knowledge and skills in rainwater collection and conservation techniques</p> | |
| </div> | |
| <div class="play-indicator"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </a> | |
| <!-- Natural Harvester Finder Card --> | |
| <a href="https://pranit144-page1.static.hf.space" class="card" target="_blank"> | |
| <div class="card-image" style="background-image: url('static/images/1 (3).png');"> | |
| </div> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-search-location"></i> | |
| </div> | |
| <h3 class="card-title">Find Indian Natural Rain Water Harvester</h3> | |
| <p class="card-description">Explore and discover natural rainwater harvesting systems in your environment and learn from nature's own solutions</p> | |
| </div> | |
| <div class="play-indicator"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </a> | |
| <!-- Optimal Solution Drag & Drop Card --> | |
| <a href="https://pranit144-page2.static.hf.space" class="card" target="_blank"> | |
| <div class="card-image" style="background-image: url('static/images/1 (4).png');"> | |
| </div> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-puzzle-piece"></i> | |
| </div> | |
| <h3 class="card-title">Optimal Solution Drag & Drop Game</h3> | |
| <p class="card-description">Build the perfect rainwater harvesting system by dragging and dropping components to create optimal water collection solutions</p> | |
| </div> | |
| <div class="play-indicator"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </a> | |
| <!-- Puzzle Game Card --> | |
| <a href="https://www.proprofsgames.com/puzzle/sliding/pg-rain-water-harvesting-sliding-image-quiz/" class="card" target="_blank"> | |
| <div class="card-image" style="background-image: url('static/images/1 (5).png');"> | |
| </div> | |
| <div class="card-header"> | |
| <div class="card-icon"> | |
| <i class="fas fa-th-large"></i> | |
| </div> | |
| <h3 class="card-title">Rainwater Harvesting Puzzle Game</h3> | |
| <p class="card-description">Solve interactive sliding puzzles featuring rainwater harvesting systems while learning about water conservation techniques</p> | |
| </div> | |
| <div class="play-indicator"> | |
| <i class="fas fa-play"></i> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notification --> | |
| <div id="notification" class="notification"> | |
| <span id="notification-text"></span> | |
| </div> | |
| <script> | |
| function showNotification(message) { | |
| const notification = document.getElementById('notification'); | |
| const text = document.getElementById('notification-text'); | |
| text.textContent = message; | |
| notification.classList.add('show'); | |
| setTimeout(() => { | |
| notification.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // Add click tracking for analytics (optional) | |
| document.addEventListener('DOMContentLoaded', function() { | |
| document.querySelectorAll('.card').forEach(card => { | |
| card.addEventListener('click', function(e) { | |
| const title = this.querySelector('.card-title').textContent; | |
| showNotification(`🎮 Opening: ${title}`); | |
| }); | |
| }); | |
| // Add entrance animations | |
| const cards = document.querySelectorAll('.card'); | |
| cards.forEach((card, index) => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(50px)'; | |
| setTimeout(() => { | |
| card.style.transition = 'all 0.6s ease'; | |
| card.style.opacity = '1'; | |
| card.style.transform = 'translateY(0)'; | |
| }, index * 200); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |