Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>D&D Campaign Manager</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .broken-console { | |
| font-family: 'Courier New', monospace; | |
| letter-spacing: 0.1em; | |
| text-shadow: | |
| 0 0 2px #0f0, | |
| 0 0 5px #0f0, | |
| 0 0 10px #0f0; | |
| animation: glitch 0.5s infinite alternate; | |
| } | |
| @keyframes glitch { | |
| 0% { text-shadow: 0 0 2px #0f0, 0 0 5px #0f0, 0 0 10px #0f0; } | |
| 25% { text-shadow: 0 0 2px #f0f, 0 0 5px #f0f, 0 0 10px #f0f; } | |
| 50% { text-shadow: 0 0 2px #0ff, 0 0 5px #0ff, 0 0 10px #0ff; } | |
| 75% { text-shadow: 0 0 2px #ff0, 0 0 5px #ff0, 0 0 10px #ff0; } | |
| 100% { text-shadow: 0 0 2px #f00, 0 0 5px #f00, 0 0 10px #f00; } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes gentlePulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.02); } | |
| 100% { transform: scale(1); } | |
| } | |
| .tab-content { | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| * { | |
| transition: background-color 0.3s ease, color 0.3s ease; | |
| } | |
| .character-sheet:hover, .npc-card:hover, .location-card:hover { | |
| animation: gentlePulse 3s ease-in-out infinite; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .dice-roller:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .agent-card { | |
| background: linear-gradient(135deg, #6b21a8 0%, #7e22ce 100%); | |
| padding: 20px; | |
| border-radius: 15px; | |
| margin: 10px 0; | |
| color: white; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .output-box { | |
| background: #111827; | |
| border: 1px solid #4b5563; | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin: 10px 0; | |
| color: #e5e7eb; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .tab-button { | |
| transition: all 0.3s ease; | |
| } | |
| .tab-button.active { | |
| background-color: #4f46e5; | |
| color: white; | |
| } | |
| .character-sheet { | |
| background-color: #1f2937; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2); | |
| color: #e5e7eb; | |
| } | |
| .ability-score { | |
| background-color: #374151; | |
| border-radius: 0.25rem; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); | |
| color: #f3f4f6; | |
| } | |
| .dice-roller { | |
| background-color: #d4a373; | |
| color: white; | |
| transition: all 0.2s; | |
| } | |
| .dice-roller { | |
| background-color: #7c3aed; | |
| color: white; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); | |
| font-family: 'Quicksand', sans-serif; | |
| } | |
| .dice-roller:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); | |
| filter: brightness(1.05); | |
| } | |
| .npc-card { | |
| border-left: 4px solid #4f46e5; | |
| } | |
| .location-card { | |
| background-color: #f9fafb; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| .deity-card { | |
| background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); | |
| border-radius: 0.5rem; | |
| } | |
| .loot-card { | |
| background-color: #451a03; | |
| border-radius: 0.5rem; | |
| color: #fef3c7; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900" style="font-family: 'Press Start 2P', cursive;"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-4xl font-bold text-purple-400 mb-2" style="font-family: 'Press Start 2P', cursive;"> | |
| <i class="fas fa-dragon mr-2"></i> Advanced D&D Campaign Manager | |
| </h1> | |
| </header> | |
| <!-- Tabs Navigation --> | |
| <div class="flex overflow-x-auto mb-8 bg-gray-800 rounded-lg shadow-lg p-1"> | |
| <button class="tab-button px-6 py-3 text-base font-bold text-purple-300 active hover:bg-gray-700 transition-all duration-200" data-tab="character-creator" style="font-family: 'Press Start 2P', cursive;"> | |
| <i class="fas fa-user mr-2"></i> CHARACTER | |
| </button> | |
| <button class="tab-button px-6 py-3 text-base font-bold text-gray-400 hover:text-purple-300 hover:bg-gray-700 transition-all duration-200" data-tab="dungeon-master" style="font-family: 'Press Start 2P', cursive;"> | |
| <i class="fas fa-theater-masks mr-2"></i> DUNGEON MASTER | |
| </button> | |
| <button class="tab-button px-6 py-3 text-base font-bold text-gray-400 hover:text-purple-300 hover:bg-gray-700 transition-all duration-200" data-tab="npc-agent" style="font-family: 'Press Start 2P', cursive;"> | |
| <i class="fas fa-users mr-2"></i> NPC AGENT | |
| </button> | |
| <button class="tab-button px-6 py-3 text-base font-bold text-gray-400 hover:text-purple-300 hover:bg-gray-700 transition-all duration-200" data-tab="world-builder" style="font-family: 'Press Start 2P', cursive;"> | |
| <i class="fas fa-map mr-2"></i> WORLD BUILDER | |
| </button> | |
| <button class="tab-button px-6 py-3 text-base font-bold text-gray-400 hover:text-purple-300 hover:bg-gray-700 transition-all duration-200" data-tab="deity-creator" style="font-family: 'Press Start 2P', cursive;"> | |
| <i class="fas fa-star-and-crescent mr-2"></i> DEITY CREATOR | |
| </button> | |
| <button class="tab-button px-6 py-3 text-base font-bold text-gray-400 hover:text-purple-300 hover:bg-gray-700 transition-all duration-200" data-tab="loot-master" style="font-family: 'Press Start 2P', cursive;"> | |
| <i class="fas fa-gem mr-2"></i> LOOT MASTER | |
| </button> | |
| <button class="tab-button px-6 py-3 text-base font-bold text-gray-400 hover:text-purple-300 hover:bg-gray-700 transition-all duration-200" data-tab="campaign-tools" style="font-family: 'Press Start 2P', cursive;"> | |
| <i class="fas fa-tools mr-2"></i> CAMPAIGN TOOLS | |
| </button> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8"> | |
| <!-- Character Creator Tab --> | |
| <div id="character-creator" class="tab-content active"> | |
| <h2 class="text-2xl font-bold text-indigo-800 mb-2"> | |
| <i class="fas fa-user mr-2"></i> Character Creator | |
| </h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-5 gap-4"> | |
| <!-- Left Column - Character Details --> | |
| <div class="lg:col-span-3"> | |
| <div class="character-sheet p-6 mb-4"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2"> | |
| <i class="fas fa-file-alt mr-2"></i> Character Details | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Character Name</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Enter name..."> | |
| </div> | |
| <div> | |
| <button class="w-full mt-6 px-4 py-2 bg-purple-100 text-purple-800 rounded-md hover:bg-purple-200 transition"> | |
| <i class="fas fa-magic mr-2"></i> Generate Name | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Race</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| <option>Human</option> | |
| <option>Elf</option> | |
| <option>Dwarf</option> | |
| <option>Halfling</option> | |
| <option>Dragonborn</option> | |
| <option>Gnome</option> | |
| <option>Half-Elf</option> | |
| <option>Half-Orc</option> | |
| <option>Tiefling</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Class</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| <option>Fighter</option> | |
| <option>Wizard</option> | |
| <option>Rogue</option> | |
| <option>Cleric</option> | |
| <option>Barbarian</option> | |
| <option>Bard</option> | |
| <option>Druid</option> | |
| <option>Monk</option> | |
| <option>Paladin</option> | |
| <option>Ranger</option> | |
| <option>Sorcerer</option> | |
| <option>Warlock</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Gender</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| <option>Male</option> | |
| <option>Female</option> | |
| <option>Non-binary</option> | |
| <option>Transgender Male</option> | |
| <option>Transgender Female</option> | |
| <option>Genderfluid</option> | |
| <option>Agender</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Level</label> | |
| <input type="range" min="1" max="20" value="1" class="w-full"> | |
| <div class="text-center text-sm font-medium">Level 1</div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Alignment</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| <option>Lawful Good</option> | |
| <option>Neutral Good</option> | |
| <option>Chaotic Good</option> | |
| <option>Lawful Neutral</option> | |
| <option>True Neutral</option> | |
| <option>Chaotic Neutral</option> | |
| <option>Lawful Evil</option> | |
| <option>Neutral Evil</option> | |
| <option>Chaotic Evil</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Background</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| <option>Acolyte</option> | |
| <option>Criminal</option> | |
| <option>Folk Hero</option> | |
| <option>Noble</option> | |
| <option>Sage</option> | |
| <option>Soldier</option> | |
| <option>Charlatan</option> | |
| <option>Entertainer</option> | |
| <option>Guild Artisan</option> | |
| <option>Hermit</option> | |
| <option>Outlander</option> | |
| <option>Sailor</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Backstory</label> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md" rows="3" placeholder="Character background..."></textarea> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-purple-100 text-purple-800 rounded-md hover:bg-purple-200 transition mb-2"> | |
| <i class="fas fa-book mr-2"></i> Generate Backstory | |
| </button> | |
| </div> | |
| <!-- Ability Scores --> | |
| <div class="character-sheet p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-dice-d20 mr-2"></i> Ability Scores | |
| </h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="ability-score p-4 text-center"> | |
| <div class="text-lg font-bold">STR</div> | |
| <div class="text-3xl font-bold my-2">10</div> | |
| <div class="text-sm">(+0)</div> | |
| </div> | |
| <div class="ability-score p-4 text-center"> | |
| <div class="text-lg font-bold">DEX</div> | |
| <div class="text-3xl font-bold my-2">10</div> | |
| <div class="text-sm">(+0)</div> | |
| </div> | |
| <div class="ability-score p-4 text-center"> | |
| <div class="text-lg font-bold">CON</div> | |
| <div class="text-3xl font-bold my-2">10</div> | |
| <div class="text-sm">(+0)</div> | |
| </div> | |
| <div class="ability-score p-4 text-center"> | |
| <div class="text-lg font-bold">INT</div> | |
| <div class="text-3xl font-bold my-2">10</div> | |
| <div class="text-sm">(+0)</div> | |
| </div> | |
| <div class="ability-score p-4 text-center"> | |
| <div class="text-lg font-bold">WIS</div> | |
| <div class="text-3xl font-bold my-2">10</div> | |
| <div class="text-sm">(+0)</div> | |
| </div> | |
| <div class="ability-score p-4 text-center"> | |
| <div class="text-lg font-bold">CHA</div> | |
| <div class="text-3xl font-bold my-2">10</div> | |
| <div class="text-sm">(+0)</div> | |
| </div> | |
| </div> | |
| <button class="dice-roller w-full px-4 py-3 rounded-md font-bold"> | |
| <i class="fas fa-dice mr-2"></i> Roll Ability Scores | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Right Column - Character Summary and Portrait --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Portrait at the top --> | |
| <div class="character-sheet p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-portrait mr-2"></i> Character Portrait | |
| </h3> | |
| <div class="bg-gray-200 rounded-lg w-full h-96 flex items-center justify-center text-gray-400"> | |
| <i class="fas fa-user fa-6x"></i> | |
| </div> | |
| <button id="generate-portrait-btn" class="dice-roller w-full px-4 py-2 rounded-md font-medium mt-2 text-center" style="font-family: 'Press Start 2P', cursive;"> | |
| <i class="fas fa-magic mr-2"></i> GENERATE PORTRAIT | |
| </button> | |
| </div> | |
| <!-- Character Summary --> | |
| <div class="character-sheet p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-scroll mr-2"></i> Character Summary | |
| </h3> | |
| <div class="output-box p-4" style="min-height: 150px;"> | |
| <p class="text-gray-600 italic">Create character to see summary</p> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="font-medium text-gray-700 mb-2"> | |
| <i class="fas fa-file-export mr-2"></i> Export Character | |
| </h4> | |
| <button class="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition"> | |
| <i class="fas fa-download mr-2"></i> Export Character Sheet | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dungeon Master Tab --> | |
| <div id="dungeon-master" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-indigo-800 mb-6"> | |
| <i class="fas fa-theater-masks mr-2"></i> Dungeon Master | |
| </h2> | |
| <div class="agent-card mb-6"> | |
| <h3 class="text-xl font-semibold text-white mb-2"> | |
| <i class="fas fa-scroll mr-2"></i> Campaign Generation | |
| </h3> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Campaign Theme</label> | |
| <select class="w-full px-3 py-2 border border-indigo-300 rounded-md"> | |
| <option>High Fantasy</option> | |
| <option>Dark Fantasy</option> | |
| <option>Urban Fantasy</option> | |
| <option>Steampunk</option> | |
| <option>Horror</option> | |
| <option>Comedy</option> | |
| <option>Political Intrigue</option> | |
| <option>Exploration</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Starting Level</label> | |
| <input type="range" min="1" max="20" value="5" class="w-full"> | |
| <div class="text-center text-sm font-medium text-white">Level 5</div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Number of Players</label> | |
| <input type="range" min="1" max="8" value="4" class="w-full"> | |
| <div class="text-center text-sm font-medium text-white">4 Players</div> | |
| </div> | |
| <button class="dice-roller w-full px-4 py-3 rounded-md font-bold"> | |
| <i class="fas fa-dice-d20 mr-2"></i> Generate Campaign Concept | |
| </button> | |
| </div> | |
| <div> | |
| <div class="bg-gray-200 rounded-lg w-full h-64 flex items-center justify-center text-gray-400 mb-2"> | |
| <i class="fas fa-image fa-5x"></i> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-indigo-200 text-indigo-800 rounded-md hover:bg-indigo-300 transition"> | |
| <i class="fas fa-paint-brush mr-2"></i> Generate Campaign Art | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="output-box mb-6" style="min-height: 200px;"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Campaign Concept</label> | |
| <div class="p-4 bg-gray-100 rounded"> | |
| <p class="text-gray-600 italic">Generate a campaign to see the results</p> | |
| </div> | |
| </div> | |
| <div class="agent-card"> | |
| <h3 class="text-xl font-semibold text-white mb-2"> | |
| <i class="fas fa-calendar-day mr-2"></i> Session Planning | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-1">Session Number</label> | |
| <input type="number" min="1" value="1" class="w-full px-3 py-2 border border-indigo-300 rounded-md"> | |
| </div> | |
| <div class="md:col-span-3 flex items-end"> | |
| <button class="w-full px-4 py-2 bg-white text-indigo-800 rounded-md hover:bg-gray-100 transition"> | |
| <i class="fas fa-scroll mr-2"></i> Generate Session Content | |
| </button> | |
| </div> | |
| </div> | |
| <div class="output-box bg-white bg-opacity-20"> | |
| <label class="block text-sm font-medium text-white mb-1">Session Content</label> | |
| <div class="p-4 rounded"> | |
| <p class="text-white italic">Generate session content to see the results</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- NPC Agent Tab --> | |
| <div id="npc-agent" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-indigo-800 mb-6"> | |
| <i class="fas fa-users mr-2"></i> NPC Agent | |
| </h2> | |
| <div class="agent-card mb-6"> | |
| <h3 class="text-xl font-semibold text-white mb-2"> | |
| <i class="fas fa-user-plus mr-2"></i> NPC Creator | |
| </h3> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium text-white mb-2">Create New NPC</h4> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Campaign/Scene Context</label> | |
| <textarea class="w-full px-3 py-2 border border-indigo-300 rounded-md" rows="2" placeholder="Describe the setting or situation..."></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-1">NPC Role</label> | |
| <select class="w-full px-3 py-2 border border-indigo-300 rounded-md"> | |
| <option>Ally</option> | |
| <option>Neutral</option> | |
| <option>Antagonist</option> | |
| <option>Quest Giver</option> | |
| <option>Merchant</option> | |
| <option>Authority Figure</option> | |
| <option>Mysterious Stranger</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-1">Importance Level</label> | |
| <select class="w-full px-3 py-2 border border-indigo-300 rounded-md"> | |
| <option>Minor</option> | |
| <option>Moderate</option> | |
| <option>Major</option> | |
| <option>Recurring</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Gender (Optional)</label> | |
| <select class="w-full px-3 py-2 border border-indigo-300 rounded-md"> | |
| <option value="">Random</option> | |
| <option>Male</option> | |
| <option>Female</option> | |
| <option>Non-binary</option> | |
| <option>Transgender Male</option> | |
| <option>Transgender Female</option> | |
| <option>Genderfluid</option> | |
| <option>Agender</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <button class="dice-roller w-full px-4 py-3 rounded-md font-bold mb-2"> | |
| <i class="fas fa-user-plus mr-2"></i> Generate NPC | |
| </button> | |
| <button class="w-full px-4 py-2 bg-indigo-200 text-indigo-800 rounded-md hover:bg-indigo-300 transition"> | |
| <i class="fas fa-portrait mr-2"></i> Generate NPC Portrait | |
| </button> | |
| </div> | |
| <div> | |
| <div class="bg-gray-200 rounded-lg w-full h-64 flex items-center justify-center text-gray-400 mb-2"> | |
| <i class="fas fa-user fa-5x"></i> | |
| </div> | |
| <div class="output-box bg-white bg-opacity-20"> | |
| <label class="block text-sm font-medium text-white mb-1">Generated NPC</label> | |
| <div class="p-4 rounded"> | |
| <p class="text-white italic">Generate an NPC to see the results</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="agent-card"> | |
| <h3 class="text-xl font-semibold text-white mb-2"> | |
| <i class="fas fa-comments mr-2"></i> NPC Roleplay | |
| </h3> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4"> | |
| <div class="lg:col-span-2"> | |
| <label class="block text-sm font-medium text-white mb-1">Player Action/Dialogue</label> | |
| <textarea class="w-full px-3 py-2 border border-indigo-300 rounded-md" rows="2" placeholder="What does the player say or do?"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-1">Scene Context</label> | |
| <textarea class="w-full px-3 py-2 border border-indigo-300 rounded-md" rows="2" placeholder="Describe the current situation..."></textarea> | |
| </div> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-white text-indigo-800 rounded-md hover:bg-gray-100 transition mb-4"> | |
| <i class="fas fa-comment-dots mr-2"></i> NPC Response | |
| </button> | |
| <div class="output-box bg-white bg-opacity-20"> | |
| <label class="block text-sm font-medium text-white mb-1">NPC Response</label> | |
| <div class="p-4 rounded"> | |
| <p class="text-white italic">Generate an NPC response to see the results</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- World Builder Tab --> | |
| <div id="world-builder" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-indigo-800 mb-6"> | |
| <i class="fas fa-map mr-2"></i> World Builder | |
| </h2> | |
| <div class="agent-card"> | |
| <h3 class="text-xl font-semibold text-white mb-2"> | |
| <i class="fas fa-archway mr-2"></i> Location & World Generator | |
| </h3> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Location Type</label> | |
| <select class="w-full px-3 py-2 border border-indigo-300 rounded-md"> | |
| <option>Tavern</option> | |
| <option>Dungeon</option> | |
| <option>City</option> | |
| <option>Forest</option> | |
| <option>Castle</option> | |
| <option>Temple</option> | |
| <option>Shop</option> | |
| <option>Wilderness</option> | |
| <option>Mansion</option> | |
| <option>Cave System</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Theme</label> | |
| <select class="w-full px-3 py-2 border border-indigo-300 rounded-md"> | |
| <option>Standard Fantasy</option> | |
| <option>Dark/Gothic</option> | |
| <option>Mystical</option> | |
| <option>Abandoned/Ruined</option> | |
| <option>Luxurious</option> | |
| <option>Dangerous</option> | |
| <option>Peaceful</option> | |
| <option>Mysterious</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Purpose in Campaign</label> | |
| <textarea class="w-full px-3 py-2 border border-indigo-300 rounded-md" rows="2" placeholder="How will this location be used?"></textarea> | |
| </div> | |
| <button class="dice-roller w-full px-4 py-3 rounded-md font-bold mb-2"> | |
| <i class="fas fa-map-marked-alt mr-2"></i> Generate Location | |
| </button> | |
| <button class="w-full px-4 py-2 bg-indigo-200 text-indigo-800 rounded-md hover:bg-indigo-300 transition"> | |
| <i class="fas fa-mountain mr-2"></i> Generate Location Art | |
| </button> | |
| </div> | |
| <div> | |
| <div class="bg-gray-200 rounded-lg w-full h-64 flex items-center justify-center text-gray-400 mb-2"> | |
| <i class="fas fa-landmark fa-5x"></i> | |
| </div> | |
| <div class="output-box bg-white bg-opacity-20"> | |
| <label class="block text-sm font-medium text-white mb-1">Location Details</label> | |
| <div class="p-4 rounded"> | |
| <p class="text-white italic">Generate a location to see the results</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Deity Creator Tab --> | |
| <div id="deity-creator" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-indigo-800 mb-6"> | |
| <i class="fas fa-star-and-crescent mr-2"></i> Deity Creator | |
| </h2> | |
| <div class="agent-card mb-6"> | |
| <h3 class="text-xl font-semibold text-white mb-2"> | |
| <i class="fas fa-star mr-2"></i> Divine Pantheon Generator | |
| </h3> | |
| <div class="flex overflow-x-auto mb-4"> | |
| <button class="deity-tab-button px-4 py-2 font-medium text-white bg-indigo-700 rounded-t-lg mr-2" data-deity-tab="single-deity"> | |
| <i class="fas fa-star mr-2"></i> Single Deity | |
| </button> | |
| <button class="deity-tab-button px-4 py-2 font-medium text-white bg-indigo-600 rounded-t-lg hover:bg-indigo-700" data-deity-tab="full-pantheon"> | |
| <i class="fas fa-temple mr-2"></i> Full Pantheon | |
| </button> | |
| </div> | |
| <!-- Single Deity Content --> | |
| <div id="single-deity" class="deity-tab-content active"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Primary Domain</label> | |
| <select class="w-full px-3 py-2 border border-indigo-300 rounded-md"> | |
| <option>War</option> | |
| <option>Death</option> | |
| <option>Life</option> | |
| <option>Knowledge</option> | |
| <option>Nature</option> | |
| <option>Tempest</option> | |
| <option>Trickery</option> | |
| <option>Light</option> | |
| <option>Forge</option> | |
| <option>Grave</option> | |
| <option>Order</option> | |
| <option>Peace</option> | |
| <option>Twilight</option> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-1">Alignment</label> | |
| <select class="w-full px-3 py-2 border border-indigo-300 rounded-md"> | |
| <option>Lawful Good</option> | |
| <option>Neutral Good</option> | |
| <option>Chaotic Good</option> | |
| <option>Lawful Neutral</option> | |
| <option>True Neutral</option> | |
| <option>Chaotic Neutral</option> | |
| <option>Lawful Evil</option> | |
| <option>Neutral Evil</option> | |
| <option>Chaotic Evil</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-white mb-1">Gender</label> | |
| <select class="w-full px-3 py-2 border border-indigo-300 rounded-md"> | |
| <option>Male</option> | |
| <option>Female</option> | |
| <option>Non-binary</option> | |
| <option>Genderfluid</option> | |
| <option>Agender</option> | |
| <option>Beyond Gender</option> | |
| <option>Dual-Gendered</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Pantheon Theme</label> | |
| <input type="text" class="w-full px-3 py-2 border border-indigo-300 rounded-md" placeholder="Greek, Norse, Egyptian, Original, etc."> | |
| </div> | |
| <button class="dice-roller w-full px-4 py-3 rounded-md font-bold mb-2"> | |
| <i class="fas fa-magic mr-2"></i> Generate Deity | |
| </button> | |
| <button class="w-full px-4 py-2 bg-indigo-200 text-indigo-800 rounded-md hover:bg-indigo-300 transition"> | |
| <i class="fas fa-portrait mr-2"></i> Generate Deity Art | |
| </button> | |
| </div> | |
| <div> | |
| <div class="bg-gray-200 rounded-lg w-full h-64 flex items-center justify-center text-gray-400 mb-2"> | |
| <i class="fas fa-star fa-5x"></i> | |
| </div> | |
| <div class="output-box bg-white bg-opacity-20"> | |
| <label class="block text-sm font-medium text-white mb-1">Deity Details</label> | |
| <div class="p-4 rounded"> | |
| <p class="text-white italic">Generate a deity to see the results</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Full Pantheon Content --> | |
| <div id="full-pantheon" class="deity-tab-content"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Pantheon Style</label> | |
| <select class="w-full px-3 py-2 border border-indigo-300 rounded-md"> | |
| <option>Greek-inspired</option> | |
| <option>Norse-inspired</option> | |
| <option>Egyptian-inspired</option> | |
| <option>Celtic-inspired</option> | |
| <option>Hindu-inspired</option> | |
| <option>Mesopotamian-inspired</option> | |
| <option>Original Fantasy</option> | |
| <option>Dark Pantheon</option> | |
| <option>Nature Pantheon</option> | |
| <option>Elemental Pantheon</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Pantheon Size</label> | |
| <select class="w-full px-3 py-2 border border-indigo-300 rounded-md"> | |
| <option>Small (5-8 deities)</option> | |
| <option>Medium (9-12 deities)</option> | |
| <option>Large (13-16 deities)</option> | |
| <option>Epic (17+ deities)</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-white mb-1">Cultural Influence</label> | |
| <textarea class="w-full px-3 py-2 border border-indigo-300 rounded-md" rows="2" placeholder="What mortal culture do they influence?"></textarea> | |
| </div> | |
| <button class="dice-roller w-full px-4 py-3 rounded-md font-bold"> | |
| <i class="fas fa-temple mr-2"></i> Generate Pantheon | |
| </button> | |
| </div> | |
| <div> | |
| <div class="bg-gray-200 rounded-lg w-full h-64 flex items-center justify-center text-gray-400 mb-2"> | |
| <i class="fas fa-temple fa-5x"></i> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-indigo-200 text-indigo-800 rounded-md hover:bg-indigo-300 transition mb-4"> | |
| <i class="fas fa-image mr-2"></i> Generate Pantheon Art | |
| </button> | |
| <div class="output-box bg-white bg-opacity-20"> | |
| <label class="block text-sm font-medium text-white mb-1">Pantheon Details</label> | |
| <div class="p-4 rounded"> | |
| <p class="text-white italic">Generate a pantheon to see the results</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loot Master Tab --> | |
| <div id="loot-master" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-indigo-800 mb-6"> | |
| <i class="fas fa-gem mr-2"></i> Loot Master | |
| </h2> | |
| <div class="agent-card"> | |
| <h3 class="text-xl font-semibold text-white mb-2"> | |
| <i class="fas fa-treasure-chest mr-2"></i> Treasure & Magic Item Generator | |
| </h3> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <div class="loot-card p-4"> | |
| <h4 class="font-bold text-amber-800 mb-3"> | |
| <i class="fas fa-coins mr-2"></i> Loot Table Generator | |
| </h4> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-amber-800 mb-1">Party Level</label> | |
| <input type="range" min="1" max="20" value="5" class="w-full"> | |
| <div class="text-center text-sm font-medium text-amber-800">Level 5</div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-amber-800 mb-1">Encounter Type</label> | |
| <select class="w-full px-3 py-2 border border-amber-300 rounded-md"> | |
| <option>Boss Fight</option> | |
| <option>Mini-boss</option> | |
| <option>Standard Combat</option> | |
| <option>Exploration Reward</option> | |
| <option>Quest Completion</option> | |
| <option>Treasure Hoard</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-amber-800 mb-1">Treasure Quality</label> | |
| <select class="w-full px-3 py-2 border border-amber-300 rounded-md"> | |
| <option>Poor</option> | |
| <option>Standard</option> | |
| <option>Rich</option> | |
| <option>Legendary</option> | |
| </select> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 transition"> | |
| <i class="fas fa-dice mr-2"></i> Generate Loot Table | |
| </button> | |
| </div> | |
| <div class="loot-card p-4"> | |
| <h4 class="font-bold text-amber-800 mb-3"> | |
| <i class="fas fa-magic mr-2"></i> Custom Magic Item | |
| </h4> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-amber-800 mb-1">Item Concept</label> | |
| <input type="text" class="w-full px-3 py-2 border border-amber-300 rounded-md" placeholder="What kind of item? (sword, ring, staff, etc.)"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-amber-800 mb-1">Power Level</label> | |
| <select class="w-full px-3 py-2 border border-amber-300 rounded-md"> | |
| <option>Common</option> | |
| <option>Uncommon</option> | |
| <option>Rare</option> | |
| <option>Very Rare</option> | |
| <option>Legendary</option> | |
| <option>Artifact</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-amber-800 mb-1">Campaign Theme</label> | |
| <textarea class="w-full px-3 py-2 border border-amber-300 rounded-md" rows="2" placeholder="How should it fit your campaign?"></textarea> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 transition"> | |
| <i class="fas fa-wand-magic-sparkles mr-2"></i> Create Magic Item | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <div class="output-box"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Loot Table</label> | |
| <div class="p-4 bg-gray-100 rounded"> | |
| <p class="text-gray-600 italic">Generate loot to see the results</p> | |
| </div> | |
| </div> | |
| <div class="output-box"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Magic Item Details</label> | |
| <div class="p-4 bg-gray-100 rounded"> | |
| <p class="text-gray-600 italic">Create an item to see the results</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-gray-200 rounded-lg w-full h-48 flex items-center justify-center text-gray-400 mb-2 mx-auto max-w-md"> | |
| <i class="fas fa-gem fa-5x"></i> | |
| </div> | |
| <button class="w-full max-w-md px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 transition mx-auto"> | |
| <i class="fas fa-image mr-2"></i> Generate Item Art | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Campaign Tools Tab --> | |
| <div id="campaign-tools" class="tab-content"> | |
| <h2 class="text-2xl font-bold text-indigo-800 mb-6"> | |
| <i class="fas fa-tools mr-2"></i> Campaign Tools | |
| </h2> | |
| <div class="flex overflow-x-auto mb-4"> | |
| <button class="tools-tab-button px-4 py-2 font-medium text-white bg-indigo-700 rounded-t-lg mr-2" data-tools-tab="initiative-tracker"> | |
| <i class="fas fa-swords mr-2"></i> Initiative Tracker | |
| </button> | |
| <button class="tools-tab-button px-4 py-2 font-medium text-white bg-indigo-600 rounded-t-lg hover:bg-indigo-700 mr-2" data-tools-tab="session-notes"> | |
| <i class="fas fa-book mr-2"></i> Session Notes | |
| </button> | |
| <button class="tools-tab-button px-4 py-2 font-medium text-white bg-indigo-600 rounded-t-lg hover:bg-indigo-700" data-tools-tab="random-generators"> | |
| <i class="fas fa-dice mr-2"></i> Random Generators | |
| </button> | |
| </div> | |
| <!-- Initiative Tracker Content --> | |
| <div id="initiative-tracker" class="tools-tab-content active"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-swords mr-2"></i> Combat Management | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Character Name</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Add to initiative..."> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Initiative Roll</label> | |
| <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md" value="10"> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition"> | |
| <i class="fas fa-plus mr-2"></i> Add to Initiative | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto mb-4"> | |
| <table class="min-w-full bg-white border border-gray-200"> | |
| <thead> | |
| <tr class="bg-gray-100"> | |
| <th class="py-2 px-4 border-b border-gray-200 text-left text-sm font-semibold text-gray-700">Name</th> | |
| <th class="py-2 px-4 border-b border-gray-200 text-left text-sm font-semibold text-gray-700">Initiative</th> | |
| <th class="py-2 px-4 border-b border-gray-200 text-left text-sm font-semibold text-gray-700">HP</th> | |
| <th class="py-2 px-4 border-b border-gray-200 text-left text-sm font-semibold text-gray-700">AC</th> | |
| <th class="py-2 px-4 border-b border-gray-200 text-left text-sm font-semibold text-gray-700">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td colspan="5" class="py-4 px-4 border-b border-gray-200 text-center text-gray-500">No combatants added yet</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition"> | |
| <i class="fas fa-step-forward mr-2"></i> Next Turn | |
| </button> | |
| <button class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition"> | |
| <i class="fas fa-redo mr-2"></i> Reset Combat | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Session Notes Content --> | |
| <div id="session-notes" class="tools-tab-content"> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-book mr-2"></i> Session Management | |
| </h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Session Date</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" value="Session 1"> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Key Events</label> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md" rows="4" placeholder="What happened this session?"></textarea> | |
| <label class="block text-sm font-medium text-gray-700 mb-1 mt-4">NPC Interactions</label> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md" rows="3" placeholder="Who did they meet?"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Notable Player Actions</label> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md" rows="4" placeholder="What did the players do?"></textarea> | |
| <label class="block text-sm font-medium text-gray-700 mb-1 mt-4">Next Session Prep</label> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md" rows="3" placeholder="What to prepare for next time?"></textarea> | |
| </div> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition"> | |
| <i class="fas fa-save mr-2"></i> Save Session Notes | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Random Generators Content --> | |
| <div id="random-generators" class="tools-tab-content"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4"> | |
| <i class="fas fa-dice-d20 mr-2"></i> Quick Generators | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <h4 class="font-bold text-gray-700 mb-3"> | |
| <i class="fas fa-signature mr-2"></i> Name Generators | |
| </h4> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Name Type</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| <option>Human Male</option> | |
| <option>Human Female</option> | |
| <option>Elven</option> | |
| <option>Dwarven</option> | |
| <option>Orcish</option> | |
| <option>Fantasy Place</option> | |
| <option>Tavern</option> | |
| <option>Shop</option> | |
| </select> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition mb-2"> | |
| <i class="fas fa-dice mr-2"></i> Generate Name | |
| </button> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md" placeholder="Generated name will appear here" readonly> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-700 mb-3"> | |
| <i class="fas fa-swords mr-2"></i> Quick Encounters | |
| </h4> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Party Level</label> | |
| <input type="range" min="1" max="20" value="5" class="w-full"> | |
| <div class="text-center text-sm font-medium text-gray-700">Level 5</div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Difficulty</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| <option>Easy</option> | |
| <option>Medium</option> | |
| <option>Hard</option> | |
| <option>Deadly</option> | |
| </select> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition mb-2"> | |
| <i class="fas fa-dice-d20 mr-2"></i> Generate Encounter | |
| </button> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md" rows="3" placeholder="Generated encounter will appear here" readonly></textarea> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-bold text-gray-700 mb-3"> | |
| <i class="fas fa-fishing-rod mr-2"></i> Plot Hooks | |
| </h4> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Theme</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| <option>Mystery</option> | |
| <option>Adventure</option> | |
| <option>Political</option> | |
| <option>Personal</option> | |
| <option>Rescue</option> | |
| <option>Exploration</option> | |
| </select> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition mb-2"> | |
| <i class="fas fa-dice mr-2"></i> Generate Plot Hook | |
| </button> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md" rows="2" placeholder="Generated plot hook will appear here" readonly></textarea> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-700 mb-3"> | |
| <i class="fas fa-cloud-sun-rain mr-2"></i> Weather & Atmosphere | |
| </h4> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Climate</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| <option>Temperate</option> | |
| <option>Tropical</option> | |
| <option>Arctic</option> | |
| <option>Desert</option> | |
| <option>Mountainous</option> | |
| </select> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition mb-2"> | |
| <i class="fas fa-dice mr-2"></i> Generate Weather | |
| </button> | |
| <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md" rows="2" placeholder="Generated weather will appear here" readonly></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab switching functionality | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons and contents | |
| document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); | |
| document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); | |
| // Add active class to clicked button | |
| button.classList.add('active'); | |
| // Show corresponding content | |
| const tabId = button.getAttribute('data-tab'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Deity tab switching | |
| document.querySelectorAll('.deity-tab-button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons and contents | |
| document.querySelectorAll('.deity-tab-button').forEach(btn => { | |
| btn.classList.remove('bg-indigo-700'); | |
| btn.classList.add('bg-indigo-600'); | |
| }); | |
| document.querySelectorAll('.deity-tab-content').forEach(content => content.classList.remove('active')); | |
| // Add active class to clicked button | |
| button.classList.remove('bg-indigo-600'); | |
| button.classList.add('bg-indigo-700'); | |
| // Show corresponding content | |
| const tabId = button.getAttribute('data-deity-tab'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Tools tab switching | |
| document.querySelectorAll('.tools-tab-button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons and contents | |
| document.querySelectorAll('.tools-tab-button').forEach(btn => { | |
| btn.classList.remove('bg-indigo-700'); | |
| btn.classList.add('bg-indigo-600'); | |
| }); | |
| document.querySelectorAll('.tools-tab-content').forEach(content => content.classList.remove('active')); | |
| // Add active class to clicked button | |
| button.classList.remove('bg-indigo-600'); | |
| button.classList.add('bg-indigo-700'); | |
| // Show corresponding content | |
| const tabId = button.getAttribute('data-tools-tab'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // Update level display when slider changes | |
| document.querySelectorAll('input[type="range"]').forEach(slider => { | |
| const display = slider.nextElementSibling; | |
| if (display && display.tagName === 'DIV') { | |
| slider.addEventListener('input', () => { | |
| display.textContent = `Level ${slider.value}`; | |
| }); | |
| } | |
| }); | |
| // Simple dice roller for ability scores | |
| document.querySelector('.dice-roller').addEventListener('click', function() { | |
| const abilities = ['STR', 'DEX', 'CON', 'INT', 'WIS', 'CHA']; | |
| const abilityElements = document.querySelectorAll('.ability-score'); | |
| abilityElements.forEach((element, index) => { | |
| // Roll 4d6 and drop lowest | |
| const rolls = [ | |
| Math.floor(Math.random() * 6) + 1, | |
| Math.floor(Math.random() * 6) + 1, | |
| Math.floor(Math.random() * 6) + 1, | |
| Math.floor(Math.random() * 6) + 1 | |
| ]; | |
| rolls.sort((a, b) => b - a); // Sort descending | |
| const total = rolls[0] + rolls[1] + rolls[2]; // Take top 3 | |
| // Update the display | |
| element.querySelector('.text-3xl').textContent = total; | |
| // Calculate modifier (score - 10 / 2, rounded down) | |
| const modifier = Math.floor((total - 10) / 2); | |
| element.querySelector('.text-sm').textContent = `(${modifier >= 0 ? '+' : ''}${modifier})`; | |
| }); | |
| // Show a nice animation | |
| this.classList.add('animate-pulse'); | |
| setTimeout(() => { | |
| this.classList.remove('animate-pulse'); | |
| }, 500); | |
| }); | |
| // Generate portrait | |
| document.getElementById('generate-portrait-btn').addEventListener('click', function() { | |
| console.log("Generating character portrait..."); | |
| // Add your portrait generation logic here | |
| this.classList.add('animate-pulse'); | |
| setTimeout(() => { | |
| this.classList.remove('animate-pulse'); | |
| console.log("Portrait generated successfully!"); | |
| }, 1000); | |
| }); | |
| // Generate random name | |
| document.querySelector('.gen_name_btn').addEventListener('click', function() { | |
| const nameTypes = { | |
| "Human Male": ["Garrett", "Marcus", "Thomas", "William", "James"], | |
| "Human Female": ["Elena", "Sarah", "Miranda", "Catherine", "Rose"], | |
| "Elven": ["Aelar", "Berrian", "Drannor", "Enna", "Galinndan"], | |
| "Dwarven": ["Adrik", "Baern", "Darrak", "Delg", "Eberk"], | |
| "Orcish": ["Grul", "Thark", "Dench", "Feng", "Gell"], | |
| "Fantasy Place": ["Ravenshollow", "Goldbrook", "Thornfield", "Mistral Keep"], | |
| "Tavern": ["The Prancing Pony", "Dragon's Rest", "The Silver Tankard"], | |
| "Shop": ["Magical Mysteries", "Fine Blades & More", "Potions & Remedies"] | |
| }; | |
| const selectedType = document.querySelector('.name_type').value; | |
| const names = nameTypes[selectedType] || ["Unknown"]; | |
| const randomName = names[Math.floor(Math.random() * names.length)]; | |
| document.querySelector('.random_name').value = randomName; | |
| }); | |
| // Generate random encounter | |
| document.querySelector('.gen_encounter_btn').addEventListener('click', function() { | |
| const level = document.querySelector('.encounter_level').value; | |
| const difficulty = document.querySelector('.encounter_difficulty').value; | |
| const encounters = [ | |
| `Bandit ambush (adapted for level ${level})`, | |
| `Wild animal encounter (CR ${Math.max(1, Math.floor(level/4))})`, | |
| "Mysterious traveler with a quest", | |
| `Ancient ruins with ${difficulty.toLowerCase()} traps`, | |
| "Rival adventuring party", | |
| "Magical phenomenon requiring investigation" | |
| ]; | |
| const randomEncounter = encounters[Math.floor(Math.random() * encounters.length)]; | |
| document.querySelector('.random_encounter').value = randomEncounter; | |
| }); | |
| // Generate plot hook | |
| document.querySelector('.gen_hook_btn').addEventListener('click', function() { | |
| const theme = document.querySelector('.hook_theme').value; | |
| const hooks = { | |
| "Mystery": "A beloved local figure has vanished without a trace, leaving behind only cryptic clues.", | |
| "Adventure": "Ancient maps surface pointing to a legendary treasure thought lost forever.", | |
| "Political": "A diplomatic envoy requests secret protection during dangerous negotiations.", | |
| "Personal": "A character's past catches up with them in an unexpected way.", | |
| "Rescue": "Innocent people are trapped in a dangerous situation and need immediate help.", | |
| "Exploration": "Uncharted territories beckon with promises of discovery and danger." | |
| }; | |
| const randomHook = hooks[theme] || "A mysterious stranger approaches with an urgent request."; | |
| document.querySelector('.plot_hook').value = randomHook; | |
| }); | |
| // Generate weather | |
| document.querySelector('.gen_weather_btn').addEventListener('click', function() { | |
| const climate = document.querySelector('.climate').value; | |
| const weatherOptions = { | |
| "Temperate": ["Sunny and mild", "Light rain showers", "Overcast skies", "Gentle breeze"], | |
| "Tropical": ["Hot and humid", "Sudden thunderstorm", "Sweltering heat", "Monsoon rains"], | |
| "Arctic": ["Bitter cold winds", "Heavy snowfall", "Blizzard conditions", "Icy fog"], | |
| "Desert": ["Scorching sun", "Sandstorm approaching", "Cool desert night", "Rare rainfall"], | |
| "Mountainous": ["Mountain mist", "Alpine winds", "Rocky terrain", "Sudden weather change"] | |
| }; | |
| const weathers = weatherOptions[climate] || ["Pleasant weather"]; | |
| const randomWeather = weathers[Math.floor(Math.random() * weathers.length)]; | |
| document.querySelector('.weather').value = randomWeather; | |
| }); | |
| </script> | |
| </body> | |
| </html> |