Ctrl+K
## Project Overview Design and build a premium web & mobile (PWA) front-end for a medical-chatbot platform that justifies a $10 000 price tag through sophisticated user experience, meticulous visual polish and bullet-proof engineering. The product revolves around a scannable Medical Card and must feel exclusive yet friction-less. ## Core User Flows **Registration** - Step-by-step wizard (max 3 screens) collects name, DOB, gender, allergies, chronic conditions, emergency contact and optional avatar. - On submit, a server-side endpoint returns a unique patient UUID and a signed JSON Web Token (JWT). - Front-end renders an animated “Medical Card” – a glossy 3-D card with embedded QR code (SVG + PNG fallback). - Card can be downloaded to Apple/Google Wallet or printed. **Authentication** - Scan-to-Sign-In - Uses WebRTC getUserMedia to open the camera, auto-detects QR, exchanges code for refreshed JWT. - Classic Sign-In - Email / username + password, both sent over HTTPS with HSTS and CSP headers. - Fast Switcher - Horizontal carousel shows avatars of previously signed-in profiles (localStorage). - Tap avatar → enter 4-digit PIN → instant login. - Guest Mode - “Browse as Guest” button skips auth, surfaces a watermark “GUEST – chats not saved”. **Consultation / Chat** - Two-pane split-screen layout: left = conversation, right = context panel (vitals, card, quick actions) [1]. - Messages stream in with typewriter animation and subtle haptic pulse on mobile [2]. - All chats autosave (IndexedDB offline cache + REST sync) except in Guest mode. - Each consultation is versioned so users can revisit timelines. ## Information Architecture | Section | Purpose | |---------|---------| | Top App Bar | Tiny patient card thumbnail, name, age; tap → full profile modal | | Conversation Pane | Rich Markdown, image/file attachments, voice notes | | Context Pane | Quick vitals input, previous prescriptions, “End Session” | | Settings Drawer | Theme toggle, language, manage PIN profiles | | Footer | “Made by Me” signature with micro-animation of signature stroke | ## Visual & Motion Design **Color Palette (AMOLED-only)** - #000000 Black (primary background) - #FFFFFF White (primary text) - #FF3B30 Red (error / destructive) - #D4AF37 Golden (premium accents, buttons) - #00C853 Green (success, online status) - #0A84FF Blue (interactive elements, links) Gradients: use 4-stop radial blends (Black→Blue→Green→Golden) at 10% opacity overlays for depth [2]. **Typography** - Heading: Inter Display, 700 - Body: Inter, 400 - Numeric (PIN, vitals): JetBrains Mono **Components** - Glass-morphism cards with 8 px blur, 1 px golden inner stroke. - Floating Action Button (FAB) with ripple in blue → green. - Lottie animations for card issuance, QR scan success, and “Made by Me” signature. **Motion** - 250 ms cubic-bezier(0.4, 0, 0.2, 1) for UI transitions. - Parallax tilt on Medical Card hover (DeviceOrientation API desktop / mobile). - Scroll-triggered fade-in of chat bubbles. ## Technical Stack - React 18 + TypeScript - Vite build pipeline, TailwindCSS (custom AMOLED palette) - Zustand for client state, React Query for API calls - WebAuthn (optional) for biometric PIN unlock - PWA: Service Worker for offline chat, Add-to-Home-Screen - ESLint + Prettier + Stylelint enforced CI - Lighthouse score ≥ 95 on Performance, Accessibility, Best-Practices, SEO ## Accessibility & Compliance - WCAG 2.2 AA: 4.5:1 contrast (white text on black, golden accents large-text only). - ARIA labels for camera & chat controls. - Reduced-motion media query disables animations. - HIPAA-conscious: all PHI confined to secure API calls, no PHI in localStorage. ## Security Notes - QR contains only opaque UUID; token exchanged server-side. - JWT 15 min expiry, rotating refresh token in HttpOnly cookie. - Content Security Policy blocks inline scripts. - PIN hashes (bcrypt) stored in IndexedDB, never sent off-device. ## Deliverables for the $10 000 Package - Figma design system (components, light & AMOLED dark themes) - Full-stack front-end repo with CI/CD GitHub Actions → Vercel preview - Unit + integration tests (Jest, Testing Library, Cypress e2e) - Lighthouse, Axe, and Playwright accessibility reports - Documentation site (Storybook) explaining components, theming, API mocks - 2 hrs onboarding workshop video call for hand-off This specification leverages your expertise in medical chatbots [3], your preference for colorful gradients and animations [2], centered card / split-screen layouts [1], and your premium high-end style [4]. [1] preferences.interface_layout [2] preferences.interface_design [3] programming.chatbots [4] projects.premium_website - Initial Deployment
eefb915
verified