ubaliiringim commited on
Commit
349d4dd
·
verified ·
1 Parent(s): 50ccfad

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +397 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Html
3
- emoji: 🌖
4
  colorFrom: pink
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: html
3
+ emoji: 🐳
4
  colorFrom: pink
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,397 @@
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>Auth System | Login & Signup</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <!-- Firebase SDK -->
10
+ <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
11
+ <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
12
+ <style>
13
+ .auth-container {
14
+ perspective: 1000px;
15
+ }
16
+ .auth-form {
17
+ transition: transform 0.6s;
18
+ transform-style: preserve-3d;
19
+ }
20
+ .flipped {
21
+ transform: rotateY(180deg);
22
+ }
23
+ .form-front, .form-back {
24
+ backface-visibility: hidden;
25
+ position: absolute;
26
+ width: 100%;
27
+ }
28
+ .form-back {
29
+ transform: rotateY(180deg);
30
+ }
31
+ .input-field:focus-within {
32
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
33
+ }
34
+ .error-message {
35
+ animation: shake 0.5s;
36
+ }
37
+ @keyframes shake {
38
+ 0%, 100% { transform: translateX(0); }
39
+ 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
40
+ 20%, 40%, 60%, 80% { transform: translateX(5px); }
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center p-4">
45
+ <div class="auth-container w-full max-w-md">
46
+ <div class="auth-form relative w-full h-full">
47
+ <!-- Login Form (Front) -->
48
+ <div class="form-front bg-white rounded-xl shadow-2xl p-8">
49
+ <div class="text-center mb-8">
50
+ <h1 class="text-3xl font-bold text-indigo-600">Welcome Back</h1>
51
+ <p class="text-gray-500 mt-2">Login to access your account</p>
52
+ </div>
53
+
54
+ <div id="login-error" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"></div>
55
+
56
+ <form id="login-form" class="space-y-6">
57
+ <div class="input-field bg-gray-50 rounded-lg p-3 border border-gray-200 transition-all">
58
+ <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
59
+ <div class="flex items-center">
60
+ <i class="fas fa-envelope text-gray-400 mr-2"></i>
61
+ <input type="email" id="login-email" required class="w-full bg-transparent outline-none text-gray-700">
62
+ </div>
63
+ </div>
64
+
65
+ <div class="input-field bg-gray-50 rounded-lg p-3 border border-gray-200 transition-all">
66
+ <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
67
+ <div class="flex items-center">
68
+ <i class="fas fa-lock text-gray-400 mr-2"></i>
69
+ <input type="password" id="login-password" required class="w-full bg-transparent outline-none text-gray-700">
70
+ <button type="button" class="text-gray-400 hover:text-gray-600" onclick="togglePassword('login-password', this)">
71
+ <i class="fas fa-eye"></i>
72
+ </button>
73
+ </div>
74
+ </div>
75
+
76
+ <div class="flex items-center justify-between">
77
+ <div class="flex items-center">
78
+ <input id="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
79
+ <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
80
+ </div>
81
+ <a href="#" class="text-sm text-indigo-600 hover:text-indigo-500">Forgot password?</a>
82
+ </div>
83
+
84
+ <button type="submit" class="w-full bg-indigo-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-indigo-700 transition duration-300 flex items-center justify-center">
85
+ <span id="login-btn-text">Login</span>
86
+ <i id="login-spinner" class="fas fa-spinner fa-spin ml-2 hidden"></i>
87
+ </button>
88
+ </form>
89
+
90
+ <div class="mt-6">
91
+ <div class="relative">
92
+ <div class="absolute inset-0 flex items-center">
93
+ <div class="w-full border-t border-gray-300"></div>
94
+ </div>
95
+ <div class="relative flex justify-center text-sm">
96
+ <span class="px-2 bg-white text-gray-500">Or continue with</span>
97
+ </div>
98
+ </div>
99
+
100
+ <div class="mt-6 grid grid-cols-2 gap-3">
101
+ <button onclick="signInWithGoogle()" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
102
+ <i class="fab fa-google text-red-500 mr-2"></i> Google
103
+ </button>
104
+ <button onclick="signInWithGithub()" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
105
+ <i class="fab fa-github text-gray-800 mr-2"></i> GitHub
106
+ </button>
107
+ </div>
108
+
109
+ <p class="mt-6 text-center text-sm text-gray-600">
110
+ Don't have an account?
111
+ <button onclick="flipForm()" class="text-indigo-600 font-medium hover:text-indigo-500">Sign up</button>
112
+ </p>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Signup Form (Back) -->
117
+ <div class="form-back bg-white rounded-xl shadow-2xl p-8">
118
+ <div class="text-center mb-8">
119
+ <h1 class="text-3xl font-bold text-indigo-600">Create Account</h1>
120
+ <p class="text-gray-500 mt-2">Join us today!</p>
121
+ </div>
122
+
123
+ <div id="signup-error" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"></div>
124
+
125
+ <form id="signup-form" class="space-y-6">
126
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
127
+ <div class="input-field bg-gray-50 rounded-lg p-3 border border-gray-200 transition-all">
128
+ <label for="signup-firstname" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>
129
+ <div class="flex items-center">
130
+ <i class="fas fa-user text-gray-400 mr-2"></i>
131
+ <input type="text" id="signup-firstname" required class="w-full bg-transparent outline-none text-gray-700">
132
+ </div>
133
+ </div>
134
+
135
+ <div class="input-field bg-gray-50 rounded-lg p-3 border border-gray-200 transition-all">
136
+ <label for="signup-lastname" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>
137
+ <div class="flex items-center">
138
+ <i class="fas fa-user text-gray-400 mr-2"></i>
139
+ <input type="text" id="signup-lastname" required class="w-full bg-transparent outline-none text-gray-700">
140
+ </div>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="input-field bg-gray-50 rounded-lg p-3 border border-gray-200 transition-all">
145
+ <label for="signup-email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
146
+ <div class="flex items-center">
147
+ <i class="fas fa-envelope text-gray-400 mr-2"></i>
148
+ <input type="email" id="signup-email" required class="w-full bg-transparent outline-none text-gray-700">
149
+ </div>
150
+ </div>
151
+
152
+ <div class="input-field bg-gray-50 rounded-lg p-3 border border-gray-200 transition-all">
153
+ <label for="signup-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
154
+ <div class="flex items-center">
155
+ <i class="fas fa-lock text-gray-400 mr-2"></i>
156
+ <input type="password" id="signup-password" required class="w-full bg-transparent outline-none text-gray-700">
157
+ <button type="button" class="text-gray-400 hover:text-gray-600" onclick="togglePassword('signup-password', this)">
158
+ <i class="fas fa-eye"></i>
159
+ </button>
160
+ </div>
161
+ <p class="text-xs text-gray-500 mt-1">Must be at least 8 characters</p>
162
+ </div>
163
+
164
+ <div class="input-field bg-gray-50 rounded-lg p-3 border border-gray-200 transition-all">
165
+ <label for="signup-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
166
+ <div class="flex items-center">
167
+ <i class="fas fa-lock text-gray-400 mr-2"></i>
168
+ <input type="password" id="signup-confirm-password" required class="w-full bg-transparent outline-none text-gray-700">
169
+ <button type="button" class="text-gray-400 hover:text-gray-600" onclick="togglePassword('signup-confirm-password', this)">
170
+ <i class="fas fa-eye"></i>
171
+ </button>
172
+ </div>
173
+ </div>
174
+
175
+ <div class="flex items-center">
176
+ <input id="terms" type="checkbox" required class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
177
+ <label for="terms" class="ml-2 block text-sm text-gray-700">
178
+ I agree to the <a href="#" class="text-indigo-600 hover:text-indigo-500">Terms</a> and <a href="#" class="text-indigo-600 hover:text-indigo-500">Privacy Policy</a>
179
+ </label>
180
+ </div>
181
+
182
+ <button type="submit" class="w-full bg-indigo-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-indigo-700 transition duration-300 flex items-center justify-center">
183
+ <span id="signup-btn-text">Sign Up</span>
184
+ <i id="signup-spinner" class="fas fa-spinner fa-spin ml-2 hidden"></i>
185
+ </button>
186
+
187
+ <p class="mt-6 text-center text-sm text-gray-600">
188
+ Already have an account?
189
+ <button onclick="flipForm()" class="text-indigo-600 font-medium hover:text-indigo-500">Login</button>
190
+ </p>
191
+ </form>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Success Modal -->
197
+ <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
198
+ <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 text-center">
199
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
200
+ <i class="fas fa-check text-green-500 text-2xl"></i>
201
+ </div>
202
+ <h3 class="text-2xl font-bold text-gray-800 mb-2" id="success-title">Success!</h3>
203
+ <p class="text-gray-600 mb-6" id="success-message">Your account has been created successfully.</p>
204
+ <button onclick="closeSuccessModal()" class="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition">
205
+ Continue
206
+ </button>
207
+ </div>
208
+ </div>
209
+
210
+ <script>
211
+ // Firebase configuration - Replace with your actual config
212
+ const firebaseConfig = {
213
+ apiKey: "YOUR_API_KEY",
214
+ authDomain: "YOUR_AUTH_DOMAIN",
215
+ projectId: "YOUR_PROJECT_ID",
216
+ storageBucket: "YOUR_STORAGE_BUCKET",
217
+ messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
218
+ appId: "YOUR_APP_ID"
219
+ };
220
+
221
+ // Initialize Firebase
222
+ firebase.initializeApp(firebaseConfig);
223
+ const auth = firebase.auth();
224
+
225
+ // Toggle password visibility
226
+ function togglePassword(id, button) {
227
+ const input = document.getElementById(id);
228
+ const icon = button.querySelector('i');
229
+
230
+ if (input.type === 'password') {
231
+ input.type = 'text';
232
+ icon.classList.replace('fa-eye', 'fa-eye-slash');
233
+ } else {
234
+ input.type = 'password';
235
+ icon.classList.replace('fa-eye-slash', 'fa-eye');
236
+ }
237
+ }
238
+
239
+ // Flip between login and signup forms
240
+ function flipForm() {
241
+ document.querySelector('.auth-form').classList.toggle('flipped');
242
+ }
243
+
244
+ // Close success modal
245
+ function closeSuccessModal() {
246
+ document.getElementById('success-modal').classList.add('hidden');
247
+ }
248
+
249
+ // Handle login form submission
250
+ document.getElementById('login-form').addEventListener('submit', async (e) => {
251
+ e.preventDefault();
252
+
253
+ const email = document.getElementById('login-email').value;
254
+ const password = document.getElementById('login-password').value;
255
+ const errorElement = document.getElementById('login-error');
256
+ const loginBtnText = document.getElementById('login-btn-text');
257
+ const loginSpinner = document.getElementById('login-spinner');
258
+
259
+ // Show loading state
260
+ loginBtnText.textContent = 'Logging in...';
261
+ loginSpinner.classList.remove('hidden');
262
+
263
+ try {
264
+ const userCredential = await auth.signInWithEmailAndPassword(email, password);
265
+ // Login successful
266
+ showSuccess('Login Successful', 'You have been logged in successfully!');
267
+ } catch (error) {
268
+ // Handle errors
269
+ errorElement.textContent = getErrorMessage(error.code);
270
+ errorElement.classList.remove('hidden');
271
+ setTimeout(() => errorElement.classList.add('hidden'), 5000);
272
+ } finally {
273
+ // Reset button state
274
+ loginBtnText.textContent = 'Login';
275
+ loginSpinner.classList.add('hidden');
276
+ }
277
+ });
278
+
279
+ // Handle signup form submission
280
+ document.getElementById('signup-form').addEventListener('submit', async (e) => {
281
+ e.preventDefault();
282
+
283
+ const firstName = document.getElementById('signup-firstname').value;
284
+ const lastName = document.getElementById('signup-lastname').value;
285
+ const email = document.getElementById('signup-email').value;
286
+ const password = document.getElementById('signup-password').value;
287
+ const confirmPassword = document.getElementById('signup-confirm-password').value;
288
+ const errorElement = document.getElementById('signup-error');
289
+ const signupBtnText = document.getElementById('signup-btn-text');
290
+ const signupSpinner = document.getElementById('signup-spinner');
291
+
292
+ // Validate passwords match
293
+ if (password !== confirmPassword) {
294
+ errorElement.textContent = 'Passwords do not match';
295
+ errorElement.classList.remove('hidden');
296
+ setTimeout(() => errorElement.classList.add('hidden'), 5000);
297
+ return;
298
+ }
299
+
300
+ // Validate password length
301
+ if (password.length < 8) {
302
+ errorElement.textContent = 'Password must be at least 8 characters';
303
+ errorElement.classList.remove('hidden');
304
+ setTimeout(() => errorElement.classList.add('hidden'), 5000);
305
+ return;
306
+ }
307
+
308
+ // Show loading state
309
+ signupBtnText.textContent = 'Creating account...';
310
+ signupSpinner.classList.remove('hidden');
311
+
312
+ try {
313
+ const userCredential = await auth.createUserWithEmailAndPassword(email, password);
314
+ // Update user profile with name
315
+ await userCredential.user.updateProfile({
316
+ displayName: `${firstName} ${lastName}`
317
+ });
318
+
319
+ // Signup successful
320
+ showSuccess('Account Created', 'Your account has been created successfully!');
321
+ flipForm(); // Flip back to login form
322
+ } catch (error) {
323
+ // Handle errors
324
+ errorElement.textContent = getErrorMessage(error.code);
325
+ errorElement.classList.remove('hidden');
326
+ setTimeout(() => errorElement.classList.add('hidden'), 5000);
327
+ } finally {
328
+ // Reset button state
329
+ signupBtnText.textContent = 'Sign Up';
330
+ signupSpinner.classList.add('hidden');
331
+ }
332
+ });
333
+
334
+ // Google Sign In
335
+ function signInWithGoogle() {
336
+ const provider = new firebase.auth.GoogleAuthProvider();
337
+ auth.signInWithPopup(provider)
338
+ .then((result) => {
339
+ showSuccess('Login Successful', 'You have been logged in with Google!');
340
+ })
341
+ .catch((error) => {
342
+ document.getElementById('login-error').textContent = getErrorMessage(error.code);
343
+ document.getElementById('login-error').classList.remove('hidden');
344
+ setTimeout(() => document.getElementById('login-error').classList.add('hidden'), 5000);
345
+ });
346
+ }
347
+
348
+ // GitHub Sign In
349
+ function signInWithGithub() {
350
+ const provider = new firebase.auth.GithubAuthProvider();
351
+ auth.signInWithPopup(provider)
352
+ .then((result) => {
353
+ showSuccess('Login Successful', 'You have been logged in with GitHub!');
354
+ })
355
+ .catch((error) => {
356
+ document.getElementById('login-error').textContent = getErrorMessage(error.code);
357
+ document.getElementById('login-error').classList.remove('hidden');
358
+ setTimeout(() => document.getElementById('login-error').classList.add('hidden'), 5000);
359
+ });
360
+ }
361
+
362
+ // Show success modal
363
+ function showSuccess(title, message) {
364
+ document.getElementById('success-title').textContent = title;
365
+ document.getElementById('success-message').textContent = message;
366
+ document.getElementById('success-modal').classList.remove('hidden');
367
+ }
368
+
369
+ // Map Firebase error codes to user-friendly messages
370
+ function getErrorMessage(errorCode) {
371
+ const errorMessages = {
372
+ 'auth/invalid-email': 'Invalid email address',
373
+ 'auth/user-disabled': 'Account disabled',
374
+ 'auth/user-not-found': 'Account not found',
375
+ 'auth/wrong-password': 'Incorrect password',
376
+ 'auth/email-already-in-use': 'Email already in use',
377
+ 'auth/operation-not-allowed': 'Operation not allowed',
378
+ 'auth/weak-password': 'Password is too weak',
379
+ 'auth/network-request-failed': 'Network error. Please check your connection',
380
+ 'auth/too-many-requests': 'Too many attempts. Try again later',
381
+ 'auth/popup-closed-by-user': 'Sign in popup was closed',
382
+ 'auth/cancelled-popup-request': 'Only one popup request allowed at a time'
383
+ };
384
+
385
+ return errorMessages[errorCode] || 'An error occurred. Please try again.';
386
+ }
387
+
388
+ // Check if user is already logged in
389
+ auth.onAuthStateChanged((user) => {
390
+ if (user) {
391
+ // User is signed in
392
+ showSuccess('Welcome Back', `You're already logged in as ${user.displayName || user.email}`);
393
+ }
394
+ });
395
+ </script>
396
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ubaliiringim/html" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
397
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ login page and sign up with js and firebase