Internet Nostalgia Y2K Revival demo
Internet Nostalgia Y2K Revival

A faithful revival of late-90s desktop computing, featuring gray beveled Windows 95/98 interface elements, pixelated icons, and early-internet charm.
Category: Retro & Pop
Era: 1990s Retro
Prompt: 16.3 KB · 2293 words
**ROLE:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, polished, production-ready Landing Page on the first attempt. Do not ask clarifying questions — make expert decisions and deliver the final code in one pass.

**MISSION:** A single-page landing page themed **"Internet Nostalgia Y2K Revival"** — an authentic Windows 95/98, dial-up-era (1995–2000) retro web aesthetic: beveled window chrome, blue title bars, pixel & ASCII art, literal dialog boxes, custom cursors, retro scrollbars, and GeoCities-era decorations.

**SECTIONS (in this order):** Hero · Features (3 cards) · How It Works (3 steps) · Testimonials · Pricing (3 tiers) · FAQ · Final CTA · Footer with secondary links.

**CONTENT DIRECTION:** Invent one coherent fictional product that fits the theme (recommended: a retro website builder/host that lets anyone create their own '90s homepage). Write ALL user-facing copy in English, in an authentic '90s internet voice ("Welcome to my homepage!", "Under construction", "Sign the guestbook", "Best viewed at 800×600"). Never use lorem ipsum — write real copy for every section.

---

## 0. DESIGN BRIEF — INTERNET NOSTALGIA Y2K REVIVAL

**0.1 Aesthetic:** Windows 95/98 desktop metaphor. Every major section lives inside a "window": a 2px beveled frame (outset when raised, inset when pressed), a Title Blue (#000080) title bar with bold, **centered** white text and small square window-control buttons at the right, and a white content interior. System Gray #C0C0C0 is the page canvas. The vibe: 16-bit color, dial-up era, GeoCities homepage, table-era layouts recreated with modern CSS.

**0.2 Palette (source spec, translated):** System Gray `#C0C0C0` · Title Blue `#000080` · Window White `#FFFFFF` · Text Black `#000000` · Terminal Green `#00FF00` · DOS Cyan `#00FFFF` · Retro Magenta `#FF00FF` · Alert Yellow `#FFFF00` · Border Silver `#808080`.

**0.3 Signature visual effects (all mandatory):**
- **Beveled borders:** raised = `border: 2px outset #DFDFDF; box-shadow: inset -1px -1px #0A0A0A, inset 1px 1px #FFFFFF;` pressed/sunken = `border: 2px inset #808080;` with the box-shadow inverted.
- **Buttons depress on click:** outset → inset on `:active`.
- **Blue title bars** (#000080) with centered white text.
- **Literal pop-up dialog boxes** with exclamation/question icons.
- **ASCII art** made of text characters inside `<pre>` with monospace font.
- **Pixelated graphics:** `image-rendering: pixelated` (with `crisp-edges` fallback) on any pixel-art surface.
- **Playful custom cursors** via `cursor: url(...)` (see exception in 1.6).
- **Bitmap/system font feel** (simulated MS Sans Serif — see 1.6).
- **Retro styled scrollbars** (see Section 3).
- **"Table layout" look** built with CSS Grid/Flex that *looks* like tables — never a real `<table>` for page layout.
- **GeoCities decorations:** "Under construction" barrier (CSS yellow/black diagonal stripes), visitor counter, guestbook link, 88×31-style CSS micro-badges, CSS-animated marquee text (do NOT use the deprecated `<marquee>` element).
- `letter-spacing: 0` on all UI text; compact 2px/4px/8px padding rhythm (interactive elements still respect the 44×44px minimum in 2.1).

**0.4 Section blueprint:**
- **Hero:** one large "application window" — title bar with product name + minimize/maximize/close buttons (Material Symbols); a menu-bar strip (File / Edit / View / Help — real in-page anchors where possible, e.g., Help → FAQ; purely decorative items get `aria-hidden`); inside: ASCII-art logo in `<pre>` (aria-hidden with an `.sr-only` text alternative), headline, subheadline, two CTAs (primary beveled button + secondary link), a CSS-animated marquee welcome line, a blinking "NEW!" badge, and a decorative "dial-up connecting…" dialog with an animated segmented blue progress bar.
- **Features (3 cards):** three mini windows, each with title bar, Material Symbol icon, heading, copy. Hover lifts the card.
- **How It Works (3 steps):** a "Setup Wizard" — three numbered step windows (beveled 1/2/3 badges) connected by ASCII arrows (→) or dashed connectors; icon + title + description each.
- **Testimonials:** a "Guestbook" — header with the under-construction barrier; three entries styled as guestbook cards: name, '90s date, 5-star rating (filled Material 'star' icons), quote.
- **Pricing (3 tiers):** three dialog-box windows; the middle tier is the default/highlighted one (bold title, primary raised button, "Best Value" label styled as a Win95 tooltip); feature lists with Material 'check' icons; each tier's button opens the confirm modal (see 2.4).
- **FAQ:** `<details>`/`<summary>` accordions styled as classic group boxes: summary = full-width beveled row with a +/− Material icon indicator that changes state when open; content in a sunken panel. Native keyboard support required.
- **Final CTA:** one big dialog window — title bar "Confirm", exclamation Material icon, persuasive copy, email signup form (see 2.3) with full validation and an inline success state (check icon + confirmation copy). No `alert()`/`confirm()` ever.
- **Footer:** a Win95 taskbar — "Start" button (scrolls to top), secondary links as taskbar buttons (Guestbook, Webring, Awards, About, Contact, Privacy), a live JS clock, visitor counter, 88×31 CSS badges, "Best viewed at 800×600", playful "© 1999" line.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No inline CSS:** the `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID selectors only:** every design property, layout rule, and state is targeted via class or ID selectors in `style.css`.
- **Minimal HTML modifications:** HTML stays clean, semantic (HTML5 landmarks: `header`/`main`/`section`/`footer`), and agnostic of visual styling — retheming must require touching only `style.css`.

### 1.2 CSS Variables & Theme Tokens
Store all visual tokens in `:root` under exactly these names, plus theme extras:

```css
:root {
  --primary: #000080;        /* Title Blue */
  --secondary: #FF00FF;      /* Retro Magenta — dark surfaces only */
  --bg-primary: #C0C0C0;     /* System Gray — page canvas */
  --bg-secondary: #FFFFFF;   /* Window White — window interiors */
  --text-primary: #000000;
  --text-secondary: #404040; /* readable dark gray; NEVER #808080 as text on light bg */
  --text-success: #008000;
  --text-error: #CC0000;
  --border-default: #808080; /* Border Silver */
  --border-error: #FF0000;
  --border-success: #008000;

  /* Bevel system */
  --bevel-highlight: #FFFFFF; --bevel-light: #DFDFDF;
  --bevel-shadow: #808080;   --bevel-dark: #0A0A0A;
  --title-bar-bg: #000080;   --title-bar-text: #FFFFFF;

  /* Neon accents — dark surfaces ONLY */
  --terminal-green: #00FF00; --dos-cyan: #00FFFF; --alert-yellow: #FFFF00;

  /* Shape, depth, motion — sharp corners, hard shadows */
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --shadow-sm: 1px 1px 0 var(--bevel-dark);
  --shadow-md: 2px 2px 0 var(--bevel-dark);
  --spacing-gap: 8px;
  --transition-fast: 60ms; --transition-normal: 120ms;
  --ease-standard: ease-out; /* steps() allowed for themed blink/marquee/progress animations */
  --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;

  --font-base: "Pixelify Sans", "MS Sans Serif", Tahoma, system-ui, sans-serif;
  --font-mono: "VT323", "Courier New", monospace;
}
```

- **Contrast pairing (mandatory):** light backgrounds (#C0C0C0, #FFFFFF) pair only with dark text tokens. Neon accents (#00FF00, #00FFFF, #FFFF00, #FF00FF) may appear ONLY on dark surfaces (#000000 or #000080) — terminal windows, title bars, hit counters. On light surfaces use darkened equivalents (#008000, #008080, #808000, #800080).
- **Light-mode background:** the page canvas is System Gray #C0C0C0, not white — the no-pure-white-default rule is satisfied. **Exception:** window interiors use pure `#FFFFFF` (`--bg-secondary`) because the source palette explicitly demands "Window White."
- **Radius & shadows:** border-radius is 0 everywhere (sharp corners are canonical here); all shadows are hard-edged (no blur), per the tokens above.

### 1.3 Mandatory Dark Mode Support
Dark Mode must always be defined: tokens under `@media (prefers-color-scheme: dark)` and/or a `.dark` class, seamless variable switching without HTML restructuring, `localStorage` persistence falling back to `prefers-color-scheme`, and a visible toggle with correct `aria-pressed`/`aria-label`.
- **Exception (this theme):** the source specification explicitly sets Dark Mode to "None" — ship light-mode-only: do NOT add a theme toggle, and ensure `prefers-color-scheme: dark` never alters the fixed Windows 95 palette.

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build all layout structures with Flexbox (plus Grid for the table-look).
- **Default alignment rule:** every flex container defaults to `align-items: center` unless there is an explicitly justified exception (e.g., form field stacks use `stretch`; title bars center text vertically and push controls right).
- **Mobile-first:** all rows collapse to single columns below ~768px; no horizontal scrolling anywhere — `<pre>` ASCII blocks get `overflow-x: auto` (or clamp-scaled font-size) so they never break the viewport; title-bar text truncates with ellipsis on small screens.

### 1.5 Framework & Naming Convention
- Use Tailwind CSS as the engine, but compose ALL styles in `style.css` via `@layer`/`@apply` so the HTML carries only semantic component classes — no utility-class soup in the markup.
- **Single naming convention: BEM** (e.g., `.window`, `.window__title-bar`, `.window__controls`, `.btn`, `.btn--danger`, `.card`, `.input-group`) — never mix conventions. All utilities must map back to CSS variables or these reusable class names.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text fonts:** load **Pixelify Sans** (UI/base — the bitmap "MS Sans Serif" feel) and **VT323** (terminal/ASCII) from Google Fonts via `<link>` in `<head>`; bind them to `--font-base` and `--font-mono`. ASCII art uses `--font-mono` inside `<pre>`.
  - **Exception:** the source spec's bitmap/system-font request is satisfied through the fallback stacks (`"MS Sans Serif", Tahoma, system-ui` / `"Courier New", monospace`) placed after the mandatory Google Fonts.
- **Icons:** Google Material Symbols only — raw inline SVGs and local icon files are forbidden. Load once; use e.g. `close`, `remove` (minimize), `crop_square` (maximize), `warning`, `error`, `help`, `check`, `check_circle`, `star` (filled via `font-variation-settings: 'FILL' 1`), `add`/`remove` for FAQ indicators. Render icons small, black, sharp-cornered to fit the 16-bit look.
- **Custom cursors (exception):** define playful retro cursors in `style.css` only, via `cursor: url("data:...")` 16×16 pixel-art data-URIs with mandatory fallback keywords (`auto`, `pointer`) — never external `.cur` files; never change cursor semantics (links/buttons keep a pointer-type cursor).

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (Win95 Beveled Push Buttons)
All states via CSS classes (`.btn` + modifiers):
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` background #C0C0C0, canonical raised bevel (0.3), `letter-spacing: 0`, minimum touch target 44×44px, `cursor: pointer`.
- **Hover:** visible shift — brightness bump or inner highlight (or bold label, the classic default-button behavior).
- **Focus:** distinct retro dotted focus ring via CSS variables (`outline: 1px dotted #000; outline-offset: -4px`) on `:focus-visible` — keyboard navigation must be obvious.
- **Active/Pressed:** bevel inverts (outset → inset) plus press feedback `transform: translate(1px, 1px)` (the retro equivalent of `scale(0.97)`).
- **Loading:** disables interaction and prevents double-clicks; renders a CSS spinner or animated Material icon (e.g., flipping `hourglass_top`) inside a fixed-width slot so button dimensions never change.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary feedback states driven by `--text-success` / `--text-error` (label/icon swap, e.g., "OK!" or red error text).
- **Danger:** `.btn--danger` is visually distinct (red label/border via `--text-error`/`--border-error`) — never color alone; pair with icon or text.

### 2.2 Card Component (Window Containers)
- **Default:** flexible flexbox layout, beveled 2px frame, `--bg-secondary` interior, subtle `--border-default` details, title bar with centered white bold text.
- **Hover:** elevation shift — hard shadow grows (`--shadow-sm` → `--shadow-md`) and/or `transform: translateY(-2px)`.
- **Focus-within:** when a child link/button receives focus, the card frame or title bar highlights (e.g., dashed accent outline).
- **Loading (skeleton):** CSS-only placeholder — a shimmer or a themed animated segmented progress bar (repeating blocks of #000080) — with zero layout jumps.
- **Empty state:** structured fallback with a Material icon and clear guidance text in dialog style.

### 2.3 Form & Input Requirements (Sunken Fields)
- **States:** empty, focused (dotted retro outline ring), filled, valid (success border + `check` icon), invalid (error border `--border-error`, red text, `error` icon, message announced via `aria-live`), disabled, read-only.
- **Structure:** flex container wrapping `<label>`, the input, and a dedicated error-feedback element. Inputs are sunken: `border: 2px inset var(--bevel-shadow)` + inverted inner shadows, background #FFFFFF.
- The Final CTA email form implements every state; validation lives in `script.js`; feedback is inline — never `alert()`.

### 2.4 Modal / Dialog Box Requirements (Literal Win95 Dialogs)
- **States:** opening (scale/fade or stepped retro appear), open, loading (progress bar), success/error (icon + message swap), closing — all animated via CSS transitions.
- **UX:** centered flex container (`align-items: center`), dark backdrop (`rgba(0,0,0,.5)`, optionally with a subtle CSS hatch pattern), `role="dialog"` + `aria-modal="true"` + `aria-labelledby`, Google icon close button (small beveled square with `close` symbol), keyboard focus trap, close via `Esc` and overlay click, focus returns to the trigger.
- **Content pattern:** exclamation/question Material icon + message + button row (OK / Cancel beveled buttons). Pricing tier buttons open a "Confirm your plan" instance of this modal.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid widths and breakpoints without horizontal overflow; grids collapse to one column on mobile.
- **Smooth animations:** every state change transitions with `var(--transition-normal)`; honor `prefers-reduced-motion` — disable blink, marquee (render static), progress, and modal animations.
- **Accessibility:** sufficient contrast in the (single) light theme per 1.2's pairing rules; never rely on color alone; semantic HTML5; correct ARIA roles/labels on custom widgets; logical DOM/focus order; full keyboard operability; `aria-live` regions for form errors, toasts, loading, and modal state changes.
- **Retro-specific a11y:** blinking elements blink slowly (≥1s period) and never carry essential info; marquee is `aria-hidden` decorative; ASCII art is `aria-hidden` with `.sr-only` alternatives; purely decorative window chrome (non-functional menu items, hero min/max/close) is `aria-hidden` and not focusable — anything functional gets real buttons with `aria-label`s.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** `.btn--danger` is visually distinct at all times.
- **Scrollbars:** style retro — `scrollbar-color: #C0C0C0 #808080` plus `::-webkit-scrollbar*` pseudo-elements (beveled gray thumb, classic track) — without breaking scroll usability.
- **Dynamic feedback region:** a Win95 tooltip/balloon-styled status area (z-index `--z-toast`) announces successes/errors via `aria-live`.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. The HTML contains exactly one `<script src="script.js" defer></script>` — no inline script blocks, no inline styles.
- **script.js scope:** modal open/close + focus trap, form validation + inline feedback, button loading states, live footer clock, visitor-counter animation. Vanilla JS only.
- **Naming:** BEM everywhere (per 1.5) — never mix conventions.
- **Copy:** all user-facing copy in English, themed per 0.4 — no lorem ipsum, no unrequested placeholders.
- **Assets:** no external images, GIFs, or hotlinks — every visual (pixel art, badges, barriers, counters, cursors) is CSS, ASCII, or Material Symbols.