Create an ai chatbot selection page for logged in users that has the same header and footer from the index.html
53fe820 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sign In | FurryChat.ai</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="relative z-10"> | |
| <!-- Navigation --> | |
| <nav class="bg-white bg-opacity-90 backdrop-blur-sm shadow-sm py-4 px-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://huggingface.co/spaces/Andrewbluebird/furry-tales-digital-whiskers/resolve/main/images/FurryChatLogo complete.png" alt="FurryChat Logo" class="w-[150px] h-[75px] rounded-lg"> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="IntroPage.html" class="text-blue-600 font-medium transition-colors">Home</a> | |
| <a href="characters.html" class="text-gray-600 hover:text-blue-600 transition-colors">Characters</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Features</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">About</a> | |
| </div> | |
| <a href="SignUp.html" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"> | |
| Sign Up | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- Sign In Form Section --> | |
| <section class="py-16 px-4"> | |
| <div class="container mx-auto flex justify-center"> | |
| <div class="w-full max-w-md"> | |
| <div class="bg-white rounded-xl shadow-md p-8"> | |
| <h2 class="text-2xl font-bold text-center mb-6 text-gray-800">Welcome Back!</h2> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="username" class="block text-gray-700 text-sm font-medium mb-2">Username</label> | |
| <input type="text" id="username" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="password" class="block text-gray-700 text-sm font-medium mb-2">Password</label> | |
| <input type="password" id="password" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center"> | |
| <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label> | |
| </div> | |
| <a href="#" class="text-sm text-blue-600 hover:text-blue-700">Forgot password?</a> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"> | |
| Sign In | |
| </button> | |
| </form> | |
| <div class="relative my-6"> | |
| <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"> | |
| <span class="px-2 bg-white text-gray-500">or</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col space-y-4"> | |
| <button class="w-full flex items-center justify-center bg-white hover:bg-gray-100 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors border border-gray-300"> | |
| <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" fill="#EA4335"/> | |
| <path d="M5.293 7.293a1 1 0 0 1 1.414 0L12 12.586l5.293-5.293a1 1 0 1 1 1.414 1.414L13.414 14l5.293 5.293a1 1 0 0 1-1.414 1.414L12 15.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L10.586 14 5.293 8.707a1 1 0 0 1 0-1.414z" fill="#FBBC05"/> | |
| <path d="M12.48 21.173c2.92 0 5.333-1.04 7.093-2.827l-3.36-3.36c-1.013.693-2.307 1.04-3.733 1.04-2.867 0-5.227-1.894-6.08-4.493H1.84v3.413C3.693 19.173 7.613 21.173 12.48 21.173z" fill="#34A853"/> | |
| <path d="M5.293 7.293a1 1 0 0 1 1.414 0L12 12.586l5.293-5.293a1 1 0 1 1 1.414 1.414L13.414 14l5.293 5.293a1 1 0 0 1-1.414 1.414L12 15.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L10.586 14 5.293 8.707a1 1 0 0 1 0-1.414z" fill="#4285F4"/> | |
| </svg> | |
| Sign in with Google | |
| </button> | |
| <button class="w-full flex items-center justify-center bg-blue-700 hover:bg-blue-800 text-white font-medium py-2 px-4 rounded-lg transition-colors"> | |
| <i data-feather="facebook" class="w-5 h-5 mr-2"></i> | |
| Sign in with Facebook | |
| </button> | |
| <button class="w-full flex items-center justify-center bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors"> | |
| <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" fill="#000000"/> | |
| </svg> | |
| Sign in with Apple | |
| </button> | |
| </div> | |
| <div class="text-center mt-6"> | |
| <p class="text-gray-600">Don't have an account? <a href="SignUp.html" class="text-blue-600 hover:text-blue-700 font-medium">Sign up</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white mt-16 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://huggingface.co/spaces/Andrewbluebird/furry-tales-digital-whiskers/resolve/main/images/FurryChatLogo complete.png" alt="FurryChat Logo" class="w-[150px] h-[75px] rounded-lg"> | |
| </div> | |
| <p class="text-gray-400">Perfect AI Furry roleplay haven powered by advanced artificial intelligence.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Product</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">Features</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Pricing</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Community</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">Furry AI Gallery</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Furry AI Avatar Marketplace</a></li> | |
| <li><a href="https://discord.gg/NKaAqn5q" class="hover:text-white transition-colors">Discord server</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">About</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Blog</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Careers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Support</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white transition-colors">Help Center</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Contact</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> | |
| <p>© 2025 MultiForce Entertainment Technologies LTD. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| AOS.init(); | |
| </script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |