Hugging Face's logo

Spaces:
shemmz
/
prototype
Running

App Files Community
shemmz commited on
Commit
f394348
·
verified ·
1 Parent(s): 22f2e01

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +339 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Prototype
3
- emoji: 🚀
4
- colorFrom: pink
5
- colorTo: pink
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: prototype
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,339 @@
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>Sign Up | Get Started</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/9.6.0/firebase-app-compat.js"></script>
11
+ <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-auth-compat.js"></script>
12
+ <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore-compat.js"></script>
13
+ <!-- bcrypt for password hashing -->
14
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bcryptjs/2.4.3/bcrypt.min.js"></script>
15
+
16
+ <style>
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ }
20
+ .input-focus:focus {
21
+ box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.3);
22
+ }
23
+ .shake {
24
+ animation: shake 0.5s;
25
+ }
26
+ @keyframes shake {
27
+ 0%, 100% { transform: translateX(0); }
28
+ 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
29
+ 20%, 40%, 60%, 80% { transform: translateX(5px); }
30
+ }
31
+ .password-strength {
32
+ height: 4px;
33
+ transition: all 0.3s;
34
+ }
35
+ .loading-spinner {
36
+ width: 20px;
37
+ height: 20px;
38
+ border: 3px solid rgba(255,255,255,0.3);
39
+ border-radius: 50%;
40
+ border-top-color: #fff;
41
+ animation: spin 1s ease-in-out infinite;
42
+ }
43
+ @keyframes spin {
44
+ to { transform: rotate(360deg); }
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="min-h-screen flex items-center justify-center gradient-bg p-4">
49
+ <div class="w-full max-w-md">
50
+ <div class="bg-white rounded-xl shadow-2xl overflow-hidden transition-all duration-300 transform hover:scale-[1.01]">
51
+ <div class="p-8">
52
+ <div class="flex justify-center mb-6">
53
+ <div class="bg-indigo-100 p-3 rounded-full">
54
+ <i class="fas fa-user-plus text-indigo-600 text-2xl"></i>
55
+ </div>
56
+ </div>
57
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-2">Create Your Account</h2>
58
+ <p class="text-gray-600 text-center mb-8">Join us today and unlock amazing features!</p>
59
+
60
+ <form id="signupForm" class="space-y-5">
61
+ <div class="relative">
62
+ <input type="text" id="fullname" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition-all" placeholder="Full Name" required>
63
+ <i class="fas fa-user absolute right-3 top-3.5 text-gray-400"></i>
64
+ </div>
65
+
66
+ <div class="relative">
67
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition-all" placeholder="Email Address" required>
68
+ <i class="fas fa-envelope absolute right-3 top-3.5 text-gray-400"></i>
69
+ </div>
70
+
71
+ <div class="relative">
72
+ <input type="password" id="password" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition-all" placeholder="Password" required>
73
+ <i class="fas fa-lock absolute right-3 top-3.5 text-gray-400"></i>
74
+ <div class="flex mt-1 space-x-1">
75
+ <div id="strength-1" class="password-strength w-1/4 bg-gray-200 rounded-full"></div>
76
+ <div id="strength-2" class="password-strength w-1/4 bg-gray-200 rounded-full"></div>
77
+ <div id="strength-3" class="password-strength w-1/4 bg-gray-200 rounded-full"></div>
78
+ <div id="strength-4" class="password-strength w-1/4 bg-gray-200 rounded-full"></div>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="relative">
83
+ <input type="password" id="confirmPassword" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none input-focus transition-all" placeholder="Confirm Password" required>
84
+ <i class="fas fa-lock absolute right-3 top-3.5 text-gray-400"></i>
85
+ </div>
86
+
87
+ <div class="flex items-center">
88
+ <input type="checkbox" id="terms" class="w-4 h-4 text-indigo-600 rounded focus:ring-indigo-500">
89
+ <label for="terms" class="ml-2 text-sm text-gray-600">I agree to the <a href="#" class="text-indigo-600 hover:underline">Terms & Conditions</a></label>
90
+ </div>
91
+
92
+ <button type="submit" id="submitBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-[1.02] flex justify-center items-center">
93
+ <span id="submitText">Sign Up</span>
94
+ <i id="submitIcon" class="fas fa-arrow-right ml-2"></i>
95
+ <div id="submitSpinner" class="loading-spinner hidden"></div>
96
+ </button>
97
+ </form>
98
+
99
+ <div class="mt-6 text-center">
100
+ <p class="text-gray-600">Already have an account? <a href="#" class="text-indigo-600 font-semibold hover:underline">Log In</a></p>
101
+ </div>
102
+
103
+ <div class="mt-6">
104
+ <div class="relative">
105
+ <div class="absolute inset-0 flex items-center">
106
+ <div class="w-full border-t border-gray-300"></div>
107
+ </div>
108
+ <div class="relative flex justify-center text-sm">
109
+ <span class="px-2 bg-white text-gray-500">Or continue with</span>
110
+ </div>
111
+ </div>
112
+
113
+ <div class="mt-6 grid grid-cols-3 gap-3">
114
+ <button id="googleLogin" 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 transition">
115
+ <i class="fab fa-google text-red-500"></i>
116
+ </button>
117
+ <button id="facebookLogin" 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 transition">
118
+ <i class="fab fa-facebook-f text-blue-600"></i>
119
+ </button>
120
+ <button id="appleLogin" 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 transition">
121
+ <i class="fab fa-apple"></i>
122
+ </button>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <script>
130
+ // Initialize Firebase with your config
131
+ const firebaseConfig = {
132
+ apiKey: "AIzaSyD6sZ1h12SDDV4cHmV2_Xb4-V7H_R0U2iQ",
133
+ authDomain: "your-project-id.firebaseapp.com",
134
+ projectId: "your-project-id",
135
+ storageBucket: "your-project-id.appspot.com",
136
+ messagingSenderId: "1234567890",
137
+ appId: "1:1234567890:web:abcdef1234567890"
138
+ };
139
+
140
+ // Initialize Firebase
141
+ firebase.initializeApp(firebaseConfig);
142
+ const auth = firebase.auth();
143
+ const db = firebase.firestore();
144
+
145
+ document.addEventListener('DOMContentLoaded', function() {
146
+ const form = document.getElementById('signupForm');
147
+ const password = document.getElementById('password');
148
+ const confirmPassword = document.getElementById('confirmPassword');
149
+ const termsCheckbox = document.getElementById('terms');
150
+ const submitBtn = document.getElementById('submitBtn');
151
+ const submitText = document.getElementById('submitText');
152
+ const submitIcon = document.getElementById('submitIcon');
153
+ const submitSpinner = document.getElementById('submitSpinner');
154
+
155
+ // Social login buttons
156
+ const googleLogin = document.getElementById('googleLogin');
157
+ const facebookLogin = document.getElementById('facebookLogin');
158
+ const appleLogin = document.getElementById('appleLogin');
159
+
160
+ // Password strength indicator
161
+ password.addEventListener('input', function() {
162
+ const strengthBars = [
163
+ document.getElementById('strength-1'),
164
+ document.getElementById('strength-2'),
165
+ document.getElementById('strength-3'),
166
+ document.getElementById('strength-4')
167
+ ];
168
+
169
+ const strength = calculatePasswordStrength(password.value);
170
+
171
+ strengthBars.forEach((bar, index) => {
172
+ if (index < strength) {
173
+ bar.classList.remove('bg-gray-200');
174
+ if (strength === 1) bar.classList.add('bg-red-500');
175
+ else if (strength === 2) bar.classList.add('bg-yellow-500');
176
+ else if (strength === 3) bar.classList.add('bg-blue-500');
177
+ else if (strength === 4) bar.classList.add('bg-green-500');
178
+ } else {
179
+ bar.classList.add('bg-gray-200');
180
+ bar.classList.remove('bg-red-500', 'bg-yellow-500', 'bg-blue-500', 'bg-green-500');
181
+ }
182
+ });
183
+ });
184
+
185
+ // Form submission
186
+ form.addEventListener('submit', async function(e) {
187
+ e.preventDefault();
188
+
189
+ // Show loading state
190
+ submitText.textContent = 'Signing Up...';
191
+ submitIcon.classList.add('hidden');
192
+ submitSpinner.classList.remove('hidden');
193
+ submitBtn.disabled = true;
194
+
195
+ // Validate terms checkbox
196
+ if (!termsCheckbox.checked) {
197
+ alert('Please agree to the Terms & Conditions');
198
+ termsCheckbox.parentElement.classList.add('shake');
199
+ setTimeout(() => {
200
+ termsCheckbox.parentElement.classList.remove('shake');
201
+ }, 500);
202
+
203
+ // Reset button state
204
+ submitText.textContent = 'Sign Up';
205
+ submitIcon.classList.remove('hidden');
206
+ submitSpinner.classList.add('hidden');
207
+ submitBtn.disabled = false;
208
+ return;
209
+ }
210
+
211
+ // Validate password match
212
+ if (password.value !== confirmPassword.value) {
213
+ alert('Passwords do not match!');
214
+ password.classList.add('border-red-500');
215
+ confirmPassword.classList.add('border-red-500');
216
+
217
+ // Reset button state
218
+ submitText.textContent = 'Sign Up';
219
+ submitIcon.classList.remove('hidden');
220
+ submitSpinner.classList.add('hidden');
221
+ submitBtn.disabled = false;
222
+ return;
223
+ }
224
+
225
+ // Hash the password (in a real app, this would be done server-side)
226
+ const salt = bcrypt.genSaltSync(10);
227
+ const hashedPassword = bcrypt.hashSync(password.value, salt);
228
+
229
+ // User data to save
230
+ const userData = {
231
+ fullName: document.getElementById('fullname').value,
232
+ email: document.getElementById('email').value,
233
+ password: hashedPassword,
234
+ createdAt: firebase.firestore.FieldValue.serverTimestamp(),
235
+ updatedAt: firebase.firestore.FieldValue.serverTimestamp()
236
+ };
237
+
238
+ try {
239
+ // Save user to Firestore
240
+ await db.collection('users').add(userData);
241
+
242
+ // Success
243
+ alert('Account created successfully!');
244
+ form.reset();
245
+ document.querySelectorAll('.password-strength').forEach(bar => {
246
+ bar.classList.add('bg-gray-200');
247
+ bar.classList.remove('bg-red-500', 'bg-yellow-500', 'bg-blue-500', 'bg-green-500');
248
+ });
249
+
250
+ // Redirect or do something else on success
251
+ // window.location.href = '/dashboard.html';
252
+ } catch (error) {
253
+ console.error('Error saving user:', error);
254
+ alert('An error occurred while creating your account. Please try again.');
255
+ } finally {
256
+ // Reset button state
257
+ submitText.textContent = 'Sign Up';
258
+ submitIcon.classList.remove('hidden');
259
+ submitSpinner.classList.add('hidden');
260
+ submitBtn.disabled = false;
261
+ }
262
+ });
263
+
264
+ // Reset password error when typing
265
+ password.addEventListener('input', function() {
266
+ password.classList.remove('border-red-500');
267
+ confirmPassword.classList.remove('border-red-500');
268
+ });
269
+
270
+ confirmPassword.addEventListener('input', function() {
271
+ password.classList.remove('border-red-500');
272
+ confirmPassword.classList.remove('border-red-500');
273
+ });
274
+
275
+ // Social login handlers
276
+ googleLogin.addEventListener('click', function() {
277
+ const provider = new firebase.auth.GoogleAuthProvider();
278
+ socialLogin(provider);
279
+ });
280
+
281
+ facebookLogin.addEventListener('click', function() {
282
+ const provider = new firebase.auth.FacebookAuthProvider();
283
+ socialLogin(provider);
284
+ });
285
+
286
+ appleLogin.addEventListener('click', function() {
287
+ const provider = new firebase.auth.OAuthProvider('apple.com');
288
+ socialLogin(provider);
289
+ });
290
+
291
+ // Calculate password strength
292
+ function calculatePasswordStrength(password) {
293
+ let strength = 0;
294
+
295
+ // Length check
296
+ if (password.length >= 8) strength++;
297
+ if (password.length >= 12) strength++;
298
+
299
+ // Character type checks
300
+ if (/[A-Z]/.test(password)) strength++;
301
+ if (/[0-9]/.test(password)) strength++;
302
+ if (/[^A-Za-z0-9]/.test(password)) strength++;
303
+
304
+ // Cap at 4
305
+ return Math.min(strength, 4);
306
+ }
307
+
308
+ // Social login function
309
+ async function socialLogin(provider) {
310
+ try {
311
+ const result = await auth.signInWithPopup(provider);
312
+ const user = result.user;
313
+
314
+ // Check if user exists in Firestore
315
+ const userDoc = await db.collection('users').doc(user.uid).get();
316
+
317
+ if (!userDoc.exists) {
318
+ // Save new user to Firestore
319
+ await db.collection('users').doc(user.uid).set({
320
+ fullName: user.displayName || '',
321
+ email: user.email || '',
322
+ createdAt: firebase.firestore.FieldValue.serverTimestamp(),
323
+ updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
324
+ provider: provider.providerId
325
+ });
326
+ }
327
+
328
+ alert('Logged in successfully with ' + provider.providerId.replace('.com', ''));
329
+ // Redirect to dashboard or home page
330
+ // window.location.href = '/dashboard.html';
331
+ } catch (error) {
332
+ console.error('Social login error:', error);
333
+ alert('Login failed: ' + error.message);
334
+ }
335
+ }
336
+ });
337
+ </script>
338
+ <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=shemmz/prototype" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
339
+ </html>