-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
300 lines (274 loc) · 13.2 KB
/
index.html
File metadata and controls
300 lines (274 loc) · 13.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧨 亲戚应对模拟器 - 春节生存挑战</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 烟花容器 -->
<div class="fireworks-container" id="fireworks-container"></div>
<!-- 春节装饰背景 -->
<div class="spring-decoration">🧧</div>
<div class="spring-decoration">✨</div>
<div class="spring-decoration">🎊</div>
<div class="spring-decoration">🎉</div>
<!-- 春节装饰灯笼 -->
<div class="lantern lantern-left">🏮</div>
<div class="lantern lantern-right">🏮</div>
<!-- 设置按钮 -->
<button id="settings-btn" class="settings-btn" title="设置">⚙️</button>
<!-- 设置面板 -->
<div id="settings-panel" class="settings-panel">
<div class="settings-content">
<div class="settings-header">
<h3>⚙️ 设置</h3>
<button id="close-settings" class="close-settings">×</button>
</div>
<div class="settings-section">
<h4>🎨 主题模式</h4>
<div class="settings-option">
<label class="toggle-label">
<input type="radio" name="theme" value="light" checked>
<span class="toggle-text">☀️ 浅色模式</span>
</label>
</div>
<div class="settings-option">
<label class="toggle-label">
<input type="radio" name="theme" value="dark">
<span class="toggle-text">🌙 深色模式</span>
</label>
</div>
<div class="settings-option">
<label class="toggle-label">
<input type="radio" name="theme" value="auto">
<span class="toggle-text">🔄 跟随系统</span>
</label>
</div>
</div>
<div class="settings-section">
<h4>✨ 增强选项</h4>
<div class="settings-option">
<label class="toggle-switch">
<input type="checkbox" id="fireworks-toggle" checked>
<span class="toggle-slider"></span>
<span class="toggle-text">🎆 烟花效果</span>
</label>
</div>
<div class="settings-option">
<label class="toggle-switch">
<input type="checkbox" id="animation-toggle" checked>
<span class="toggle-slider"></span>
<span class="toggle-text">启用动画效果</span>
</label>
</div>
<div class="settings-option">
<label class="toggle-switch">
<input type="checkbox" id="particles-toggle" checked>
<span class="toggle-slider"></span>
<span class="toggle-text">背景粒子效果</span>
</label>
</div>
<div class="settings-option">
<label class="toggle-switch">
<input type="checkbox" id="sound-toggle">
<span class="toggle-slider"></span>
<span class="toggle-text">音效反馈</span>
</label>
</div>
</div>
<div class="settings-section">
<h4>💬 对话设置</h4>
<div class="settings-option">
<label for="round-limit">最大对话轮数：</label>
<select id="round-limit" class="settings-select">
<option value="5">5 轮</option>
<option value="10" selected>10 轮</option>
<option value="15">15 轮</option>
<option value="20">20 轮</option>
<option value="999">无限</option>
</select>
</div>
</div>
</div>
</div>
<div class="container">
<!-- 标题区域 -->
<header class="header">
<h1 class="title">🧨 亲戚应对模拟器</h1>
<p class="subtitle">春节生存挑战 - 你能撑过几轮？</p>
</header>
<!-- 难度选择界面 -->
<div id="difficulty-screen" class="screen active">
<h2 class="section-title">选择你的挑战难度</h2>
<div class="difficulty-grid">
<div class="difficulty-card" data-difficulty="easy">
<div class="card-emoji">👩</div>
<h3 class="card-title">和蔼的大姨</h3>
<div class="difficulty-stars">⭐</div>
<p class="card-desc">性格温和，问题简单</p>
<button class="card-btn">开始挑战</button>
</div>
<div class="difficulty-card" data-difficulty="medium">
<div class="card-emoji">👩🦳</div>
<h3 class="card-title">犀利的大姑</h3>
<div class="difficulty-stars">⭐⭐⭐</div>
<p class="card-desc">言辞犀利，擅长对比</p>
<button class="card-btn">开始挑战</button>
</div>
<div class="difficulty-card" data-difficulty="hard">
<div class="card-emoji">👨</div>
<h3 class="card-title">王牌二舅</h3>
<div class="difficulty-stars">⭐⭐⭐⭐⭐</div>
<p class="card-desc">经验丰富，问题刁钻</p>
<button class="card-btn">开始挑战</button>
</div>
<div class="difficulty-card" data-difficulty="extreme">
<div class="card-emoji">👵</div>
<h3 class="card-title">终极三婶</h3>
<div class="difficulty-stars">⭐⭐⭐⭐⭐⭐</div>
<p class="card-desc">究极难度，全方位轰炸</p>
<button class="card-btn">开始挑战</button>
</div>
</div>
</div>
<!-- 聊天界面 -->
<div id="chat-screen" class="screen">
<div class="chat-header">
<div class="relative-info">
<span id="current-emoji" class="relative-emoji">👩</span>
<div>
<h3 id="current-relative" class="relative-name">和蔼的大姨</h3>
<p id="current-difficulty" class="relative-difficulty">难度：⭐ 简单</p>
</div>
</div>
<button id="back-btn" class="back-btn">← 返回</button>
</div>
<div id="chat-messages" class="chat-messages">
<!-- 消息会动态添加到这里 -->
</div>
<div class="chat-input-area">
<input
type="text"
id="user-input"
class="chat-input"
placeholder="输入你的应对..."
autocomplete="off"
>
<button id="send-btn" class="send-btn">发送</button>
</div>
</div>
<!-- 结果弹窗 -->
<div id="result-modal" class="modal">
<div class="modal-content">
<h2 id="result-title">挑战结束</h2>
<p id="result-message">恭喜你完成了挑战！</p>
<div id="result-stats" class="result-stats">
<p>对话轮数：<span id="round-count">0</span></p>
</div>
<div class="modal-buttons">
<button id="retry-btn" class="modal-btn primary">再来一次</button>
<button id="close-modal-btn" class="modal-btn secondary">返回</button>
</div>
</div>
</div>
<!-- 评分模态框 -->
<div id="rating-modal" class="modal">
<div class="modal-content">
<h2>🎯 本次表现评分</h2>
<p class="rating-description">
为您这次应对亲戚的表现打分，帮助我们了解您对游戏的体验
</p>
<div class="rating-stars-container">
<div class="rating-stars" id="rating-stars">
<span class="star" data-rating="1">⭐</span>
<span class="star" data-rating="2">⭐</span>
<span class="star" data-rating="3">⭐</span>
<span class="star" data-rating="4">⭐</span>
<span class="star" data-rating="5">⭐</span>
</div>
<div class="rating-text" id="rating-text">请选择评分</div>
</div>
<div class="rating-feedback">
<h3>📝 评价反馈</h3>
<div class="rating-comments">
<div class="rating-comment" data-rating="1">
<h4>⭐ 一星 - 刚起步</h4>
<p>继续努力！多练习几次就能更好地应对亲戚的刁难了。建议提前想好应对策略哦～</p>
</div>
<div class="rating-comment" data-rating="2">
<h4>⭐⭐ 两星 - 有进步</h4>
<p>表现不错！你已经能应对一些基本的亲戚问题了。再接再厉，下次会更好！</p>
</div>
<div class="rating-comment" data-rating="3">
<h4>⭐⭐⭐ 三星 - 还不错</h4>
<p>中等水平！大部分情况都能应对，但在一些 tricky 问题上还可以更机智一些。</p>
</div>
<div class="rating-comment" data-rating="4">
<h4>⭐⭐⭐⭐ 四星 - 很棒</h4>
<p>表现优秀！你很懂得如何巧妙应对亲戚的问题，很多应对策略都很得体。</p>
</div>
<div class="rating-comment" data-rating="5">
<h4>⭐⭐⭐⭐⭐ 五星 - 太厉害了</h4>
<p>完美表现！你是真正的亲戚应对大师，任何刁难都能轻松化解，太强了！</p>
</div>
</div>
</div>
<div class="rating-actions">
<button id="submit-rating-btn" class="modal-btn primary" disabled>提交评分</button>
<button id="skip-rating-btn" class="modal-btn secondary">跳过</button>
</div>
</div>
</div>
</div>
</div>
<!-- API Key 首次访问提示弹窗 -->
<div id="api-key-modal" class="modal">
<div class="modal-content">
<h2>🔑 设置 iFlow API Key</h2>
<p class="api-key-description">
为了使用亲戚应对模拟器，您需要提供 iFlow 服务的 API Key。<br>
这是连接 AI 大模型服务的必要凭证。
</p>
<div class="api-key-instructions">
<h3>📋 获取 API Key 步骤：</h3>
<ol>
<li>访问 <a href="https://iflow.cn" target="_blank" class="api-key-link">iFlow 官网</a></li>
<li>注册或登录您的账户</li>
<li>进入控制台 API Key 页面</li>
<li>创建新的 API Key</li>
<li>复制 API Key 并输入到下方</li>
</ol>
</div>
<div class="api-key-input-area">
<label for="api-key-input">请输入您的 API Key：</label>
<input
type="password"
id="api-key-input"
class="api-key-input"
placeholder="sk-..."
autocomplete="off"
>
<div class="api-key-hint">
<span>💡 提示：Key 以 "sk-" 开头</span>
</div>
</div>
<div class="modal-buttons">
<button id="save-api-key-btn" class="modal-btn primary">保存并开始</button>
<button id="skip-api-key-btn" class="modal-btn secondary">跳过（离线模式）</button>
</div>
</div>
</div>
</div>
<!-- 加载动画 -->
<div id="loading" class="loading">
<div class="loading-spinner"></div>
<p>亲戚正在思考怎么刁难你...</p>
</div>
<script src="config.js"></script>
<script src="settings.js"></script>
<script src="fireworks.js"></script>
<script src="app.js"></script>
</body>
</html>