scorecard/about.html at main · lingceng/scorecard · GitHub

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
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0c0c18;
  color: #eaeaea;
  min-height: 100vh;
  line-height: 1.75;
}
.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}
header {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding-bottom: 16px;
  margin-bottom: 32px;
}
header h1 { font-size: 22px; font-weight: 700; }
header a {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: #6b7394;
  text-decoration: none;
}
header a:hover { color: #eaeaea; }
h1 { font-size: 28px; font-weight: 900; margin: 28px 0 14px; }
h2 { font-size: 18px; font-weight: 700; margin: 28px 0 10px; color: #eaeaea; }
h3 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; }
p { margin: 8px 0; color: #c5c9d6; font-size: 15px; }
ul, ol { padding-left: 20px; margin: 8px 0; }
li { margin: 4px 0; color: #c5c9d6; font-size: 15px; }
strong { color: #eaeaea; }
a { color: #e94560; text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  background: #1c1c34;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
img {
  max-width: 100%;
  border-radius: 12px;
  margin: 16px 0;
  display: block;
}
.container > :first-child { margin-top: 0; }
</style>
</head>
<body>
<div class="container">
  <header>
    <h1>打牌计分器</h1>
    <a href="./">← 返回应用</a>
  </header>
  <h1 dir="auto">科科打牌记分器</h1>
<p dir="auto">一个简洁的移动端打牌（四人）记分工具，纯前端单页应用，无需后端，支持离线使用。</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer" href="demo.gif"><img src="demo.gif" alt="demo" data-animated-image="" style="max-width: 100%;"></a></p>
<h2 dir="auto">功能特性</h2>
<ul dir="auto">
<li><strong>4 位玩家</strong>：每位玩家用字母标识（默认 A/B/C/D），点击头像可自定义字母</li>
<li><strong>滚轮输入分数</strong>：每人通过拖动滚轮选择本轮得分（范围 −20 ~ +20）</li>
<li><strong>自动补全</strong>：当 3 位玩家已拨好分数时，第 4 位自动计算（确保总和为 0）</li>
<li><strong>分数校验</strong>：提交前检查四人分数之和是否为 0，否则给出提示</li>
<li><strong>历史记录</strong>：展示每轮得分，默认显示最近 5 轮，支持展开全部</li>
<li><strong>撤销</strong>：可撤销最近一轮的提交</li>
<li><strong>新开一局</strong>：清零所有分数（保留玩家字母）</li>
<li><strong>本地持久化</strong>：游戏状态存储于 <code class="notranslate">localStorage</code>，刷新后恢复</li>
<li><strong>彩纸动画</strong>：每次提交分数触发庆祝彩纸效果</li>
<li><strong>移动端优化</strong>：触屏友好，支持 iOS Safe Area，深色主题</li>
</ul>
<h2 dir="auto">使用方法</h2>
<p dir="auto">直接访问在线版本即可，无需安装任何依赖：</p>
<ul dir="auto">
<li>主入口：<a href="https://lingceng-scorecard.netlify.app/" rel="nofollow">https://lingceng-scorecard.netlify.app/</a></li>
<li>备用入口：<a href="https://lingceng.github.io/scorecard/" rel="nofollow">https://lingceng.github.io/scorecard/</a></li>
<li>微信小程序：搜索「科科打牌记分器」</li>
</ul>
<h2 dir="auto">规则说明</h2>
<p dir="auto">每轮结束后，各玩家拨动对应滚轮选择得分，<strong>四人分数之和必须为 0</strong>，然后点击「提交分数」。<br>
若只拨了 3 位玩家的分数，第 4 位会自动高亮并填入对应值。</p>
<h2 dir="auto">技术栈</h2>
<ul dir="auto">
<li>原生 HTML / CSS / JavaScript（无框架、无构建工具）</li>
<li><code class="notranslate">localStorage</code> 持久化</li>
<li>Google Fonts（DM Mono + Noto Sans SC）</li>
</ul>
</div>
</body>
</html>