feat(03-05): parent area HTML, CSS, and access gate

- Add parent screen HTML with code gate, stats overview, and settings form - Add parent area CSS styles for stats grid, calendar dots, error badges, settings - Create src/ui/parent.ts with showParentCodePrompt, initParentScreen, loadParentData
2026-03-29 13:46:10 +02:00
parent 2c0c2f2701
commit 44c28fe226
3 changed files with 475 additions and 1 deletions
@@ -441,6 +441,179 @@ h3 {
 	}
 }

+/* Parent Area */
+.parent {
+	max-width: 600px;
+	margin: 0 auto;
+	padding: 1.5rem;
+}
+
+.parent__back-btn {
+	background: none;
+	border: none;
+	font-family: var(--font-heading);
+	font-size: 1rem;
+	color: var(--text-warm);
+	cursor: pointer;
+	margin-bottom: 1rem;
+}
+
+.parent__title {
+	font-family: var(--font-heading);
+	color: var(--text-dark);
+	margin-bottom: 1.5rem;
+}
+
+.parent__gate {
+	text-align: center;
+	padding: 2rem;
+	font-family: var(--font-body);
+}
+
+.parent__code-input {
+	font-size: 2rem;
+	text-align: center;
+	width: 120px;
+	padding: 0.5rem;
+	border: 2px solid var(--accent-purple);
+	border-radius: 8px;
+	font-family: var(--font-heading);
+	letter-spacing: 0.5rem;
+	margin-top: 0.5rem;
+}
+
+.parent__gate-error {
+	color: var(--accent-pink);
+	margin-top: 0.5rem;
+	font-size: 0.9rem;
+}
+
+.parent__section {
+	margin-bottom: 2rem;
+}
+
+.parent__section h2 {
+	font-family: var(--font-heading);
+	color: var(--text-dark);
+	border-bottom: 2px solid var(--bg-forest);
+	padding-bottom: 0.5rem;
+	margin-bottom: 1rem;
+}
+
+.parent__stats {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 1rem;
+	margin-bottom: 1.5rem;
+}
+
+.parent__stat {
+	background: var(--bg-forest);
+	border-radius: 12px;
+	padding: 1rem;
+	text-align: center;
+}
+
+.parent__stat-label {
+	display: block;
+	font-family: var(--font-body);
+	font-size: 0.85rem;
+	color: var(--text-warm);
+	margin-bottom: 0.25rem;
+}
+
+.parent__stat-value {
+	display: block;
+	font-family: var(--font-heading);
+	font-size: 1.5rem;
+	font-weight: 700;
+	color: var(--text-dark);
+}
+
+.parent__calendar-dots {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+	margin-top: 0.5rem;
+}
+
+.parent__calendar-dot {
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+	background: var(--accent-green);
+}
+
+.parent__calendar-dot--empty {
+	background: var(--bg-cream);
+	border: 1px solid var(--text-light);
+}
+
+.parent__errors h3,
+.parent__calendar h3 {
+	font-family: var(--font-heading);
+	font-size: 1rem;
+	color: var(--text-warm);
+	margin-bottom: 0.5rem;
+}
+
+.parent__error-key {
+	display: inline-block;
+	background: var(--accent-pink);
+	color: white;
+	padding: 0.25rem 0.75rem;
+	border-radius: 8px;
+	margin: 0.25rem;
+	font-family: var(--font-heading);
+	font-size: 0.9rem;
+}
+
+.parent__settings {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.parent__setting {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.parent__setting label:first-child {
+	min-width: 120px;
+	font-family: var(--font-body);
+	color: var(--text-warm);
+}
+
+.parent__setting select,
+.parent__input {
+	font-family: var(--font-body);
+	padding: 0.5rem;
+	border: 1px solid var(--text-light);
+	border-radius: 8px;
+	font-size: 0.95rem;
+}
+
+.parent__save-btn {
+	font-family: var(--font-heading);
+	padding: 0.5rem 1rem;
+	background: var(--accent-green);
+	color: white;
+	border: none;
+	border-radius: 8px;
+	cursor: pointer;
+}
+
+.parent__saved-feedback {
+	color: var(--accent-green);
+	font-family: var(--font-body);
+	font-size: 0.85rem;
+	margin-left: 0.5rem;
+	opacity: 1;
+	transition: opacity 0.3s ease;
+}
+
 /* Keyboard */
 .keyboard {
 	display: flex;