File size: 12,711 Bytes
8d75ae6 2240e71 b3465a6 0bf715e 53fe820 8d75ae6 53fe820 8d75ae6 bf56231 1cc9881 af35693 bf56231 af35693 bf56231 f736b82 6acb2d9 18465d4 6acb2d9 18465d4 bf56231 8d75ae6 527102f 219b2cc 527102f 8d75ae6 bf56231 8d75ae6 bf56231 8d75ae6 1e9f1a8 2dd85dc 8d75ae6 2dd85dc 41c37df 3ddd1f8 8d75ae6 1e9f1a8 8d75ae6 2dd85dc 8d75ae6 bf56231 18465d4 8d75ae6 bf56231 8d75ae6 | 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 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up | 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="#" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
Login
</a>
</div>
</nav>
<!-- Sign Up Form Section -->
<section class="py-16 px-4">
<div class="container mx-auto flex justify-center">
<div class="w-full max-w-2xl flex">
<!-- Social Sign Up -->
<div class="bg-white rounded-l-xl shadow-md p-8 flex-1">
<h2 class="text-2xl font-bold text-center mb-6 text-gray-800">Quick Sign Up</h2>
<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 up 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 up 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 up with Apple
</button>
</div>
<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="text-center">
<p class="text-gray-600">Already have an account? <a href="#" class="text-blue-600 hover:text-blue-700 font-medium">Log in</a></p>
</div>
</div>
<!-- Email Sign Up -->
<div class="bg-white rounded-r-xl shadow-md p-8 flex-1 border-l border-gray-200">
<h2 class="text-2xl font-bold text-center mb-6 text-gray-800">Create Your Account</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-4">
<label for="email" class="block text-gray-700 text-sm font-medium mb-2">Email</label>
<input type="email" id="email" 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-4">
<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="mb-6">
<label for="confirm-password" class="block text-gray-700 text-sm font-medium mb-2">Confirm Password</label>
<input type="password" id="confirm-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="mb-6">
<label for="phone" class="block text-gray-700 text-sm font-medium mb-2">Phone Number</label>
<div class="flex">
<select class="bg-gray-100 border border-gray-300 text-gray-700 py-2 px-3 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>+852</option>
</select>
<input type="tel" id="phone" placeholder="Phone number" class="flex-1 border border-gray-300 rounded-r-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" pattern="[0-9]{8}">
</div>
<p class="mt-1 text-xs text-gray-500">Enter your 8-digit Hong Kong phone number</p>
</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 Up
</button>
</form>
</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();
// Social sign up handlers
document.querySelector('.bg-red-600').addEventListener('click', () => {
// Google sign up logic
console.log('Google sign up clicked');
});
document.querySelector('.bg-blue-700').addEventListener('click', () => {
// Facebook sign up logic
console.log('Facebook sign up clicked');
});
document.querySelector('.bg-black').addEventListener('click', () => {
// Apple sign up logic
console.log('Apple sign up clicked');
});
</script>
<script src="script.js"></script>
</body>
</html> |