Initial commit: English Course 10 with offline 3D assets

.gitignore

@@ -0,0 +1,31 @@
+# Dependencies
+node_modules/
+__pycache__/
+*.py[cod]
+.venv/
+venv/
+env/
+
+# Environment variables
+.env
+.env.local
+
+# IDE
+.vscode/
+.idea/
+
+# System
+Thumbs.db
+Desktop.ini
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build
+dist/
+build/
+
+# Temporary scripts
+*.py

.vercel/project.json

@@ -0,0 +1 @@
+{"projectId":"prj_wr8twHxJHT3DDaloJXApT2ovbvJG","orgId":"team_kySCrU1jp0BBI2srgQ9vTTMw","projectName":"trae_0zn3xgh4","neverMindDeployCard":true}

.vercelignore

@@ -0,0 +1,7 @@
+node_modules
+build
+dist
+.git
+.trae
+.log
+.figma

assets/mascot_main.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect x="30" y="30" width="40" height="35" rx="8" fill="#e0f2fe" stroke="#0ea5e9" stroke-width="2"/>
+    <path d="M35 30 L25 15 L40 30" fill="#0ea5e9"/>
+    <path d="M65 30 L75 15 L60 30" fill="#0ea5e9"/>
+    <circle cx="43" cy="45" r="4" fill="#1e293b"/>
+    <circle cx="57" cy="45" r="4" fill="#1e293b"/>
+    <path d="M43 55 Q50 62 57 55" fill="none" stroke="#1e293b" stroke-width="2" stroke-linecap="round"/>
+    <line x1="50" y1="30" x2="50" y2="20" stroke="#64748b" stroke-width="2"/>
+    <circle cx="50" cy="18" r="3" fill="#f43f5e"/>
+</svg>

assets/ui/icon_badges.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path d="M30 10 L30 60 L50 80 L70 60 L70 10 Z" fill="#3b82f6" stroke="#2563eb" stroke-width="2"/>
+    <circle cx="50" cy="35" r="15" fill="#fcd34d" stroke="#f59e0b" stroke-width="2"/>
+    <path d="M50 25 L53 32 L60 32 L55 37 L57 44 L50 40 L43 44 L45 37 L40 32 L47 32 Z" fill="#fff"/>
+</svg>

assets/ui/icon_learn.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <defs>
+        <linearGradient id="bookGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#4facfe;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#00f2fe;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <rect x="10" y="20" width="35" height="60" rx="2" fill="#fff" stroke="#333" stroke-width="2"/>
+    <rect x="55" y="20" width="35" height="60" rx="2" fill="#fff" stroke="#333" stroke-width="2"/>
+    <path d="M45 20 L55 20 L55 80 L45 80 Z" fill="#ccc"/>
+    <rect x="15" y="30" width="25" height="5" rx="1" fill="#eee"/>
+    <rect x="15" y="40" width="25" height="5" rx="1" fill="#eee"/>
+    <rect x="60" y="30" width="25" height="5" rx="1" fill="url(#bookGrad)"/>
+    <rect x="60" y="40" width="25" height="5" rx="1" fill="url(#bookGrad)"/>
+    <circle cx="50" cy="50" r="40" fill="none" stroke="url(#bookGrad)" stroke-width="4" stroke-dasharray="10 5" opacity="0.5"/>
+</svg>

assets/ui/icon_points.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <defs>
+        <radialGradient id="coinGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
+            <stop offset="0%" style="stop-color:#fff7d6;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#fecf07;stop-opacity:1" />
+        </radialGradient>
+    </defs>
+    <circle cx="50" cy="50" r="40" fill="#d4af37" stroke="#b8860b" stroke-width="2"/>
+    <circle cx="50" cy="50" r="35" fill="url(#coinGrad)"/>
+    <text x="50" y="65" font-family="Arial" font-weight="bold" font-size="40" text-anchor="middle" fill="#b8860b">$</text>
+    <path d="M50 15 L55 25 L65 25 L57 32 L60 42 L50 35 L40 42 L43 32 L35 25 L45 25 Z" fill="#fff" opacity="0.5" transform="translate(0, -5)"/>
+</svg>

