Upload 15 files

.gitattributes

@@ -33,3 +33,10 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/images/1.png filter=lfs diff=lfs merge=lfs -text
+static/videos/Animated_Drought_Relief_Video_Creation.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Animated_Rainwater_Harvesting_Video.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Animated_Rainwater_Usage_Video.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Animated_Water_Filtration_Process_Video.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Water_Filtration_Animation_Ready.mp4 filter=lfs diff=lfs merge=lfs -text
+static/videos/Water_Hero_Video_Generation_Complete.mp4 filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,17 @@
+# Base image
+FROM python:3.9-slim
+
+# Set the working directory
+WORKDIR /app
+
+# Copy application files
+COPY market_trial /app
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Expose the port your app runs on
+EXPOSE 7860
+
+# Command to run the application
+CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,420 @@
+from flask import Flask, render_template, session, redirect, url_for, request
+import time
+from pathlib import Path
+import random
+
+app = Flask(__name__)
+# Set a secret key for session management. CHANGE THIS IN PRODUCTION!
+app.secret_key = 'your_super_secret_key_for_flask_session_security'
+
+# --- Game Data ---
+# Updated video paths to be relative to the 'static/videos' directory
+videos = [
+    "static/videos/Animated_Drought_Relief_Video_Creation.mp4",
+    "static/videos/Animated_Rainwater_Harvesting_Video.mp4",
+    "static/videos/Animated_Water_Filtration_Process_Video.mp4",
+    "static/videos/Water_Filtration_Animation_Ready.mp4",
+    "static/videos/Animated_Rainwater_Usage_Video.mp4",
+    "static/videos/Water_Hero_Video_Generation_Complete.mp4"
+]
+
+
+video_descriptions = [
+    "🌍 Water Crisis Alert",
+    "🏠 Collection Master",
+    "💧 Purification Expert",
+    "🗃️ Storage Specialist",
+    "♻️ Usage Strategist",
+    "🌱 Environmental Champion"
+]
+
+# Enhanced task cards with detailed scenarios and consequences
+task_scenarios = [
+    # Video 0 - Water Crisis (has question)
+    {
+        "question": "🌍 After watching the video, what is the FIRST step to address water scarcity at your home?",
+        "choices": [
+            {
+                "action": "🌧️ Start collecting rainwater immediately",
+                "description": "Begin harvesting nature's free water supply",
+                "consequence": "✅ SMART START! You're taking the first step toward water independence! +100 XP",
+                "xp_reward": 100,
+                "icon": "🏆"
+            },
+            {
+                "action": "🚿 Take longer showers to enjoy water while it lasts",
+                "description": "Use more water before it runs out",
+                "consequence": "❌ WRONG APPROACH! This worsens the problem. Conservation is key! -20 Health",
+                "xp_reward": 0,
+                "icon": "💸"
+            },
+            {
+                "action": "⏳ Wait for government to solve the problem",
+                "description": "Rely on authorities to fix water issues",
+                "consequence": "❌ MISSED OPPORTUNITY! Individual action is crucial. Start now! -20 Health",
+                "xp_reward": 0,
+                "icon": "⏰"
+            }
+        ]
+    },
+    # Video 1 - Collection
+    {
+        "question": "🌧️ It's raining heavily! Your house has a metal roof. What's your FIRST action as a Water Conservation Hero?",
+        "choices": [
+            {
+                "action": "🏠 Install gutters and downspouts on your roof",
+                "description": "Channel rainwater efficiently into collection system",
+                "consequence": "✅ SMART MOVE! You capture 80% of the rainfall from your roof area. +100 XP",
+                "xp_reward": 100,
+                "icon": "🏆"
+            },
+            {
+                "action": "🛣️ Let the water flow down the streets",
+                "description": "Allow natural drainage to carry water away",
+                "consequence": "❌ MISSED OPPORTUNITY! Thousands of liters wasted into storm drains. -20 Health",
+                "xp_reward": 0,
+                "icon": "💸"
+            },
+            {
+                "action": "🛍️ Place plastic bags under the roof edge",
+                "description": "Use bags to catch dripping water",
+                "consequence": "❌ INEFFICIENT! Bags tear easily and collect very little water. Try a proper system! -20 Health",
+                "xp_reward": 0,
+                "icon": "🗑️"
+            }
+        ]
+    },
+    # Video 2 - Filtration
+    {
+        "question": "💧 Your collection tank is filling up with rainwater, but you notice leaves and debris floating in it. What's your next critical step?",
+        "choices": [
+            {
+                "action": "🔍 Install a first-flush diverter and filtration system",
+                "description": "Remove initial dirty water and filter the rest",
+                "consequence": "✅ EXCELLENT CHOICE! Clean, safe water ready for storage. Your filtration efficiency: 95%! +100 XP",
+                "xp_reward": 100,
+                "icon": "🧪"
+            },
+            {
+                "action": "⚠️ Use the dirty water directly without treatment",
+                "description": "Proceed with unfiltered rainwater",
+                "consequence": "❌ HEALTH HAZARD! Contaminated water can cause serious illness. Always filter first! -20 Health",
+                "xp_reward": 0,
+                "icon": "☠️"
+            },
+            {
+                "action": "🧪 Add household bleach to kill germs",
+                "description": "Chemical treatment of collected water",
+                "consequence": "❌ WRONG CHEMICAL! Bleach is not safe for water treatment. Use proper filtration! -20 Health",
+                "xp_reward": 0,
+                "icon": "⚗️"
+            }
+        ]
+    },
+    # Video 3 - Storage
+    {
+        "question": "🏺 You have 500 liters of clean, filtered rainwater. The monsoon season is ending soon. Where should you store this precious resource?",
+        "choices": [
+            {
+                "action": "🏺 Install an underground concrete tank with cover",
+                "description": "Professional storage solution with temperature control",
+                "consequence": "✅ MASTER STRATEGY! Water stays cool, clean, and safe for months. Storage efficiency: 100%! +100 XP",
+                "xp_reward": 100,
+                "icon": "🏛️"
+            },
+            {
+                "action": "🪣 Store in open buckets around your yard",
+                "description": "Multiple container approach for easy access",
+                "consequence": "❌ BREEDING GROUND! Open water attracts mosquitoes and gets contaminated. -20 Health",
+                "xp_reward": 0,
+                "icon": "🦟"
+            },
+            {
+                "action": "🌍 Dig a pit and let water sit directly in ground",
+                "description": "Natural ground storage method",
+                "consequence": "❌ CONTAMINATION RISK! Soil bacteria and insects will pollute your water. -20 Health",
+                "xp_reward": 0,
+                "icon": "🕳️"
+            }
+        ]
+    },
+    # Video 4 - Usage
+    {
+        "question": "♻️ Dry season has arrived! You have 200 liters of stored rainwater left. Your neighbor is asking for help with their garden. How do you maximize the impact?",
+        "choices": [
+            {
+                "action": "🌿 Use for drip irrigation and toilet flushing",
+                "description": "Strategic usage for maximum water conservation",
+                "consequence": "✅ WATER WISDOM! You save 300L of municipal water and help the environment! +100 XP",
+                "xp_reward": 100,
+                "icon": "🌱"
+            },
+            {
+                "action": "⏰ Save all water for potential emergencies later",
+                "description": "Conservative approach for future needs",
+                "consequence": "❌ MISSED IMPACT! Water can spoil if stored too long. Use it wisely now! -20 Health",
+                "xp_reward": 0,
+                "icon": "⏰"
+            },
+            {
+                "action": "🚽 Mix with sewage water for disposal",
+                "description": "Combine with waste water system",
+                "consequence": "❌ TERRIBLE WASTE! Never contaminate clean water with sewage! -20 Health",
+                "xp_reward": 0,
+                "icon": "🤮"
+            }
+        ]
+    },
+    # Video 5 - Environmental Impact (has question)
+    {
+        "question": "🌱 Now that you've mastered rainwater harvesting, how will you inspire your community to join the movement?",
+        "choices": [
+            {
+                "action": "👥 Organize community workshops and share your knowledge",
+                "description": "Teach others about water conservation benefits",
+                "consequence": "✅ COMMUNITY HERO! You inspire 50 families to start rainwater harvesting! +100 XP",
+                "xp_reward": 100,
+                "icon": "🌟"
+            },
+            {
+                "action": "🤐 Keep the knowledge to yourself for competitive advantage",
+                "description": "Maintain exclusive access to water conservation techniques",
+                "consequence": "❌ SELFISH APPROACH! Environmental problems need collective solutions! -20 Health",
+                "xp_reward": 0,
+                "icon": "🚫"
+            },
+            {
+                "action": "📱 Only post about it on social media occasionally",
+                "description": "Share water conservation tips online when convenient",
+                "consequence": "❌ MINIMAL IMPACT! Real change needs active community engagement! -20 Health",
+                "xp_reward": 0,
+                "icon": "📱"
+            }
+        ]
+    }
+]
+
+# Achievement definitions
+achievements_list = [
+    {"name": "🌟 First Steps", "desc": "Started your water journey", "condition": "start"},
+    {"name": "💧 Drop Collector", "desc": "Learned about collection", "condition": "video_1"},
+    {"name": "🔬 Purification Pro", "desc": "Mastered filtration", "condition": "video_2"},
+    {"name": "🏺 Storage Sage", "desc": "Understood storage methods", "condition": "video_3"},
+    {"name": "♻️ Usage Expert", "desc": "Optimized water usage", "condition": "video_4"},
+    {"name": "🎯 Perfect Score", "desc": "100% accuracy achieved", "condition": "perfect"},
+    {"name": "🔥 On Fire", "desc": "3 correct answers in a row", "condition": "streak_3"},
+    {"name": "🌍 Water Hero", "desc": "Completed the full quest", "condition": "complete"}
+]
+
+
+# --- Helper Functions (adapted for Flask session) ---
+def calculate_level() -> int:
+    return min(10, 1 + session.get('xp_points', 0) // 100)
+
+
+def add_xp(amount: int):
+    old_level = session.get('player_level', 1)
+    session['xp_points'] = session.get('xp_points', 0) + amount
+    session['player_level'] = calculate_level()
+    if session['player_level'] > old_level:
+        session['message'] = f"🎉 LEVEL UP! You reached Level {session['player_level']}!"
+
+
+def unlock_achievement(condition: str):
+    for achievement in achievements_list:
+        if achievement["condition"] == condition and achievement not in session.get('achievements', []):
+            session['achievements'] = session.get('achievements', []) + [achievement]
+            session['message'] = f"🏆 Achievement Unlocked: {achievement['name']} - {achievement['desc']}"
+            add_xp(50)
+
+
+def initialize_game_state():
+    session.setdefault("video_index", 0)
+    session.setdefault("feedback", "")
+    session.setdefault("quiz_correct_count", 0)
+    session.setdefault("quiz_attempts", 0)
+    session.setdefault("player_level", 1)
+    session.setdefault("xp_points", 0)
+    session.setdefault("achievements", [])
+    session.setdefault("streak", 0)
+    session.setdefault("health", 100)
+    session.setdefault("video_watched", False)
+    session.setdefault("question_answered", False)
+    session.setdefault("message", "")  # For temporary messages like level-up
+
+
+def next_video_logic():
+    if session['video_index'] < len(videos) - 1:
+        session['video_index'] += 1
+        session['feedback'] = ""
+        session['video_watched'] = False
+        session['question_answered'] = False
+        session['message'] = ""
+        if session['video_index'] > 0:
+            unlock_achievement(f"video_{session['video_index']}")
+        return redirect(url_for('main_app'))
+    else:
+        unlock_achievement("complete")
+        return redirect(url_for('summary_page'))
+
+
+def mark_video_watched_logic():
+    session['video_watched'] = True
+    session['message'] = ""
+
+
+def replay_video_logic():
+    session['feedback'] = ""
+    session['video_watched'] = False
+    session['question_answered'] = False
+    session['message'] = "🔄 Video ready for replay! Click play to watch again."
+
+
+def reset_quest_logic():
+    session.clear()  # Clears all session data
+    initialize_game_state()  # Reinitialize with default values
+
+
+def select_card_logic(choice_index: int):
+    current_scenario = task_scenarios[session['video_index']]
+    choice = current_scenario["choices"][choice_index]
+
+    session['quiz_attempts'] = session.get('quiz_attempts', 0) + 1
+    session['question_answered'] = True
+
+    session['feedback'] = choice["consequence"]
+    session['message'] = ""  # Clear any previous messages
+
+    if choice["xp_reward"] > 0:
+        session['quiz_correct_count'] = session.get('quiz_correct_count', 0) + 1
+        session['streak'] = session.get('streak', 0) + 1
+        add_xp(choice["xp_reward"])
+        if session['streak'] >= 3:
+            unlock_achievement("streak_3")
+    else:
+        session['streak'] = 0
+        session['health'] = max(0, session.get('health', 100) - 20)
+
+
+# --- Flask Routes ---
+
+@app.route('/')
+def welcome_page():
+    if 'player_level' not in session:  # Only initialize if not already in session (e.g., first visit or after full reset)
+        initialize_game_state()
+    return render_template('welcome.html')
+
+
+@app.route('/begin_quest', methods=['POST'])
+def begin_quest():
+    unlock_achievement("start")
+    return redirect(url_for('main_app'))
+
+
+@app.route('/main', methods=['GET', 'POST'])
+def main_app():
+    if 'player_level' not in session:  # If somehow landed here without initializing
+        return redirect(url_for('welcome_page'))
+
+    # Handle form submissions
+    if request.method == 'POST':
+        if 'mark_watched' in request.form:
+            mark_video_watched_logic()
+        elif 'select_choice' in request.form:
+            choice_index = int(request.form['select_choice'])
+            select_card_logic(choice_index)
+        elif 'next_level' in request.form or 'continue_quest' in request.form:
+            return next_video_logic()  # This function handles redirection
+        elif 'replay_video' in request.form:
+            replay_video_logic()
+            return redirect(url_for('main_app'))  # Redirect to show replay message
+        elif 'main_menu' in request.form:
+            return redirect(url_for('welcome_page'))
+
+        return redirect(url_for('main_app'))  # Redirect after POST to prevent resubmission
+
+    current_video_index = session.get('video_index', 0)
+    current_video_path = videos[current_video_index]
+
+    # Determine if it's a local video (starts with 'videos/') or a URL
+    is_local_video = current_video_path.startswith('videos/')
+    if is_local_video:
+        video_src = url_for('static', filename=current_video_path)
+    else:
+        video_src = current_video_path  # It's a full URL
+
+    # Check if local file exists if it's a local video
+    local_file_exists = True
+    if is_local_video:
+        full_path = Path(app.static_folder) / current_video_path
+        if not full_path.exists():
+            local_file_exists = False
+
+    context = {
+        'current_video_index': current_video_index,
+        'total_videos': len(videos),
+        'video_src': video_src,
+        'is_local_video': is_local_video,
+        'local_file_exists': local_file_exists,
+        'video_description': video_descriptions[current_video_index],
+        'current_scenario': task_scenarios[current_video_index],
+        'player_level': session.get('player_level', 1),
+        'xp_points': session.get('xp_points', 0),
+        'health': session.get('health', 100),
+        'streak': session.get('streak', 0),
+        'quiz_correct_count': session.get('quiz_correct_count', 0),
+        'quiz_attempts': session.get('quiz_attempts', 0),
+        'video_watched': session.get('video_watched', False),
+        'question_answered': session.get('question_answered', False),
+        'feedback': session.get('feedback', ''),
+        'achievements': session.get('achievements', []),
+        'message': session.pop('message', '')  # Pop message so it only shows once
+    }
+    return render_template('main.html', **context)
+
+
+@app.route('/summary')
+def summary_page():
+    if 'player_level' not in session:
+        return redirect(url_for('welcome_page'))
+
+    total_quizzes = len([s for s in task_scenarios if s.get("choices")])
+    score = session.get('quiz_correct_count', 0)
+
+    if score == total_quizzes and total_quizzes > 0:
+        unlock_achievement("perfect")
+
+    context = {
+        'player_level': session.get('player_level', 1),
+        'xp_points': session.get('xp_points', 0),
+        'quiz_score': score,
+        'total_quizzes': total_quizzes,
+        'accuracy': (score / max(1, total_quizzes)) * 100,
+        'streak': session.get('streak', 0),
+        'achievements': session.get('achievements', []),
+        'current_date': time.strftime("%B %d, %Y"),
+        'message': session.pop('message', '')
+    }
+    return render_template('summary.html', **context)
+
+
+@app.route('/restart_quest', methods=['POST'])
+def restart_quest():
+    reset_quest_logic()
+    return redirect(url_for('welcome_page'))
+
+
+@app.route('/view_stats', methods=['POST'])
+def view_stats():
+    session['message'] = "Detailed stats coming soon!"
+    return redirect(url_for('summary_page'))
+
+
+@app.route('/share_impact', methods=['POST'])
+def share_impact():
+    session['message'] = "🌟 Your impact is shared!"
+    return redirect(url_for('summary_page'))
+
+
+if __name__ == '__main__':
+    app.run(debug=True)  # Set debug=False in production

requirements.txt

@@ -0,0 +1,8 @@
+flask
+gunicorn
+requests
+pandas
+numpy
+plotly
+googletrans
+python-dotenv

static/videos/Animated_Drought_Relief_Video_Creation.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a4300c3ec805f611a5abe09b7f94bf7ccd9d5d30cedb286b418d475833e0f48e
+size 2952339

static/videos/Animated_Rainwater_Harvesting_Video.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:15f59778be780e21942f809d786c30bbac2d93ff0e6dd8ed911630a4638e6645
+size 9256576

static/videos/Animated_Rainwater_Usage_Video.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:093c9c1c02ad7f672b99070a0256d60867d81ff20e25e7d2ff2757de39be0a4c
+size 2632673

static/videos/Animated_Water_Filtration_Process_Video.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:de15525bb8e29dd57ebb69b0692d66491fcc52e80e59408529986eb666fee9cb
+size 3766881

static/videos/Water_Filtration_Animation_Ready.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3f050f1b5dd4ae6398d66ed8c10f70fc03ff1f796374485b30ec50979ce86122
+size 3460781

static/videos/Water_Hero_Video_Generation_Complete.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0a77a3e6bc131896a7939dfcfac02e2cb514f4d4f9dde637750a0c81b5eceacb
+size 4969869

templates/base.html

@@ -0,0 +1,540 @@
+<!DOCTYPE html>
+<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>

templates/index.html

@@ -0,0 +1,43 @@
+{% extends "base.html" %}
+
+{% block content %}
+    <div class="story-card">
+        <h2 class="story-title">
+            {{ story_emoji }} {{ selected_story_title.replace(story_emoji + " ", "") }}
+            <span style="font-size: 0.8em; color: #7f8c8d;">Scene {{ current_scene_index + 1 }} of {{ total_scenes }}</span>
+        </h2>
+
+        <div class="progress-bar-container">
+            <div class="progress-fill" style="width: {{ progress_percentage }}%;"></div>
+        </div>
+    </div>
+
+    <div class="story-content-wrapper">
+        <p>{{ scene_text }}</p>
+    </div>
+
+    <div class="audio-button-container">
+        <!-- Use a dynamic ID for the button to avoid conflicts if multiple audio buttons were on a page -->
+        <button class="audio-btn" id="audio-btn-{{ current_scene_index }}" onclick="playAudio('{{ scene_text | e }}', 'audio-btn-{{ current_scene_index }}')">
+            🔊 Listen to Story
+        </button>
+    </div>
+
+    <form action="{{ url_for('index') }}" method="POST" class="btn-group">
+        <button type="submit" name="navigate_prev" class="btn nav-btn" {% if current_scene_index == 0 %}disabled{% endif %}>
+            ⬅️ Previous
+        </button>
+        <button type="submit" name="navigate_next" class="btn nav-btn" {% if current_scene_index == total_scenes - 1 %}disabled{% endif %}>
+            Next ➡️
+        </button>
+    </form>
+
+    {% if current_scene_index == total_scenes - 1 %}
+        <div style="text-align: center; padding: 2rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                    border-radius: 15px; color: white; margin: 2rem 0;">
+            <h2>🎉 Story Complete!</h2>
+            <p>You've finished this amazing journey. Thanks for reading!</p>
+        </div>
+    {% endif %}
+
+{% endblock %}

templates/main.html

@@ -0,0 +1,442 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🌧️ Rainwater Quest Adventure</title>
+    <style>
+      /* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Roboto:wght@300;400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
+
+
+/* Main styling */
+body {
+    background: linear-gradient(135deg, #e0f2f7 0%, #b3e0f2 100%); /* Light blue gradient */
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
+    padding: 0;
+    color: #333; /* Default text color */
+}
+
+.container {
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 20px;
+}
+
+/* Header styling */
+.game-header {
+    background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1);
+    background-size: 300% 300%;
+    animation: gradientShift 3s ease infinite;
+    color: white;
+    text-align: center;
+    padding: 20px;
+    border-radius: 15px;
+    margin-bottom: 20px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+    font-family: 'Orbitron', monospace;
+    font-weight: 900;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+
+@keyframes gradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Game card styling */
+.game-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    padding: 25px;
+    margin: 15px 0;
+    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+    backdrop-filter: blur(10px);
+    border: 2px solid rgba(255,255,255,0.18);
+    transition: all 0.3s ease;
+}
+
+.game-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+
+/* Progress bar styling */
+.progress-container {
+    background: rgba(255,255,255,0.2);
+    border-radius: 25px;
+    padding: 5px;
+    margin: 20px 0;
+}
+
+.progress-bar {
+    background: linear-gradient(90deg, #00C9FF, #92FE9D);
+    height: 30px;
+    border-radius: 20px;
+    transition: width 0.5s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+    min-width: 0; /* Allow it to be 0% width */
+}
+
+/* XP and Level styling */
+.stats-container {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px 0;
+    flex-wrap: wrap; /* Allow wrapping on smaller screens */
+    gap: 10px; /* Space between items */
+}
+
+.stat-item {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    padding: 15px 20px;
+    border-radius: 15px;
+    text-align: center;
+    min-width: 120px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    font-family: 'Orbitron', monospace;
+    flex-grow: 1; /* Allow items to grow */
+}
+
+.stat-value {
+    font-size: 24px;
+    font-weight: 900;
+    margin-bottom: 5px;
+}
+
+.stat-label {
+    font-size: 12px;
+    opacity: 0.8;
+}
+
+/* General button styling */
+.button-group {
+    display: flex;
+    gap: 10px; /* Space between buttons */
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.button-group button, .button-full-width {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    border: none;
+    border-radius: 15px;
+    padding: 15px 25px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 16px;
+    font-weight: 500;
+    text-align: center;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    flex: 1; /* Make buttons grow to fill space */
+    min-width: 150px; /* Minimum width for buttons */
+    text-decoration: none; /* For anchor tags acting as buttons */
+    display: inline-block;
+}
+
+.button-full-width {
+    width: 100%;
+}
+
+.button-group button:hover, .button-full-width:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
+    background: linear-gradient(135deg, #7b8cec, #8a5bb8);
+}
+
+
+/* Achievement badge */
+.achievement {
+    background: linear-gradient(45deg, #FFD700, #FFA500);
+    color: #333;
+    padding: 10px 20px;
+    border-radius: 25px;
+    display: inline-block;
+    margin: 10px 5px;
+    font-weight: bold;
+    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+/* Welcome screen styling */
+.welcome-container {
+    text-align: center;
+    padding: 50px;
+    background: rgba(255,255,255,0.1);
+    border-radius: 30px;
+    backdrop-filter: blur(10px);
+    margin: 20px auto; /* Centered */
+    max-width: 900px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+}
+
+.welcome-title {
+    font-size: 3.5em;
+    font-family: 'Orbitron', monospace;
+    font-weight: 900;
+    background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 20px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.welcome-text {
+    font-size: 1.3em;
+    color: #34495e; /* Darker text for readability */
+    margin: 30px 0;
+    line-height: 1.6;
+}
+
+.welcome-text strong {
+    color: #2c3e50;
+}
+
+.welcome-image {
+    max-width: 100%;
+    border-radius: 15px;
+    margin-top: 30px;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+}
+
+/* Certificate styling */
+.certificate {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    padding: 40px;
+    border-radius: 20px;
+    text-align: center;
+    margin: 20px auto;
+    max-width: 600px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+    border: 3px solid #FFD700;
+}
+
+/* Video container styling */
+.video-container {
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
+    margin: 20px 0;
+    width: 100%; /* Ensure video container takes full width */
+}
+
+.video-container video {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* Question container styling */
+.question-container {
+    background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
+    color: white;
+    padding: 25px;
+    border-radius: 20px;
+    margin: 20px 0;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    text-align: center;
+}
+
+/* Video watched indicator */
+.video-watched {
+    background: rgba(76, 175, 80, 0.1);
+    border: 2px solid #4CAF50;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 10px 0;
+    color: #2E7D32;
+    font-weight: bold;
+    text-align: center;
+}
+
+/* Feedback messages */
+.feedback.success {
+    background-color: #d4edda;
+    color: #155724;
+    border: 1px solid #badbcc;
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.feedback.error {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.feedback.info {
+    background-color: #d1ecf1;
+    color: #0c5460;
+    border: 1px solid #bee5eb;
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 8px;
+    text-align: center;
+}
+
+/* Utility classes for layout */
+.columns-3 {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+    flex-wrap: wrap; /* Allow wrapping */
+}
+
+.columns-3 > div {
+    flex: 1;
+    min-width: 250px; /* Ensure columns don't get too small */
+}
+
+.columns-5 {
+    display: flex;
+    justify-content: space-around;
+    gap: 10px;
+    margin-top: 20px;
+    flex-wrap: wrap;
+}
+
+.columns-5 > div {
+    flex: 1;
+    min-width: 150px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Orbitron', monospace;
+    color: #34495e;
+}
+
+p {
+    line-height: 1.6;
+}
+    </style>
+</head>
+
+<body style="margin:0; padding:0; height:100vh; overflow:hidden; background:linear-gradient(135deg,#f8fafc 0%,#e0f7fa 100%);">
+<div id="game-root" style="display:flex; flex-direction:column; height:100vh; width:100vw; justify-content:stretch; align-items:stretch; background:none;">
+    <!-- Top Bar: Stats & Progress -->
+    <div style="flex:0 0 auto; background:rgba(255,255,255,0.95); color:#2c3e50; display:flex; align-items:center; justify-content:space-between; padding:0.5em 2vw; min-height:54px; box-shadow:0 2px 8px #b2ebf2; z-index:2;">
+        <div style="display:flex; gap:2vw; align-items:center;">
+            <span style="font-family:'Orbitron',sans-serif; font-weight:700;">Lv.{{ player_level }}</span>
+            <span>XP: {{ xp_points }}</span>
+            <span>Health: <span style="color:{{ health > 50 and '#43a047' or (health > 20 and '#fbc02d' or '#e53935') }}">{{ health }}%</span></span>
+            <span>Streak: {{ streak }}</span>
+            <span>Accuracy: {{ "%.0f" | format((quiz_correct_count / (quiz_attempts if quiz_attempts > 0 else 1)) * 100) }}%</span>
+        </div>
+        {% set progress_percentage = ((current_video_index + 1) / total_videos) * 100 %}
+        <div style="flex:1; margin-left:2vw; margin-right:2vw;">
+            <div style="background:rgba(0,0,0,0.07); border-radius:8px; height:14px; width:100%; overflow:hidden;">
+                <div style="background:linear-gradient(90deg,#4fc3f7,#b2ebf2); height:100%; width:{{ progress_percentage }}%; border-radius:8px; transition:width 0.5s;"></div>
+            </div>
+            <div style="font-size:0.9em; color:#00bcd4; text-align:right;">Stage {{ current_video_index + 1 }}/{{ total_videos }}</div>
+        </div>
+    </div>
+
+    <!-- Main Game Area: Centered, No Scroll, Light Colors -->
+    <div style="flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:0; min-width:0;">
+    <div style="background:rgba(255,255,255,0.98); border-radius:20px; box-shadow:0 8px 32px #b2ebf2, 0 2px 8px rgba(0,0,0,0.07); max-width:900px; width:99vw; max-height:68vh; min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:1.2vw 1.2vw 0.7vw 1.2vw; overflow:hidden; position:relative;">
+            <div style="width:100%; text-align:center; margin-bottom:0.4em;">
+                <h2 style="font-family:'Orbitron',sans-serif; color:#00bcd4; margin:0; font-size:1.6em;">🎯 Stage {{ current_video_index + 1 }}: {{ video_description }}</h2>
+            </div>
+            {% if message %}
+                <div class="feedback info" style="margin-bottom:0.4em;">{{ message }}</div>
+            {% endif %}
+            <div style="flex:1 1 auto; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:auto;">
+                {% if not video_watched %}
+                    <div style="width:100%; max-width:500px; margin:0 auto;">
+                        {% if is_local_video and not local_file_exists %}
+                            <div class="feedback error">⚠️ Video file not found: {{ video_src }}. Please check the path or use an online URL.</div>
+                            <form action="{{ url_for('main_app') }}" method="post">
+                                <button type="submit" name="mark_watched" class="button-full-width">Skip missing video</button>
+                            </form>
+                        {% else %}
+                            <form id="autoMarkWatchedForm" action="{{ url_for('main_app') }}" method="post" style="margin:0;">
+                                <video id="gameVideo" controls src="{{ video_src }}" {% if is_local_video %} type="video/mp4" {% endif %} style="width:100%; max-height:180px; border-radius:12px; background:#e0f7fa;"></video>
+                                <input type="hidden" name="mark_watched" value="1">
+                            </form>
+                            <script>
+                            document.addEventListener('DOMContentLoaded', function() {
+                                var video = document.getElementById('gameVideo');
+                                if (video) {
+                                    video.addEventListener('ended', function() {
+                                        document.getElementById('autoMarkWatchedForm').submit();
+                                    });
+                                }
+                            });
+                            </script>
+                        {% endif %}
+                    </div>
+                {% else %}
+                    <div class="video-watched" style="margin-bottom:0.4em; background:#e0f7fa; color:#388e3c; border:1px solid #b2ebf2;">✅ Video completed! Time for a challenge!</div>
+                    {% if current_scenario.choices and not question_answered %}
+                        <div class="question-container" style="margin-bottom:0.4em; background:linear-gradient(135deg,#b2ebf2,#e1f5fe); color:#0277bd;">
+                            <h3 style="margin:0;">{{ current_scenario.question }}</h3>
+                        </div>
+                        <h3 style="margin:0.4em 0 0.15em 0; color:#00bcd4;">🎮 Choose Your Answer:</h3>
+                        <p style="margin:0 0 0.4em 0; font-size:1em; color:#00bcd4;">*Select the most effective water conservation strategy:*</p>
+                        <form action="{{ url_for('main_app') }}" method="post" class="button-group" style="width:100%; display:flex; flex-direction:column; gap:0.4em; align-items:center;">
+                            {% for choice in current_scenario.choices %}
+                                <button type="submit" name="select_choice" value="{{ loop.index0 }}" title="{{ choice.description }}" style="width:100%; max-width:370px; font-size:1em; padding:0.7em 0; border-radius:12px; background:linear-gradient(90deg,#b2ebf2,#4fc3f7); color:#0277bd; font-family:'Orbitron',sans-serif; font-weight:700; box-shadow:0 2px 8px #b2ebf2;">{{ choice.action }}</button>
+                            {% endfor %}
+                        </form>
+                    {% endif %}
+                    {% if feedback and question_answered %}
+                        <div class="feedback {% if '✅' in feedback %}success{% else %}error{% endif %}" style="margin:0.4em 0; background:#e0f7fa; color:#388e3c; border:1px solid #b2ebf2;">{{ feedback }}</div>
+                        <form action="{{ url_for('main_app') }}" method="post" style="margin-top: 0.4em;">
+                            <button type="submit" name="next_level" class="button-full-width" style="width:100%; max-width:370px; font-size:1em; border-radius:12px; background:linear-gradient(90deg,#b2ebf2,#4fc3f7); color:#0277bd; font-family:'Orbitron',sans-serif; font-weight:700; box-shadow:0 2px 8px #b2ebf2;">⏭️ Next Level</button>
+                        </form>
+                    {% elif video_watched and not current_scenario.choices and not question_answered %}
+                        <form action="{{ url_for('main_app') }}" method="post" style="margin-top: 0.4em;">
+                            <button type="submit" name="continue_quest" class="button-full-width" style="width:100%; max-width:370px; font-size:1em; border-radius:12px; background:linear-gradient(90deg,#b2ebf2,#4fc3f7); color:#0277bd; font-family:'Orbitron',sans-serif; font-weight:700; box-shadow:0 2px 8px #b2ebf2;">⏭️ Continue Quest</button>
+                        </form>
+                    {% endif %}
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    <!-- Bottom Bar: Controls & Achievements -->
+    <div style="flex:0 0 auto; background:rgba(255,255,255,0.95); color:#2c3e50; display:flex; align-items:center; justify-content:space-between; padding:0.5em 2vw; min-height:54px; box-shadow:0 -2px 8px #b2ebf2; z-index:2;">
+        <div style="display:flex; gap:1vw; align-items:center;">
+            <form action="{{ url_for('main_app') }}" method="post" style="display:inline; margin:0;">
+                <button type="submit" name="replay_video" style="font-size:1em; border-radius:10px; background:linear-gradient(90deg,#b2ebf2,#4fc3f7); color:#0277bd; font-family:'Orbitron',sans-serif; font-weight:700; box-shadow:0 2px 8px #b2ebf2; padding:0.4em 1em;">🔄 Replay Video</button>
+            </form>
+            <form action="{{ url_for('main_app') }}" method="post" style="display:inline; margin:0;">
+                <button type="submit" name="main_menu" style="font-size:1em; border-radius:10px; background:linear-gradient(90deg,#b2ebf2,#4fc3f7); color:#0277bd; font-family:'Orbitron',sans-serif; font-weight:700; box-shadow:0 2px 8px #b2ebf2; padding:0.4em 1em;">🏠 Main Menu</button>
+            </form>
+        </div>
+        {% if achievements %}
+            <div style="display:flex; gap:0.5vw; align-items:center; flex-wrap:wrap;">
+                {% for achievement in achievements %}
+                    <span class="achievement" style="background:linear-gradient(45deg,#fffde7,#ffe082); color:#795548; padding:0.3em 0.8em; border-radius:12px; font-weight:700; font-size:0.95em; box-shadow:0 2px 8px #ffe08280; margin:0 0.15em;">{{ achievement.name }}</span>
+                {% endfor %}
+            </div>
+        {% endif %}
+    </div>
+</div>
+</body>
+</html>

templates/summary.html

@@ -0,0 +1,386 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🌧️ Quest Completed!</title>
+    <style>
+      /* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Roboto:wght@300;400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
+
+
+/* Main styling */
+body {
+    background: linear-gradient(135deg, #e0f2f7 0%, #b3e0f2 100%); /* Light blue gradient */
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
+    padding: 0;
+    color: #333; /* Default text color */
+}
+
+.container {
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 20px;
+}
+
+/* Header styling */
+.game-header {
+    background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1);
+    background-size: 300% 300%;
+    animation: gradientShift 3s ease infinite;
+    color: white;
+    text-align: center;
+    padding: 20px;
+    border-radius: 15px;
+    margin-bottom: 20px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+    font-family: 'Orbitron', monospace;
+    font-weight: 900;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+
+@keyframes gradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Game card styling */
+.game-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    padding: 25px;
+    margin: 15px 0;
+    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+    backdrop-filter: blur(10px);
+    border: 2px solid rgba(255,255,255,0.18);
+    transition: all 0.3s ease;
+}
+
+.game-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+
+/* Progress bar styling */
+.progress-container {
+    background: rgba(255,255,255,0.2);
+    border-radius: 25px;
+    padding: 5px;
+    margin: 20px 0;
+}
+
+.progress-bar {
+    background: linear-gradient(90deg, #00C9FF, #92FE9D);
+    height: 30px;
+    border-radius: 20px;
+    transition: width 0.5s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+    min-width: 0; /* Allow it to be 0% width */
+}
+
+/* XP and Level styling */
+.stats-container {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px 0;
+    flex-wrap: wrap; /* Allow wrapping on smaller screens */
+    gap: 10px; /* Space between items */
+}
+
+.stat-item {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    padding: 15px 20px;
+    border-radius: 15px;
+    text-align: center;
+    min-width: 120px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    font-family: 'Orbitron', monospace;
+    flex-grow: 1; /* Allow items to grow */
+}
+
+.stat-value {
+    font-size: 24px;
+    font-weight: 900;
+    margin-bottom: 5px;
+}
+
+.stat-label {
+    font-size: 12px;
+    opacity: 0.8;
+}
+
+/* General button styling */
+.button-group {
+    display: flex;
+    gap: 10px; /* Space between buttons */
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.button-group button, .button-full-width {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    border: none;
+    border-radius: 15px;
+    padding: 15px 25px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 16px;
+    font-weight: 500;
+    text-align: center;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    flex: 1; /* Make buttons grow to fill space */
+    min-width: 150px; /* Minimum width for buttons */
+    text-decoration: none; /* For anchor tags acting as buttons */
+    display: inline-block;
+}
+
+.button-full-width {
+    width: 100%;
+}
+
+.button-group button:hover, .button-full-width:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
+    background: linear-gradient(135deg, #7b8cec, #8a5bb8);
+}
+
+
+/* Achievement badge */
+.achievement {
+    background: linear-gradient(45deg, #FFD700, #FFA500);
+    color: #333;
+    padding: 10px 20px;
+    border-radius: 25px;
+    display: inline-block;
+    margin: 10px 5px;
+    font-weight: bold;
+    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+/* Welcome screen styling */
+.welcome-container {
+    text-align: center;
+    padding: 50px;
+    background: rgba(255,255,255,0.1);
+    border-radius: 30px;
+    backdrop-filter: blur(10px);
+    margin: 20px auto; /* Centered */
+    max-width: 900px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+}
+
+.welcome-title {
+    font-size: 3.5em;
+    font-family: 'Orbitron', monospace;
+    font-weight: 900;
+    background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 20px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.welcome-text {
+    font-size: 1.3em;
+    color: #34495e; /* Darker text for readability */
+    margin: 30px 0;
+    line-height: 1.6;
+}
+
+.welcome-text strong {
+    color: #2c3e50;
+}
+
+.welcome-image {
+    max-width: 100%;
+    border-radius: 15px;
+    margin-top: 30px;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+}
+
+/* Certificate styling */
+.certificate {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    padding: 40px;
+    border-radius: 20px;
+    text-align: center;
+    margin: 20px auto;
+    max-width: 600px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+    border: 3px solid #FFD700;
+}
+
+/* Video container styling */
+.video-container {
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
+    margin: 20px 0;
+    width: 100%; /* Ensure video container takes full width */
+}
+
+.video-container video {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* Question container styling */
+.question-container {
+    background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
+    color: white;
+    padding: 25px;
+    border-radius: 20px;
+    margin: 20px 0;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    text-align: center;
+}
+
+/* Video watched indicator */
+.video-watched {
+    background: rgba(76, 175, 80, 0.1);
+    border: 2px solid #4CAF50;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 10px 0;
+    color: #2E7D32;
+    font-weight: bold;
+    text-align: center;
+}
+
+/* Feedback messages */
+.feedback.success {
+    background-color: #d4edda;
+    color: #155724;
+    border: 1px solid #badbcc;
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.feedback.error {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.feedback.info {
+    background-color: #d1ecf1;
+    color: #0c5460;
+    border: 1px solid #bee5eb;
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 8px;
+    text-align: center;
+}
+
+/* Utility classes for layout */
+.columns-3 {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+    flex-wrap: wrap; /* Allow wrapping */
+}
+
+.columns-3 > div {
+    flex: 1;
+    min-width: 250px; /* Ensure columns don't get too small */
+}
+
+.columns-5 {
+    display: flex;
+    justify-content: space-around;
+    gap: 10px;
+    margin-top: 20px;
+    flex-wrap: wrap;
+}
+
+.columns-5 > div {
+    flex: 1;
+    min-width: 150px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Orbitron', monospace;
+    color: #34495e;
+}
+
+p {
+    line-height: 1.6;
+}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="game-header"><h1>🎉 QUEST COMPLETED! 🎉</h1></div>
+
+        <!-- Temporary Message Display -->
+        {% if message %}
+            <div class="feedback info">{{ message }}</div>
+        {% endif %}
+
+        <!-- Final Stats / Certificate -->
+        <div class="certificate">
+            <h2>🌟 WATER CONSERVATION HERO 🌟</h2>
+            <h3>Certificate of Excellence</h3>
+            <p><strong>Final Level:</strong> {{ player_level }}</p>
+            <p><strong>Total XP Earned:</strong> {{ xp_points }}</p>
+            <p><strong>Quiz Score:</strong> {{ quiz_score }}/{{ total_quizzes }} ({{ "%.0f" | format(accuracy) }}%)</p>
+            <p><strong>Best Streak:</strong> {{ streak }}</p>
+            <p><strong>Achievements Unlocked:</strong> {{ achievements | length }}</p>
+            <br>
+            <p><em>"You have mastered the ancient art of rainwater harvesting and become a true guardian of our planet's most precious resource!"</em></p>
+            <p><strong>Date:</strong> {{ current_date }}</p>
+            <p><strong>Certified by:</strong> The Global Water Conservation Academy</p>
+        </div>
+
+        <!-- All Achievements Display -->
+        {% if achievements %}
+            <h3>🏆 All Your Achievements</h3>
+            <div class="columns-3">
+                {% for achievement in achievements %}
+                    <div class="achievement">{{ achievement.name }} - {{ achievement.desc }}</div>
+                {% endfor %}
+            </div>
+        {% endif %}
+
+        <!-- Action Buttons for Summary Page -->
+        <div class="button-group" style="margin-top: 30px;">
+            <form action="{{ url_for('restart_quest') }}" method="post">
+                <button type="submit">🔄 Play Again</button>
+            </form>
+            <form action="{{ url_for('view_stats') }}" method="post">
+                <button type="submit">📊 View Detailed Stats</button>
+            </form>
+            <form action="{{ url_for('share_impact') }}" method="post">
+                <button type="submit">🌍 Share Your Impact</button>
+            </form>
+        </div>
+    </div>
+</body>
+</html>

templates/welcome.html

@@ -0,0 +1,356 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🌧️ Rainwater Quest Adventure</title>
+    <style>
+        /* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Roboto:wght@300;400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
+
+
+/* Main styling */
+body {
+    background: linear-gradient(135deg, #e0f2f7 0%, #b3e0f2 100%); /* Light blue gradient */
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
+    padding: 0;
+    color: #333; /* Default text color */
+}
+
+.container {
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 20px;
+}
+
+/* Header styling */
+.game-header {
+    background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1);
+    background-size: 300% 300%;
+    animation: gradientShift 3s ease infinite;
+    color: white;
+    text-align: center;
+    padding: 20px;
+    border-radius: 15px;
+    margin-bottom: 20px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+    font-family: 'Orbitron', monospace;
+    font-weight: 900;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+
+@keyframes gradientShift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Game card styling */
+.game-card {
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 20px;
+    padding: 25px;
+    margin: 15px 0;
+    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+    backdrop-filter: blur(10px);
+    border: 2px solid rgba(255,255,255,0.18);
+    transition: all 0.3s ease;
+}
+
+.game-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+}
+
+/* Progress bar styling */
+.progress-container {
+    background: rgba(255,255,255,0.2);
+    border-radius: 25px;
+    padding: 5px;
+    margin: 20px 0;
+}
+
+.progress-bar {
+    background: linear-gradient(90deg, #00C9FF, #92FE9D);
+    height: 30px;
+    border-radius: 20px;
+    transition: width 0.5s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: bold;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+    min-width: 0; /* Allow it to be 0% width */
+}
+
+/* XP and Level styling */
+.stats-container {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px 0;
+    flex-wrap: wrap; /* Allow wrapping on smaller screens */
+    gap: 10px; /* Space between items */
+}
+
+.stat-item {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    padding: 15px 20px;
+    border-radius: 15px;
+    text-align: center;
+    min-width: 120px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    font-family: 'Orbitron', monospace;
+    flex-grow: 1; /* Allow items to grow */
+}
+
+.stat-value {
+    font-size: 24px;
+    font-weight: 900;
+    margin-bottom: 5px;
+}
+
+.stat-label {
+    font-size: 12px;
+    opacity: 0.8;
+}
+
+/* General button styling */
+.button-group {
+    display: flex;
+    gap: 10px; /* Space between buttons */
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.button-group button, .button-full-width {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    border: none;
+    border-radius: 15px;
+    padding: 15px 25px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 16px;
+    font-weight: 500;
+    text-align: center;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    flex: 1; /* Make buttons grow to fill space */
+    min-width: 150px; /* Minimum width for buttons */
+    text-decoration: none; /* For anchor tags acting as buttons */
+    display: inline-block;
+}
+
+.button-full-width {
+    width: 100%;
+}
+
+.button-group button:hover, .button-full-width:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
+    background: linear-gradient(135deg, #7b8cec, #8a5bb8);
+}
+
+
+/* Achievement badge */
+.achievement {
+    background: linear-gradient(45deg, #FFD700, #FFA500);
+    color: #333;
+    padding: 10px 20px;
+    border-radius: 25px;
+    display: inline-block;
+    margin: 10px 5px;
+    font-weight: bold;
+    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+/* Welcome screen styling */
+.welcome-container {
+    text-align: center;
+    padding: 50px;
+    background: rgba(255,255,255,0.1);
+    border-radius: 30px;
+    backdrop-filter: blur(10px);
+    margin: 20px auto; /* Centered */
+    max-width: 900px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+}
+
+.welcome-title {
+    font-size: 3.5em;
+    font-family: 'Orbitron', monospace;
+    font-weight: 900;
+    background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 20px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.welcome-text {
+    font-size: 1.3em;
+    color: #34495e; /* Darker text for readability */
+    margin: 30px 0;
+    line-height: 1.6;
+}
+
+.welcome-text strong {
+    color: #2c3e50;
+}
+
+.welcome-image {
+    max-width: 100%;
+    max-height: 100px; /* ✅ fixed syntax */
+    border-radius: 12px; /* slightly softer than 15px */
+    margin-top:60px;
+    object-fit: contain; /* keeps aspect ratio without distortion */
+    display: block;
+    margin-left: auto;
+    margin-right: auto; /* ✅ centers the image */
+    box-shadow: 0 6px 15px rgba(0,0,0,0.15); /* softer shadow for a clean look */
+}
+
+
+/* Certificate styling */
+.certificate {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    padding: 40px;
+    border-radius: 20px;
+    text-align: center;
+    margin: 20px auto;
+    max-width: 600px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+    border: 3px solid #FFD700;
+}
+
+/* Video container styling */
+.video-container {
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
+    margin: 20px 0;
+    width: 100%; /* Ensure video container takes full width */
+}
+
+.video-container video {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* Question container styling */
+.question-container {
+    background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
+    color: white;
+    padding: 25px;
+    border-radius: 20px;
+    margin: 20px 0;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    text-align: center;
+}
+
+/* Video watched indicator */
+.video-watched {
+    background: rgba(76, 175, 80, 0.1);
+    border: 2px solid #4CAF50;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 10px 0;
+    color: #2E7D32;
+    font-weight: bold;
+    text-align: center;
+}
+
+/* Feedback messages */
+.feedback.success {
+    background-color: #d4edda;
+    color: #155724;
+    border: 1px solid #badbcc;
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.feedback.error {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.feedback.info {
+    background-color: #d1ecf1;
+    color: #0c5460;
+    border: 1px solid #bee5eb;
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 8px;
+    text-align: center;
+}
+
+/* Utility classes for layout */
+.columns-3 {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 20px;
+    flex-wrap: wrap; /* Allow wrapping */
+}
+
+.columns-3 > div {
+    flex: 1;
+    min-width: 250px; /* Ensure columns don't get too small */
+}
+
+.columns-5 {
+    display: flex;
+    justify-content: space-around;
+    gap: 10px;
+    margin-top: 20px;
+    flex-wrap: wrap;
+}
+
+.columns-5 > div {
+    flex: 1;
+    min-width: 150px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Orbitron', monospace;
+    color: #34495e;
+}
+
+p {
+    line-height: 1.6;
+}
+    </style>
+</head>
+<body>
+    <div class="welcome-container">
+        <h1 class="welcome-title">🌧️ RAINWATER QUEST 🌧️</h1>
+
+        <img src="{{ url_for('static', filename='images/1.png') }}" alt="Rainwater Collection" class="welcome-image">
+        <p style="font-size: 0.9em; color: #7f8c8d; margin-top: 10px;">Your adventure in water conservation begins now!</p>
+
+        <form action="{{ url_for('begin_quest') }}" method="post" style="margin-top: 40px;">
+            <button type="submit" class="button-full-width">🚀 BEGIN QUEST</button>
+        </form>
+    </div>
+</body>
+</html>