This repository has been archived by the owner on Aug 7, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (128 loc) · 6.73 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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="script.js" defer></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<script src=//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.3.10/seedrandom.min.js></script>
<link rel="stylesheet" href="style.css">
<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=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Wordle ^ N</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<span id="settingsbutton" class="material-symbols-outlined corner-button">settings</span>
<span id="backbutton" class="material-symbols-outlined corner-button">arrow_back</span>
<div id="main">
<span id="title">wordle<sup>𝑛</sup></span> <br>
<span id="subtitle"></span>
<div id="start">
<p id="intro">wordle<sup>𝑛</sup> is a game similar to Wordle, Dordle, and Quordle, but you can pick the number of boards, as well as the length of the words. Simply type in your numbers, and pick your gamemode!<span id="help">?</span></p><br>
<input type="number" id="boardnum" placeholder="Number of Boards" max="100"> <br>
<select id="wordlength">
<option value="5" disabled hidden selected>Word Length (Default 5)</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select> <br>
<button id="daily" class="play" disabled>Play daily</button><!--
--><button id="practice" class="play" disabled>Play practice</button>
<br><span id="warning">
Warning: Word lengths other than 5 do not have curated dictionaries and may have unusual solutions, or lack some valid guesses.
</span>
</div>
<div id="keyboard">
<div class="row" id="row1">
<button id="Q" class="key">Q</button>
<button id="W" class="key">W</button>
<button id="E" class="key">E</button>
<button id="R" class="key">R</button>
<button id="T" class="key">T</button>
<button id="Y" class="key">Y</button>
<button id="U" class="key">U</button>
<button id="I" class="key">I</button>
<button id="O" class="key">O</button>
<button id="P" class="key">P</button>
</div>
<div class="row" id="row2">
<button id="A" class="key">A</button>
<button id="S" class="key">S</button>
<button id="D" class="key">D</button>
<button id="F" class="key">F</button>
<button id="G" class="key">G</button>
<button id="H" class="key">H</button>
<button id="J" class="key">J</button>
<button id="K" class="key">K</button>
<button id="L" class="key">L</button>
</div>
<div class="row" id="row3">
<button id="enter" class="key wide" id="return">⏎</button>
<button id="Z" class="key">Z</button>
<button id="X" class="key">X</button>
<button id="C" class="key">C</button>
<button id="V" class="key">V</button>
<button id="B" class="key">B</button>
<button id="N" class="key">N</button>
<button id="M" class="key">M</button>
<button id="backspace" class="key wide" id="backspace">⌫</button>
</div>
</div>
<div id="gamediv"></div>
<div id="spacer"></div>
<div id="win" class="popup">
<span class="material-symbols-outlined close">close</span>
<h1>Congratulations!</h1>
<span class="popup_content"></span>
</div>
<div id="lose" class="popup">
<span class="material-symbols-outlined close">close</span>
<h1>You Lost!</h1>
<span class="popup_content"></span>
</div>
<div id="settings" class="popup">
<span class="material-symbols-outlined close">close</span>
<h1>Settings</h1>
<p id="settingsp">
Empty Grid Rows:
<br>
<select class="setting" id="collapse" data-settingname="collapse" data-allowed="collapse show">
<option value="collapse">Collapse</option>
<option value="show">Show all empty rows</option>
</select>
<br>
Keyboard Position:
<br>
<select class="setting" id="keyboard_pos" data-settingname="keyboard_pos" data-allowed="left center right none">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="none">None</option>
</select>
Keyboard Letter Grey Out:
<br>
<select class="setting" id="greyout" data-settingname="greyout" data-allowed="used notinwords none">
<option value="used">Grey out letters once used</option>
<option value="notinwords">Grey out letters that aren't in any word</option>
<option value="none">Don't grey out letters</option>
</select>
Theme:
<br>
<select class="setting" id="theme" data-settingname="theme" data-allowed="chocolate forest hyperblue fairyfloss blackcurrant default">
<option value="default">Default</option>
<option value="chocolate">Chocolate</option>
<option value="forest">Forest</option>
<option value="hyperblue">Hyperblue</option>
<option value="fairyfloss">Midnight Fairy Floss</option>
<option value="blackcurrant">Blackcurrant</option>
</select>
</p>
</div>
</div>
</body>
</html>