Hugging Face's logo

Spaces:
bandenamaj
/
anycoder-56f48743
Running

App Files Community
bandenamaj commited on
Commit
d635119
·
verified ·
1 Parent(s): 340cfa4

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +527 -19
index.html CHANGED
@@ -1,19 +1,527 @@
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>Hello | Modern Interface</title>
7
+
8
+ <!-- Import Google Fonts (Inter for UI, Poppins for Headings) -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Poppins:wght@600;800&display=swap" rel="stylesheet">
12
+
13
+ <!-- Import FontAwesome for Icons -->
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
15
+
16
+ <style>
17
+ /* --- CSS VARIABLES & RESET --- */
18
+ :root {
19
+ --primary-color: #6366f1;
20
+ --primary-hover: #4f46e5;
21
+ --secondary-color: #ec4899;
22
+ --text-main: #1f2937;
23
+ --text-muted: #6b7280;
24
+ --bg-color: #f3f4f6;
25
+ --card-bg: #ffffff;
26
+ --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
27
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
28
+ }
29
+
30
+ /* Dark Mode Variables */
31
+ [data-theme="dark"] {
32
+ --text-main: #f9fafb;
33
+ --text-muted: #9ca3af;
34
+ --bg-color: #111827;
35
+ --card-bg: #1f2937;
36
+ --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
37
+ }
38
+
39
+ * {
40
+ box-sizing: border-box;
41
+ margin: 0;
42
+ padding: 0;
43
+ }
44
+
45
+ body {
46
+ font-family: 'Inter', sans-serif;
47
+ background-color: var(--bg-color);
48
+ color: var(--text-main);
49
+ height: 100vh;
50
+ display: flex;
51
+ flex-direction: column;
52
+ overflow-x: hidden;
53
+ transition: background-color 0.5s ease;
54
+ }
55
+
56
+ /* --- HEADER & NAVIGATION --- */
57
+ header {
58
+ width: 100%;
59
+ padding: 1.5rem 2rem;
60
+ display: flex;
61
+ justify-content: space-between;
62
+ align-items: center;
63
+ z-index: 100;
64
+ position: fixed;
65
+ top: 0;
66
+ backdrop-filter: blur(10px);
67
+ background-color: rgba(243, 244, 246, 0.8); /* Light bg with blur */
68
+ border-bottom: 1px solid rgba(0,0,0,0.05);
69
+ }
70
+
71
+ [data-theme="dark"] header {
72
+ background-color: rgba(17, 24, 39, 0.8);
73
+ border-bottom: 1px solid rgba(255,255,255,0.05);
74
+ }
75
+
76
+ .logo {
77
+ font-family: 'Poppins', sans-serif;
78
+ font-weight: 800;
79
+ font-size: 1.5rem;
80
+ color: var(--primary-color);
81
+ text-decoration: none;
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 10px;
85
+ letter-spacing: -0.5px;
86
+ }
87
+
88
+ .logo i {
89
+ color: var(--secondary-color);
90
+ }
91
+
92
+ .theme-toggle {
93
+ background: none;
94
+ border: none;
95
+ cursor: pointer;
96
+ color: var(--text-main);
97
+ font-size: 1.5rem;
98
+ padding: 0.5rem;
99
+ border-radius: 50%;
100
+ transition: var(--transition);
101
+ display: flex;
102
+ align-items: center;
103
+ justify-content: center;
104
+ }
105
+
106
+ .theme-toggle:hover {
107
+ background-color: rgba(0,0,0,0.1);
108
+ }
109
+
110
+ [data-theme="dark"] .theme-toggle:hover {
111
+ background-color: rgba(255,255,255,0.1);
112
+ }
113
+
114
+ /* --- MAIN LAYOUT --- */
115
+ main {
116
+ flex: 1;
117
+ display: flex;
118
+ justify-content: center;
119
+ align-items: center;
120
+ padding: 8rem 2rem 2rem 2rem;
121
+ position: relative;
122
+ }
123
+
124
+ /* Animated Background Elements */
125
+ .bg-blobs {
126
+ position: absolute;
127
+ top: 0;
128
+ left: 0;
129
+ width: 100%;
130
+ height: 100%;
131
+ z-index: -1;
132
+ overflow: hidden;
133
+ }
134
+
135
+ .blob {
136
+ position: absolute;
137
+ border-radius: 50%;
138
+ filter: blur(80px);
139
+ opacity: 0.6;
140
+ animation: float 10s infinite alternate;
141
+ }
142
+
143
+ .blob-1 {
144
+ top: -10%;
145
+ left: -10%;
146
+ width: 50vw;
147
+ height: 50vw;
148
+ background: var(--primary-color);
149
+ animation-delay: 0s;
150
+ }
151
+
152
+ .blob-2 {
153
+ bottom: -10%;
154
+ right: -10%;
155
+ width: 40vw;
156
+ height: 40vw;
157
+ background: var(--secondary-color);
158
+ animation-delay: -5s;
159
+ }
160
+
161
+ @keyframes float {
162
+ 0% { transform: translate(0, 0) scale(1); }
163
+ 100% { transform: translate(50px, 50px) scale(1.2); }
164
+ }
165
+
166
+ /* --- THE CARD --- */
167
+ .hello-card {
168
+ background-color: var(--card-bg);
169
+ padding: 3rem;
170
+ border-radius: 24px;
171
+ box-shadow: var(--shadow);
172
+ text-align: center;
173
+ max-width: 500px;
174
+ width: 100%;
175
+ transform: translateY(0);
176
+ transition: var(--transition);
177
+ animation: fadeInUp 0.8s ease-out;
178
+ border: 1px solid rgba(0,0,0,0.05);
179
+ }
180
+
181
+ [data-theme="dark"] .hello-card {
182
+ border: 1px solid rgba(255,255,255,0.05);
183
+ }
184
+
185
+ .hello-card:hover {
186
+ transform: translateY(-5px);
187
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
188
+ }
189
+
190
+ .avatar-container {
191
+ margin-bottom: 2rem;
192
+ }
193
+
194
+ .avatar {
195
+ width: 100px;
196
+ height: 100px;
197
+ border-radius: 50%;
198
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
199
+ padding: 5px;
200
+ margin: 0 auto 1rem auto;
201
+ box-shadow: 0 0 0 4px rgba(255,255,255,0.1);
202
+ }
203
+
204
+ [data-theme="dark"] .avatar {
205
+ box-shadow: 0 0 0 4px rgba(0,0,0,0.2);
206
+ }
207
+
208
+ .avatar-inner {
209
+ width: 100%;
210
+ height: 100%;
211
+ border-radius: 50%;
212
+ background-color: var(--card-bg);
213
+ display: flex;
214
+ justify-content: center;
215
+ align-items: center;
216
+ font-size: 3rem;
217
+ color: var(--primary-color);
218
+ }
219
+
220
+ h1 {
221
+ font-family: 'Poppins', sans-serif;
222
+ font-size: 3rem;
223
+ font-weight: 800;
224
+ margin-bottom: 0.5rem;
225
+ background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
226
+ -webkit-background-clip: text;
227
+ -webkit-text-fill-color: transparent;
228
+ line-height: 1.1;
229
+ }
230
+
231
+ .subtitle {
232
+ color: var(--text-muted);
233
+ font-size: 1.1rem;
234
+ margin-bottom: 2.5rem;
235
+ line-height: 1.6;
236
+ }
237
+
238
+ /* --- INTERACTIVE INPUTS & BUTTONS --- */
239
+ .input-group {
240
+ margin-bottom: 1.5rem;
241
+ position: relative;
242
+ }
243
+
244
+ .hello-input {
245
+ width: 100%;
246
+ padding: 1rem;
247
+ padding-left: 1.5rem;
248
+ border-radius: 12px;
249
+ border: 2px solid #e5e7eb;
250
+ background-color: var(--bg-color);
251
+ color: var(--text-main);
252
+ font-size: 1.1rem;
253
+ font-family: 'Inter', sans-serif;
254
+ transition: var(--transition);
255
+ outline: none;
256
+ }
257
+
258
+ [data-theme="dark"] .hello-input {
259
+ border-color: #374151;
260
+ background-color: #374151;
261
+ color: white;
262
+ }
263
+
264
+ .hello-input:focus {
265
+ border-color: var(--primary-color);
266
+ box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
267
+ }
268
+
269
+ .hello-btn {
270
+ width: 100%;
271
+ padding: 1rem;
272
+ border-radius: 12px;
273
+ border: none;
274
+ background-color: var(--primary-color);
275
+ color: white;
276
+ font-size: 1.1rem;
277
+ font-weight: 600;
278
+ cursor: pointer;
279
+ transition: var(--transition);
280
+ display: flex;
281
+ justify-content: center;
282
+ align-items: center;
283
+ gap: 10px;
284
+ box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3);
285
+ }
286
+
287
+ .hello-btn:hover {
288
+ background-color: var(--primary-hover);
289
+ transform: translateY(-2px);
290
+ box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
291
+ }
292
+
293
+ .hello-btn:active {
294
+ transform: translateY(1px);
295
+ }
296
+
297
+ .hello-btn i {
298
+ transition: var(--transition);
299
+ }
300
+
301
+ .hello-btn:hover i {
302
+ transform: translateX(5px);
303
+ }
304
+
305
+ /* --- RESULT DISPLAY --- */
306
+ .result-area {
307
+ margin-top: 2rem;
308
+ padding: 1.5rem;
309
+ border-radius: 12px;
310
+ background-color: var(--bg-color);
311
+ min-height: 60px;
312
+ display: flex;
313
+ justify-content: center;
314
+ align-items: center;
315
+ opacity: 0;
316
+ transform: translateY(10px);
317
+ transition: var(--transition);
318
+ border-left: 4px solid var(--secondary-color);
319
+ }
320
+
321
+ .result-area.visible {
322
+ opacity: 1;
323
+ transform: translateY(0);
324
+ }
325
+
326
+ .greeting-text {
327
+ font-size: 1.5rem;
328
+ font-weight: 600;
329
+ color: var(--text-main);
330
+ }
331
+
332
+ .greeting-text span {
333
+ color: var(--primary-color);
334
+ font-weight: 800;
335
+ }
336
+
337
+ /* --- FOOTER --- */
338
+ footer {
339
+ text-align: center;
340
+ padding: 2rem;
341
+ color: var(--text-muted);
342
+ font-size: 0.9rem;
343
+ border-top: 1px solid rgba(0,0,0,0.05);
344
+ }
345
+
346
+ [data-theme="dark"] footer {
347
+ border-top: 1px solid rgba(255,255,255,0.05);
348
+ }
349
+
350
+ .footer-link {
351
+ color: var(--primary-color);
352
+ text-decoration: none;
353
+ font-weight: 600;
354
+ transition: color 0.2s;
355
+ }
356
+
357
+ .footer-link:hover {
358
+ text-decoration: underline;
359
+ color: var(--secondary-color);
360
+ }
361
+
362
+ /* --- ANIMATIONS --- */
363
+ @keyframes fadeInUp {
364
+ from { opacity: 0; transform: translateY(20px); }
365
+ to { opacity: 1; transform: translateY(0); }
366
+ }
367
+
368
+ /* --- RESPONSIVE --- */
369
+ @media (max-width: 768px) {
370
+ h1 { font-size: 2.5rem; }
371
+ .hello-card { padding: 2rem; }
372
+ .blob { width: 70vw; height: 70vw; }
373
+ }
374
+ </style>
375
+ </head>
376
+ <body>
377
+
378
+ <!-- Background Blobs for Modern Aesthetic -->
379
+ <div class="bg-blobs">
380
+ <div class="blob blob-1"></div>
381
+ <div class="blob blob-2"></div>
382
+ </div>
383
+
384
+ <!-- Header Section -->
385
+ <header>
386
+ <a href="#" class="logo">
387
+ <i class="fa-solid fa-hand-holding-heart"></i>
388
+ HelloApp
389
+ </a>
390
+ <button id="theme-toggle" class="theme-toggle" aria-label="Toggle Dark Mode">
391
+ <i class="fa-solid fa-moon"></i>
392
+ </button>
393
+ </header>
394
+
395
+ <!-- Main Content Section -->
396
+ <main>
397
+ <div class="hello-card">
398
+ <div class="avatar-container">
399
+ <div class="avatar">
400
+ <div class="avatar-inner">
401
+ <i class="fa-solid fa-user"></i>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <h1>Welcome Aboard</h1>
407
+ <p class="subtitle">
408
+ Experience the simplicity of a modern interface. Enter your name below to generate a personalized greeting.
409
+ </p>
410
+
411
+ <div class="input-group">
412
+ <input type="text" id="user-name" class="hello-input" placeholder="Enter your name..." autocomplete="off">
413
+ </div>
414
+
415
+ <button id="greet-btn" class="hello-btn">
416
+ <span>Say Hello</span>
417
+ <i class="fa-solid fa-arrow-right"></i>
418
+ </button>
419
+
420
+ <div id="result-display" class="result-area">
421
+ <span class="greeting-text" id="greeting-output">Hello, World!</span>
422
+ </div>
423
+ </div>
424
+ </main>
425
+
426
+ <!-- Footer Section -->
427
+ <footer>
428
+ <p>
429
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="footer-link">anycoder</a>
430
+ </p>
431
+ </footer>
432
+
433
+ <!-- JavaScript Logic -->
434
+ <script>
435
+ document.addEventListener('DOMContentLoaded', () => {
436
+ // --- DOM Elements ---
437
+ const themeToggleBtn = document.getElementById('theme-toggle');
438
+ const themeIcon = themeToggleBtn.querySelector('i');
439
+ const nameInput = document.getElementById('user-name');
440
+ const greetBtn = document.getElementById('greet-btn');
441
+ const resultDisplay = document.getElementById('result-display');
442
+ const greetingOutput = document.getElementById('greeting-output');
443
+
444
+ // --- Theme Toggle Logic (Dark/Light Mode) ---
445
+ const savedTheme = localStorage.getItem('theme') || 'light';
446
+ document.documentElement.setAttribute('data-theme', savedTheme);
447
+ updateThemeIcon(savedTheme);
448
+
449
+ themeToggleBtn.addEventListener('click', () => {
450
+ const currentTheme = document.documentElement.getAttribute('data-theme');
451
+ const newTheme = currentTheme === 'light' ? 'dark' : 'light';
452
+
453
+ document.documentElement.setAttribute('data-theme', newTheme);
454
+ localStorage.setItem('theme', newTheme);
455
+ updateThemeIcon(newTheme);
456
+ });
457
+
458
+ function updateThemeIcon(theme) {
459
+ if (theme === 'dark') {
460
+ themeIcon.classList.remove('fa-moon');
461
+ themeIcon.classList.add('fa-sun');
462
+ } else {
463
+ themeIcon.classList.remove('fa-sun');
464
+ themeIcon.classList.add('fa-moon');
465
+ }
466
+ }
467
+
468
+ // --- Greeting Logic ---
469
+
470
+ // Function to generate greeting
471
+ const generateGreeting = () => {
472
+ const name = nameInput.value.trim();
473
+
474
+ if (!name) {
475
+ // If input is empty, show a generic message
476
+ greetingOutput.innerHTML = "Hello, World! <i class='fa-solid fa-wave-square'></i>";
477
+ resultDisplay.classList.add('visible');
478
+ nameInput.style.borderColor = '#ef4444'; // Red border for error
479
+ setTimeout(() => {
480
+ nameInput.style.borderColor = ''; // Reset border
481
+ }, 1000);
482
+ return;
483
+ }
484
+
485
+ // Random Greeting Variations
486
+ const greetings = [
487
+ `Hello, <span>${name}</span>! Welcome to the future.`,
488
+ `Hi there, <span>${name}</span>! It's great to meet you.`,
489
+ `Greetings, <span>${name}</span>! You look fantastic today.`,
490
+ `Nice to see you, <span>${name}</span>!`
491
+ ];
492
+
493
+ const randomGreeting = greetings[Math.floor(Math.random() * greetings.length)];
494
+ greetingOutput.innerHTML = randomGreeting;
495
+
496
+ // Show result with animation
497
+ resultDisplay.classList.remove('visible');
498
+
499
+ // Small delay to allow CSS transition to reset
500
+ setTimeout(() => {
501
+ resultDisplay.classList.add('visible');
502
+ }, 50);
503
+ };
504
+
505
+ // Event Listener for Button Click
506
+ greetBtn.addEventListener('click', generateGreeting);
507
+
508
+ // Event Listener for 'Enter' key in input field
509
+ nameInput.addEventListener('keypress', (e) => {
510
+ if (e.key === 'Enter') {
511
+ generateGreeting();
512
+ }
513
+ });
514
+
515
+ // Clear error border on input
516
+ nameInput.addEventListener('input', () => {
517
+ if (nameInput.style.borderColor === '#ef4444') {
518
+ nameInput.style.borderColor = '';
519
+ }
520
+ });
521
+
522
+ // Initial focus
523
+ nameInput.focus();
524
+ });
525
+ </script>
526
+ </body>
527
+ </html>