8-Bit Retro Terminal demo
8-Bit Retro Terminal

A nostalgic 1980s computer terminal aesthetic featuring pixel art graphics, glowing green phosphor text on dark backgrounds, scanline overlays, and arcade game styling.
Category: Retro & Pop
Era: 1980s Retro
Prompt: 9.3 KB · 1292 words
# System Prompt: 8-Bit Retro Terminal Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Generate the complete, production-ready code for a landing page in a single attempt. Follow every rule below strictly.

**Theme:** 8-Bit Retro Terminal — Technical, Nostalgic, Cryptic (80s Computing / Arcade aesthetic)
**Sections Required:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling must live in a dedicated `style.css` file. The `style="..."` attribute is **forbidden** in HTML.
* All design properties, layouts, and states must be targeted via class or ID selectors only.
* HTML must remain clean, semantic, and styling-agnostic — changing the site's look must only require editing the CSS file.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` and theme classes:

* **Colors:** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* **Theme-specific tokens (mandatory):**
  * `--bg-primary: #050505` (dark), `--text-primary: #2CFF56` (phosphor green), `--accent: #FFB200`
  * `--pixel-white: #FFFFFF`, `--coin-yellow: #FFD700`, `--heart-red: #FF0000`
* **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforced in both light and dark themes.
* **Light Mode Background:** Do not use pure white; use `#fefefe` where a near-white is needed. The light mode should feel like "paper terminal / beige CRT" (e.g., off-white background with dark green/black text), not a plain modern white page.
* **Radius & Shadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`. Note: for this theme, prefer `--radius-sm: 0` (sharp pixel edges) — borders should be chunky (e.g., `border: 4px solid var(--text-primary)`).
* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Mandatory Dark Mode Support**
* Dark mode is the **default aesthetic** for this theme (green phosphor on `#050505`), but a light mode must also be fully defined.
* Provide light mode tokens under `@media (prefers-color-scheme: light)` and/or a `.light` class selector; dark tokens under `.dark` / `prefers-color-scheme: dark`.
* Theme switching must work purely via CSS variables — no HTML restructuring. Persist user choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Include a visible toggle (a pixel-styled switch labeled "LIGHT/DARK") with correct `aria-pressed` and `aria-label` states.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layouts with Flexbox. Every flex container must default to `align-items: center` unless explicitly justified otherwise.
* All layouts must be mobile-responsive out of the box: multi-column rows (features, pricing, steps) must collapse to single columns on small viewports. No horizontal scrolling at any width.

**1.5 Framework Default**
* Use plain semantic HTML5 + custom CSS driven by this theme's tokens (Tailwind optional; if used, map utilities back to the CSS variables and generic reusable classes: `.btn`, `.card`, `.input-group`, `.section`, `.terminal-frame`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** Load **"Press Start 2P"** from Google Fonts and bind it to `--font-base`. Use a secondary readable Google Font (e.g., "VT323" or "Share Tech Mono") for body copy at readable sizes — Press Start 2P is for headings/labels only.
* **Icons:** Use Google Material Symbols/Icons only. Raw inline SVGs and local icon files are **forbidden**.
* Apply `image-rendering: pixelated` to any imagery.

---

## 2. THEME-SPECIFIC VISUAL DIRECTION

* **ASCII art:** Render the hero title area as ASCII/pixel-art text art (e.g., a stylized logo) inside a terminal frame.
* **Binary strings:** Decorative binary (`01001000 01101001`) strings as background texture or section dividers, implemented via CSS-generated or repeated text spans.
* **Bracket-style terminal frames:** Section containers styled as terminal windows — a title bar with `● ● ●` dots or `[ FILE: about.txt ]` labels, chunky 4px borders in `--text-primary`.
* **CRT phosphor glow:** Apply `text-shadow` glow (e.g., `text-shadow: 0 0 8px rgba(44, 255, 86, 0.6)`) to primary text and headings.
* **Scanlines:** A fixed full-viewport overlay using a repeating-linear-gradient (2px bands) at low opacity, plus an optional subtle flicker animation — both must respect `prefers-reduced-motion`.
* **Blinking cursor:** A `▮` or `_` cursor blinking via CSS `@keyframes` in the hero and terminal prompts.
* **Pixel-art iconography:** Use Material Icons rendered with pixelated/boxy framing; decorative pixel hearts (`--heart-red`) and coins (`--coin-yellow`) as accents (e.g., in testimonials as "lives" instead of stars).

