Hugging Face's logo

Spaces:
fernando-bold
/
src-app-cadastro-kyc-page-tsx
Running

App Files Community
fernando-bold commited on
Commit
170a7d5
·
verified ·
1 Parent(s): 51007d7

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +432 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Src App Cadastro Kyc Page Tsx
3
- emoji: 🚀
4
- colorFrom: blue
5
- colorTo: red
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: src-app-cadastro-kyc-page-tsx
3
+ emoji: 🐳
4
+ colorFrom: pink
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,432 @@
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>KYC & On-Board Form</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
+ <style>
10
+ .input-mask {
11
+ position: relative;
12
+ }
13
+ .input-mask::after {
14
+ content: attr(data-placeholder);
15
+ position: absolute;
16
+ top: 50%;
17
+ left: 12px;
18
+ transform: translateY(-50%);
19
+ color: #9ca3af;
20
+ pointer-events: none;
21
+ transition: all 0.2s ease;
22
+ }
23
+ .input-mask input:focus + .input-mask::after,
24
+ .input-mask input:not(:placeholder-shown) + .input-mask::after {
25
+ top: 0;
26
+ left: 10px;
27
+ font-size: 0.75rem;
28
+ background: white;
29
+ padding: 0 4px;
30
+ color: #3b82f6;
31
+ }
32
+ .animate-spin {
33
+ animation: spin 1s linear infinite;
34
+ }
35
+ @keyframes spin {
36
+ from { transform: rotate(0deg); }
37
+ to { transform: rotate(360deg); }
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-gray-50 min-h-screen">
42
+ <div class="container mx-auto px-4 py-8 max-w-3xl">
43
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
44
+ <div class="bg-blue-600 p-6 text-white">
45
+ <div class="flex items-center mb-2">
46
+ <i class="fas fa-user-shield text-2xl mr-3"></i>
47
+ <h1 class="text-2xl font-bold">KYC & On-Board Verification</h1>
48
+ </div>
49
+ <p class="text-blue-100">Complete your registration to accelerate simulations, credit, and purchases.</p>
50
+ </div>
51
+
52
+ <div class="p-6">
53
+ <div class="mb-6">
54
+ <div class="flex items-center">
55
+ <div class="flex-1 h-1 bg-blue-200 rounded-full">
56
+ <div class="h-1 bg-blue-600 rounded-full w-3/4"></div>
57
+ </div>
58
+ <span class="ml-4 text-sm font-medium text-blue-600">75% Complete</span>
59
+ </div>
60
+ </div>
61
+
62
+ <form id="kycForm" class="space-y-6">
63
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
64
+ <!-- User ID -->
65
+ <div class="md:col-span-2">
66
+ <label class="block text-sm font-medium text-gray-700 mb-1">User ID</label>
67
+ <div class="relative">
68
+ <input
69
+ type="text"
70
+ name="userId"
71
+ placeholder="cuid() or user ID"
72
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
73
+ >
74
+ <div class="absolute right-3 top-2.5 text-gray-400">
75
+ <i class="fas fa-id-card"></i>
76
+ </div>
77
+ </div>
78
+ </div>
79
+
80
+ <!-- CPF -->
81
+ <div>
82
+ <label class="block text-sm font-medium text-gray-700 mb-1">CPF</label>
83
+ <div class="relative input-mask" data-placeholder="000.000.000-00">
84
+ <input
85
+ type="text"
86
+ name="cpf"
87
+ placeholder=" "
88
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
89
+ >
90
+ </div>
91
+ </div>
92
+
93
+ <!-- CNPJ -->
94
+ <div>
95
+ <label class="block text-sm font-medium text-gray-700 mb-1">CNPJ</label>
96
+ <div class="relative input-mask" data-placeholder="00.000.000/0001-00">
97
+ <input
98
+ type="text"
99
+ name="cnpj"
100
+ placeholder=" "
101
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
102
+ >
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Document Type -->
107
+ <div>
108
+ <label class="block text-sm font-medium text-gray-700 mb-1">Document Type</label>
109
+ <div class="relative">
110
+ <select
111
+ name="documentType"
112
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 appearance-none"
113
+ >
114
+ <option value="RG">RG</option>
115
+ <option value="CNH">CNH</option>
116
+ <option value="CNPJ">CNPJ</option>
117
+ </select>
118
+ <div class="absolute right-3 top-2.5 text-gray-400 pointer-events-none">
119
+ <i class="fas fa-chevron-down"></i>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Document Number -->
125
+ <div>
126
+ <label class="block text-sm font-medium text-gray-700 mb-1">Document Number</label>
127
+ <div class="relative">
128
+ <input
129
+ type="text"
130
+ name="documentNumber"
131
+ placeholder="123456789"
132
+ required
133
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
134
+ >
135
+ <div class="absolute right-3 top-2.5 text-gray-400">
136
+ <i class="fas fa-file-alt"></i>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Address Section -->
142
+ <div class="md:col-span-2">
143
+ <div class="flex items-center mb-4">
144
+ <div class="h-px flex-1 bg-gray-200"></div>
145
+ <span class="px-3 text-sm text-gray-500">Address Information</span>
146
+ <div class="h-px flex-1 bg-gray-200"></div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- CEP -->
151
+ <div>
152
+ <label class="block text-sm font-medium text-gray-700 mb-1">CEP</label>
153
+ <div class="relative input-mask" data-placeholder="00000-000">
154
+ <input
155
+ type="text"
156
+ name="zip"
157
+ placeholder=" "
158
+ required
159
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
160
+ >
161
+ <div class="absolute right-3 top-2.5 text-gray-400">
162
+ <i class="fas fa-map-marker-alt"></i>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Street -->
168
+ <div>
169
+ <label class="block text-sm font-medium text-gray-700 mb-1">Street</label>
170
+ <input
171
+ type="text"
172
+ name="street"
173
+ placeholder="Example Street"
174
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
175
+ >
176
+ </div>
177
+
178
+ <!-- Number -->
179
+ <div>
180
+ <label class="block text-sm font-medium text-gray-700 mb-1">Number</label>
181
+ <input
182
+ type="text"
183
+ name="number"
184
+ placeholder="123"
185
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
186
+ >
187
+ </div>
188
+
189
+ <!-- City -->
190
+ <div>
191
+ <label class="block text-sm font-medium text-gray-700 mb-1">City</label>
192
+ <input
193
+ type="text"
194
+ name="city"
195
+ placeholder="City"
196
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
197
+ >
198
+ </div>
199
+
200
+ <!-- State -->
201
+ <div>
202
+ <label class="block text-sm font-medium text-gray-700 mb-1">State</label>
203
+ <div class="relative">
204
+ <select
205
+ name="state"
206
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 appearance-none"
207
+ >
208
+ <option value="">Select State</option>
209
+ <option value="AC">AC</option>
210
+ <option value="AL">AL</option>
211
+ <option value="AP">AP</option>
212
+ <option value="AM">AM</option>
213
+ <option value="BA">BA</option>
214
+ <option value="CE">CE</option>
215
+ <option value="DF">DF</option>
216
+ <option value="ES">ES</option>
217
+ <option value="GO">GO</option>
218
+ <option value="MA">MA</option>
219
+ <option value="MT">MT</option>
220
+ <option value="MS">MS</option>
221
+ <option value="MG">MG</option>
222
+ <option value="PA">PA</option>
223
+ <option value="PB">PB</option>
224
+ <option value="PR">PR</option>
225
+ <option value="PE">PE</option>
226
+ <option value="PI">PI</option>
227
+ <option value="RJ">RJ</option>
228
+ <option value="RN">RN</option>
229
+ <option value="RS">RS</option>
230
+ <option value="RO">RO</option>
231
+ <option value="RR">RR</option>
232
+ <option value="SC">SC</option>
233
+ <option value="SP">SP</option>
234
+ <option value="SE">SE</option>
235
+ <option value="TO">TO</option>
236
+ </select>
237
+ <div class="absolute right-3 top-2.5 text-gray-400 pointer-events-none">
238
+ <i class="fas fa-chevron-down"></i>
239
+ </div>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Financial Section -->
244
+ <div class="md:col-span-2">
245
+ <div class="flex items-center mb-4">
246
+ <div class="h-px flex-1 bg-gray-200"></div>
247
+ <span class="px-3 text-sm text-gray-500">Financial Information</span>
248
+ <div class="h-px flex-1 bg-gray-200"></div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Monthly Consumption -->
253
+ <div>
254
+ <label class="block text-sm font-medium text-gray-700 mb-1">Monthly Consumption (kWh)</label>
255
+ <div class="relative">
256
+ <input
257
+ type="number"
258
+ name="consumption"
259
+ placeholder="e.g. 450"
260
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
261
+ >
262
+ <div class="absolute right-3 top-2.5 text-gray-400">
263
+ <i class="fas fa-bolt"></i>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <!-- Credit Score -->
269
+ <div>
270
+ <label class="block text-sm font-medium text-gray-700 mb-1">Credit Score (0-1000)</label>
271
+ <div class="relative">
272
+ <input
273
+ type="number"
274
+ name="score"
275
+ placeholder="e.g. 720"
276
+ min="0"
277
+ max="1000"
278
+ class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
279
+ >
280
+ <div class="absolute right-3 top-2.5 text-gray-400">
281
+ <i class="fas fa-credit-card"></i>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- Form Actions -->
288
+ <div class="flex flex-col sm:flex-row gap-3 pt-4">
289
+ <button
290
+ type="submit"
291
+ id="submitBtn"
292
+ class="flex items-center justify-center px-6 py-2.5 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
293
+ >
294
+ <span id="submitText">Submit KYC</span>
295
+ <i id="submitSpinner" class="fas fa-spinner animate-spin ml-2 hidden"></i>
296
+ </button>
297
+ <button
298
+ type="button"
299
+ id="clearBtn"
300
+ class="px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
301
+ >
302
+ Clear Form
303
+ </button>
304
+ </div>
305
+
306
+ <!-- Message Display -->
307
+ <div id="messageContainer" class="hidden mt-4 p-3 rounded-md"></div>
308
+ </form>
309
+ </div>
310
+
311
+ <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
312
+ <div class="flex items-center text-sm text-gray-500">
313
+ <i class="fas fa-lock mr-2"></i>
314
+ <span>Your information is securely encrypted and protected</span>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+
320
+ <script>
321
+ document.addEventListener('DOMContentLoaded', function() {
322
+ const form = document.getElementById('kycForm');
323
+ const submitBtn = document.getElementById('submitBtn');
324
+ const submitText = document.getElementById('submitText');
325
+ const submitSpinner = document.getElementById('submitSpinner');
326
+ const clearBtn = document.getElementById('clearBtn');
327
+ const messageContainer = document.getElementById('messageContainer');
328
+
329
+ // Form submission handler
330
+ form.addEventListener('submit', async function(e) {
331
+ e.preventDefault();
332
+
333
+ // Show loading state
334
+ submitBtn.disabled = true;
335
+ submitText.textContent = 'Processing...';
336
+ submitSpinner.classList.remove('hidden');
337
+
338
+ // Hide any previous messages
339
+ messageContainer.classList.add('hidden');
340
+
341
+ // Simulate API call with timeout
342
+ setTimeout(() => {
343
+ // Randomly determine success or failure for demo
344
+ const isSuccess = Math.random() > 0.3;
345
+
346
+ // Reset button state
347
+ submitBtn.disabled = false;
348
+ submitText.textContent = 'Submit KYC';
349
+ submitSpinner.classList.add('hidden');
350
+
351
+ // Show message
352
+ messageContainer.classList.remove('hidden');
353
+
354
+ if (isSuccess) {
355
+ messageContainer.className = 'bg-green-50 text-green-800 mt-4 p-3 rounded-md';
356
+ messageContainer.innerHTML = `
357
+ <div class="flex items-center">
358
+ <i class="fas fa-check-circle text-green-500 mr-2"></i>
359
+ <span>Success! Tier assigned: ${['Basic', 'Standard', 'Premium'][Math.floor(Math.random() * 3)]}</span>
360
+ </div>
361
+ `;
362
+ } else {
363
+ messageContainer.className = 'bg-red-50 text-red-800 mt-4 p-3 rounded-md';
364
+ messageContainer.innerHTML = `
365
+ <div class="flex items-center">
366
+ <i class="fas fa-exclamation-circle text-red-500 mr-2"></i>
367
+ <span>Error: ${['Invalid document number', 'Missing required fields', 'Server error'][Math.floor(Math.random() * 3)]}</span>
368
+ </div>
369
+ `;
370
+ }
371
+ }, 1500);
372
+ });
373
+
374
+ // Clear form handler
375
+ clearBtn.addEventListener('click', function() {
376
+ form.reset();
377
+ messageContainer.classList.add('hidden');
378
+ });
379
+
380
+ // Input masking for CPF and CNPJ
381
+ const cpfInput = document.querySelector('input[name="cpf"]');
382
+ const cnpjInput = document.querySelector('input[name="cnpj"]');
383
+ const zipInput = document.querySelector('input[name="zip"]');
384
+
385
+ cpfInput.addEventListener('input', function(e) {
386
+ let value = e.target.value.replace(/\D/g, '');
387
+
388
+ if (value.length > 3) {
389
+ value = value.substring(0, 3) + '.' + value.substring(3);
390
+ }
391
+ if (value.length > 7) {
392
+ value = value.substring(0, 7) + '.' + value.substring(7);
393
+ }
394
+ if (value.length > 11) {
395
+ value = value.substring(0, 11) + '-' + value.substring(11);
396
+ }
397
+
398
+ e.target.value = value.substring(0, 14);
399
+ });
400
+
401
+ cnpjInput.addEventListener('input', function(e) {
402
+ let value = e.target.value.replace(/\D/g, '');
403
+
404
+ if (value.length > 2) {
405
+ value = value.substring(0, 2) + '.' + value.substring(2);
406
+ }
407
+ if (value.length > 6) {
408
+ value = value.substring(0, 6) + '.' + value.substring(6);
409
+ }
410
+ if (value.length > 10) {
411
+ value = value.substring(0, 10) + '/' + value.substring(10);
412
+ }
413
+ if (value.length > 15) {
414
+ value = value.substring(0, 15) + '-' + value.substring(15);
415
+ }
416
+
417
+ e.target.value = value.substring(0, 18);
418
+ });
419
+
420
+ zipInput.addEventListener('input', function(e) {
421
+ let value = e.target.value.replace(/\D/g, '');
422
+
423
+ if (value.length > 5) {
424
+ value = value.substring(0, 5) + '-' + value.substring(5);
425
+ }
426
+
427
+ e.target.value = value.substring(0, 9);
428
+ });
429
+ });
430
+ </script>
431
+ <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=fernando-bold/src-app-cadastro-kyc-page-tsx" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
432
+ </html>