File size: 11,173 Bytes
5dd2d82 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | <!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">
<!-- 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-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>
<!-- 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">
<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 -->
<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> |