From 8d6bcbe1327f6a66f25539d7560c91d9a2462e73 Mon Sep 17 00:00:00 2001 From: nmemmert <67961292+nmemmert@users.noreply.github.com> Date: Tue, 4 Aug 2026 16:42:20 -0400 Subject: [PATCH] Liven up parent and student login screens Parent: floating card with box-shadow over a soft multi-radial gradient background; decorative emoji header above PIN form. Student: each kid card gets a colored top border matching their saved theme; subtle floating emoji (stars, books, pencil, rainbow) drift in the background. Co-Authored-By: Claude Sonnet 4.6 --- public/admin.html | 1 + public/app.js | 9 ++++--- public/index.html | 12 +++++++++ public/styles.css | 62 +++++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 75 insertions(+), 9 deletions(-) diff --git a/public/admin.html b/public/admin.html index ddbb877..a0ef43b 100644 --- a/public/admin.html +++ b/public/admin.html @@ -9,6 +9,7 @@
+

👩‍🏫 Parent Dashboard

diff --git a/public/app.js b/public/app.js index eb17b03..13006e6 100644 --- a/public/app.js +++ b/public/app.js @@ -246,10 +246,11 @@ async function loadHome() { const students = await api('/api/students'); $('#no-kids').hidden = students.length > 0; $('#kid-cards').innerHTML = students - .map( - (s, i) => `` - ) + .map((s, i) => { + const accent = (THEMES[s.theme || 'blue'] || {})['--accent'] || DEFAULT_VARS['--accent']; + return ``; + }) .join(''); document.querySelectorAll('.kid-card').forEach((card) => card.addEventListener('click', () => openKid(Number(card.dataset.id), 'today', true)) diff --git a/public/index.html b/public/index.html index e5f7553..f9fbf1f 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,18 @@ + + +

🎓 Homeschool

diff --git a/public/styles.css b/public/styles.css index 6950b47..3d9d99d 100644 --- a/public/styles.css +++ b/public/styles.css @@ -54,7 +54,56 @@ body { .hint { color: var(--muted); margin: 1rem 0; } .error { color: var(--bad); margin: 0.5rem 0; } +/* ---------- parent lock screen ---------- */ +body:has(#console[hidden]) { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: + radial-gradient(ellipse at 20% 75%, rgba(79,134,247,0.13) 0%, transparent 55%), + radial-gradient(ellipse at 80% 25%, rgba(246,185,59,0.11) 0%, transparent 55%), + radial-gradient(ellipse at 55% 90%, rgba(46,158,91,0.08) 0%, transparent 45%), + var(--bg); +} +body:has(#console[hidden])::before { + content: ''; + position: fixed; inset: 0; pointer-events: none; + background: + radial-gradient(circle 180px at 10% 15%, rgba(79,134,247,0.09) 0%, transparent 100%), + radial-gradient(circle 140px at 90% 85%, rgba(246,185,59,0.1) 0%, transparent 100%); +} + +#pin-gate { + background: var(--card); + border-radius: 28px; + padding: 2.5rem 2.5rem 2rem; + box-shadow: 0 8px 48px rgba(45,49,66,0.14), 0 1px 0 rgba(45,49,66,0.06); + max-width: 360px; + width: calc(100% - 2.5rem); + margin: 0; + position: relative; +} + +.pin-deco { + font-size: 2rem; + letter-spacing: 0.5rem; + margin-bottom: 1rem; +} + /* ---------- kid picker ---------- */ +@keyframes confetti-float { + 0%, 100% { transform: translateY(0px) rotate(-4deg); opacity: 0.28; } + 50% { transform: translateY(-20px) rotate(6deg); opacity: 0.52; } +} +.page-confetti { + position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; +} +.page-confetti span { + position: absolute; font-size: 1.8rem; user-select: none; + animation: confetti-float ease-in-out infinite; +} + @keyframes card-enter { from { opacity: 0; transform: translateY(26px) scale(0.93); } to { opacity: 1; transform: translateY(0) scale(1); } @@ -70,28 +119,31 @@ body { .kid-cards { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 2.5rem; + position: relative; z-index: 1; } .kid-card { background: var(--card); border: 3px solid transparent; + border-top: 5px solid var(--kid-accent, var(--accent)); border-radius: var(--radius); padding: 1.5rem 2rem; font-size: 1.2rem; font-weight: 700; cursor: pointer; - box-shadow: 0 4px 12px rgba(45, 49, 66, 0.08); - transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; + box-shadow: 0 4px 16px rgba(45, 49, 66, 0.1); + transition: transform 0.18s ease, box-shadow 0.2s ease; min-width: 140px; animation: card-enter 0.42s ease backwards; } .kid-card:hover { - transform: translateY(-7px) scale(1.07); - border-color: var(--accent); - box-shadow: 0 12px 30px rgba(45, 49, 66, 0.18); + transform: translateY(-8px) scale(1.07); + box-shadow: 0 14px 36px color-mix(in srgb, var(--kid-accent, var(--accent)) 28%, rgba(45,49,66,0.15)); } .kid-card:hover .avatar { animation: emoji-wobble 0.48s ease; } .kid-card .avatar { display: block; font-size: 3rem; margin-bottom: 0.5rem; } +.app-title, .subtitle { position: relative; z-index: 1; } + /* ---------- kid home ---------- */ .back-btn { display: inline-block;