-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
227 lines (183 loc) · 10.6 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bagels - DeepNets</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="header fixed-top">
<h1 class="head_title text-center fw-bolder text-secondary-emphasis">Mastermind: Can You Crack the Code?</h1>
</div>
<div class="desc">
<div class="rules">
<p>In the intriguing world of 'Bagels,' a deductive logic game, you embark on a captivating mission to
unravel the enigma of a secret n-digit number. Armed with your wits and deduction skills, you'll receive
invaluable hints from the game in response to your every guess, which will set you on the path to
solving the mystery.
</p>
<ol class="rulelist list-group list-group-numbered">
<li class="list-group-item"><strong>Pico</strong>: This clue is your guiding light when your guess
contains a correct digit, but it's not in the
right place. It's a subtle nudge in the right direction.
</li>
<li class="list-group-item"><strong>Fermi</strong>: The "Fermi" clue signifies an even greater
achievement –
it tells you that your guess contains a correct digit in precisely the right position. You're
getting
warmer, and you're on the right track.
</li>
<li class="list-group-item"><strong>Bagels</strong>: On the other hand, if the game offers the "Bagels"
clue, it means your guess doesn't include any
correct digits. You'll need to revise your strategy and rethink your approach.
</li>
</ol>
<p>With these valuable clues at your disposal, you're ready to embark on your mission to unlock the secret
number. However, time is of the essence, as you have a limited set of attempts. In 'Bagels,' you're
granted
a total of N tries to crack the elusive code and emerge victorious.</p>
<p>But that's not all; 'Bagels' takes your experience further by offering a diverse array of difficulty
levels
to suit players of all skill levels. Choose your desired challenge and set the stage for your adventure:
</p>
<ul class="difficultylevels list-group list-group-numbered">
<li class="list-group-item"><strong>Kid</strong>
<p>This mode is the perfect starting point, designed for beginners and novices. Here, you'll
decipher a
two-digit number, providing a gentle introduction to the world of 'Bagels.' Try to guess a
number of
<strong>2</strong> digit.
</p>
</li>
<li class="list-group-item"><strong>Easy</strong>
<p>For those seeking a balanced challenge, the "Easy" difficulty level presents you with the task of
guessing a three-digit number. It's a great option to sharpen your skills. Try to guess a number
of
<strong>3</strong> digit.
</p>
</li>
<li class="list-group-item"><strong>Normal</strong>
<p>Elevate the complexity with the "Normal" difficulty level, where you'll grapple with a four-digit
number. It offers a moderate level of challenge, striking a balance between fun and
brain-teasing.
Try to guess a number of <strong>4</strong> digit.
</p>
</li>
<li class="list-group-item"><strong>Hard</strong>
<p>The "Hard" mode takes the challenge to the next level. Here, you'll tackle a six-digit number,
testing
your deductive skills to their limits. It's the ideal choice for those who love a good puzzle.
Try to
guess a number of <strong>6</strong> digit.
</p>
</li>
<li class="list-group-item"><strong>Impossible</strong>
<p>Only for the bravest and most daring players, the "Impossible" difficulty level sets an audacious
task
before you. Can you guess a ten-digit number? It's the ultimate test, pushing the boundaries of
your
logical prowess and providing an adrenaline-pumping experience. Try to guess a number of
<strong>10</strong>
digit.
</p>
</li>
</ul>
<p>In 'Bagels,' there's a challenge for everyone, from the novice code-breaker to the seasoned puzzle
enthusiast.
No matter your skill level, you're in for an engaging and stimulating experience.
So, put on your thinking cap and get ready for an exciting adventure in 'Bagels.' Uncover the secret
numbers,
crack the code, and immerse yourself in the world of deduction and mystery. Your quest begins now – good
luck!"</p>
</div>
<!-- Game Section -->
<div class="arena shadow-lg bg-body-tertiary">
<!-- Difficulty Selection -->
<!-- Dropdown for Mobile Devices -->
<div class="mobileDropdown">
<select class="diffSelectInput custom-select bg-success text-white" id="inputGroupSelect">
<option value="kid">Kid</option>
<option value="easy" selected>Easy</option>
<option value="normal">Normal</option>
<option value="hard">Hard</option>
<option value="impossible">Impossible</option>
</select>
</div>
<div class="diffSelect">
<h3 class="diffText">Select difficulty :</h3>
<!-- Radio Buttons for big devices -->
<div class="diffSelOpts">
<div class="form-check">
<input class="diffSelectInput form-check-input" type="radio" name="flexRadioDefault" id="kid"
value="kid">
<label class="form-check-label" for="kid">
<strong class="text-success">Kid</strong>
</label>
</div>
<div class="form-check">
<input class="diffSelectInput form-check-input" type="radio" name="flexRadioDefault" id="easy"
value="easy" checked>
<label class="form-check-label" for="easy">
<strong class="text-primary">Easy</strong>
</label>
</div>
<div class="form-check">
<input class="diffSelectInput form-check-input" type="radio" name="flexRadioDefault" id="Normal"
value="normal">
<label class="form-check-label" for="Normal">
<strong class="text-warning">Normal</strong>
</label>
</div>
<div class="form-check">
<input class="diffSelectInput form-check-input" type="radio" name="flexRadioDefault" id="hard"
value="hard">
<label class="form-check-label" for="hard">
<strong class="text-danger-emphasis">Hard</strong>
</label>
</div>
<div class="form-check">
<input class="diffSelectInput form-check-input" type="radio" name="flexRadioDefault"
id="impossible" value="impossible">
<label class="form-check-label" for="impossible">
<strong class="text-danger">Impossible</strong>
</label>
</div>
</div>
</div>
<!-- User Input -->
<div class="input-group mb-3" id="inputArea">
<input type="number" class="form-control" placeholder="N digit Number" aria-label="N digit Number"
aria-describedby="submitBtn" id="numberInput">
<button class="btn btn-outline-success" type="button" id="submitBtn">Guess</button>
</div>
<!-- Game Information -->
<div class="gameinfo">
<br>
<p class="text-center">Guess the <strong><span class="len">3</span></strong> digit number.</p>
<p class="tries text-center">Tries Left: <strong><span class="ntry">10</span></strong> Prev Input:
<strong><span class="prevIn"></span></strong>
</p>
<br>
</div>
<!-- Game Output -->
<div class="btnsCnt shadow-lg p-10 mb-lg-5 bg-body-tertiary rounded-5">
<h3 class="btnText text-center">You Guess seems to be!</h3>
<div class="buttonContainer" id="buttonContainer">
<button class="btn btn-dark btnCntText">Start</button>
<button class="btn btn-dark btnCntText">Start</button>
<button class="btn btn-dark btnCntText">Start</button>
</div>
</div>
</div>
</div>
<!-- Audios Section -->
<audio id="winAudio" class="hidden" src="./Audios/you_win.mp3" preload="auto"></audio>
<audio id="lostAudio" class="hidden" src="./Audios/you_lost.mp3" preload="auto"></audio>
<audio id="enterAudio" class="hidden" src="./Audios/enter.mp3" preload="auto"></audio>
<audio id="click" class="hidden" src="./Audios/click.mp3" preload="auto"></audio>
<script src="bagles.js"></script>
</body>
</html>