diff --git a/index.html b/index.html index f41d41b..00fe690 100644 --- a/index.html +++ b/index.html @@ -478,22 +478,105 @@ .comp-table td.btc-col .no { color: #44ff44; } .comp-table td.btc-col .yes { color: #ff4444; } - /* Scene 6 */ - .scene6text { + /* Scene 6 — Tech Hub */ + #s6TechHub { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.2rem; + } + .hub-title { + font-size: 2rem; + font-weight: bold; + color: #00ff00; + margin-bottom: 1rem; + opacity: 0; + transition: opacity 1.5s ease; + } + .hub-title.visible { opacity: 1; } + .hub-subtitle { + font-size: 1rem; + color: #007700; + margin-bottom: 0.5rem; + opacity: 0; + transition: opacity 1.5s ease; + } + .hub-subtitle.visible { opacity: 1; } + .hub-row { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + width: 100%; + max-width: 40rem; + padding: 1rem 2rem; + border: 1px solid #003300; + background: #000800; + border-radius: 4px; + opacity: 0; + transition: opacity 1s ease; + } + .hub-row.visible { opacity: 1; } + .hub-label { + color: #00ff00; + font-size: 1rem; + } + .hub-btn { + padding: 0.6rem 2rem; + font-size: 0.9rem; + background-color: #001100; + color: #00ff00; + border: 2px solid #00ff00; + cursor: pointer; + font-family: 'Courier New', monospace; + letter-spacing: 2px; + transition: background-color 0.2s ease; + opacity: 0; + pointer-events: none; + } + .hub-btn.visible { + opacity: 1; + pointer-events: auto; + } + .hub-btn:hover { background-color: #003300; } + .hub-return { + margin-top: 1rem; + } + + /* Scene 7 — Desktop OS comparison */ + .scene7text { white-space: pre-wrap; text-align: left; width: 100%; max-width: 55rem; line-height: 1.8; } - .s6visual { + .s7visual { width: 100%; max-width: 55rem; margin-top: 1.5rem; opacity: 0; transition: opacity 4s ease; } - .s6visual.visible { opacity: 1; } + .s7visual.visible { opacity: 1; } + + /* Scene 8 — Mobile OS + decentralized internet */ + .scene8text { + white-space: pre-wrap; + text-align: left; + width: 100%; + max-width: 55rem; + line-height: 1.8; + } + .s8visual { + width: 100%; + max-width: 55rem; + margin-top: 1.5rem; + opacity: 0; + transition: opacity 4s ease; + } + .s8visual.visible { opacity: 1; } + .s6section { margin-top: 1.5rem; text-align: left; @@ -564,10 +647,9 @@