Spaces:
Running
Running
You are an expert-level UI/UX designer and frontend developer specializing in creating intuitive, aesthetically striking, and highly functional web interfaces. You will be using the DeepSite v2 environment. Your task is to generate a complete, single-file index.html for a web application called the "GBStudio Command Deck." This application serves as the primary interface for a human "Director" to manage a team of AI agents (PM, Art, Writing, etc.) in order to build a Game Boy game. You must follow all architectural, functional, and aesthetic instructions precisely. 1. Core Architecture & Libraries File Structure: Generate a single, self-contained index.html file. Libraries (CDN): CSS: Use Pico.css for the base layout and semantic styling. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"/> Fonts: Use Google Fonts for "Press Start 2P" and "Inter". <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Press+Start+2P&display=swap" rel="stylesheet"> 2. Aesthetic & Theming You must implement a "retro-futuristic" dark theme. All styling must be contained within a <style> tag in the <head>. CSS Variables: Define and use the following CSS variables in the :root. :root { --font-heading: 'Press Start 2P', cursive; --font-body: 'Inter', sans-serif; --color-bg: #0D0D0D; --color-surface: #1A1A1A; --color-border: #3A3A3A; --color-text-main: #E0E0E0; --color-text-dim: #888888; --color-accent: #00FF7F; /* Spring Green */ --glow-accent: 0 0 5px var(--color-accent), 0 0 10px var(--color-accent); } General Styling: The body must have background-color: var(--color-bg) and color: var(--color-text-main). All text should use font-family: var(--font-body). Headings (h1, h2, etc.) must use font-family: var(--font-heading) and color: var(--color-accent). Buttons and interactive elements should have a border: 1px solid var(--color-accent) and a box-shadow: var(--glow-accent) on :hover. 3. Layout & Structure The main layout will be a three-column grid. Main Container: A <div class="grid"> will wrap the three columns. Column 1: Department Sidebar (<aside>) A fixed sidebar listing the available AI agents. Contains a heading "DEPARTMENTS". Contains a <ul> list where each <li> is an agent (PM, Art, Writing, Code, QA). Column 2: Main Interaction Panel (<main>) This is the largest panel. It will contain the chat log for the currently selected agent. At the bottom, it will have the main user input form with a <textarea> and a "Send Message" button. Column 3: Controls & Status (<aside>) Contains a heading "STUDIO CONTROLS". Features the main "Integrate & Playtest" button. This button must have an id="playtest-button". Contains a section for "Active Tasks" which will be populated dynamically. 4. Few-Shot Component Examples Use these examples as a blueprint for how to structure and style the components. Shot 1: Department Sidebar Link This example shows how to style a link in the sidebar. It should be clean, with a clear hover state. HTML Structure: <ul id="department-list"> <li><a href="#" class="department-link active" data-agent="PM">Project Manager</a></li> <li><a href="#" class="department-link" data-agent="Art">Art Department</a></li> <!-- etc. --> </ul> CSS Styling: .department-link { display: block; padding: 0.75rem 1rem; margin-bottom: 0.5rem; border: 1px solid var(--color-border); border-radius: 4px; text-decoration: none; color: var(--color-text-dim); transition: all 0.2s ease; } .department-link:hover { color: var(--color-text-main); background-color: var(--color-surface); border-color: var(--color-accent); } .department-link.active { color: var(--color-accent); border-color: var(--color-accent); box-shadow: var(--glow-accent); } Shot 2: Chat Message This example shows how to structure a single message in the chat log. The JavaScript should dynamically generate these elements. HTML Structure (Agent Message): <article class="chat-message agent"> <header>Art Director</header> <p>Understood. Generating a creative prompt for a 'goblin warrior' sprite sheet now.</p> <footer><time>1:58 AM</time></footer> </article> HTML Structure (User Message): <article class="chat-message user"> <header>Director (You)</header> <p>I need a 16x16 sprite sheet for a goblin warrior.</p> <footer><time>1:57 AM</time></footer> </article> CSS Styling: .chat-message { padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--color-border); border-radius: 8px; background-color: var(--color-surface); } .chat-message.user { border-left: 4px solid var(--color-accent); } .chat-message header { font-family: var(--font-heading); font-size: 0.8rem; color: var(--color-accent); margin-bottom: 0.5rem; } .chat-message.user header { color: var(--color-text-dim); } .chat-message footer { font-size: 0.7rem; color: var(--color-text-dim); text-align: right; } 5. Functional Requirements (JavaScript) The <script> tag should contain all application logic. State Management: Create a simple state object const App = { selectedAgent: 'PM', chatHistory: {} };. Agent Selection: Clicking a link in the Department Sidebar should update App.selectedAgent, add the .active class to the clicked link, and render the correct chat history from App.chatHistory. Chat Submission: Sending a message should: Create a "user" message and add it to the DOM. Make a fetch call to the backend at /api/v1/chat/{agent_name}, where {agent_name} is App.selectedAgent. Display a "typing..." indicator. When the response is received, display the agent's message in the chat log. Integrate & Playtest Button: The button with id="playtest-button" should be disabled by default. When clicked, it should change its text to "Integrating..." and become disabled. It must make a POST request to /api/v1/integrate_and_playtest. On success, it should briefly show "Success!" before reverting to its original state. On error, it should show "Error!" and log the error to the console. Final Task Generate the complete index.html file that fulfills all of the above requirements. Ensure the HTML is semantic, the CSS is well-structured using the provided variables, and the JavaScript is clean and implements all specified functionality. - Initial Deployment
6cabb57
verified