Spaces:

mistpe
/

name

Running

App Files Files Community

mistpe commited on Feb 25, 2025

Commit

fe21207

verified ·

1 Parent(s): ffc3791

Create index.html

Browse files

Files changed (1) hide show

index.html +1436 -0

index.html ADDED Viewed

	@@ -0,0 +1,1436 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>命运抉择之轮</title>
+    <style>
+        :root {
+            --primary-color: #4CAF50;
+            --secondary-color: #66BB6A;
+            --accent-color: #81C784;
+            --light-color: #E8F5E9;
+            --text-color: #2E7D32;
+            --shadow-color: rgba(76, 175, 80, 0.3);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, var(--light-color) 0%, #C8E6C9 100%);
+            color: var(--text-color);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 2rem;
+        }
+        .container {
+            max-width: 1200px;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 2rem;
+        }
+        header {
+            text-align: center;
+            margin-bottom: 1rem;
+        }
+        h1 {
+            font-size: 2.5rem;
+            color: var(--primary-color);
+            text-shadow: 2px 2px 4px var(--shadow-color);
+            margin-bottom: 0.5rem;
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            color: var(--accent-color);
+            font-weight: 300;
+        }
+        .setup-panel {
+            background-color: white;
+            padding: 2rem;
+            border-radius: 1rem;
+            box-shadow: 0 10px 30px var(--shadow-color);
+            width: 100%;
+            max-width: 500px;
+            transition: all 0.3s ease;
+        }
+        .setup-panel.minimized {
+            padding: 1rem;
+            max-width: 300px;
+            cursor: pointer;
+        }
+        .setup-panel.minimized .form-group {
+            display: none;
+        }
+        .setup-panel.minimized .panel-title:after {
+            content: " (点击展开)";
+            font-size: 0.8rem;
+            color: var(--accent-color);
+        }
+        .panel-title {
+            text-align: center;
+            margin-bottom: 1.5rem;
+            color: var(--primary-color);
+        }
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+        }
+        input, select {
+            width: 100%;
+            padding: 0.8rem;
+            border: 2px solid #A5D6A7;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            background-color: var(--light-color);
+            transition: all 0.3s;
+        }
+        input:focus, select:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px var(--shadow-color);
+        }
+        .btn {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 0.8rem 1.5rem;
+            border-radius: 0.5rem;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            box-shadow: 0 4px 10px var(--shadow-color);
+        }
+        .btn:hover {
+            background-color: var(--accent-color);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 15px var(--shadow-color);
+        }
+        .btn-secondary {
+            background-color: var(--light-color);
+            color: var(--primary-color);
+            border: 2px solid var(--primary-color);
+        }
+        .btn-secondary:hover {
+            background-color: var(--primary-color);
+            color: white;
+        }
+        .actions {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+        }
+        .wheel-container {
+            position: relative;
+            width: 100%;
+            max-width: 600px;
+            aspect-ratio: 1;
+            margin: 2rem 0;
+            display: none;
+        }
+        .wheel {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            border-radius: 50%;
+            overflow: hidden;
+            box-shadow: 0 0 30px var(--shadow-color), 0 0 60px rgba(255, 214, 102, 0.6);
+            transition: box-shadow 0.3s;
+        }
+        .wheel-inner {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            position: relative;
+            transition: transform 5s cubic-bezier(0.1, 0.05, 0.1, 1.0);
+        }
+        .segment {
+            position: absolute;
+            width: 50%;
+            height: 50%;
+            transform-origin: bottom right;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+        .segment-content {
+            position: absolute;
+            left: 30px;
+            width: 80px;
+            text-align: center;
+            transform: rotate(90deg);
+            transform-origin: left;
+            font-weight: bold;
+            font-size: 0.9rem;
+            color: rgba(255, 255, 255, 0.9);
+            text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .wheel-pointer {
+            position: absolute;
+            top: -20px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 40px;
+            height: 60px;
+            background-color: var(--accent-color);
+            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+            z-index: 10;
+            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
+        }
+        .wheel-center {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 15%;
+            height: 15%;
+            background: radial-gradient(circle, var(--light-color) 0%, var(--primary-color) 100%);
+            border-radius: 50%;
+            z-index: 5;
+            box-shadow: 0 0 15px var(--shadow-color);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            font-size: 1.2rem;
+            cursor: pointer;
+        }
+        .wheel-center:hover {
+            box-shadow: 0 0 20px var(--accent-color);
+        }
+        .wheel-center:after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 70%;
+            height: 70%;
+            background-color: var(--accent-color);
+            border-radius: 50%;
+            z-index: -1;
+        }
+        .result-display {
+            background-color: white;
+            padding: 2rem;
+            border-radius: 1rem;
+            box-shadow: 0 10px 30px var(--shadow-color);
+            text-align: center;
+            max-width: 500px;
+            width: 100%;
+            display: none;
+            position: relative;
+            overflow: hidden;
+        }
+        .result-display h2 {
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+        }
+        .result-number {
+            font-size: 5rem;
+            font-weight: bold;
+            color: var(--accent-color);
+            margin: 1rem 0;
+            position: relative;
+            transition: all 0.3s;
+        }
+        .result-text {
+            font-size: 1.2rem;
+            margin-bottom: 1.5rem;
+        }
+        .shine {
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 50%;
+            height: 100%;
+            background: linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0) 0%,
+                rgba(255, 255, 255, 0.8) 50%,
+                rgba(255, 255, 255, 0) 100%
+            );
+            z-index: 10;
+            animation: shine 2s infinite;
+            opacity: 0;
+            pointer-events: none;
+        }
+        .confetti {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: var(--primary-color);
+            opacity: 0;
+            pointer-events: none;
+        }
+        @keyframes shine {
+            0% {
+                left: -100%;
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            50% {
+                left: 100%;
+                opacity: 1;
+            }
+            51% {
+                opacity: 0;
+            }
+            100% {
+                opacity: 0;
+            }
+        }
+        .spinning .wheel {
+            box-shadow: 0 0 50px var(--accent-color), 0 0 100px rgba(255, 214, 102, 0.8);
+        }
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 2rem;
+            }
+            .container {
+                gap: 1rem;
+            }
+            .setup-panel, .result-display {
+                padding: 1.5rem;
+            }
+            .result-number {
+                font-size: 3.5rem;
+            }
+        }
+        .mode-description {
+            display: none;
+            margin-top: 0.5rem;
+            font-size: 0.85rem;
+            color: var(--accent-color);
+            font-style: italic;
+        }
+        .special-effects {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 20;
+        }
+        @keyframes flicker {
+            0% { opacity: 1; }
+            50% { opacity: 0.7; }
+            100% { opacity: 1; }
+        }
+        @keyframes shake {
+            0% { transform: translateX(0); }
+            25% { transform: translateX(-5px); }
+            50% { transform: translateX(0); }
+            75% { transform: translateX(5px); }
+            100% { transform: translateX(0); }
+        }
+        @keyframes jump {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.2); }
+            100% { transform: scale(1); }
+        }
+        @keyframes spotlight {
+            0% { box-shadow: 0 0 10px var(--shadow-color); }
+            50% { box-shadow: 0 0 60px var(--accent-color), 0 0 120px rgba(129, 199, 132, 0.8); }
+            100% { box-shadow: 0 0 10px var(--shadow-color); }
+        }
+        @keyframes heartbeat {
+            0% { transform: scale(1); }
+            15% { transform: scale(1.15); }
+            30% { transform: scale(1); }
+            45% { transform: scale(1.15); }
+            60% { transform: scale(1); }
+            100% { transform: scale(1); }
+        }
+        /* Spotlight effect */
+        .spotlight-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            pointer-events: none;
+            z-index: 5;
+            background: radial-gradient(
+                circle at center,
+                rgba(255, 255, 255, 0) 30%,
+                rgba(0, 0, 0, 0.7) 100%
+            );
+            opacity: 0;
+            transition: opacity 0.5s;
+        }
+        .help-bubble {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background-color: var(--primary-color);
+            color: white;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            cursor: pointer;
+            box-shadow: 0 3px 10px var(--shadow-color);
+            transition: all 0.3s;
+        }
+        .help-bubble:hover {
+            background-color: var(--accent-color);
+            transform: scale(1.1);
+        }
+        .help-content {
+            position: fixed;
+            bottom: 80px;
+            right: 20px;
+            background-color: white;
+            padding: 1.5rem;
+            border-radius: 1rem;
+            width: 300px;
+            box-shadow: 0 10px 30px var(--shadow-color);
+            display: none;
+            z-index: 100;
+        }
+        .help-content h3 {
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+        }
+        .help-content p {
+            margin-bottom: 0.8rem;
+            font-size: 0.9rem;
+        }
+        .close-help {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            font-size: 1.2rem;
+            cursor: pointer;
+            color: var(--accent-color);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>命运抉择之轮</h1>
+            <p class="subtitle">掌控命运，抉择未来！</p>
+        </header>
+        <div class="setup-panel">
+            <h2 class="panel-title">设置</h2>
+            <div class="form-group">
+                <label for="class-size">班级人数:</label>
+                <input type="number" id="class-size" min="1" max="100" value="30">
+            </div>
+            <div class="form-group">
+                <label for="start-number">起始编号 (默认从1开始):</label>
+                <input type="number" id="start-number" min="0" value="1">
+            </div>
+            <div class="form-group">
+                <label for="animation-speed">动画速度:</label>
+                <select id="animation-speed">
+                    <option value="slow">慢速 (更多悬念)</option>
+                    <option value="normal" selected>正常</option>
+                    <option value="fast">快速</option>
+                    <option value="insane">超快 (刺激模式)</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="sound-effects">音效:</label>
+                <select id="sound-effects">
+                    <option value="off">关闭</option>
+                    <option value="basic" selected>基础音效</option>
+                    <option value="dramatic">戏剧性音效</option>
+                    <option value="suspense">悬疑音效</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="picker-mode">选择模式:</label>
+                <select id="picker-mode">
+                    <option value="normal">正常模式</option>
+                    <option value="fake-out">假动作模式</option>
+                    <option value="oscillate">摇摆不定模式</option>
+                    <option value="mystery">神秘模式</option>
+                    <option value="double">双重选择模式</option>
+                    <option value="countdown">倒计时模式</option>
+                    <option value="elimination">淘汰赛模式</option>
+                    <option value="spotlight">聚光灯模式</option>
+                    <option value="heartbeat">心跳紧张模式</option>
+                </select>
+                <div id="mode-normal" class="mode-description">普通的转盘选择，公平公正。</div>
+                <div id="mode-fake-out" class="mode-description">即将停止时，转盘会突然改变方向！</div>
+                <div id="mode-oscillate" class="mode-description">在两个结果之间反复摇摆，到底会是谁呢？</div>
+                <div id="mode-mystery" class="mode-description">结果会短暂显示然后突然变化，充满惊喜！</div>
+                <div id="mode-double" class="mode-description">同时选出两个幸运儿！</div>
+                <div id="mode-countdown" class="mode-description">紧张的倒计时音效，增加悬念感！</div>
+                <div id="mode-elimination" class="mode-description">一轮轮淘汰，最后只留下一个幸运儿！</div>
+                <div id="mode-spotlight" class="mode-description">灯光聚焦效果，犹如舞台中央的明星！</div>
+                <div id="mode-heartbeat" class="mode-description">伴随心跳声，感受命运的紧张抉择！</div>
+            </div>
+            <div class="actions">
+                <button id="start-btn" class="btn">开始点名</button>
+                <button id="reset-btn" class="btn btn-secondary">重置</button>
+            </div>
+        </div>
+        <div class="wheel-container">
+            <div class="wheel-pointer"></div>
+            <div class="wheel">
+                <div class="wheel-inner" id="wheel-inner"></div>
+            </div>
+            <div class="wheel-center" id="spin-btn">转!</div>
+        </div>
+        <div class="result-display">
+            <div class="shine"></div>
+            <h2>点名结果</h2>
+            <div class="result-number" id="result-number">?</div>
+            <p class="result-text" id="result-text">请点击转盘开始</p>
+            <button id="spin-again-btn" class="btn">再来一次</button>
+        </div>
+    </div>
+    <div class="help-bubble">?</div>
+    <div class="help-content">
+        <span class="close-help">×</span>
+        <h3>使用帮助</h3>
+        <p><strong>正常模式:</strong> 普通的点名选择，公平公正。</p>
+        <p><strong>假动作模式:</strong> 转盘减速后会有一次假动作，然后才会显示最终结果。</p>
+        <p><strong>摇摆不定模式:</strong> 在两个选项之间来回摇摆，增加悬念感。</p>
+        <p><strong>神秘模式:</strong> 先显示一个结果，然后突然改变！谁也猜不到最终会是谁。</p>
+        <p><strong>双重选择模式:</strong> 同时选出两名同学，适合小组活动。</p>
+        <p><strong>倒计时模式:</strong> 伴随紧张的倒计时音效和动画，增加刺激感。</p>
+        <p><strong>淘汰赛模式:</strong> 连续多轮抽取，逐步淘汰，最终决出命运之选。</p>
+        <p><strong>聚光灯模式:</strong> 模拟真实大型抽奖活动，灯光聚焦效果。</p>
+        <p><strong>心跳紧张模式:</strong> 伴随心跳声音效，让结果更加扣人心弦。</p>
+        <p><strong>提示:</strong> 尝试不同的音效和动画速度组合，获得最佳体验！</p>
+    </div>
+    <script>
+        // DOM Elements
+        const setupPanel = document.querySelector('.setup-panel');
+        const classSizeInput = document.getElementById('class-size');
+        const startNumberInput = document.getElementById('start-number');
+        const pickerModeSelect = document.getElementById('picker-mode');
+        const animationSpeedSelect = document.getElementById('animation-speed');
+        const soundEffectsSelect = document.getElementById('sound-effects');
+        const startBtn = document.getElementById('start-btn');
+        const resetBtn = document.getElementById('reset-btn');
+        const wheelContainer = document.querySelector('.wheel-container');
+        const wheelInner = document.getElementById('wheel-inner');
+        const spinBtn = document.getElementById('spin-btn');
+        const resultDisplay = document.querySelector('.result-display');
+        const resultNumber = document.getElementById('result-number');
+        const resultText = document.getElementById('result-text');
+        const spinAgainBtn = document.getElementById('spin-again-btn');
+        const helpBubble = document.querySelector('.help-bubble');
+        const helpContent = document.querySelector('.help-content');
+        const closeHelp = document.querySelector('.close-help');
+        // Mode descriptions
+        const modeDescriptions = {
+            normal: document.getElementById('mode-normal'),
+            'fake-out': document.getElementById('mode-fake-out'),
+            oscillate: document.getElementById('mode-oscillate'),
+            mystery: document.getElementById('mode-mystery'),
+            double: document.getElementById('mode-double'),
+            countdown: document.getElementById('mode-countdown'),
+            elimination: document.getElementById('mode-elimination'),
+            spotlight: document.getElementById('mode-spotlight'),
+            heartbeat: document.getElementById('mode-heartbeat')
+        };
+        // Variables
+        let classSize = 30;
+        let startNumber = 1;
+        let mode = 'normal';
+        let animationSpeed = 'normal';
+        let soundEffects = 'basic';
+        let isSpinning = false;
+        let segments = [];
+        let selectedSegment = null;
+        let secondSelectedSegment = null;
+        let eliminationCandidates = [];
+        let eliminationRound = 0;
+        // Sound effects
+        const sounds = {
+            spin: new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAkJCQkJCQkJCQkJCQkJCQkJCQwMDAwMDAwMDAwMDAwMDAwMDA4ODg4ODg4ODg4ODg4ODg4ODg4P////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAXAAAAAAAAAAbC3hL2QAAAAAAD/+9DEAAAJtPl39BEAJgpN7j84wAGMKUpWlP19W1v1f3a1apSktaUkxpJgYGAYGDEYO5eHyXh9wfP+H4fwfD6AZ8Pw+gGfnygY+MDDDDDDDDDDDDDDDD4fg+gGfh8/8Pn/+H0Az5+UMfP/+oBooyZVLj6iYqhplXOKiomz1kVdVUksYnF3KszMrUxBTUUzLjEwMKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq'),
+            result: new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAXnAyMjIyMjIyMjIyMjIyMjIyMjI5OTk5OTk5OTk5OTk5OTk5OTk5P39/f39/f39/f39/f39/f39/f///////////////////////////////////////////////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAaUAAAAAAAAeblBaHYAAAAAAP/7sMQAAAfA53P5hgAKGUruPzjAASEQQQNhjHHdPnPz797ve0vbdM7vPPPGBBBQoUhISEhIAAAIQhAVOP4WOeeOJwIBANDuK+Xn8fH06Ic7etFbiMVhYAgIBgYGBwfB8Hw+H0A0NDQ0NDQ0Af/////////+qqqqoAAAAAVVVVQAAAxiMQ5nJTnOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5znOc5zmIxEZ//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////MTEFNRTMuMTAwVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV'),
+            countdown: new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAABAAAAeAAMDAwMDAwMDAwMDAwVVVVVVVVVVVVVVVVVaqqqqqqqqqqqqqqqqqq1dXV1dXV1dXV1dXV1dXw8PDw8PDw8PDw8PDw8P////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAZgAAAAAAAAei6yB8AAAAAAA//7kMQAAAs0x2/4YYABRCOqOzDACpdGMYxtBpqqtSv1KUyRRZVlzKdBkCgIBAIJiQUGijgQDBSMFwAGAAYAGPR++D4PnAEHwfJAUeBAQEBEREQIQhCNDHw+fB8HwfJAR8Pn5IIEBAQEBAQEBAT5ICAj4fTHw+f///+SCAgI+DgICPjggICbICAgICAn////5IICBMkBAT/+SCAgICAgJ////kggICAgQEyQEBAQECYICAgI+Hz////5IICAn////+SCAgIDRMNDQ0NDQ0TDQ0NDQ0NDa0mqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpMQU1FMy4xMDBV'),
+            heartbeat: new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAkJCQkJCQkJCQkJCQkJCQkJCQwMDAwMDAwMDAwMDAwMDAwMDA4ODg4ODg4ODg4ODg4ODg4ODg4P////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAXAAAAAAAAAAbC3hL2QAAAAAAD/+xDEAAAHRId9+GGAARIrKn8wwAGqqqpN9aqqkqqpN9VNIiNu7Zmg2JMICJVAwEAgELhcGAYBgMGQwZfL+XyQEBAQEeD5/y/kgICPB8/5ICAgI8Hc/kgICAj4fP8kBAQEwQEB4PggICPB3/P+SAgICPh8/8kBAQEBASD4PggICPB3P5ICAgI+D4ICAj4fD5IIPggICPB8/8kBAQEBAQEfB9/kgICAkH/JBB8Hz/kgg+CAkH/P/JBB8EHwQf/JAQEggICPg+/yQQEBMEBAR8Hz/kggICYIPgg+CD4IP+SCAgI+D5/yQEBAT/B8Hc/6oAAAAAAAAA'),
+            dramatic: new Audio('data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbAAzMzMzMzMzMzMzMzMzMzMzMzM/Pz8/Pz8/Pz8/Pz8/Pz8/Pz8/P///////////////////////////////////////////////////////////////////////////////////8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAZgAAAAAAAAAbD6L30gAAAAAAD/+7DEAAAKYOFy+cmAASikabj8qAA2lVVmtOmdzHHtK7mONOmcyczMqgoWFJwcLCwpIhYWFk4OFixQsLD/wULCwJFFCwsOaSIWFA4WFhQFFFFjGMWFhQWFhQWFhQUDGMb/BQWHNkUUUUdJowULDssUUWMWKKOkgcLDuyKKOklFqEVwsO72MWKKOkldJI/iqPaRX+yP/oRVH/ysKDu9lYf/ZVHaFUe0iv9JIO72VR7SKo8dJI6Qij2hlQdhFUeOkkdIRVHtDKg7SK//2MWKPYGKPaGVR/9lYUFh/aFC/8Ozs7O/8rOzv/DKg7uw7OzsOzo7Ozs6Ozs7Ozr///zs7Ozs6Os6Ozs7Olh2dDKo7Ozs6Ozs6OsOzs6Ozs7Ozs6Ozs6OsOzo7Ojr///w7Ojs7Ow6Ojr/w7Ozs7OsOw7Ozs6Ow7Ozs6Ow7Ozs6Ozs7DsOzs7OjsOzs7Ojr//8Ozs7Ols7OztbOzs6Ozs7O1s7OztbOzs6Ozs7O1s7OztbOzs6O1s7OztbOzs7WztbOztbOzs7O1s7OztbOzs7O1s7OzpbOzs7WztbOzs7Wzs7O1s7OztbOzs7O1s7OztbOzs7O1s7OzpbOzs7WztbOztbOzs7O1s7OzpbOzs7WztbOzs7Wzs7O1s7OztbOzs7O1s7O1s7OztbOzs7O1s7OztbOzs7WzqzWztbOztbOzs6WzpbOzs6szs6szs6szs6szs6szs6szs6s1s6szs6szs6szs6szs6szs6s1s6szs6szs6szs6szs6szs6s1s6szs6szs6szs6szs6szs6s1s6szs6szs6szs6szs6szs6s1s6szs6szs6szs6szs6szs6s1s7OzpbOzs7WztbOzs6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsqs1s6Wzsq')
+        };
+        // Play a sound from the sound library
+        function playSound(soundName) {
+            // Only play if sound effects are enabled
+            if (soundEffects === 'off') return;
+            // Stop any currently playing sounds
+            sounds.spin.pause();
+            sounds.spin.currentTime = 0;
+            sounds.result.pause();
+            sounds.result.currentTime = 0;
+            sounds.countdown.pause();
+            sounds.countdown.currentTime = 0;
+            sounds.heartbeat.pause();
+            sounds.heartbeat.currentTime = 0;
+            sounds.dramatic.pause();
+            sounds.dramatic.currentTime = 0;
+            // Play the requested sound
+            if (sounds[soundName]) {
+                sounds[soundName].play().catch(e => {
+                    console.log("Sound could not be played: " + e);
+                });
+            }
+        }
+        function updateModeDescription() {
+            const selectedMode = pickerModeSelect.value;
+            // Hide all descriptions
+            Object.values(modeDescriptions).forEach(desc => {
+                desc.style.display = 'none';
+            });
+            // Show selected description
+            const descElement = document.getElementById(`mode-${selectedMode}`);
+            if (descElement) {
+                descElement.style.display = 'block';
+            }
+        }
+        function setupWheel() {
+            classSize = parseInt(classSizeInput.value) || 30;
+            startNumber = parseInt(startNumberInput.value) || 1;
+            mode = pickerModeSelect.value;
+            animationSpeed = animationSpeedSelect.value;
+            soundEffects = soundEffectsSelect.value;
+            if (classSize < 1) {
+                alert('班级人数必须大于0');
+                return;
+            }
+            // For elimination mode, prepare the candidates
+            if (mode === 'elimination') {
+                eliminationCandidates = [];
+                for (let i = 0; i < classSize; i++) {
+                    eliminationCandidates.push(startNumber + i);
+                }
+                eliminationRound = 0;
+            }
+            // Create wheel segments
+            createWheel();
+            // Show wheel, hide setup
+            setupPanel.classList.add('minimized');
+            wheelContainer.style.display = 'block';
+            resultDisplay.style.display = 'none';
+            // Make setup panel expandable when minimized
+            setupPanel.addEventListener('click', function() {
+                if (this.classList.contains('minimized')) {
+                    this.classList.remove('minimized');
+                }
+            });
+        }
+        function createWheel() {
+            // Clear previous wheel
+            wheelInner.innerHTML = '';
+            segments = [];
+            // Colors for the wheel segments (soft green palette)
+            const colors = [
+                '#4CAF50', '#66BB6A', '#81C784', '#A5D6A7',
+                '#C8E6C9', '#7CB342', '#8BC34A', '#9CCC65',
+                '#AED581', '#C5E1A5', '#DCEDC8', '#43A047',
+                '#388E3C', '#2E7D32', '#689F38', '#558B2F'
+            ];
+            // Create segments
+            const segmentAngle = 360 / classSize;
+            for (let i = 0; i < classSize; i++) {
+                const segmentElement = document.createElement('div');
+                segmentElement.className = 'segment';
+                // Rotate and position segment
+                const rotation = i * segmentAngle;
+                segmentElement.style.transform = `rotate(${rotation}deg)`;
+                segmentElement.style.backgroundColor = colors[i % colors.length];
+                // Create content with student number
+                const contentElement = document.createElement('div');
+                contentElement.className = 'segment-content';
+                const studentNumber = startNumber + i;
+                contentElement.textContent = studentNumber;
+                segmentElement.appendChild(contentElement);
+                wheelInner.appendChild(segmentElement);
+                // Store segment data
+                segments.push({
+                    element: segmentElement,
+                    rotation,
+                    value: studentNumber
+                });
+            }
+        }
+        function spin() {
+            if (isSpinning) return;
+            isSpinning = true;
+            wheelContainer.classList.add('spinning');
+            // Get rotation speed based on animation speed setting
+            let spinDuration = 5000; // Default duration (normal speed)
+            switch (animationSpeed) {
+                case 'slow':
+                    spinDuration = 8000;
+                    break;
+                case 'fast':
+                    spinDuration = 3000;
+                    break;
+                case 'insane':
+                    spinDuration = 1500;
+                    break;
+            }
+            // Update wheel-inner transition duration
+            wheelInner.style.transition = `transform ${spinDuration/1000}s cubic-bezier(0.1, 0.05, 0.1, 1.0)`;
+            // Calculate random rotation (5-10 full rotations + random offset)
+            const minRotation = 1800; // 5 full rotations (5 * 360)
+            const maxRotation = 3600; // 10 full rotations (10 * 360)
+            // Random rotation
+            const segmentAngle = 360 / classSize;
+            const randomOffset = Math.floor(Math.random() * classSize);
+            const finalSegmentIndex = randomOffset;
+            // Calculate total rotation
+            let totalRotation = minRotation + (maxRotation - minRotation) * Math.random();
+            // Add offset to land on the selected segment
+            totalRotation += (finalSegmentIndex * segmentAngle);
+            // Apply rotation to wheel
+            wheelInner.style.transform = `rotate(${-totalRotation}deg)`;
+            // Get the selected segment
+            selectedSegment = segments[finalSegmentIndex];
+            // For double mode, select a second segment
+            if (mode === 'double') {
+                let secondIndex = (finalSegmentIndex + Math.floor(classSize / 2)) % classSize;
+                secondSelectedSegment = segments[secondIndex];
+            }
+            // Play sound effects if enabled
+            if (soundEffects !== 'off') {
+                playSound('spin');
+                if (mode === 'countdown') {
+                    // Start countdown sound after a delay
+                    setTimeout(() => {
+                        playSound('countdown');
+                    }, spinDuration - 3000); // Start 3 seconds before end
+                }
+                if (mode === 'heartbeat') {
+                    // Start heartbeat sound after a delay
+                    setTimeout(() => {
+                        playSound('heartbeat');
+                    }, spinDuration - 3000); // Start 3 seconds before end
+                }
+            }
+            // Process result after spinning animation
+            setTimeout(() => {
+                processResult();
+            }, spinDuration);
+        }
+        function processResult() {
+            isSpinning = false;
+            wheelContainer.classList.remove('spinning');
+            let finalResult = selectedSegment.value;
+            let secondResult = secondSelectedSegment ? secondSelectedSegment.value : null;
+            // Play result sound if enabled
+            if (soundEffects !== 'off') {
+                // Different sounds for different modes
+                if (mode === 'dramatic' && soundEffects === 'dramatic') {
+                    playSound('dramatic');
+                } else {
+                    playSound('result');
+                }
+            }
+            switch (mode) {
+                case 'fake-out':
+                    playFakeOutEffect(finalResult);
+                    break;
+                case 'oscillate':
+                    playOscillateEffect(finalResult);
+                    break;
+                case 'mystery':
+                    playMysteryEffect(finalResult);
+                    break;
+                case 'double':
+                    showDoubleResult(finalResult, secondResult);
+                    break;
+                case 'countdown':
+                    playCountdownEffect(finalResult);
+                    break;
+                case 'elimination':
+                    playEliminationEffect(finalResult);
+                    break;
+                case 'spotlight':
+                    playSpotlightEffect(finalResult);
+                    break;
+                case 'heartbeat':
+                    playHeartbeatEffect(finalResult);
+                    break;
+                default:
+                    showResult(finalResult);
+                    break;
+            }
+        }
+        function showResult(result) {
+            wheelContainer.style.display = 'none';
+            resultDisplay.style.display = 'block';
+            resultNumber.textContent = result;
+            resultText.textContent = `恭喜 ${result} 号同学被选中！`;
+            // Add shine effect
+            const shine = document.querySelector('.shine');
+            shine.style.opacity = '1';
+            shine.style.animation = 'shine 2s 1';
+            // Reset animation after it completes
+            setTimeout(() => {
+                shine.style.opacity = '0';
+                shine.style.animation = 'none';
+            }, 2000);
+            // Add confetti effect
+            createConfetti();
+        }
+        function showDoubleResult(result1, result2) {
+            wheelContainer.style.display = 'none';
+            resultDisplay.style.display = 'block';
+            resultNumber.textContent = `${result1} & ${result2}`;
+            resultText.textContent = `恭喜 ${result1} 号和 ${result2} 号同学被选中！`;
+            // Add shine effect
+            const shine = document.querySelector('.shine');
+            shine.style.opacity = '1';
+            shine.style.animation = 'shine 2s 1';
+            // Reset animation after it completes
+            setTimeout(() => {
+                shine.style.opacity = '0';
+                shine.style.animation = 'none';
+            }, 2000);
+            // Add confetti effect
+            createConfetti();
+        }
+        function playFakeOutEffect(finalResult) {
+            // First show a fake result
+            const fakeResult = ((finalResult - startNumber + Math.floor(classSize / 2)) % classSize) + startNumber;
+            wheelContainer.style.display = 'none';
+            resultDisplay.style.display = 'block';
+            resultNumber.textContent = fakeResult;
+            resultText.textContent = `恭喜 ${fakeResult} 号同学被选中！`;
+            // After a short delay, apply shake effect and change to actual result
+            setTimeout(() => {
+                resultNumber.classList.add('shake');
+                resultText.textContent = "等等，发生了什么...";
+                // After shake effect, reveal true result
+                setTimeout(() => {
+                    resultNumber.classList.remove('shake');
+                    resultNumber.classList.add('jump');
+                    resultNumber.textContent = finalResult;
+                    resultText.textContent = `真正被选中的是 ${finalResult} 号同学！`;
+                    // Add shine effect
+                    const shine = document.querySelector('.shine');
+                    shine.style.opacity = '1';
+                    shine.style.animation = 'shine 2s 1';
+                    // Reset animations
+                    setTimeout(() => {
+                        resultNumber.classList.remove('jump');
+                        shine.style.opacity = '0';
+                        shine.style.animation = 'none';
+                    }, 2000);
+                    // Add confetti for the true result
+                    createConfetti();
+                }, 1000);
+            }, 1500);
+        }
+        function playOscillateEffect(finalResult) {
+            // Create alternative result
+            const altResult = ((finalResult - startNumber + Math.floor(classSize / 2)) % classSize) + startNumber;
+            wheelContainer.style.display = 'none';
+            resultDisplay.style.display = 'block';
+            let count = 0;
+            const maxOscillations = 6;
+            const oscillationInterval = setInterval(() => {
+                count++;
+                resultNumber.textContent = count % 2 === 0 ? finalResult : altResult;
+                resultText.textContent = "究竟会是谁呢...";
+                if (count >= maxOscillations) {
+                    clearInterval(oscillationInterval);
+                    // Final result with visual effect
+                    resultNumber.classList.add('jump');
+                    resultNumber.textContent = finalResult;
+                    resultText.textContent = `恭喜 ${finalResult} 号同学被选中！`;
+                    // Add shine effect
+                    const shine = document.querySelector('.shine');
+                    shine.style.opacity = '1';
+                    shine.style.animation = 'shine 2s 1';
+                    // Reset animations
+                    setTimeout(() => {
+                        resultNumber.classList.remove('jump');
+                        shine.style.opacity = '0';
+                        shine.style.animation = 'none';
+                    }, 2000);
+                    // Add confetti
+                    createConfetti();
+                }
+            }, 300);
+        }
+        function playMysteryEffect(finalResult) {
+            // Generate a series of random results ending with the actual one
+            const mysterySteps = 3;
+            const stepDelay = 600;
+            wheelContainer.style.display = 'none';
+            resultDisplay.style.display = 'block';
+            let step = 0;
+            resultText.textContent = "神秘数字即将揭晓...";
+            // Add flicker effect to create suspense
+            resultNumber.classList.add('flicker');
+            const mysteryInterval = setInterval(() => {
+                step++;
+                if (step < mysterySteps) {
+                    // Show random number
+                    const randomNumber = Math.floor(Math.random() * classSize) + startNumber;
+                    resultNumber.textContent = randomNumber;
+                } else {
+                    // Last step - show real result
+                    clearInterval(mysteryInterval);
+                    resultNumber.classList.remove('flicker');
+                    resultNumber.classList.add('jump');
+                    resultNumber.textContent = finalResult;
+                    resultText.textContent = `恭喜 ${finalResult} 号同学被选中！`;
+                    // Add shine effect
+                    const shine = document.querySelector('.shine');
+                    shine.style.opacity = '1';
+                    shine.style.animation = 'shine 2s 1';
+                    // Reset animations
+                    setTimeout(() => {
+                        resultNumber.classList.remove('jump');
+                        shine.style.opacity = '0';
+                        shine.style.animation = 'none';
+                    }, 2000);
+                    // Add confetti
+                    createConfetti();
+                }
+            }, stepDelay);
+        }
+        function playCountdownEffect(finalResult) {
+            wheelContainer.style.display = 'none';
+            resultDisplay.style.display = 'block';
+            resultNumber.textContent = "3";
+            resultText.textContent = "倒计时开始...";
+            // Countdown animation
+            setTimeout(() => {
+                resultNumber.textContent = "2";
+                resultNumber.classList.add('jump');
+                setTimeout(() => resultNumber.classList.remove('jump'), 300);
+            }, 1000);
+            setTimeout(() => {
+                resultNumber.textContent = "1";
+                resultNumber.classList.add('jump');
+                setTimeout(() => resultNumber.classList.remove('jump'), 300);
+            }, 2000);
+            setTimeout(() => {
+                resultNumber.classList.add('jump');
+                resultNumber.textContent = finalResult;
+                resultText.textContent = `恭喜 ${finalResult} 号同学被选中！`;
+                // Add shine effect
+                const shine = document.querySelector('.shine');
+                shine.style.opacity = '1';
+                shine.style.animation = 'shine 2s 1';
+                // Reset animations
+                setTimeout(() => {
+                    resultNumber.classList.remove('jump');
+                    shine.style.opacity = '0';
+                    shine.style.animation = 'none';
+                }, 2000);
+                // Add confetti
+                createConfetti();
+            }, 3000);
+        }
+        function playEliminationEffect(finalResult) {
+            eliminationRound++;
+            // If this is the first round, start with all candidates
+            if (eliminationRound === 1) {
+                wheelContainer.style.display = 'none';
+                resultDisplay.style.display = 'block';
+                // Show how many candidates remain
+                if (eliminationCandidates.length > 1) {
+                    resultNumber.textContent = eliminationCandidates.length;
+                    resultText.textContent = `第${eliminationRound}轮: 还剩${eliminationCandidates.length}名候选者`;
+                    // Remove the selected candidate
+                    const index = eliminationCandidates.indexOf(finalResult);
+                    if (index > -1) {
+                        eliminationCandidates.splice(index, 1);
+                    }
+                    // Provide option to continue elimination or select winner
+                    spinAgainBtn.textContent = "继续淘汰";
+                    const selectWinnerBtn = document.createElement('button');
+                    selectWinnerBtn.textContent = "选出获胜者";
+                    selectWinnerBtn.className = "btn btn-secondary";
+                    selectWinnerBtn.style.marginLeft = "10px";
+                    // Add button to DOM if not already there
+                    if (!document.getElementById('select-winner-btn')) {
+                        selectWinnerBtn.id = 'select-winner-btn';
+                        spinAgainBtn.parentNode.appendChild(selectWinnerBtn);
+                        // Add event listener
+                        selectWinnerBtn.addEventListener('click', function() {
+                            // Choose random winner from remaining candidates
+                            const winnerIndex = Math.floor(Math.random() * eliminationCandidates.length);
+                            const winner = eliminationCandidates[winnerIndex];
+                            // Display winner
+                            resultNumber.textContent = winner;
+                            resultText.textContent = `最终获胜者是 ${winner} 号同学！`;
+                            // Remove this button
+                            this.remove();
+                            spinAgainBtn.textContent = "再来一次";
+                            // Add confetti
+                            createConfetti();
+                            // Reset elimination mode
+                            eliminationRound = 0;
+                            eliminationCandidates = [];
+                        });
+                    }
+                } else if (eliminationCandidates.length === 1) {
+                    // Only one candidate left - they're the winner
+                    resultNumber.textContent = eliminationCandidates[0];
+                    resultText.textContent = `最终获胜者是 ${eliminationCandidates[0]} 号同学！`;
+                    spinAgainBtn.textContent = "再来一次";
+                    // Remove select winner button if it exists
+                    const selectWinnerBtn = document.getElementById('select-winner-btn');
+                    if (selectWinnerBtn) {
+                        selectWinnerBtn.remove();
+                    }
+                    // Add confetti
+                    createConfetti();
+                    // Reset elimination mode
+                    eliminationRound = 0;
+                    eliminationCandidates = [];
+                }
+            } else {
+                // Subsequent rounds
+                // Remove the newly selected candidate
+                const index = eliminationCandidates.indexOf(finalResult);
+                if (index > -1) {
+                    eliminationCandidates.splice(index, 1);
+                }
+                // Show how many candidates remain
+                resultNumber.textContent = eliminationCandidates.length;
+                if (eliminationCandidates.length > 1) {
+                    resultText.textContent = `第${eliminationRound}轮: 还剩${eliminationCandidates.length}名候选者`;
+                } else if (eliminationCandidates.length === 1) {
+                    // Only one candidate left - they're the winner
+                    resultNumber.textContent = eliminationCandidates[0];
+                    resultText.textContent = `最终获胜者是 ${eliminationCandidates[0]} 号同学！`;
+                    spinAgainBtn.textContent = "再来一次";
+                    // Remove select winner button if it exists
+                    const selectWinnerBtn = document.getElementById('select-winner-btn');
+                    if (selectWinnerBtn) {
+                        selectWinnerBtn.remove();
+                    }
+                    // Add confetti
+                    createConfetti();
+                    // Reset elimination mode
+                    eliminationRound = 0;
+                    eliminationCandidates = [];
+                } else {
+                    // No candidates left (shouldn't happen normally)
+                    resultText.textContent = `所有候选者都已淘汰！`;
+                    spinAgainBtn.textContent = "再来一次";
+                    // Remove select winner button if it exists
+                    const selectWinnerBtn = document.getElementById('select-winner-btn');
+                    if (selectWinnerBtn) {
+                        selectWinnerBtn.remove();
+                    }
+                    // Reset elimination mode
+                    eliminationRound = 0;
+                    eliminationCandidates = [];
+                }
+            }
+        }
+        function playSpotlightEffect(finalResult) {
+            wheelContainer.style.display = 'none';
+            resultDisplay.style.display = 'block';
+            // Create spotlight container if it doesn't exist
+            let spotlightContainer = document.querySelector('.spotlight-container');
+            if (!spotlightContainer) {
+                spotlightContainer = document.createElement('div');
+                spotlightContainer.className = 'spotlight-container';
+                resultDisplay.appendChild(spotlightContainer);
+            }
+            // Show the spotlight
+            spotlightContainer.style.opacity = '1';
+            // First show blank result
+            resultNumber.textContent = "?";
+            resultText.textContent = "聚光灯将选择...";
+            // Add drumroll effect with increasing intensity
+            let drumrollInterval;
+            let intensity = 0;
+            const maxIntensity = 10;
+            drumrollInterval = setInterval(() => {
+                intensity++;
+                resultNumber.style.opacity = 0.5 + (intensity / maxIntensity * 0.5);
+                if (intensity >= maxIntensity) {
+                    clearInterval(drumrollInterval);
+                    // Show the result with dramatic effect
+                    resultNumber.classList.add('jump');
+                    resultNumber.textContent = finalResult;
+                    resultText.textContent = `恭喜 ${finalResult} 号同学被选中！`;
+                    // Apply spotlight pulse animation
+                    resultDisplay.style.animation = 'spotlight 2s';
+                    // Create confetti
+                    createConfetti();
+                    // Gradually fade out spotlight
+                    setTimeout(() => {
+                        spotlightContainer.style.opacity = '0';
+                        resultNumber.classList.remove('jump');
+                        resultDisplay.style.animation = 'none';
+                    }, 3000);
+                }
+            }, 300);
+        }
+        function playHeartbeatEffect(finalResult) {
+            wheelContainer.style.display = 'none';
+            resultDisplay.style.display = 'block';
+            resultNumber.textContent = "?";
+            resultText.textContent = "命运正在抉择...";
+            // Add heartbeat animation to result number
+            resultNumber.style.animation = 'heartbeat 1s infinite';
+            // After a few heartbeats, reveal the result
+            setTimeout(() => {
+                resultNumber.style.animation = 'none';
+                resultNumber.classList.add('jump');
+                resultNumber.textContent = finalResult;
+                resultText.textContent = `命运选择了 ${finalResult} 号同学！`;
+                // Add shine effect
+                const shine = document.querySelector('.shine');
+                shine.style.opacity = '1';
+                shine.style.animation = 'shine 2s 1';
+                // Reset animations
+                setTimeout(() => {
+                    resultNumber.classList.remove('jump');
+                    shine.style.opacity = '0';
+                    shine.style.animation = 'none';
+                }, 2000);
+                // Add confetti
+                createConfetti();
+            }, 4000);
+        }
+        function createConfetti() {
+            const specialEffects = document.createElement('div');
+            specialEffects.className = 'special-effects';
+            resultDisplay.appendChild(specialEffects);
+            // Create confetti pieces
+            for (let i = 0; i < 50; i++) {
+                const confetti = document.createElement('div');
+                confetti.className = 'confetti';
+                // Random position within container
+                const left = Math.random() * 100 + '%';
+                const top = -20 + 'px';
+                // Random size
+                const size = Math.random() * 8 + 5;
+                // Random color
+                const color = colors[Math.floor(Math.random() * colors.length)];
+                // Random shape
+                const shapes = ['circle', 'square', 'triangle'];
+                const shape = shapes[Math.floor(Math.random() * shapes.length)];
+                // Apply styles
+                confetti.style.left = left;
+                confetti.style.top = top;
+                confetti.style.width = size + 'px';
+                confetti.style.height = size + 'px';
+                confetti.style.backgroundColor = color;
+                if (shape === 'circle') {
+                    confetti.style.borderRadius = '50%';
+                } else if (shape === 'triangle') {
+                    confetti.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)';
+                }
+                // Add to container
+                specialEffects.appendChild(confetti);
+                // Animate falling
+                const duration = Math.random() * 3 + 2;
+                const delay = Math.random() * 1.5;
+                confetti.style.opacity = '1';
+                confetti.style.animation = `fall ${duration}s ease-in ${delay}s forwards`;
+                // Add keyframe animation for falling confetti
+                if (!document.querySelector('#confetti-animation')) {
+                    const styleSheet = document.createElement('style');
+                    styleSheet.id = 'confetti-animation';
+                    styleSheet.textContent = `
+                        @keyframes fall {
+                            0% {
+                                transform: translateY(0) rotate(0deg);
+                                opacity: 1;
+                            }
+                            100% {
+                                transform: translateY(${resultDisplay.clientHeight}px) rotate(360deg);
+                                opacity: 0;
+                            }
+                        }
+                    `;
+                    document.head.appendChild(styleSheet);
+                }
+            }
+            // Remove confetti after animation
+            setTimeout(() => {
+                if (specialEffects && specialEffects.parentNode) {
+                    specialEffects.parentNode.removeChild(specialEffects);
+                }
+            }, 5000);
+        }
+        function reset() {
+            // Reset to setup panel
+            setupPanel.classList.remove('minimized');
+            wheelContainer.style.display = 'none';
+            resultDisplay.style.display = 'none';
+            // Reset wheel rotation
+            wheelInner.style.transform = 'rotate(0deg)';
+            // Reset variables
+            isSpinning = false;
+            selectedSegment = null;
+            secondSelectedSegment = null;
+        }
+        // Initialize the app
+        function init() {
+            // Setup event listeners
+            startBtn.addEventListener('click', setupWheel);
+            resetBtn.addEventListener('click', reset);
+            spinBtn.addEventListener('click', spin);
+            spinAgainBtn.addEventListener('click', () => {
+                resultDisplay.style.display = 'none';
+                wheelContainer.style.display = 'block';
+            });
+            pickerModeSelect.addEventListener('change', updateModeDescription);
+            helpBubble.addEventListener('click', () => {
+                helpContent.style.display = 'block';
+            });
+            closeHelp.addEventListener('click', () => {
+                helpContent.style.display = 'none';
+            });
+            // Initialize mode description
+            updateModeDescription();
+        }
+        // Initialize the app
+        init();
+    </script>
+</body>
+</html>