-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (142 loc) · 4.88 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
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
<html>
<head>
<title>Daily Drop</title>
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<meta
property="og:image"
content="https://user-images.githubusercontent.com/1131494/156868819-573c8853-ad4b-4c30-8594-cb80e9eb1a91.jpg"
/>
<link rel="stylesheet" href="./main.css" />
<script defer="true" src="./dictionary.js"></script>
<script defer="true" src="./keyboard.js"></script>
<script defer="true" src="./logger.js"></script>
<script defer="true" src="./highscore.js"></script>
<script defer="true" src="./instructions.js"></script>
<script defer="true" src="./daily.js"></script>
<!-- favicon stuff below here -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="./favicons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./favicons/favicon-16x16.png"
/>
<link rel="manifest" href="./favicons/site.webmanifest" />
<link
rel="mask-icon"
href="./favicons/safari-pinned-tab.svg"
color="#5bbad5"
/>
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#222222" />
<!-- end of favicon stuff -->
</head>
<body>
<div id="score-wrapper">
<div id="title">
<span class="squircle-tiny">D</span>
<span class="squircle-tiny">R</span>
<span class="squircle-tiny">O</span>
<span class="squircle-tiny">P</span>
<span class="squircle-tiny">W</span>
<span class="squircle-tiny">O</span>
<span class="squircle-tiny">R</span>
<span class="squircle-tiny">D</span>
</div>
<div id="mode">DAILY PUZZLE</div>
<div id="score">0</div>
<div id="score-add">+0</div>
</div>
<div id="letter-grid"></div>
<div id="word-input-wrapper"></div>
<div id="keyboard"></div>
<div id="links">
<a id="mode-link" href="./endless.html">Endless Mode</a>
<a id="mode-link" href="./blitz.html">Blitz Mode</a>
</div>
<footer>
Drop Word made by Ethan Jurman,
<a href="https://github.com/ethanjurman/drop-word">github</a>
</footer>
<div id="instructions">
<div class="instructions-title">
<span class="squircle-icon">D</span>
<span class="squircle-icon">R</span>
<span class="squircle-icon">O</span>
<span class="squircle-icon">P</span>
<span class="spacer-icon"></span>
<span class="squircle-icon">W</span>
<span class="squircle-icon">O</span>
<span class="squircle-icon">R</span>
<span class="squircle-icon">D</span>
</div>
<div class="subtitle">Daily Puzzle</div>
<div class="instruction-paragraphs">
<p>Get the highest score on a single board!</p>
<p>
Use the <span class="word-icon">Shuffle</span> to re-arrange letters
on the board!
</p>
<p>Clear the board for a big score bonus!</p>
<p>A new puzzle is available every day!</p>
</div>
<div style="font-weight: normal">
Click <span class="mock-instruction-button"></span> in game to view this
screen again!
</div>
<div style="font-weight: normal">
Click <span class="mock-logger-button"></span> in game to open up the
score breakdown!
</div>
<div>
Click <span class="mock-close-button"></span> at the top to close these
instructions and get started!
</div>
<div class="instruction-paragraphs">
<div>
Try the
<a class="word-icon" href="./endless.html">Endless Mode</a> and
<a class="word-icon" href="./blitz.html">Blitz Mode</a> too!
</div>
</div>
<div class="instruction-paragraphs">
<div>How to play</div>
</div>
<div class="how-to-play-gifs">
<div class="how-to-play-gif-item">
Make words in multiple places, either by typing or clicking letters on
the board!
<br />
More letters drop in the Blitz and Endless Mode!
<img src="gifs/drop-word-gif-1.gif" width="100%" />
</div>
<div class="how-to-play-gif-item">
Longer words means more points!
<img src="gifs/drop-word-gif-2.gif" width="100%" />
</div>
<div class="how-to-play-gif-item">
The same word used in different paths can give a lot of points! Use it
to your advantage!
<img src="gifs/drop-word-gif-3.gif" width="100%" />
</div>
<div class="how-to-play-gif-item">
Make sure to use the shuffle to re-arrange the board letters!
<img src="gifs/drop-word-gif-4.gif" width="100%" />
</div>
</div>
</div>
</body>
</html>