-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
106 lines (103 loc) · 4.89 KB
/
index.html
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
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>派对抽奖</title>
<meta name="application-name" content="派对抽奖">
<meta name="description" content="在派对、婚礼、公司年会等活动现场举行抽奖活动">
<meta name="author" content="James Shih">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-undo2" viewBox="0 0 32 32">
<path
d="M23.808 32c3.554-6.439 4.153-16.26-9.808-15.932v7.932l-12-12 12-12v7.762c16.718-0.436 18.58 14.757 9.808 24.238z">
</path>
</symbol>
<symbol id="icon-spinner11" viewBox="0 0 32 32">
<path
d="M32 12h-12l4.485-4.485c-2.267-2.266-5.28-3.515-8.485-3.515s-6.219 1.248-8.485 3.515c-2.266 2.267-3.515 5.28-3.515 8.485s1.248 6.219 3.515 8.485c2.267 2.266 5.28 3.515 8.485 3.515s6.219-1.248 8.485-3.515c0.189-0.189 0.371-0.384 0.546-0.583l3.010 2.634c-2.933 3.349-7.239 5.464-12.041 5.464-8.837 0-16-7.163-16-16s7.163-16 16-16c4.418 0 8.418 1.791 11.313 4.687l4.687-4.687v12z">
</path>
</symbol>
<symbol id="icon-wrench" viewBox="0 0 32 32">
<path
d="M31.342 25.559l-14.392-12.336c0.67-1.259 1.051-2.696 1.051-4.222 0-4.971-4.029-9-9-9-0.909 0-1.787 0.135-2.614 0.386l5.2 5.2c0.778 0.778 0.778 2.051 0 2.828l-3.172 3.172c-0.778 0.778-2.051 0.778-2.828 0l-5.2-5.2c-0.251 0.827-0.386 1.705-0.386 2.614 0 4.971 4.029 9 9 9 1.526 0 2.963-0.38 4.222-1.051l12.336 14.392c0.716 0.835 1.938 0.882 2.716 0.104l3.172-3.172c0.778-0.778 0.731-2-0.104-2.716z">
</path>
</symbol>
<symbol id="icon-checkmark" viewBox="0 0 32 32">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
</symbol>
</defs>
</svg>
<div id="wrapper">
<div id="namesPanel" class="panel">
<a id="click-area" aria-label="点此开始新一轮抽奖"></a>
<button id="reset-btn" aria-label="复位" data-title="复位" data-confirm="确实要复位吗？">
<svg class="icon icon-spinner11">
<use xlink:href="#icon-spinner11"></use>
</svg>
</button>
<button id="options-btn" aria-label="设置" data-title="设置">
<svg class="icon icon-wrench">
<use xlink:href="#icon-wrench"></use>
</svg>
</button>
</div>
<div id="optionsPanel" class="panel">
<div id="options">
<form id="options-form">
<div id="options-left">
<textarea id="names" placeholder="在此输入参与者的姓名，以空格、顿号或中英文逗号分隔"></textarea>
</div>
<div id="options-right">
<fieldset>
<legend>选项</legend>
<dl>
<dt>不能重复中奖</dt>
<dd><input type="checkbox" id="removeAfterHit"><label for="removeAfterHit"></label></dd>
<dt>朗读中奖者名字</dt>
<dd><input type="checkbox" id="readOutNames"><label for="readOutNames"></label></dd>
<dt>手动停止</dt>
<dd><input type="checkbox" id="stopOnDemand"><label for="stopOnDemand"></label></dd>
<dt>浅色主题</dt>
<dd><input type="checkbox" id="lightTheme"><label for="lightTheme"></label></dd>
</dl>
</fieldset>
</div>
<div id="options-bottom">
<button type="submit" id="optionSubmit" style="float:right" aria-label="保存" data-title="保存">
<svg class="icon icon-checkmark">
<use xlink:href="#icon-checkmark"></use>
</svg>
</button>
<button type="button" id="optionCancel" aria-label="取消" data-title="取消">
<svg class="icon icon-undo2">
<use xlink:href="#icon-undo2"></use>
</svg>
</button>
</div>
</form>
</div>
<copyright>© MMXIII-MMXXIV <a href="https://jshih.dev">James Shih</a></copyright>
<a id="github-link" href="https://github.com/hyjk2000/party-lottery">Fork me on GitHub</a>
</div>
<div id="pwa-toast" role="alert" aria-labelledby="toast-message">
<div class="message">
<span id="toast-message"></span>
</div>
<div class="buttons">
<button id="pwa-refresh" type="button">刷新</button>
<button id="pwa-close" type="button">关闭</button>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>