Hugging Face's logo

Spaces:
randt
/
bomb-defusal
Running

App Files Community
randt commited on
Commit
e48dbbe
·
verified ·
1 Parent(s): db1c64d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +339 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bomb Defusal
3
- emoji: 🌍
4
- colorFrom: indigo
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: bomb-defusal
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,339 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>8-Bit Bomb Defusal</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
10
+
11
+ body {
12
+ font-family: 'Press Start 2P', cursive;
13
+ background-color: #1a1a2e;
14
+ overflow: hidden;
15
+ user-select: none;
16
+ }
17
+
18
+ .pixel {
19
+ image-rendering: pixelated;
20
+ image-rendering: -moz-crisp-edges;
21
+ image-rendering: crisp-edges;
22
+ }
23
+
24
+ .screen-shake {
25
+ animation: shake 0.1s infinite;
26
+ }
27
+
28
+ @keyframes shake {
29
+ 0% { transform: translate(1px, 1px); }
30
+ 10% { transform: translate(-1px, -2px); }
31
+ 20% { transform: translate(-2px, 0px); }
32
+ 30% { transform: translate(2px, 2px); }
33
+ 40% { transform: translate(1px, -1px); }
34
+ 50% { transform: translate(-1px, 2px); }
35
+ 60% { transform: translate(-2px, 1px); }
36
+ 70% { transform: translate(2px, 1px); }
37
+ 80% { transform: translate(-1px, -1px); }
38
+ 90% { transform: translate(1px, 2px); }
39
+ 100% { transform: translate(0px, 0px); }
40
+ }
41
+
42
+ .wire-cut {
43
+ stroke-dasharray: 1000;
44
+ stroke-dashoffset: 1000;
45
+ animation: dash 0.5s linear forwards;
46
+ }
47
+
48
+ @keyframes dash {
49
+ to {
50
+ stroke-dashoffset: 0;
51
+ }
52
+ }
53
+
54
+ .explosion {
55
+ position: absolute;
56
+ width: 100%;
57
+ height: 100%;
58
+ background: radial-gradient(circle, rgba(255,100,0,0.8) 0%, rgba(255,0,0,0.8) 70%, rgba(0,0,0,0.9) 100%);
59
+ z-index: 100;
60
+ opacity: 0;
61
+ pointer-events: none;
62
+ }
63
+
64
+ .success {
65
+ position: absolute;
66
+ width: 100%;
67
+ height: 100%;
68
+ background: radial-gradient(circle, rgba(100,255,100,0.6) 0%, rgba(0,200,0,0.8) 70%, rgba(0,100,0,0.9) 100%);
69
+ z-index: 100;
70
+ opacity: 0;
71
+ pointer-events: none;
72
+ }
73
+ </style>
74
+ </head>
75
+ <body class="flex items-center justify-center h-screen">
76
+ <div id="game-container" class="relative w-full max-w-md h-96 bg-gray-900 border-4 border-gray-700 rounded-lg overflow-hidden">
77
+ <!-- Title Screen -->
78
+ <div id="title-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-gray-900 z-50">
79
+ <h1 class="text-3xl text-green-400 mb-8">BOMB DEFUSAL</h1>
80
+ <div class="text-yellow-300 text-center mb-8">
81
+ <p class="mb-2">Cut the correct wire</p>
82
+ <p>before time runs out!</p>
83
+ </div>
84
+ <button id="start-btn" class="px-6 py-3 bg-red-500 text-white hover:bg-red-600 transition-all border-b-4 border-red-700 active:border-b-2 active:mt-1">
85
+ START MISSION
86
+ </button>
87
+ <div class="absolute bottom-4 text-gray-500 text-xs">
88
+ <p>Difficulty: HARD</p>
89
+ <p>Screen will shake!</p>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Game Screen -->
94
+ <div id="game-screen" class="absolute inset-0 hidden flex flex-col items-center justify-center">
95
+ <div class="relative w-full h-full">
96
+ <!-- Bomb -->
97
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
98
+ <div class="relative">
99
+ <!-- Bomb body -->
100
+ <div class="w-24 h-32 bg-gray-800 rounded-full mx-auto border-4 border-gray-700">
101
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 bg-red-600 rounded-full"></div>
102
+ <div class="absolute top-4 left-1/2 transform -translate-x-1/2 w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center">
103
+ <div class="w-12 h-12 bg-gray-800 rounded-full flex items-center justify-center">
104
+ <div id="timer" class="text-red-500 text-xl">30</div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Wires -->
110
+ <svg width="300" height="100" viewBox="0 0 300 100" class="absolute top-24 left-1/2 transform -translate-x-1/2">
111
+ <!-- Wire 1 (Red) -->
112
+ <path id="wire1" d="M50,50 L150,50" stroke="red" stroke-width="4" stroke-linecap="round" class="cursor-pointer hover:stroke-yellow-300" />
113
+ <circle cx="50" cy="50" r="8" fill="#333" />
114
+ <circle cx="150" cy="50" r="8" fill="#333" />
115
+
116
+ <!-- Wire 2 (Blue) -->
117
+ <path id="wire2" d="M50,50 L150,50" stroke="blue" stroke-width="4" stroke-linecap="round" class="cursor-pointer hover:stroke-yellow-300" />
118
+ <circle cx="50" cy="50" r="8" fill="#333" />
119
+ <circle cx="150" cy="50" r="8" fill="#333" />
120
+
121
+ <!-- Wire 3 (Green) -->
122
+ <path id="wire3" d="M50,50 L150,50" stroke="green" stroke-width="4" stroke-linecap="round" class="cursor-pointer hover:stroke-yellow-300" />
123
+ <circle cx="50" cy="50" r="8" fill="#333" />
124
+ <circle cx="150" cy="50" r="8" fill="#333" />
125
+ </svg>
126
+
127
+ <!-- Boxes -->
128
+ <div class="absolute top-32 left-1/2 transform -translate-x-1/2 flex space-x-16">
129
+ <div class="w-16 h-16 bg-gray-700 border-2 border-gray-600 flex items-center justify-center">
130
+ <div class="w-12 h-12 bg-gray-800"></div>
131
+ </div>
132
+ <div class="w-16 h-16 bg-gray-700 border-2 border-gray-600 flex items-center justify-center">
133
+ <div class="w-12 h-12 bg-gray-800"></div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Timer bar -->
140
+ <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-64 h-4 bg-gray-800 border-2 border-gray-700">
141
+ <div id="time-bar" class="h-full bg-red-500"></div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Explosion effect -->
147
+ <div id="explosion" class="explosion"></div>
148
+
149
+ <!-- Success effect -->
150
+ <div id="success" class="success"></div>
151
+
152
+ <!-- Game Over Screen -->
153
+ <div id="game-over" class="absolute inset-0 hidden flex flex-col items-center justify-center bg-gray-900 bg-opacity-90 z-50">
154
+ <h1 class="text-3xl text-red-500 mb-4">BOOM!</h1>
155
+ <p class="text-white mb-8">Mission failed</p>
156
+ <button id="retry-btn" class="px-6 py-3 bg-gray-700 text-white hover:bg-gray-600 transition-all border-b-4 border-gray-800 active:border-b-2 active:mt-1">
157
+ TRY AGAIN
158
+ </button>
159
+ </div>
160
+
161
+ <!-- Success Screen -->
162
+ <div id="success-screen" class="absolute inset-0 hidden flex flex-col items-center justify-center bg-gray-900 bg-opacity-90 z-50">
163
+ <h1 class="text-3xl text-green-400 mb-4">DEFUSED!</h1>
164
+ <p class="text-white mb-8">Mission accomplished</p>
165
+ <button id="next-btn" class="px-6 py-3 bg-green-600 text-white hover:bg-green-500 transition-all border-b-4 border-green-700 active:border-b-2 active:mt-1">
166
+ NEXT BOMB
167
+ </button>
168
+ </div>
169
+ </div>
170
+
171
+ <audio id="tick-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-clock-countdown-bleeps-916.mp3" preload="auto"></audio>
172
+ <audio id="cut-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-retro-arcade-game-over-470.mp3" preload="auto"></audio>
173
+ <audio id="explosion-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-bomb-explosion-1700.mp3" preload="auto"></audio>
174
+ <audio id="success-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3" preload="auto"></audio>
175
+
176
+ <script>
177
+ // Game state
178
+ let gameActive = false;
179
+ let timeLeft = 30;
180
+ let timerInterval;
181
+ let correctWire;
182
+ let screenShakeInterval;
183
+
184
+ // DOM elements
185
+ const titleScreen = document.getElementById('title-screen');
186
+ const gameScreen = document.getElementById('game-screen');
187
+ const gameOverScreen = document.getElementById('game-over');
188
+ const successScreen = document.getElementById('success-screen');
189
+ const startBtn = document.getElementById('start-btn');
190
+ const retryBtn = document.getElementById('retry-btn');
191
+ const nextBtn = document.getElementById('next-btn');
192
+ const timerDisplay = document.getElementById('timer');
193
+ const timeBar = document.getElementById('time-bar');
194
+ const wire1 = document.getElementById('wire1');
195
+ const wire2 = document.getElementById('wire2');
196
+ const wire3 = document.getElementById('wire3');
197
+ const explosion = document.getElementById('explosion');
198
+ const successEffect = document.getElementById('success');
199
+ const gameContainer = document.getElementById('game-container');
200
+ const tickSound = document.getElementById('tick-sound');
201
+ const cutSound = document.getElementById('cut-sound');
202
+ const explosionSound = document.getElementById('explosion-sound');
203
+ const successSound = document.getElementById('success-sound');
204
+
205
+ // Start game
206
+ startBtn.addEventListener('click', startGame);
207
+ retryBtn.addEventListener('click', startGame);
208
+ nextBtn.addEventListener('click', startGame);
209
+
210
+ function startGame() {
211
+ // Reset game state
212
+ gameActive = true;
213
+ timeLeft = 30;
214
+ correctWire = Math.floor(Math.random() * 3) + 1; // 1, 2, or 3
215
+
216
+ // Show game screen
217
+ titleScreen.classList.add('hidden');
218
+ gameOverScreen.classList.add('hidden');
219
+ successScreen.classList.add('hidden');
220
+ gameScreen.classList.remove('hidden');
221
+
222
+ // Reset wires
223
+ wire1.classList.remove('wire-cut');
224
+ wire2.classList.remove('wire-cut');
225
+ wire3.classList.remove('wire-cut');
226
+ wire1.style.display = '';
227
+ wire2.style.display = '';
228
+ wire3.style.display = '';
229
+
230
+ // Reset effects
231
+ explosion.style.opacity = '0';
232
+ successEffect.style.opacity = '0';
233
+
234
+ // Start timer
235
+ clearInterval(timerInterval);
236
+ timerInterval = setInterval(updateTimer, 1000);
237
+
238
+ // Start screen shake
239
+ clearInterval(screenShakeInterval);
240
+ screenShakeInterval = setInterval(toggleShake, 100);
241
+
242
+ // Update display
243
+ timerDisplay.textContent = timeLeft;
244
+ timeBar.style.width = '100%';
245
+ }
246
+
247
+ function toggleShake() {
248
+ if (gameActive) {
249
+ gameContainer.classList.toggle('screen-shake');
250
+ }
251
+ }
252
+
253
+ function updateTimer() {
254
+ timeLeft--;
255
+ timerDisplay.textContent = timeLeft;
256
+
257
+ // Update timer bar
258
+ const percent = (timeLeft / 30) * 100;
259
+ timeBar.style.width = `${percent}%`;
260
+
261
+ // Play tick sound when time is running out
262
+ if (timeLeft <= 5 && timeLeft > 0) {
263
+ tickSound.currentTime = 0;
264
+ tickSound.play();
265
+ }
266
+
267
+ // Change color when time is critical
268
+ if (timeLeft <= 10) {
269
+ timeBar.classList.remove('bg-red-500');
270
+ timeBar.classList.add('bg-red-700');
271
+ }
272
+
273
+ if (timeLeft <= 0) {
274
+ gameOver();
275
+ }
276
+ }
277
+
278
+ // Wire click handlers
279
+ wire1.addEventListener('click', () => handleWireClick(1));
280
+ wire2.addEventListener('click', () => handleWireClick(2));
281
+ wire3.addEventListener('click', () => handleWireClick(3));
282
+
283
+ function handleWireClick(wireNumber) {
284
+ if (!gameActive) return;
285
+
286
+ // Play cut sound
287
+ cutSound.currentTime = 0;
288
+ cutSound.play();
289
+
290
+ // Animate wire cut
291
+ const wire = document.getElementById(`wire${wireNumber}`);
292
+ wire.classList.add('wire-cut');
293
+
294
+ // Check if correct wire
295
+ if (wireNumber === correctWire) {
296
+ defuseSuccess();
297
+ } else {
298
+ gameOver();
299
+ }
300
+
301
+ // Disable further clicks
302
+ gameActive = false;
303
+ clearInterval(timerInterval);
304
+ clearInterval(screenShakeInterval);
305
+ gameContainer.classList.remove('screen-shake');
306
+ }
307
+
308
+ function defuseSuccess() {
309
+ // Show success effect
310
+ successEffect.style.opacity = '1';
311
+
312
+ // Play success sound
313
+ successSound.currentTime = 0;
314
+ successSound.play();
315
+
316
+ // Show success screen after delay
317
+ setTimeout(() => {
318
+ gameScreen.classList.add('hidden');
319
+ successScreen.classList.remove('hidden');
320
+ }, 1500);
321
+ }
322
+
323
+ function gameOver() {
324
+ // Show explosion effect
325
+ explosion.style.opacity = '1';
326
+
327
+ // Play explosion sound
328
+ explosionSound.currentTime = 0;
329
+ explosionSound.play();
330
+
331
+ // Show game over screen after delay
332
+ setTimeout(() => {
333
+ gameScreen.classList.add('hidden');
334
+ gameOverScreen.classList.remove('hidden');
335
+ }, 1500);
336
+ }
337
+ </script>
338
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=randt/bomb-defusal" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
339
+ </html>