Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Manus - Sign Up</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f9fafb; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6b46c1 0%, #805ad5 100%); | |
| } | |
| .input-focus:focus { | |
| box-shadow: 0 0 0 3px rgba(104, 88, 214, 0.2); | |
| border-color: #6b46c1; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center p-4"> | |
| <div class="max-w-md w-full space-y-8"> | |
| <div class="text-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| <h2 class="mt-6 text-3xl font-extrabold text-gray-900">Sign up to Manus</h2> | |
| <p class="mt-2 text-sm text-gray-600"> | |
| Get <span class="font-bold text-indigo-600">1000 credits</span> + <span class="font-bold text-indigo-600">300 daily credits</span> | |
| </p> | |
| <p class="mt-1 text-sm text-gray-500">No waitlist—start creating now</p> | |
| </div> | |
| <div class="mt-8 space-y-6"> | |
| <div class="rounded-md shadow-sm space-y-4"> | |
| <div> | |
| <label for="email" class="sr-only">Email address</label> | |
| <input id="email" name="email" type="email" autocomplete="email" required | |
| class="appearance-none rounded-md relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm input-focus" | |
| placeholder="Email address"> | |
| </div> | |
| <div> | |
| <label for="password" class="sr-only">Password</label> | |
| <input id="password" name="password" type="password" autocomplete="current-password" required | |
| class="appearance-none rounded-md relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm input-focus" | |
| placeholder="Password"> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="submit" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white gradient-bg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out"> | |
| <span class="absolute left-0 inset-y-0 flex items-center pl-3"> | |
| <svg class="h-5 w-5 text-indigo-300 group-hover:text-indigo-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" /> | |
| </svg> | |
| </span> | |
| Sign up | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-full border-t border-gray-300"></div> | |
| <div class="px-4 text-sm text-gray-500">Or</div> | |
| <div class="w-full border-t border-gray-300"></div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button type="button" 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0110 4.844c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.933.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C17.14 18.163 20 14.418 20 10c0-5.523-4.477-10-10-10z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| <button type="button" 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"> | |
| <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <p class="text-sm text-gray-600"> | |
| Already have an account? | |
| <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Sign in</a> | |
| </p> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple form validation | |
| document.querySelector('button[type="submit"]').addEventListener('click', function(e) { | |
| const email = document.getElementById('email').value; | |
| const password = document.getElementById('password').value; | |
| if (!email || !password) { | |
| alert('Please fill in all fields'); | |
| e.preventDefault(); | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=likhonsheikhdev/x" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |