-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·68 lines (66 loc) · 3.4 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>元旦文艺汇演抽奖系统</title>
<link rel='stylesheet' href='./material.min.css'>
<script src='./material.min.js'></script>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Roboto'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='./styles.css'>
</head>
<body>
<div class='mdl-layout mdl-js-layout mdl-layout--fixed-header'>
<header class='mdl-layout__header'>
<div id='header-row' class='mdl-layout__header-row'>
<span class='mdl-layout-title'>16-17 元旦文艺汇演抽奖系统</span>
</div>
</header>
<main>
<div class='mdl-grid'>
<div class='mdl-cell mdl-cell--1-col mdl-cell--hide-tablet mdl-cell--hide-phone'></div>
<div class='mdl-cell mdl-cell--10-col mdl-cell--12-col-tablet mdl-cell--12-col-phone'>
<button id='btn-go' class='transitive mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect'>
开始抽取
</button>
<br>
<div id='main-card' class='transitive mdl-card mdl-shadow--2dp'>
<div id='main-card-caption'>随机抽取中</div>
<div id='info-disp' class='mdl-grid'>
<div id='numbers-disp' class='mdl-grid mdl-cell mdl-cell--10-col'>
<div id='year-disp' class='transitive mdl-cell mdl-cell--4-col'>????</div>
<div id='klass-disp' class='transitive mdl-cell mdl-cell--3-col'>??</div>
<div id='num-disp' class='transitive mdl-cell mdl-cell--3-col'>??</div>
<div class='mdl-cell mdl-cell--2-col'></div>
<div id='name-disp' class='mdl-cell mdl-cell--12-col'>It must be sb.</div>
</div>
<div id='photo-disp' class='mdl-cell mdl-cell--2-col'>
</div>
</div>
<div id='card-buttons'>
<button id='btn-more' class='transitive collapse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect'>还有一个！</button>
<button id='btn-okay' class='transitive collapse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored'>到此为止。</button>
</div>
</div>
<div id='list-card' class='transitive mdl-card mdl-shadow--2dp'>
<div id='winners-caption' class='transitive'>获得奖品的是</div>
<div id='congrats' class='transitive subtitle'>祝贺你（们）！</div>
<div id='winner-list' class='transitive'>
</div>
</div>
<button id='btn-prize' class='transitive collapse mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored'>
大礼揭晓
</button>
<div id='prize-card' class='transitive mdl-card mdl-shadow--2dp'>
<div id='prize-desc' class='transitive subtitle'>礼物一份！</div>
<img src='photos/prize.png' width='100%'>
</div>
</div>
<div class='mdl-cell mdl-cell--1-col mdl-cell--hide-tablet mdl-cell--hide-phone'></div>
</div>
</main>
</div>
<script src='./main.js'></script>
</body>
</html>