Hugging Face's logo

Spaces:
samirerty
/
anycoder-9fcf6f4a
Running

App Files Community
samirerty commited on
Commit
136158e
·
verified ·
1 Parent(s): 706e016

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +363 -19
index.html CHANGED
@@ -1,19 +1,363 @@
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>Simple Chat Room</title>
7
+ <!-- Importing Phosphor Icons for sleek, minimalist vector graphics -->
8
+ <script src="https://unpkg.com/@phosphor-icons/web"></script>
9
+
10
+ <style>
11
+ /*
12
+ * MODERN CSS RESET & VARIABLES
13
+ */
14
+ :root {
15
+ /* iOS System Font Stack */
16
+ --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
17
+
18
+ /* Glassmorphism Tokens */
19
+ --glass-bg: rgba(255, 255, 255, 0.65);
20
+ --glass-border: rgba(255, 255, 255, 0.4);
21
+ --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
22
+ --blur-strength: 20px;
23
+
24
+ /* Vibrant Accents */
25
+ --primary-gradient: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
26
+ --text-main: #1d1d1f;
27
+ --text-secondary: #86868b;
28
+
29
+ /* Spacing & Radius */
30
+ --radius-lg: 24px;
31
+ --radius-md: 16px;
32
+ --radius-pill: 999px;
33
+ }
34
+
35
+ * {
36
+ margin: 0;
37
+ padding: 0;
38
+ box-sizing: border-box;
39
+ }
40
+
41
+ body {
42
+ font-family: var(--font-stack);
43
+ background-color: #f2f2f7; /* iOS Light Gray Background */
44
+ color: var(--text-main);
45
+ min-height: 100vh;
46
+ display: flex;
47
+ align-items: center;
48
+ justify-content: center;
49
+ overflow-x: hidden;
50
+ position: relative;
51
+ }
52
+
53
+ /*
54
+ * STUDIO LIGHTING BACKGROUND
55
+ * Creating depth of field with blurred blobs
56
+ */
57
+ .ambient-light {
58
+ position: fixed;
59
+ top: 0;
60
+ left: 0;
61
+ width: 100%;
62
+ height: 100%;
63
+ z-index: -1;
64
+ background: #f2f2f7;
65
+ }
66
+
67
+ .orb {
68
+ position: absolute;
69
+ border-radius: 50%;
70
+ filter: blur(80px);
71
+ opacity: 0.6;
72
+ animation: float 10s infinite ease-in-out alternate;
73
+ }
74
+
75
+ .orb-1 {
76
+ width: 400px;
77
+ height: 400px;
78
+ background: #ff9a9e;
79
+ top: -100px;
80
+ left: -100px;
81
+ }
82
+
83
+ .orb-2 {
84
+ width: 500px;
85
+ height: 500px;
86
+ background: #a18cd1;
87
+ bottom: -150px;
88
+ right: -100px;
89
+ animation-delay: -5s;
90
+ }
91
+
92
+ .orb-3 {
93
+ width: 300px;
94
+ height: 300px;
95
+ background: #fbc2eb;
96
+ top: 40%;
97
+ left: 50%;
98
+ transform: translate(-50%, -50%);
99
+ opacity: 0.4;
100
+ }
101
+
102
+ @keyframes float {
103
+ 0% { transform: translate(0, 0); }
104
+ 100% { transform: translate(30px, 50px); }
105
+ }
106
+
107
+ /*
108
+ * MAIN GLASS CONTAINER
109
+ */
110
+ .container {
111
+ width: 90%;
112
+ max-width: 1000px;
113
+ background: var(--glass-bg);
114
+ backdrop-filter: blur(var(--blur-strength));
115
+ -webkit-backdrop-filter: blur(var(--blur-strength));
116
+ border: 1px solid var(--glass-border);
117
+ border-radius: var(--radius-lg);
118
+ box-shadow: var(--glass-shadow);
119
+ padding: 3rem 2rem;
120
+ text-align: center;
121
+ position: relative;
122
+ overflow: hidden;
123
+ animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
124
+ }
125
+
126
+ @keyframes slideUp {
127
+ from { opacity: 0; transform: translateY(40px); }
128
+ to { opacity: 1; transform: translateY(0); }
129
+ }
130
+
131
+ /* Top Header Link */
132
+ .top-bar {
133
+ position: absolute;
134
+ top: 20px;
135
+ right: 20px;
136
+ z-index: 10;
137
+ }
138
+
139
+ .anycoder-link {
140
+ font-size: 0.75rem;
141
+ font-weight: 500;
142
+ color: var(--text-secondary);
143
+ text-decoration: none;
144
+ padding: 6px 12px;
145
+ background: rgba(255, 255, 255, 0.5);
146
+ border-radius: var(--radius-pill);
147
+ transition: all 0.3s ease;
148
+ }
149
+
150
+ .anycoder-link:hover {
151
+ color: #007AFF;
152
+ background: rgba(255, 255, 255, 0.9);
153
+ }
154
+
155
+ /*
156
+ * HERO SECTION
157
+ */
158
+ .hero h1 {
159
+ font-size: 3rem;
160
+ font-weight: 700;
161
+ letter-spacing: -0.02em;
162
+ margin-bottom: 0.5rem;
163
+ background: var(--primary-gradient);
164
+ -webkit-background-clip: text;
165
+ -webkit-text-fill-color: transparent;
166
+ display: inline-block;
167
+ }
168
+
169
+ .subtitle {
170
+ font-size: 1.25rem;
171
+ color: var(--text-secondary);
172
+ font-weight: 400;
173
+ margin-bottom: 3rem;
174
+ }
175
+
176
+ /*
177
+ * FEATURES SECTION
178
+ */
179
+ .features {
180
+ display: grid;
181
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
182
+ gap: 2rem;
183
+ margin-bottom: 3rem;
184
+ }
185
+
186
+ .feature {
187
+ background: rgba(255, 255, 255, 0.4);
188
+ border: 1px solid rgba(255, 255, 255, 0.6);
189
+ padding: 2rem;
190
+ border-radius: var(--radius-md);
191
+ transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
192
+ position: relative;
193
+ overflow: hidden;
194
+ }
195
+
196
+ .feature:hover {
197
+ transform: translateY(-8px);
198
+ background: rgba(255, 255, 255, 0.7);
199
+ box-shadow: 0 15px 30px rgba(0,0,0,0.05);
200
+ }
201
+
202
+ .icon-wrapper {
203
+ width: 60px;
204
+ height: 60px;
205
+ background: rgba(255, 255, 255, 0.8);
206
+ border-radius: 50%;
207
+ display: flex;
208
+ align-items: center;
209
+ justify-content: center;
210
+ margin: 0 auto 1.5rem auto;
211
+ font-size: 1.75rem;
212
+ color: #007AFF;
213
+ box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
214
+ }
215
+
216
+ .feature h3 {
217
+ font-size: 1.1rem;
218
+ margin-bottom: 0.5rem;
219
+ color: var(--text-main);
220
+ }
221
+
222
+ .feature p {
223
+ font-size: 0.9rem;
224
+ color: var(--text-secondary);
225
+ line-height: 1.5;
226
+ }
227
+
228
+ /*
229
+ * CTA SECTION
230
+ */
231
+ .cta {
232
+ display: flex;
233
+ gap: 1rem;
234
+ justify-content: center;
235
+ flex-wrap: wrap;
236
+ }
237
+
238
+ .btn {
239
+ padding: 14px 32px;
240
+ border-radius: var(--radius-pill);
241
+ text-decoration: none;
242
+ font-weight: 600;
243
+ font-size: 1rem;
244
+ transition: all 0.3s ease;
245
+ display: inline-flex;
246
+ align-items: center;
247
+ gap: 8px;
248
+ }
249
+
250
+ .btn-primary {
251
+ background: var(--text-main); /* Black/Dark Gray for iOS primary */
252
+ color: white;
253
+ box-shadow: 0 4px 15px rgba(0,0,0,0.2);
254
+ }
255
+
256
+ .btn-primary:hover {
257
+ transform: scale(1.02);
258
+ background: #000;
259
+ box-shadow: 0 8px 25px rgba(0,0,0,0.3);
260
+ }
261
+
262
+ .btn-secondary {
263
+ background: rgba(255, 255, 255, 0.5);
264
+ color: var(--text-main);
265
+ border: 1px solid rgba(0,0,0,0.05);
266
+ }
267
+
268
+ .btn-secondary:hover {
269
+ background: rgba(255, 255, 255, 0.8);
270
+ }
271
+
272
+ /*
273
+ * RESPONSIVE DESIGN
274
+ */
275
+ @media (max-width: 768px) {
276
+ .container {
277
+ width: 95%;
278
+ padding: 2rem 1.5rem;
279
+ }
280
+
281
+ .hero h1 {
282
+ font-size: 2.2rem;
283
+ }
284
+
285
+ .features {
286
+ grid-template-columns: 1fr;
287
+ }
288
+
289
+ .cta {
290
+ flex-direction: column;
291
+ width: 100%;
292
+ }
293
+
294
+ .btn {
295
+ width: 100%;
296
+ justify-content: center;
297
+ }
298
+ }
299
+ </style>
300
+ </head>
301
+ <body>
302
+
303
+ <!-- Ambient Background Lighting -->
304
+ <div class="ambient-light">
305
+ <div class="orb orb-1"></div>
306
+ <div class="orb orb-2"></div>
307
+ <div class="orb orb-3"></div>
308
+ </div>
309
+
310
+ <div class="container">
311
+ <!-- Mandatory Header Link -->
312
+ <div class="top-bar">
313
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
314
+ Built with anycoder
315
+ </a>
316
+ </div>
317
+
318
+ <div class="hero">
319
+ <h1>Simple Chat Room</h1>
320
+ <p class="subtitle">A space to connect with friends effortlessly.</p>
321
+ </div>
322
+
323
+ <div class="features">
324
+ <!-- Feature 1 -->
325
+ <div class="feature">
326
+ <div class="icon-wrapper">
327
+ <i class="ph ph-lock-key"></i>
328
+ </div>
329
+ <h3>Easy Registration</h3>
330
+ <p>Sign up securely with your mobile number in seconds.</p>
331
+ </div>
332
+
333
+ <!-- Feature 2 -->
334
+ <div class="feature">
335
+ <div class="icon-wrapper">
336
+ <i class="ph ph-users-three"></i>
337
+ </div>
338
+ <h3>Create Rooms</h3>
339
+ <p>Build up to 3 different custom chat rooms for your groups.</p>
340
+ </div>
341
+
342
+ <!-- Feature 3 -->
343
+ <div class="feature">
344
+ <div class="icon-wrapper">
345
+ <i class="ph ph-chat-circle-dots"></i>
346
+ </div>
347
+ <h3>Live Chat</h3>
348
+ <p>Experience fast, real-time messaging with zero latency.</p>
349
+ </div>
350
+ </div>
351
+
352
+ <div class="cta">
353
+ <a href="#" class="btn btn-primary">
354
+ Get Started <i class="ph ph-arrow-right"></i>
355
+ </a>
356
+ <a href="#" class="btn btn-secondary">
357
+ Login
358
+ </a>
359
+ </div>
360
+ </div>
361
+
362
+ </body>
363
+ </html>