Claude: fix #7 — Change background to yellow — more playful vibe

.claude-prompt.md

@@ -0,0 +1,78 @@
+You are fixing a GitHub issue in a cloned copy of the repo at `master`.
+The working directory is `/home/boxd/first-boot`. It's already synced
+to origin/master. You are user `boxd` (uid 1000), with `sudo` available.
+
+The app's Python server is already running on http://localhost:3000 inside
+this VM (live-forked from the golden), and Google Chrome is installed
+at `/usr/bin/google-chrome`.
+
+# The issue
+
+Title: Change background to yellow — more playful vibe
+
+Number: #7
+
+Body:
+```
+### Problem
+
+The current background is a dark `#0a0c12` with a subtle dot grid. It's stylish but feels a bit moody for a snake game.
+
+### Expected
+
+Warm, playful yellow background. Something like `#fde047` or `#facc15` (Tailwind amber/yellow). Keep the dot-grid pattern if possible, just tint the base.
+
+### Scope
+
+- Update the `body` background color in `index.html` (the inline `<style>` block).
+- Adjust any foreground text/element colors that now clash with yellow (e.g. `#f4f4f5` text on yellow is unreadable). Pick a dark foreground that looks good on yellow, e.g. `#18181b`.
+- Keep the snake's retro green — it already contrasts well with yellow.
+- Please include before/after screenshots in the PR.
+```
+
+# Your job
+
+1. Read the codebase (`AGENTS.md`, `server.py`, `index.html`) and understand the issue.
+2. **If this is a UI change** (edits to `index.html` or anything visible in the
+   browser), capture a "before" screenshot first:
+   ```bash
+   mkdir -p .claude-screenshots
+   /usr/bin/google-chrome --headless --disable-gpu --no-sandbox \
+     --screenshot=.claude-screenshots/before.png --window-size=1280,800 \
+     http://localhost:3000
+   ```
+3. Make the minimal change required to fix it.
+4. **Always restart the Python server after any file change.** `server.py`
+   reads `index.html` once at startup and caches it in memory, so even
+   edits to `index.html` only take effect after a restart:
+   ```bash
+   pkill -f "python3 server.py" || true
+   sleep 1
+   (cd /home/boxd/first-boot && setsid nohup python3 server.py >/tmp/server.log 2>&1 </dev/null &)
+   sleep 2
+   curl -sf http://localhost:3000/ >/dev/null   # sanity
+   ```
+5. **For UI changes**, capture an "after" screenshot:
+   ```bash
+   /usr/bin/google-chrome --headless --disable-gpu --no-sandbox \
+     --screenshot=.claude-screenshots/after.png --window-size=1280,800 \
+     http://localhost:3000
+   ```
+6. Commit your changes on the current branch with a descriptive message.
+   Use `git add -A && git commit -m "..."`. Subject line:
+   `fix: <short description> (closes #7)`.
+7. Do NOT open a PR. Do NOT push. The caller will handle that.
+
+If you need deeper browser inspection (clicking, console logs, network
+requests), use the `chrome-devtools` MCP tools instead of headless CLI.
+
+# Constraints
+
+- Do not modify unrelated files.
+- Keep the commit focused. Screenshots go in `.claude-screenshots/`.
+- This repo has no test suite — verify correctness by hitting the server
+  (`curl http://localhost:3000/`) and/or inspecting screenshots.
+- If the issue is ambiguous or you cannot make progress, commit whatever
+  partial work makes sense (with a clear message) and explain blockers.
+
+When you're done (changes committed), print a final line: `DONE`.

index.html

@@ -8,15 +8,15 @@
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body {
-    background-color: #0a0c12;
-    background-image: radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
+    background-color: #fde047;
+    background-image: radial-gradient(circle, rgba(0,0,0,0.12) 1px, transparent 1px);
     background-size: 20px 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     font-family: 'Inter', system-ui, -apple-system, sans-serif;
-    color: #f4f4f5;
+    color: #18181b;
     overflow: hidden;
     overflow-y: auto;
   }
@@ -31,15 +31,15 @@
     font-weight: 300;
     letter-spacing: 4px;
     text-transform: uppercase;
-    color: #f4f4f5;
+    color: #18181b;
   }
   .hud {
     display: flex;
     gap: 40px;
     font-size: 14px;
     letter-spacing: 2px;
     text-transform: uppercase;
-    color: #a1a1aa;
+    color: #52525b;
   }
   .hud span { color: #E05A6D; font-weight: 600; }
   .canvas-wrap {
@@ -51,7 +51,7 @@
   canvas {
     width: 100%;
     height: 100%;
-    border: 1px solid rgba(255, 255, 255, 0.10);
+    border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 8px;
     box-shadow:
       0 0 60px rgba(224, 90, 109, 0.06),
@@ -81,7 +81,7 @@
     font-size: 20px;
     letter-spacing: 3px;
     text-transform: uppercase;
-    color: #f4f4f5;
+    color: #fde047;
     opacity: 0;
     transition: opacity 0.3s;
   }
@@ -111,9 +111,9 @@
     width: 56px;
     height: 56px;
     border-radius: 12px;
-    border: 1px solid rgba(255,255,255,0.12);
-    background: rgba(255,255,255,0.06);
-    color: #a1a1aa;
+    border: 1px solid rgba(0,0,0,0.15);
+    background: rgba(0,0,0,0.06);
+    color: #52525b;
     font-size: 22px;
     display: flex;
     align-items: center;
@@ -258,7 +258,7 @@ <h1 id="title">{{VM_NAME}}</h1>
 }
 
 function drawGrid() {
-  ctx.strokeStyle = 'rgba(255, 255, 255, 0.04)';
+  ctx.strokeStyle = 'rgba(0, 0, 0, 0.08)';
   ctx.lineWidth = 0.5;
   for (let x = 0; x <= W; x += CELL) {
     ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, H); ctx.stroke();
@@ -351,8 +351,8 @@ <h1 id="title">{{VM_NAME}}</h1>
 function render() {
   ctx.clearRect(0, 0, W, H);
 
-  // Background — BOXD dark navy
-  ctx.fillStyle = '#0a0c12';
+  // Background — playful yellow
+  ctx.fillStyle = '#fde047';
   ctx.fillRect(0, 0, W, H);
 
   drawGrid();