|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>KYC & On-Board Form</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.input-mask { |
|
|
position: relative; |
|
|
} |
|
|
.input-mask::after { |
|
|
content: attr(data-placeholder); |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 12px; |
|
|
transform: translateY(-50%); |
|
|
color: #9ca3af; |
|
|
pointer-events: none; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.input-mask input:focus + .input-mask::after, |
|
|
.input-mask input:not(:placeholder-shown) + .input-mask::after { |
|
|
top: 0; |
|
|
left: 10px; |
|
|
font-size: 0.75rem; |
|
|
background: white; |
|
|
padding: 0 4px; |
|
|
color: #3b82f6; |
|
|
} |
|
|
.animate-spin { |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
@keyframes spin { |
|
|
from { transform: rotate(0deg); } |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-3xl"> |
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden mb-6"> |
|
|
<div class="bg-blue-600 p-6 text-white"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<i class="fas fa-user-shield text-2xl mr-3"></i> |
|
|
<h1 class="text-2xl font-bold">KYC & On-Board Verification</h1> |
|
|
</div> |
|
|
<p class="text-blue-100">Complete your registration to accelerate simulations, credit, and purchases.</p> |
|
|
</div> |
|
|
|
|
|
<div class="p-6"> |
|
|
<div class="mb-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-1 h-1 bg-blue-200 rounded-full"> |
|
|
<div class="h-1 bg-blue-600 rounded-full w-3/4"></div> |
|
|
</div> |
|
|
<span class="ml-4 text-sm font-medium text-blue-600">75% Complete</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<form id="kycForm" class="space-y-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">User ID</label> |
|
|
<div class="relative"> |
|
|
<input |
|
|
type="text" |
|
|
name="userId" |
|
|
placeholder="cuid() or user ID" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" |
|
|
> |
|
|
<div class="absolute right-3 top-2.5 text-gray-400"> |
|
|
<i class="fas fa-id-card"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">CPF</label> |
|
|
<div class="relative input-mask" data-placeholder="000.000.000-00"> |
|
|
<input |
|
|
type="text" |
|
|
name="cpf" |
|
|
placeholder=" " |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">CNPJ</label> |
|
|
<div class="relative input-mask" data-placeholder="00.000.000/0001-00"> |
|
|
<input |
|
|
type="text" |
|
|
name="cnpj" |
|
|
placeholder=" " |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Document Type</label> |
|
|
<div class="relative"> |
|
|
<select |
|
|
name="documentType" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 appearance-none" |
|
|
> |
|
|
<option value="RG">RG</option> |
|
|
<option value="CNH">CNH</option> |
|
|
<option value="CNPJ">CNPJ</option> |
|
|
</select> |
|
|
<div class="absolute right-3 top-2.5 text-gray-400 pointer-events-none"> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Document Number</label> |
|
|
<div class="relative"> |
|
|
<input |
|
|
type="text" |
|
|
name="documentNumber" |
|
|
placeholder="123456789" |
|
|
required |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" |
|
|
> |
|
|
<div class="absolute right-3 top-2.5 text-gray-400"> |
|
|
<i class="fas fa-file-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="h-px flex-1 bg-gray-200"></div> |
|
|
<span class="px-3 text-sm text-gray-500">Address Information</span> |
|
|
<div class="h-px flex-1 bg-gray-200"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">CEP</label> |
|
|
<div class="relative input-mask" data-placeholder="00000-000"> |
|
|
<input |
|
|
type="text" |
|
|
name="zip" |
|
|
placeholder=" " |
|
|
required |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" |
|
|
> |
|
|
<div class="absolute right-3 top-2.5 text-gray-400"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Street</label> |
|
|
<input |
|
|
type="text" |
|
|
name="street" |
|
|
placeholder="Example Street" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" |
|
|
> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Number</label> |
|
|
<input |
|
|
type="text" |
|
|
name="number" |
|
|
placeholder="123" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" |
|
|
> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">City</label> |
|
|
<input |
|
|
type="text" |
|
|
name="city" |
|
|
placeholder="City" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" |
|
|
> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">State</label> |
|
|
<div class="relative"> |
|
|
<select |
|
|
name="state" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 appearance-none" |
|
|
> |
|
|
<option value="">Select State</option> |
|
|
<option value="AC">AC</option> |
|
|
<option value="AL">AL</option> |
|
|
<option value="AP">AP</option> |
|
|
<option value="AM">AM</option> |
|
|
<option value="BA">BA</option> |
|
|
<option value="CE">CE</option> |
|
|
<option value="DF">DF</option> |
|
|
<option value="ES">ES</option> |
|
|
<option value="GO">GO</option> |
|
|
<option value="MA">MA</option> |
|
|
<option value="MT">MT</option> |
|
|
<option value="MS">MS</option> |
|
|
<option value="MG">MG</option> |
|
|
<option value="PA">PA</option> |
|
|
<option value="PB">PB</option> |
|
|
<option value="PR">PR</option> |
|
|
<option value="PE">PE</option> |
|
|
<option value="PI">PI</option> |
|
|
<option value="RJ">RJ</option> |
|
|
<option value="RN">RN</option> |
|
|
<option value="RS">RS</option> |
|
|
<option value="RO">RO</option> |
|
|
<option value="RR">RR</option> |
|
|
<option value="SC">SC</option> |
|
|
<option value="SP">SP</option> |
|
|
<option value="SE">SE</option> |
|
|
<option value="TO">TO</option> |
|
|
</select> |
|
|
<div class="absolute right-3 top-2.5 text-gray-400 pointer-events-none"> |
|
|
<i class="fas fa-chevron-down"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="h-px flex-1 bg-gray-200"></div> |
|
|
<span class="px-3 text-sm text-gray-500">Financial Information</span> |
|
|
<div class="h-px flex-1 bg-gray-200"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Monthly Consumption (kWh)</label> |
|
|
<div class="relative"> |
|
|
<input |
|
|
type="number" |
|
|
name="consumption" |
|
|
placeholder="e.g. 450" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" |
|
|
> |
|
|
<div class="absolute right-3 top-2.5 text-gray-400"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Credit Score (0-1000)</label> |
|
|
<div class="relative"> |
|
|
<input |
|
|
type="number" |
|
|
name="score" |
|
|
placeholder="e.g. 720" |
|
|
min="0" |
|
|
max="1000" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" |
|
|
> |
|
|
<div class="absolute right-3 top-2.5 text-gray-400"> |
|
|
<i class="fas fa-credit-card"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col sm:flex-row gap-3 pt-4"> |
|
|
<button |
|
|
type="submit" |
|
|
id="submitBtn" |
|
|
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" |
|
|
> |
|
|
<span id="submitText">Submit KYC</span> |
|
|
<i id="submitSpinner" class="fas fa-spinner animate-spin ml-2 hidden"></i> |
|
|
</button> |
|
|
<button |
|
|
type="button" |
|
|
id="clearBtn" |
|
|
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" |
|
|
> |
|
|
Clear Form |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="messageContainer" class="hidden mt-4 p-3 rounded-md"></div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 px-6 py-4 border-t border-gray-200"> |
|
|
<div class="flex items-center text-sm text-gray-500"> |
|
|
<i class="fas fa-lock mr-2"></i> |
|
|
<span>Your information is securely encrypted and protected</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const form = document.getElementById('kycForm'); |
|
|
const submitBtn = document.getElementById('submitBtn'); |
|
|
const submitText = document.getElementById('submitText'); |
|
|
const submitSpinner = document.getElementById('submitSpinner'); |
|
|
const clearBtn = document.getElementById('clearBtn'); |
|
|
const messageContainer = document.getElementById('messageContainer'); |
|
|
|
|
|
|
|
|
form.addEventListener('submit', async function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
submitBtn.disabled = true; |
|
|
submitText.textContent = 'Processing...'; |
|
|
submitSpinner.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
messageContainer.classList.add('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
const isSuccess = Math.random() > 0.3; |
|
|
|
|
|
|
|
|
submitBtn.disabled = false; |
|
|
submitText.textContent = 'Submit KYC'; |
|
|
submitSpinner.classList.add('hidden'); |
|
|
|
|
|
|
|
|
messageContainer.classList.remove('hidden'); |
|
|
|
|
|
if (isSuccess) { |
|
|
messageContainer.className = 'bg-green-50 text-green-800 mt-4 p-3 rounded-md'; |
|
|
messageContainer.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Success! Tier assigned: ${['Basic', 'Standard', 'Premium'][Math.floor(Math.random() * 3)]}</span> |
|
|
</div> |
|
|
`; |
|
|
} else { |
|
|
messageContainer.className = 'bg-red-50 text-red-800 mt-4 p-3 rounded-md'; |
|
|
messageContainer.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-exclamation-circle text-red-500 mr-2"></i> |
|
|
<span>Error: ${['Invalid document number', 'Missing required fields', 'Server error'][Math.floor(Math.random() * 3)]}</span> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
}, 1500); |
|
|
}); |
|
|
|
|
|
|
|
|
clearBtn.addEventListener('click', function() { |
|
|
form.reset(); |
|
|
messageContainer.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const cpfInput = document.querySelector('input[name="cpf"]'); |
|
|
const cnpjInput = document.querySelector('input[name="cnpj"]'); |
|
|
const zipInput = document.querySelector('input[name="zip"]'); |
|
|
|
|
|
cpfInput.addEventListener('input', function(e) { |
|
|
let value = e.target.value.replace(/\D/g, ''); |
|
|
|
|
|
if (value.length > 3) { |
|
|
value = value.substring(0, 3) + '.' + value.substring(3); |
|
|
} |
|
|
if (value.length > 7) { |
|
|
value = value.substring(0, 7) + '.' + value.substring(7); |
|
|
} |
|
|
if (value.length > 11) { |
|
|
value = value.substring(0, 11) + '-' + value.substring(11); |
|
|
} |
|
|
|
|
|
e.target.value = value.substring(0, 14); |
|
|
}); |
|
|
|
|
|
cnpjInput.addEventListener('input', function(e) { |
|
|
let value = e.target.value.replace(/\D/g, ''); |
|
|
|
|
|
if (value.length > 2) { |
|
|
value = value.substring(0, 2) + '.' + value.substring(2); |
|
|
} |
|
|
if (value.length > 6) { |
|
|
value = value.substring(0, 6) + '.' + value.substring(6); |
|
|
} |
|
|
if (value.length > 10) { |
|
|
value = value.substring(0, 10) + '/' + value.substring(10); |
|
|
} |
|
|
if (value.length > 15) { |
|
|
value = value.substring(0, 15) + '-' + value.substring(15); |
|
|
} |
|
|
|
|
|
e.target.value = value.substring(0, 18); |
|
|
}); |
|
|
|
|
|
zipInput.addEventListener('input', function(e) { |
|
|
let value = e.target.value.replace(/\D/g, ''); |
|
|
|
|
|
if (value.length > 5) { |
|
|
value = value.substring(0, 5) + '-' + value.substring(5); |
|
|
} |
|
|
|
|
|
e.target.value = value.substring(0, 9); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<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> |
|
|
</html> |
