Hugging Face's logo

Spaces:
dxlorhuggingface
/
mxp
Running

App Files Community
mxp / index.html
dxlorhuggingface's picture
dxlorhuggingface
undefined - Initial Deployment
fd124c4 verified
raw
history blame
35.6 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MXPay Crypto Exchange</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>
/* Custom styles */
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}
.kyc-step {
display: none;
}
.kyc-step.active {
display: block;
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.file-upload {
border: 2px dashed #cbd5e0;
transition: all 0.3s ease;
}
.file-upload:hover {
border-color: #3b82f6;
}
.file-upload.dragover {
border-color: #3b82f6;
background-color: #ebf5ff;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<!-- Header -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-coins text-2xl text-yellow-400"></i>
<h1 class="text-2xl font-bold">MXPay</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="hover:text-blue-200 transition">Markets</a>
<a href="#" class="hover:text-blue-200 transition">Trade</a>
<a href="#" class="hover:text-blue-200 transition">Futures</a>
<a href="#" class="hover:text-blue-200 transition">Earn</a>
<a href="#" class="hover:text-blue-200 transition">Wallet</a>
</nav>
<div class="flex items-center space-x-4">
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md transition">Login</button>
<button class="px-4 py-2 bg-white text-blue-600 hover:bg-gray-100 rounded-md transition">Register</button>
<button class="md:hidden text-xl">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<!-- Dashboard Section -->
<section class="bg-white rounded-lg shadow-md p-6 mb-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
<div>
<h2 class="text-2xl font-bold text-gray-800">Welcome back, <span id="username" class="text-blue-600">User</span></h2>
<p class="text-gray-600">Your crypto journey starts here</p>
</div>
<div class="mt-4 md:mt-0 flex space-x-4">
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
<i class="fas fa-wallet mr-2"></i> Deposit
</button>
<button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition">
<i class="fas fa-exchange-alt mr-2"></i> Trade
</button>
</div>
</div>
<!-- Balance Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-600">Total Balance</p>
<h3 class="text-2xl font-bold">$0.00</h3>
</div>
<i class="fas fa-wallet text-3xl text-blue-500"></i>
</div>
</div>
<div class="bg-green-50 p-4 rounded-lg border border-green-100">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-600">Available</p>
<h3 class="text-2xl font-bold">$0.00</h3>
</div>
<i class="fas fa-coins text-3xl text-green-500"></i>
</div>
</div>
<div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
<div class="flex justify-between items-center">
<div>
<p class="text-gray-600">In Orders</p>
<h3 class="text-2xl font-bold">$0.00</h3>
</div>
<i class="fas fa-exchange-alt text-3xl text-purple-500"></i>
</div>
</div>
</div>
<!-- Tabs Navigation -->
<div class="border-b border-gray-200 mb-6">
<nav class="flex space-x-8">
<button data-tab="assets" class="tab-button py-2 px-1 border-b-2 font-medium text-sm border-blue-500 text-blue-600">Assets</button>
<button data-tab="transactions" class="tab-button py-2 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Transactions</button>
<button data-tab="history" class="tab-button py-2 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">History</button>
<button data-tab="kyc" class="tab-button py-2 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">KYC Verification</button>
</nav>
</div>
<!-- Tab Contents -->
<div id="assets" class="tab-content">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Asset</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<i class="fab fa-bitcoin text-yellow-500 text-2xl"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Bitcoin</div>
<div class="text-sm text-gray-500">BTC</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">0.00000000</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">$0.00</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">$0.00</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<button class="text-blue-600 hover:text-blue-900 text-sm font-medium">Trade</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<i class="fab fa-ethereum text-purple-500 text-2xl"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Ethereum</div>
<div class="text-sm text-gray-500">ETH</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">0.00000000</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">$0.00</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">$0.00</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<button class="text-blue-600 hover:text-blue-900 text-sm font-medium">Trade</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="transactions" class="tab-content hidden">
<div class="text-center py-12">
<i class="fas fa-exchange-alt text-4xl text-gray-300 mb-4"></i>
<h3 class="text-lg font-medium text-gray-900">No transactions yet</h3>
<p class="mt-1 text-sm text-gray-500">Get started by making your first deposit or trade.</p>
</div>
</div>
<div id="history" class="tab-content hidden">
<div class="text-center py-12">
<i class="fas fa-history text-4xl text-gray-300 mb-4"></i>
<h3 class="text-lg font-medium text-gray-900">No history available</h3>
<p class="mt-1 text-sm text-gray-500">Your trading history will appear here.</p>
</div>
</div>
<div id="kyc" class="tab-content hidden">
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-info-circle text-blue-400"></i>
</div>
<div class="ml-3">
<p class="text-sm text-blue-700">
Complete KYC verification to unlock full account features and higher withdrawal limits.
</p>
</div>
</div>
</div>
<!-- KYC Steps -->
<div class="kyc-steps">
<!-- Step 1 -->
<div id="kyc-step-1" class="kyc-step active">
<h3 class="text-lg font-medium text-gray-900 mb-4">Personal Information</h3>
<form class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="first-name" class="block text-sm font-medium text-gray-700">First Name</label>
<input type="text" id="first-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-gray-700">Last Name</label>
<input type="text" id="last-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
<div>
<label for="dob" class="block text-sm font-medium text-gray-700">Date of Birth</label>
<input type="date" id="dob" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="country" class="block text-sm font-medium text-gray-700">Country</label>
<select id="country" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option>Select Country</option>
<option>United States</option>
<option>United Kingdom</option>
<option>Canada</option>
<option>Australia</option>
</select>
</div>
<div class="flex justify-end">
<button type="button" class="next-step px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition" data-next="kyc-step-2">Continue</button>
</div>
</form>
</div>
<!-- Step 2 -->
<div id="kyc-step-2" class="kyc-step">
<h3 class="text-lg font-medium text-gray-900 mb-4">Address Verification</h3>
<form class="space-y-4">
<div>
<label for="address" class="block text-sm font-medium text-gray-700">Street Address</label>
<input type="text" id="address" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label for="city" class="block text-sm font-medium text-gray-700">City</label>
<input type="text" id="city" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="state" class="block text-sm font-medium text-gray-700">State/Province</label>
<input type="text" id="state" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gray-700">ZIP/Postal Code</label>
<input type="text" id="zip" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
<div class="flex justify-between">
<button type="button" class="prev-step px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition" data-prev="kyc-step-1">Back</button>
<button type="button" class="next-step px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition" data-next="kyc-step-3">Continue</button>
</div>
</form>
</div>
<!-- Step 3 -->
<div id="kyc-step-3" class="kyc-step">
<h3 class="text-lg font-medium text-gray-900 mb-4">Identity Verification</h3>
<p class="text-sm text-gray-500 mb-6">To comply with regulations, we require identity verification. Please upload a clear photo of your government-issued ID (Passport, Driver's License, or National ID).</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Front of ID</label>
<div class="file-upload relative rounded-lg p-8 text-center cursor-pointer" id="front-upload">
<input type="file" id="front-id" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/*">
<i class="fas fa-camera text-4xl text-gray-400 mb-2"></i>
<p class="text-sm text-gray-500">Drag & drop your file here or click to browse</p>
<p class="text-xs text-gray-400 mt-2">JPG, PNG or PDF (max 5MB)</p>
</div>
<div id="front-preview" class="mt-2 hidden">
<img id="front-preview-img" src="#" alt="Front ID Preview" class="max-h-40 mx-auto">
<button id="remove-front" class="mt-2 text-red-500 text-sm">Remove</button>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Back of ID</label>
<div class="file-upload relative rounded-lg p-8 text-center cursor-pointer" id="back-upload">
<input type="file" id="back-id" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/*">
<i class="fas fa-camera text-4xl text-gray-400 mb-2"></i>
<p class="text-sm text-gray-500">Drag & drop your file here or click to browse</p>
<p class="text-xs text-gray-400 mt-2">JPG, PNG or PDF (max 5MB)</p>
</div>
<div id="back-preview" class="mt-2 hidden">
<img id="back-preview-img" src="#" alt="Back ID Preview" class="max-h-40 mx-auto">
<button id="remove-back" class="mt-2 text-red-500 text-sm">Remove</button>
</div>
</div>
</div>
<div class="mt-8">
<label class="block text-sm font-medium text-gray-700 mb-2">Selfie with ID</label>
<p class="text-sm text-gray-500 mb-4">Please take a selfie while holding your ID next to your face. Make sure all details are clearly visible.</p>
<div class="file-upload relative rounded-lg p-8 text-center cursor-pointer" id="selfie-upload">
<input type="file" id="selfie" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/*">
<i class="fas fa-user-circle text-4xl text-gray-400 mb-2"></i>
<p class="text-sm text-gray-500">Drag & drop your file here or click to browse</p>
<p class="text-xs text-gray-400 mt-2">JPG or PNG (max 5MB)</p>
</div>
<div id="selfie-preview" class="mt-2 hidden">
<img id="selfie-preview-img" src="#" alt="Selfie Preview" class="max-h-40 mx-auto">
<button id="remove-selfie" class="mt-2 text-red-500 text-sm">Remove</button>
</div>
</div>
<div class="flex justify-between mt-8">
<button type="button" class="prev-step px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition" data-prev="kyc-step-2">Back</button>
<button type="button" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition" id="submit-kyc">Submit Verification</button>
</div>
</div>
<!-- Step 4 (Success) -->
<div id="kyc-step-4" class="kyc-step">
<div class="text-center py-12">
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
<i class="fas fa-check text-green-600"></i>
</div>
<h3 class="mt-3 text-lg font-medium text-gray-900">Verification Submitted!</h3>
<p class="mt-2 text-sm text-gray-500">Your KYC documents have been received. Our team will review them shortly. You'll receive a notification once your verification is complete.</p>
<div class="mt-6">
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">Back to Dashboard</button>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Bonus Notification Modal -->
<div id="bonus-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
<div class="p-6">
<div class="flex justify-between items-start">
<div>
<h3 class="text-lg font-bold text-gray-900">Congratulations!</h3>
<p class="mt-1 text-sm text-gray-500">You've won a $25 bonus!</p>
</div>
<button id="close-modal" class="text-gray-400 hover:text-gray-500">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mt-4">
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-exclamation-circle text-yellow-400"></i>
</div>
<div class="ml-3">
<p class="text-sm text-yellow-700">
To claim your bonus, please complete KYC verification as required by crypto regulations.
</p>
</div>
</div>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button id="cancel-bonus" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">Maybe Later</button>
<button id="start-kyc" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">Start KYC</button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">MXPay</h3>
<p class="text-gray-400 text-sm">The world's leading cryptocurrency exchange</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Products</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Exchange</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Futures</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Earn</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Wallet</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Services</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white text-sm">API</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Trading Rules</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Fees</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Status</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Support</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Help Center</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Legal</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-sm text-gray-400">
<p>© 2023 MXPay. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Tab switching functionality
document.addEventListener('DOMContentLoaded', function() {
// Tab switching
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
// Remove active class from all buttons and contents
tabButtons.forEach(btn => {
btn.classList.remove('border-blue-500', 'text-blue-600');
btn.classList.add('border-transparent', 'text-gray-500');
});
tabContents.forEach(content => {
content.classList.add('hidden');
});
// Add active class to clicked button
button.classList.remove('border-transparent', 'text-gray-500');
button.classList.add('border-blue-500', 'text-blue-600');
// Show corresponding content
const tabId = button.getAttribute('data-tab');
document.getElementById(tabId).classList.remove('hidden');
});
});
// KYC Steps navigation
const nextButtons = document.querySelectorAll('.next-step');
const prevButtons = document.querySelectorAll('.prev-step');
const kycSteps = document.querySelectorAll('.kyc-step');
nextButtons.forEach(button => {
button.addEventListener('click', () => {
const nextStepId = button.getAttribute('data-next');
const currentStep = button.closest('.kyc-step');
currentStep.classList.remove('active');
document.getElementById(nextStepId).classList.add('active');
});
});
prevButtons.forEach(button => {
button.addEventListener('click', () => {
const prevStepId = button.getAttribute('data-prev');
const currentStep = button.closest('.kyc-step');
currentStep.classList.remove('active');
document.getElementById(prevStepId).classList.add('active');
});
});
// File upload previews
function setupFileUpload(inputId, uploadDivId, previewDivId, previewImgId, removeBtnId) {
const input = document.getElementById(inputId);
const uploadDiv = document.getElementById(uploadDivId);
const previewDiv = document.getElementById(previewDivId);
const previewImg = document.getElementById(previewImgId);
const removeBtn = document.getElementById(removeBtnId);
// Handle drag and drop
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
uploadDiv.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
uploadDiv.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
uploadDiv.addEventListener(eventName, unhighlight, false);
});
function highlight() {
uploadDiv.classList.add('dragover');
}
function unhighlight() {
uploadDiv.classList.remove('dragover');
}
// Handle file selection
input.addEventListener('change', function() {
if (this.files && this.files[0]) {
const reader = new FileReader();
reader.onload = function(e) {
previewImg.src = e.target.result;
previewDiv.classList.remove('hidden');
uploadDiv.classList.add('hidden');
}
reader.readAsDataURL(this.files[0]);
}
});
// Handle remove button
removeBtn.addEventListener('click', function() {
input.value = '';
previewDiv.classList.add('hidden');
uploadDiv.classList.remove('hidden');
});
}
// Set up file uploads
setupFileUpload('front-id', 'front-upload', 'front-preview', 'front-preview-img', 'remove-front');
setupFileUpload('back-id', 'back-upload', 'back-preview', 'back-preview-img', 'remove-back');
setupFileUpload('selfie', 'selfie-upload', 'selfie-preview', 'selfie-preview-img', 'remove-selfie');
// Submit KYC
document.getElementById('submit-kyc').addEventListener('click', function() {
// In a real app, you would submit the form data to the server here
// For this demo, we'll just show the success step
document.getElementById('kyc-step-3').classList.remove('active');
document.getElementById('kyc-step-4').classList.add('active');
});
// Show bonus modal on page load (simulating login)
setTimeout(() => {
document.getElementById('bonus-modal').classList.remove('hidden');
}, 1000);
// Close modal
document.getElementById('close-modal').addEventListener('click', function() {
document.getElementById('bonus-modal').classList.add('hidden');
});
document.getElementById('cancel-bonus').addEventListener('click', function() {
document.getElementById('bonus-modal').classList.add('hidden');
});
// Start KYC from modal
document.getElementById('start-kyc').addEventListener('click', function() {
document.getElementById('bonus-modal').classList.add('hidden');
// Switch to KYC tab
tabButtons.forEach(btn => {
btn.classList.remove('border-blue-500', 'text-blue-600');
btn.classList.add('border-transparent', 'text-gray-500');
});
tabContents.forEach(content => {
content.classList.add('hidden');
});
document.querySelector('[data-tab="kyc"]').classList.remove('border-transparent', 'text-gray-500');
document.querySelector('[data-tab="kyc"]').classList.add('border-blue-500', 'text-blue-600');
document.getElementById('kyc').classList.remove('hidden');
});
});
</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=dxlorhuggingface/mxp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>