Spaces:

ThiagoGM
/

learn2

Running

App Files Files Community

ThiagoGM commited on Apr 15, 2025

Commit

021fb1b

verified ·

1 Parent(s): 68eacb8

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1529 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Learn2
-emoji: 🏢
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: learn2
+emoji: 🐳
+colorFrom: green
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1529 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WordQuest - English Learning RPG</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            -webkit-tap-highlight-color: transparent;
+            background-color: #1a1a2e;
+            color: #ffffff;
+            overflow-x: hidden;
+            touch-action: manipulation;
+        }
+        .game-container {
+            max-width: 100%;
+            height: 100vh;
+            overflow: hidden;
+            position: relative;
+        }
+        .world-map {
+            background-image: url('https://i.imgur.com/JjQZQ9W.png');
+            background-size: cover;
+            background-position: center;
+            width: 200%;
+            height: 200%;
+            position: absolute;
+            transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+        }
+        .hud {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 12px;
+            display: flex;
+            justify-content: space-between;
+            z-index: 100;
+            background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
+        }
+        .hud-item {
+            background-color: rgba(0,0,0,0.5);
+            border-radius: 20px;
+            padding: 8px 12px;
+            display: flex;
+            align-items: center;
+            backdrop-filter: blur(5px);
+            border: 1px solid rgba(255,255,255,0.1);
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+        }
+        .hud-item:active {
+            transform: scale(0.95);
+        }
+        .xp-bar {
+            height: 6px;
+            border-radius: 3px;
+            background-color: rgba(255,255,255,0.2);
+            overflow: hidden;
+            margin-top: 4px;
+        }
+        .xp-progress {
+            height: 100%;
+            background: linear-gradient(90deg, #4f46e5, #a855f7);
+            border-radius: 3px;
+            transition: width 0.5s ease;
+            animation: pulse 2s infinite;
+        }
+        .streak-fire {
+            color: #f59e0b;
+            animation: flame 1s infinite alternate;
+        }
+        .coin {
+            color: #fbbf24;
+            animation: shine 2s infinite;
+        }
+        .avatar {
+            position: fixed;
+            bottom: 80px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 120px;
+            height: 120px;
+            background-color: #3b82f6;
+            border-radius: 50%;
+            border: 3px solid #ffffff;
+            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 40px;
+            z-index: 50;
+            transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+        }
+        .avatar:active {
+            transform: translateX(-50%) scale(0.9);
+        }
+        .nav-button {
+            position: fixed;
+            bottom: 20px;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background-color: #4f46e5;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            color: white;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+            z-index: 50;
+            transition: all 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+        }
+        .nav-button:active {
+            transform: scale(0.85);
+        }
+        .menu-button {
+            left: 20px;
+            background-color: #10b981;
+        }
+        .action-button {
+            right: 20px;
+            background-color: #ef4444;
+            animation: pulse 1.5s infinite;
+        }
+        .mission-marker {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: #f59e0b;
+            border: 2px solid white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 16px;
+            transform: translate(-50%, -50%);
+            z-index: 10;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        }
+        .mission-marker:active {
+            transform: translate(-50%, -50%) scale(1.1);
+        }
+        .mission-marker.active {
+            animation: bounce 0.8s infinite alternate;
+            box-shadow: 0 0 20px #f59e0b;
+        }
+        .mission-marker.completed {
+            background-color: #10b981;
+            box-shadow: 0 0 20px #10b981;
+        }
+        .dialog-bubble {
+            position: absolute;
+            background-color: white;
+            color: #1f2937;
+            padding: 12px;
+            border-radius: 16px;
+            max-width: 200px;
+            font-size: 14px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            z-index: 20;
+            transform-origin: bottom center;
+            animation: popIn 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
+            opacity: 0;
+        }
+        .dialog-bubble:after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            border-width: 10px 10px 0;
+            border-style: solid;
+            border-color: white transparent transparent;
+        }
+        .word-highlight {
+            background-color: rgba(234, 179, 8, 0.3);
+            border-radius: 2px;
+            transition: all 0.2s ease;
+            padding: 0 2px;
+            cursor: pointer;
+        }
+        .word-highlight:active {
+            transform: scale(1.1);
+        }
+        .word-highlight.active {
+            background-color: rgba(234, 179, 8, 0.7);
+            animation: wordGlow 0.5s ease-out;
+        }
+        .word-highlight.learned {
+            background-color: rgba(16, 185, 129, 0.3);
+        }
+        .word-highlight.learned.active {
+            background-color: rgba(16, 185, 129, 0.7);
+        }
+        .battle-ui {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: rgba(0,0,0,0.9);
+            border-top-left-radius: 20px;
+            border-top-right-radius: 20px;
+            padding: 20px;
+            transform: translateY(100%);
+            transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+            z-index: 200;
+            backdrop-filter: blur(10px);
+            box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
+        }
+        .battle-ui.active {
+            transform: translateY(0);
+        }
+        .npc-avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background-color: #6b7280;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 30px;
+            margin: 0 auto 10px;
+            border: 3px solid white;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+            transition: all 0.3s ease;
+        }
+        .health-bar {
+            height: 10px;
+            border-radius: 5px;
+            background-color: rgba(255,255,255,0.2);
+            overflow: hidden;
+            margin-bottom: 15px;
+        }
+        .health-progress {
+            height: 100%;
+            background: linear-gradient(90deg, #ef4444, #f59e0b);
+            border-radius: 5px;
+            transition: width 0.3s ease;
+        }
+        .dialogue-option {
+            background-color: rgba(255,255,255,0.1);
+            border-radius: 10px;
+            padding: 12px;
+            margin-bottom: 10px;
+            border: 1px solid rgba(255,255,255,0.2);
+            transition: all 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+        }
+        .dialogue-option:active {
+            background-color: rgba(255,255,255,0.3);
+            transform: scale(0.98);
+        }
+        .mic-button {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background-color: #ef4444;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto;
+            font-size: 24px;
+            color: white;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+            transition: all 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+        }
+        .mic-button.active {
+            animation: pulse 0.5s infinite;
+            background-color: #10b981;
+        }
+        .power-bar {
+            height: 6px;
+            border-radius: 3px;
+            background-color: rgba(255,255,255,0.2);
+            overflow: hidden;
+            margin-top: 10px;
+        }
+        .power-progress {
+            height: 100%;
+            background: linear-gradient(90deg, #3b82f6, #a855f7);
+            border-radius: 3px;
+            transition: width 0.1s ease;
+        }
+        .reward-popup {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            background-color: rgba(0,0,0,0.9);
+            border-radius: 20px;
+            padding: 20px;
+            width: 80%;
+            max-width: 300px;
+            text-align: center;
+            z-index: 300;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
+            animation: popIn 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards;
+        }
+        .reward-icon {
+            font-size: 40px;
+            margin-bottom: 10px;
+            animation: bounce 0.8s infinite alternate;
+        }
+        .confetti {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #f00;
+            border-radius: 50%;
+            animation: confetti-fall 2s ease-in-out forwards;
+            z-index: 350;
+        }
+        /* Mission UI */
+        .mission-ui {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0,0,0,0.9);
+            z-index: 400;
+            display: flex;
+            flex-direction: column;
+            transform: translateY(100%);
+            transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+            backdrop-filter: blur(10px);
+        }
+        .mission-ui.active {
+            transform: translateY(0);
+        }
+        .mission-header {
+            background-color: #4f46e5;
+            padding: 20px;
+            border-top-left-radius: 20px;
+            border-top-right-radius: 20px;
+            text-align: center;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        }
+        .mission-content {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+        }
+        .mission-text {
+            background-color: rgba(255,255,255,0.1);
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 20px;
+            line-height: 1.6;
+        }
+        .mission-actions {
+            display: flex;
+            gap: 10px;
+            padding: 20px;
+        }
+        .mission-button {
+            flex: 1;
+            padding: 15px;
+            border-radius: 10px;
+            text-align: center;
+            font-weight: bold;
+            transition: all 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+        }
+        .mission-button:active {
+            transform: scale(0.95);
+        }
+        .mission-button.primary {
+            background-color: #4f46e5;
+            color: white;
+        }
+        .mission-button.secondary {
+            background-color: rgba(255,255,255,0.1);
+            border: 1px solid rgba(255,255,255,0.2);
+        }
+        /* Menu UI */
+        .menu-ui {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0,0,0,0.9);
+            z-index: 500;
+            display: flex;
+            flex-direction: column;
+            transform: translateX(-100%);
+            transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+            backdrop-filter: blur(10px);
+        }
+        .menu-ui.active {
+            transform: translateX(0);
+        }
+        .menu-header {
+            background-color: #10b981;
+            padding: 20px;
+            text-align: center;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        }
+        .menu-content {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+        }
+        .menu-section {
+            background-color: rgba(255,255,255,0.1);
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 15px;
+        }
+        .menu-item {
+            padding: 12px;
+            border-radius: 8px;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            transition: all 0.2s ease;
+        }
+        .menu-item:active {
+            background-color: rgba(255,255,255,0.2);
+        }
+        .menu-item i {
+            width: 30px;
+            font-size: 18px;
+            text-align: center;
+            margin-right: 10px;
+        }
+        .menu-close {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: rgba(255,255,255,0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.2s ease;
+        }
+        .menu-close:active {
+            transform: scale(0.9);
+        }
+        /* Tutorial UI */
+        .tutorial-ui {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0,0,0,0.9);
+            z-index: 600;
+            display: flex;
+            flex-direction: column;
+            transform: translateY(100%);
+            transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+            backdrop-filter: blur(10px);
+        }
+        .tutorial-ui.active {
+            transform: translateY(0);
+        }
+        .tutorial-header {
+            background-color: #f59e0b;
+            padding: 20px;
+            text-align: center;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+        }
+        .tutorial-content {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+        }
+        .tutorial-step {
+            background-color: rgba(255,255,255,0.1);
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 15px;
+        }
+        .tutorial-actions {
+            display: flex;
+            gap: 10px;
+            padding: 20px;
+        }
+        .tutorial-button {
+            flex: 1;
+            padding: 15px;
+            border-radius: 10px;
+            text-align: center;
+            font-weight: bold;
+            transition: all 0.2s ease;
+        }
+        .tutorial-button:active {
+            transform: scale(0.95);
+        }
+        .tutorial-button.primary {
+            background-color: #f59e0b;
+            color: white;
+        }
+        /* Feedback UI */
+        .feedback-correct {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            background-color: rgba(16, 185, 129, 0.9);
+            color: white;
+            padding: 15px 25px;
+            border-radius: 50px;
+            font-weight: bold;
+            z-index: 700;
+            animation: popIn 0.3s ease-out forwards, fadeOut 0.5s ease-out 1s forwards;
+            box-shadow: 0 5px 15px rgba(16, 185, 129, 0.5);
+        }
+        .feedback-incorrect {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            background-color: rgba(239, 68, 68, 0.9);
+            color: white;
+            padding: 15px 25px;
+            border-radius: 50px;
+            font-weight: bold;
+            z-index: 700;
+            animation: popIn 0.3s ease-out forwards, fadeOut 0.5s ease-out 1s forwards;
+            box-shadow: 0 5px 15px rgba(239, 68, 68, 0.5);
+        }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 5px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255,255,255,0.1);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+            border-radius: 10px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        /* Animations */
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.05); opacity: 0.8; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+        @keyframes flame {
+            0% { text-shadow: 0 0 5px #f59e0b; }
+            100% { text-shadow: 0 0 15px #f59e0b, 0 0 5px #ef4444; }
+        }
+        @keyframes shine {
+            0% { text-shadow: 0 0 5px rgba(251, 191, 36, 0.5); }
+            50% { text-shadow: 0 0 15px rgba(251, 191, 36, 0.8); }
+            100% { text-shadow: 0 0 5px rgba(251, 191, 36, 0.5); }
+        }
+        @keyframes bounce {
+            0% { transform: translateY(0); }
+            100% { transform: translateY(-10px); }
+        }
+        @keyframes popIn {
+            0% { transform: scale(0); opacity: 0; }
+            80% { transform: scale(1.1); opacity: 1; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+        @keyframes fadeOut {
+            0% { opacity: 1; }
+            100% { opacity: 0; }
+        }
+        @keyframes wordGlow {
+            0% { background-color: rgba(234, 179, 8, 0.3); }
+            50% { background-color: rgba(234, 179, 8, 0.7); box-shadow: 0 0 10px rgba(234, 179, 8, 0.5); }
+            100% { background-color: rgba(234, 179, 8, 0.3); }
+        }
+        @keyframes confetti-fall {
+            0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
+            100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
+        }
+        @keyframes slideInRight {
+            0% { transform: translateX(100%); opacity: 0; }
+            100% { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes slideOutRight {
+            0% { transform: translateX(0); opacity: 1; }
+            100% { transform: translateX(100%); opacity: 0; }
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container">
+        <!-- World Map -->
+        <div class="world-map" id="worldMap"></div>
+        <!-- HUD -->
+        <div class="hud">
+            <div class="hud-item" onclick="showPlayerStats()">
+                <div class="mr-2">
+                    <div class="text-xs text-gray-300">Level</div>
+                    <div class="font-bold">12</div>
+                </div>
+                <div>
+                    <div class="text-xs text-right text-gray-300">XP</div>
+                    <div class="xp-bar">
+                        <div class="xp-progress" style="width: 65%"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="hud-item" onclick="showShop()">
+                <div class="mr-2">
+                    <div class="text-xs text-gray-300">Coins</div>
+                    <div class="font-bold flex items-center">
+                        <i class="fas fa-coins coin mr-1"></i> 1,245
+                    </div>
+                </div>
+            </div>
+            <div class="hud-item" onclick="showStreakInfo()">
+                <div class="mr-2">
+                    <div class="text-xs text-gray-300">Streak</div>
+                    <div class="font-bold flex items-center">
+                        <i class="fas fa-fire streak-fire mr-1"></i> 5
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Mission Markers -->
+        <div class="mission-marker" style="top: 30%; left: 25%;" onclick="startMission(1)">
+            <i class="fas fa-book"></i>
+        </div>
+        <div class="mission-marker active" style="top: 45%; left: 60%;" onclick="startMission(2)">
+            <i class="fas fa-comments"></i>
+        </div>
+        <div class="mission-marker completed" style="top: 70%; left: 40%;" onclick="startMission(3)">
+            <i class="fas fa-scroll"></i>
+        </div>
+        <!-- Dialog Bubble -->
+        <div class="dialog-bubble" style="top: 15%; left: 25%;" id="npcDialog">
+            Welcome to WordQuest! Tap on markers to start missions.
+        </div>
+        <!-- Player Avatar -->
+        <div class="avatar" onclick="showPlayerStats()">
+            <i class="fas fa-user"></i>
+        </div>
+        <!-- Navigation Buttons -->
+        <div class="nav-button menu-button" onclick="toggleMenu()">
+            <i class="fas fa-bars"></i>
+        </div>
+        <div class="nav-button action-button" onclick="startBattle()">
+            <i class="fas fa-microphone"></i>
+        </div>
+        <!-- Battle UI -->
+        <div class="battle-ui" id="battleUI">
+            <div class="npc-avatar">
+                <i class="fas fa-dragon"></i>
+            </div>
+            <div class="text-center mb-3">
+                <div class="font-bold">Grammar Dragon</div>
+                <div class="text-sm text-gray-300">Speak correctly to defeat me!</div>
+            </div>
+            <div class="health-bar">
+                <div class="health-progress" style="width: 70%"></div>
+            </div>
+            <div class="mb-4">
+                <div class="text-center text-sm mb-2">Choose your response:</div>
+                <div class="dialogue-option" onclick="selectDialogue(1)">
+                    "Hello! How are you today?"
+                </div>
+                <div class="dialogue-option" onclick="selectDialogue(2)">
+                    "I'm here to challenge you!"
+                </div>
+                <div class="dialogue-option" onclick="selectDialogue(3)">
+                    "What's your favorite color?"
+                </div>
+            </div>
+            <div class="text-center mb-3">
+                <div class="mic-button" id="micButton" onclick="toggleRecording()">
+                    <i class="fas fa-microphone"></i>
+                </div>
+                <div class="power-bar mt-2">
+                    <div class="power-progress" id="powerBar" style="width: 0%"></div>
+                </div>
+                <div class="text-xs mt-1">Hold to record your response</div>
+            </div>
+        </div>
+        <!-- Reward Popup -->
+        <div class="reward-popup" id="rewardPopup">
+            <div class="reward-icon">
+                <i class="fas fa-trophy text-yellow-400"></i>
+            </div>
+            <h3 class="font-bold text-xl mb-2">Mission Complete!</h3>
+            <p class="text-gray-300 mb-4">You earned 50 XP and 10 coins</p>
+            <div class="flex justify-center gap-4 mb-4">
+                <div class="text-center">
+                    <div class="text-sm text-gray-300">New Words</div>
+                    <div class="font-bold">3</div>
+                </div>
+                <div class="text-center">
+                    <div class="text-sm text-gray-300">Accuracy</div>
+                    <div class="font-bold">85%</div>
+                </div>
+            </div>
+            <button class="w-full py-3 bg-purple-600 rounded-lg font-bold" onclick="hideReward()">
+                Continue Adventure
+            </button>
+        </div>
+        <!-- Mission UI -->
+        <div class="mission-ui" id="missionUI">
+            <div class="mission-header">
+                <h2 class="font-bold text-xl">The Lost Translation</h2>
+                <div class="text-sm">Reading Mission • Level 2</div>
+            </div>
+            <div class="mission-content">
+                <div class="mission-text" id="missionText">
+                    In the ancient <span class="word-highlight" onclick="highlightWord('library')">library</span> of Wordoria, there lies a <span class="word-highlight" onclick="highlightWord('mysterious')">mysterious</span> <span class="word-highlight" onclick="highlightWord('scroll')">scroll</span> that has been <span class="word-highlight" onclick="highlightWord('untouched')">untouched</span> for centuries. The <span class="word-highlight" onclick="highlightWord('librarian')">librarian</span> told me that it contains the <span class="word-highlight" onclick="highlightWord('secrets')">secrets</span> of the <span class="word-highlight" onclick="highlightWord('language')">language</span> gods. To <span class="word-highlight" onclick="highlightWord('unlock')">unlock</span> its <span class="word-highlight" onclick="highlightWord('power')">power</span>, you must first <span class="word-highlight" onclick="highlightWord('understand')">understand</span> its contents.
+                    <div class="mt-4 p-3 bg-gray-800 rounded-lg">
+                        <h4 class="font-bold mb-2">Comprehension Questions:</h4>
+                        <div class="mb-3">
+                            <p class="mb-1">1. Where is the mysterious scroll located?</p>
+                            <div class="flex gap-2 mt-1">
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">In the mountains</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">In the library</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Under the sea</button>
+                            </div>
+                        </div>
+                        <div>
+                            <p class="mb-1">2. What does the scroll contain?</p>
+                            <div class="flex gap-2 mt-1">
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Treasure maps</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">Language secrets</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Ancient recipes</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mission-actions">
+                <button class="mission-button secondary" onclick="hideMission()">
+                    <i class="fas fa-times mr-1"></i> Cancel
+                </button>
+                <button class="mission-button primary" onclick="completeMission()">
+                    <i class="fas fa-check mr-1"></i> Complete
+                </button>
+            </div>
+        </div>
+        <!-- Menu UI -->
+        <div class="menu-ui" id="menuUI">
+            <div class="menu-header">
+                <h2 class="font-bold text-xl">WordQuest Menu</h2>
+            </div>
+            <div class="menu-close" onclick="toggleMenu()">
+                <i class="fas fa-times"></i>
+            </div>
+            <div class="menu-content">
+                <div class="menu-section">
+                    <h3 class="font-bold mb-3">Player</h3>
+                    <div class="menu-item" onclick="showPlayerStats()">
+                        <i class="fas fa-user"></i>
+                        <span>My Stats</span>
+                    </div>
+                    <div class="menu-item" onclick="showInventory()">
+                        <i class="fas fa-backpack"></i>
+                        <span>Inventory</span>
+                    </div>
+                    <div class="menu-item" onclick="showAchievements()">
+                        <i class="fas fa-trophy"></i>
+                        <span>Achievements</span>
+                    </div>
+                </div>
+                <div class="menu-section">
+                    <h3 class="font-bold mb-3">Game</h3>
+                    <div class="menu-item" onclick="showQuests()">
+                        <i class="fas fa-scroll"></i>
+                        <span>Quests</span>
+                    </div>
+                    <div class="menu-item" onclick="showShop()">
+                        <i class="fas fa-shopping-bag"></i>
+                        <span>Shop</span>
+                    </div>
+                    <div class="menu-item" onclick="showMap()">
+                        <i class="fas fa-map"></i>
+                        <span>World Map</span>
+                    </div>
+                </div>
+                <div class="menu-section">
+                    <h3 class="font-bold mb-3">Settings</h3>
+                    <div class="menu-item" onclick="showSettings()">
+                        <i class="fas fa-cog"></i>
+                        <span>Settings</span>
+                    </div>
+                    <div class="menu-item" onclick="showTutorial()">
+                        <i class="fas fa-question-circle"></i>
+                        <span>Tutorial</span>
+                    </div>
+                    <div class="menu-item" onclick="showHelp()">
+                        <i class="fas fa-info-circle"></i>
+                        <span>Help</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Tutorial UI -->
+        <div class="tutorial-ui" id="tutorialUI">
+            <div class="tutorial-header">
+                <h2 class="font-bold text-xl">Game Tutorial</h2>
+            </div>
+            <div class="tutorial-content">
+                <div class="tutorial-step">
+                    <h3 class="font-bold mb-2">Welcome to WordQuest!</h3>
+                    <p class="text-gray-300 mb-3">This is an adventure game where you learn English by completing quests, battling NPCs, and exploring the world.</p>
+                </div>
+                <div class="tutorial-step">
+                    <h3 class="font-bold mb-2">Mission Markers</h3>
+                    <p class="text-gray-300 mb-3">Tap on the glowing markers on the map to start missions. Each marker represents a different type of challenge:</p>
+                    <div class="flex items-center mb-2">
+                        <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-white mr-3">
+                            <i class="fas fa-book"></i>
+                        </div>
+                        <span>Reading Mission</span>
+                    </div>
+                    <div class="flex items-center mb-2">
+                        <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center text-white mr-3">
+                            <i class="fas fa-comments"></i>
+                        </div>
+                        <span>Speaking Mission</span>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center text-white mr-3">
+                            <i class="fas fa-scroll"></i>
+                        </div>
+                        <span>Completed Mission</span>
+                    </div>
+                </div>
+                <div class="tutorial-step">
+                    <h3 class="font-bold mb-2">Reading Missions</h3>
+                    <p class="text-gray-300 mb-3">In reading missions, you'll encounter texts with highlighted words. Tap on these words to learn their meanings.</p>
+                    <p class="text-gray-300">Answer comprehension questions correctly to complete the mission and earn rewards.</p>
+                </div>
+                <div class="tutorial-step">
+                    <h3 class="font-bold mb-2">Speaking Missions</h3>
+                    <p class="text-gray-300 mb-3">In speaking missions, you'll engage in conversations with NPCs. Choose what to say, then record your response using the microphone button.</p>
+                    <p class="text-gray-300">The better your pronunciation and grammar, the more damage you'll do to your opponent!</p>
+                </div>
+                <div class="tutorial-step">
+                    <h3 class="font-bold mb-2">Earning Rewards</h3>
+                    <p class="text-gray-300">Complete missions to earn XP, coins, and new words. Use coins to customize your avatar or buy power-ups in the shop.</p>
+                </div>
+            </div>
+            <div class="tutorial-actions">
+                <button class="tutorial-button primary" onclick="hideTutorial()">
+                    <i class="fas fa-check mr-1"></i> Got it!
+                </button>
+            </div>
+        </div>
+        <!-- Feedback Elements -->
+        <div class="feedback-correct" id="feedbackCorrect">
+            <i class="fas fa-check-circle mr-2"></i> Correct!
+        </div>
+        <div class="feedback-incorrect" id="feedbackIncorrect">
+            <i class="fas fa-times-circle mr-2"></i> Try again!
+        </div>
+    </div>
+    <script>
+        // Game state
+        const gameState = {
+            level: 12,
+            xp: 65,
+            coins: 1245,
+            streak: 5,
+            currentMission: null,
+            inBattle: false,
+            recording: false,
+            powerLevel: 0,
+            powerInterval: null,
+            learnedWords: ['library', 'scroll', 'understand'],
+            dailyQuests: [
+                { id: 1, title: "Complete 3 missions", progress: 2, target: 3, reward: 50 },
+                { id: 2, title: "Learn 5 new words", progress: 3, target: 5, reward: 30 },
+                { id: 3, title: "Maintain 3-day streak", progress: 1, target: 3, reward: 100 }
+            ],
+            inventory: [
+                { id: 1, name: "Basic Sword", type: "weapon", equipped: true },
+                { id: 2, name: "Leather Armor", type: "armor", equipped: true },
+                { id: 3, name: "XP Boost", type: "consumable", quantity: 3 }
+            ],
+            achievements: [
+                { id: 1, title: "First Mission", description: "Complete your first mission", earned: true },
+                { id: 2, title: "Word Collector", description: "Learn 10 words", earned: true },
+                { id: 3, title: "Daily Player", description: "Play for 7 consecutive days", earned: false }
+            ]
+        };
+        // Initialize game
+        function initGame() {
+            // Show initial dialog
+            setTimeout(() => {
+                const dialog = document.getElementById('npcDialog');
+                dialog.style.display = 'block';
+                setTimeout(() => {
+                    dialog.style.opacity = '1';
+                }, 10);
+                setTimeout(() => {
+                    dialog.style.opacity = '0';
+                    setTimeout(() => {
+                        dialog.style.display = 'none';
+                    }, 300);
+                }, 3000);
+            }, 1000);
+            // Set up world map dragging
+            const worldMap = document.getElementById('worldMap');
+            let isDragging = false;
+            let startX, startY, startTranslateX = 0, startTranslateY = 0;
+            worldMap.addEventListener('touchstart', (e) => {
+                if (gameState.currentMission || gameState.inBattle) return;
+                isDragging = true;
+                startX = e.touches[0].clientX;
+                startY = e.touches[0].clientY;
+                const transform = worldMap.style.transform.match(/translate\(([^)]+)\)/);
+                if (transform) {
+                    const [x, y] = transform[1].split(',').map(parseFloat);
+                    startTranslateX = x || 0;
+                    startTranslateY = y || 0;
+                }
+                e.preventDefault();
+            });
+            worldMap.addEventListener('touchmove', (e) => {
+                if (!isDragging) return;
+                const x = e.touches[0].clientX;
+                const y = e.touches[0].clientY;
+                const dx = x - startX;
+                const dy = y - startY;
+                worldMap.style.transform = `translate(${startTranslateX + dx}px, ${startTranslateY + dy}px)`;
+                e.preventDefault();
+            });
+            worldMap.addEventListener('touchend', () => {
+                isDragging = false;
+            });
+            // Check if it's the first time playing
+            if (!localStorage.getItem('wordQuestPlayed')) {
+                setTimeout(() => {
+                    showTutorial();
+                }, 1500);
+                localStorage.setItem('wordQuestPlayed', 'true');
+            }
+            // Mark learned words
+            setTimeout(() => {
+                document.querySelectorAll('.word-highlight').forEach(el => {
+                    if (gameState.learnedWords.includes(el.textContent.toLowerCase())) {
+                        el.classList.add('learned');
+                    }
+                });
+            }, 500);
+        }
+        // Start a mission
+        function startMission(missionId) {
+            if (gameState.currentMission || gameState.inBattle) return;
+            gameState.currentMission = missionId;
+            // Different mission types
+            if (missionId === 1) {
+                // Reading mission
+                document.getElementById('missionText').innerHTML = `
+                    In the ancient <span class="word-highlight" onclick="highlightWord('library')">library</span> of Wordoria, there lies a <span class="word-highlight" onclick="highlightWord('mysterious')">mysterious</span> <span class="word-highlight" onclick="highlightWord('scroll')">scroll</span> that has been <span class="word-highlight" onclick="highlightWord('untouched')">untouched</span> for centuries. The <span class="word-highlight" onclick="highlightWord('librarian')">librarian</span> told me that it contains the <span class="word-highlight" onclick="highlightWord('secrets')">secrets</span> of the <span class="word-highlight" onclick="highlightWord('language')">language</span> gods. To <span class="word-highlight" onclick="highlightWord('unlock')">unlock</span> its <span class="word-highlight" onclick="highlightWord('power')">power</span>, you must first <span class="word-highlight" onclick="highlightWord('understand')">understand</span> its contents.
+                    <div class="mt-4 p-3 bg-gray-800 rounded-lg">
+                        <h4 class="font-bold mb-2">Comprehension Questions:</h4>
+                        <div class="mb-3">
+                            <p class="mb-1">1. Where is the mysterious scroll located?</p>
+                            <div class="flex gap-2 mt-1">
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">In the mountains</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">In the library</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Under the sea</button>
+                            </div>
+                        </div>
+                        <div>
+                            <p class="mb-1">2. What does the scroll contain?</p>
+                            <div class="flex gap-2 mt-1">
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Treasure maps</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">Language secrets</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">Ancient recipes</button>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            } else if (missionId === 2) {
+                // Conversation mission
+                document.getElementById('missionText').innerHTML = `
+                    <div class="flex mb-4">
+                        <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3">
+                            <i class="fas fa-robot"></i>
+                        </div>
+                        <div class="bg-gray-700 rounded-lg p-3 flex-1">
+                            <p>Hello traveler! I'm the Guardian of Wordoria. To pass through these gates, you must answer my questions correctly.</p>
+                        </div>
+                    </div>
+                    <div class="flex justify-end mb-4">
+                        <div class="bg-blue-500 rounded-lg p-3 max-w-[80%]">
+                            <p>I'm ready for your questions!</p>
+                        </div>
+                    </div>
+                    <div class="flex mb-4">
+                        <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3">
+                            <i class="fas fa-robot"></i>
+                        </div>
+                        <div class="bg-gray-700 rounded-lg p-3 flex-1">
+                            <p class="mb-2">First question: What do you say when you meet someone for the first time?</p>
+                            <div class="flex gap-2">
+                                <button class="px-3 py-1 bg-gray-600 rounded-full text-sm" onclick="checkAnswer(this, false)">Goodbye</button>
+                                <button class="px-3 py-1 bg-gray-600 rounded-full text-sm" onclick="checkAnswer(this, true)">Hello</button>
+                                <button class="px-3 py-1 bg-gray-600 rounded-full text-sm" onclick="checkAnswer(this, false)">Thank you</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="text-center mt-6">
+                        <button class="px-4 py-2 bg-blue-500 rounded-lg font-bold" onclick="startBattle()">
+                            <i class="fas fa-microphone mr-2"></i> Practice Speaking
+                        </button>
+                    </div>
+                `;
+            } else {
+                // Grammar mission
+                document.getElementById('missionText').innerHTML = `
+                    <div class="bg-gray-800 rounded-lg p-4 mb-4">
+                        <h4 class="font-bold mb-2">Grammar Challenge</h4>
+                        <p class="mb-3">Complete the sentences with the correct words:</p>
+                        <div class="mb-3">
+                            <p class="mb-1">1. I ___ to the store yesterday.</p>
+                            <div class="flex gap-2 mt-1">
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">went</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">go</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">going</button>
+                            </div>
+                        </div>
+                        <div class="mb-3">
+                            <p class="mb-1">2. She ___ a book right now.</p>
+                            <div class="flex gap-2 mt-1">
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">read</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">is reading</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">reads</button>
+                            </div>
+                        </div>
+                        <div>
+                            <p class="mb-1">3. They ___ happy to see you.</p>
+                            <div class="flex gap-2 mt-1">
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, true)">are</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">is</button>
+                                <button class="px-3 py-1 bg-gray-700 rounded-full text-sm" onclick="checkAnswer(this, false)">am</button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="text-center">
+                        <p class="text-sm text-gray-300">Complete 3 more challenges to unlock the next area!</p>
+                    </div>
+                `;
+            }
+            // Mark learned words
+            setTimeout(() => {
+                document.querySelectorAll('.word-highlight').forEach(el => {
+                    if (gameState.learnedWords.includes(el.textContent.toLowerCase())) {
+                        el.classList.add('learned');
+                    }
+                });
+            }, 10);
+            document.getElementById('missionUI').classList.add('active');
+        }
+        // Hide mission UI
+        function hideMission() {
+            document.getElementById('missionUI').classList.remove('active');
+            gameState.currentMission = null;
+        }
+        // Complete mission
+        function completeMission() {
+            hideMission();
+            showReward();
+            // Update mission marker if completed
+            if (gameState.currentMission === 2) {
+                document.querySelector('.mission-marker.active').classList.remove('active');
+                document.querySelector('.mission-marker.active').classList.add('completed');
+            }
+            // Update daily quest progress
+            gameState.dailyQuests[0].progress += 1;
+        }
+        // Highlight a word
+        function highlightWord(word) {
+            const element = event.target;
+            element.classList.add('active');
+            // Show tooltip with translation
+            const tooltip = document.createElement('div');
+            tooltip.className = 'absolute bg-black text-white text-xs px-2 py-1 rounded whitespace-nowrap';
+            tooltip.textContent = `Translated: ${word}`;
+            tooltip.style.top = `${element.getBoundingClientRect().top - 30}px`;
+            tooltip.style.left = `${element.getBoundingClientRect().left}px`;
+            tooltip.style.zIndex = '1000';
+            document.body.appendChild(tooltip);
+            // Add word to learned words if not already there
+            if (!gameState.learnedWords.includes(word.toLowerCase())) {
+                gameState.learnedWords.push(word.toLowerCase());
+                element.classList.add('learned');
+                // Update daily quest progress
+                gameState.dailyQuests[1].progress += 1;
+            }
+            setTimeout(() => {
+                element.classList.remove('active');
+                tooltip.remove();
+            }, 2000);
+        }
+        // Check answer
+        function checkAnswer(button, isCorrect) {
+            const allButtons = button.parentElement.querySelectorAll('button');
+            allButtons.forEach(btn => {
+                btn.disabled = true;
+                btn.classList.remove('bg-green-500', 'bg-red-500', 'text-white');
+            });
+            if (isCorrect) {
+                button.classList.add('bg-green-500', 'text-white');
+                // Add checkmark
+                const check = document.createElement('i');
+                check.className = 'fas fa-check ml-1';
+                button.appendChild(check);
+                // Show feedback
+                showFeedback(true);
+            } else {
+                button.classList.add('bg-red-500', 'text-white');
+                // Add X mark
+                const x = document.createElement('i');
+                x.className = 'fas fa-times ml-1';
+                button.appendChild(x);
+                // Show correct answer
+                allButtons.forEach(btn => {
+                    if (btn.getAttribute('onclick').includes('true')) {
+                        btn.classList.add('bg-green-500', 'text-white');
+                    }
+                });
+                // Show feedback
+                showFeedback(false);
+            }
+        }
+        // Show feedback
+        function showFeedback(isCorrect) {
+            const feedback = document.getElementById(isCorrect ? 'feedbackCorrect' : 'feedbackIncorrect');
+            feedback.style.display = 'block';
+            setTimeout(() => {
+                feedback.style.transform = 'translate(-50%, -50%) scale(1)';
+                feedback.style.opacity = '1';
+            }, 10);
+            setTimeout(() => {
+                feedback.style.opacity = '0';
+                setTimeout(() => {
+                    feedback.style.display = 'none';
+                    feedback.style.transform = 'translate(-50%, -50%) scale(0)';
+                }, 500);
+            }, 1000);
+        }
+        // Start a battle
+        function startBattle() {
+            gameState.inBattle = true;
+            document.getElementById('battleUI').classList.add('active');
+        }
+        // End battle
+        function endBattle() {
+            gameState.inBattle = false;
+            document.getElementById('battleUI').classList.remove('active');
+            showReward();
+        }
+        // Select dialogue option
+        function selectDialogue(option) {
+            const options = document.querySelectorAll('.dialogue-option');
+            options.forEach(opt => {
+                opt.classList.remove('bg-blue-500', 'text-white');
+            });
+            event.target.classList.add('bg-blue-500', 'text-white');
+            // Update NPC response based on selection
+            const npcAvatar = document.querySelector('.npc-avatar');
+            npcAvatar.innerHTML = '<i class="fas fa-comment-dots"></i>';
+            setTimeout(() => {
+                npcAvatar.innerHTML = '<i class="fas fa-dragon"></i>';
+            }, 1000);
+        }
+        // Toggle recording
+        function toggleRecording() {
+            const micButton = document.getElementById('micButton');
+            if (gameState.recording) {
+                // Stop recording
+                gameState.recording = false;
+                micButton.classList.remove('active');
+                clearInterval(gameState.powerInterval);
+                // Analyze speech (simulated)
+                setTimeout(() => {
+                    const powerBar = document.getElementById('powerBar');
+                    const score = Math.min(100, Math.floor(gameState.powerLevel * 1.5));
+                    powerBar.style.width = `${score}%`;
+                    // Show result
+                    let result = '';
+                    const npcAvatar = document.querySelector('.npc-avatar');
+                    if (score > 80) {
+                        result = 'Perfect! Critical hit!';
+                        npcAvatar.innerHTML = '<i class="fas fa-heart-broken"></i>';
+                        showFeedback(true);
+                    } else if (score > 50) {
+                        result = 'Good! The enemy is weakened.';
+                        npcAvatar.innerHTML = '<i class="fas fa-frown"></i>';
+                        showFeedback(true);
+                    } else {
+                        result = 'Needs improvement. Try again!';
+                        npcAvatar.innerHTML = '<i class="fas fa-grin"></i>';
+                        showFeedback(false);
+                    }
+                    // Show result for 2 seconds then reset
+                    setTimeout(() => {
+                        npcAvatar.innerHTML = '<i class="fas fa-dragon"></i>';
+                        powerBar.style.width = '0%';
+                        gameState.powerLevel = 0;
+                        // End battle after 3 successful attempts
+                        if (score > 50) {
+                            setTimeout(endBattle, 1000);
+                        }
+                    }, 2000);
+                }, 500);
+            } else {
+                // Start recording
+                gameState.recording = true;
+                micButton.classList.add('active');
+                gameState.powerLevel = 0;
+                // Simulate power level increasing
+                gameState.powerInterval = setInterval(() => {
+                    gameState.powerLevel += Math.random() * 5;
+                    const powerBar = document.getElementById('powerBar');
+                    powerBar.style.width = `${Math.min(100, gameState.powerLevel)}%`;
+                }, 100);
+            }
+        }
+        // Show reward popup
+        function showReward() {
+            // Create confetti
+            for (let i = 0; i < 50; i++) {
+                const confetti = document.createElement('div');
+                confetti.className = 'confetti';
+                confetti.style.left = `${Math.random() * 100}%`;
+                confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
+                confetti.style.animationDuration = `${2 + Math.random() * 3}s`;
+                document.body.appendChild(confetti);
+                setTimeout(() => {
+                    confetti.remove();
+                }, 5000);
+            }
+            document.getElementById('rewardPopup').style.display = 'block';
+            setTimeout(() => {
+                document.getElementById('rewardPopup').style.transform = 'translate(-50%, -50%) scale(1)';
+                document.getElementById('rewardPopup').style.opacity = '1';
+            }, 10);
+        }
+        // Hide reward popup
+        function hideReward() {
+            document.getElementById('rewardPopup').style.opacity = '0';
+            setTimeout(() => {
+                document.getElementById('rewardPopup').style.display = 'none';
+                document.getElementById('rewardPopup').style.transform = 'translate(-50%, -50%) scale(0)';
+            }, 300);
+        }
+        // Toggle menu
+        function toggleMenu() {
+            const menu = document.getElementById('menuUI');
+            if (menu.classList.contains('active')) {
+                menu.classList.remove('active');
+            } else {
+                menu.classList.add('active');
+            }
+        }
+        // Show tutorial
+        function showTutorial() {
+            document.getElementById('tutorialUI').classList.add('active');
+        }
+        // Hide tutorial
+        function hideTutorial() {
+            document.getElementById('tutorialUI').classList.remove('active');
+        }
+        // Show player stats
+        function showPlayerStats() {
+            alert(`Player Stats:\nLevel: ${gameState.level}\nXP: ${gameState.xp}%\nCoins: ${gameState.coins}\nStreak: ${gameState.streak} days\nWords Learned: ${gameState.learnedWords.length}`);
+        }
+        // Show shop
+        function showShop() {
+            alert("Shop UI would open here with items to purchase using coins");
+        }
+        // Show streak info
+        function showStreakInfo() {
+            alert(`Daily Login Streak: ${gameState.streak} days\n\nMaintain your streak to earn bonus rewards!`);
+        }
+        // Show inventory
+        function showInventory() {
+            let inventoryText = "Your Inventory:\n";
+            gameState.inventory.forEach(item => {
+                inventoryText += `- ${item.name} (${item.type})`;
+                if (item.quantity) inventoryText += ` x${item.quantity}`;
+                if (item.equipped) inventoryText += " [EQUIPPED]";
+                inventoryText += "\n";
+            });
+            alert(inventoryText);
+            toggleMenu();
+        }
+        // Show achievements
+        function showAchievements() {
+            let achievementsText = "Your Achievements:\n";
+            gameState.achievements.forEach(ach => {
+                achievementsText += `- ${ach.title}: ${ach.description} `;
+                achievementsText += ach.earned ? "✓\n" : "🔒\n";
+            });
+            alert(achievementsText);
+            toggleMenu();
+        }
+        // Show quests
+        function showQuests() {
+            let questsText = "Daily Quests:\n";
+            gameState.dailyQuests.forEach(quest => {
+                questsText += `- ${quest.title}: ${quest.progress}/${quest.target} `;
+                questsText += `(Reward: ${quest.reward} coins)\n`;
+            });
+            alert(questsText);
+            toggleMenu();
+        }
+        // Show settings
+        function showSettings() {
+            alert("Settings UI would open here with audio, language, and account options");
+            toggleMenu();
+        }
+        // Show help
+        function showHelp() {
+            alert("Help UI would open here with FAQs and support contact");
+            toggleMenu();
+        }
+        // Initialize game when loaded
+        window.addEventListener('DOMContentLoaded', initGame);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ThiagoGM/learn2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>