|
|
| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>My Profile | 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>
|
| .stat-card {
|
| transition: all 0.3s ease;
|
| }
|
| .stat-card:hover {
|
| transform: translateY(-5px);
|
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
| }
|
| .activity-item {
|
| transition: all 0.2s ease;
|
| }
|
| .activity-item:hover {
|
| background-color: #f3f4f6;
|
| }
|
| .character-badge {
|
| display: inline-flex;
|
| align-items: center;
|
| padding: 0.5rem 1rem;
|
| border-radius: 9999px;
|
| font-size: 0.875rem;
|
| font-weight: 500;
|
| margin: 0.25rem;
|
| }
|
| .achievement-badge {
|
| width: 60px;
|
| height: 60px;
|
| border-radius: 50%;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-size: 24px;
|
| transition: all 0.3s ease;
|
| }
|
| .achievement-badge:hover {
|
| transform: scale(1.1);
|
| }
|
| .achievement-badge.unlocked {
|
| background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
| }
|
| .achievement-badge.locked {
|
| background: #e5e7eb;
|
| opacity: 0.5;
|
| }
|
| .progress-ring {
|
| transform: rotate(-90deg);
|
| }
|
| .progress-ring-circle {
|
| transition: stroke-dashoffset 0.35s;
|
| transform-origin: 50% 50%;
|
| }
|
| </style>
|
| </head>
|
| <body class="bg-gray-50">
|
|
|
| <div id="vanta-bg" class="absolute top-0 left-0 w-full h-screen z-0"></div>
|
|
|
| <div class="relative z-10">
|
|
|
| <custom-navbar logged-in="true"></custom-navbar>
|
|
|
|
|
| <section class="py-12 px-4">
|
| <div class="container mx-auto max-w-6xl">
|
|
|
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8" data-aos="fade-up">
|
| <div class="h-32 bg-gradient-to-r from-blue-600 to-purple-600"></div>
|
| <div class="px-8 pb-8">
|
| <div class="flex flex-col md:flex-row items-start md:items-end -mt-16 mb-6">
|
| <div class="relative">
|
| <img src="http://static.photos/people/150x150/42" alt="Profile Avatar" class="w-32 h-32 rounded-full border-4 border-white shadow-lg object-cover">
|
| <button class="absolute bottom-0 right-0 bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 transition-colors">
|
| <i data-feather="camera" class="w-4 h-4"></i>
|
| </button>
|
| </div>
|
| <div class="mt-4 md:mt-0 md:ml-6 flex-1">
|
| <h1 class="text-3xl font-bold text-gray-800">User123</h1>
|
| <p class="text-gray-600">Member since January 2025</p>
|
| <div class="flex items-center gap-2 mt-2">
|
| <span class="badge-online px-3 py-1 rounded-full text-sm font-medium">Online</span>
|
| <span class="text-gray-500 text-sm">Last active: Just now</span>
|
| </div>
|
| </div>
|
| <div class="mt-4 md:mt-0 flex gap-3">
|
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors flex items-center gap-2">
|
| <i data-feather="edit-2" class="w-4 h-4"></i>
|
| Edit Profile
|
| </button>
|
| <button class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg transition-colors flex items-center gap-2">
|
| <i data-feather="share-2" class="w-4 h-4"></i>
|
| Share
|
| </button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="border-t pt-6">
|
| <p class="text-gray-600">Furry enthusiast and AI roleplay lover. Always looking for new characters to chat with! 🐾</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
| <div class="stat-card bg-white rounded-xl shadow-md p-6 text-center" data-aos="fade-up" data-aos-delay="100">
|
| <div class="w-16 h-16 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
|
| <i data-feather="message-circle" class="w-8 h-8 text-blue-600"></i>
|
| </div>
|
| <h3 class="text-3xl font-bold text-gray-800" id="total-messages">12,847</h3>
|
| <p class="text-gray-600">Total Messages</p>
|
| <span class="text-green-500 text-sm flex items-center justify-center gap-1 mt-2">
|
| <i data-feather="trending-up" class="w-4 h-4"></i>
|
| +156 this week
|
| </span>
|
| </div>
|
|
|
| <div class="stat-card bg-white rounded-xl shadow-md p-6 text-center" data-aos="fade-up" data-aos-delay="200">
|
| <div class="w-16 h-16 mx-auto mb-4 bg-purple-100 rounded-full flex items-center justify-center">
|
| <i data-feather="users" class="w-8 h-8 text-purple-600"></i>
|
| </div>
|
| <h3 class="text-3xl font-bold text-gray-800" id="characters-chatted">23</h3>
|
| <p class="text-gray-600">Characters Chatted</p>
|
| <span class="text-gray-500 text-sm mt-2">7 active this week</span>
|
| </div>
|
|
|
| <div class="stat-card bg-white rounded-xl shadow-md p-6 text-center" data-aos="fade-up" data-aos-delay="300">
|
| <div class="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
|
| <i data-feather="clock" class="w-8 h-8 text-green-600"></i>
|
| </div>
|
| <h3 class="text-3xl font-bold text-gray-800">186</h3>
|
| <p class="text-gray-600">Hours Spent</p>
|
| <span class="text-gray-500 text-sm mt-2">~2.5 hours/day</span>
|
| </div>
|
|
|
| <div class="stat-card bg-white rounded-xl shadow-md p-6 text-center" data-aos="fade-up" data-aos-delay="400">
|
| <div class="w-16 h-16 mx-auto mb-4 bg-amber-100 rounded-full flex items-center justify-center">
|
| <i data-feather="award" class="w-8 h-8 text-amber-600"></i>
|
| </div>
|
| <h3 class="text-3xl font-bold text-gray-800">12</h3>
|
| <p class="text-gray-600">Achievements</p>
|
| <span class="text-gray-500 text-sm mt-2">Top 5% of users</span>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
| <div class="lg:col-span-2 space-y-8">
|
|
|
| <div class="bg-white rounded-xl shadow-md p-6" data-aos="fade-up">
|
| <div class="flex justify-between items-center mb-6">
|
| <h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
|
| <i data-feather="activity" class="w-5 h-5 text-blue-600"></i>
|
| Recent Chat Activity
|
| </h2>
|
| <a href="ChatRecords.html" class="text-blue-600 hover:text-blue-700 text-sm font-medium">View All</a>
|
| </div>
|
|
|
| <div class="space-y-4">
|
| <div class="activity-item flex items-center gap-4 p-3 rounded-lg">
|
| <img src="\Images\Sancia the cat.png" alt="Sancia" class="w-12 h-12 rounded-full object-cover">
|
| <div class="flex-1">
|
| <h4 class="font-semibold text-gray-800">Sancia the Cat</h4>
|
| <p class="text-sm text-gray-600">"That's wonderful! Tell me more about your day..."</p>
|
| </div>
|
| <div class="text-right">
|
| <span class="text-xs text-gray-500">2 mins ago</span>
|
| <span class="block text-xs font-medium text-blue-600">42 messages</span>
|
| </div>
|
| </div>
|
|
|
| <div class="activity-item flex items-center gap-4 p-3 rounded-lg">
|
| <img src="\Images\Nolan the penguin.png" alt="Nolan" class="w-12 h-12 rounded-full object-cover">
|
| <div class="flex-1">
|
| <h4 class="font-semibold text-gray-800">Nolan the Penguin</h4>
|
| <p class="text-sm text-gray-600">"The Arctic is lovely this time of year!"</p>
|
| </div>
|
| <div class="text-right">
|
| <span class="text-xs text-gray-500">1 hour ago</span>
|
| <span class="block text-xs font-medium text-blue-600">128 messages</span>
|
| </div>
|
| </div>
|
|
|
| <div class="activity-item flex items-center gap-4 p-3 rounded-lg">
|
| <img src="http://static.photos/animals/120x120/3" alt="Zoe" class="w-12 h-12 rounded-full object-cover">
|
| <div class="flex-1">
|
| <h4 class="font-semibold text-gray-800">Zoe the Fox</h4>
|
| <p class="text-sm text-gray-600">"Want to go on an adventure?"</p>
|
| </div>
|
| <div class="text-right">
|
| <span class="text-xs text-gray-500">Yesterday</span>
|
| <span class="block text-xs font-medium text-blue-600">256 messages</span>
|
| </div>
|
| </div>
|
|
|
| <div class="activity-item flex items-center gap-4 p-3 rounded-lg">
|
| <img src="http://static.photos/animals/120x120/8" alt="Bella" class="w-12 h-12 rounded-full object-cover">
|
| <div class="flex-1">
|
| <h4 class="font-semibold text-gray-800">Bella the Wolf</h4>
|
| <p class="text-sm text-gray-600">"How's the pack doing today?"</p>
|
| </div>
|
| <div class="text-right">
|
| <span class="text-xs text-gray-500">2 days ago</span>
|
| <span class="block text-xs font-medium text-gray-500">89 messages</span>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="bg-white rounded-xl shadow-md p-6" data-aos="fade-up">
|
| <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
|
| <i data-feather="heart" class="w-5 h-5 text-red-500"></i>
|
| Most Chatted Characters
|
| </h2>
|
|
|
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
| <div class="text-center">
|
| <div class="relative inline-block">
|
| <img src="\Images\Sancia the cat.png" alt="Sancia" class="w-20 h-20 rounded-full object-cover mx-auto mb-2">
|
| <div class="absolute -bottom-1 -right-1 w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white text-xs font-bold">#1</div>
|
| </div>
|
| <h4 class="font-semibold text-gray-800">Sancia</h4>
|
| <p class="text-sm text-gray-600">3,247 msgs</p>
|
| </div>
|
|
|
| <div class="text-center">
|
| <div class="relative inline-block">
|
| <img src="http://static.photos/animals/120x120/3" alt="Zoe" class="w-20 h-20 rounded-full object-cover mx-auto mb-2">
|
| <div class="absolute -bottom-1 -right-1 w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center text-white text-xs font-bold">#2</div>
|
| </div>
|
| <h4 class="font-semibold text-gray-800">Zoe</h4>
|
| <p class="text-sm text-gray-600">2,156 msgs</p>
|
| </div>
|
|
|
| <div class="text-center">
|
| <div class="relative inline-block">
|
| <img src="\Images\Nolan the penguin.png" alt="Nolan" class="w-20 h-20 rounded-full object-cover mx-auto mb-2">
|
| <div class="absolute -bottom-1 -right-1 w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center text-white text-xs font-bold">#3</div>
|
| </div>
|
| <h4 class="font-semibold text-gray-800">Nolan</h4>
|
| <p class="text-sm text-gray-600">1,892 msgs</p>
|
| </div>
|
|
|
| <div class="text-center">
|
| <div class="relative inline-block">
|
| <img src="http://static.photos/animals/120x120/8" alt="Bella" class="w-20 h-20 rounded-full object-cover mx-auto mb-2">
|
| <div class="absolute -bottom-1 -right-1 w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center text-white text-xs font-bold">#4</div>
|
| </div>
|
| <h4 class="font-semibold text-gray-800">Bella</h4>
|
| <p class="text-sm text-gray-600">1,456 msgs</p>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="space-y-8">
|
|
|
| <div class="bg-white rounded-xl shadow-md p-6" data-aos="fade-up">
|
| <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
|
| <i data-feather="star" class="w-5 h-5 text-yellow-500"></i>
|
| Level 24
|
| </h2>
|
|
|
| <div class="flex items-center justify-center mb-4">
|
| <div class="relative w-32 h-32">
|
| <svg class="progress-ring w-32 h-32" viewBox="0 0 120 120">
|
| <circle class="text-gray-200" stroke="currentColor" stroke-width="10" fill="transparent" r="52" cx="60" cy="60"/>
|
| <circle class="progress-ring-circle text-blue-600" stroke="currentColor" stroke-width="10" fill="transparent" r="52" cx="60" cy="60" stroke-dasharray="326.73" stroke-dashoffset="81.68"/>
|
| </svg>
|
| <div class="absolute inset-0 flex flex-col items-center justify-center">
|
| <span class="text-2xl font-bold text-gray-800">75%</span>
|
| <span class="text-xs text-gray-600">to Lvl 25</span>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="text-center">
|
| <p class="text-sm text-gray-600">2,450 / 3,250 XP</p>
|
| <p class="text-xs text-gray-500 mt-1">Chat more to earn XP!</p>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="bg-white rounded-xl shadow-md p-6" data-aos="fade-up">
|
| <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
|
| <i data-feather="trophy" class="w-5 h-5 text-amber-500"></i>
|
| Achievements
|
| </h2>
|
|
|
| <div class="grid grid-cols-4 gap-3">
|
| <div class="flex flex-col items-center">
|
| <div class="achievement-badge unlocked text-white mb-1">💬</div>
|
| <span class="text-xs text-gray-600 text-center">Chatterbox</span>
|
| </div>
|
| <div class="flex flex-col items-center">
|
| <div class="achievement-badge unlocked text-white mb-1">🎯</div>
|
| <span class="text-xs text-gray-600 text-center">First Chat</span>
|
| </div>
|
| <div class="flex flex-col items-center">
|
| <div class="achievement-badge unlocked text-white mb-1">🦊</div>
|
| <span class="text-xs text-gray-600 text-center">Furry Friend</span>
|
| </div>
|
| <div class="flex flex-col items-center">
|
| <div class="achievement-badge unlocked text-white mb-1">🔥</div>
|
| <span class="text-xs text-gray-600 text-center">7 Day Streak</span>
|
| </div>
|
| <div class="flex flex-col items-center">
|
| <div class="achievement-badge unlocked text-white mb-1">⭐</div>
|
| <span class="text-xs text-gray-600 text-center">VIP</span>
|
| </div>
|
| <div class="flex flex-col items-center">
|
| <div class="achievement-badge unlocked text-white mb-1">🎨</div>
|
| <span class="text-xs text-gray-600 text-center">Creator</span>
|
| </div>
|
| <div class="flex flex-col items-center">
|
| <div class="achievement-badge locked mb-1">🔒</div>
|
| <span class="text-xs text-gray-400 text-center">Master</span>
|
| </div>
|
| <div class="flex flex-col items-center">
|
| <div class="achievement-badge locked mb-1">🔒</div>
|
| <span class="text-xs text-gray-400 text-center">Legend</span>
|
| </div>
|
| </div>
|
|
|
| <a href="#" class="block text-center text-blue-600 hover:text-blue-700 text-sm font-medium mt-4">View All Achievements</a>
|
| </div>
|
|
|
|
|
| <div class="bg-white rounded-xl shadow-md p-6" data-aos="fade-up">
|
| <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
|
| <i data-feather="bar-chart-2" class="w-5 h-5 text-green-600"></i>
|
| This Week
|
| </h2>
|
|
|
| <div class="space-y-4">
|
| <div>
|
| <div class="flex justify-between text-sm mb-1">
|
| <span class="text-gray-600">Messages</span>
|
| <span class="font-medium text-gray-800">156</span>
|
| </div>
|
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
|
| <div class="h-full bg-blue-600 rounded-full" style="width: 78%"></div>
|
| </div>
|
| </div>
|
|
|
| <div>
|
| <div class="flex justify-between text-sm mb-1">
|
| <span class="text-gray-600">New Characters</span>
|
| <span class="font-medium text-gray-800">3</span>
|
| </div>
|
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
|
| <div class="h-full bg-purple-600 rounded-full" style="width: 60%"></div>
|
| </div>
|
| </div>
|
|
|
| <div>
|
| <div class="flex justify-between text-sm mb-1">
|
| <span class="text-gray-600">Time Spent</span>
|
| <span class="font-medium text-gray-800">17.5 hrs</span>
|
| </div>
|
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
|
| <div class="h-full bg-green-600 rounded-full" style="width: 85%"></div>
|
| </div>
|
| </div>
|
|
|
| <div>
|
| <div class="flex justify-between text-sm mb-1">
|
| <span class="text-gray-600">Daily Streak</span>
|
| <span class="font-medium text-gray-800">12 days</span>
|
| </div>
|
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
|
| <div class="h-full bg-amber-500 rounded-full" style="width: 92%"></div>
|
| </div>
|
| </div>
|
| </div>
|
| </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>
|
| <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>
|
|
|
| AOS.init({
|
| duration: 800,
|
| easing: 'ease-in-out',
|
| once: true
|
| });
|
| feather.replace();
|
|
|
|
|
| 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
|
| });
|
|
|
|
|
| document.addEventListener('DOMContentLoaded', function() {
|
| animateValue('total-messages', 0, 12847, 2000);
|
| animateValue('characters-chatted', 0, 23, 1500);
|
| });
|
|
|
| function animateValue(id, start, end, duration) {
|
| const obj = document.getElementById(id);
|
| const range = end - start;
|
| const increment = end > start ? 1 : -1;
|
| const stepTime = Math.abs(Math.floor(duration / range));
|
| let current = start;
|
|
|
| const timer = setInterval(function() {
|
| current += Math.ceil(range / (duration / 16));
|
| if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
|
| current = end;
|
| clearInterval(timer);
|
| }
|
| obj.textContent = current.toLocaleString();
|
| }, 16);
|
| }
|
| </script>
|
| <script src="script.js"></script>
|
| </body>
|
| </html> |
|
|
