Hugging Face's logo

Spaces:
karamMighty
/
anycoder-7b158c69
Running

App Files Community
karamMighty commited on
Commit
497a77b
·
verified ·
1 Parent(s): 215d0cc

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +374 -19
index.html CHANGED
@@ -1,19 +1,374 @@
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 App</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #4a6fa5;
11
+ --secondary-color: #166088;
12
+ --accent-color: #4fc3f7;
13
+ --text-color: #333;
14
+ --light-color: #f8f9fa;
15
+ --shadow-color: rgba(0, 0, 0, 0.1);
16
+ --transition-speed: 0.3s;
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
24
+ }
25
+
26
+ body {
27
+ background-color: var(--light-color);
28
+ color: var(--text-color);
29
+ line-height: 1.6;
30
+ min-height: 100vh;
31
+ display: flex;
32
+ flex-direction: column;
33
+ }
34
+
35
+ header {
36
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
37
+ color: white;
38
+ padding: 1.5rem;
39
+ box-shadow: 0 2px 10px var(--shadow-color);
40
+ position: sticky;
41
+ top: 0;
42
+ z-index: 100;
43
+ }
44
+
45
+ .header-content {
46
+ max-width: 1200px;
47
+ margin: 0 auto;
48
+ display: flex;
49
+ justify-content: space-between;
50
+ align-items: center;
51
+ }
52
+
53
+ .logo {
54
+ font-size: 1.5rem;
55
+ font-weight: 700;
56
+ display: flex;
57
+ align-items: center;
58
+ gap: 0.5rem;
59
+ }
60
+
61
+ .logo i {
62
+ font-size: 1.8rem;
63
+ }
64
+
65
+ .header-links {
66
+ display: flex;
67
+ gap: 1rem;
68
+ }
69
+
70
+ .header-links a {
71
+ color: white;
72
+ text-decoration: none;
73
+ padding: 0.5rem 1rem;
74
+ border-radius: 20px;
75
+ transition: all var(--transition-speed) ease;
76
+ }
77
+
78
+ .header-links a:hover {
79
+ background-color: rgba(255, 255, 255, 0.2);
80
+ }
81
+
82
+ .anycoder-link {
83
+ background-color: rgba(255, 255, 255, 0.3) !important;
84
+ }
85
+
86
+ main {
87
+ flex: 1;
88
+ max-width: 1200px;
89
+ margin: 2rem auto;
90
+ padding: 0 1rem;
91
+ display: grid;
92
+ place-items: center;
93
+ }
94
+
95
+ .hello-container {
96
+ text-align: center;
97
+ padding: 3rem;
98
+ background-color: white;
99
+ border-radius: 15px;
100
+ box-shadow: 0 10px 30px var(--shadow-color);
101
+ width: 100%;
102
+ max-width: 600px;
103
+ transform: translateY(0);
104
+ opacity: 1;
105
+ animation: fadeInUp 0.8s ease-out;
106
+ }
107
+
108
+ .hello-title {
109
+ font-size: 4rem;
110
+ font-weight: 800;
111
+ margin-bottom: 1rem;
112
+ background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
113
+ -webkit-background-clip: text;
114
+ background-clip: text;
115
+ color: transparent;
116
+ text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
117
+ }
118
+
119
+ .hello-subtitle {
120
+ font-size: 1.2rem;
121
+ color: var(--secondary-color);
122
+ margin-bottom: 2rem;
123
+ }
124
+
125
+ .hello-message {
126
+ font-size: 1.1rem;
127
+ margin-bottom: 2rem;
128
+ line-height: 1.8;
129
+ }
130
+
131
+ .hello-icon {
132
+ font-size: 4rem;
133
+ color: var(--accent-color);
134
+ margin-bottom: 1rem;
135
+ animation: pulse 2s infinite;
136
+ }
137
+
138
+ .btn {
139
+ display: inline-block;
140
+ padding: 0.8rem 1.5rem;
141
+ background-color: var(--primary-color);
142
+ color: white;
143
+ border: none;
144
+ border-radius: 50px;
145
+ cursor: pointer;
146
+ font-size: 1rem;
147
+ font-weight: 600;
148
+ text-decoration: none;
149
+ transition: all var(--transition-speed) ease;
150
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
151
+ }
152
+
153
+ .btn:hover {
154
+ background-color: var(--secondary-color);
155
+ transform: translateY(-2px);
156
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
157
+ }
158
+
159
+ .btn:active {
160
+ transform: translateY(0);
161
+ }
162
+
163
+ .features {
164
+ display: grid;
165
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
166
+ gap: 2rem;
167
+ margin-top: 3rem;
168
+ width: 100%;
169
+ }
170
+
171
+ .feature-card {
172
+ background-color: white;
173
+ padding: 2rem;
174
+ border-radius: 10px;
175
+ box-shadow: 0 5px 15px var(--shadow-color);
176
+ transition: all var(--transition-speed) ease;
177
+ text-align: center;
178
+ }
179
+
180
+ .feature-card:hover {
181
+ transform: translateY(-5px);
182
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
183
+ }
184
+
185
+ .feature-icon {
186
+ font-size: 2.5rem;
187
+ color: var(--accent-color);
188
+ margin-bottom: 1rem;
189
+ }
190
+
191
+ .feature-title {
192
+ font-size: 1.3rem;
193
+ font-weight: 700;
194
+ margin-bottom: 0.5rem;
195
+ color: var(--primary-color);
196
+ }
197
+
198
+ footer {
199
+ background-color: var(--secondary-color);
200
+ color: white;
201
+ text-align: center;
202
+ padding: 2rem;
203
+ margin-top: auto;
204
+ }
205
+
206
+ .social-links {
207
+ display: flex;
208
+ justify-content: center;
209
+ gap: 1.5rem;
210
+ margin-bottom: 1rem;
211
+ }
212
+
213
+ .social-links a {
214
+ color: white;
215
+ font-size: 1.5rem;
216
+ transition: all var(--transition-speed) ease;
217
+ }
218
+
219
+ .social-links a:hover {
220
+ color: var(--accent-color);
221
+ transform: translateY(-3px);
222
+ }
223
+
224
+ .copyright {
225
+ margin-top: 1rem;
226
+ font-size: 0.9rem;
227
+ opacity: 0.8;
228
+ }
229
+
230
+ @keyframes fadeInUp {
231
+ from {
232
+ transform: translateY(20px);
233
+ opacity: 0;
234
+ }
235
+ to {
236
+ transform: translateY(0);
237
+ opacity: 1;
238
+ }
239
+ }
240
+
241
+ @keyframes pulse {
242
+ 0% {
243
+ transform: scale(1);
244
+ }
245
+ 50% {
246
+ transform: scale(1.05);
247
+ }
248
+ 100% {
249
+ transform: scale(1);
250
+ }
251
+ }
252
+
253
+ @media (max-width: 768px) {
254
+ .header-content {
255
+ flex-direction: column;
256
+ gap: 1rem;
257
+ }
258
+
259
+ .hello-title {
260
+ font-size: 3rem;
261
+ }
262
+
263
+ .features {
264
+ grid-template-columns: 1fr;
265
+ }
266
+ }
267
+
268
+ @media (max-width: 480px) {
269
+ .hello-title {
270
+ font-size: 2.5rem;
271
+ }
272
+
273
+ .hello-container {
274
+ padding: 2rem 1.5rem;
275
+ }
276
+ }
277
+ </style>
278
+ </head>
279
+ <body>
280
+ <header>
281
+ <div class="header-content">
282
+ <div class="logo">
283
+ <i class="fas fa-hand-paper"></i>
284
+ <span>HelloApp</span>
285
+ </div>
286
+ <div class="header-links">
287
+ <a href="#">Home</a>
288
+ <a href="#">Features</a>
289
+ <a href="#">About</a>
290
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a>
291
+ </div>
292
+ </div>
293
+ </header>
294
+
295
+ <main>
296
+ <div class="hello-container">
297
+ <div class="hello-icon">
298
+ <i class="fas fa-hand-paper"></i>
299
+ </div>
300
+ <h1 class="hello-title">Hello!</h1>
301
+ <p class="hello-subtitle">Welcome to our application</p>
302
+ <p class="hello-message">
303
+ This is a modern, responsive web application built with pure HTML, CSS, and JavaScript.
304
+ It demonstrates clean design principles and modern web development techniques.
305
+ </p>
306
+ <a href="#" class="btn">Get Started</a>
307
+ </div>
308
+
309
+ <div class="features">
310
+ <div class="feature-card">
311
+ <div class="feature-icon">
312
+ <i class="fas fa-mobile-alt"></i>
313
+ </div>
314
+ <h3 class="feature-title">Responsive</h3>
315
+ <p>Works perfectly on all device sizes from mobile to desktop</p>
316
+ </div>
317
+ <div class="feature-card">
318
+ <div class="feature-icon">
319
+ <i class="fas fa-tachometer-alt"></i>
320
+ </div>
321
+ <h3 class="feature-title">Fast</h3>
322
+ <p>Optimized for performance with clean, efficient code</p>
323
+ </div>
324
+ <div class="feature-card">
325
+ <div class="feature-icon">
326
+ <i class="fas fa-paint-brush"></i>
327
+ </div>
328
+ <h3 class="feature-title">Beautiful</h3>
329
+ <p>Modern design with smooth animations and transitions</p>
330
+ </div>
331
+ </div>
332
+ </main>
333
+
334
+ <footer>
335
+ <div class="social-links">
336
+ <a href="#"><i class="fab fa-twitter"></i></a>
337
+ <a href="#"><i class="fab fa-facebook"></i></a>
338
+ <a href="#"><i class="fab fa-github"></i></a>
339
+ <a href="#"><i class="fab fa-instagram"></i></a>
340
+ </div>
341
+ <p class="copyright">© 2023 HelloApp. All rights reserved.</p>
342
+ </footer>
343
+
344
+ <script>
345
+ // Simple interaction for the button
346
+ document.querySelector('.btn').addEventListener('click', function(e) {
347
+ e.preventDefault();
348
+ alert('Welcome! Thanks for clicking!');
349
+ });
350
+
351
+ // Add some dynamic behavior to feature cards
352
+ const featureCards = document.querySelectorAll('.feature-card');
353
+ featureCards.forEach(card => {
354
+ card.addEventListener('mouseenter', () => {
355
+ card.style.transform = 'translateY(-5px)';
356
+ });
357
+
358
+ card.addEventListener('mouseleave', () => {
359
+ card.style.transform = 'translateY(0)';
360
+ });
361
+ });
362
+
363
+ // Change header color on scroll
364
+ window.addEventListener('scroll', () => {
365
+ const header = document.querySelector('header');
366
+ if (window.scrollY > 100) {
367
+ header.style.background = 'linear-gradient(135deg, var(--secondary-color), var(--primary-color))';
368
+ } else {
369
+ header.style.background = 'linear-gradient(135deg, var(--primary-color), var(--secondary-color))';
370
+ }
371
+ });
372
+ </script>
373
+ </body>
374
+ </html>