Dunnnn/torpedo-java-thunder-boost
1
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>Register - Torpedo Java</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');12 body {13 font-family: 'Montserrat', sans-serif;14 background-color: #111827;15 color: white;16 }17 .register-card {18 box-shadow: 0 0 30px rgba(239, 68, 68, 0.2);19 }20 </style>21</head>22<body>23 <!-- Navigation -->24 <nav class="py-6 px-4 md:px-12 flex justify-between items-center bg-gray-900">25 <div class="flex items-center">26 <div class="w-12 h-12 rounded-lg flex items-center justify-center mr-3 overflow-hidden">27 <img src="https://huggingface.co/spaces/Dunnnn/torpedo-java-thunder-boost/resolve/main/images/torpedo-png.png" alt="Torpedo Java Logo" class="w-full h-full object-contain">28 </div>29 <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-yellow-500">TORPEDO JAVA</span>30</div>31 <div class="hidden md:flex space-x-8">32 <a href="index.html" class="hover:text-red-400 transition">Home</a>33 <a href="shop.html" class="hover:text-red-400 transition">Shop</a>34 <a href="login.html" class="hover:text-red-400 transition">Login</a>35 <a href="register.html" class="text-red-400">Register</a>36 <a href="ingredients.html" class="hover:text-red-400 transition">Ingredients</a>37 <a href="about.html" class="hover:text-red-400 transition">About Us</a>38 </div>39 <a href="shop.html" class="bg-red-600 hover:bg-red-700 px-6 py-2 rounded-full font-bold transition transform hover:scale-105">40 ORDER NOW41 </a>42 <button class="md:hidden">43 <i data-feather="menu"></i>44 </button>45 </nav>46 47 <!-- Main Content -->48 <main class="container mx-auto py-12 px-4">49 <div class="max-w-md mx-auto bg-gray-800 rounded-xl p-8 register-card">50 <h1 class="text-3xl font-bold mb-6 text-center">CREATE ACCOUNT</h1>51 52 <form class="space-y-6" id="register-form">53 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">54 <div>55 <label for="first-name" class="block text-gray-300 mb-2">First Name</label>56 <input type="text" id="first-name" class="w-full px-4 py-3 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-red-600" required>57 </div>58 <div>59 <label for="last-name" class="block text-gray-300 mb-2">Last Name</label>60 <input type="text" id="last-name" class="w-full px-4 py-3 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-red-600" required>61 </div>62 </div>63 64 <div>65 <label for="email" class="block text-gray-300 mb-2">Email Address</label>66 <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-red-600" required>67 </div>68 69 <div>70 <label for="password" class="block text-gray-300 mb-2">Password</label>71 <input type="password" id="password" class="w-full px-4 py-3 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-red-600" required>72 <p class="text-gray-500 text-xs mt-1">Minimum 8 characters with at least 1 number</p>73 </div>74 75 <div>76 <label for="confirm-password" class="block text-gray-300 mb-2">Confirm Password</label>77 <input type="password" id="confirm-password" class="w-full px-4 py-3 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-red-600" required>78 </div>79 80 <div class="flex items-center">81 <input type="checkbox" id="terms" class="rounded bg-gray-700 border-gray-600 text-red-600 focus:ring-red-600" required>82 <label for="terms" class="ml-2 text-gray-300">I agree to the <a href="terms-of-service.html" class="text-red-400 hover:text-red-300">Terms of Service</a> and <a href="privacy-policy.html" class="text-red-400 hover:text-red-300">Privacy Policy</a></label>83 </div>84 85 <div class="flex items-center">86 <input type="checkbox" id="newsletter" class="rounded bg-gray-700 border-gray-600 text-red-600 focus:ring-red-600">87 <label for="newsletter" class="ml-2 text-gray-300">Subscribe to our newsletter</label>88 </div>89 90 <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-bold transition transform hover:scale-105">91 CREATE ACCOUNT92 </button>93 94 <div class="text-center text-gray-400">95 Already have an account? <a href="login.html" class="text-red-400 hover:text-red-300">Login</a>96 </div>97 </form>98 </div>99 </main>100 101 <!-- Footer -->102 <footer class="bg-gray-900 py-12 px-4 md:px-12">103 <div class="container mx-auto">104 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">105 <div>106 <h3 class="text-xl font-bold mb-4">TORPEDO JAVA</h3>107 <p class="text-gray-400 mb-4">Premium male enhancement drink powered by nature.</p>108 <div class="flex space-x-4">109 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>110 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>111 <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>112 </div>113 </div>114 <div>115 <h4 class="font-bold mb-4">PRODUCT</h4>116 <ul class="space-y-2">117 <li><a href="shop.html" class="text-gray-400 hover:text-white transition">Shop</a></li>118 <li><a href="ingredients.html" class="text-gray-400 hover:text-white transition">Ingredients</a></li>119 <li><a href="how-it-works.html" class="text-gray-400 hover:text-white transition">How It Works</a></li>120 <li><a href="testimonials.html" class="text-gray-400 hover:text-white transition">Testimonials</a></li>121 </ul>122 </div>123 <div>124 <h4 class="font-bold mb-4">CUSTOMER CARE</h4>125 <ul class="space-y-2">126 <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact Us</a></li>127 <li><a href="faq.html" class="text-gray-400 hover:text-white transition">FAQs</a></li>128 <li><a href="shipping-policy.html" class="text-gray-400 hover:text-white transition">Shipping</a></li>129 <li><a href="returns.html" class="text-gray-400 hover:text-white transition">Returns</a></li>130 </ul>131 </div>132 <div>133 <h4 class="font-bold mb-4">COMPANY</h4>134 <ul class="space-y-2">135 <li><a href="about.html" class="text-gray-400 hover:text-white transition">About Us</a></li>136 <li><a href="privacy-policy.html" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>137 <li><a href="terms-of-service.html" class="text-gray-400 hover:text-white transition">Terms</a></li>138 </ul>139 </div>140 </div>141 <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">142 <p>© 2025 Torpedo Java. All rights reserved.</p>143 </div>144 </div>145 </footer>146 147 <script>148 feather.replace();149 150 document.getElementById('register-form').addEventListener('submit', function(e) {151 e.preventDefault();152 const password = document.getElementById('password').value;153 const confirmPassword = document.getElementById('confirm-password').value;154 const termsChecked = document.getElementById('terms').checked;155 156 // Simple validation157 if (password !== confirmPassword) {158 alert('Passwords do not match');159 return;160 }161 162 if (password.length < 8 || !/\d/.test(password)) {163 alert('Password must be at least 8 characters with at least 1 number');164 return;165 }166 167 if (!termsChecked) {168 alert('You must agree to the Terms of Service and Privacy Policy');169 return;170 }171 172 // In a real app, you would send this data to your backend173 localStorage.setItem('userLoggedIn', 'true');174 localStorage.setItem('userEmail', document.getElementById('email').value);175 localStorage.setItem('userFirstName', document.getElementById('first-name').value);176 177 // Show success message178 alert('Registration successful! Redirecting to your account...');179 window.location.href = 'myaccount.html';180 });181 </script>182</body>183</html>