From a389ba3690de2bead944b8f8b94bce46c098383f Mon Sep 17 00:00:00 2001 From: avi Date: Tue, 12 May 2026 20:01:16 -0500 Subject: [PATCH] Save point: Scene 4 expanded to 5 sub-scenes (4a-4e) with timeline, typewriter, visuals, NEXT buttons, Escape skip --- index.html | 580 ++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 490 insertions(+), 90 deletions(-) diff --git a/index.html b/index.html index f417212..856f669 100644 --- a/index.html +++ b/index.html @@ -237,6 +237,179 @@ white-space: pre-wrap; margin-top: 2.4rem; } + + /* Scene 4 sub-scenes */ + .scene4sub { + flex-direction: column; + justify-content: flex-start; + align-items: center; + padding: 1.5rem 2rem; + overflow-y: auto; + } + .scene4text { + white-space: pre-wrap; + text-align: left; + width: 100%; + max-width: 50rem; + line-height: 1.8; + } + .s4visual { + width: 100%; + max-width: 50rem; + margin-top: 1.5rem; + opacity: 0; + transition: opacity 1.2s ease; + } + .s4visual.visible { opacity: 1; } + + /* Timeline */ + .s4tl { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + max-width: 50rem; + margin-bottom: 1.5rem; + padding: 0.5rem 0; + border-bottom: 1px solid #003300; + opacity: 0; + transition: opacity 1s ease; + } + .s4tl.visible { opacity: 1; } + .tl-year { + font-size: 0.85rem; + color: #004400; + transition: color 0.8s ease; + cursor: default; + position: relative; + } + .tl-year.active { color: #00ff00; } + .tl-year.dim { color: #007700; } + .tl-year::after { + content: ''; + position: absolute; + bottom: -0.3rem; + left: 50%; + transform: translateX(-50%); + width: 6px; + height: 6px; + border-radius: 50%; + background: #004400; + transition: background 0.8s ease; + } + .tl-year.active::after { background: #00ff00; box-shadow: 0 0 6px #00ff00; } + .tl-year.dim::after { background: #007700; } + + /* NEXT button */ + .btnNext { + position: fixed; + bottom: 5%; + left: 50%; + transform: translateX(-50%); + z-index: 5; + padding: 0.8rem 2.5rem; + font-size: 1rem; + background-color: #001100; + color: #00ff00; + border: 2px solid #00ff00; + cursor: pointer; + visibility: hidden; + opacity: 0; + pointer-events: none; + transition: opacity 0.5s ease, background-color 0.2s ease; + font-family: 'Courier New', monospace; + letter-spacing: 2px; + } + .btnNext:hover { background-color: #003300; } + + /* 69% Callout box */ + .callout-box { + border: 2px solid #660000; + background: #1a0000; + color: #ff4444; + padding: 1.2rem 1.5rem; + text-align: center; + font-weight: bold; + font-size: 1.1rem; + border-radius: 4px; + box-shadow: 0 0 12px rgba(255,0,0,0.15); + animation: calloutPulse 2s infinite alternate; + } + @keyframes calloutPulse { + from { box-shadow: 0 0 8px rgba(255,0,0,0.1); } + to { box-shadow: 0 0 20px rgba(255,0,0,0.3); } + } + + /* Coin stack */ + .coin-grid { + display: grid; + grid-template-columns: repeat(10, 1fr); + gap: 4px; + max-width: 30rem; + margin: 0 auto; + } + .coin { + aspect-ratio: 1; + border-radius: 50%; + border: 1px solid #004400; + background: #001100; + transition: background 0.5s ease, border-color 0.5s ease; + } + .coin.gold { background: #665500; border-color: #aa8800; } + + /* Comparison table */ + .comp-table { + width: 100%; + max-width: 50rem; + border-collapse: collapse; + margin-top: 1rem; + font-size: 0.9rem; + } + .comp-table th, .comp-table td { + border: 1px solid #003300; + padding: 0.6rem 1rem; + text-align: center; + } + .comp-table th { + color: #00ff00; + border-bottom: 2px solid #00ff00; + } + .comp-table td:first-child { + text-align: left; + color: #00cc00; + } + .comp-table .yes { color: #ff4444; } + .comp-table .no { color: #44ff44; } + + /* Punch cards */ + .punch-row { + display: flex; + flex-direction: row; + gap: 1rem; + justify-content: center; + margin-top: 1.5rem; + width: 100%; + max-width: 50rem; + } + .punch-card { + flex: 1; + border: 1px solid #003300; + padding: 1rem; + text-align: center; + font-size: 0.85rem; + background: #000800; + border-radius: 4px; + } + .punch-card .punch-icon { + font-size: 1.5rem; + display: block; + margin-bottom: 0.4rem; + } + .punch-card .punch-text { + color: #00ff00; + line-height: 1.4; + } @@ -275,15 +448,41 @@ -
-
+ +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+