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>Login - 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 .login-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="text-red-400">Login</a>35 <a href="ingredients.html" class="hover:text-red-400 transition">Ingredients</a>36 <a href="about.html" class="hover:text-red-400 transition">About Us</a>37 </div>38 <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">39 ORDER NOW40 </a>41 <button class="md:hidden">42 <i data-feather="menu"></i>43 </button>44 </nav>45 46 <!-- Main Content -->47 <main class="container mx-auto py-12 px-4">48 <div class="max-w-md mx-auto bg-gray-800 rounded-xl p-8 login-card">49 <h1 class="text-3xl font-bold mb-6 text-center">LOGIN</h1>50 51 <form class="space-y-6" id="login-form">52 <div>53 <label for="email" class="block text-gray-300 mb-2">Email Address</label>54 <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>55 </div>56 57 <div>58 <label for="password" class="block text-gray-300 mb-2">Password</label>59 <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>60 </div>61 62 <div class="flex items-center justify-between">63 <div class="flex items-center">64 <input type="checkbox" id="remember" class="rounded bg-gray-700 border-gray-600 text-red-600 focus:ring-red-600">65 <label for="remember" class="ml-2 text-gray-300">Remember me</label>66 </div>67 <a href="#" class="text-red-400 hover:text-red-300 text-sm">Forgot password?</a>68 </div>69 70 <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">71 LOGIN72 </button>73 74 <div class="text-center text-gray-400">75 Don't have an account? <a href="register.html" class="text-red-400 hover:text-red-300">Register</a>76 </div>77 </form>78 79 <div class="relative my-6">80 <div class="absolute inset-0 flex items-center">81 <div class="w-full border-t border-gray-700"></div>82 </div>83 <div class="relative flex justify-center text-sm">84 <span class="px-2 bg-gray-800 text-gray-400">Or continue with</span>85 </div>86 </div>87 88 <div class="grid grid-cols-2 gap-4">89 <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg font-medium flex items-center justify-center">90 <i data-feather="facebook" class="w-4 h-4 mr-2"></i>91 Facebook92 </button>93 <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg font-medium flex items-center justify-center">94 <i data-feather="google" class="w-4 h-4 mr-2"></i>95 Google96 </button>97 </div>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('login-form').addEventListener('submit', function(e) {151 e.preventDefault();152 const email = document.getElementById('email').value;153 const password = document.getElementById('password').value;154 155 // Simple validation156 if (email && password) {157 // In a real app, you would validate credentials with your backend158 localStorage.setItem('userLoggedIn', 'true');159 localStorage.setItem('userEmail', email);160 161 // Show success message162 alert('Login successful! Redirecting to your account...');163 window.location.href = 'myaccount.html';164 } else {165 alert('Please fill in all fields');166 }167 });168 </script>169</body>170</html>