From 60aacbf65ab51b2bc17ca6eb9e909de04762fe21 Mon Sep 17 00:00:00 2001 From: hobokenchicken Date: Tue, 21 Jul 2026 16:12:53 -0400 Subject: [PATCH] Modern glow-up: glassmorphism, animated transitions, floating blobs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Font: Inter → Nunito (warm, rounded, friendly) - Glassmorphism: frosted-glass on all cards (question, dim, resource, audience, overall) - Floating gradient blobs: 4 animated pastel blobs in background (CSS-only) - Direction-aware question slides: left/right based on prev/next - Staggered reveal: dim cards, resource cards, audience cards animate in sequence - Completion badge pop-in, progress bar shimmer, wheel float animation - Button polish: lift + glow on hover, smooth cubic-bezier transitions - Option hover: slide right + tint, CTA active press-down - Results wheel: drop-shadow glow on hover - Print-safe: glass removed, blobs hidden in print - Mobile: reduced blur/opacity for perf, blob 4 hidden --- site/index.html | 140 ++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 136 insertions(+), 4 deletions(-) diff --git a/site/index.html b/site/index.html index 1019a65..39c223f 100644 --- a/site/index.html +++ b/site/index.html @@ -6,11 +6,11 @@ Wheel of Wellness Assessment - + + +
♿
@@ -549,6 +675,7 @@ const RESOURCES = { let selectedAudience = null; let currentQ = 0; +let lastQ = -1; // ponytail: track direction for slide animation let answers = {}; let lastResults = null; @@ -703,6 +830,7 @@ function showScreen(name) { function startAssessment() { if (!selectedAudience) return; currentQ = 0; + lastQ = -1; answers = {}; showScreen('questions'); renderQuestion(); @@ -714,6 +842,7 @@ function resumeAssessment() { if (!saved) return; selectedAudience = saved.audience; currentQ = saved.currentQ; + lastQ = -1; answers = saved.answers || {}; document.getElementById('btn-start').disabled = false; showScreen('questions'); @@ -753,7 +882,9 @@ function renderQuestion() { return `
${emoji}${s}
`; }).join(''); - area.innerHTML = `
${dim.label}
${item.id}
${item.text}
${optionsHtml}
`; + const slideClass = lastQ < 0 ? '' : (currentQ > lastQ ? ' slide-left' : ' slide-right'); + area.innerHTML = `
${dim.label}
${item.id}
${item.text}
${optionsHtml}
`; + lastQ = currentQ; document.getElementById('btn-prev').style.visibility = currentQ === 0 ? 'hidden' : 'visible'; const nextBtn = document.getElementById('btn-next'); @@ -988,6 +1119,7 @@ function shareResults() { function retake() { answers = {}; currentQ = 0; + lastQ = -1; selectedAudience = null; lastResults = null; clearProgress();