Create a complete, responsive, standalone single-file web ap...

Prompt

Create a complete, responsive, standalone single-file web application contained entirely in a single `index.html` file that replicates the full conversational AI workspace interface, layout, styling, and client-side behavior with zero external dependencies. All styling, SVG icons, client-side routing, and functional script logic must be self-contained in the single file. --- ### 1. Visual Design & Theme System 1. **Design Tokens & Theme Variables**: - Provide comprehensive CSS custom properties supporting both Light and Dark modes, defaulting to the Dark theme (`data-theme="dark"` on `<html>`). - Implement root CSS variables matching the deep modern desktop/browser UI: - `--codex-base-surface: #000000` (dark) / `#fcfcfc` (light). - `--app-color-background-surface: #000000` (dark) / `#fcfcfc` (light). - `--app-color-background-elevated-primary: #1b1b1b` (dark) / `#ffffff` (light). - `--app-color-background-elevated-secondary: #303030` (dark) / `#f3f3f3` (light). - `--app-color-background-control: #303030` (dark) / `#ffffff` (light). - `--app-color-background-editor-opaque: #212121` (dark) / `#f9f9f9` (light). - `--app-color-background-card: #212121` (dark) / `#ffffff` (light). - `--app-color-border: rgba(255, 255, 255, 0.15)` (dark) / `rgba(0, 0, 0, 0.1)` (light). - `--app-color-border-heavy: rgba(255, 255, 255, 0.2)` (dark) / `rgba(0, 0, 0, 0.15)` (light). - `--color-background-composer-primary: #2c67c5`. - `--color-text-composer-primary: #ffffff`. - `--color-background-user-message: #173e76` (dark) / `#e8f3fe` (light). - `--color-text-user-message: #f6fafe` (dark) / `#0c274a` (light). - `--app-color-text-foreground: #ededed` (dark) / `#0d0d0d` (light). - `--app-color-text-foreground-secondary: #cdcdcd` (dark) / `#5d5d5d` (light). - `--app-color-text-foreground-tertiary: #afafaf` (dark) / `#8f8f8f` (light). - `--app-color-button-secondary-hover: rgba(255, 255, 255, 0.1)` (dark) / `rgba(0, 0, 0, 0.05)` (light). - Typography sizes: `--text-xs: 12px`, `--text-sm: 14px`, `--text-base: 16px`, `--text-lg: 18px`, `--text-xl: 20px`, `--text-2xl: 24px`, `--text-heading-sm: 18px`, `--text-heading-md: 20px`, `--text-heading-lg: 24px`, `--text-heading-app: 28px`. - Include a theme toggle function that toggles between dark and light themes, dynamically updates `data-theme` on `<html>`, and stores the preference in `localStorage`. 2. **Typography & Core Styling**: - Clean sans-serif system stack: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`. - Monospace font stack for code blocks and snippets: `ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace`. - Full reset, box-sizing border-box on all elements, smooth interactive hover transitions, custom sleek scrollbars matching the theme, and mobile viewport optimization (`viewport-fit=cover`). --- ### 2. Layout & Shell Architecture The application layout consists of a responsive multi-panel architecture: 1. **Left Panel (Sidebar)**: - Dynamic resizable width (defaulting to 248px, min 200px, max 420px) with an interactive vertical drag-resizer handle on the right edge. - Supports two states: Expanded full sidebar and Collapsed icon navigation rail (width: 52px). - On screens smaller than 768px (mobile), the sidebar transforms into an off-canvas drawer overlay with an animated backdrop scrim. 2. **Top Navigation Bar (Header)**: - Left side: Mobile hamburger menu toggle button (visible on mobile, hides on desktop when sidebar is open). - Center: Current conversation title or workspace state display. - Right side: Temporary / Incognito conversation mode toggle button (dashed bubble icon) with an active badge indicator. 3. **Main Workspace / Viewport**: - Centered container constrained to responsive max-width (42rem / 672px) for chat messages and composer, expanding to full container width on smaller screens. - Houses two primary views handled via client routing: - **Home / Splash View**: Headline, contextual suggestion pills, and centered composer. - **Conversation Thread View**: Message list (user bubbles, assistant markdown cards, code blocks with copy actions) and sticky bottom composer. --- ### 3. Sidebar Components & Functionality 1. **Header Area**: - Application wordmark logo and name with a collapse toggle button (sidebar toggle icon) that collapses the sidebar into the 52px rail mode. - Search button (`Ctrl+K` / `Cmd+K` shortcut) that triggers the search modal. 2. **Top Navigation List**: - **Új csevegés (New Chat)**: Resets active view to the Home splash screen and clears current selection. - **Képek (Images)**: Navigates to an image gallery/generations library view. - **Ütemezett (Scheduled / Automations)**: Opens a scheduled prompts manager view. - **Könyvtár (Library)**: Opens saved prompts and media items view. - **Bővítmények (Skills / Extensions)**: Opens an extension and tools directory view. - **Felfedezés (Explore)**: Opens an AI assistant model and template directory view. 3. **Collapsible Section: "Projektek" (Projects)**: - Accordion toggle with title and expand/collapse chevron. - Action controls: Options ellipsis menu (`...`) and "Új projekt hozzáadása" (+) button. - Clicking (+) opens a modal or prompt to create a new project folder with name and icon. - When no projects exist, displays the muted placeholder label: "Nincsenek projektek". 4. **Collapsible Section: "Legutóbbiak" (Recents)**: - Header with section title, expand/collapse chevron, sidebar settings button, filter toggle button (with filter menu for filtering by All, Chats, Starred), and quick "Új csevegés" (+) button. - Seeded conversation history items: - `Ágazat · Ágazat · Ágazat · Ágazat · Konstrukció ellenőrzése` - `Ágazat · Ágazat · Ágazat · Konstrukció ellenőrzése` - `Ágazat · Ágazat · Konstrukció ellenőrzése` - `Ágazat · Konstrukció ellenőrzése` - `Konstrukció ellenőrzése` - `Complete code fix` - `Build Prompt Conversion` - `Build prompt készítése` - **Conversation Row Item Features**: - Hover-activated horizontal marquee text animation on overflowing titles. - Click selects conversation, loads thread history, and updates URL hash `#c/{id}`. - Pin button: pins the item to the top of the recents list with a pinned indicator icon. - Ellipsis menu button (`...`) opening a dropdown menu with options: - **Átnevezés (Rename)**: Inline editable title or prompt dialog. - **Megosztás (Share)**: Copies conversation link to clipboard with toast notification. - **Rögzítés / Rögzítés feloldása (Pin/Unpin)**. - **Törlés (Delete)**: Removes conversation from state and storage with confirmation toast. 5. **Collapsed Navigation Rail (52px Mode)**: - Renders compact icon buttons for Sidebar expand, New Chat, Search, Recents quick popup, Library, and Profile avatar with tooltips on hover. 6. **Sidebar Footer**: - User profile bar displaying circular avatar with initials ("DM"), user name "Dávid Maczkó", and plan badge "Ingyenes". - Clicking profile triggers a popover menu with: - Settings (Beállítások) modal trigger. - Appearance / Theme toggle (Dark / Light mode). - Clear All History (Előzmények törlése). - Export Data (JSON export of all conversations). --- ### 4. Main Home / Splash Page Details When no active conversation is selected: 1. **Headline**: - Prominently displays the greeting: "Hol kezdjük?" ("Where shall we begin?"). 2. **Suggestion Action Cards (Home Pills)**: - Render three interactive recommendation rows, each with an icon, title, and a dismiss (`×`) button: 1. Icon: Image square | Label: "Kép vagy matrica létrehozása" 2. Icon: Pencil | Label: "Írj vagy szerkessz" 3. Icon: Globe | Label: "Keresés a weben" - Clicking a pill pre-fills the composer input with a relevant prompt starter and focuses the input. - Clicking the dismiss button (`×`) removes the suggestion with a fade-out animation. 3. **Footer Disclaimer**: - Small centered text: "Az AI hibázhat. Ellenőrizze a fontos adatokat." --- ### 5. Multi-line Adaptive Composer Component 1. **Input Surface & Controls**: - Rounded pill/card container (border radius 28px). - Auto-resizing textarea that expands smoothly from a single line up to 220px max height before scrolling. - Keyboard interaction: Pressing `Enter` (without `Shift`) sends the message; `Shift + Enter` inserts a newline. 2. **Leading Action Controls**: - Add Context / Attachments button (+) with popup menu: - Fájlok csatolása (Attach documents / files). - Fénykép vagy videó feltöltése (Upload images or videos). - Hidden HTML `<input type="file" multiple>` triggering file attachment. - Preview attachment chips displayed above or inside the composer with thumbnail/file-icon, name, size, and remove (`×`) button. 3. **Trailing Action Controls**: - Web Search toggle button (globe icon) that toggles active web search mode indicator. - Send Button: Circular button with upward arrow icon. - Disabled and dimmed (`opacity: 0.5; pointer-events: none;`) when composer text and attachments are empty. - Solid bright blue background (`#2c67c5`) and enabled when text or files are present. --- ### 6. Conversation View & Real-Time Simulation Engine 1. **Conversation History & Rendering**: - Display chronological message flow with auto-scroll to bottom. - **User Message**: - Right-aligned or distinctive message block with `--color-background-user-message` bubble and user typography. - Displays attached files or image chips if uploaded with the message. - Edit button allowing the user to modify past prompt and resubmit. - **Assistant Message**: - Left-aligned assistant avatar icon and message card. - Formatted text supporting markdown rendering: Headings (`#`, `##`, `###`), bold (`**`), italic (`*`), bullet lists (`- `), ordered lists (`1. `), blockquotes (`>`), inline code (`` `code` ``), and fenced code blocks with language tag: ````text ```javascript const greet = "Hello World"; ``` ```` - Code blocks include a top bar with language title and a "Copy Code" button that changes to a checkmark upon clicking. - Bottom message action toolbar: - Copy full response text button. - Regenerate response button. - Thumbs up / Thumbs down feedback buttons. 2. **Interactive AI Streaming Simulation**: - When a user sends a message, immediately append the user message to the active thread. - Display a streaming response indicator (pulsing cursor or progressive chunk-by-chunk token emission) that generates structured, markdown-rich responses tailored to user input. - If Web Search toggle was active, display an intermediate "Searching the web..." chip before returning results with synthetic source citations. - Automatically generate a concise title for new conversations based on the first prompt and update the sidebar Recents list. 3. **Temporary Chat (Ideiglenes csevegés)**: - When temporary chat mode is activated in the top bar: - The top bar displays an active "Ideiglenes csevegés aktív" badge. - Conversations in temporary mode are not saved to `localStorage` and will not appear in the Recents list. --- ### 7. Modal Dialogs & Toaster System 1. **Search Modal (Keresés Dialog - `Cmd+K` / `Ctrl+K`)**: - Accessible from the sidebar search button, rail search button, or keyboard shortcut. - Modal overlay with an instant search input and autofocus. - Filters across all conversation titles, messages, and project items in real time. - Keyboard navigable (Arrow Up/Down, Enter to select, Esc to close). 2. **Settings Modal (Beállítások)**: - Accessible via the profile popover. - Tabbed or sectioned interface: - **Általános (General)**: Theme selector (Dark / Light / System), Language selector ("Magyar", "English"). - **Adatkezelés (Data Controls)**: Export conversation data (JSON file download), "Összes csevegés törlése" (Clear all conversations) with confirmation dialog. 3. **Toast Notification System**: - Fixed bottom-right toaster container implementing smooth entrance/exit animations. - Supports variants: Success, Error, Info, Warning. - Shows toasts on actions: "Link vágólapra másolva", "Kód másolva", "Csevegés törölve", "Beállítások elmentve". --- ### 8. Client-Side State Management & Data Persistence 1. **Data Model**: - Use `localStorage` to persist: - `threads`: Array of conversation objects `{ id, title, pinned, createdAt, updatedAt, messages: [{ id, role, content, timestamp, attachments }] }`. - `projects`: Array of `{ id, name, createdAt }`. - `theme`: `"dark"` or `"light"`. - `sidebarState`: `"expanded"` or `"collapsed"`. - `sidebarWidth`: numeric pixel width saved on drag resize. 2. **Default Initial State**: - Pre-populate `localStorage` with the seed conversations from the recents list so the interface is never blank on initial load. 3. **Client-side Routing**: - Listen to window `hashchange` events: - `#` or empty: Home splash view. - `#c/{id}`: Loads and renders the specific conversation thread. - `#images`: Loads the image creations view. - `#automations`: Loads the automations view. - `#library`: Loads the library view. - `#skills`: Loads the skills view. - `#explore`: Loads the explore view. - Update URL hash cleanly when starting a new chat or picking an existing thread without page reload. --- ### 9. Deliverable Requirements - Return the complete, single, fully functional `index.html` file. - Embed all CSS styles, embedded SVG iconography (sidebar icons, search, plus, pin, trash, pencil, check, chevron, send arrow, copy, options), HTML structure, and vanilla JavaScript in this single file. - Ensure all interactive features work out-of-the-box in modern web browsers: resizing, collapsing, theme toggling, message sending, streaming simulation, code copying, pin/rename/delete of conversations, search dialog, file attachment preview, and full responsive behavior.