---

## 3. COMPONENT SPECIFICATIONS

**3.1 Buttons (`.btn`, `.btn-primary`, `.btn-secondary`, `.btn-danger`)**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44x44px. Chunky 4px borders, sharp corners, pixel drop-shadow (offset solid shadow, e.g., `box-shadow: 4px 4px 0 var(--accent)`).
* **Hover:** Brightness/shadow shift with `cursor: pointer`.
* **Focus:** Distinct pixel-style focus ring using CSS variables for keyboard navigation.
* **Active/Pressed:** `transform: scale(0.97)` (or a 2px translate mimicking a pressed pixel button).
* **Loading:** Disables interaction, prevents double-clicks, renders an animated Google Icon spinner without distorting dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** Temporary feedback states driven by `--text-success` / `--text-error`.

**3.2 Cards (`.card`, `.terminal-frame`)**
* **Default:** Flexbox layout, `--bg-secondary`, 4px `--border-default` borders, pixel shadow elevation.
* **Hover:** `transform: translateY(-2px)` or shadow shift.
* **Focus-within:** Border highlight when a child link/button receives focus.
* **Loading (Skeleton):** Shimmer animation defined in CSS to prevent layout jumps.
* **Empty State:** Structured fallback with a Google Icon and guidance text.

**3.3 Forms & Inputs (FAQ/CTA if forms are included)**
* States: Empty, Focused (outline ring), Filled, Valid (success border/icon), Invalid (error border, `--text-error` text, error icon), Disabled, Read-only.
* Structure: Flex container wrapping label, input, and a dedicated error feedback container.

**3.4 FAQ Accordion / Modals**
* FAQ items: `<details>`/`<summary>` or ARIA-compliant custom accordion with keyboard operability, animated open/close via CSS transitions.
* Any modal: States for Opening, Open, Loading, Success/Error, Closing (CSS-animated); centered flex container, backdrop overlay, Google Icon close button, focus trapping, close via `Esc` and overlay click.

---

## 4. SECTION-BY-SECTION REQUIREMENTS

All user-facing copy must be written in **English**, themed as retro-terminal/arcade copy (e.g., "INSERT COIN TO CONTINUE", "PLAYER 1 READY", "> SYSTEM ONLINE"). No lorem ipsum — write real, on-theme copy for every section.

* **Hero:** ASCII-art logo/title, blinking cursor tagline, primary CTA ("START GAME") and secondary CTA, decorative binary background.
* **Features (3 cards):** Each card a terminal frame with a Material Icon, title, and description.
* **How It Works (3 steps):** Numbered steps styled as "LEVEL 1 / LEVEL 2 / LEVEL 3" with connecting pixel dividers.
* **Testimonials:** 3 quotes styled as chat/console logs, pixel hearts as ratings.
* **Pricing (3 tiers):** Terminal-frame cards; middle tier highlighted as "MOST PLAYED" with `--accent`/`--coin-yellow` styling; each with a CTA button.
* **FAQ:** Accordion as described in 3.4.
* **Final CTA:** Full-width terminal frame, blinking cursor, single prominent button.
* **Footer:** Secondary links (About, Docs, Support, Privacy, Terms) plus a small "©" line and a "HIGH SCORE" decorative element.

---

## 5. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid sizing, breakpoints, zero horizontal overflow.
* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` (disable flicker, shimmer, blink where reduced).
* **Accessibility:** Sufficient contrast in both themes (verify green-on-black and dark-on-light pairings). Never rely on color alone — pair icons/text with states. Semantic HTML5, correct ARIA roles/labels on custom widgets, logical focus order, full keyboard operability, `aria-live` regions for dynamic feedback.
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Destructive Actions:** `.btn-danger` must be visually distinct (use `--heart-red`) in both themes.

---

## 6. DELIVERABLE & OUTPUT FORMAT

* **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference.
* **Naming:** One consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.
* **No Unrequested Placeholders:** All copy must be real, on-theme English text as specified in Section 4.

Generate the final code immediately.