Hugging Face's logo

Spaces:
samirerty
/
anycoder-068d617b
Running

App Files Community
samirerty commited on
Commit
7ccee3e
·
verified ·
1 Parent(s): 4c0e46a

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +338 -19
index.html CHANGED
@@ -1,19 +1,338 @@
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>Chat App | Login</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
10
+
11
+ :root {
12
+ --primary-color: #7c3aed;
13
+ --primary-light: #a78bfa;
14
+ --dark-bg: #0f172a;
15
+ --dark-glass: rgba(15, 23, 42, 0.7);
16
+ --text-light: #e2e8f0;
17
+ --text-muted: #94a3b8;
18
+ --border-radius: 12px;
19
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ body {
29
+ font-family: 'Poppins', sans-serif;
30
+ background: linear-gradient(135deg, #1e293b, #0f172a);
31
+ min-height: 100vh;
32
+ display: flex;
33
+ justify-content: center;
34
+ align-items: center;
35
+ padding: 20px;
36
+ position: relative;
37
+ overflow: hidden;
38
+ }
39
+
40
+ body::before {
41
+ content: '';
42
+ position: absolute;
43
+ top: -50%;
44
+ left: -50%;
45
+ width: 200%;
46
+ height: 200%;
47
+ background: radial-gradient(circle, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
48
+ animation: float 15s infinite alternate;
49
+ z-index: -1;
50
+ }
51
+
52
+ @keyframes float {
53
+ 0% {
54
+ transform: translate(0, 0);
55
+ }
56
+ 50% {
57
+ transform: translate(30px, 30px);
58
+ }
59
+ 100% {
60
+ transform: translate(-30px, -30px);
61
+ }
62
+ }
63
+
64
+ .container {
65
+ width: 100%;
66
+ max-width: 420px;
67
+ perspective: 1000px;
68
+ }
69
+
70
+ .auth-box {
71
+ background: var(--dark-glass);
72
+ backdrop-filter: blur(16px);
73
+ -webkit-backdrop-filter: blur(16px);
74
+ border-radius: var(--border-radius);
75
+ padding: 40px;
76
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
77
+ border: 1px solid rgba(255, 255, 255, 0.05);
78
+ transform-style: preserve-3d;
79
+ transition: var(--transition);
80
+ position: relative;
81
+ overflow: hidden;
82
+ }
83
+
84
+ .auth-box::before {
85
+ content: '';
86
+ position: absolute;
87
+ top: 0;
88
+ left: 0;
89
+ width: 100%;
90
+ height: 4px;
91
+ background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
92
+ }
93
+
94
+ .logo {
95
+ text-align: center;
96
+ margin-bottom: 30px;
97
+ color: var(--text-light);
98
+ display: flex;
99
+ flex-direction: column;
100
+ align-items: center;
101
+ }
102
+
103
+ .logo i {
104
+ font-size: 36px;
105
+ color: var(--primary-light);
106
+ margin-bottom: 10px;
107
+ }
108
+
109
+ .logo h1 {
110
+ font-size: 24px;
111
+ font-weight: 600;
112
+ letter-spacing: 1px;
113
+ }
114
+
115
+ .form-container {
116
+ position: relative;
117
+ height: 380px;
118
+ overflow: hidden;
119
+ }
120
+
121
+ .form {
122
+ position: absolute;
123
+ width: 100%;
124
+ transition: var(--transition);
125
+ }
126
+
127
+ .form.login {
128
+ transform: translateX(0);
129
+ opacity: 1;
130
+ }
131
+
132
+ .form.register {
133
+ transform: translateX(100%);
134
+ opacity: 0;
135
+ }
136
+
137
+ .auth-box.register .form.login {
138
+ transform: translateX(-100%);
139
+ opacity: 0;
140
+ }
141
+
142
+ .auth-box.register .form.register {
143
+ transform: translateX(0);
144
+ opacity: 1;
145
+ }
146
+
147
+ .form-group {
148
+ margin-bottom: 20px;
149
+ position: relative;
150
+ }
151
+
152
+ .form-group label {
153
+ display: block;
154
+ color: var(--text-muted);
155
+ font-size: 14px;
156
+ margin-bottom: 8px;
157
+ }
158
+
159
+ .form-control {
160
+ width: 100%;
161
+ padding: 12px 16px;
162
+ background: rgba(255, 255, 255, 0.05);
163
+ border: 1px solid rgba(255, 255, 255, 0.1);
164
+ border-radius: var(--border-radius);
165
+ color: var(--text-light);
166
+ font-family: inherit;
167
+ font-size: 15px;
168
+ transition: var(--transition);
169
+ }
170
+
171
+ .form-control:focus {
172
+ outline: none;
173
+ border-color: var(--primary-light);
174
+ box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
175
+ }
176
+
177
+ .btn {
178
+ width: 100%;
179
+ padding: 12px;
180
+ background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
181
+ border: none;
182
+ border-radius: var(--border-radius);
183
+ color: white;
184
+ font-weight: 500;
185
+ font-size: 16px;
186
+ cursor: pointer;
187
+ transition: var(--transition);
188
+ margin-top: 10px;
189
+ }
190
+
191
+ .btn:hover {
192
+ transform: translateY(-2px);
193
+ box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
194
+ }
195
+
196
+ .switch-form {
197
+ text-align: center;
198
+ margin-top: 20px;
199
+ color: var(--text-muted);
200
+ font-size: 14px;
201
+ }
202
+
203
+ .switch-btn {
204
+ background: none;
205
+ border: none;
206
+ color: var(--primary-light);
207
+ font-weight: 500;
208
+ cursor: pointer;
209
+ transition: var(--transition);
210
+ padding: 0;
211
+ font-family: inherit;
212
+ font-size: inherit;
213
+ }
214
+
215
+ .switch-btn:hover {
216
+ color: var(--primary-color);
217
+ text-decoration: underline;
218
+ }
219
+
220
+ .footer {
221
+ text-align: center;
222
+ margin-top: 30px;
223
+ color: var(--text-muted);
224
+ font-size: 12px;
225
+ }
226
+
227
+ .footer a {
228
+ color: var(--primary-light);
229
+ text-decoration: none;
230
+ transition: var(--transition);
231
+ }
232
+
233
+ .footer a:hover {
234
+ color: var(--primary-color);
235
+ }
236
+
237
+ @media (max-width: 480px) {
238
+ .auth-box {
239
+ padding: 30px 20px;
240
+ }
241
+
242
+ .logo h1 {
243
+ font-size: 20px;
244
+ }
245
+
246
+ .form-container {
247
+ height: 340px;
248
+ }
249
+ }
250
+ </style>
251
+ </head>
252
+ <body>
253
+ <div class="container">
254
+ <div class="auth-box" id="authBox">
255
+ <div class="logo">
256
+ <i class="fas fa-comment-dots"></i>
257
+ <h1>Chat App</h1>
258
+ </div>
259
+
260
+ <div class="form-container">
261
+ <form class="form login" id="loginForm">
262
+ <div class="form-group">
263
+ <label for="loginEmail">Email</label>
264
+ <input type="email" id="loginEmail" class="form-control" placeholder="Enter your email" required>
265
+ </div>
266
+
267
+ <div class="form-group">
268
+ <label for="loginPassword">Password</label>
269
+ <input type="password" id="loginPassword" class="form-control" placeholder="Enter your password" required>
270
+ </div>
271
+
272
+ <button type="submit" class="btn">Login</button>
273
+
274
+ <div class="switch-form">
275
+ Don't have an account? <button type="button" class="switch-btn" id="switchToRegister">Register</button>
276
+ </div>
277
+ </form>
278
+
279
+ <form class="form register" id="registerForm">
280
+ <div class="form-group">
281
+ <label for="registerName">Full Name</label>
282
+ <input type="text" id="registerName" class="form-control" placeholder="Enter your full name" required>
283
+ </div>
284
+
285
+ <div class="form-group">
286
+ <label for="registerEmail">Email</label>
287
+ <input type="email" id="registerEmail" class="form-control" placeholder="Enter your email" required>
288
+ </div>
289
+
290
+ <div class="form-group">
291
+ <label for="registerPassword">Password</label>
292
+ <input type="password" id="registerPassword" class="form-control" placeholder="Create a password" required>
293
+ </div>
294
+
295
+ <button type="submit" class="btn">Register</button>
296
+
297
+ <div class="switch-form">
298
+ Already have an account? <button type="button" class="switch-btn" id="switchToLogin">Login</button>
299
+ </div>
300
+ </form>
301
+ </div>
302
+
303
+ <div class="footer">
304
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <script>
310
+ document.addEventListener('DOMContentLoaded', function() {
311
+ const authBox = document.getElementById('authBox');
312
+ const switchToRegister = document.getElementById('switchToRegister');
313
+ const switchToLogin = document.getElementById('switchToLogin');
314
+
315
+ switchToRegister.addEventListener('click', function() {
316
+ authBox.classList.add('register');
317
+ });
318
+
319
+ switchToLogin.addEventListener('click', function() {
320
+ authBox.classList.remove('register');
321
+ });
322
+
323
+ // Form submission
324
+ document.getElementById('loginForm').addEventListener('submit', function(e) {
325
+ e.preventDefault();
326
+ // Add your login logic here
327
+ alert('Login functionality would be implemented here');
328
+ });
329
+
330
+ document.getElementById('registerForm').addEventListener('submit', function(e) {
331
+ e.preventDefault();
332
+ // Add your registration logic here
333
+ alert('Registration functionality would be implemented here');
334
+ });
335
+ });
336
+ </script>
337
+ </body>
338
+ </html>