Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="mobile-web-app-capable" content="yes"> | |
| <title>GlowSign - Modern Registration</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#6366f1', | |
| }, | |
| secondary: { | |
| 500: '#ec4899', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f172a; | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); | |
| } | |
| .glow-effect-secondary { | |
| box-shadow: 0 0 15px rgba(236, 72, 153, 0.5); | |
| } | |
| .input-glow:focus { | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center p-0" ontouchstart=""> | |
| <div class="fixed inset-0 overflow-hidden z-[-1]"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary-500/10 to-secondary-500/10 opacity-20"></div> | |
| <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div> | |
| </div> | |
| <div class="w-full h-screen bg-gray-900"> | |
| <div class="gradient-bg backdrop-blur-lg overflow-hidden glow-effect transition-all duration-300 hover:glow-effect-secondary h-full"> | |
| <div class="p-8 sm:p-10 h-full w-full flex flex-col justify-center"> | |
| <div class="text-center mb-10"> | |
| <div class="w-16 h-16 bg-primary-500 rounded-full flex items-center justify-center mx-auto mb-4 glow-effect"> | |
| <i data-feather="user-plus" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-white mb-2">Join the Neon Tribe</h2> | |
| <p class="text-gray-400">Create your account in seconds</p> | |
| </div> | |
| <form id="signupForm" class="space-y-6"> | |
| <div class="space-y-4 mb-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Full Name</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="user" class="text-gray-500 w-4 h-4"></i> | |
| </div> | |
| <input type="text" id="name" class="input-glow pl-10 w-full bg-gray-800/50 border border-gray-700 text-white rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all duration-200" placeholder="John Doe"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="mail" class="text-gray-500 w-4 h-4"></i> | |
| </div> | |
| <input type="email" id="email" class="input-glow pl-10 w-full bg-gray-800/50 border border-gray-700 text-white rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all duration-200" placeholder="you@example.com"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-300 mb-1">Password</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="lock" class="text-gray-500 w-4 h-4"></i> | |
| </div> | |
| <input type="password" id="password" class="input-glow pl-10 w-full bg-gray-800/50 border border-gray-700 text-white rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all duration-200" placeholder="••••••••"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="confirm-password" class="block text-sm font-medium text-gray-300 mb-1">Confirm Password</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="key" class="text-gray-500 w-4 h-4"></i> | |
| </div> | |
| <input type="password" id="confirm-password" class="input-glow pl-10 w-full bg-gray-800/50 border border-gray-700 text-white rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all duration-200" placeholder="••••••••"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center mb-8"> | |
| <input id="terms" type="checkbox" class="h-4 w-4 text-primary-500 focus:ring" required> | |
| <label for="terms" class="ml-2 block text-sm text-gray-300"> | |
| I agree to the <a href="#" class="text-primary-400 hover:text-primary-300">Terms</a> | |
| </label> | |
| </div> | |
| <button type="submit" class="w-full bg-primary-500 hover:bg-primary-600 text-white font-medium py-3 px-4 rounded-lg transition duration-200 glow-effect hover:glow-effect-secondary"> | |
| Sign Up | |
| </button> | |
| <button onclick="showSampleModal()" class="w-full mt-4 bg-secondary-500 hover:bg-secondary-600 text-white font-medium py-3 px-4 rounded-lg transition duration-200 glow-effect hover:glow-effect-secondary"> | |
| View Sample | |
| </button> | |
| </form> | |
| <div class="text-center mt-6"> | |
| <p class="text-gray-400">Already have an account? <a href="dashboard.html" class="text-primary-400 hover:text-primary-300 font-medium">Sign in</a> or <a href="appstore.html" class="text-secondary-400 hover:text-secondary-300 font-medium">Explore Apps</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="sampleModal" class="hidden fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4"> | |
| <div class="gradient-bg backdrop-blur-lg rounded-2xl overflow-hidden border border-gray-800 glow-effect p-8 max-w-sm w-full"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-secondary-500 rounded-full flex items-center justify-center mx-auto mb-4 glow-effect"> | |
| <i data-feather="eye" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2">Sample Content</h3> | |
| <p class="text-gray-300 mb-6">This is a sample modal to demonstrate the UI capabilities.</p> | |
| <button onclick="closeSampleModal()" class="w-full bg-secondary-500 text-white py-2 px-4 rounded-lg font-medium hover:bg-secondary-600 transition"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="successModal" class="hidden fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4"> | |
| <div class="gradient-bg backdrop-blur-lg rounded-2xl overflow-hidden border border-gray-800 glow-effect p-8 max-w-sm w-full"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4 glow-effect"> | |
| <i data-feather="check" class="text-white w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2">Welcome to the Tribe!</h3> | |
| <p class="text-gray-300 mb-6">Your account has been created successfully.</p> | |
| <button onclick="closeModal()" class="w-full bg-primary-500 text-white py-2 px-4 rounded-lg font-medium hover:bg-primary-600 transition"> | |
| Continue | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |