Hugging Face's logo

Spaces:
ApprikatAI
/
anycoder-355b88f2
Running

App Files Community
ApprikatAI commited on
Commit
8253976
·
verified ·
1 Parent(s): 15d784f

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +426 -19
index.html CHANGED
@@ -1,19 +1,426 @@
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="es">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Quiz: ¿Cuál es la capital de España?</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --primary-color: #2563eb;
17
+ --secondary-color: #1e40af;
18
+ --correct-color: #10b981;
19
+ --incorrect-color: #ef4444;
20
+ --background-color: #f8fafc;
21
+ --card-background: #ffffff;
22
+ --text-color: #1e293b;
23
+ --text-secondary: #64748b;
24
+ --border-color: #e2e8f0;
25
+ --shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
26
+ --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08);
27
+ }
28
+
29
+ body {
30
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
31
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
32
+ min-height: 100vh;
33
+ display: flex;
34
+ flex-direction: column;
35
+ align-items: center;
36
+ padding: 20px;
37
+ color: var(--text-color);
38
+ }
39
+
40
+ .header {
41
+ width: 100%;
42
+ max-width: 800px;
43
+ display: flex;
44
+ justify-content: space-between;
45
+ align-items: center;
46
+ margin-bottom: 30px;
47
+ padding: 15px 20px;
48
+ background: rgba(255, 255, 255, 0.1);
49
+ backdrop-filter: blur(10px);
50
+ border-radius: 15px;
51
+ border: 1px solid rgba(255, 255, 255, 0.2);
52
+ }
53
+
54
+ .logo {
55
+ font-size: 1.2rem;
56
+ font-weight: bold;
57
+ color: white;
58
+ text-decoration: none;
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 8px;
62
+ }
63
+
64
+ .logo i {
65
+ font-size: 1.4rem;
66
+ }
67
+
68
+ .quiz-container {
69
+ width: 100%;
70
+ max-width: 600px;
71
+ background: var(--card-background);
72
+ border-radius: 20px;
73
+ box-shadow: var(--shadow-lg);
74
+ overflow: hidden;
75
+ animation: slideIn 0.5s ease-out;
76
+ }
77
+
78
+ @keyframes slideIn {
79
+ from {
80
+ opacity: 0;
81
+ transform: translateY(30px);
82
+ }
83
+ to {
84
+ opacity: 1;
85
+ transform: translateY(0);
86
+ }
87
+ }
88
+
89
+ .quiz-header {
90
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
91
+ color: white;
92
+ padding: 25px;
93
+ text-align: center;
94
+ }
95
+
96
+ .quiz-title {
97
+ font-size: 1.8rem;
98
+ margin-bottom: 10px;
99
+ font-weight: 600;
100
+ }
101
+
102
+ .quiz-subtitle {
103
+ font-size: 1rem;
104
+ opacity: 0.9;
105
+ }
106
+
107
+ .quiz-body {
108
+ padding: 30px;
109
+ }
110
+
111
+ .question {
112
+ font-size: 1.4rem;
113
+ margin-bottom: 30px;
114
+ line-height: 1.5;
115
+ color: var(--text-color);
116
+ text-align: center;
117
+ font-weight: 500;
118
+ }
119
+
120
+ .question-icon {
121
+ font-size: 3rem;
122
+ margin-bottom: 20px;
123
+ color: var(--primary-color);
124
+ opacity: 0.8;
125
+ }
126
+
127
+ .answers {
128
+ display: grid;
129
+ gap: 15px;
130
+ }
131
+
132
+ .answer-option {
133
+ padding: 18px 25px;
134
+ background: var(--background-color);
135
+ border: 2px solid var(--border-color);
136
+ border-radius: 12px;
137
+ cursor: pointer;
138
+ transition: all 0.3s ease;
139
+ font-size: 1.1rem;
140
+ font-weight: 500;
141
+ display: flex;
142
+ align-items: center;
143
+ gap: 15px;
144
+ }
145
+
146
+ .answer-option:hover {
147
+ background: #f1f5f9;
148
+ border-color: var(--primary-color);
149
+ transform: translateY(-2px);
150
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
151
+ }
152
+
153
+ .answer-option.correct {
154
+ background: var(--correct-color);
155
+ color: white;
156
+ border-color: var(--correct-color);
157
+ animation: correctPulse 0.5s ease;
158
+ }
159
+
160
+ .answer-option.incorrect {
161
+ background: var(--incorrect-color);
162
+ color: white;
163
+ border-color: var(--incorrect-color);
164
+ animation: shake 0.5s ease;
165
+ }
166
+
167
+ @keyframes correctPulse {
168
+ 0%, 100% { transform: scale(1); }
169
+ 50% { transform: scale(1.05); }
170
+ }
171
+
172
+ @keyframes shake {
173
+ 0%, 100% { transform: translateX(0); }
174
+ 25% { transform: translateX(-10px); }
175
+ 75% { transform: translateX(10px); }
176
+ }
177
+
178
+ .answer-letter {
179
+ width: 36px;
180
+ height: 36px;
181
+ background: var(--primary-color);
182
+ color: white;
183
+ border-radius: 50%;
184
+ display: flex;
185
+ align-items: center;
186
+ justify-content: center;
187
+ font-weight: bold;
188
+ font-size: 1.1rem;
189
+ }
190
+
191
+ .answer-option.correct .answer-letter {
192
+ background: var(--correct-color);
193
+ }
194
+
195
+ .answer-option.incorrect .answer-letter {
196
+ background: var(--incorrect-color);
197
+ }
198
+
199
+ .feedback {
200
+ margin-top: 30px;
201
+ padding: 20px;
202
+ border-radius: 12px;
203
+ text-align: center;
204
+ font-size: 1.1rem;
205
+ font-weight: 500;
206
+ display: none;
207
+ }
208
+
209
+ .feedback.show {
210
+ display: block;
211
+ animation: fadeIn 0.5s ease;
212
+ }
213
+
214
+ .feedback.correct {
215
+ background: rgba(16, 185, 129, 0.1);
216
+ color: var(--correct-color);
217
+ border: 1px solid var(--correct-color);
218
+ }
219
+
220
+ .feedback.incorrect {
221
+ background: rgba(239, 68, 68, 0.1);
222
+ color: var(--incorrect-color);
223
+ border: 1px solid var(--incorrect-color);
224
+ }
225
+
226
+ @keyframes fadeIn {
227
+ from { opacity: 0; }
228
+ to { opacity: 1; }
229
+ }
230
+
231
+ .score {
232
+ margin-top: 25px;
233
+ text-align: center;
234
+ font-size: 1.1rem;
235
+ color: var(--text-secondary);
236
+ }
237
+
238
+ .score-value {
239
+ font-size: 1.5rem;
240
+ font-weight: bold;
241
+ color: var(--primary-color);
242
+ }
243
+
244
+ .restart-btn {
245
+ margin-top: 25px;
246
+ padding: 12px 30px;
247
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
248
+ color: white;
249
+ border: none;
250
+ border-radius: 10px;
251
+ font-size: 1.1rem;
252
+ font-weight: 500;
253
+ cursor: pointer;
254
+ transition: all 0.3s ease;
255
+ display: none;
256
+ }
257
+
258
+ .restart-btn.show {
259
+ display: inline-block;
260
+ }
261
+
262
+ .restart-btn:hover {
263
+ transform: translateY(-2px);
264
+ box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
265
+ }
266
+
267
+ .progress-container {
268
+ width: 100%;
269
+ height: 6px;
270
+ background: var(--border-color);
271
+ border-radius: 3px;
272
+ margin: 20px 0;
273
+ overflow: hidden;
274
+ }
275
+
276
+ .progress-bar {
277
+ height: 100%;
278
+ background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
279
+ border-radius: 3px;
280
+ width: 0%;
281
+ transition: width 0.5s ease;
282
+ }
283
+
284
+ @media (max-width: 600px) {
285
+ .quiz-container {
286
+ margin: 0 auto;
287
+ }
288
+
289
+ .question {
290
+ font-size: 1.2rem;
291
+ }
292
+
293
+ .answer-option {
294
+ padding: 15px 20px;
295
+ font-size: 1rem;
296
+ }
297
+
298
+ .quiz-header {
299
+ padding: 20px;
300
+ }
301
+
302
+ .quiz-title {
303
+ font-size: 1.4rem;
304
+ }
305
+ }
306
+ </style>
307
+ </head>
308
+ <body>
309
+ <div class="header">
310
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="logo" target="_blank">
311
+ <i class="fas fa-code"></i>
312
+ Built with anycoder
313
+ </a>
314
+ </div>
315
+
316
+ <div class="quiz-container">
317
+ <div class="quiz-header">
318
+ <div class="quiz-title">Quiz de Geografía</div>
319
+ <div class="quiz-subtitle">Prueba tus conocimientos</div>
320
+ </div>
321
+
322
+ <div class="quiz-body">
323
+ <div class="progress-container">
324
+ <div class="progress-bar" id="progressBar"></div>
325
+ </div>
326
+
327
+ <div class="question">
328
+ <i class="fas fa-globe question-icon"></i>
329
+ <div>¿Cuál es la capital de España?</div>
330
+ </div>
331
+
332
+ <div class="answers" id="answers">
333
+ <div class="answer-option" data-answer="incorrect">
334
+ <div class="answer-letter">A</div>
335
+ <div>Barcelona</div>
336
+ </div>
337
+ <div class="answer-option" data-answer="correct">
338
+ <div class="answer-letter">B</div>
339
+ <div>Madrid</div>
340
+ </div>
341
+ <div class="answer-option" data-answer="incorrect">
342
+ <div class="answer-letter">C</div>
343
+ <div>Sevilla</div>
344
+ </div>
345
+ <div class="answer-option" data-answer="incorrect">
346
+ <div class="answer-letter">D</div>
347
+ <div>Valencia</div>
348
+ </div>
349
+ </div>
350
+
351
+ <div class="feedback" id="feedback"></div>
352
+
353
+ <div class="score">
354
+ Puntuación: <span class="score-value" id="scoreValue">0</span>
355
+ </div>
356
+
357
+ <button class="restart-btn" id="restartBtn">Reiniciar Quiz</button>
358
+ </div>
359
+ </div>
360
+
361
+ <script>
362
+ document.addEventListener('DOMContentLoaded', function() {
363
+ const answers = document.querySelectorAll('.answer-option');
364
+ const feedback = document.getElementById('feedback');
365
+ const scoreValue = document.getElementById('scoreValue');
366
+ const restartBtn = document.getElementById('restartBtn');
367
+ const progressBar = document.getElementById('progressBar');
368
+
369
+ let score = 0;
370
+ let answered = false;
371
+ let currentProgress = 0;
372
+
373
+ answers.forEach(answer => {
374
+ answer.addEventListener('click', function() {
375
+ if (answered) return;
376
+
377
+ answered = true;
378
+ const isCorrect = this.dataset.answer === 'correct';
379
+
380
+ // Add visual feedback
381
+ answers.forEach(a => {
382
+ if (a.dataset.answer === 'correct') {
383
+ a.classList.add('correct');
384
+ } else if (a.dataset.answer === 'incorrect' && !isCorrect) {
385
+ a.classList.add('incorrect');
386
+ }
387
+ });
388
+
389
+ // Show feedback
390
+ feedback.classList.add('show');
391
+ if (isCorrect) {
392
+ feedback.classList.add('correct');
393
+ feedback.classList.remove('incorrect');
394
+ feedback.innerHTML = '<i class="fas fa-check-circle"></i> ¡Correcto! Madrid es la capital de España.';
395
+ score++;
396
+ scoreValue.textContent = score;
397
+ currentProgress = 100;
398
+ progressBar.style.width = '100%';
399
+ } else {
400
+ feedback.classList.add('incorrect');
401
+ feedback.classList.remove('correct');
402
+ feedback.innerHTML = '<i class="fas fa-times-circle"></i> Incorrecto. La capital de España es Madrid.';
403
+ }
404
+
405
+ // Show restart button
406
+ restartBtn.classList.add('show');
407
+ });
408
+ });
409
+
410
+ restartBtn.addEventListener('click', function() {
411
+ // Reset everything
412
+ answered = false;
413
+ feedback.classList.remove('show', 'correct', 'incorrect');
414
+ answers.forEach(a => {
415
+ a.classList.remove('correct', 'incorrect');
416
+ });
417
+ score = 0;
418
+ scoreValue.textContent = score;
419
+ currentProgress = 0;
420
+ progressBar.style.width = '0%';
421
+ restartBtn.classList.remove('show');
422
+ });
423
+ });
424
+ </script>
425
+ </body>
426
+ </html>