Hugging Face's logo

Spaces:
Samexplorer
/
anycoder-58671955
Running

App Files Community
Samexplorer commited on
Commit
20a19b9
·
verified ·
1 Parent(s): 33f7f86

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +373 -19
index.html CHANGED
@@ -1,19 +1,373 @@
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>What Can I Do? | Interactive Showcase</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ /* CSS Variables for theming */
10
+ :root {
11
+ --primary-color: #4a6bff;
12
+ --secondary-color: #f0f0ff;
13
+ --accent-color: #ff6b6b;
14
+ --dark-color: #2a2a2a;
15
+ --light-color: #ffffff;
16
+ --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
17
+ --border-radius: 12px;
18
+ --transition: all 0.3s ease;
19
+ }
20
+
21
+ /* Reset and base styles */
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
27
+ }
28
+
29
+ body {
30
+ background-color: var(--light-color);
31
+ color: var(--dark-color);
32
+ line-height: 1.6;
33
+ }
34
+
35
+ /* Header */
36
+ header {
37
+ background-color: var(--light-color);
38
+ box-shadow: var(--shadow);
39
+ position: sticky;
40
+ top: 0;
41
+ z-index: 100;
42
+ }
43
+
44
+ .header-container {
45
+ display: flex;
46
+ justify-content: space-between;
47
+ align-items: center;
48
+ padding: 1rem 2rem;
49
+ max-width: 1200px;
50
+ margin: 0 auto;
51
+ }
52
+
53
+ .logo {
54
+ font-size: 1.5rem;
55
+ font-weight: 700;
56
+ color: var(--primary-color);
57
+ text-decoration: none;
58
+ }
59
+
60
+ nav ul {
61
+ display: flex;
62
+ list-style: none;
63
+ gap: 1.5rem;
64
+ }
65
+
66
+ nav a {
67
+ text-decoration: none;
68
+ color: var(--dark-color);
69
+ font-weight: 500;
70
+ transition: var(--transition);
71
+ }
72
+
73
+ nav a:hover {
74
+ color: var(--primary-color);
75
+ }
76
+
77
+ /* Hero Section */
78
+ .hero {
79
+ background: linear-gradient(135deg, var(--primary-color), #6a4aff);
80
+ color: var(--light-color);
81
+ text-align: center;
82
+ padding: 4rem 1rem;
83
+ margin-bottom: 2rem;
84
+ }
85
+
86
+ .hero h1 {
87
+ font-size: 2.5rem;
88
+ margin-bottom: 1rem;
89
+ }
90
+
91
+ .hero p {
92
+ font-size: 1.2rem;
93
+ max-width: 800px;
94
+ margin: 0 auto 2rem;
95
+ }
96
+
97
+ .cta-button {
98
+ display: inline-block;
99
+ background-color: var(--light-color);
100
+ color: var(--primary-color);
101
+ padding: 0.8rem 1.5rem;
102
+ border-radius: var(--border-radius);
103
+ text-decoration: none;
104
+ font-weight: 600;
105
+ transition: var(--transition);
106
+ }
107
+
108
+ .cta-button:hover {
109
+ transform: translateY(-3px);
110
+ box-shadow: var(--shadow);
111
+ }
112
+
113
+ /* Features Grid */
114
+ .features {
115
+ max-width: 1200px;
116
+ margin: 0 auto;
117
+ padding: 0 1rem;
118
+ }
119
+
120
+ .features-grid {
121
+ display: grid;
122
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
123
+ gap: 2rem;
124
+ margin-bottom: 3rem;
125
+ }
126
+
127
+ .feature-card {
128
+ background-color: var(--light-color);
129
+ border-radius: var(--border-radius);
130
+ padding: 2rem;
131
+ box-shadow: var(--shadow);
132
+ transition: var(--transition);
133
+ text-align: center;
134
+ }
135
+
136
+ .feature-card:hover {
137
+ transform: translateY(-5px);
138
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
139
+ }
140
+
141
+ .feature-icon {
142
+ font-size: 3rem;
143
+ color: var(--primary-color);
144
+ margin-bottom: 1rem;
145
+ }
146
+
147
+ .feature-card h3 {
148
+ margin-bottom: 1rem;
149
+ color: var(--primary-color);
150
+ }
151
+
152
+ /* Interactive Demo */
153
+ .demo-section {
154
+ background-color: var(--secondary-color);
155
+ padding: 3rem 1rem;
156
+ text-align: center;
157
+ }
158
+
159
+ .demo-container {
160
+ max-width: 800px;
161
+ margin: 0 auto;
162
+ }
163
+
164
+ .demo-button {
165
+ background-color: var(--primary-color);
166
+ color: var(--light-color);
167
+ border: none;
168
+ padding: 0.8rem 1.5rem;
169
+ border-radius: var(--border-radius);
170
+ font-size: 1rem;
171
+ cursor: pointer;
172
+ transition: var(--transition);
173
+ margin: 0.5rem;
174
+ }
175
+
176
+ .demo-button:hover {
177
+ background-color: #3a5bef;
178
+ transform: scale(1.05);
179
+ }
180
+
181
+ .demo-output {
182
+ margin-top: 2rem;
183
+ padding: 1.5rem;
184
+ background-color: var(--light-color);
185
+ border-radius: var(--border-radius);
186
+ box-shadow: var(--shadow);
187
+ min-height: 100px;
188
+ display: flex;
189
+ justify-content: center;
190
+ align-items: center;
191
+ font-size: 1.2rem;
192
+ }
193
+
194
+ /* Footer */
195
+ footer {
196
+ background-color: var(--dark-color);
197
+ color: var(--light-color);
198
+ text-align: center;
199
+ padding: 2rem 1rem;
200
+ margin-top: 2rem;
201
+ }
202
+
203
+ .footer-links {
204
+ display: flex;
205
+ justify-content: center;
206
+ gap: 1.5rem;
207
+ margin-bottom: 1rem;
208
+ }
209
+
210
+ .footer-links a {
211
+ color: var(--light-color);
212
+ text-decoration: none;
213
+ transition: var(--transition);
214
+ }
215
+
216
+ .footer-links a:hover {
217
+ color: var(--primary-color);
218
+ }
219
+
220
+ /* Responsive adjustments */
221
+ @media (max-width: 768px) {
222
+ .header-container {
223
+ flex-direction: column;
224
+ gap: 1rem;
225
+ }
226
+
227
+ nav ul {
228
+ flex-wrap: wrap;
229
+ justify-content: center;
230
+ }
231
+
232
+ .hero h1 {
233
+ font-size: 2rem;
234
+ }
235
+
236
+ .hero p {
237
+ font-size: 1rem;
238
+ }
239
+ }
240
+
241
+ /* Built with anycoder */
242
+ .built-with {
243
+ position: fixed;
244
+ bottom: 1rem;
245
+ right: 1rem;
246
+ background-color: var(--light-color);
247
+ padding: 0.5rem 1rem;
248
+ border-radius: var(--border-radius);
249
+ box-shadow: var(--shadow);
250
+ font-size: 0.9rem;
251
+ z-index: 1000;
252
+ }
253
+
254
+ .built-with a {
255
+ color: var(--primary-color);
256
+ text-decoration: none;
257
+ font-weight: 600;
258
+ }
259
+ </style>
260
+ </head>
261
+ <body>
262
+ <header>
263
+ <div class="header-container">
264
+ <a href="#" class="logo">AnyCoder</a>
265
+ <nav>
266
+ <ul>
267
+ <li><a href="#features">Features</a></li>
268
+ <li><a href="#demo">Demo</a></li>
269
+ <li><a href="#about">About</a></li>
270
+ <li><a href="#contact">Contact</a></li>
271
+ </ul>
272
+ </nav>
273
+ </div>
274
+ </header>
275
+
276
+ <section class="hero">
277
+ <h1>What Can I Do?</h1>
278
+ <p>Explore the possibilities of modern web development with HTML, CSS, and JavaScript. This interactive showcase demonstrates responsive design, animations, and dynamic content.</p>
279
+ <a href="#demo" class="cta-button">Try the Demo</a>
280
+ </section>
281
+
282
+ <section class="features" id="features">
283
+ <div class="features-grid">
284
+ <div class="feature-card">
285
+ <div class="feature-icon">
286
+ <i class="fas fa-mobile-alt"></i>
287
+ </div>
288
+ <h3>Responsive Design</h3>
289
+ <p>Adapts seamlessly to any screen size, from mobile to desktop, using modern CSS techniques like Flexbox and Grid.</p>
290
+ </div>
291
+ <div class="feature-card">
292
+ <div class="feature-icon">
293
+ <i class="fas fa-paint-brush"></i>
294
+ </div>
295
+ <h3>Modern Styling</h3>
296
+ <p>Utilizes CSS variables, custom properties, and advanced selectors for maintainable and scalable styles.</p>
297
+ </div>
298
+ <div class="feature-card">
299
+ <div class="feature-icon">
300
+ <i class="fas fa-code"></i>
301
+ </div>
302
+ <h3>Interactive Elements</h3>
303
+ <p>JavaScript-powered interactions that respond to user input, creating engaging and dynamic experiences.</p>
304
+ </div>
305
+ </div>
306
+ </section>
307
+
308
+ <section class="demo-section" id="demo">
309
+ <div class="demo-container">
310
+ <h2>Interactive Demo</h2>
311
+ <p>Click the buttons below to see dynamic content in action!</p>
312
+ <button class="demo-button" onclick="showDemo('hello')">Say Hello</button>
313
+ <button class="demo-button" onclick="showDemo('time')">Show Time</button>
314
+ <button class="demo-button" onclick="showDemo('random')">Random Number</button>
315
+ <div class="demo-output" id="demoOutput">
316
+ Click a button to see the magic!
317
+ </div>
318
+ </div>
319
+ </section>
320
+
321
+ <footer id="about">
322
+ <div class="footer-links">
323
+ <a href="#features">Features</a>
324
+ <a href="#demo">Demo</a>
325
+ <a href="#about">About</a>
326
+ <a href="#contact">Contact</a>
327
+ </div>
328
+ <p>&copy; 2023 AnyCoder. All rights reserved.</p>
329
+ </footer>
330
+
331
+ <div class="built-with">
332
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
333
+ </div>
334
+
335
+ <script>
336
+ function showDemo(type) {
337
+ const output = document.getElementById('demoOutput');
338
+ let content = '';
339
+
340
+ switch(type) {
341
+ case 'hello':
342
+ content = 'Hello, World! 🌍';
343
+ break;
344
+ case 'time':
345
+ const now = new Date();
346
+ content = `Current time: ${now.toLocaleTimeString()}`;
347
+ break;
348
+ case 'random':
349
+ const randomNum = Math.floor(Math.random() * 100) + 1;
350
+ content = `Random number: ${randomNum}`;
351
+ break;
352
+ default:
353
+ content = 'Click a button to see the magic!';
354
+ }
355
+
356
+ output.textContent = content;
357
+ output.style.animation = 'none';
358
+ void output.offsetWidth; // Trigger reflow
359
+ output.style.animation = 'fadeIn 0.5s ease';
360
+ }
361
+
362
+ // Add animation to demo output
363
+ const style = document.createElement('style');
364
+ style.textContent = `
365
+ @keyframes fadeIn {
366
+ from { opacity: 0; transform: translateY(10px); }
367
+ to { opacity: 1; transform: translateY(0); }
368
+ }
369
+ `;
370
+ document.head.appendChild(style);
371
+ </script>
372
+ </body>
373
+ </html>