for the final character profile, use AI to fill in the gaps and make it more complex
15e766f verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Character Closeness Creator</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> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen flex flex-col"> | |
| <custom-navbar></custom-navbar> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div id="app" class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-4xl font-bold text-indigo-600 mb-2">Character Closeness Creator</h1> | |
| <p class="text-gray-600">Answer Arthur Aron's 36 questions to build a deep character profile</p> | |
| </div> | |
| <div id="home-screen" class="text-center"> | |
| <div class="mb-8"> | |
| <img src="http://static.photos/people/640x360/1" alt="Character creation" class="mx-auto rounded-lg shadow-md mb-4"> | |
| <p class="text-lg text-gray-700 mb-6">This tool will guide you through 36 questions designed to create deep character connections. Your answers will help build a comprehensive character profile.</p> | |
| </div> | |
| <button id="start-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105"> | |
| Begin Character Journey | |
| </button> | |
| </div> | |
| <div id="question-screen" class="hidden"> | |
| <div class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span id="progress" class="text-sm font-medium text-indigo-600">Question 1/36</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full mb-6"> | |
| <div id="progress-bar" class="h-full bg-indigo-600 rounded-full" style="width: 2.78%"></div> | |
| </div> | |
| <h2 id="question-text" class="text-2xl font-semibold text-gray-800 mb-6"></h2> | |
| <textarea id="answer-input" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter your character's response..."></textarea> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="prev-btn" class="flex items-center text-indigo-600 hover:text-indigo-800 font-medium"> | |
| <i data-feather="chevron-left" class="mr-1"></i> Previous | |
| </button> | |
| <div class="space-x-4"> | |
| <button id="home-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-all"> | |
| <i data-feather="home" class="mr-2"></i> Home | |
| </button> | |
| <button id="reset-btn" class="bg-red-100 hover:bg-red-200 text-red-700 font-medium py-2 px-4 rounded-lg transition-all"> | |
| <i data-feather="refresh-ccw" class="mr-2"></i> Reset | |
| </button> | |
| </div> | |
| <button id="next-btn" class="flex items-center bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-all"> | |
| Next <i data-feather="chevron-right" class="ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="result-screen" class="hidden text-center"> | |
| <h2 class="text-3xl font-bold text-indigo-600 mb-6">Character Profile Complete!</h2> | |
| <img src="http://static.photos/abstract/640x360/2" alt="Character portrait" class="mx-auto rounded-full w-48 h-48 object-cover border-4 border-indigo-200 mb-6"> | |
| <div id="profile-summary" class="text-left bg-gray-50 p-6 rounded-lg mb-8"></div> | |
| <div class="space-y-4"> | |
| <button id="restart-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-full transition-all"> | |
| Create Another Character | |
| </button> | |
| <button id="download-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-full transition-all"> | |
| <i data-feather="download" class="mr-2"></i> Download Profile | |
| </button> | |
| </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> |