Hugging Face's logo

Spaces:
sky-meilin
/
anycoder-e9eabbf7
Running

App Files Community
sky-meilin commited on
Commit
f4f508b
·
verified ·
1 Parent(s): a58532f

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +315 -344
index.html CHANGED
@@ -3,462 +3,433 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Hugging Face CLI Connection Generator</title>
7
- <!-- Import FontAwesome for Icons -->
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 
 
9
  <style>
 
10
  :root {
11
- --bg-color: #0f172a;
12
- --card-bg: #1e293b;
13
- --text-primary: #f8fafc;
14
- --text-secondary: #94a3b8;
15
- --accent-color: #6366f1; /* Indigo */
16
- --accent-glow: #818cf8;
17
- --hf-pink: #ff007a;
18
- --hf-blue: #2b2d31;
19
- --terminal-bg: #000000;
20
- --terminal-text: #00ff00;
21
- --font-main: 'Inter', system-ui, sans-serif;
22
- --font-mono: 'Fira Code', 'Courier New', monospace;
23
  }
24
 
25
  * {
26
- box-sizing: box-box;
27
  margin: 0;
28
  padding: 0;
 
29
  }
30
 
31
  body {
32
- background-color: var(--bg-color);
33
- color: var(--text-primary);
 
 
 
 
34
  font-family: var(--font-main);
35
  line-height: 1.6;
36
- display: flex;
37
- flex-direction: column;
38
- min-height: 100vh;
39
  overflow-x: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  }
41
 
42
- /* Header & Navigation */
43
  header {
44
- padding: 20px 40px;
45
  display: flex;
46
  justify-content: space-between;
47
  align-items: center;
48
- border-bottom: 1px solid rgba(255,255,255,0.1);
 
 
49
  }
50
 
51
  .brand {
52
- font-weight: 700;
53
- font-size: 1.2rem;
54
- color: var(--text-primary);
55
- display: flex;
56
- align-items: center;
57
- gap: 10px;
58
- }
59
-
60
- .brand i {
61
- color: var(--hf-pink);
62
  }
63
 
64
  .anycoder-link {
65
- text-decoration: none;
66
- color: var(--text-secondary);
67
  font-size: 0.9rem;
68
- transition: color 0.3s ease;
69
- border: 1px solid rgba(255,255,255,0.2);
70
- padding: 5px 15px;
 
71
  border-radius: 8px;
 
72
  }
73
-
74
  .anycoder-link:hover {
75
- color: var(--accent-glow);
76
- border-color: var(--accent-glow);
77
- background: rgba(63, 66, 151, 0.1);
78
  }
79
 
80
- /* Main Layout */
81
- main {
82
- flex: 1;
83
- padding: 40px;
84
- max-width: 1200px;
85
- width: 100%;
86
- margin: 0 auto;
87
  display: grid;
88
- grid-template-columns: 1fr 1fr;
89
  gap: 40px;
90
  align-items: center;
 
 
91
  }
92
 
93
- @media (max-width: 900px) {
94
- main {
95
- grid-template-columns: 1fr;
96
- padding: 20px;
97
- }
 
98
  }
99
 
100
- /* Content Section */
101
- .content-section {
102
- display: flex;
103
- flex-direction: column;
104
- gap: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  }
106
 
