Create an ai chatbot selection page for logged in users that has the same header and footer from the index.html

IntroPage.html

@@ -159,12 +159,12 @@
                     <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="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">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">
+<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>

SignIn.html

@@ -21,12 +21,12 @@
                     <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="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="SignUp.html" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
+<a href="SignUp.html" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                     Sign Up
                 </a>
             </div>

SignUp.html

@@ -21,12 +21,12 @@
                     <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="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">
+<a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                     Login
                 </a>
             </div>

characters.html

@@ -0,0 +1,330 @@
+<!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 -->
+        <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="index.html" class="text-gray-600 hover:text-blue-600 transition-colors">Chat</a>
+                    <a href="characters.html" class="text-blue-600 font-medium transition-colors">Characters</a>
+                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Create</a>
+                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Marketplace</a>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <a href="#" class="text-gray-600 hover:text-blue-600">
+                        <i data-feather="user"></i>
+                    </a>
+                    <a href="#" class="text-gray-600 hover:text-blue-600">
+                        <i data-feather="settings"></i>
+                    </a>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Characters Section -->
+        <section class="py-12 px-4">
+            <div class="container mx-auto">
+                <div class="flex justify-between items-center mb-8">
+                    <h1 class="text-3xl font-bold text-gray-800">Meet Our AI Characters</h1>
+                    <div class="relative">
+                        <input type="text" placeholder="Search characters..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
+                    </div>
+                </div>
+
+                <!-- Filter Bar -->
+                <div class="bg-white rounded-lg shadow-sm p-4 mb-8">
+                    <div class="flex flex-wrap items-center gap-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Species</label>
+                            <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <option>All</option>
+                                <option>Wolf</option>
+                                <option>Fox</option>
+                                <option>Dragon</option>
+                                <option>Cat</option>
+                                <option>Other</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Gender</label>
+                            <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <option>All</option>
+                                <option>Male</option>
+                                <option>Female</option>
+                                <option>Non-binary</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Personality</label>
+                            <select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <option>All</option>
+                                <option>Friendly</option>
+                                <option>Shy</option>
+                                <option>Playful</option>
+                                <option>Serious</option>
+                                <option>Mysterious</option>
+                            </select>
+                        </div>
+                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors mt-6">
+                            Apply Filters
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Characters Grid -->
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                    <!-- Character 1 -->
+                    <div class="bg-white rounded-xl shadow-md overflow-hidden character-card">
+                        <img src="http://static.photos/animals/640x360/1" alt="Luna the Wolf" class="w-full character-image">
+                        <div class="p-6">
+                            <div class="flex justify-between items-start mb-2">
+                                <h3 class="text-xl font-bold text-gray-800">Luna the Wolf</h3>
+                                <span class="badge badge-online">
+                                    <i data-feather="circle" class="w-3 h-3 mr-1"></i>
+                                    Online
+                                </span>
+                            </div>
+                            <p class="text-gray-600 mb-4">Mystical and wise, Luna guides with ancestral knowledge.</p>
+                            <div class="mb-4">
+                                <span class="tag">Wolf</span>
+                                <span class="tag">Female</span>
+                                <span class="tag">Mysterious</span>
+                            </div>
+                            <a href="index.html?character=luna" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors block text-center">
+                                Chat Now
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Character 2 -->
+                    <div class="bg-white rounded-xl shadow-md overflow-hidden character-card">
+                        <img src="http://static.photos/animals/640x360/2" alt="Rex the Fox" class="w-full character-image">
+                        <div class="p-6">
+                            <div class="flex justify-between items-start mb-2">
+                                <h3 class="text-xl font-bold text-gray-800">Rex the Fox</h3>
+                                <span class="badge badge-online">
+                                    <i data-feather="circle" class="w-3 h-3 mr-1"></i>
+                                    Online
+                                </span>
+                            </div>
+                            <p class="text-gray-600 mb-4">Clever and playful, Rex always has a trick up his sleeve.</p>
+                            <div class="mb-4">
+                                <span class="tag">Fox</span>
+                                <span class="tag">Male</span>
+                                <span class="tag">Playful</span>
+                            </div>
+                            <a href="index.html?character=rex" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors block text-center">
+                                Chat Now
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Character 3 -->
+                    <div class="bg-white rounded-xl shadow-md overflow-hidden character-card">
+                        <img src="http://static.photos/animals/640x360/3" alt="Sancia the Dragon" class="w-full character-image">
+                        <div class="p-6">
+                            <div class="flex justify-between items-start mb-2">
+                                <h3 class="text-xl font-bold text-gray-800">Sancia the Dragon</h3>
+                                <span class="badge badge-online">
+                                    <i data-feather="circle" class="w-3 h-3 mr-1"></i>
+                                    Online
+                                </span>
+                            </div>
+                            <p class="text-gray-600 mb-4">Ancient and powerful, yet surprisingly gentle and wise.</p>
+                            <div class="mb-4">
+                                <span class="tag">Dragon</span>
+                                <span class="tag">Female</span>
+                                <span class="tag">Wise</span>
+                            </div>
+                            <a href="index.html?character=sancia" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors block text-center">
+                                Chat Now
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Character 4 -->
+                    <div class="bg-white rounded-xl shadow-md overflow-hidden character-card">
+                        <img src="http://static.photos/animals/640x360/4" alt="Leo the Lion" class="w-full character-image">
+                        <div class="p-6">
+                            <div class="flex justify-between items-start mb-2">
+                                <h3 class="text-xl font-bold text-gray-800">Leo the Lion</h3>
+                                <span class="badge badge-offline">
+                                    <i data-feather="circle" class="w-3 h-3 mr-1"></i>
+                                    Offline
+                                </span>
+                            </div>
+                            <p class="text-gray-600 mb-4">Bold and confident, a natural leader with a big heart.</p>
+                            <div class="mb-4">
+                                <span class="tag">Lion</span>
+                                <span class="tag">Male</span>
+                                <span class="tag">Confident</span>
+                            </div>
+                            <a href="index.html?character=leo" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors block text-center">
+                                Coming Soon
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Pagination -->
+                <div class="flex justify-center mt-10">
+                    <nav class="inline-flex rounded-md shadow">
+                        <a href="#" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
+                            Previous
+                        </a>
+                        <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-blue-600 font-medium">
+                            1
+                        </a>
+                        <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
+                            2
+                        </a>
+                        <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
+                            3
+                        </a>
+                        <a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-gray-500 hover:bg-gray-50">
+                            Next
+                        </a>
+                    </nav>
+                </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>
+                            <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>
+        // 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>

index.html

@@ -291,13 +291,13 @@
                     <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="#" 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>
+                    <a href="index.html" class="text-blue-600 font-medium transition-colors">Chat</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">Create</a>
+                    <a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Marketplace</a>
                     <a href="/animations" class="text-gray-600 hover:text-purple-600 transition-colors">Animations</a>
                 </div>
-                <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
+<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
                     Get Started
                 </button>
             </div>