From 4a7348c5d51d9b97d7800dc58d82f5d500baa312 Mon Sep 17 00:00:00 2001 From: WangDL Date: Tue, 19 May 2026 09:37:36 +0800 Subject: [PATCH] fix: Phase 1-3 UI/UX audit fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Phase 1 — Accessibility: - z-index system: BaseLayout z-[9999]→z-50, Header→z-30, floating cards→z-20 - prefers-reduced-motion: disable all animations/transitions when user prefers - Focus-visible: global ring indicator on all interactive elements - Text contrast: slate-500→600, slate-400→500, slate-300→400 across all pages Footer ICP备案, Header nav links, index/product/philosophy sections Phase 2 — Interaction: - Waitlist form: loading spinner state, API submission, error handling, debounce - Scroll progress: requestAnimationFrame throttle - Footer: inline onmouseover→CSS :hover - Removed unused WaitlistForm.astro (dead code, styles duplicated in waitlist.astro) Phase 3 — Visual polish: - Glass-card: opacity 0.6→0.8 for better text contrast - Animations: reduced 4 infinite float to 2, changed 2 to hover-only - Danmaku: hidden on mobile (hidden md:block) - product.astro: removed 2 extra tags, fixed HTML structure - product.astro: added width/height to images - philosophy.astro: added width/height to images - CTA.astro: unified with btn-primary-gradient style system Co-Authored-By: Claude Opus 4.7 --- src/components/CTA.astro | 34 ++-- src/components/Footer.astro | 29 +++- src/components/Header.astro | 6 +- src/components/WaitlistForm.astro | 254 ------------------------------ src/layouts/BaseLayout.astro | 11 +- src/pages/index.astro | 66 ++++---- src/pages/philosophy.astro | 4 +- src/pages/product.astro | 15 +- src/pages/waitlist.astro | 73 ++++++++- src/styles/global.css | 29 +++- 10 files changed, 194 insertions(+), 327 deletions(-) delete mode 100644 src/components/WaitlistForm.astro diff --git a/src/components/CTA.astro b/src/components/CTA.astro index 247c87a..d9427b3 100644 --- a/src/components/CTA.astro +++ b/src/components/CTA.astro @@ -21,40 +21,48 @@ const { title, description, href, variant = 'primary' } = Astro.props; .button { display: inline-block; - padding: 0.75rem 1.5rem; - font-size: 1rem; - font-weight: 500; + padding: 0.75rem 2rem; + font-size: 0.875rem; + font-weight: 600; text-decoration: none; - border-radius: 8px; - transition: all 0.2s ease; + border-radius: 9999px; + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); + font-family: var(--font-family-inter); + letter-spacing: 0.03em; } .button.primary { - background: var(--color-accent); + background: linear-gradient(135deg, #4F7CFF 0%, #7861FF 100%); color: #ffffff; border: none; + box-shadow: 0 8px 24px rgba(21, 80, 211, 0.2); } .button.primary:hover { - background: var(--color-accent-hover); + transform: translateY(-2px); + box-shadow: 0 12px 24px rgba(79, 124, 255, 0.3); + filter: brightness(1.1); text-decoration: none; } .button.secondary { - background: transparent; - color: var(--color-accent); - border: 1px solid var(--color-accent); + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(12px); + color: #131b2c; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 12px rgba(18, 26, 43, 0.06); } .button.secondary:hover { - background: var(--color-accent); - color: #ffffff; + background: #ffffff; + transform: translateY(-1px); + box-shadow: 0 12px 24px rgba(18, 26, 43, 0.08); text-decoration: none; } .description { margin-top: 0.75rem; font-size: 0.875rem; - color: var(--color-text-secondary); + color: var(--color-on-surface-variant); } \ No newline at end of file diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 9cd365e..bb59db6 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -14,24 +14,39 @@ const footerLinks = [ 知习 知习 - -
+ +
{footerLinks.map(link => ( - {link.label} + {link.label} ))}
- -

+ +

© {currentYear} 知习 (ZhiXi AI). Structured learning for the digital age.

-

- 冀ICP备2026016484号 +

+ 冀ICP备2026016484号

\ No newline at end of file diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index bb2c116..c04ea5e 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -41,18 +41,25 @@ const ogImageUrl = ogImage || `${siteUrl}/og-default.png`; -
+
diff --git a/src/styles/global.css b/src/styles/global.css index 72bf7f0..a17b2e6 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,5 +1,12 @@ @import "tailwindcss"; +/* Z-index scale: z-10 content → z-20 float → z-30 header → z-40 overlay → z-50 progress/toast */ +@custom-variant prefers-reduced-motion { + @media (prefers-reduced-motion: reduce) { + @slot; + } +} + @theme { --color-tech-blue: #4F7CFF; --color-navy: #121A2B; @@ -122,7 +129,7 @@ @layer components { .glass-card-premium { - background: rgba(255, 255, 255, 0.6); + background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.8); @@ -194,6 +201,26 @@ } } +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +a:focus-visible, +button:focus-visible, +input:focus-visible, +select:focus-visible, +textarea:focus-visible, +[tabindex]:focus-visible, +.animate-reveal-up:focus-visible { + outline: 2px solid var(--color-tech-blue); + outline-offset: 2px; + border-radius: 4px; +} + body { font-family: var(--font-family-headline); -webkit-font-smoothing: antialiased;