| <!DOCTYPE html>
|
| <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">
|
|
|
| <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-gray-600 hover:text-blue-600 transition-colors">Home</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">Pricing</a>
|
| <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">About</a>
|
| </div>
|
| <a href="SignIn.html" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
|
| Login
|
| </a>
|
| </div>
|
| </nav>
|
|
|
|
|
| <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">
|
| <a href="AIFurrySelectPage.html">Sign In</a>
|
| </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 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> |