assets/ui/icon_speak.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <defs>
+        <linearGradient id="micGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" style="stop-color:#fa709a;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#fee140;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <path d="M20 30 Q20 10 50 10 Q80 10 80 30 V50 Q80 70 50 70 Q35 70 20 85 V70 Q20 70 20 70 Q10 70 10 50 Z" fill="url(#micGrad)" stroke="#333" stroke-width="2"/>
+    <rect x="45" y="25" width="10" height="25" rx="5" fill="#fff"/>
+    <line x1="40" y1="50" x2="60" y2="50" stroke="#fff" stroke-width="2"/>
+</svg>

assets/ui/icon_stories.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <defs>
+        <linearGradient id="chestGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#f6d365;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#fda085;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <path d="M15 40 L85 40 L80 80 L20 80 Z" fill="#8B4513" stroke="#333" stroke-width="2"/>
+    <path d="M15 40 Q50 10 85 40" fill="url(#chestGrad)" stroke="#333" stroke-width="2"/>
+    <rect x="45" y="35" width="10" height="15" rx="2" fill="#FFD700" stroke="#333" stroke-width="1"/>
+    <circle cx="30" cy="20" r="5" fill="#fff" opacity="0.8"/>
+    <circle cx="70" cy="25" r="4" fill="#fff" opacity="0.6"/>
+</svg>

assets/ui/level_city.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="45" fill="#e0f2fe"/>
+    <rect x="25" y="40" width="15" height="40" fill="#94a3b8" stroke="#475569" stroke-width="2"/>
+    <rect x="45" y="20" width="20" height="60" fill="#64748b" stroke="#334155" stroke-width="2"/>
+    <rect x="70" y="35" width="15" height="45" fill="#94a3b8" stroke="#475569" stroke-width="2"/>
+    <rect x="48" y="25" width="4" height="4" fill="#fef08a"/>
+    <rect x="58" y="25" width="4" height="4" fill="#fef08a"/>
+</svg>

assets/ui/level_forest.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="45" fill="#dcfce7"/>
+    <path d="M50 20 L30 60 H70 Z" fill="#22c55e" stroke="#15803d" stroke-width="2"/>
+    <path d="M30 40 L15 70 H45 Z" fill="#4ade80" stroke="#16a34a" stroke-width="2"/>
+    <path d="M70 40 L85 70 H55 Z" fill="#4ade80" stroke="#16a34a" stroke-width="2"/>
+    <rect x="45" y="60" width="10" height="20" fill="#a2714c"/>
+</svg>

assets/ui/level_secret.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="45" fill="#581c87"/>
+    <text x="50" y="65" font-family="Arial" font-weight="bold" font-size="50" text-anchor="middle" fill="#fde047">?</text>
+    <circle cx="50" cy="50" r="40" fill="none" stroke="#fde047" stroke-width="2" stroke-dasharray="5 5"/>
+</svg>

assets/ui/level_space.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="45" fill="#1e293b"/>
+    <circle cx="20" cy="20" r="2" fill="#fff"/>
+    <circle cx="80" cy="30" r="1" fill="#fff"/>
+    <circle cx="40" cy="80" r="1.5" fill="#fff"/>
+    <circle cx="50" cy="50" r="15" fill="#fca5a5" stroke="#f87171" stroke-width="2"/>
+    <ellipse cx="50" cy="50" rx="25" ry="5" fill="none" stroke="#fff" stroke-width="1" transform="rotate(-20 50 50)"/>
+</svg>

assets/ui/lock_icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect x="25" y="45" width="50" height="40" rx="5" fill="#94a3b8" stroke="#475569" stroke-width="2"/>
+    <path d="M35 45 V30 A15 15 0 0 1 65 30 V45" fill="none" stroke="#475569" stroke-width="8"/>
+    <circle cx="50" cy="65" r="5" fill="#1e293b"/>
+    <rect x="48" y="65" width="4" height="10" fill="#1e293b"/>
+</svg>

assets/ui/mascot_excited.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect x="30" y="30" width="40" height="35" rx="8" fill="#fef3c7" stroke="#d97706" stroke-width="2"/>
+    <path d="M35 30 L25 15 L40 30" fill="#d97706"/>
+    <path d="M65 30 L75 15 L60 30" fill="#d97706"/>
+    <path d="M40 45 L46 45" stroke="#1e293b" stroke-width="2" stroke-linecap="round"/>
+    <path d="M54 45 L60 45" stroke="#1e293b" stroke-width="2" stroke-linecap="round"/>
+    <path d="M43 55 Q50 65 57 55" fill="none" stroke="#1e293b" stroke-width="2" stroke-linecap="round"/>
+    <line x1="50" y1="30" x2="50" y2="20" stroke="#64748b" stroke-width="2"/>
+    <circle cx="50" cy="18" r="3" fill="#22c55e"/>
+    <path d="M20 20 L25 25 M80 20 L75 25 M20 80 L25 75 M80 80 L75 75" stroke="#f59e0b" stroke-width="2"/>
+</svg>

assets/ui/mascot_happy.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <!-- Robot Head -->
+    <rect x="30" y="30" width="40" height="35" rx="8" fill="#e0f2fe" stroke="#0ea5e9" stroke-width="2"/>
+    <!-- Ears -->
+    <path d="M35 30 L25 15 L40 30" fill="#0ea5e9"/>
+    <path d="M65 30 L75 15 L60 30" fill="#0ea5e9"/>
+    <!-- Eyes -->
+    <circle cx="43" cy="45" r="4" fill="#1e293b"/>
+    <circle cx="57" cy="45" r="4" fill="#1e293b"/>
+    <!-- Smile -->
+    <path d="M43 55 Q50 62 57 55" fill="none" stroke="#1e293b" stroke-width="2" stroke-linecap="round"/>
+    <!-- Antenna -->
+    <line x1="50" y1="30" x2="50" y2="20" stroke="#64748b" stroke-width="2"/>
+    <circle cx="50" cy="18" r="3" fill="#f43f5e"/>
+</svg>

assets/ui/mascot_sad.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect x="30" y="30" width="40" height="35" rx="8" fill="#e2e8f0" stroke="#64748b" stroke-width="2"/>
+    <path d="M35 30 L30 20 L40 30" fill="#64748b"/>
+    <path d="M65 30 L70 20 L60 30" fill="#64748b"/>
+    <circle cx="43" cy="48" r="3" fill="#1e293b"/>
+    <circle cx="57" cy="48" r="3" fill="#1e293b"/>
+    <path d="M43 58 Q50 52 57 58" fill="none" stroke="#1e293b" stroke-width="2" stroke-linecap="round"/>
+    <line x1="50" y1="30" x2="50" y2="25" stroke="#64748b" stroke-width="2"/>
+    <circle cx="50" cy="23" r="3" fill="#94a3b8"/>
+</svg>

assets/ui/mascot_thinking.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <rect x="30" y="30" width="40" height="35" rx="8" fill="#f3e8ff" stroke="#9333ea" stroke-width="2"/>
+    <path d="M35 30 L25 15 L40 30" fill="#9333ea"/>
+    <path d="M65 30 L75 15 L60 30" fill="#9333ea"/>
+    <circle cx="43" cy="45" r="3" fill="#1e293b"/>
+    <circle cx="57" cy="45" r="3" fill="#1e293b"/>
+    <line x1="45" y1="58" x2="55" y2="58" stroke="#1e293b" stroke-width="2" stroke-linecap="round"/>
+    <text x="80" y="30" font-family="Arial" font-size="30" fill="#9333ea">?</text>
+</svg>