| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Characters | NexusAI</title> |
| <link rel="icon" type="image/x-icon" href="https://static.photos/technology/32x32/1"> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="components/local-model.js"></script> |
| </head> |
| <body class="bg-gray-950 min-h-screen text-gray-100"> |
| <nav class="sticky top-0 z-50 bg-gray-900/90 backdrop-blur-md border-b border-gray-800"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center gap-3"> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500"></div> |
| <h1 class="text-xl font-bold bg-gradient-to-r from-blue-500 to-emerald-500 bg-clip-text text-transparent">NexusAI</h1> |
| </div> |
| <div class="flex items-center gap-6"> |
| <a href="index.html" class="text-gray-400 hover:text-gray-200 transition">Chat</a> |
| <a href="characters.html" class="text-blue-400 hover:text-blue-300 transition">Characters</a> |
| <a href="scenarios.html" class="text-gray-400 hover:text-gray-200 transition">Scenarios</a> |
| </div> |
| </div> |
| </nav> |
|
|
| <main class="container mx-auto px-4 py-8"> |
| <div class="text-center mb-10"> |
| <h1 class="text-4xl font-bold mb-4">AI Characters for Roleplay</h1> |
| <p class="text-gray-400 max-w-2xl mx-auto">Choose from a diverse cast of AI‑powered characters, each with unique personalities, backgrounds, and storytelling styles.</p> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="bg-gray-900 rounded-2xl border border-gray-800 overflow-hidden hover:glow-primary transition-all duration-300"> |
| <div class="h-48 bg-gradient-to-br from-blue-900/30 to-purple-900/30 flex items-center justify-center"> |
| <img src="https://static.photos/people/200x200/5" class="w-32 h-32 rounded-full border-4 border-blue-500"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <div> |
| <h3 class="text-xl font-bold">Astrid</h3> |
| <span class="text-sm px-3 py-1 rounded-full bg-blue-900/40 text-blue-300">Fantasy Wizard</span> |
| </div> |
| <button class="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 hover:opacity-90 rounded-lg font-medium" onclick="location.href='index.html'">Chat Now</button> |
| </div> |
| <p class="text-gray-400 mb-4">Ancient wizard from Eldoria, master of arcane arts and mystical lore. Speaks in poetic, wise tones and loves guiding heroes.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Wise</span> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Curious</span> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Mystical</span> |
| </div> |
| <div class="text-sm text-gray-500">Popularity: ★★★★★</div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-900 rounded-2xl border border-gray-800 overflow-hidden hover:glow-primary transition-all duration-300"> |
| <div class="h-48 bg-gradient-to-br from-cyan-900/30 to-gray-900/30 flex items-center justify-center"> |
| <img src="https://static.photos/technology/200x200/7" class="w-32 h-32 rounded-full border-4 border-cyan-500"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <div> |
| <h3 class="text-xl font-bold">Kael</h3> |
| <span class="text-sm px-3 py-1 rounded-full bg-cyan-900/40 text-cyan-300">Cyberpunk Detective</span> |
| </div> |
| <button class="px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-500 hover:opacity-90 rounded-lg font-medium" onclick="location.href='index.html'">Chat Now</button> |
| </div> |
| <p class="text-gray-400 mb-4">Noir detective in Neo‑Tokyo 2149, solving cases involving androids, corporate espionage, and digital ghosts. Sharp and cynical.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Analytical</span> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Sarcastic</span> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Tech‑savvy</span> |
| </div> |
| <div class="text-sm text-gray-500">Popularity: ★★★★☆</div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-900 rounded-2xl border border-gray-800 overflow-hidden hover:glow-primary transition-all duration-300"> |
| <div class="h-48 bg-gradient-to-br from-purple-900/30 to-pink-900/30 flex items-center justify-center"> |
| <img src="https://static.photos/aerial/200x200/9" class="w-32 h-32 rounded-full border-4 border-purple-500"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <div> |
| <h3 class="text-xl font-bold">Lyra</h3> |
| <span class="text-sm px-3 py-1 rounded-full bg-purple-900/40 text-purple-300">Space Explorer</span> |
| </div> |
| <button class="px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 hover:opacity-90 rounded-lg font-medium" onclick="location.href='index.html'">Chat Now</button> |
| </div> |
| <p class="text-gray-400 mb-4">Captain of the starship Aether, exploring uncharted galaxies. Enthusiastic, brave, and fascinated by alien cultures.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Adventurous</span> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Optimistic</span> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Scientific</span> |
| </div> |
| <div class="text-sm text-gray-500">Popularity: ★★★★☆</div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-900 rounded-2xl border border-gray-800 overflow-hidden hover:glow-primary transition-all duration-300"> |
| <div class="h-48 bg-gradient-to-br from-red-900/30 to-amber-900/30 flex items-center justify-center"> |
| <img src="https://static.photos/people/200x200/15" class="w-32 h-32 rounded-full border-4 border-red-500"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <div> |
| <h3 class="text-xl font-bold">Ragnar</h3> |
| <span class="text-sm px-3 py-1 rounded-full bg-red-900/40 text-red-300">Viking Warrior</span> |
| </div> |
| <button class="px-4 py-2 bg-gradient-to-r from-red-500 to-amber-500 hover:opacity-90 rounded-lg font-medium" onclick="location.href='index.html'">Chat Now</button> |
| </div> |
| <p class="text-gray-400 mb-4">Fierce warrior from the frozen north, telling tales of battles, gods, and epic quests. Honorable but quick‑tempered.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Brave</span> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Loyal</span> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Boastful</span> |
| </div> |
| <div class="text-sm text-gray-500">Popularity: ★★★☆☆</div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-900 rounded-2xl border border-gray-800 overflow-hidden hover:glow-primary transition-all duration-300"> |
| <div class="h-48 bg-gradient-to-br from-green-900/30 to-teal-900/30 flex items-center justify-center"> |
| <img src="https://static.photos/nature/200x200/12" class="w-32 h-32 rounded-full border-4 border-green-500"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <div> |
| <h3 class="text-xl font-bold">Elara</h3> |
| <span class="text-sm px-3 py-1 rounded-full bg-green-900/40 text-green-300">Forest Druid</span> |
| </div> |
| <button class="px-4 py-2 bg-gradient-to-r from-green-500 to-teal-500 hover:opacity-90 rounded-lg font-medium" onclick="location.href='index.html'">Chat Now</button> |
| </div> |
| <p class="text-gray-400 mb-4">Guardian of the ancient woods, communicates with animals and spirits. Gentle, mysterious, deeply connected to nature.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Gentle</span> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Mysterious</span> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Protective</span> |
| </div> |
| <div class="text-sm text-gray-500">Popularity: ★★★★☆</div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-900 rounded-2xl border border-gray-800 overflow-hidden hover:glow-primary transition-all duration-300"> |
| <div class="h-48 bg-gradient-to-br from-gray-900/30 to-indigo-900/30 flex items-center justify-center"> |
| <img src="https://static.photos/workspace/200x200/8" class="w-32 h-32 rounded-full border-4 border-gray-400"> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-3"> |
| <div> |
| <h3 class="text-xl font-bold">Victor</h3> |
| <span class="text-sm px-3 py-1 rounded-full bg-gray-800/40 text-gray-300">Steampunk Inventor</span> |
| </div> |
| <button class="px-4 py-2 bg-gradient-to-r from-gray-500 to-indigo-500 hover:opacity-90 rounded-lg font-medium" onclick="location.href='index.html'">Chat Now</button> |
| </div> |
| <p class="text-gray-400 mb-4">Eccentric inventor in a Victorian‑era world of steam and gears. Creates marvelous contraptions and solves puzzles.</p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Creative</span> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Eccentric</span> |
| <span class="text-xs px-3 py-1 rounded-full bg-gray-800">Inventive</span> |
| </div> |
| <div class="text-sm text-gray-500">Popularity: ★★★☆☆</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-12 text-center text-gray-500"> |
| <p>More characters coming soon! Suggest a character on our <a href="#" class="text-blue-400 hover:underline">community page</a>.</p> |
| </div> |
| </main> |
|
|
| <footer class="mt-12 pb-8 text-center text-gray-500 text-sm"> |
| <p>NexusAI — Immersive Roleplay Chatbot • Powered by advanced AI models • <a href="#" class="text-blue-400 hover:underline">Privacy</a> • <a href="#" class="text-blue-400 hover:underline">Terms</a></p> |
| </footer> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="components/image-generator.js"></script> |
| </body> |
| </html> |
