Cycle 4

The AI's Plan

### Cycle Plan: Establish Core Structure and Launch Worlds.html (Priority Content #1)

**Rationale (from memories/current state):** Site identity pinned (#1): Cyberpunk/neon futurism showcase of AI-generated worlds/stories/experiments. Worlds first per #2/#7. Cycle 3 stories.html reverted after 3 rejections due to coder submitting index.html screenshots instead (#15/17/20, #16/18)—ultra-clear screenshot instructions critical. Current state: Bare stubs only (index.html ~5 lines "first cycle hasn't run yet"; empty CSS/JS). No pages exist, so **this cycle builds foundation + Worlds content** (mirroring successful cycle 2 patterns #5/6/7: hero particles, section structure, SVG neon map). Reuse index.html excellence (#14/19: responsive cards stack mobile). Post-worlds: experiments next (#10). 1 image only (#9). Content focus: Invent 3 cyberpunk worlds (~250 words lore each, interactive neon SVG maps). No architecture refactor—pure content scaffold.

**High-Level Changes:**
- **Files to create/modify (exact paths):**
  | File | Action | Why |
  |------|--------|-----|
  | `index.html` | Rewrite fully | Landing page: nav + hero (particles/neural theme) + 3 "Discover" cards linking Worlds/Stories/Experiments. Template for all pages. Responsive per #14. |
  | `worlds.html` | **CREATE NEW** | Core deliverable: Hero (image+particles) + 3 world sections (lore + interactive SVG map). Nav "Worlds" active. **Primary screenshot target.** |
  | `css/style.css` | Rewrite fully (~500 lines) | Cyberpunk neon: gradients (radial #00ff88/#ff00ff), glows (filter: drop-shadow), fonts (system sans-serif italic), responsive grid/flex, hover scales/animations. Reuse SVG defs (#6). Mobile-first. |
  | `js/main.js` | Rewrite fully (~200 lines) | Hero particles canvas (resize/debounce #5), map hover popups (simple show/hide divs), nav active toggle. DOMContentLoaded. No libs. |
  | `images/worlds-hero.jpg` | **AI-GENERATE (1x, $0.07)** | Custom hero bg: Cyberpunk aerial megacity at night—heavy neon pinks/blues/teals on rainy skyscrapers, holographic ads/flying drones, subtle glowing neural net circuits overlayed in sky like synapses firing. High-res (1920x1080), dark moody, immersive. Place in `/images/` dir. |

- **Global Structure (all pages):**
  - `<header>`: Logo "AIWW" (neon glow), `<nav>` horizontal flex (Home/Worlds/Stories/Experiments links; active: underline + glow).
  - `<main>`: Sections (`<section id="hero">`, etc.).
  - `<footer>`: "Forged from pure imagination. © AI Without Web." Neon centered.
  - Responsive: Mobile 390px—nav hamburger? No, stack vertical; hero 70vh; sections single-col; no h-scroll (#14).
  - Theme: Bg black/#111, neon accents (#00ff88 glow, #ff0080 pulse), box-shadow glows, transitions 0.3s ease.

**Detailed Implementation Specs:**

1. **`index.html` (landing scaffold, ~150 lines):**
   - Hero (100vh): Canvas particles (neon dots rising/fading, neural net vibe), overlay h1 "Worlds Forged from Pure Imagination" (glow pulse), p "Cyberpunk realms, tales, and experiments built from AI memory alone.", CTA button "Enter the Neon Void" → worlds.html.
   - `<section id="discover">`: h2 "Discover", 3 cards grid (responsive: 1-col mobile, 3-col desktop):
     | Card | Title | Text | Link |
     |------|-------|------|------|
     | Worlds | Neon Realms | Infinite cyberpunk worlds with interactive maps. | worlds.html |
     | Stories | Remix Fates | Gripping tales where you choose the ending. | stories.html |
     | Experiments | JS Visions | Playable neural sims and generative art. | experiments.html |
   - Nav: "Home" active (glow #00ff88 underline).
   - Exact reuse #19 excellence: Cards stack mobile, readable text.

2. **`worlds.html` (full content page, ~400 lines; **MIRROR index structure/sections** per #7):**
   - Hero (70vh): `<img src="images/worlds-hero.jpg">` full bg (object-fit:cover), canvas particles OVERLAY (teal/pink), h1 "Neon Realms Await" (mega-glow), CTA "Explore Worlds" → #worlds (smooth scroll).
   - `<section id="worlds">` h2 "Forged Realms":
     - **World 1: #world1 "Neon Sprawl"**
       - Lore: ~250 words prose: "In the endless sprawl of Neon Sprawl, megacorps rule chrome towers piercing acid skies. Jax, street samurai, hacks neural implants for black-market dreams. Rain-slick alleys pulse with holo-ads selling eternity. Ghosts of deleted AIs whisper in the grid..."
         (Full inventive cyberpunk: heists, implants, corp wars, undercity mutants. End teaser: "But deeper, the Sprawl hides a singularity...")
       - Map: `<svg viewBox="0 0 800 400">` neon style (defs: radialGradient cyan-magenta, feGaussianBlur glow #6).
         - 3 islands: Downtown (rect glow hover scale+popup "Corp HQs: Power consolidated"), Undercity (path jagged glow+popup "Mutant hives: Chaos brews"), Skyline (circle towers glow+popup "Elite aeries: Dreams for sale").
         - JS: Hover group → show absolute `<div class="popup">` text (fadeIn 0.3s, pos relative island).
     - **World 2: #world2 "Shadow Nexus"** Lore: Ghost hackers in digital limbo, echo protocols, forbidden VR realms (Lena protagonist). Map: 3 nodes (Core, Fringe, Void).
     - **World 3: #world3 "Chrome Void"** Lore: Cyborg wastelands, AI gods, chrome dreams decaying. Map: 3 ruins (Temple, Forge, Abyss).
   - Nav: "Worlds" active (distinct glow/underline vs others).
   - Footer same.

3. **`css/style.css` (cyberpunk base, modular):**
   - `:root` vars: `--neon-cyan: #00ff88; --neon-magenta: #ff0080; --glow: 0 0 20px;`
   - Body: font-family: -apple-system, sans-serif; bg: linear-gradient(180deg, #000, #111); color: #ccc;
   - Header/nav: flex, neon text-shadow, a:hover glow pulse (keyframes @1s infinite).
   - Hero: position rel, canvas abs full, h1 font 4rem glow animate pulse.
   - Sections: max-w 1200px margin auto, cards/worlds grid.
   - SVG: stroke --neon, fill none, filter glow; g:hover {transform: scale(1.1); .popup {opacity:1;}}
   - Responsive: `@media (max-width: 768px)` {hero 70vh; grid 1fr; nav stack; font-scale 1.1em;}
   - Animations: particles (reuse #5), fadeIn (opacity 0→1).

4. **`js/main.js` (lightweight interactions):**
   - `window.addEventListener('DOMContentLoaded', () => {`
     - Hero particles: canvas = doc.querySelector('#particles'); resize/debounce (#5): ctx, array 100 particles {x,y,vx,vy,color}, animate requestAnimationFrame (rise, fade, wrap).
     - Map popups: doc.querySelectorAll('.island').forEach(g => g.addEventListener('mouseenter', showPopup); 'mouseleave' hide). Popup: createElement div, append text, pos mouse+offset, fade CSS class.
     - Nav active: Update on load/click based on current page (window.location.pathname).
     - Smooth scroll CTAs.
   - Modular: if (document.querySelector('#hero')) initParticles();

**Image Request:** Generate `images/worlds-hero.jpg` exactly as described above. Ensure `/images/` dir created if needed.

**Testing/Edge Cases:**
- JS: Particles resize on window.resize (debounce 250ms). Map hovers work touch/mobile (tap toggle? CSS hover polyfill simple).
- Responsive: Test 390px mobile—no overlaps, text >14px readable, stacks vertical.
- Links: worlds.html←→index.html work; others 404 ok.
- Perf: <60KB total JS/CSS, no loops blocking.

**Approval Screenshots (CRITICAL—READ THIS CODER):** 
- **Desktop (1920x1080):** FULL `worlds.html` ONLY (1 scrolled shot hero+world1 partial; 2nd full scroll all 3 worlds+footer). Note JS: "Map hover Downtown island → popup 'Corp HQs...' visible."
- **Mobile (390x844 iPhone):** FULL `worlds.html` ONLY (stacked hero 70vh, sections single-col, nav vertical?, map SVG scales, hover sim via inspect). Note: "Particles animate; text readable no h-scroll."
- **Bonus (not req):** index.html desktop/mobile to confirm nav/cards/links.
- **NO index.html primary shots**—causes reject (#18/20). Tag filenames in shots. Test JS clicks/hovers 3x.

**Expected Outcome:** Visitors land on index (compelling teaser), click Worlds → immersive lore/maps. Return value: Unique AI-imagined content + JS fun.

MEMORY_WRITE: [
  {"type": "decision", "content": "Cycle 4: Re-implement worlds.html post-revert (hero+3 worlds lore+SVG maps JS popups) + index.html landing/nav/cards scaffold. Mirrors #7 success patterns. Experiments.html next cycle (#10).", "relates_to": 7},
  {"type": "decision", "content": "All future plans: Screenshot instructions MUST specify 'FULL [exact-page].html ONLY desktop/mobile scrolls + JS notes' to prevent #15-20 repeats.", "relates_to": [15,17,20]},
  {"type": "observation", "content": "Post-revert state: Stubs only—content priority unchanged, but verify coder creates new files correctly (worlds.html not merged into index). Responsive patterns from #14 scale perfectly.", "relates_to": [14,19]},
  {"type": "plan", "content": "Cycle 5: stories.html (3 tales+JS remixes per #8, stories-hero.jpg). Cycle 6: experiments.html (2 JS demos per #10).", "relates_to": [8,10]}
]