Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rainwater Chronicles</title> | |
| <style> | |
| /* Animated Game Background */ | |
| body { | |
| background: linear-gradient(135deg, #232526 0%, #414345 100%); | |
| min-height: 100vh; | |
| position: relative; | |
| overflow-x: hidden; | |
| } | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| z-index: 0; | |
| background: url('https://www.transparenttextures.com/patterns/stardust.png'), linear-gradient(120deg, #232526 0%, #414345 100%); | |
| opacity: 0.25; | |
| pointer-events: none; | |
| animation: bgmove 30s linear infinite alternate; | |
| } | |
| @keyframes bgmove { | |
| 0% { background-position: 0 0, 0 0; } | |
| 100% { background-position: 200px 200px, 0 0; } | |
| } | |
| /* static/style.css */ | |
| /* Import Google Fonts */ | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| /* Global Styles */ | |
| body { | |
| font-family: 'Poppins', 'Press Start 2P', 'Orbitron', sans-serif; | |
| margin: 0; | |
| background: none; | |
| color: #e0e6f8; | |
| line-height: 1.6; /* Improve readability */ | |
| } | |
| /* Main Container - Desktop First */ | |
| .main-container { | |
| display: flex; | |
| min-height: 100vh; | |
| } | |
| /* Sidebar - Desktop First */ | |
| .sidebar { | |
| width: 280px; | |
| background: linear-gradient(180deg, #0f2027 0%, #2c5364 100%); | |
| padding: 2rem; | |
| color: #fff; | |
| box-shadow: 2px 0 20px rgba(44,83,100,0.25), 0 0 20px 2px #00ffe7a0 inset; | |
| position: sticky; | |
| top: 0; | |
| height: 100vh; | |
| overflow-y: auto; | |
| flex-shrink: 0; /* Prevent sidebar from shrinking */ | |
| } | |
| .sidebar h3 { | |
| color: white; | |
| margin-bottom: 1.5rem; | |
| font-weight: 700; | |
| font-size: 1.7rem; | |
| letter-spacing: 1px; | |
| text-shadow: 0 2px 8px #00ffe7a0; | |
| text-align: center; /* Center header in sidebar */ | |
| } | |
| .sidebar select, | |
| .sidebar button { | |
| width: 100%; | |
| padding: 0.75rem; | |
| margin-bottom: 1rem; | |
| border-radius: 8px; | |
| border: none; | |
| font-family: 'Poppins', sans-serif; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| box-sizing: border-box; /* Include padding and border in the element's total width and height */ | |
| } | |
| .sidebar select { | |
| background-color: rgba(0, 255, 231, 0.15); | |
| color: #fff; | |
| appearance: none; | |
| background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.6-6.4H18.9c-5%200-9.6%202-13.6%206.4-8.8%208.8-8.8%2023.2%200%2032l128%20128c4.8%204.8%2011.2%207.2%2017.6%207.2s12.8-2.4%2017.6-7.2l128-128c8.8-8.8%208.8-23.2%200-32z%22%2F%3E%3C%2Fsvg%3E'); | |
| background-repeat: no-repeat; | |
| background-position: right 0.7em top 50%, 0 0; | |
| background-size: 0.65em auto, 100%; | |
| } | |
| .sidebar select option { | |
| background: #232526; | |
| color: #00ffe7; | |
| } | |
| .sidebar button { | |
| background: linear-gradient(90deg, #00ffe7 0%, #43e97b 100%); | |
| color: #232526; | |
| font-weight: 700; | |
| box-shadow: 0 0 10px #00ffe7a0; | |
| font-weight: 500; | |
| } | |
| .sidebar button:hover { | |
| background: #43e97b; | |
| color: #232526; | |
| } | |
| .sidebar hr { | |
| border: 0; | |
| height: 1px; | |
| background: rgba(255, 255, 255, 0.3); | |
| margin: 1.5rem 0; | |
| } | |
| /* Main Content Area - Desktop First */ | |
| .content { | |
| flex-grow: 1; | |
| padding: 2rem 4rem; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| box-sizing: border-box; | |
| } | |
| /* Header Styles */ | |
| .app-header { | |
| background: linear-gradient(135deg, #00ffe7 0%, #43e97b 100%); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| color: #232526; | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
| } | |
| .app-title { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| text-shadow: 0 2px 8px #00ffe7a0, 2px 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .app-subtitle { | |
| font-size: 1.2rem; | |
| font-weight: 300; | |
| opacity: 0.9; | |
| } | |
| /* Story Card Styles */ | |
| .story-card { | |
| background: rgba(44,83,100,0.95); | |
| border-radius: 20px; | |
| padding: 2.2rem; | |
| box-shadow: 0 8px 40px 0 #00ffe7a0, 0 2px 8px rgba(0,0,0,0.2); | |
| border-left: 6px solid #00ffe7; | |
| margin-bottom: 2rem; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .story-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 35px rgba(0,0,0,0.15); | |
| } | |
| .story-title { | |
| color: #00ffe7; | |
| font-size: 1.8rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; /* Allow title to wrap on smaller screens */ | |
| } | |
| .story-title span { | |
| white-space: nowrap; /* Prevent "Scene X of Y" from breaking awkwardly */ | |
| } | |
| .story-content-wrapper { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 2rem; | |
| box-shadow: 0 8px 25px rgba(0,0,0,0.1); | |
| margin: 1rem 0; | |
| line-height: 1.8; | |
| font-size: 1.1rem; | |
| color: #e0e6f8; | |
| text-align: justify; | |
| } | |
| /* Navigation Styles */ | |
| .nav-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem; | |
| margin: 1rem 0; | |
| } | |
| .progress-bar-container { | |
| width: 100%; | |
| height: 8px; | |
| background: rgba(0, 0, 0, 0.1); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin: 1rem 0; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, #00ffe7 0%, #43e97b 100%); | |
| border-radius: 4px; | |
| transition: width 0.3s ease; | |
| } | |
| /* Button Styles (Navigation, Audio) */ | |
| .btn-group { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| margin-top: 2rem; | |
| flex-wrap: wrap; /* Allow buttons to wrap */ | |
| } | |
| .btn-group button { | |
| flex: 1; | |
| min-width: 120px; /* Ensure buttons don't get too small */ | |
| max-width: 150px; | |
| } | |
| .btn { | |
| background: linear-gradient(90deg, #00ffe7 0%, #43e97b 100%); | |
| box-shadow: 0 0 16px #00ffe7a0, 0 2px 8px rgba(0,0,0,0.2); | |
| font-family: 'Orbitron', 'Poppins', sans-serif; | |
| font-size: 1.1rem; | |
| border: none; | |
| color: white; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(67,233,123,0.3); | |
| text-decoration: none; | |
| display: inline-block; | |
| text-align: center; | |
| box-sizing: border-box; /* Crucial for consistent sizing */ | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(67,233,123,0.4); | |
| } | |
| .btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| box-shadow: none; | |
| transform: none; | |
| } | |
| .nav-btn { | |
| background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%); | |
| box-shadow: 0 0 16px #f093fba0, 0 2px 8px rgba(0,0,0,0.2); | |
| } | |
| .nav-btn:hover:not(:disabled) { | |
| background: linear-gradient(90deg, #f5576c 0%, #f093fb 100%); | |
| box-shadow: 0 0 24px #f093fba0, 0 2px 8px rgba(0,0,0,0.2); | |
| } | |
| /* Audio Button */ | |
| .audio-button-container { | |
| margin: 1rem 0; | |
| text-align: center; | |
| } | |
| .audio-btn { | |
| background: linear-gradient(90deg, #00ffe7 0%, #43e97b 100%); | |
| border: none; | |
| color: white; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(67,233,123,0.3); | |
| width: auto; | |
| display: inline-block; | |
| } | |
| .audio-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(67,233,123,0.4); | |
| } | |
| .audio-btn.playing { | |
| background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%); | |
| box-shadow: 0 0 16px #ff6b6ba0, 0 2px 8px rgba(0,0,0,0.2); | |
| } | |
| /* Footer */ | |
| .footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: #00ffe7; | |
| margin-top: 4rem; | |
| border-top: 1px solid #232526; | |
| font-size: 0.9em; | |
| } | |
| /* --- Mobile Responsiveness --- */ | |
| /* For screens smaller than 768px (common breakpoint for tablets/laptops to phones) */ | |
| @media (max-width: 768px) { | |
| .main-container { | |
| flex-direction: column; /* Stack sidebar and content vertically */ | |
| } | |
| .sidebar { | |
| width: 100%; /* Sidebar takes full width */ | |
| height: auto; /* Allow height to adjust to content */ | |
| position: relative; /* Remove sticky behavior for mobile */ | |
| padding: 1.5rem 1rem; /* Adjust padding */ | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| order: -1; /* Place sidebar at the top of the stack */ | |
| } | |
| .sidebar h3 { | |
| font-size: 1.3rem; | |
| margin-bottom: 1rem; | |
| } | |
| .sidebar select, | |
| .sidebar button { | |
| font-size: 0.95rem; | |
| padding: 0.6rem 1rem; | |
| } | |
| .sidebar p { | |
| font-size: 0.8em; | |
| } | |
| .content { | |
| padding: 1.5rem 1rem; /* Adjust content padding for smaller screens */ | |
| max-width: 100%; /* No max-width restriction on small screens */ | |
| } | |
| .app-header { | |
| padding: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| border-radius: 10px; /* Slightly smaller radius */ | |
| } | |
| .app-title { | |
| font-size: 2rem; /* Reduce font size for smaller screens */ | |
| } | |
| .app-subtitle { | |
| font-size: 1rem; /* Reduce font size */ | |
| } | |
| .story-card { | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin-bottom: 1.5rem; | |
| } | |
| .story-title { | |
| font-size: 1.5rem; /* Adjust story title size */ | |
| flex-direction: column; /* Stack emoji/title and scene count */ | |
| align-items: flex-start; | |
| gap: 5px; | |
| } | |
| .story-title span { | |
| font-size: 0.7em; /* Make scene count smaller */ | |
| } | |
| .story-content-wrapper { | |
| padding: 1.5rem; | |
| font-size: 1rem; | |
| margin: 0.5rem 0; | |
| border-radius: 10px; | |
| } | |
| .audio-btn { | |
| padding: 0.6rem 1.2rem; | |
| font-size: 0.95rem; | |
| } | |
| .btn-group { | |
| flex-direction: column; /* Stack navigation buttons vertically */ | |
| gap: 0.8rem; | |
| } | |
| .btn-group button { | |
| width: 100%; /* Full width buttons */ | |
| max-width: none; /* Remove max-width constraint */ | |
| } | |
| .footer { | |
| padding: 1.5rem; | |
| margin-top: 2rem; | |
| font-size: 0.8em; | |
| } | |
| } | |
| /* Further adjustments for very small screens (e.g., older phones) */ | |
| @media (max-width: 480px) { | |
| .sidebar { | |
| padding: 1rem 0.8rem; | |
| } | |
| .content { | |
| padding: 1rem 0.8rem; | |
| } | |
| .app-header { | |
| padding: 1rem; | |
| } | |
| .app-title { | |
| font-size: 1.8rem; | |
| } | |
| .app-subtitle { | |
| font-size: 0.9rem; | |
| } | |
| .story-card { | |
| padding: 1rem; | |
| } | |
| .story-title { | |
| font-size: 1.3rem; | |
| } | |
| .story-content-wrapper { | |
| padding: 1rem; | |
| font-size: 0.95rem; | |
| } | |
| .audio-btn { | |
| padding: 0.5rem 1rem; | |
| font-size: 0.9rem; | |
| } | |
| } | |
| </style> | |
| <!-- Poppins font import (also in CSS, but explicit here for broader support if needed) --> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="main-container" style="z-index:1; position:relative;"> | |
| <aside class="sidebar"> | |
| <h3 style="text-align: center; letter-spacing:2px; font-family:'Orbitron','Poppins',sans-serif; font-size:1.3em; text-shadow:0 2px 8px #00ffe7a0;">🎮 Game Stories</h3> | |
| <form action="{{ url_for('index') }}" method="POST"> | |
| <select name="select_story" onchange="this.form.submit()"> | |
| {% for story_key, story_value in stories.items() %} | |
| <option value="{{ story_key }}" {% if story_key == selected_story_title %}selected{% endif %}> | |
| {{ story_value.emoji }} {{ story_key.replace(story_value.emoji + " ", "") }} | |
| </option> | |
| {% endfor %} | |
| </select> | |
| <!-- This button is just to ensure form submission if JS is off, though onchange handles it --> | |
| <button type="submit" style="display: none;">Go to Story</button> | |
| </form> | |
| <hr> | |
| <p style="opacity: 0.9; font-size: 1em; text-align: center; color:#00ffe7; font-family:'Orbitron','Poppins',sans-serif; text-shadow:0 2px 8px #00ffe7a0;">Choose your adventure!</p> | |
| <hr> | |
| <p style="opacity: 0.8; font-size: 0.9em; text-align: center; color:#43e97b; font-family:'Orbitron','Poppins',sans-serif; text-shadow:0 2px 8px #43e97ba0;"> | |
| 💧 Rainwater Chronicles - The Game | |
| </p> | |
| </aside> | |
| <main class="content"> | |
| <header class="app-header" style="box-shadow:0 0 32px #00ffe7a0;"> | |
| <div class="app-title" style="font-family:'Orbitron','Poppins',sans-serif; letter-spacing:2px;">💧 Rainwater Chronicles 💧</div> | |
| <div class="app-subtitle" style="font-family:'Orbitron','Poppins',sans-serif; color:#232526;">Discover the Magic of Water Conservation Through Stories</div> | |
| </header> | |
| {% block content %}{% endblock %} | |
| <footer class="footer"> | |
| <p>💧 <strong>Rainwater Chronicles</strong> - Making water conservation accessible through storytelling</p> | |
| <p>Together, we can make every drop count! 🌍</p> | |
| </footer> | |
| </main> | |
| </div> | |
| <!-- Global Text-to-Speech script --> | |
| <script> | |
| let currentUtterance = null; // To keep track of the currently speaking utterance | |
| function playAudio(text, buttonId) { | |
| const btn = document.getElementById(buttonId); | |
| // Stop any currently playing audio | |
| if (currentUtterance && window.speechSynthesis.speaking) { | |
| window.speechSynthesis.cancel(); | |
| } | |
| // If the same button is clicked again, stop it and reset | |
| if (btn.classList.contains('playing')) { | |
| btn.innerHTML = '🔊 Listen to Story'; | |
| btn.classList.remove('playing'); | |
| return; | |
| } | |
| currentUtterance = new SpeechSynthesisUtterance(text); | |
| btn.innerHTML = '⏸️ Playing...'; | |
| btn.classList.add('playing'); | |
| currentUtterance.onend = function() { | |
| btn.innerHTML = '🔊 Listen to Story'; | |
| btn.classList.remove('playing'); | |
| }; | |
| currentUtterance.onerror = function(event) { | |
| console.error('SpeechSynthesisUtterance.onerror', event); | |
| btn.innerHTML = '🔊 Listen to Story (Error)'; | |
| btn.classList.remove('playing'); | |
| }; | |
| currentUtterance.lang = 'en-US'; | |
| currentUtterance.rate = 0.9; | |
| currentUtterance.pitch = 1.0; | |
| window.speechSynthesis.speak(currentUtterance); | |
| } | |
| // Add event listener to stop speech when navigating away or closing | |
| window.addEventListener('beforeunload', function() { | |
| if (window.speechSynthesis.speaking) { | |
| window.speechSynthesis.cancel(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |