Jarvis UI website test

Prompt

You are an expert UI/UX Engineer, Full-Stack Developer, and Systems Architect specializing in advanced, high-density productivity command centers. Your task is to generate the complete frontend code (HTML, CSS, JavaScript) for a single-page, local-first dashboard called "MARK-I: System Overview & Daily Briefing." The design must embody a disciplined, hyper-intelligent co-pilot (JARVIS archetype)—eschewing childish glowing holograms in favor of an ultra-clean, high-information-density tactical HUD built for peak focus, cognitive management, and deep work. ### I. Core Visual & UX Architecture * **Design Language:** High-contrast dark mode. Deep charcoal (#0B0C10) and obsidian (#1F2833) backgrounds, crisp slate borders, with accents restricted strictly to functional colors: electric neon cyan (#45A29E) for primary systems, muted sage green (#66FCF1) for optimal states, and warning amber/crimson for systemic bottlenecks. * **Typography:** Monospace and ultra-clean sans-serif (e.g., JetBrains Mono, Inter) to maintain a precise, calculated, laboratory feel. * **Layout Structure:** A non-scrollable, full-viewport grid layout (100vh) split into logical telemetry clusters. Every module must update dynamically or simulate real-time state calculation. ### II. Functional Module Specifications #### 1. Operator Telemetry (The Biometric Core) * **Cognitive Readiness Score:** A composite index calculated from deep sleep architecture, resting heart rate, and historical baseline variance. Displays as a prominent, unembellished data metric (e.g., "READY: 94%"). * **Neurological Energy Decay:** A clean canvas-based or CSS-based vector arc demonstrating the operator's focus decay curve based on time elapsed since waking. * **Stamina Thresholds:** Visual micro-bars tracking deep work blocks completed vs. remaining systemic capacity for the day. #### 2. The Daily Briefing Array (Contextual Triage) * **The Critical Path:** A hard-coded, zero-fluff prioritization matrix isolating the top 2 highest-leverage engineering or research initiatives for the day. No long task lists—only absolute priorities. * **Algorithmic Intelligence Feed:** A clean, filtered triage log displaying mock external market shifts, relevant research paper indexing, or codebase regressions. Items must be categorized by impact level (Low / High / Critical). * **Temporal Chronometer:** Displays local time, UTC, and a countdown timer tracking the current active focus sprint block. #### 3. Infrastructure & Project Diagnostics (System Overview) * **Asset/Codebase Integrity:** A mock grid monitoring active deployments, local LLM contexts, and server nodes. Use micro-animations (pulse vectors) indicating operational health. * **Deep Work Allocation Chart:** A minimalist data visualization (using clean SVG or lightweight Chart.js) mapping time investments across key domains: Core Development, Visual Architecture, and Ideation/Deep Thinking. * **Resource Bandwidth:** Real-time system performance simulations (CPU, Memory, and Network latency) tracking the local workspace environment. ### III. Interactivity & Dynamic Behavior * **Context-Aware Modes:** Implement a JavaScript state engine that allows toggling between three operational profiles via hidden keybindings or micro-switches: 1. *AM BRIEFING:* Highlights cognitive metrics, high-leverage goals, and macro environments. 2. *DEEP WORK:* Mutes all non-essential telemetry grids, leaving only the countdown timer and active engineering notes visible to eliminate cognitive load. 3. *PM DIAGNOSTICS:* Surfaced reviews of resource expenditures, systemic friction encountered, and optimization logs for the next dawn. * **Systemic Log Output:** A real-time running terminal feed at the bottom of the interface displaying automated background maintenance scripts (e.g., "Indexing new vector embeddings...", "Purging cognitive friction loops..."). ### IV. Technical Deliverables Provide a unified, highly optimized file containing pristine HTML5, tailwind-optimized or raw CSS layouts, and vanilla JS state management. Ensure the interface relies on no external API calls so it runs entirely sandboxed and local-first. Maximize semantic structure, include clean data arrays at the top of the JS block for easy custom variable injection, and ensure components are structured logically for future expansion.

A system prompt was added to support web rendering