Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Murder.Ai Detective Interface</title> | |
| <link rel="stylesheet" href="../static/css/noir.css"> | |
| </head> | |
| <body> | |
| <!-- Loading Screen --> | |
| <div id="loading-overlay"> | |
| <div class="loader-spinner"></div> | |
| <div>INITIALIZING CASE FILE...</div> | |
| </div> | |
| <!-- AI Spectator Start Modal --> | |
| <div id="spectator-modal" class="modal-overlay"> | |
| <div class="modal-content" style="text-align: center;"> | |
| <div class="modal-header">AI DETECTIVE MODE</div> | |
| <p style="margin: 20px 0;">You are now watching an AI Agent investigate this case.</p> | |
| <p style="font-size: 0.9rem; color: #666; margin-bottom: 20px;">It will gather evidence, interview suspects, and make an accusation.</p> | |
| <button id="spectator-start-btn" class="modal-btn confirm" style="font-size: 1.2rem; width: 100%;">START INVESTIGATION</button> | |
| </div> | |
| </div> | |
| <!-- AI Log Panel --> | |
| <div id="ai-log-panel" style="display: none; position: absolute; top: 60px; bottom: 250px; left: 250px; right: 250px; background: rgba(0,0,0,0.95); padding: 20px; border: 2px solid #0f0; overflow-y: auto; font-family: 'Courier New', monospace; color: #0f0; z-index: 50;"> | |
| <div style="font-weight: bold; margin-bottom: 10px; border-bottom: 1px solid #0f0; padding-bottom: 5px;">🤖 AI DETECTIVE LOG</div> | |
| <div id="ai-log-content"></div> | |
| </div> | |
| <div id="game-container"> | |
| <!-- Header --> | |
| <div id="top-bar"> | |
| <div class="game-title">MURDER.AI</div> | |
| <div class="stats-panel"> | |
| <span>ROUND: <span id="round-display">1/3</span></span> | |
| <span>POINTS: <span id="points-display">10</span></span> | |
| </div> | |
| </div> | |
| <!-- Left: Suspect Files --> | |
| <div id="suspect-files"> | |
| <!-- Populated by JS --> | |
| </div> | |
| <!-- Center: Evidence Board --> | |
| <div id="evidence-board"> | |
| <!-- Red string SVG layer --> | |
| <svg id="string-layer"></svg> | |
| <!-- Evidence items populated by JS --> | |
| </div> | |
| <!-- Right: Tools --> | |
| <div id="tools-panel"> | |
| <div class="tool-btn" id="tool-map"> | |
| <span class="tool-icon">🗺️</span> | |
| <span>Location</span> | |
| <span class="tool-cost">2 pts</span> | |
| </div> | |
| <div class="tool-btn" id="tool-camera"> | |
| <span class="tool-icon">📹</span> | |
| <span>Footage</span> | |
| <span class="tool-cost">3 pts</span> | |
| </div> | |
| <div class="tool-btn" id="tool-phone"> | |
| <span class="tool-icon">📞</span> | |
| <span>Call Alibi</span> | |
| <span class="tool-cost">1 pt</span> | |
| </div> | |
| <div class="tool-btn" id="tool-dna"> | |
| <span class="tool-icon">🔬</span> | |
| <span>DNA Test</span> | |
| <span class="tool-cost">4 pts</span> | |
| </div> | |
| <div class="tool-btn" id="tool-accuse" style="margin-top: auto; border-color: red; color: red;"> | |
| <span class="tool-icon">⚖️</span> | |
| <span>ACCUSE</span> | |
| </div> | |
| </div> | |
| <!-- Bottom: Chat / Log --> | |
| <div id="chat-panel"> | |
| <div id="chat-log"> | |
| <div class="chat-message system">System initialized. Waiting for case data...</div> | |
| </div> | |
| <div id="chat-input-area"> | |
| <textarea id="chat-input" placeholder="Type your question here..."></textarea> | |
| <div style="display: flex; width: 100%;"> | |
| <button id="send-btn" class="send-btn" style="flex-grow: 1;">INTERROGATE</button> | |
| <button id="mic-btn" class="send-btn" style="margin-left: 5px; width: 50px;">🎤</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tool Input Modal --> | |
| <div id="tool-modal" class="modal-overlay"> | |
| <div class="modal-content"> | |
| <div class="modal-header">INVESTIGATION TOOL</div> | |
| <div id="modal-prompt-text">Enter details:</div> | |
| <input type="text" id="modal-input" class="modal-input" placeholder="..."> | |
| <div id="modal-options" class="modal-option-list" style="display:none"></div> | |
| <select id="modal-select" class="modal-input" style="display:none"></select> | |
| <div id="modal-section-2" style="display:none"> | |
| <div id="modal-prompt-text-2">Question:</div> | |
| <input type="text" id="modal-input-2" class="modal-input" placeholder="What do you want to ask?"> | |
| </div> | |
| <div class="modal-actions"> | |
| <button id="modal-cancel" class="modal-btn cancel">CANCEL</button> | |
| <button id="modal-confirm" class="modal-btn confirm">SUBMIT</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notification Toast --> | |
| <div id="notification-toast">Notification</div> | |
| <script src="../static/js/game_logic.js"></script> | |
| </body> | |
| </html> |