| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Infinite RPG Generator</title> |
| <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> |
| .fade-in { |
| animation: fadeIn 0.5s ease-in; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| .typewriter { |
| overflow: hidden; |
| border-right: .15em solid #4f46e5; |
| white-space: nowrap; |
| margin: 0 auto; |
| letter-spacing: .15em; |
| animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; |
| } |
| @keyframes typing { |
| from { width: 0 } |
| to { width: 100% } |
| } |
| @keyframes blink-caret { |
| from, to { border-color: transparent } |
| 50% { border-color: #4f46e5; } |
| } |
| .glow { |
| text-shadow: 0 0 10px rgba(79, 70, 229, 0.8); |
| } |
| .pixel-border { |
| border: 4px solid #4f46e5; |
| box-shadow: 8px 8px 0 rgba(79, 70, 229, 0.2); |
| } |
| .scroll-container { |
| scrollbar-width: thin; |
| scrollbar-color: #4f46e5 #1e1b4b; |
| } |
| .scroll-container::-webkit-scrollbar { |
| width: 8px; |
| } |
| .scroll-container::-webkit-scrollbar-track { |
| background: #1e1b4b; |
| } |
| .scroll-container::-webkit-scrollbar-thumb { |
| background-color: #4f46e5; |
| border-radius: 4px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-indigo-100 min-h-screen"> |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> |
| <header class="text-center mb-12"> |
| <h1 class="text-5xl font-bold mb-4 glow">Infinite RPG Generator</h1> |
| <p class="text-xl text-indigo-300">A unique adventure every time you play</p> |
| </header> |
|
|
| <main id="app" class="space-y-8"> |
| |
| <div id="initial-screen" class="text-center fade-in"> |
| <div class="p-8 pixel-border bg-gray-800 rounded-lg mb-8"> |
| <h2 class="text-3xl font-bold mb-6 text-indigo-300">Welcome to Infinite RPG</h2> |
| <p class="mb-8 text-lg">Every game is a completely new adventure with unique worlds, stories, and characters. No two playthroughs will ever be the same.</p> |
| <button id="start-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg text-xl transition-all transform hover:scale-105"> |
| Begin Your Adventure |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="world-screen" class="hidden fade-in"> |
| <div class="p-6 pixel-border bg-gray-800 rounded-lg"> |
| <h2 class="text-3xl font-bold mb-6 text-center text-indigo-300">Generating Your World...</h2> |
| <div class="flex justify-center mb-8"> |
| <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-indigo-500"></div> |
| </div> |
| <div id="world-result" class="typewriter text-xl text-center mb-8"></div> |
| <div id="plot-result" class="typewriter text-xl text-center mb-8 hidden"></div> |
| <button id="continue-btn" class="hidden bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg text-xl block mx-auto transition-all transform hover:scale-105"> |
| Continue to Character Creation |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="character-screen" class="hidden fade-in"> |
| <div class="p-6 pixel-border bg-gray-800 rounded-lg"> |
| <h2 class="text-3xl font-bold mb-6 text-center text-indigo-300">Create Your Character</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
| |
| <div class="bg-gray-700 p-4 rounded-lg"> |
| <h3 class="text-xl font-semibold mb-4 text-indigo-300">Character Type</h3> |
| <div id="character-types" class="space-y-3"></div> |
| </div> |
| |
| |
| <div class="bg-gray-700 p-4 rounded-lg"> |
| <h3 class="text-xl font-semibold mb-4 text-indigo-300">Specialization</h3> |
| <div id="subtypes" class="space-y-3"> |
| <p class="text-gray-400">Select a character type first</p> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-700 p-4 rounded-lg"> |
| <h3 class="text-xl font-semibold mb-4 text-indigo-300">Your Character</h3> |
| <div id="character-preview" class="space-y-2"> |
| <p class="text-gray-400">No selections made yet</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center"> |
| <button id="begin-adventure-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg text-xl transition-all transform hover:scale-105"> |
| Begin Adventure |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="game-screen" class="hidden fade-in"> |
| <div class="grid grid-cols-1 lg |
| </html> |
