feat: enhance UI/UX with glassmorphism, sound effects, and language filter

app.py

@@ -1,12 +1,12 @@
 import os
 import random
-from flask import Flask, render_template, jsonify
+from flask import Flask, render_template, jsonify, request
 
 app = Flask(__name__)
 
-# 示例代码片段 (Python, JavaScript, Go, SQL)
-# 包含中文注释，模拟真实开发场景
+# 示例代码片段
 SNIPPETS = [
+    # --- Python ---
     {
         "language": "Python",
         "code": """# 二分查找算法实现
@@ -24,6 +24,32 @@ def binary_search(arr, target):
             
     return -1  # 未找到"""
     },
+    {
+        "language": "Python",
+        "code": """# Flask 路由示例
+@app.route('/api/users', methods=['GET'])
+def get_users():
+    # 从数据库获取用户列表
+    users = db.session.query(User).all()
+    return jsonify({
+        "count": len(users),
+        "data": [u.to_dict() for u in users]
+    })"""
+    },
+    {
+        "language": "Python",
+        "code": """# 快速排序 (Quick Sort)
+def quick_sort(arr):
+    if len(arr) <= 1:
+        return arr
+    pivot = arr[len(arr) // 2]
+    left = [x for x in arr if x < pivot]
+    middle = [x for x in arr if x == pivot]
+    right = [x for x in arr if x > pivot]
+    return quick_sort(left) + middle + quick_sort(right)"""
+    },
+
+    # --- JavaScript ---
     {
         "language": "JavaScript",
         "code": """/**
@@ -44,17 +70,24 @@ function debounce(func, wait) {
 }"""
     },
     {
-        "language": "Python",
-        "code": """# Flask 路由示例
-@app.route('/api/users', methods=['GET'])
-def get_users():
-    # 从数据库获取用户列表
-    users = db.session.query(User).all()
-    return jsonify({
-        "count": len(users),
-        "data": [u.to_dict() for u in users]
-    })"""
+        "language": "JavaScript",
+        "code": """// Promise 链式调用示例
+fetch('https://api.example.com/data')
+  .then(response => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then(data => {
+    console.log('Success:', data);
+  })
+  .catch(error => {
+    console.error('Error:', error);
+  });"""
     },
+
+    # --- Go ---
     {
         "language": "Go",
         "code": """// 并发处理示例
@@ -81,6 +114,8 @@ func main() {
     fmt.Println("All workers done")
 }"""
     },
+
+    # --- SQL ---
     {
         "language": "SQL",
         "code": """-- 查询高价值用户
@@ -95,8 +130,10 @@ GROUP BY u.id
 HAVING total_spent > 1000
 ORDER BY total_spent DESC;"""
     },
+
+    # --- React ---
     {
-        "language": "React (JSX)",
+        "language": "React",
         "code": """// 简单的计数器组件
 import React, { useState } from 'react';
 
@@ -115,6 +152,46 @@ export default function Counter() {
     </div>
   );
 }"""
+    },
+
+    # --- Java ---
+    {
+        "language": "Java",
+        "code": """// 单例模式 (Double Checked Locking)
+public class Singleton {
+    private static volatile Singleton instance;
+
+    private Singleton() {}
+
+    public static Singleton getInstance() {
+        if (instance == null) {
+            synchronized (Singleton.class) {
+                if (instance == null) {
+                    instance = new Singleton();
+                }
+            }
+        }
+        return instance;
+    }
+}"""
+    },
+    
+    # --- HTML/CSS ---
+    {
+        "language": "HTML",
+        "code": """<!-- 简单的卡片布局 -->
+<div class="card">
+  <img src="avatar.jpg" alt="User Avatar" class="card-img">
+  <div class="card-body">
+    <h5 class="card-title">Card Title</h5>
+    <p class="card-text">Some quick example text to build on the card title.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+<style>
+  .card { border: 1px solid #ccc; border-radius: 8px; padding: 16px; }
+  .card-img { width: 100%; height: auto; border-radius: 4px; }
+</style>"""
     }
 ]
 
@@ -124,9 +201,23 @@ def index():
 
 @app.route('/api/snippet')
 def get_snippet():
