File size: 6,276 Bytes
5dd2d82 9948ae0 5dd2d82 9948ae0 5dd2d82 9948ae0 5dd2d82 9948ae0 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meet Our Characters | 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>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<link rel="stylesheet" href="style.css">
<style>
.character-card {
transition: all 0.3s ease;
}
.character-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.character-image {
height: 300px;
object-fit: cover;
object-position: top;
}
.badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.badge-online {
background-color: #10b981;
color: white;
}
.badge-offline {
background-color: #6b7280;
color: white;
}
.tag {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
background-color: #e5e7eb;
color: #4b5563;
font-size: 0.75rem;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Hero Section with Vanta.js Background -->
<div id="vanta-bg" class="absolute top-0 left-0 w-full h-screen z-0"></div>
<div class="relative z-10">
<!-- Navigation -->
<custom-navbar logged-in="true"></custom-navbar>
<!-- 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>
<li><a href="/animations" class="hover:text-white transition-colors">Animations</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 src="components/navbar.js"></script>
<script>
// Initialize animations and icons
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
// Initialize Vanta.js background with blue color
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3b82f6,
backgroundColor: 0xf8fafc,
size: 0.8
});
</script>
<script src="script.js"></script>
</body>
</html> |