From 5ed8680164daeb0789abfab6273aa2deaa5f49c0 Mon Sep 17 00:00:00 2001 From: Echo Date: Tue, 10 Feb 2026 16:54:09 +0000 Subject: [PATCH] feat: US-010 - Frontend - Check-in interaction (click and long-press) --- dashboard/habits.html | 348 +++++++++++++++++++++++- dashboard/tests/test_habits_frontend.py | 262 +++++++++++++++++- 2 files changed, 605 insertions(+), 5 deletions(-) diff --git a/dashboard/habits.html b/dashboard/habits.html index aec0859..8b41432 100644 --- a/dashboard/habits.html +++ b/dashboard/habits.html @@ -522,6 +522,74 @@ .toast.error svg { color: var(--error); } + + /* Pulse animation */ + @keyframes pulse { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } + } + + .pulse { + animation: pulse 0.5s ease-in-out; + } + + /* Check-in detail modal */ + .checkin-modal { + max-width: 400px; + } + + .rating-stars { + display: flex; + gap: var(--space-2); + justify-content: center; + margin: var(--space-3) 0; + } + + .rating-star { + font-size: 32px; + cursor: pointer; + transition: all var(--transition-base); + opacity: 0.3; + } + + .rating-star.active { + opacity: 1; + } + + .rating-star:hover { + transform: scale(1.2); + opacity: 0.8; + } + + .mood-buttons { + display: flex; + gap: var(--space-3); + justify-content: center; + margin: var(--space-3) 0; + } + + .mood-btn { + font-size: 32px; + cursor: pointer; + padding: var(--space-2); + border: 2px solid transparent; + border-radius: var(--radius-md); + transition: all var(--transition-base); + background: none; + } + + .mood-btn:hover { + transform: scale(1.1); + } + + .mood-btn.selected { + border-color: var(--accent); + background: var(--accent-muted); + } @@ -659,6 +727,53 @@ + + +