+    lang = request.args.get('lang')
+    
+    if lang and lang != 'All':
+        filtered = [s for s in SNIPPETS if s['language'] == lang]
+        if filtered:
+            return jsonify(random.choice(filtered))
+    
+    # 默认随机返回
     snippet = random.choice(SNIPPETS)
     return jsonify(snippet)
 
+@app.route('/api/languages')
+def get_languages():
+    # 获取所有唯一的语言列表
+    languages = sorted(list(set(s['language'] for s in SNIPPETS)))
+    return jsonify(['All'] + languages)
+
 @app.route('/health')
 def health():
     return "OK", 200

static/script.js

@@ -1,14 +1,27 @@
 const codeDisplay = document.getElementById('code-display');
+const codeContainer = document.getElementById('code-container');
 const hiddenInput = document.getElementById('hidden-input');
 const wpmDisplay = document.getElementById('wpm');
 const accuracyDisplay = document.getElementById('accuracy');
 const progressDisplay = document.getElementById('progress');
-const langDisplay = document.getElementById('lang-display');
+const langSelect = document.getElementById('lang-select');
 const resultOverlay = document.getElementById('result-overlay');
 const finalWpmDisplay = document.getElementById('final-wpm');
 const finalAccuracyDisplay = document.getElementById('final-accuracy');
 const restartBtn = document.getElementById('restart-btn');
+const soundToggleBtn = document.getElementById('sound-toggle');
+const soundIcon = document.getElementById('sound-icon');
+const focusHint = document.getElementById('focus-hint');
+const bestWpmDisplay = document.getElementById('best-wpm');
 
+// Custom Code Elements
+const customCodeBtn = document.getElementById('custom-code-btn');
+const customModal = document.getElementById('custom-modal');
+const customInput = document.getElementById('custom-input');
+const customConfirm = document.getElementById('custom-confirm');
+const customCancel = document.getElementById('custom-cancel');
+
+// State
 let currentCode = "";
 let currentIndex = 0;
 let startTime = null;
@@ -16,20 +29,54 @@ let timer = null;
 let mistakes = 0;
 let totalTyped = 0;
 let isFinished = false;
+let soundEnabled = localStorage.getItem('code-typing-sound-enabled') !== 'false'; // Default true
+let audioCtx = null;
+let bestWpm = parseInt(localStorage.getItem('code-typing-best-wpm') || '0');
 
 // Initialize