107
- h1 {
108
  font-size: 3rem;
109
- line-height: 1.1;
110
  margin-bottom: 10px;
111
- background: linear-gradient(to right, #fff, #94a3b8);
112
- -webkit-background-clip: text;
113
- -webkit-text-fill-color: transparent;
114
  }
115
 
116
- p.subtitle {
117
- color: var(--text-secondary);
118
- font-size: 1.1rem;
119
- max-width: 500px;
 
120
  }
121
 
122
- /* Code Generator Card */
123
- .card {
124
- background: var(--card-bg);
125
- border-radius: 16px;
126
- padding: 30px;
127
- border: 1px solid rgba(255,255,255,0.05);
128
- box-shadow: 0 20px 50px rgba(0,0,0,0.3);
129
- position: relative;
130
  overflow: hidden;
131
  }
132
 
133
- .card::before {
134
- content: '';
135
- position: absolute;
136
- top: 0;
137
- left: 0;
138
- width: 100%;
139
- height: 4px;
140
- background: linear-gradient(90deg, var(--hf-pink), var(--accent-color));
141
- }
142
-
143
- .step-container {
144
- margin-bottom: 30px;
145
  }
146
 
147
- .step-title {
148
- font-size: 0.8rem;
149
- text-transform: uppercase;
150
- letter-spacing: 2px;
151
- color: var(--accent-glow);
152
- margin-bottom: 10px;
153
- font-weight: 600;
 
154
  }
155
 
156
- /* Terminal Simulation */
157
- .terminal-window {
158
- background: var(--terminal-bg);
159
- border-radius: 8px;
160
- padding: 15px;
161
- font-family: var(--font-mono);
162
- font-size: 0.9rem;
163
- box-shadow: inset 0 0 10px rgba(255,255,255,0.05);
164
- position: relative;
165
- transition: transform 0.2s ease;
166
  }
167
 
168
- .terminal-window:hover {
169
- transform: translateY(-2px);
 
 
 
 
170
  }
171
 
172
- .cmd-row {
 
 
 
 
173
  display: flex;
174
- justify-content: space-between;
175
  align-items: center;
176
- margin-bottom: 10px;
177
- padding-bottom: 10px;
178
- border-bottom: 1px solid rgba(255,255,255,0.1);
 
179
  }
180
 
181
- .cmd-row:last-child {
182
- border-bottom: none;
183
- margin-bottom: 0;
184
- padding-bottom: 0;
185
  }
186
 
187
- .cmd-text {
188
- color: var(--terminal-text);
189
- flex: 1;
190
- word-break: break-all;
 
 
191
  }
192
 
193
- .copy-btn {
194
- background: transparent;
195
- border: 1px solid rgba(255,255,255,0.2);
196
- color: var(--text-secondary);
197
- padding: 5px 10px;
198
- border-radius: 4px;
199
- cursor: pointer;
200
- font-size: 0.8rem;
201
- transition: all 0.2s;
202
  display: flex;
203
  align-items: center;
204
- gap: 5px;
 
 
 
205
  }
206
 
207
- .copy-btn:hover {
208
- background: rgba(255,255,255,0.1);
209
- color: var(--text-primary);
 
210
  }
211
 
212
- .copy-btn.copied {
213
- color: var(--accent-color);
214
- border-color: var(--accent-color);
 
 
 
215
  }
 
 
216
 
217
- /* Interactive Input */
218
- .input-group {
219
  display: flex;
220
  gap: 10px;
221
- margin-top: 10px;
222
- }
223
-
224
- input[type="text"] {
225
- background: rgba(0,0,0,0.3);
226
- border: 1px solid rgba(255,255,255,0.1);
227
- color: var(--text-primary);
228
- padding: 10px;
229
- border-radius: 6px;
230
- flex: 1;
231
- font-family: var(--font-mono);
232
- outline: none;
233
  }
234
 
235
- input[type="text"]:focus {
236
- border-color: var(--accent-color);
237
- }
238
-
239
- .generate-btn {
240
- background: var(--accent-color);
241
- color: white;
242
- border: none;
243
- padding: 10px 20px;
244
  border-radius: 6px;
245
- cursor: pointer;
246
- font-weight: 600;
247
- transition: background 0.3s;
248
  }
249
 
250
- .generate-btn:hover {
251
- background: var(--accent-glow);
252
- }
253
-
254
- /* Explanation List */
255
- .info-list {
256
- list-style: none;
257
- }
258
-
259
- .info-list li {
260
- padding: 10px 0;
261
- display: flex;
262
- align-items: start;
263
- gap: 10px;
264
- color: var(--text-secondary);
265
- }
266
-
267
- .info-list li i {
268
- color: var(--accent-color);
269
- margin-top: 4px;
270
  }
271
 
272
- /* Footer */
273
  footer {
274
- padding: 20px;
275
  text-align: center;
276
- color: var(--text-secondary);
 
277
  font-size: 0.8rem;
278
- border-top: 1px solid rgba(255,255,255,0.05);
279
- }
280
-
281
- /* Animations */
282
- @keyframes pulse {
283
- 0% { box-shadow: 0 0 0 0 rgba(63, 66, 151, 0.4); }
284
- 70% { box-shadow: 0 0 0 10px rgba(63, 66, 151, 0); }
285
- 100% { box-shadow: 0 0 0 0 rgba(63, 66, 151, 0); }
286
- }
287
-
288
- .status-dot {
289
- width: 10px;
290
- height: 10px;
291
- background: var(--terminal-text);
292
- border-radius: 50%;
293
- display: inline-block;
294
- animation: pulse 2s infinite;
295
  }
296
-
297
  </style>
298
  </head>
299
  <body>
300
 
301
- <header>
302
- <div class="brand">
303
- <i class="fa-brands fa-robot"></i> HF CLI Generator
304
- </div>
305
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
306
- </header>
307
-
308
- <main>
309
- <div class="content-section">
310
- <h1>Connect to Hugging Face</h1>
311
- <p class="subtitle">Generate the necessary terminal commands to authenticate your environment with the Hugging Face Hub API.</p>
312
-
313
- <ul class="info-list">
314
- <li>
315
- <i class="fa-solid fa-terminal"></i>
316
- <span>Installs the <code>huggingface_hub</code> python library.</span>
317
- </li>
318
- <li>
319
- <i class="fa-solid fa-key"></i>
320
- <span>Securely stores your Access Token in local config.</span>
321
- </li>
322
- <li>
323
- <i class="fa-solid fa-check"></i>
324
- <span>Verifies your login status immediately.</span>
325
- </li>
326
- </ul>
327
- </div>
328
-
329
- <div class="card">
330
- <div class="step-container">
331
- <div class="step-title">Step 1: Installation</div>
332
- <div class="terminal-window">
333
- <div class="cmd-row">
334
- <span class="cmd-text">pip install huggingface_hub</span>
335
- <button class="copy-btn" onclick="copyToClipboard('pip install huggingface_hub')">
336
- <i class="fa-regular fa-copy"></i> Copy
337
- </button>
338
- </div>
339
  </div>
340
  </div>
 
341
 
342
- <div class="step-container">
343
- <div class="step-title">Step 2: Authentication</div>
344
- <div class="terminal-window">
345
- <div class="cmd-row">
346
- <span class="cmd-text">huggingface-cli login</span>
347
- <button class="copy-btn" onclick="copyToClipboard('huggingface-cli login')">
348
- <i class="fa-regular fa-copy"></i> Copy
349
- </button>
 
350
  </div>
351
- <p style="color: #666; font-size: 0.8rem; margin-top: 5px;">
352
- <span class="status-dot"></span> This command will prompt you to paste your HF Token.
353
  </p>
 
 
 
 
 
 
 
 
 
 
354
  </div>
355
- </div>
356
 
357
- <div class="step-container">
358
- <div class="step-title">Step 3: Verification</div>
359
- <div class="terminal-window">
360
- <div class="cmd-row">
361
- <span class="cmd-text">huggingface-cli whoami</span>
362
- <button class="copy-btn" onclick="copyToClipboard('huggingface-cli whoami')">
363
- <i class="fa-regular fa-copy"></i> Copy
364
- </button>
 
 
 
 
 
 
 
 
365
  </div>
366
  </div>
367
- </div>
368
-
369
- <div class="step-container">
370
- <div class="step-title">Optional: Custom Token</div>
371
- <div class="input-group">
372
- <input type="text" id="tokenInput" placeholder="Paste HF_TOKEN here...">
373
- <button class="generate-btn" onclick="generateTokenCmd()">Generate</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
374
  </div>
375
- <div id="tokenCmdOutput" style="margin-top: 10px; display: none;">
376
- <div class="terminal-window">
377
- <div class="cmd-row">
378
- <span class="cmd-text" id="finalCmd"></span>
379
- <button class="copy-btn" onclick="copyCmdFromOutput()">
380
- <i class="fa-regular fa-copy"></i> Copy
381
- </button>
382
- </div>
383
  </div>
 
 
 
384
  </div>
385
- </div>
386
  </div>
387
- </main>
388
 
389
  <footer>
390
- &copy; 2023 HF CLI Helper. Designed for Developers.
391
  </footer>
392
 
393
  <script>
394
- // Function to handle copying text to clipboard
395
- function copyToClipboard(text) {
396
- navigator.clipboard.writeText(text).then(() => {
397
- // Find the button that was clicked (we need to pass the event or find it differently)
398
- // Since we are calling from onclick, we can't easily target the specific button inside the function without refactoring.
399
- // Let's use a generic alert for simplicity in this single file, or better, visual feedback.
400
-
401
- // Visual feedback implementation
402
- const buttons = document.querySelectorAll('.copy-btn');
403
- buttons.forEach(btn => {
404
- if(btn.innerText.includes('Copy')) {
405
- // Reset all first
406
- btn.classList.remove('copied');
407
- btn.innerHTML = '<i class="fa-regular fa-copy"></i> Copy';
408
- }
409
- });
410
-
411
- // Find the specific button clicked based on the text matched (rough logic)
412
- // A better approach for this specific UI:
413
- const eventTarget = document.activeElement;
414
- if(eventTarget && eventTarget.classList.contains('copy-btn')) {
415
- eventTarget.classList.add('copied');
416
- eventTarget.innerHTML = '<i class="fa-solid fa-check"></i> Copied';
417
-
418
- setTimeout(() => {
419
- eventTarget.classList.remove('copied');
420
- eventTarget.innerHTML = '<i class="fa-regular fa-copy"></i> Copy';
421
- }, 2000);
422
- }
423
- }).catch(err => {
424
- console.error('Failed to copy: ', err);
425
- });
426
- }
427
-
428
- // Function to generate the token command
429
- function generateTokenCmd() {
430
- const token = document.getElementById('tokenInput').value.trim();
431
- const outputDiv = document.getElementById('tokenCmdOutput');
432
- const cmdSpan = document.getElementById('finalCmd');
433
-
434
- if (!token) {
435
- alert("Please enter a token first.");
436
- return;
437
  }
438
-
439
- const command = `huggingface-cli login --token ${token}`;
440
- cmdSpan.textContent = command;
441
-
442
- outputDiv.style.display = 'block';
443
-
444
- // Auto copy logic could be added here, but let's let the user click copy
445
  }
446
 
447
- function copyCmdFromOutput() {
448
- const text = document.getElementById('finalCmd').textContent;
449
- copyToClipboard(text);
450
-
451
- // Specific visual feedback for the generated button
452
- const btn = document.querySelector('#tokenCmdOutput .copy-btn');
453
- if(btn) {
454
- btn.classList.add('copied');
455
- btn.innerHTML = '<i class="fa-solid fa-check"></i> Copied';
456
- setTimeout(() => {
457
- btn.classList.remove('copied');
458
- btn.innerHTML = '<i class="fa-regular fa-copy"></i> Copy';
459
- }, 2000);
460
- }
461
- }
 
462
  </script>
463
  </body>
464
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Skymeilin Profile Viewer</title>
7
+ <!-- Icons -->
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <!-- Fonts -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
11
+
12
  <style>
13
+ /* --- MODERN CSS VARIABLES & RESET --- */
14
  :root {
15
+ --bg-dark: #0f172a;
16
+ --bg-card: rgba(30, 41, 59, 0.7);
17
+ --text-main: #f8fafc;
18
+ --text-muted: #94a3b8;
19
+ --accent: #38bdf8; /* Sky Blue */
20
+ --accent-glow: rgba(56, 189, 248, 0.4);
21
+ --gradient-1: #0f172a;
22
+ --gradient-2: #1e293b;
23
+ --glass-border: rgba(255, 255, 255, 0.1);
24
+ --font-main: 'Inter', sans-serif;
 
 
25
  }
26
 
27
  * {
 
28
  margin: 0;
29
  padding: 0;
30
+ box-sizing: box-sizing;
31
  }
32
 
33
  body {
34
+ background-color: var(--bg-dark);
35
+ background-image:
36
+ radial-gradient(at 0% 0%, rgba(56, 189, 248, 0.15) 0%, transparent 50%),
37
+ radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
38
+ radial-gradient(at 100% 100%, rgba(56, 189, 248, 0.1) 0%, transparent 50%);
39
+ color: var(--text-main);
40
  font-family: var(--font-main);
41
  line-height: 1.6;
 
 
 
42
  overflow-x: hidden;
43
+ min-height: 100vh;
44
+ }
45
+
46
+ /* --- UTILITIES & ANIMATIONS --- */
47
+ .container {
48
+ max-width: 1100px;
49
+ margin: 0 auto;
50
+ padding: 20px;
51
+ }
52
+
53
+ a { text-decoration: none; color: inherit; transition: 0.3s; }
54
+
55
+ @keyframes float {
56
+ 0% { transform: translateY(0px); }
57
+ 50% { transform: translateY(-10px); }
58
+ 100% { transform: translateY(0px); }
59
+ }
60
+
61
+ @keyframes pulse-glow {
62
+ 0% { box-shadow: 0 0 10px var(--accent-glow); }
63
+ 50% { box-shadow: 0 0 25px var(--accent-glow); }
64
+ 100% { box-shadow: 0 0 10px var(--accent-glow); }
65
  }
66
 
67
+ /* --- HEADER --- */
68
  header {
 
69
  display: flex;
70
  justify-content: space-between;
71
  align-items: center;
72
+ padding: 20px 0;
73
+ border-bottom: 1px solid var(--glass-border);
74
+ margin-bottom: 40px;
75
  }
76
 
77
  .brand {
78
+ font-weight: 800;
79
+ font-size: 1.5rem;
80
+ letter-spacing: -1px;
81
+ background: linear-gradient(to right, #fff, var(--accent));
82
+ -webkit-background-clip: text;
83
+ -webkit-text-fill-color: transparent;
 
 
 
 
84
  }
85
 
86
  .anycoder-link {
 
 
87
  font-size: 0.9rem;
88
+ font-weight: 600;
89
+ color: var(--text-muted);
90
+ background: var(--bg-card);
91
+ padding: 8px 16px;
92
  border-radius: 8px;
93
+ border: 1px solid var(--glass-border);
94
  }
 
95
  .anycoder-link:hover {
96
+ color: var(--accent);
97
+ border-color: var(--accent);
 
98
  }
99
 
100
+ /* --- HERO SECTION --- */
101
+ .hero {
 
 
 
 
 
102
  display: grid;
103
+ grid-template-columns: 1fr;
104
  gap: 40px;
105
  align-items: center;
106
+ text-align: center;
107
+ margin-bottom: 60px;
108
  }
109
 
110
+ .avatar-container {
111
+ position: relative;
112
+ width: 180px;
113
+ height: 180px;
114
+ margin: 0 auto 20px;
115
+ animation: float 6s ease-in-out infinite;
116
  }
117
 
118
+ .avatar-img {
119
+ width: 100%;
120
+ height: 100%;
121
+ border-radius: 50%;
122
+ border: 2px solid var(--accent);
123
+ padding: 5px;
124
+ background: var(--bg-dark);
125
+ object-fit: cover;
126
+ animation: pulse-glow 3s infinite;
127
+ }
128
+
129
+ .status-badge {
130
+ position: absolute;
131
+ bottom: 15px;
132
+ right: 15px;
133
+ background: #22c55e;
134
+ width: 20px;
135
+ height: 20px;
136
+ border-radius: 50%;
137
+ border: 2px solid var(--bg-dark);
138
+ box-shadow: 0 0 10px #22c55e;
139
  }
140
 
141
+ .hero-title {
142
  font-size: 3rem;
143
+ font-weight: 800;
144
  margin-bottom: 10px;
145
+ line-height: 1.1;
 
 
146
  }
147
 
148
+ .hero-subtitle {
149
+ font-size: 1.2rem;
150
+ color: var(--accent);
151
+ margin-bottom: 20px;
152
+ font-weight: 500;
153
  }
154
 
155
+ .typing-container {
156
+ font-family: 'Courier New', monospace;
157
+ color: var(--text-muted);
158
+ margin-bottom: 30px;
159
+ height: 20px;
 
 
 
160
  overflow: hidden;
161
  }
162
 
163
+ /* --- GRID LAYOUT --- */
164
+ .dashboard-grid {
165
+ display: grid;
166
+ grid-template-columns: 2fr 1fr;
167
+ gap: 30px;
 
 
 
 
 
 
 
168
  }
169
 
170
+ /* --- CARDS --- */
171
+ .card {
172
+ background: var(--bg-card);
173
+ border: 1px solid var(--glass-border);
174
+ border-radius: 16px;
175
+ padding: 30px;
176
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
177
+ backdrop-filter: blur(10px);
178
  }
179
 
180
+ .card:hover {
181
+ transform: translateY(-5px);
182
+ box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
183
+ border-color: var(--accent);
 
 
 
 
 
 
184
  }
185
 
186
+ .card-header {
187
+ display: flex;
188
+ align-items: center;
189
+ margin-bottom: 20px;
190
+ border-bottom: 1px solid var(--glass-border);
191
+ padding-bottom: 15px;
192
  }
193
 
194
+ .card-icon {
195
+ width: 40px;
196
+ height: 40px;
197
+ background: var(--accent);
198
+ color: #000;
199
  display: flex;
 
200
  align-items: center;
201
+ justify-content: center;
202
+ border-radius: 10px;
203
+ margin-right: 15px;
204
+ font-size: 1.2rem;
205
  }
206
 
207
+ .card-title {
208
+ font-size: 1.2rem;
209
+ font-weight: 600;
 
210
  }
211
 
212
+ /* --- SOCIALS --- */
213
+ .social-list {
214
+ display: flex;
215
+ gap: 15px;
216
+ justify-content: center;
217
+ margin-top: 20px;
218
  }
219
 
220
+ .social-btn {
221
+ width: 50px;
222
+ height: 50px;
223
+ border-radius: 12px;
224
+ background: rgba(255,255,255,0.05);
 
 
 
 
225
  display: flex;
226
  align-items: center;
227
+ justify-content: center;
228
+ font-size: 1.2rem;
229
+ color: var(--text-muted);
230
+ transition: 0.3s;
231
  }
232
 
233
+ .social-btn:hover {
234
+ background: var(--accent);
235
+ color: #fff;
236
+ transform: scale(1.1);
237
  }
238
 
239
+ /* --- STATS --- */
240
+ .stat-row {
241
+ display: flex;
242
+ justify-content: space-between;
243
+ margin-bottom: 15px;
244
+ font-size: 0.95rem;
245
  }
246
+ .stat-label { color: var(--text-muted); }
247
+ .stat-value { font-weight: 600; color: var(--text-main); }
248
 
249
+ /* --- TAGS --- */
250
+ .tags-container {
251
  display: flex;
252
  gap: 10px;
253
+ flex-wrap: wrap;
 
 
 
 
 
 
 
 
 
 
 
254
  }
255
 
256
+ .tag {
257
+ padding: 6px 12px;
258
+ background: rgba(56, 189, 248, 0.1);
259
+ border: 1px solid rgba(56, 189, 248, 0.2);
 
 
 
 
 
260
  border-radius: 6px;
261
+ font-size: 0.85rem;
262
+ color: var(--accent);
 
263
  }
264
 
265
+ /* --- RESPONSIVE --- */
266
+ @media (max-width: 768px) {
267
+ .dashboard-grid {
268
+ grid-template-columns: 1fr;
269
+ }
270
+ .hero-title { font-size: 2.2rem; }
271
+ .avatar-container { width: 140px; height: 140px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
272
  }
273
 
274
+ /* --- FOOTER --- */
275
  footer {
 
276
  text-align: center;
277
+ padding: 40px 0;
278
+ color: var(--text-muted);
279
  font-size: 0.8rem;
280
+ border-top: 1px solid var(--glass-border);
281
+ margin-top: 40px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
282
  }
 
283
  </style>
284
  </head>
285
  <body>
286
 
287
+ <div class="container">
288
+ <!-- Header -->
289
+ <header>
290
+ <div class="brand">
291
+ <i class="fa-solid fa-cloud"></i> SKYMEILIN
292
+ </div>
293
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">
294
+ Built with anycoder <i class="fa-solid fa-arrow-right"></i>
295
+ </a>
296
+ </header>
297
+
298
+ <!-- Hero Section -->
299
+ <section class="hero">
300
+ <div class="avatar-container">
301
+ <!-- Using a high quality placeholder matching the 'Sky' theme since we don't have the direct MD5 hash -->
302
+ <img src="https://ui-avatars.com/180?name=Sky&background=0f172a&color=38bdf8" alt="Skymeilin Avatar" class="avatar-img">
303
+ <div class="status-badge"></div>
304
+ </div>
305
+
306
+ <div class="hero-content">
307
+ <h1 class="hero-title">Hello, I'm Skymeilin</div>
308
+ <div class="hero-subtitle">Digital Creator & Developer</div>
309
+ <div class="typing-container">
310
+ <span id="typing-text"></span>
311
+ </div>
312
+ <div class="social-list">
313
+ <a href="#" class="social-btn"><i class="fa-brands fa-twitter"></i></a>
314
+ <a href="#" class="social-btn"><i class="fa-brands fa-github"></i></a>
315
+ <a href="#" class="social-btn"><i class="fa-brands fa-instagram"></i></a>
316
+ <a href="#" class="social-btn"><i class="fa-brands fa-linkedin"></i></a>
 
 
 
 
 
 
 
 
317
  </div>
318
  </div>
319
+ </section>
320
 
321
+ <!-- Dashboard Grid -->
322
+ <div class="dashboard-grid">
323
+
324
+ <!-- Main Content (Bio/About) -->
325
+ <main>
326
+ <div class="card">
327
+ <div class="card-header">
328
+ <div class="card-icon"><i class="fa-solid fa-user"></i></div>
329
+ <div class="card-title">Profile Overview</div>
330
  </div>
331
+ <p style="color: var(--text-muted);">
332
+ Skymeilin is a passionate developer and creative thinker. Focused on building scalable web applications and exploring the intersection of design and code. This profile represents a digital identity curated for the modern web.
333
  </p>
334
+ <br>
335
+ <h3 style="margin-bottom: 10px; font-size: 1rem;">Tech Stack</h3>
336
+ <div class="tags-container">
337
+ <span class="tag">HTML5</span>
338
+ <span class="tag">CSS3</span>
339
+ <span class="tag">JavaScript</span>
340
+ <span class="tag">React</span>
341
+ <span class="tag">Node.js</span>
342
+ <span class="tag">UI Design</span>
343
+ </div>
344
  </div>
 
345
 
346
+ <div class="card" style="margin-top: 30px;">
347
+ <div class="card-header">
348
+ <div class="card-icon"><i class="fa-solid fa-briefcase"></i></div>
349
+ <div class="card-title">Recent Activity</div>
350
+ </div>
351
+ <div class="stat-row">
352
+ <span class="stat-label">Latest Project</span>
353
+ <span class="stat-value">Web UI Generator</span>
354
+ </div>
355
+ <div class="stat-row">
356
+ <span class="stat-label">Status</span>
357
+ <span class="stat-value" style="color: var(--accent);">Active</span>
358
+ </div>
359
+ <div class="stat-row">
360
+ <span class="stat-label">Location</span>
361
+ <span class="stat-value">Remote / Cloud</span>
362
  </div>
363
  </div>
364
+ </main>
365
+
366
+ <!-- Sidebar (Stats/Links) -->
367
+ <aside>
368
+ <div class="card">
369
+ <div class="card-header">
370
+ <div class="card-icon"><i class="fa-solid fa-chart-pie"></i></div>
371
+ <div class="card-title">Analytics</div>
372
+ </div>
373
+ <div class="stat-row">
374
+ <span class="stat-label">Profile Views</span>
375
+ <span class="stat-value">1,245</span>
376
+ </div>
377
+ <div class="stat-row">
378
+ <span class="stat-label">Avatar Score</span>
379
+ <span class="stat-value">98/100</span>
380
+ </div>
381
+ <div class="stat-row">
382
+ <span class="stat-label">Member Since</span>
383
+ <span class="stat-value">2023</span>
384
+ </div>
385
  </div>
386
+
387
+ <div class="card" style="margin-top: 30px; text-align: center;">
388
+ <div class="card-header" style="justify-content: center;">
389
+ <div class="card-title">Contact</div>
 
 
 
 
390
  </div>
391
+ <button style="width: 100%; padding: 12px; background: var(--accent); border: none; border-radius: 8px; color: #fff; font-weight: 600; cursor: pointer; transition: 0.3s;">
392
+ Message Me
393
+ </button>
394
  </div>
395
+ </aside>
396
  </div>
397
+ </div>
398
 
399
  <footer>
400
+ <p>&copy; 2023 Skymeilin Profile. Generated by AnyCoder.</p>
401
  </footer>
402
 
403
  <script>
404
+ // --- JS Logic for Typing Effect ---
405
+ const textToType = "Building the future, one pixel at a time.";
406
+ const typingElement = document.getElementById('typing-text');
407
+ let i = 0;
408
+
409
+ function typeWriter() {
410
+ if (i < textToType.length) {
411
+ typingElement.innerHTML += textToType.charAt(i);
412
+ i++;
413
+ setTimeout(typeWriter, 50);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
414
  }
 
 
 
 
 
 
 
415
  }
416
 
417
+ // Start typing effect on load
418
+ window.onload = typeWriter;
419
+
420
+ // --- Interactive Button Logic ---
421
+ const contactBtn = document.querySelector('button');
422
+ contactBtn.addEventListener('click', () => {
423
+ contactBtn.innerHTML = "Message Sent!";
424
+ contactBtn.style.background = "#22c55e";
425
+ setTimeout(() => {
426
+ contactBtn.innerHTML = "Message Me";
427
+ contactBtn.style.background = "var(--accent);";
428
+ }, 2000);
429
+ });
430
+
431
+ // --- Dynamic Theme Toggle (Optional Enhancement) ---
432
+ // (Could be added here, but keeping it simple for single file requirement)
433
  </script>
434
  </body>
435
  </html>