nate/homeschool
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Liven up parent and student login screens

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed 2026-08-04 16:42:20 -04:00
1 parent 538522cfe7
commit 8d6bcbe132
4 files changed
+75 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/styles.css
+57 -5
View File
@@ -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;