[{"data":1,"prerenderedAt":4},["ShallowReactive",2],{"prompt-122-Glitch-UI-Dystopian-Terminal":3},"**SYSTEM PROMPT — CODING AI BUILD TASK: \"GLITCH UI DYSTOPIAN TERMINAL\" LANDING PAGE**\n\n**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Produce the complete, production-ready landing page in a single response, on the first attempt. All user-facing copy must be written in English.\n\n---\n\n## 1. THEME DEFINITION & DESIGN DIRECTION\n\n**1.1 Mood & Voice**\n- Style: **Glitch UI Dystopian Terminal** — Urgent, Computational, Retro-Futuristic. Era: Dystopian Future. The page must feel like a corrupted terminal under red alert: urgent, chaotic, monitored.\n- Write all copy in a clipped system-log voice (e.g., \"SIGNAL ACQUIRED\", \"INITIALIZE UPLINK\", \"CONNECTION MONITORED\"). No lorem ipsum — author real, coherent copy for a fictional off-grid counter-surveillance product (suggested name: \"NULLSEC\"; refine naming as needed).\n\n**1.2 Color Palette → CSS Tokens (define in `:root`)**\n- `--bg-primary: #050000` (void black), `--bg-secondary: #330000` (dark red panels), `--primary: #FF0000` (alert red), `--secondary: #E0E0E0` (static white), `--text-primary: #FF5050`, `--text-secondary: #E0E0E0`, `--glitch-cyan: #00FFFF`.\n- Derived: `--text-success: #00FFFF`, `--text-error: #FF0000`, `--border-default: rgba(255,0,0,0.35)`, `--border-error: #FF0000`, `--border-success: #00FFFF`.\n- **Contrast pairing (mandatory):** `#050000`\u002F`#330000` backgrounds pair only with `#FF5050`, `#E0E0E0`, or `#00FFFF` text; `#FF0000` fills pair only with `#050000` text. Body copy uses `--text-primary` or `--text-secondary` (≥ 4.5:1); reserve `#FF0000` for display text, borders, fills, and non-text accents.\n\n**1.3 Signature Visual Effects (all CSS-only, decorative layers `aria-hidden` + `pointer-events: none`)**\n- **Glitch text:** headline elements carry a `data-text` attribute mirroring their content; `::before`\u002F`::after` copies animate via `clip-path` slices and `text-shadow: 2px 0 #FF0000, -2px 0 #00FFFF`. The real text node stays static and readable for screen readers.\n- **CRT scanlines:** full-viewport fixed overlay (`repeating-linear-gradient`), opacity ≤ 0.12, `pointer-events: none`, z-index `--z-scanlines`.\n- **Interference lines:** thin horizontal red\u002Fcyan bars drifting across sections.\n- **HUD frames:** corner brackets on cards\u002Fsections via pseudo-elements; monospace status readouts (\"SYS.STATUS: ONLINE\").\n- **Screen burn-in:** one fixed ghost layer at opacity ≤ 0.06.\n- **Flicker:** brief one-shot flickers on hover\u002Factivation only. Never exceed 3 flashes per second anywhere on the page.\n\n**1.4 Motion Language**\n- `@keyframes glitch` with `animation: glitch 1s linear infinite` applies to decorative pseudo-layers only; interactive feedback uses `var(--transition-fast)`. All motion is disabled under `prefers-reduced-motion` (see 4.2).\n\n---\n\n## 2. STRICT RULES & ARCHITECTURE\n\n**2.1 CSS-First Architecture & Zero Inline CSS**\n- All styling lives in `style.css`. **No `style=\"...\"` attributes in HTML.** Class\u002FID selectors only. HTML remains semantic and styling-agnostic — reskinning requires CSS edits only.\n\n**2.2 CSS Variables & Theme Tokens**\n- Store every token in `:root`: all colors from 1.2, plus `--radius-sm: 0`, `--radius-md: 2px`, `--radius-lg: 4px` (sharp terminal edges), `--shadow-sm: 0 0 8px rgba(255,0,0,0.2)`, `--shadow-md: 0 0 16px rgba(255,0,0,0.35)`, `--spacing-gap`, `--transition-fast: 120ms`, `--transition-normal: 250ms`, `--ease-standard`, and stacking tokens `--z-scanlines: 90`, `--z-dropdown: 100`, `--z-modal: 200`, `--z-toast: 300`. Component classes must always reference `var(--...)` — never hardcode hex values.\n\n**2.3 Mandatory Dark Mode Support**\n- Dark mode is the default and only mode: all `:root` tokens are dark values, and all background\u002Ftext pairings follow the dark-mode contrast rules. **Exception (per theme spec):** this is a dark-only theme — omit light-mode tokens, the theme toggle, and localStorage persistence; the page renders dark regardless of `prefers-color-scheme`.\n\n**2.4 Flexbox Layout & Mobile-First Alignment**\n- Build all layout structures with Flexbox (`display: flex` \u002F Tailwind flex utilities). Every flex container defaults to `align-items: center` unless explicitly excepted. Mobile-first: rows collapse to columns at breakpoints; zero horizontal scrolling; fluid `clamp()` typography.\n\n**2.5 Framework Default & Tailwind CSS Integration**\n- Use Tailwind CSS (CDN) for layout, spacing, and responsive utilities; all theme styling is custom CSS in `style.css` using BEM class names driven by the `:root` variables.\n\n**2.6 Typography & Icons (Google Fonts Mandatory)**\n- Load via Google Fonts `\u003Clink>` in `\u003Chead>`: **Share Tech** (`--font-base`, per spec) and **Share Tech Mono** (`--font-mono`, for boot logs, readouts, labels, and terminal elements). Uppercase with letter-spacing on labels.\n- Icons: **Google Material Symbols, Outlined variant only** (matches wireframe iconography). **Inline SVGs and local icon files are forbidden.** Decorative icons get `aria-hidden=\"true\"`; functional icons carry accessible names.\n\n---\n\n## 3. COMPONENT DESIGN SPECIFICATIONS\n\n**3.1 Button (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`)**\n- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px, uppercase mono label. Primary: `#FF0000` fill + `#050000` text. Ghost: transparent fill, `--text-primary` text, `--border-default` border.\n- **Hover:** brightness\u002Fshadow shift + one-shot glitch flicker; `cursor: pointer`.\n- **Focus:** visible `--glitch-cyan` ring (`outline: 2px solid`, 2px offset) — never suppress.\n- **Active:** `transform: scale(0.97)`.\n- **Loading:** `aria-busy=\"true\"`, interactions blocked, double-clicks prevented, CSS spinner (red\u002Fcyan) or pulsing Material icon; button dimensions unchanged.\n- **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.\n- **Success\u002FError:** temporary border + label shift via `--text-success`\u002F`--text-error`, always paired with an icon or text — never color alone.\n- **`.btn--danger`:** hazard-stripe accent (`repeating-linear-gradient(45deg, #FF0000, #330000)`) + `warning` icon — visually distinct from primary in this dark-only theme.\n\n**3.2 Card (`.card`)**\n- **Default:** flexible flexbox layout, `--bg-secondary` panel, 1px `--border-default`, HUD corner brackets.\n- **Hover:** `transform: translateY(-2px)` + shadow\u002Fborder shift + brief flicker.\n- **Focus-within:** border highlights when a child link\u002Fbutton receives focus.\n- **Loading (skeleton):** shimmer keyframes (static under reduced motion) with no layout jump.\n- **Empty state:** centered Material icon + guidance text fallback.\n\n**3.3 Form & Input (`.input-group`)**\n- **Structure:** flex container wrapping `\u003Clabel>`, `\u003Cinput>`, and a dedicated error `\u003Cp>` container.\n- **States:** empty, focused (cyan ring), filled, valid (cyan border + check icon), invalid (red border, `--text-error` message, error icon, `aria-live` announcement), disabled, read-only.\n- Inputs: `#050000` fill, `#E0E0E0` text, red caret, mono font.\n\n**3.4 Modal \u002F Popup (`.modal`)**\n- Apply to any dialog used (e.g., an optional \"SYSTEM ALERT\" confirmation for danger actions).\n- **States:** opening, open, loading, success\u002Ferror, closing — all animated via CSS transitions (backdrop fade + panel glitch-in).\n- **UX:** centered flex container (`align-items: center`), dark backdrop with scanline texture, Material icon close button, keyboard focus trapping, close via `Esc` and overlay click, correct `role=\"dialog\"`\u002F`aria-modal`\u002Flabeling.\n\n---\n\n## 4. CORE UX & MICRO-INTERACTION RULES\n\n**4.1 Responsive by Default:** fluid sizing, breakpoint collapse, no horizontal overflow.\n**4.2 Motion Safety (critical for this theme):** under `prefers-reduced-motion: reduce`, disable all glitch, scanline, flicker, shimmer, and typing animations while keeping static chromatic text-shadows; no strobe effects anywhere.\n**4.3 Accessibility (a11y):** semantic HTML5 landmarks, skip link, visible focus everywhere, full keyboard operability, ARIA on custom widgets (accordion, mobile menu), `aria-live` regions for dynamic feedback (form errors, toasts, loading states), never color-alone state communication, ≥ 4.5:1 body-text contrast.\n**4.4 Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.\n**4.5 Smooth Animations:** `transition: var(--transition-normal)` on all state changes.\n\n---\n\n## 5. LANDING PAGE SECTION SPECIFICATION\n\n**5.0 Global Header (HUD status bar):** fixed slim bar — brand mark, anchor links to all sections, one `.btn--primary` CTA, live status readout; accessible hamburger menu below 768px (`aria-expanded` panel).\n\n**5.1 Hero:** full-viewport HUD frame; boot-log line sequence; glitch headline (per 1.3) + subheadline; two CTAs (`.btn--primary` \"INITIALIZE UPLINK\", `.btn--ghost`); animated terminal readout (CSS `steps()` typing; static under reduced motion); alert badges.\n\n**5.2 Features — 3 cards:** flex-wrap row → column on mobile; each card: outlined Material Symbol icon, title, description; hover per 3.2.\n\n**5.3 How It Works — 3 steps:** numbered \"STEP_01 \u002F STEP_02 \u002F STEP_03\" terminal steps connected by an interference line (horizontal on desktop → vertical on mobile), icon + text each.\n\n**5.4 Testimonials — 3 quotes:** styled as intercepted transmissions — header row (\"TRANSMISSION_042 \u002F\u002F SECTOR-7\"), quote in `--text-secondary`, author + affiliation; card styling per 3.2.\n\n**5.5 Pricing — 3 tiers:** flex row → column; middle tier highlighted (alert border, glow, \"PRIORITY ACCESS\" badge); each tier: name, price, feature list with check\u002Ferror Material icons, `.btn` CTA (one tier may use `.btn--danger`).\n\n**5.6 FAQ — accessible accordion:** 5–6 Q&A pairs; `\u003Cdetails>\u002F\u003Csummary>` or button + `aria-expanded` + region pattern; animated open\u002Fclose, rotating chevron icon, hover + focus states, fully keyboard operable.\n\n**5.7 Final CTA:** warning banner (\"FINAL TRANSMISSION\" style) with an email-capture form per 3.3 — validate input, show inline errors in an `aria-live` region, loading state on submit, success state on completion.\n\n**5.8 Footer:** flex columns — brand + tagline, secondary link groups (Product, Company, Legal: About, Docs, Terms, Privacy, Contact), Material Symbol social icons with labels, bottom status line (\"CONNECTION MONITORED — © 2087 NULLSEC\"). All links get hover\u002Ffocus glitch-underline feedback.\n\n---\n\n## 6. DELIVERABLE & OUTPUT FORMAT\n\n- **File Structure:** separate `index.html`, `style.css`, and `script.js`. Only one `\u003Cscript src=\"script.js\" defer>` reference; no inline scripts; no inline styles.\n- **Head:** Google Fonts links (Share Tech, Share Tech Mono) + Material Symbols link.\n- **Naming Convention:** BEM only (`.card__title`, `.btn--primary`) — one consistent convention across the entire deliverable, never mixed.\n- **Copy:** all user-facing copy in English, real themed content — no lorem-ipsum-only submissions.\n- **No Unrequested Placeholders:** do not add features, sections, or placeholder content beyond this specification. Generate the final code immediately.\n",1791954981750]