| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Register - SMM Panel</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <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> |
| .register-box { |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100"> |
| |
| <nav class="bg-indigo-700 text-white p-4 shadow-lg"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-rocket text-2xl"></i> |
| <h1 class="text-2xl font-bold">SMM Panel</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="login.html" class="bg-white text-indigo-700 px-4 py-2 rounded font-medium hover:bg-indigo-100 transition">Login</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="container mx-auto px-4 py-16 flex justify-center"> |
| <div class="w-full max-w-md"> |
| <div class="register-box bg-white p-8 rounded-lg"> |
| <div class="text-center mb-8"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-2">Create Account</h2> |
| <p class="text-gray-600">Get started with our SMM services</p> |
| </div> |
| <form class="space-y-6"> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label> |
| <input type="text" id="first-name" name="first-name" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| <div> |
| <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label> |
| <input type="text" id="last-name" name="last-name" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
| <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-indigo-500 focus:border-indigo-500" placeholder="your@email.com"> |
| </div> |
| <div> |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> |
| <input type="password" id="password" name="password" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-indigo-500 focus:border-indigo-500" placeholder="••••••••"> |
| <p class="mt-1 text-xs text-gray-500">Must be at least 8 characters</p> |
| </div> |
| <div> |
| <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label> |
| <input type="password" id="confirm-password" name="confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded focus:ring-indigo-500 focus:border-indigo-500" placeholder="••••••••"> |
| </div> |
| <div> |
| <button type="submit" class="w-full bg-indigo-700 text-white py-3 rounded font-medium hover:bg-indigo-800 transition">Create Account</button> |
| </div> |
| <div class="flex items-start"> |
| <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded mt-1"> |
| <label for="terms" class="ml-2 block text-sm text-gray-700"> |
| I agree to the <a href="#" class="text-indigo-700 hover:text-indigo-900">Terms of Service</a> and <a href="#" class="text-indigo-700 hover:text-indigo-900">Privacy Policy</a> |
| </label> |
| </div> |
| </form> |
| <div class="mt-6"> |
| <div class="relative"> |
| <div class="absolute inset-0 flex items-center"> |
| <div class="w-full border-t border-gray-300"></div> |
| </div> |
| <div class="relative flex justify-center text-sm"> |
| <span class="px-2 bg-white text-gray-500">Or sign up with</span> |
| </div> |
| </div> |
| <div class="mt-6 grid grid-cols-2 gap-3"> |
| <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"> |
| <i class="fab fa-google text-red-500"></i> |
| </a> |
| <a href="#" class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"> |
| <i class="fab fa-facebook-f text-blue-600"></i> |
| </a> |
| </div> |
| </div> |
| <div class="mt-6 text-center"> |
| <p class="text-sm text-gray-600"> |
| Already have an account? |
| <a href="login.html" class="font-medium text-indigo-700 hover:text-indigo-800">Login here</a> |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <h3 class="text-xl font-bold">SMM Panel</h3> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white transition">Terms</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Privacy</a> |
| <a href="#" class="text-gray-400 hover:text-white transition">Support</a> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 SMM Panel. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| </body> |
| </html> |
