File size: 10,082 Bytes
df8b402 cff3429 df8b402 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 | <!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CryptoPulse Pro - Register</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/cta-banner.js"></script>
</head>
<body class="bg-gray-900 text-white font-sans flex flex-col min-h-screen">
<custom-navbar></custom-navbar>
<!-- Hero -->
<section class="relative overflow-hidden py-16 bg-gradient-to-br from-purple-900/40 to-blue-900/40">
<div class="absolute inset-0 opacity-20">
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==')]"></div>
</div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">Create Your Account</h1>
<p class="text-lg text-gray-400 max-w-3xl mx-auto">Join thousands of traders who trust CryptoPulse Pro with their digital assets</p>
</div>
</section>
<!-- Registration Form -->
<section class="py-16 bg-gray-900">
<div class="max-w-md mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-gray-800 rounded-xl p-8 border border-gray-700 shadow-2xl">
<h2 class="text-2xl font-bold mb-8 text-center">Get Started in Minutes</h2>
<!-- Social Login Buttons -->
<div class="mb-6">
<p class="text-center text-gray-400 mb-4">Or register with</p>
<div class="grid grid-cols-3 gap-4">
<a href="#" class="bg-gray-700 hover:bg-gray-600 py-3 px-4 rounded-lg flex items-center justify-center transition-all duration-300">
<i data-feather="google" class="w-5 h-5 mr-2"></i>
<span>Google</span>
</a>
<a href="#" class="bg-gray-700 hover:bg-gray-600 py-3 px-4 rounded-lg flex items-center justify-center transition-all duration-300">
<i data-feather="facebook" class="w-5 h-5 mr-2"></i>
<span>Facebook</span>
</a>
<a href="#" class="bg-gray-700 hover:bg-gray-600 py-3 px-4 rounded-lg flex items-center justify-center transition-all duration-300">
<i data-feather="twitter" class="w-5 h-5 mr-2"></i>
<span>Twitter</span>
</a>
</div>
</div>
<!-- Divider -->
<div class="flex items-center my-6">
<div class="flex-grow border-t border-gray-700"></div>
<span class="mx-4 text-gray-500">or</span>
<div class="flex-grow border-t border-gray-700"></div>
</div>
<!-- Registration Form -->
<form id="registrationForm" class="space-y-6">
<div>
<label for="regEmail" class="block text-sm font-medium text-gray-400 mb-1">Email Address</label>
<input type="email" id="regEmail" name="email" required class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
</div>
<div>
<label for="regPassword" class="block text-sm font-medium text-gray-400 mb-1">Password</label>
<div class="relative">
<input type="password" id="regPassword" name="password" required class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
<button type="button" class="absolute right-3 top-3 text-gray-500 hover:text-gray-300 toggle-password">
<i data-feather="eye" class="w-5 h-5"></i>
</button>
</div>
<div class="mt-2 text-xs text-gray-500">
<p>Password must contain:</p>
<ul class="list-disc list-inside">
<li>At least 8 characters</li>
<li>One uppercase letter</li>
<li>One number</li>
<li>One special character</li>
</ul>
</div>
</div>
<div>
<label for="regConfirmPassword" class="block text-sm font-medium text-gray-400 mb-1">Confirm Password</label>
<div class="relative">
<input type="password" id="regConfirmPassword" name="confirmPassword" required class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
<button type="button" class="absolute right-3 top-3 text-gray-500 hover:text-gray-300 toggle-password">
<i data-feather="eye" class="w-5 h-5"></i>
</button>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="terms" name="terms" type="checkbox" required class="w-4 h-4 bg-gray-700 border-gray-600 rounded focus:ring-purple-500 focus:ring-2">
</div>
<label for="terms" class="ml-3 block text-sm text-gray-400">
I agree to the <a href="/terms" class="text-purple-400 hover:underline">Terms of Service</a> and <a href="/privacy" class="text-purple-400 hover:underline">Privacy Policy</a>
</label>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="newsletter" name="newsletter" type="checkbox" class="w-4 h-4 bg-gray-700 border-gray-600 rounded focus:ring-purple-500 focus:ring-2">
</div>
<label for="newsletter" class="ml-3 block text-sm text-gray-400">
Receive product updates and marketing emails
</label>
</div>
<div>
<button type="submit" class="w-full bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300">
Create Account
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-500">
Already have an account? <a href="/login" class="text-purple-400 hover:underline font-medium">Sign In</a>
</p>
</div>
</div>
<!-- Security Info -->
<div class="mt-8 bg-gray-800 rounded-xl p-6 border border-gray-700">
<div class="flex items-start">
<div class="bg-purple-500/20 p-3 rounded-lg mr-4">
<i data-feather="shield" class="w-6 h-6 text-purple-400"></i>
</div>
<div>
<h3 class="text-lg font-bold mb-2">Your Security is Our Priority</h3>
<p class="text-gray-400 text-sm">
We use bank-level encryption and security protocols to protect your account and assets. All data is encrypted both in transit and at rest.
</p>
</div>
</div>
</div>
</div>
</section>
<custom-cta-banner></custom-cta-banner>
<custom-footer></custom-footer>
<script src="script.js"></script>
<script>
feather.replace();
// Password toggle functionality
document.querySelectorAll('.toggle-password').forEach(button => {
button.addEventListener('click', function() {
const input = this.parentElement.querySelector('input');
const icon = this.querySelector('i');
if (input.type === 'password') {
input.type = 'text';
icon.setAttribute('data-feather', 'eye-off');
} else {
input.type = 'password';
icon.setAttribute('data-feather', 'eye');
}
feather.replace();
});
});
// Form submission
document.getElementById('registrationForm').addEventListener('submit', function(e) {
e.preventDefault();
// Here you would typically send the form data to your server
window.location.href = '/dashboard'; // Redirect after successful registration
});
</script>
</body>
</html> |