|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>🧝♂️ Character Generator</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
parchment: '#f5f0e1', |
|
|
oldgold: '#d4af37', |
|
|
deepforest: '#1a472a', |
|
|
duskpurple: '#4a235a', |
|
|
steelblue: '#2c3e50', |
|
|
}, |
|
|
fontFamily: { |
|
|
fantasy: ['Cinzel', 'Georgia', 'serif'], |
|
|
handwritten: ['Dancing Script', 'cursive'] |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet"> |
|
|
</head> |
|
|
<body class="min-h-screen text-slate-200"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8 hovered-element"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 hovered-element"> |
|
|
|
|
|
<div class="lg:col-span-1"> |
|
|
<div class="parchment-bg p-6 rounded-xl relative overflow-hidden hovered-element"> |
|
|
<div class="absolute top-4 right-4 w-16 h-16 bg-oldgold rounded-full flex items-center justify-center pulse"> |
|
|
<i class="fas fa-wand-magic-sparkles text-2xl text-gray-900"></i> |
|
|
</div> |
|
|
|
|
|
<h2 class="text-2xl font-fantasy font-bold text-center mb-6 text-gray-800">Create Your Character</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="font-bold text-lg mb-5 text-gray-700 flex items-center"> |
|
|
<i class="fas fa-globe mr-2 text-deepforest"></i> World Selection |
|
|
</h3> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<button class="btn-gold py-3 px-4 rounded-lg font-bold text-center shadow-lg" onclick="shuffleWorld()"> |
|
|
<i class="fas fa-shuffle mr-2"></i> Shuffle World |
|
|
</button> |
|
|
<button class="bg-slate-700 hover:bg-slate-600 py-3 px-4 rounded-lg font-bold text-center shadow-lg transition" onclick="randomizeWorld()"> |
|
|
<i class="fas fa-dice mr-2"></i> Random |
|
|
</button> |
|
|
</div> |
|
|
<div class="world-display mt-4 bg-slate-800 rounded-lg p-4 border border-slate-700"> |
|
|
<p class="text-lg font-bold text-oldgold mb-1">Current World:</p> |
|
|
<p class="font-bold">Eldoria: Realm of Ancient Magic</p> |
|
|
<p class="text-sm mt-2">A high fantasy world with floating islands, ancient dragons, and powerful magic</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="font-bold text-lg mb-5 text-gray-700 flex items-center"> |
|
|
<i class="fas fa-user mr-2 text-duskpurple"></i> Persona Selection |
|
|
</h3> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<button class="btn-gold py-3 px-4 rounded-lg font-bold text-center shadow-lg" onclick="shufflePersona()"> |
|
|
<i class="fas fa-shuffle mr-2"></i> Shuffle Persona |
|
|
</button> |
|
|
<button class="bg-slate-700 hover:bg-slate-600 py-3 px-4 rounded-lg font-bold text-center shadow-lg transition" onclick="randomizePersona()"> |
|
|
<i class="fas fa-dice mr-2"></i> Random |
|
|
</button> |
|
|
</div> |
|
|
<div class="persona-display mt-4 bg-slate-800 rounded-lg p-4 border border-slate-700"> |
|
|
<p class="text-lg font-bold text-oldgold mb-1">Current Persona:</p> |
|
|
<p class="font-bold">Aeliana Moonshadow</p> |
|
|
<p class="text-sm mt-2">Elven Spellweaver with a mysterious past and connection to lunar magic</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<h3 class="font-bold text-lg mb-5 text-gray-700 flex items-center"> |
|
|
<i class="fas fa-sliders mr-2 text-steelblue"></i> Options |
|
|
</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="text-gray-700 font-medium">Detail Level</label> |
|
|
<select class="w-full bg-slate-800 border border-slate-700 rounded p-2 mt-1 focus:ring-2 focus:ring-oldgold focus:outline-none"> |
|
|
<option>Basic (Default)</option> |
|
|
<option>Detailed</option> |
|
|
<option>Exhaustive</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="text-gray-700 font-medium">Image Style</label> |
|
|
<select class="w-full bg-slate-800 border border-slate-700 rounded p-2 mt-1 focus:ring-2 focus:ring-oldgold focus:outline-none"> |
|
|
<option>Fantasy Art</option> |
|
|
<option>Concept Art</option> |
|
|
<option>Anime</option> |
|
|
<option>Realistic</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="include-backstory" class="mr-2 h-5 w-5 text-oldgold" checked> |
|
|
<label for="include-backstory" class="text-gray-700 font-medium">Include Backstory</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="generate-btn w-full btn-gold py-4 rounded-lg font-bold text-xl mt-4 shadow-lg transition-all hover:scale-[1.02] hovered-element"> |
|
|
<i class="fas fa-hat-wizard mr-2"></i> Generate Character |
|
|
</button> |
|
|
|
|
|
<div class="mt-6 bg-gradient-to-r from-deepforest to-duskpurple p-1 rounded-lg"> |
|
|
<div class="bg-slate-900 p-3 rounded"> |
|
|
<p class="text-center text-sm font-bold text-oldgold"> |
|
|
<i class="fas fa-lightbulb mr-2"></i> Tip: Shuffle the world then persona for rapid inspiration |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-2 hovered-element"> |
|
|
<div class="parchment-bg p-6 rounded-xl relative"> |
|
|
<h2 class="text-2xl font-fantasy font-bold text-center mb-6 text-gray-800">Character Sheet</h2> |
|
|
|
|
|
|
|
|
<div class="flex mb-6 border-b border-gray-300"> |
|
|
<button class="tab-btn active py-2 px-4 font-bold text-gray-700 rounded-t-lg border-b-4 border-oldgold">Overview</button> |
|
|
<button class="tab-btn py-2 px-4 font-bold text-gray-300 hover:text-gray-700">JSON</button> |
|
|
<button class="tab-btn py-2 px-4 font-bold text-gray-300 hover:text-gray-700">Appearance</button> |
|
|
<button class="tab-btn py-2 px-4 font-bold text-gray-300 hover:text-gray-700">Story</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content active"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="md:col-span-1 flex justify-center"> |
|
|
<div class="character-image rounded-lg overflow-hidden w-64 h-64 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<div class="loading-spinner mb-4 mx-auto"></div> |
|
|
<p class="text-sm text-oldgold">Generating image...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<div class="bg-gradient-to-r from-deepforest to-duskpurple p-1 rounded-lg mb-4"> |
|
|
<div class="bg-slate-100 p-10 rounded-lg"> |
|
|
<h3 class="text-3xl font-fantasy font-bold text-center mb-4 text-gray-800">Aeliana Moonshadow</h3> |
|
|
<div class="flex justify-center"> |
|
|
<span class="bg-oldgold text-gray-900 font-bold rounded-full px-4 py-1">Elven Spellweaver</span> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mt-6"> |
|
|
<div class="characteristic bg-slate-200 rounded-lg p-3 flex items-center"> |
|
|
<div class="bg-slate-800 w-12 h-12 rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-shield-alt text-oldgold text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Level</p> |
|
|
<p class="font-bold text-gray-800">12</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="characteristic bg-slate-200 rounded-lg p-3 flex items-center"> |
|
|
<div class="bg-slate-800 w-12 h-12 rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-heart text-oldgold text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">HP</p> |
|
|
<p class="font-bold text-gray-800">84/84</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="characteristic bg-slate-200 rounded-lg p-3 flex items-center"> |
|
|
<div class="bg-slate-800 w-12 h-12 rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-bolt text-oldgold text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Mana</p> |
|
|
<p class="font-bold text-gray-800">150/150</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="characteristic bg-slate-200 rounded-lg p-3 flex items-center"> |
|
|
<div class="bg-slate-800 w-12 h-12 rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-dragon text-oldgold text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs text-gray-500">Alignment</p> |
|
|
<p class="font-bold text-gray-800">Chaotic Good</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gradient-to-r from-steelblue to-duskpurple p-1 rounded-lg"> |
|
|
<div class="bg-slate-800 p-4 rounded-lg"> |
|
|
<h3 class="text-xl font-bold mb-4 text-center">Attributes</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<p class="flex justify-between mb-1"> |
|
|
<span class="font-bold text-oldgold">Strength</span> |
|
|
<span>12</span> |
|
|
</p> |
|
|
<div class="stat-bar" style="width: 60%"></div> |
|
|
</div> |
|
|
<div> |
|
|
<p class="flex justify-between mb-1"> |
|
|
<span class="font-bold text-oldgold">Dexterity</span> |
|
|
<span>18</span> |
|
|
</p> |
|
|
<div class="stat-bar" style="width: 90%"></div> |
|
|
</div> |
|
|
<div> |
|
|
<p class="flex justify-between mb-1"> |
|
|
<span class="font-bold text-oldgold">Constitution</span> |
|
|
<span>14</span> |
|
|
</p> |
|
|
<div class="stat-bar" style="width: 70%"></div> |
|
|
</div> |
|
|
<div> |
|
|
<p class="flex justify-between mb-1"> |
|
|
<span class="font-bold text-oldgold">Intelligence</span> |
|
|
<span>20</span> |
|
|
</p> |
|
|
<div class="stat-bar" style="width: 100%"></div> |
|
|
</div> |
|
|
<div> |
|
|
<p class="flex justify-between mb-1"> |
|
|
<span class="font-bold text-oldgold">Wisdom</span> |
|
|
<span>16</span> |
|
|
</p> |
|
|
<div class="stat-bar" style="width: 80%"></div> |
|
|
</div> |
|
|
<div> |
|
|
<p class="flex justify-between mb-1"> |
|
|
<span class="font-bold text-oldgold">Charisma</span> |
|
|
<span>17</span> |
|
|
</p> |
|
|
<div class="stat-bar" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 bg-gradient-to-r from-duskpurple to-deepforest p-1 rounded-lg"> |
|
|
<div class="bg-slate-800 p-4 rounded-lg"> |
|
|
<h3 class="text-xl font-bold mb-4 text-center">Skills & Abilities</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3"> |
|
|
<div class="bg-slate-700 p-3 rounded-lg">Arcana Mastery</div> |
|
|
<div class="bg-slate-700 p-3 rounded-lg">Lunar Channeling</div> |
|
|
<div class="bg-slate-700 p-3 rounded-lg">Elven Grace</div> |
|
|
<div class="bg-slate-700 p-3 rounded-lg">Shadow Magic</div> |
|
|
<div class="bg-slate-700 p-3 rounded-lg">Ancient Lore</div> |
|
|
<div class="bg-slate-700 p-3 rounded-lg">Nature Affinity</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content"> |
|
|
<div class="bg-slate-800 rounded-lg p-4 overflow-auto max-h-96"> |
|
|
<pre class="text-sm text-slate-200"> |
|
|
{ |
|
|
"character": { |
|
|
"name": "Aeliana Moonshadow", |
|
|
"race": "High Elf", |
|
|
"class": "Spellweaver", |
|
|
"level": 12, |
|
|
"alignment": "Chaotic Good", |
|
|
"world": "Eldoria: Realm of Ancient Magic", |
|
|
"background": "Lunar Mystic", |
|
|
"appearance": { |
|
|
"age": "Appears 120 (Elven equivalent of 25)", |
|
|
"height": "5'5\"", |
|
|
"weight": "115 lbs", |
|
|
"eyes": "Silver with blue lunar glow", |
|
|
"hair": "Long silver-white, shimmering", |
|
|
"skin": "Pale with faint blue glow", |
|
|
"distinguishing_features": "Moon-shaped birthmark on forehead" |
|
|
}, |
|
|
"attributes": { |
|
|
"strength": 12, |
|
|
"dexterity": 18, |
|
|
"constitution": 14, |
|
|
"intelligence": 20, |
|
|
"wisdom": 16, |
|
|
"charisma": 17 |
|
|
}, |
|
|
"skills": [ |
|
|
"Arcana Mastery", |
|
|
"Lunar Channeling", |
|
|
"Elven Grace", |
|
|
"Shadow Magic", |
|
|
"Ancient Lore", |
|
|
"Nature Affinity" |
|
|
], |
|
|
"equipment": [ |
|
|
"Moonstone Staff", |
|
|
"Silvery Robes of Night", |
|
|
"Amulet of Lunar Phases", |
|
|
"Boots of Silent Steps" |
|
|
], |
|
|
"personality": { |
|
|
"traits": "Mysterious, intuitive, protective of nature", |
|
|
"ideals": "Preserve ancient magic, protect lunar cycles", |
|
|
"bonds": "Bound to her ancestral moon spirit", |
|
|
"flaws": "Overly secretive, distrusts solar magic" |
|
|
} |
|
|
} |
|
|
} |
|
|
</pre> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tab-content"> |
|
|
<div class="bg-slate-800 rounded-lg p-6"> |
|
|
<h3 class="text-xl font-bold mb-4 text-center">The Story of Aeliana Moonshadow</h3> |
|
|
<div class="p-4 bg-slate-700 rounded-lg"> |
|
|
<p class="mb-4">Born under the rare triple lunar eclipse, Aeliana was marked from birth as a child of prophecy. Her silver hair and glowing eyes were signs of her deep connection to the moon spirits of Eldoria.</p> |
|
|
|
|
|
<p class="mb-4">Raised in the secluded Moonwood Grove by the ancient order of Lunar Mystics, Aeliana learned to weave the silvery light of the moon into powerful spells. As she grew, she discovered that her powers extended beyond typical lunar magic, allowing her to manipulate shadows and even glimpse into the future during full moons.</p> |
|
|
|
|
|
<p class="mb-4">Her journey began when she received a vision of the Shadow Dragon awakening from its thousand-year slumber - an event that would plunge Eldoria into eternal darkness. With her Moonstone Staff in hand and ancient prophecies guiding her path, Aeliana has ventured into the world to prevent this catastrophe.</p> |
|
|
|
|
|
<p class="mb-4">Her quest has led her to form unlikely alliances with the Sun Knights of the Solar Order, despite their philosophical differences. Together, they seek the ancient artifacts needed to restore balance between light and shadow before the next eclipse, when the Shadow Dragon will be at its strongest.</p> |
|
|
|
|
|
<p class="font-handwritten text-xl text-center text-oldgold mt-6">"The moon's light reveals what darkness hides, but true wisdom lies in understanding both."</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script>feather.replace();</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
