diff --git a/index.html b/index.html index 99d7e9a..320bf78 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,14 @@ - Egyptian Escape Room — Digital Lock + + + + + Ted's Egyptian Escape Room — Artifact Room Door
diff --git a/public/favicon.svg b/public/favicon.svg index 6893eb1..2d6e6aa 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1 +1,5 @@ - \ No newline at end of file + + + + ☥ + diff --git a/src/App.css b/src/App.css index 0e700d4..0cda635 100644 --- a/src/App.css +++ b/src/App.css @@ -1,28 +1,137 @@ -.lock-app { +/* Sarcophagus control panel — warm adventure tone, kid-friendly */ + +.sarcophagus-scene { + position: relative; + width: min(100%, 56rem); + margin: 0 auto; + padding: 0 1rem; +} + +.sarcophagus-scene--celebrating::before { + content: ''; + position: fixed; + inset: 0; + z-index: 0; + pointer-events: none; + background: radial-gradient( + ellipse 70% 60% at 50% 45%, + rgba(255, 210, 120, 0.22) 0%, + rgba(255, 180, 80, 0.08) 45%, + transparent 70% + ); + animation: torch-glow 2s ease-in-out; +} + +@keyframes torch-glow { + 0% { + opacity: 0; + } + 35% { + opacity: 1; + } + 100% { + opacity: 0.6; + } +} + +.sarcophagus-panel { + position: relative; + z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; - width: min(100%, 56rem); - margin: 0 auto; - padding: 2rem 1rem 3rem; + padding: 2rem 1.25rem 2.5rem; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 12%), + linear-gradient(180deg, #3d3428 0%, #2d2419 55%, #252018 100%); + border: 3px solid #5c4d38; + border-radius: 1rem; + box-shadow: + inset 0 0 0 1px rgba(232, 197, 71, 0.3), + inset 0 2px 28px rgba(0, 0, 0, 0.35), + 0 16px 48px rgba(0, 0, 0, 0.45); +} + +.sarcophagus-panel--opening { + animation: panel-unlock 1.8s ease-in-out; +} + +@keyframes panel-unlock { + 0%, + 100% { + box-shadow: + inset 0 0 0 1px rgba(232, 197, 71, 0.3), + inset 0 2px 28px rgba(0, 0, 0, 0.35), + 0 16px 48px rgba(0, 0, 0, 0.45); + } + 40%, + 70% { + box-shadow: + inset 0 0 0 2px rgba(232, 197, 71, 0.65), + inset 0 0 40px rgba(232, 197, 71, 0.12), + 0 0 32px rgba(232, 197, 71, 0.25), + 0 16px 48px rgba(0, 0, 0, 0.45); + } +} + +.panel-corner { + position: absolute; + font-size: 1.1rem; + color: rgba(201, 162, 39, 0.45); + line-height: 1; + user-select: none; + pointer-events: none; +} + +.panel-corner--tl { + top: 0.65rem; + left: 0.85rem; +} + +.panel-corner--tr { + top: 0.65rem; + right: 0.85rem; +} + +.panel-corner--bl { + bottom: 0.65rem; + left: 0.85rem; +} + +.panel-corner--br { + bottom: 0.65rem; + right: 0.85rem; } .lock-header { text-align: center; + width: 100%; } .lock-header h1 { - margin: 0 0 0.35rem; - font-size: clamp(1.75rem, 5vw, 2.25rem); + margin: 0 0 0.5rem; + font-family: Cinzel, Georgia, 'Times New Roman', serif; + font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 700; - letter-spacing: 0.04em; + letter-spacing: 0.06em; + color: #e8c547; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .lock-subtitle { margin: 0; - color: #9ca3af; - font-size: 0.95rem; + color: #c9b896; + font-size: clamp(0.78rem, 1.45vw, 0.95rem); + line-height: 1.45; + white-space: nowrap; +} + +@media (max-width: 26rem) { + .lock-subtitle { + white-space: normal; + font-size: 0.88rem; + } } .lock-grid { @@ -32,7 +141,8 @@ gap: 0.65rem; width: 100%; overflow-x: auto; - padding-bottom: 0.25rem; + padding: 0.25rem 0.15rem 0.35rem; + scrollbar-color: #5c4d38 transparent; } .lock-slot { @@ -51,27 +161,37 @@ width: clamp(2.5rem, 5vw, 3.25rem); height: clamp(2.5rem, 5vw, 3.25rem); border-radius: 50%; - border: 2px solid rgba(255, 255, 255, 0.25); - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); + border: 3px solid #c9a227; + box-shadow: + 0 0 0 2px rgba(26, 21, 16, 0.85), + 0 3px 10px rgba(0, 0, 0, 0.4), + inset 0 2px 6px rgba(255, 255, 255, 0.18); } .lock-input { width: 100%; min-width: 0; padding: 0.65rem 0.25rem; + font-family: 'Source Sans 3', system-ui, sans-serif; font-size: clamp(1.1rem, 2.5vw, 1.5rem); - font-weight: 600; + font-weight: 700; text-align: center; - color: #f3f4f6; - background: #1f2937; - border: 2px solid #374151; + color: #f4e4bc; + background: linear-gradient(180deg, #2a2218 0%, #1f1a14 100%); + border: 2px solid #4a3f32; border-radius: 0.5rem; outline: none; - transition: border-color 0.15s; + box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35); + transition: + border-color 0.15s, + box-shadow 0.15s; } .lock-input:focus { - border-color: #6b7280; + border-color: #e8c547; + box-shadow: + inset 0 2px 6px rgba(0, 0, 0, 0.35), + 0 0 0 3px rgba(232, 197, 71, 0.22); } .lock-input:disabled { @@ -81,11 +201,12 @@ .lock-error { margin: 0; padding: 0.65rem 1.25rem; - font-size: 1.1rem; + font-size: 1.05rem; font-weight: 600; - color: #fecaca; - background: #7f1d1d; - border: 1px solid #b91c1c; + color: #fef3c7; + text-align: center; + background: rgba(92, 68, 28, 0.75); + border: 1px solid rgba(201, 162, 39, 0.55); border-radius: 0.5rem; animation: error-pop 0.25s ease-out; } @@ -102,28 +223,40 @@ } .unlock-btn { - margin-top: 0.5rem; - padding: 1rem 3rem; - font-size: 1.25rem; + margin-top: 0.25rem; + padding: 1rem 2.75rem; + font-family: Cinzel, Georgia, serif; + font-size: 1.1rem; font-weight: 700; - letter-spacing: 0.12em; - color: #111827; - background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%); - border: none; + letter-spacing: 0.14em; + color: #1a1510; + background: linear-gradient(180deg, #e8c547 0%, #c9a227 48%, #a8841a 100%); + border: 2px solid #f4e4bc; border-radius: 0.5rem; cursor: pointer; - box-shadow: 0 4px 0 #92400e, 0 6px 16px rgba(0, 0, 0, 0.35); - transition: transform 0.1s, box-shadow 0.1s; + box-shadow: + 0 4px 0 #7a6318, + 0 8px 20px rgba(0, 0, 0, 0.35), + inset 0 1px 0 rgba(255, 255, 255, 0.35); + transition: + transform 0.1s, + box-shadow 0.1s; } .unlock-btn:hover:not(:disabled) { transform: translateY(-1px); - box-shadow: 0 5px 0 #92400e, 0 8px 20px rgba(0, 0, 0, 0.4); + box-shadow: + 0 5px 0 #7a6318, + 0 10px 24px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.35); } .unlock-btn:active:not(:disabled) { transform: translateY(2px); - box-shadow: 0 2px 0 #92400e, 0 4px 12px rgba(0, 0, 0, 0.3); + box-shadow: + 0 2px 0 #7a6318, + 0 4px 12px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.25); } .unlock-btn:disabled { @@ -160,41 +293,24 @@ } } -.lock-opening { - position: relative; - width: 5rem; - height: 5rem; - margin-top: 0.5rem; +.panel-opening-msg { + margin: 0; + font-family: Cinzel, Georgia, serif; + font-size: 1.05rem; + font-weight: 600; + letter-spacing: 0.05em; + color: #e8c547; + animation: opening-pulse 1.2s ease-in-out infinite; } -.lock-body { - position: absolute; - bottom: 0; - left: 50%; - width: 3.5rem; - height: 3rem; - background: linear-gradient(180deg, #9ca3af 0%, #4b5563 100%); - border-radius: 0.35rem; - transform: translateX(-50%); - box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3); -} - -.lock-shackle { - position: absolute; - top: 0.25rem; - left: 50%; - width: 2.5rem; - height: 2.5rem; - border: 0.45rem solid #9ca3af; - border-bottom: none; - border-radius: 2rem 2rem 0 0; - transform: translateX(-50%); - transition: transform 0.6s ease-out, opacity 0.6s; -} - -.lock-shackle--open { - transform: translateX(-50%) rotate(-28deg) translateY(-0.35rem); - opacity: 0.85; +@keyframes opening-pulse { + 0%, + 100% { + opacity: 0.75; + } + 50% { + opacity: 1; + } } .video-screen { @@ -203,7 +319,7 @@ display: flex; align-items: center; justify-content: center; - background: #000; + background: #0f0d0a; z-index: 100; } diff --git a/src/DigitalLock.tsx b/src/DigitalLock.tsx index fea4e45..3b931c3 100644 --- a/src/DigitalLock.tsx +++ b/src/DigitalLock.tsx @@ -72,18 +72,22 @@ export function DigitalLock() { const duration = 2000; const end = Date.now() + duration; + const confettiColors = ['#e8c547', '#c9a227', '#f4e4bc', '#d4a84b']; + const frame = () => { confetti({ particleCount: 4, angle: 60, spread: 55, origin: { x: 0, y: 0.7 }, + colors: confettiColors, }); confetti({ particleCount: 4, angle: 120, spread: 55, origin: { x: 1, y: 0.7 }, + colors: confettiColors, }); if (Date.now() < end) { requestAnimationFrame(frame); @@ -98,62 +102,80 @@ export function DigitalLock() { return ; } + const isCelebrating = phase === 'celebrating'; + return ( -
-
-

Digital Lock

-

Enter the code from each colored puzzle

-
+
+
+ + + + -
- {LOCK_SLOTS.map((slot, index) => ( - - ))} -
+
+

Artifact Room Door

+

+ Enter each colored answer — help Ted leave the artifact room! +

+
- {showError && ( -

- Incorrect Code! -

- )} - - - - {phase === 'celebrating' && ( -