Spaces:
Running
Running
| <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"> | |
| <!-- Title --> | |
| <div class="flex justify-center items-start mt-4"> | |
| <img src="./lemot.webp" alt="Lemot Logo" class="h-48 w-auto"> | |
| </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-[50vh]"> | |
| <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 h-[50vh]"></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 id="dev_dbug"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="./eleven_labs_script.js"></script> | |
| <script src="./personality_allocation.js"></script> | |
| <script src="./populate_interface.js"></script> | |
| <script> | |
| const toggleBtn = document.createElement('button'); | |
| toggleBtn.innerHTML = '👁️🗨️'; | |
| toggleBtn.style.cssText = 'position: fixed; bottom: 16px; left: 16px; background: #1f2937; border: none; border-radius: 50%; padding: 8px; cursor: pointer; color: white;'; | |
| let isVisible = false; | |
| const debugEl = document.getElementById('dev_dbug'); | |
| if (debugEl) { | |
| debugEl.style.opacity = '0'; | |
| } | |
| toggleBtn.onclick = () => { | |
| if (debugEl) { | |
| isVisible = !isVisible; | |
| debugEl.style.opacity = isVisible ? '1' : '0'; | |
| toggleBtn.innerHTML = isVisible ? '👁️' : '👁️🗨️'; | |
| } | |
| }; | |
| document.body.appendChild(toggleBtn); | |
| </script> | |
| </body> | |
| </html> | |