Hugging Face's logo

Spaces:
openfree
/
testhtml2
Running

App Files Community
openfree commited on
Commit
c6207dc
·
verified ·
1 Parent(s): 79396ee

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +328 -19
index.html CHANGED
@@ -1,19 +1,328 @@
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>Memory Match Game</title>
7
+ <style>
8
+ :root {
9
+ --card-width: 120px;
10
+ --card-height: 150px;
11
+ --primary-color: #2c3e50;
12
+ --secondary-color: #3498db;
13
+ }
14
+
15
+ * {
16
+ box-sizing: border-box;
17
+ margin: 0;
18
+ padding: 0;
19
+ }
20
+
21
+ body {
22
+ min-height: 100vh;
23
+ background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
24
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
25
+ display: flex;
26
+ flex-direction: column;
27
+ align-items: center;
28
+ color: white;
29
+ }
30
+
31
+ .game-container {
32
+ margin-top: 2rem;
33
+ text-align: center;
34
+ }
35
+
36
+ .controls {
37
+ margin: 1rem 0;
38
+ display: flex;
39
+ gap: 1rem;
40
+ justify-content: center;
41
+ align-items: center;
42
+ }
43
+
44
+ .btn {
45
+ padding: 0.5rem 1rem;
46
+ border: none;
47
+ border-radius: 5px;
48
+ background: rgba(255, 255, 255, 0.2);
49
+ color: white;
50
+ cursor: pointer;
51
+ transition: all 0.3s ease;
52
+ }
53
+
54
+ .btn:hover {
55
+ background: rgba(255, 255, 255, 0.3);
56
+ }
57
+
58
+ .stats {
59
+ display: flex;
60
+ gap: 2rem;
61
+ margin: 1rem;
62
+ font-size: 1.2rem;
63
+ }
64
+
65
+ .board {
66
+ display: grid;
67
+ gap: 10px;
68
+ padding: 20px;
69
+ perspective: 1000px;
70
+ }
71
+
72
+ .card {
73
+ width: var(--card-width);
74
+ height: var(--card-height);
75
+ position: relative;
76
+ transform-style: preserve-3d;
77
+ transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
78
+ cursor: pointer;
79
+ }
80
+
81
+ .card.flipped {
82
+ transform: rotateY(180deg);
83
+ }
84
+
85
+ .card.matched {
86
+ transform: rotateY(180deg) scale(0.95);
87
+ opacity: 0.8;
88
+ }
89
+
90
+ .card-face {
91
+ position: absolute;
92
+ width: 100%;
93
+ height: 100%;
94
+ backface-visibility: hidden;
95
+ border-radius: 10px;
96
+ display: flex;
97
+ align-items: center;
98
+ justify-content: center;
99
+ font-size: 2rem;
100
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
101
+ }
102
+
103
+ .card-front {
104
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
105
+ transform: rotateY(180deg);
106
+ }
107
+
108
+ .card-back {
109
+ background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
110
+ }
111
+
112
+ .modal {
113
+ position: fixed;
114
+ top: 50%;
115
+ left: 50%;
116
+ transform: translate(-50%, -50%);
117
+ background: rgba(0, 0, 0, 0.9);
118
+ padding: 2rem;
119
+ border-radius: 10px;
120
+ text-align: center;
121
+ display: none;
122
+ }
123
+
124
+ @keyframes match {
125
+ 0%, 100% { transform: rotateY(180deg) scale(1); }
126
+ 50% { transform: rotateY(180deg) scale(1.1); }
127
+ }
128
+
129
+ @keyframes mismatch {
130
+ 0%, 100% { transform: rotateY(180deg); }
131
+ 20%, 40%, 60%, 80% { transform: rotateY(180deg) translateX(-10px); }
132
+ 30%, 50%, 70%, 90% { transform: rotateY(180deg) translateX(10px); }
133
+ }
134
+ </style>
135
+ </head>
136
+ <body>
137
+ <div class="game-container">
138
+ <h1>Memory Match</h1>
139
+ <div class="controls">
140
+ <select id="difficulty" class="btn">
141
+ <option value="8">Easy (4x4)</option>
142
+ <option value="18">Medium (6x6)</option>
143
+ <option value="32">Hard (8x8)</option>
144
+ </select>
145
+ <button class="btn" id="start">New Game</button>
146
+ </div>
147
+ <div class="stats">
148
+ <div>Moves: <span id="moves">0</span></div>
149
+ <div>Time: <span id="timer">0:00</span></div>
150
+ <div>Score: <span id="score">0</span></div>
151
+ </div>
152
+ <div class="board" id="board"></div>
153
+ </div>
154
+ <div class="modal" id="win-modal">
155
+ <h2>Congratulations!</h2>
156
+ <p>You completed the game in <span id="final-time"></span></p>
157
+ <p>Final Score: <span id="final-score"></span></p>
158
+ <button class="btn" onclick="startGame()">Play Again</button>
159
+ </div>
160
+
161
+ <script>
162
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
163
+ let gameState = {
164
+ flippedCards: [],
165
+ matches: 0,
166
+ moves: 0,
167
+ score: 0,
168
+ timer: 0,
169
+ gameStarted: false,
170
+ timerInterval: null
171
+ };
172
+
173
+ const emojis = ['🎮', '🎲', '🎯', '🎨', '🎭', '🎪', '🎫', '🎬',
174
+ '🎤', '🎧', '🎷', '🎸', '🎹', '🎺', '🎻', '🥁',
175
+ '⚽️', '🏀', '🏈', '⚾️', '🎾', '🏐', '🏉', '🎱',
176
+ '🏓', '🏸', '🥊', '🥋', '🎣', '⛳️', '🏹', '🎽'];
177
+
178
+ function createAudioBuffer(frequency, duration) {
179
+ const sampleRate = audioContext.sampleRate;
180
+ const buffer = audioContext.createBuffer(1, duration * sampleRate, sampleRate);
181
+ const data = buffer.getChannelData(0);
182
+
183
+ for (let i = 0; i < buffer.length; i++) {
184
+ data[i] = Math.sin(2 * Math.PI * frequency * i / sampleRate) *
185
+ Math.exp(-5 * i / buffer.length);
186
+ }
187
+
188
+ return buffer;
189
+ }
190
+
191
+ const matchSound = createAudioBuffer(440, 0.1);
192
+ const mismatchSound = createAudioBuffer(220, 0.1);
193
+
194
+ function playSound(buffer) {
195
+ const source = audioContext.createBufferSource();
196
+ source.buffer = buffer;
197
+ source.connect(audioContext.destination);
198
+ source.start();
199
+ }
200
+
201
+ function createBoard() {
202
+ const board = document.getElementById('board');
203
+ const difficulty = parseInt(document.getElementById('difficulty').value);
204
+ const pairs = difficulty;
205
+ const size = Math.sqrt(pairs * 2);
206
+
207
+ board.style.gridTemplateColumns = `repeat(${size}, var(--card-width))`;
208
+ board.innerHTML = '';
209
+
210
+ const selectedEmojis = emojis.slice(0, pairs);
211
+ const cards = [...selectedEmojis, ...selectedEmojis]
212
+ .sort(() => Math.random() - 0.5);
213
+
214
+ cards.forEach((emoji, index) => {
215
+ const card = document.createElement('div');
216
+ card.className = 'card';
217
+ card.dataset.value = emoji;
218
+ card.dataset.index = index;
219
+ card.innerHTML = `
220
+ <div class="card-face card-front">${emoji}</div>
221
+ <div class="card-face card-back">?</div>
222
+ `;
223
+ card.addEventListener('click', flipCard);
224
+ board.appendChild(card);
225
+ });
226
+ }
227
+
228
+ function flipCard() {
229
+ if (!gameState.gameStarted) {
230
+ startTimer();
231
+ gameState.gameStarted = true;
232
+ }
233
+
234
+ const card = this;
235
+ if (card.classList.contains('flipped') ||
236
+ gameState.flippedCards.length >= 2) return;
237
+
238
+ card.classList.add('flipped');
239
+ gameState.flippedCards.push(card);
240
+
241
+ if (gameState.flippedCards.length === 2) {
242
+ gameState.moves++;
243
+ document.getElementById('moves').textContent = gameState.moves;
244
+ checkMatch();
245
+ }
246
+ }
247
+
248
+ function checkMatch() {
249
+ const [card1, card2] = gameState.flippedCards;
250
+ const match = card1.dataset.value === card2.dataset.value;
251
+
252
+ if (match) {
253
+ playSound(matchSound);
254
+ card1.classList.add('matched');
255
+ card2.classList.add('matched');
256
+ gameState.matches++;
257
+ gameState.score += 100;
258
+ card1.style.animation = card2.style.animation = 'match 0.5s ease';
259
+
260
+ if (gameState.matches === parseInt(document.getElementById('difficulty').value)) {
261
+ endGame();
262
+ }
263
+ } else {
264
+ playSound(mismatchSound);
265
+ card1.style.animation = card2.style.animation = 'mismatch 0.5s ease';
266
+ gameState.score = Math.max(0, gameState.score - 20);
267
+
268
+ setTimeout(() => {
269
+ card1.classList.remove('flipped');
270
+ card2.classList.remove('flipped');
271
+ }, 1000);
272
+ }
273
+
274
+ setTimeout(() => {
275
+ card1.style.animation = card2.style.animation = '';
276
+ }, 500);
277
+
278
+ document.getElementById('score').textContent = gameState.score;
279
+ gameState.flippedCards = [];
280
+ }
281
+
282
+ function startTimer() {
283
+ gameState.timerInterval = setInterval(() => {
284
+ gameState.timer++;
285
+ const minutes = Math.floor(gameState.timer / 60);
286
+ const seconds = gameState.timer % 60;
287
+ document.getElementById('timer').textContent =
288
+ `${minutes}:${seconds.toString().padStart(2, '0')}`;
289
+ }, 1000);
290
+ }
291
+
292
+ function endGame() {
293
+ clearInterval(gameState.timerInterval);
294
+ const modal = document.getElementById('win-modal');
295
+ document.getElementById('final-time').textContent =
296
+ document.getElementById('timer').textContent;
297
+ document.getElementById('final-score').textContent = gameState.score;
298
+ modal.style.display = 'block';
299
+ }
300
+
301
+ function startGame() {
302
+ gameState = {
303
+ flippedCards: [],
304
+ matches: 0,
305
+ moves: 0,
306
+ score: 0,
307
+ timer: 0,
308
+ gameStarted: false,
309
+ timerInterval: null
310
+ };
311
+
312
+ document.getElementById('moves').textContent = '0';
313
+ document.getElementById('timer').textContent = '0:00';
314
+ document.getElementById('score').textContent = '0';
315
+ document.getElementById('win-modal').style.display = 'none';
316
+
317
+ createBoard();
318
+ clearInterval(gameState.timerInterval);
319
+ }
320
+
321
+ document.getElementById('start').addEventListener('click', startGame);
322
+ document.getElementById('difficulty').addEventListener('change', startGame);
323
+
324
+ // Initial game setup
325
+ startGame();
326
+ </script>
327
+ </body>
328
+ </html>