-function init() {
+async function init() {
+    updateSoundIcon();
+    bestWpmDisplay.textContent = bestWpm;
+    
+    await fetchLanguages();
+    
+    // Check if we just finished a custom game? No, always fetch new or use custom logic if implemented later.
+    // For now, default to fetch snippet.
     fetchSnippet();
-    hiddenInput.focus();
-    // Keep focus on hidden input
-    document.addEventListener('click', () => {
-        if (!isFinished) hiddenInput.focus();
-    });
+    
+    setupEventListeners();
+}
+
+async function fetchLanguages() {
+    try {
+        const response = await fetch('/api/languages');
+        const languages = await response.json();
+        
+        // Preserve selection if possible
+        const currentSelection = langSelect.value;
+        
+        langSelect.innerHTML = '';
+        languages.forEach(lang => {
+            const option = document.createElement('option');
+            option.value = lang;
+            option.textContent = lang;
+            // Style options (black text on white background for visibility in dropdown)
+            option.className = "text-slate-900 bg-slate-200"; 
+            langSelect.appendChild(option);
+        });
+        
+        if (languages.includes(currentSelection)) {
+            langSelect.value = currentSelection;
+        }
+    } catch (e) {
+        console.error("Failed to fetch languages", e);
+    }
 }
 
 async function fetchSnippet() {
+    const lang = langSelect.value;
     try {
-        const response = await fetch('/api/snippet');
+        const response = await fetch(`/api/snippet?lang=${lang}`);
         const data = await response.json();
         setupGame(data.code, data.language);
     } catch (e) {
@@ -50,7 +97,6 @@ function setupGame(code, language) {
     if (timer) clearInterval(timer);
     
     // Update UI
-    langDisplay.textContent = language;
     wpmDisplay.textContent = '0';
     accuracyDisplay.textContent = '100%';
     progressDisplay.textContent = '0%';
@@ -59,6 +105,9 @@ function setupGame(code, language) {
     // Render Code
     renderCode();
     
+    // Scroll to top
+    codeContainer.scrollTop = 0;
+    
     hiddenInput.value = '';
     hiddenInput.focus();
 }
@@ -73,7 +122,7 @@ function renderCode() {
         // Visual tweak for spaces/newlines
         if (char === '\n') {
             span.innerHTML = '↵\n';
-            span.classList.add('text-slate-700');
+            span.classList.add('text-slate-700', 'opacity-50');
         }
         
         codeDisplay.appendChild(span);
@@ -84,6 +133,7 @@ function startTimer() {
     if (!startTime) {
         startTime = new Date();
         timer = setInterval(updateStats, 1000);
+        initAudio(); // Ensure audio context is ready
     }
 }
 
@@ -93,9 +143,10 @@ function updateStats() {
     const now = new Date();
     const timeDiff = (now - startTime) / 1000 / 60; // in minutes
     
+    let wpm = 0;
     if (timeDiff > 0) {
         // WPM = (Characters / 5) / Minutes
-        const wpm = Math.round((currentIndex / 5) / timeDiff);
+        wpm = Math.round((currentIndex / 5) / timeDiff);
         wpmDisplay.textContent = wpm;
     }
     
@@ -111,50 +162,173 @@ function finishGame() {
     clearInterval(timer);
     updateStats();
     
-    finalWpmDisplay.textContent = wpmDisplay.textContent;
+    const finalWpm = parseInt(wpmDisplay.textContent);
+    finalWpmDisplay.textContent = finalWpm;
     finalAccuracyDisplay.textContent = accuracyDisplay.textContent;
+    
+    // Update Best WPM
+    if (finalWpm > bestWpm) {
+        bestWpm = finalWpm;
+        localStorage.setItem('code-typing-best-wpm', bestWpm);
+        bestWpmDisplay.textContent = bestWpm;
+        // Could play a victory sound here
+    }
+    
     resultOverlay.classList.remove('hidden');
     restartBtn.focus();
 }
 
-// Input Handling
-hiddenInput.addEventListener('input', (e) => {
-    if (isFinished) return;
+// Audio System
+function initAudio() {
+    if (!audioCtx) {
+        const AudioContext = window.AudioContext || window.webkitAudioContext;
+        audioCtx = new AudioContext();
+    }
+    if (audioCtx.state === 'suspended') {
+        audioCtx.resume();
+    }
+}
+
+function playClickSound() {
+    if (!soundEnabled || !audioCtx) return;
+    
+    const osc = audioCtx.createOscillator();
+    const gain = audioCtx.createGain();
+    
+    // Mechanical switch sound simulation (High pitch short burst)
+    osc.type = 'triangle'; 
+    osc.frequency.setValueAtTime(600, audioCtx.currentTime);
+    osc.frequency.exponentialRampToValueAtTime(300, audioCtx.currentTime + 0.05);
+    
+    gain.gain.setValueAtTime(0.05, audioCtx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.05);
+    
+    osc.connect(gain);
+    gain.connect(audioCtx.destination);
+    
+    osc.start();
+    osc.stop(audioCtx.currentTime + 0.05);
+}
+
+function playErrorSound() {
+    if (!soundEnabled || !audioCtx) return;
     
-    // We don't actually use the input value, we just catch the event
-    // But to support backspace on mobile properly, we might need more complex logic.
-    // For this desktop-first version, we'll listen to 'keydown' for control and just check logic here if needed.
-    // Actually, 'input' event is safer for mobile software keyboards.
+    const osc = audioCtx.createOscillator();
+    const gain = audioCtx.createGain();
     
-    const inputChar = e.data;
+    // Low thud
+    osc.type = 'sine'; 
+    osc.frequency.setValueAtTime(150, audioCtx.currentTime);
+    osc.frequency.exponentialRampToValueAtTime(50, audioCtx.currentTime + 0.1);
     
-    // Reset input to empty to avoid scrolling or overflow
-    // BUT, we need to handle the character. 
-    // This approach is tricky with 'input' event because 'data' can be null on some actions.
-    // Let's rely on keydown for desktop/precision, and input for backup?
-    // Let's stick to keydown for a "Pro" tool.
-});
+    gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.1);
+    
+    osc.connect(gain);
+    gain.connect(audioCtx.destination);
+    
+    osc.start();
+    osc.stop(audioCtx.currentTime + 0.1);
+}
+
+function updateSoundIcon() {
+    soundIcon.textContent = soundEnabled ? '🔊' : '🔇';
+    soundToggleBtn.classList.toggle('text-blue-400', soundEnabled);
+    soundToggleBtn.classList.toggle('text-slate-500', !soundEnabled);
+}
+
+// Event Listeners
+function setupEventListeners() {
+    
+    // Focus management
+    document.addEventListener('click', (e) => {
+        // Don't autofocus if clicking on buttons or modal
+        if (e.target.closest('button') || e.target.closest('select') || e.target.closest('textarea') || e.target.closest('#custom-modal')) return;
+        
+        if (!isFinished) {
+            hiddenInput.focus();
+            initAudio(); // Initialize audio on first user interaction
+        }
+    });
+
+    hiddenInput.addEventListener('blur', () => {
+        if (!isFinished) focusHint.classList.remove('opacity-0');
+    });
+
+    hiddenInput.addEventListener('focus', () => {
+        focusHint.classList.add('opacity-0');
+    });
+
+    // Language Change
+    langSelect.addEventListener('change', () => {
+        fetchSnippet();
+        hiddenInput.focus();
+    });
+
+    // Sound Toggle
+    soundToggleBtn.addEventListener('click', () => {
+        soundEnabled = !soundEnabled;
+        localStorage.setItem('code-typing-sound-enabled', soundEnabled);
+        updateSoundIcon();
+        hiddenInput.focus();
+    });
+
+    // Custom Code Logic
+    customCodeBtn.addEventListener('click', () => {
+        customModal.classList.remove('hidden');
+        customInput.focus();
+    });
+
+    customCancel.addEventListener('click', () => {
+        customModal.classList.add('hidden');
+        hiddenInput.focus();
+    });
+
+    customConfirm.addEventListener('click', () => {
+        const code = customInput.value.trim();
+        if (code) {
+            setupGame(code, "Custom");
+            customModal.classList.add('hidden');
+        }
+    });
+
+    // Restart
+    restartBtn.addEventListener('click', () => {
+        if (langSelect.value === 'Custom') {
+             // Rerun the custom code
+             setupGame(currentCode, "Custom");
+        } else {
+             fetchSnippet();
+        }
+    });
+
+    // Typing Logic
+    window.addEventListener('keydown', handleKeydown);
+}
+
+function handleKeydown(e) {
+    if (customModal.classList.contains('hidden') === false) return; // Don't type if modal is open
 
-window.addEventListener('keydown', (e) => {
     if (isFinished) {
         if (e.key === 'Enter') {
-            init();
+            restartBtn.click();
         }
         return;
     }
     
-    // Prevent default scrolling for Space
-    if (e.key === ' ' && e.target === document.body) {
-        e.preventDefault();
-    }
-    
+    // Shortcuts
     if (e.key === 'Tab') {
         e.preventDefault();
-        init(); // Quick restart
+        fetchSnippet(); // Quick restart
         return;
     }
     
-    // Ignore non-character keys (Shift, Ctrl, etc.)
+    // Prevent default scrolling for Space
+    if (e.key === ' ' && e.target === document.body) {
+        e.preventDefault();
+    }
+
+    // Ignore non-character keys
     if (e.key.length > 1 && e.key !== 'Enter' && e.key !== 'Backspace') return;
     
     hiddenInput.focus();
@@ -164,16 +338,18 @@ window.addEventListener('keydown', (e) => {
     const spans = codeDisplay.querySelectorAll('span');
     
     if (e.key === 'Backspace') {
-        // Optional: Allow going back? 
-        // For strict practice, maybe not. Or yes.
-        // Let's allow simple backspace.
         if (currentIndex > 0) {
             currentIndex--;
             const span = spans[currentIndex];
             span.className = ''; // Reset classes
-            span.classList.add('cursor'); // Move cursor back
             
-            // Remove cursor from next char
+            // Restore visual tweak for newline
+            if (span.innerText.includes('↵')) {
+                span.classList.add('text-slate-700', 'opacity-50');
+            }
+            
+            span.classList.add('cursor');
+            
             if (currentIndex + 1 < spans.length) {
                 spans[currentIndex + 1].classList.remove('cursor');
             }
@@ -189,9 +365,9 @@ window.addEventListener('keydown', (e) => {
     const currentSpan = spans[currentIndex];
     
     if (typedChar === charToType) {
-        currentSpan.classList.add('text-emerald-400'); // Correct
-        currentSpan.classList.remove('text-red-500', 'bg-red-900/50', 'text-slate-500');
-        currentSpan.classList.remove('cursor');
+        playClickSound();
+        currentSpan.classList.add('text-emerald-400', 'opacity-100'); 
+        currentSpan.classList.remove('text-red-500', 'bg-red-900/50', 'text-slate-700', 'opacity-50', 'cursor');
         
         currentIndex++;
         
@@ -200,23 +376,22 @@ window.addEventListener('keydown', (e) => {
         } else {
             spans[currentIndex].classList.add('cursor');
             
-            // Auto-scroll if cursor is near bottom
+            // Auto-scroll logic
             const cursorRect = spans[currentIndex].getBoundingClientRect();
-            const containerRect = codeDisplay.parentElement.getBoundingClientRect();
-            if (cursorRect.bottom > containerRect.bottom - 40) {
-                codeDisplay.parentElement.scrollTop += 30; // Scroll down
+            const containerRect = codeContainer.getBoundingClientRect();
+            
+            // Keep cursor in the middle third of the screen vertically
+            const relativeTop = cursorRect.top - containerRect.top;
+            if (relativeTop > containerRect.height * 0.6) {
+                codeContainer.scrollTop += 30; // Smooth scroll handled by CSS
             }
         }
     } else {
         mistakes++;
-        currentSpan.classList.add('text-red-500', 'bg-red-900/50'); // Incorrect
-        // We don't advance on mistake, user must type correct key
-        // Or should we?
-        // "Stop on error" is better for learning code.
+        playErrorSound();
+        currentSpan.classList.add('text-red-500', 'bg-red-900/50', 'opacity-100');
     }
-});
-
-restartBtn.addEventListener('click', init);
+}
 
 // Start
 init();

templates/index.html

@@ -17,80 +17,146 @@
         @keyframes blink {
             50% { border-color: transparent; }
         }
-        /* Disable ligatures for clearer character distinction */
         .no-ligatures {
             font-variant-ligatures: none;
         }
+        /* Custom scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #1e293b; 
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #475569; 
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748b; 
+        }
     </style>
 </head>
-<body class="bg-slate-900 text-slate-200 min-h-screen flex flex-col items-center justify-center p-4">
+<body class="bg-slate-900 text-slate-200 min-h-screen flex flex-col items-center justify-center p-4 selection:bg-blue-500/30">
 
     <!-- Header -->
-    <header class="w-full max-w-4xl flex justify-between items-center mb-8">
-        <h1 class="text-2xl font-bold text-blue-400">Code Typing <span class="text-slate-500 text-sm">beta</span></h1>
-        <div class="flex gap-4 text-sm text-slate-400">
-            <div>语言: <span id="lang-display" class="text-yellow-400 font-bold">...</span></div>
+    <header class="w-full max-w-5xl flex flex-col md:flex-row justify-between items-center mb-6 gap-4">
+        <div class="flex items-baseline gap-2">
+            <h1 class="text-2xl font-bold text-blue-400 tracking-tight">Code Typing</h1>
+            <span class="text-slate-500 text-xs font-mono">v1.1</span>
+        </div>
+        
+        <div class="flex flex-wrap items-center gap-4 text-sm">
+            <!-- Language Selector -->
+            <div class="flex items-center gap-2 bg-slate-800 px-3 py-1.5 rounded border border-slate-700">
+                <label for="lang-select" class="text-slate-400 text-xs uppercase">Language</label>
+                <select id="lang-select" class="bg-transparent text-yellow-400 font-bold focus:outline-none cursor-pointer">
+                    <option value="All">All</option>
+                    <!-- Populated by JS -->
+                </select>
+            </div>
+
+            <!-- Sound Toggle -->
+            <button id="sound-toggle" class="flex items-center gap-2 px-3 py-1.5 rounded border border-slate-700 bg-slate-800 hover:bg-slate-700 transition-colors" title="开关音效">
+                <span id="sound-icon">🔊</span>
+            </button>
+            
+            <!-- Custom Code Button -->
+            <button id="custom-code-btn" class="px-3 py-1.5 rounded border border-slate-700 bg-slate-800 hover:bg-slate-700 transition-colors text-slate-300">
+                自定义代码
+            </button>
         </div>
     </header>
 
     <!-- Main Typing Area -->
-    <main class="w-full max-w-4xl relative bg-slate-800 rounded-lg shadow-2xl overflow-hidden border border-slate-700">
+    <main class="w-full max-w-5xl relative bg-slate-800/80 backdrop-blur-sm rounded-xl shadow-2xl overflow-hidden border border-slate-700/50 ring-1 ring-white/5">
         
         <!-- Stats Bar -->
-        <div class="bg-slate-900/50 p-4 flex justify-around border-b border-slate-700">
-            <div class="text-center">
-                <div class="text-xs text-slate-500 uppercase tracking-wider">速度 (WPM)</div>
-                <div id="wpm" class="text-3xl font-bold text-emerald-400">0</div>
+        <div class="bg-slate-900/50 p-4 flex flex-wrap justify-around border-b border-slate-700/50 gap-4">
+            <div class="text-center min-w-[80px]">
+                <div class="text-[10px] text-slate-500 uppercase tracking-widest font-bold">WPM</div>
+                <div id="wpm" class="text-3xl font-bold text-emerald-400 tabular-nums">0</div>
             </div>
-            <div class="text-center">
-                <div class="text-xs text-slate-500 uppercase tracking-wider">准确率</div>
-                <div id="accuracy" class="text-3xl font-bold text-blue-400">100%</div>
+            <div class="text-center min-w-[80px]">
+                <div class="text-[10px] text-slate-500 uppercase tracking-widest font-bold">Accuracy</div>
+                <div id="accuracy" class="text-3xl font-bold text-blue-400 tabular-nums">100%</div>
             </div>
-            <div class="text-center">
-                <div class="text-xs text-slate-500 uppercase tracking-wider">进度</div>
-                <div id="progress" class="text-3xl font-bold text-purple-400">0%</div>
+            <div class="text-center min-w-[80px]">
+                <div class="text-[10px] text-slate-500 uppercase tracking-widest font-bold">Progress</div>
+                <div id="progress" class="text-3xl font-bold text-purple-400 tabular-nums">0%</div>
+            </div>
+            <!-- Best WPM (Local Storage) -->
+            <div class="text-center min-w-[80px] border-l border-slate-700 pl-4 hidden md:block">
+                <div class="text-[10px] text-slate-500 uppercase tracking-widest font-bold">Today's Best</div>
+                <div id="best-wpm" class="text-3xl font-bold text-yellow-500/80 tabular-nums">-</div>
             </div>
         </div>
 
         <!-- Code Container -->
-        <div class="relative p-8 text-lg leading-relaxed overflow-hidden" style="min-height: 300px;">
-            <!-- Hidden Input for Mobile/IME support (though we focus on keydown) -->
-            <input type="text" id="hidden-input" class="absolute opacity-0 top-0 left-0 h-full w-full cursor-default" autocomplete="off" spellcheck="false">
+        <div class="relative group">
+            <!-- Hidden Input -->
+            <input type="text" id="hidden-input" class="absolute opacity-0 top-0 left-0 h-full w-full cursor-default z-0" autocomplete="off" spellcheck="false">
             
             <!-- Code Display -->
-            <div id="code-display" class="whitespace-pre no-ligatures select-none" onclick="document.getElementById('hidden-input').focus()">
-                <!-- Characters will be injected here -->
-                <div class="flex items-center justify-center h-48 text-slate-500">加载中...</div>
+            <div id="code-container" class="h-[400px] overflow-y-auto p-8 relative z-0 scroll-smooth">
+                <div id="code-display" class="whitespace-pre no-ligatures select-none text-lg leading-relaxed text-slate-500" onclick="document.getElementById('hidden-input').focus()">
+                    <div class="flex items-center justify-center h-full animate-pulse">Loading snippets...</div>
+                </div>
             </div>
             
-            <!-- Result Overlay (Hidden by default) -->
-            <div id="result-overlay" class="absolute inset-0 bg-slate-900/90 flex flex-col items-center justify-center hidden z-10">
-                <h2 class="text-4xl font-bold text-white mb-4">练习完成!</h2>
-                <div class="flex gap-8 mb-8">
-                    <div class="text-center">
-                        <div class="text-sm text-slate-400">WPM</div>
-                        <div id="final-wpm" class="text-5xl font-bold text-emerald-400">0</div>
+            <!-- Focus Hint -->
+            <div id="focus-hint" class="absolute top-4 right-6 text-xs text-slate-500 bg-slate-900/80 px-2 py-1 rounded opacity-0 transition-opacity duration-300 pointer-events-none">
+                Click to focus
+            </div>
+
+            <!-- Result Overlay -->
+            <div id="result-overlay" class="absolute inset-0 bg-slate-900/95 flex flex-col items-center justify-center hidden z-20 backdrop-blur-md transition-all duration-300">
+                <div class="text-center transform transition-all duration-500 scale-100">
+                    <h2 class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400 mb-8">Completed!</h2>
+                    
+                    <div class="grid grid-cols-2 gap-12 mb-10">
+                        <div class="text-center">
+                            <div class="text-sm text-slate-400 uppercase tracking-widest mb-2">WPM</div>
+                            <div id="final-wpm" class="text-6xl font-bold text-emerald-400 drop-shadow-lg">0</div>
+                        </div>
+                        <div class="text-center">
+                            <div class="text-sm text-slate-400 uppercase tracking-widest mb-2">Accuracy</div>
+                            <div id="final-accuracy" class="text-6xl font-bold text-blue-400 drop-shadow-lg">0%</div>
+                        </div>
                     </div>
-                    <div class="text-center">
-                        <div class="text-sm text-slate-400">准确率</div>
-                        <div id="final-accuracy" class="text-5xl font-bold text-blue-400">0%</div>
+                    
+                    <div class="flex gap-4 justify-center">
+                        <button id="restart-btn" class="px-8 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-bold transition-all transform hover:scale-105 shadow-lg shadow-blue-900/50">
+                            Again (Enter)
+                        </button>
                     </div>
                 </div>
-                <div class="flex gap-4">
-                    <button id="restart-btn" class="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-bold transition-colors">
-                        再练一次 (Enter)
-                    </button>
-                    <!-- Space for future sharing features -->
-                </div>
             </div>
         </div>
     </main>
 
     <!-- Footer -->
-    <footer class="mt-8 text-slate-500 text-sm text-center">
-        <p>按 <kbd class="px-2 py-1 bg-slate-700 rounded text-slate-300 font-mono text-xs">Tab</kbd> 重置 | 缩进请用空格键 | 推荐使用 PC 端练习</p>
+    <footer class="mt-8 text-slate-500 text-xs text-center">
+        <p class="mb-2">
+            <span class="inline-block bg-slate-800 px-2 py-1 rounded border border-slate-700 mx-1">Tab</span> 重置
+            <span class="mx-2">|</span>
+            <span class="inline-block bg-slate-800 px-2 py-1 rounded border border-slate-700 mx-1">Space</span> 缩进
+        </p>
+        <p class="opacity-50">推荐使用 Chrome / Edge 浏览器获得最佳体验</p>
     </footer>
 
+    <!-- Custom Code Modal -->
+    <div id="custom-modal" class="fixed inset-0 bg-black/80 flex items-center justify-center hidden z-50 backdrop-blur-sm">
+        <div class="bg-slate-800 p-6 rounded-xl shadow-2xl w-full max-w-2xl border border-slate-700">
+            <h3 class="text-xl font-bold text-white mb-4">粘贴自定义代码</h3>
+            <textarea id="custom-input" class="w-full h-64 bg-slate-900 text-slate-300 p-4 rounded-lg font-mono text-sm border border-slate-700 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none resize-none" placeholder="在此处粘贴代码..."></textarea>
+            <div class="flex justify-end gap-4 mt-4">
+                <button id="custom-cancel" class="px-4 py-2 text-slate-400 hover:text-white transition-colors">取消</button>
+                <button id="custom-confirm" class="px-6 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-bold transition-colors">开始练习</button>
+            </div>
+        </div>
+    </div>
+
     <script src="/static/script.js"></script>
 </body>
 </html>