-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
492 lines (471 loc) · 25.2 KB
/
Copy pathindex.html
File metadata and controls
492 lines (471 loc) · 25.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
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="炉石传说全方位攻略站 — 大地的裂变版本：环境速览、扩展包详解、11职业攻略、16套卡组推荐(含代码)、酒馆战棋、竞技场、新手入门与进阶技巧。从青铜到传说，助你登顶。">
<meta property="og:title" content="炉石传说攻略站 - 从入门到传说">
<meta property="og:description" content="大地的裂变版本攻略：环境速览、扩展包详解、11职业、16套卡组(含代码)、酒馆战棋、竞技场、新手入门与进阶技巧。">
<meta property="og:type" content="website">
<meta property="og:image" content="https://dsdcdcod.github.io/hearthstone-guide/og-image.svg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<title>炉石传说攻略站 - 从入门到传说</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="stylesheet" href="style.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "炉石传说攻略站",
"description": "从新手到传说 · 全方位策略指南",
"url": "https://dsdcdcod.github.io/hearthstone-guide/",
"inLanguage": "zh-CN",
"about": {
"@type": "VideoGame",
"name": "Hearthstone",
"url": "https://hearthstone.blizzard.com/",
"numberOfPlayers": { "@type": "QuantitativeValue", "minValue": 1, "maxValue": 2 },
"gamePlatform": ["PC", "Mobile"]
},
"hasPart": [
{ "@type": "Article", "name": "当前环境速览", "description": "大地的裂变版本T1职业胜率分析" },
{ "@type": "Article", "name": "扩展包介绍", "description": "大地的裂变：兆示、裂变、巨型回归机制详解" },
{ "@type": "Article", "name": "职业攻略", "description": "11职业英雄技能与玩法详解" },
{ "@type": "Article", "name": "热门卡组推荐", "description": "16套当前版本卡组，含造价与卡组代码" },
{ "@type": "Article", "name": "新手入门指南", "description": "学徒路线、基础规则、零充上分、天梯策略" },
{ "@type": "Article", "name": "酒馆战棋", "description": "第13赛季最强流派与T0英雄" },
{ "@type": "Article", "name": "竞技场", "description": "2026重制版双模式攻略" },
{ "@type": "Article", "name": "进阶技巧", "description": "资源管理、读牌预判、卡组构筑、概率分析" }
]
}
</script>
</head>
<body>
<a href="#main-content" class="skip-link">跳到主内容</a>
<div class="scroll-progress" id="scrollProgress"></div>
<header class="site-header">
<div class="container">
<h1 class="logo">🔥 炉石传说攻略站</h1>
<p class="subtitle">从新手到传说 · 全方位策略指南</p>
<button class="hamburger" id="hamburgerBtn" aria-label="菜单" aria-expanded="false">
<span></span><span></span><span></span>
</button>
<nav class="nav-bar" id="navBar">
<a href="#meta">当前环境</a>
<a href="#expansion">扩展包</a>
<a href="#heroes">职业攻略</a>
<a href="#decks">卡组推荐</a>
<a href="#beginner">新手入门</a>
<a href="#battlegrounds">酒馆战棋</a>
<a href="#arena">竞技场</a>
<a href="#tips">进阶技巧</a>
<a href="#cards">卡牌图鉴</a>
<button class="theme-toggle" id="themeToggle" aria-label="切换主题" title="切换亮色/暗色主题">🌙</button>
</nav>
</div>
</header>
<section class="hero-banner" id="main-content">
<div class="container">
<h2>在酒馆中打磨你的技艺</h2>
<p>掌握对局节奏、资源管理与卡组构筑，一步步登上传说宝座</p>
<div class="global-search-box">
<input type="text" id="globalSearch" placeholder="搜索攻略内容...（职业/卡组/卡牌/技巧）" aria-label="全局搜索">
<span class="search-icon">🔍</span>
<div class="global-search-results" id="globalSearchResults" style="display:none;"></div>
</div>
<div class="hero-actions" aria-label="常用入口">
<a class="hero-action primary" href="#decks">
<span>想直接上分</span>
<strong>看热门卡组</strong>
</a>
<a class="hero-action" href="#beginner">
<span>刚开始玩</span>
<strong>走新手路线</strong>
</a>
<a class="hero-action" href="#cards">
<span>查一张牌</span>
<strong>打开卡牌图鉴</strong>
</a>
<a class="hero-action" href="#battlegrounds">
<span>玩其他模式</span>
<strong>看酒馆/竞技场</strong>
</a>
</div>
<div class="hero-trust">
<span>更新：2026.05</span>
<span>覆盖：标准、狂野、酒馆、竞技场</span>
<span>说明：攻略会过期，卡牌以游戏内为准</span>
</div>
</div>
</section>
<section id="meta" class="section meta-section">
<div class="container">
<h2 class="section-title">📊 当前环境 (Meta) 速览 <span class="version-tag">大地的裂变 · 2026.05</span></h2>
<div class="meta-grid">
<div class="meta-card tier-s">
<span class="tier-badge">T1</span>
<h3>兆示萨</h3>
<p>6费兆示龙→7费死亡之翼→风怒刀终结。节奏链极强，当前最稳定的上分选择。</p>
<span class="winrate">胜率 56.0%</span>
</div>
<div class="meta-card tier-s">
<span class="tier-badge">T1</span>
<h3>法术瞎</h3>
<p>海洋咒符+双地标体系。黄金赛验证竞技强度，对多数卡组保持优势。</p>
<span class="winrate">胜率 56.0%</span>
</div>
<div class="meta-card tier-s">
<span class="tier-badge">T1</span>
<h3>兆示龙战</h3>
<p>按费拍怪+兆示联动+龙族BUFF三位一体，战士当前最强形态。</p>
<span class="winrate">胜率 57.6%</span>
</div>
<div class="meta-card tier-s">
<span class="tier-badge">T1</span>
<h3>打脸法</h3>
<p>极限快攻，高效过牌+海量直伤，接近59%胜率冠绝当前环境。</p>
<span class="winrate">胜率 59.4%</span>
</div>
</div>
</div>
</section>
<section id="expansion" class="section expansion-section">
<div class="container">
<h2 class="section-title">🌋 最新扩展包：大地的裂变</h2>
<p class="expansion-intro">2026年3月18日上线 · 135张全新可收集卡牌 · 死亡之翼从未落败的梦魇时间线</p>
<div class="expansion-grid">
<div class="expansion-card">
<span class="expansion-icon">🔥</span>
<h3>全新关键词：兆示</h3>
<p>使用兆示卡牌时召唤职业巨型随从的士兵。兆示次数越多，巨型衍生物威力越强——<strong>2次翻倍、4次再翻倍</strong>达最终形态。适用：DH/DK/盗贼/萨满/术士/战士。</p>
</div>
<div class="expansion-card">
<span class="expansion-icon">💎</span>
<h3>全新关键词：裂变</h3>
<p>抽到裂变卡牌时<strong>分裂成两张不同效果的牌</strong>，分别置于手牌两端。清空中间卡牌后融合为一张更强力的完整卡牌。适用：法师/牧师/德鲁伊/猎人/圣骑。</p>
</div>
<div class="expansion-card">
<span class="expansion-icon">🐉</span>
<h3>巨型回归</h3>
<p>所有职业各获得一张<strong>传说巨型随从</strong>，登场时召唤衍生物占据多个战场空位。包括拉格纳罗斯（战士）、克洛玛图斯（圣骑）等经典角色。</p>
</div>
<div class="expansion-card hero-card-featured">
<span class="expansion-icon">👑</span>
<h3>首张中立英雄牌</h3>
<p><strong>灭世者死亡之翼</strong> — 战吼可触发多种大灾变效果：摧毁最大随从、烈焰清场、奴役随从、召唤龙族。兆示次数越多，效果越多。</p>
</div>
</div>
<div class="expansion-note">
<p>🎁 免费福利：「漫游翡翠梦境」+「安戈洛龟途」全卡免费试用 · 「治愈艾泽拉斯」职业系列5月上线 · 登录即领传说卡牌「战争大师黑角」</p>
</div>
</div>
</section>
<section id="heroes" class="section heroes-section">
<div class="container">
<h2 class="section-title">⚔️ 职业攻略</h2>
<div class="search-box">
<input type="text" id="heroSearch" placeholder="搜索职业名称或关键词..." aria-label="搜索职业">
<span class="search-icon">🔍</span>
</div>
<p class="search-empty" id="heroSearchEmpty" style="display:none;">没有找到匹配的职业</p>
<div class="heroes-grid" id="heroesGrid">
</div>
<noscript>
<p style="text-align:center;color:var(--text-muted);padding:20px;">⚠️ 请启用 JavaScript 以查看职业攻略详情。</p>
</noscript>
</div>
</section>
<section id="decks" class="section decks-section">
<div class="container">
<h2 class="section-title">🎴 热门卡组推荐</h2>
<div class="deck-filter" aria-label="模式筛选">
<button class="filter-btn format-btn active" data-format="all">全部模式</button>
<button class="filter-btn format-btn" data-format="standard">标准</button>
<button class="filter-btn format-btn" data-format="wild">狂野</button>
</div>
<div class="deck-filter" aria-label="类型筛选">
<button class="filter-btn active" data-filter="all">全部类型</button>
<button class="filter-btn" data-filter="aggro">快攻</button>
<button class="filter-btn" data-filter="midrange">中速</button>
<button class="filter-btn" data-filter="control">控制</button>
<button class="filter-btn" data-filter="combo">组合技</button>
<button class="compare-toggle-btn" id="compareToggle">⚖️ 对比模式</button>
</div>
<div class="deck-filter" id="classFilterRow">
<button class="filter-btn class-filter-btn active" data-class="all">全部职业</button>
</div>
<div class="compare-panel" id="comparePanel" style="display:none;">
<div class="compare-slot" id="compareSlot1">
<span class="compare-placeholder">选择第1个卡组</span>
</div>
<div class="compare-vs">VS</div>
<div class="compare-slot" id="compareSlot2">
<span class="compare-placeholder">选择第2个卡组</span>
</div>
</div>
<div class="decks-grid" id="decksGrid">
</div>
<noscript>
<p style="text-align:center;color:var(--text-muted);padding:20px;">⚠️ 请启用 JavaScript 以查看热门卡组推荐。</p>
</noscript>
</div>
</section>
<section id="beginner" class="section beginner-section">
<div class="container">
<h2 class="section-title">🎓 新手入门指南</h2>
<div class="guide-steps">
<div class="step-card">
<div class="step-number">01</div>
<h3>完成学徒路线</h3>
<ul>
<li>通过<strong>学徒路线</strong>解锁全部10个职业，获取卡包和金币奖励。</li>
<li>完成<strong>旅店老板</strong>普通/困难首胜，拿额外金币。</li>
<li>善用<strong>追赶包</strong>（Catch-Up Pack）—— 卡越少开的越多，最多250张。</li>
<li>学徒路线结束可<strong>免费试玩6套竞技卡组</strong>，选一套永久保留。</li>
</ul>
</div>
<div class="step-card">
<div class="step-number">02</div>
<h3>理解基础规则</h3>
<ul>
<li><strong>法力水晶：</strong>每回合增长1颗（上限10），用于出牌和英雄技能。</li>
<li><strong>随从交换：</strong>用你的随从攻击敌方随从，保护己方英雄，建立场面优势。</li>
<li><strong>卡牌类型：</strong>随从、法术、武器、英雄牌、地标 — 各有不同用途。</li>
<li><strong>关键词：</strong>突袭、嘲讽、圣盾、亡语、战吼、兆示、裂变 — 游戏核心机制。</li>
</ul>
</div>
<div class="step-card">
<div class="step-number">03</div>
<h3>构筑第一套卡组</h3>
<ul>
<li>新手推荐从<strong>快攻卡组</strong>入手 — 操作简单、造价低、节奏明快。</li>
<li>确保<strong>法力曲线</strong>平滑：1-3费的牌约占一半，保证前期不卡手。</li>
<li>优先合成<strong>中立传说</strong>卡牌（如碧蓝幼龙），多职业通用不浪费尘。</li>
<li><strong>白卡千万别合</strong>—— 开包自然会满。尘留给史诗和传说。</li>
</ul>
</div>
<div class="step-card">
<div class="step-number">04</div>
<h3>掌握核心概念</h3>
<ul>
<li><strong>节奏 (Tempo)：</strong>每回合最大化利用法力水晶，不空过。</li>
<li><strong>卡差 (Card Advantage)：</strong>过牌比对手多 = 资源多。一张牌换对面两张就是赚。</li>
<li><strong>血量即资源：</strong>术士抽牌掉血、卖血保场面，有时是正确选择。</li>
<li><strong>斩杀线：</strong>时刻计算对手的OTK范围，防患于未然。</li>
</ul>
</div>
<div class="step-card">
<div class="step-number">05</div>
<h3>零充 / 低预算上分</h3>
<ul>
<li>每天清<strong>3个日常任务</strong>保底50金，优先做高收益任务（80-100金）。</li>
<li>经典卡包<strong>前10包必出橙</strong>，金币优先开各系列保底橙。</li>
<li>推荐低造价上分卡组：<strong>野兽猎(~2400尘)、树人德(~3200尘)、龙战·吼爹版(~3600尘)</strong>。</li>
<li>每年4月退环境前<strong>别分旧卡</strong>，退环境后全额返尘再合新卡。</li>
</ul>
</div>
<div class="step-card">
<div class="step-number">06</div>
<h3>爬天梯策略</h3>
<ul>
<li>熟悉<strong>1-2套主流卡组</strong>，比会玩很多套更有效。专注才能上分。</li>
<li>遇到连败果断<strong>暂停匹配</strong>，调整心态再战。系统有时会匹配人机送温暖。</li>
<li>记住对手卡组的<strong>关键回合</strong>—— 7费牧师防AOE、6费萨满防兆示龙。</li>
<li>从青铜到传说需要约<strong>150-200场</strong>净胜，稳扎稳打。</li>
</ul>
</div>
<div class="step-card">
<div class="step-number">07</div>
<h3>善用工具与社区</h3>
<ul>
<li><strong>HSReplay.net</strong> — 查看实时环境数据和热门卡组胜率。</li>
<li><strong>旅法师营地 / NGA</strong> — 中文社区首选，抄卡组、看攻略。</li>
<li><strong>炉石盒子</strong> — 辅助选卡、记录战绩、查看对手卡组。</li>
<li>导入<strong>卡组代码</strong>前确认版本匹配，避免过期代码浪费尘。</li>
</ul>
</div>
</div>
<div class="quiz-section" id="quizSection">
<button class="quiz-start-btn" id="quizStartBtn">📝 测验你的知识</button>
<div class="quiz-container" id="quizContainer" style="display:none;"></div>
</div>
</div>
</section>
<section id="battlegrounds" class="section bg-section">
<div class="container">
<h2 class="section-title">⚔️ 酒馆战棋 <span class="version-tag">第13赛季</span></h2>
<p class="expansion-intro">全新关键词「进击」· 任务回归 · 100+随从刷新 · T0英雄：吉恩/米罗克/加里维克斯/斯尼德</p>
<h3 class="sub-section-title">🏆 最强流派</h3>
<div class="bg-comps-grid" id="bgGrid"></div>
<h3 class="sub-section-title">👑 T0 英雄</h3>
<div class="bg-heroes-grid" id="bgHeroesGrid"></div>
<div class="bg-leveling">
<h3 class="sub-section-title">📈 标准升级曲线</h3>
<div class="bg-curve">
<div class="bg-turn"><span>回合1</span><strong>3铸币</strong>买随从</div>
<div class="bg-turn"><span>回合2</span><strong>4铸币</strong>升2本</div>
<div class="bg-turn"><span>回合3</span><strong>5铸币</strong>卖1买2</div>
<div class="bg-turn"><span>回合4</span><strong>6铸币</strong>买2随从</div>
<div class="bg-turn"><span>回合5</span><strong>7铸币</strong>升3本+买1</div>
<div class="bg-turn"><span>回合6+</span><strong>8+铸币</strong>灵活运营</div>
</div>
</div>
<noscript><p style="text-align:center;color:var(--text-muted);padding:20px;">⚠️ 请启用 JavaScript 以查看酒馆战棋详情。</p></noscript>
</div>
</section>
<section id="arena" class="section arena-section">
<div class="container">
<h2 class="section-title">🏟️ 竞技场 <span class="version-tag">2026 重制版</span></h2>
<div class="arena-modes">
<div class="arena-mode-card">
<h3>🎯 普通模式 (The Arena)</h3>
<ul>
<li><strong>选牌革新：</strong>先选传说组合（传说+3张协同卡），再围绕构建套牌</li>
<li><strong>节奏更快：</strong>5胜或2败结束，不再拖长局</li>
<li><strong>公平匹配：</strong>基于MMR匹配实力相近的对手</li>
<li><strong>入场费：</strong>1张旅店通票（150金币/200符文石）</li>
<li><strong>最高奖励：</strong>5胜 = 1通票+2卡包，实现永动</li>
</ul>
</div>
<div class="arena-mode-card arena-underground">
<h3>💀 地下模式 (The Underground)</h3>
<ul>
<li><strong>解锁条件：</strong>普通模式累计7胜后开启</li>
<li><strong>经典规则：</strong>12胜或3败，无MMR匹配</li>
<li><strong>独特机制：</strong>每次失败后可重选5张卡牌</li>
<li><strong>入场费：</strong>2张旅店通票</li>
<li><strong>终极奖励：</strong>12胜获专属英雄皮肤「幽灵奈法利安」</li>
</ul>
</div>
</div>
<div class="arena-tips">
<h3 class="sub-section-title">🧠 竞技场进阶技巧</h3>
<div class="tips-grid">
<div class="tip-mini-card">场面控制优先 — 随从交换比打脸更重要</div>
<div class="tip-mini-card">节奏不空过 — 每回合用满法力是赢的基础</div>
<div class="tip-mini-card">选牌重曲线 — 确保2-4费有足够随从可出</div>
<div class="tip-mini-card">传说组合定方向 — 选择有内部协同的组合</div>
<div class="tip-mini-card">优势抢血劣势控场 — 判断当前局面选择策略</div>
<div class="tip-mini-card">了解职业强度 — 法师/牧师/DK当前竞技场强势</div>
</div>
</div>
</div>
</section>
<section id="tips" class="section tips-section">
<div class="container">
<h2 class="section-title">💡 进阶技巧</h2>
<div class="tips-accordion">
<div class="tip-item">
<button class="tip-header" id="tip-header-1" aria-expanded="false" aria-controls="tip-body-1">🎯 资源管理艺术 <span class="arrow">▾</span></button>
<div class="tip-body" id="tip-body-1" role="region" aria-labelledby="tip-header-1">
<p>高手与普通玩家的最大区别在于资源管理。核心原则：</p>
<ul>
<li><strong>手牌管理：</strong>不要把牌打光 — 保持2-3张手牌应对后续回合。</li>
<li><strong>AOE骗术：</strong>铺场时留下部分资源，迫使对手交AOE后重新展开。</li>
<li><strong>过牌时机：</strong>在法力水晶溢出前过牌，不要等到手牌打空才着急抽牌。</li>
<li><strong>武器耐久：</strong>留1点耐久的武器有时比用完更有威慑力。</li>
</ul>
</div>
</div>
<div class="tip-item">
<button class="tip-header" id="tip-header-2" aria-expanded="false" aria-controls="tip-body-2">🧠 读牌与预判 <span class="arrow">▾</span></button>
<div class="tip-body" id="tip-body-2" role="region" aria-labelledby="tip-header-2">
<p>高水平对局中，你需要通过对手的每一个动作推断其手牌：</p>
<ul>
<li>对手突然不用英雄技能 → 手里有解牌在等你的关键随从。</li>
<li>快攻卡组在5费后还没铺场 → 可能在攒OTK组件。</li>
<li>对手留大量手牌不用 → 控制卡组，准备打后手翻盘。</li>
<li>观察对手每回合的<strong>犹豫时间</strong> — 犹豫越长，选择越多。</li>
</ul>
</div>
</div>
<div class="tip-item">
<button class="tip-header" id="tip-header-3" aria-expanded="false" aria-controls="tip-body-3">🏗️ 卡组构筑原理 <span class="arrow">▾</span></button>
<div class="tip-body" id="tip-body-3" role="region" aria-labelledby="tip-header-3">
<p>理解卡组构筑逻辑，你就能自己调优卡组：</p>
<ul>
<li><strong>核心组 (8-12张)：</strong>卡组的制胜引擎，不可替换。</li>
<li><strong>支援组 (10-14张)：</strong>过牌、解场、回复 — 保证卡组流畅运转。</li>
<li><strong>科技位 (2-4张)：</strong>针对环境的灵活卡位，根据天梯对手调整。</li>
<li><strong>曲线检查：</strong>确保每个费用点都有可用的牌。</li>
</ul>
</div>
</div>
<div class="tip-item">
<button class="tip-header" id="tip-header-4" aria-expanded="false" aria-controls="tip-body-4">🎲 随机性与概率 <span class="arrow">▾</span></button>
<div class="tip-body" id="tip-body-4" role="region" aria-labelledby="tip-header-4">
<p>炉石有大量随机性，但高手知道如何最大化概率：</p>
<ul>
<li><strong>发现 (Discover)：</strong>选择时优先考虑当前局势最需要的牌。</li>
<li><strong>抽牌概率：</strong>卡组还剩20张，某张牌抽到的概率 = 剩余数量/20。</li>
<li><strong>随机伤害：</strong>尽量先清掉小随从再放随机伤害法术，提高命中率。</li>
<li><strong>风险对冲：</strong>不要孤注一掷 — 随机效果当锦上添花，不当救命稻草。</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="cards" class="section cards-section">
<div class="container">
<h2 class="section-title">🃏 卡牌图鉴 <span class="version-tag">7,935张</span></h2>
<p class="expansion-intro">按职业、类型、稀有度、费用筛选 · 本地卡牌库，实际效果以游戏内为准</p>
<div class="cards-controls">
<div class="cards-filter-row" id="classFilters">
<button class="cards-filter-btn active" data-filter="ALL">全部</button>
</div>
<div class="cards-filter-row">
<select id="typeFilter" class="cards-select">
<option value="ALL">全部类型</option>
<option value="MINION">随从</option>
<option value="SPELL">法术</option>
<option value="WEAPON">武器</option>
<option value="HERO">英雄牌</option>
<option value="LOCATION">地标</option>
</select>
<select id="rarityFilter" class="cards-select">
<option value="ALL">全部稀有度</option>
<option value="COMMON">普通</option>
<option value="RARE">稀有</option>
<option value="EPIC">史诗</option>
<option value="LEGENDARY">传说</option>
</select>
<select id="costFilter" class="cards-select">
<option value="ALL">全部费用</option>
</select>
<select id="setFilter" class="cards-select">
<option value="ALL">全部扩展包</option>
</select>
<select id="sortBy" class="cards-select">
<option value="set-cost-asc">扩展包 · 费用↑</option>
<option value="cost-asc">费用↑</option>
<option value="cost-desc">费用↓</option>
<option value="name-asc">名称 A-Z</option>
</select>
<input type="text" id="cardSearch" class="cards-search" placeholder="搜索卡牌名称或描述...">
</div>
</div>
<div class="cards-loading" id="cardsLoading">🔄 正在加载卡牌数据库...</div>
<div class="cards-grid" id="cardsGrid"></div>
<div class="cards-pagination" id="cardsPagination"></div>
</div>
</section>
<footer class="site-footer">
<div class="container">
<p>🍺 在酒馆里，每个人都能成为传说</p>
<p class="footer-note">本网站为玩家自制攻略，内容基于游戏理解与社区共识。卡牌数据请以游戏内实际为准。</p>
</div>
</footer>
<a href="#" class="back-to-top" id="backToTop" aria-label="返回顶部">⬆</a>
<!-- Card Detail Modal -->
<div class="card-modal-overlay" id="cardModal" style="display:none;">
<div class="card-modal">
<button class="card-modal-close" id="cardModalClose" aria-label="关闭">✕</button>
<img class="card-modal-img" id="cardModalImg" src="" alt="">
<div class="card-modal-info" id="cardModalInfo"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>