-
Notifications
You must be signed in to change notification settings - Fork 0
/
preview.html
131 lines (126 loc) · 6.72 KB
/
preview.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
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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Homeworlds</title>
<link rel="stylesheet" href="assets/css/style.css">
<!-- <script src="assets/js/main.js"></script> -->
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<!-- <main id="elm-node"></main> -->
<div class="main">
<div class="v-left">
<div class="h-main">
<div class="space-opponent-homeworld">
<div class="homeworld__actions"></div>
<div class="homeworld__status">
<div class="planet">
<div class="binary red-yellow">
</div>
<div class="ship-row">
</div>
</div>
</div>
<div class="homeworld__stats">
OPPONENT'S HOMEWORLD
<em>Last turn:
<ul>
<li>Sacrificed <span style="color: #fdff79"><abbr title="Medium yellow">M</abbr></span> ship</li>
<li>Moved <span style="color: #ff7979"><abbr title="Medium red">M</abbr></span> ship to <span style="color: #799dff"><abbr title="Small blue">S</abbr></span> planet</li>
<li>Moved <span style="color: #ff7979"><abbr title="Large red">L</abbr></span> ship to <span style="color: #799dff"><abbr title="Small blue">S</abbr></span> planet</li>
</ul>
</em>
</div>
</div>
<div class="space-tier-1">
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
</div>
<div class="space-tier-2">
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
</div>
<div class="space-tier-3">
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1">expand box demo</div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
<div class="slot1 empty"></div>
</div>
<div class="space-player-homeworld">
<div class="homeworld__actions"></div>
<div class="homeworld__status">
<div class="planet">
<div class="ship-row">
<div class="ship large green"><div class="inner"></div></div>
<div class="ship medium yellow"><div class="inner"></div></div>
</div>
<div class="binary green-blue">
</div>
</div>
</div>
<div class="homeworld__stats">YOUR HOMEWORLD<em>Current turn</em></div>
</div>
</div>
</div>
<div class="v-right">
<div class="bank">
<div class="ship yellow small"><div class="inner"></div><div class="count">3</div></div>
<div class="ship red small"><div class="inner"></div><div class="count">3</div></div>
<div class="ship green small alert-zero-remaining"><div class="inner"></div><div class="count">0</div></div>
<div class="ship blue small"><div class="inner"></div><div class="count">3</div></div>
<div class="ship yellow medium"><div class="inner"></div><div class="count">3</div></div>
<div class="ship red medium"><div class="inner"></div><div class="count">3</div></div>
<div class="ship green medium"><div class="inner"></div><div class="count">3</div></div>
<div class="ship blue medium"><div class="inner"></div><div class="count">3</div></div>
<div class="ship yellow large"><div class="inner"></div><div class="count">3</div></div>
<div class="ship red large"><div class="inner"></div><div class="count">3</div></div>
<div class="ship green large"><div class="inner"></div><div class="count">4</div></div>
<div class="ship blue large alert-one-remaining"><div class="inner"></div><div class="count">1</div></div>
</div>
<div class="main-actions">
<div class="action yellow"><div class="action__symbol"></div><div class="action__title">Move</div></div>
<div class="action red"><div class="action__symbol"></div><div class="action__title">Attack</div></div>
<div class="action green"><div class="action__symbol"></div><div class="action__title">Construct</div></div>
<div class="action blue"><div class="action__symbol"></div><div class="action__title">Trade</div></div>
<div class="action grey sacrifice"><div class="action__symbol"></div><div class="action__title">Sacrifice</div></div>
<div class="action grey history"><div class="action__symbol"></div><div class="action__title">History</div></div>
<div class="action grey chat"><div class="action__symbol"></div><div class="action__title">Toggle chat</div></div>
<div class="action grey concede"><div class="action__symbol"></div><div class="action__title">Concede</div></div>
</div>
</div>
<div class="v-chat">
chat (to do)
</div>
</div>
</body>
</html>