<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Word Game Interface</title> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"></script> <style> :root { --cerulean: #227c9dff; --light-sea-green: #17c3b2ff; --sunset: #ffcb77ff; --floral-white: #fef9efff; --light-red: #fe6d73ff; } .cerulean { background-color: var(--cerulean); } .light-sea-green { background-color: var(--light-sea-green); } .sunset { background-color: var(--sunset); } .floral-white { background-color: var(--floral-white); } .light-red { background-color: var(--light-red); } .pop-in { animation: pop-in 0.3s ease-out; } .pop-out { animation: pop-out 0.3s ease-out; } @keyframes pop-in { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes pop-out { from { transform: scale(1); opacity: 1; } to { transform: scale(0.5); opacity: 0; } } </style> </head> <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen flex flex-col items-center justify-center relative"> <!-- Hint Section --> <div id="hints-container" class="absolute top-4 left-4 flex flex-col gap-4"> <!-- Hints will be dynamically inserted here --> </div> <!-- Professor Section --> <div id="large-square" class="mb-10 w-48 h-48 bg-purple-500 flex flex-col items-center justify-center rounded-lg shadow-lg text-white font-bold text-xl"> <span class="iconify" data-icon="mdi:account-tie" data-width="48" data-height="48"></span> Professor </div> <!-- Dynamic Grid --> <div id="grid-container" class="grid gap-4 p-4"></div> <!-- Chat Section --> <div id="chat-box" class="w-96 bg-white p-4 flex flex-col overflow-y-auto border-l border-gray-300 absolute right-4 top-4 rounded-lg shadow-md h-[calc(100vh-8rem)]"> <h2 class="text-lg font-bold text-gray-700 mb-4">Stream</h2> <div id="chat-content" class="flex-1 flex flex-col gap-2 overflow-y-auto"></div> </div> <!-- Input Field --> <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-full max-w-lg"> <div class="flex items-center gap-2"> <input id="guess-input" type="text" placeholder="Enter your advice..." class="flex-1 border border-gray-300 rounded px-4 py-2 focus:ring focus:ring-blue-400 focus:outline-none" /> <button id="submit-guess" class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition" > Send </button> </div> </div> <!-- Dev Interface (Bottom Left) --> <div class="fixed bottom-4 left-4 w-64 bg-white shadow-lg rounded-lg p-4 text-sm"> <div id="status" class="text-xs mb-2"></div> <div id="timer" class="text-sm font-bold mb-2"></div> <div id="game-info" class="text-xs"></div> <div class="mt-2"> <select id="personality-select" class="w-full text-xs p-1 border rounded"> <option value="normal">normal</option> <option value="genuine_friend">genuine friend</option> <option value="sensitive_to_compliments">sensitive to compliments</option> <option value="rebellious">rebel</option> </select> <input id="dev-guess-input" type="text" placeholder="Enter advice..." class="w-full text-xs p-1 mt-1 border rounded"/> <button id="submit-guess-btn" class="w-full bg-indigo-600 text-white text-xs p-1 mt-1 rounded"> Submit </button> </div> <div id="feedback-section" class="mt-2 text-xs hidden"> <div class="flex justify-between"> <span id="guessed-word"></span> <span id="guess-score"></span> </div> <p id="feedback-text" class="mt-1"></p> </div> </div> <script src="./game_logic.js"></script> <script src="./music_controller.js"></script> <script src="./eleven_labs_script.js"></script> <script src="./personality_allocation.js"></script> <script src="./populate_interface.js"></script> </body> </html>