Testsoria — Design Extracts
26 self-contained HTML snapshots · upload to Claude design for feedback
Each file in this directory is a static, self-contained HTML page that uses the new warm-modern clinical
design tokens. Open them directly via file://
or upload to claude.ai for design feedback. All visible content is dummy data — fake users, fake medical questions, fake databases.
Warm-modern clinical
Inter + Source Serif 4
Light + Dark mode
Tokens → Tailwind 4 ready
Polish-first UI
📐 Shell & reference
Chrome reference
🚪 Public / Start
Pre-auth & entry
01 · #start-view
Start
Welcome hero, challenge cards, personal progress, mini ranking, donate.
02 · #faq-view
FAQ
Polish FAQ accordion grouped by category.
03 · #kontakt-view
Kontakt
Contact form, Telegram/Discord links, email, status page.
04 · #premium-view
Premium
Pricing tiers — Free, Plus, Pro — with feature comparison.
📚 Core study
Learning workflow
05 · #training-view
Tryb uczenia (setup)
Mode picker, DB select, tag filters, question count, start button.
06 · #session-view
Sesja nauki
Question stem (serif), 5 answers A–E with kbd hints, progress, explanation spoiler, comments.
07 · #database-view
Baza pytań
Question browser with filters, search, pagination.
08 · #encyclopedia-view
Encyklopedia
3-pane: article list, reading pane (serif), table of contents.
💬 Community
Social surfaces
09 · #forum-view
Forum
Threads list with categories, pinned/hot states, role badges, online users.
10 · #messages-view
Wiadomości
Two-pane inbox with conversation list and active thread.
11 · #chat-view
Czat AI
AI chat with rich responses, model selector, conversation history.
15 · #ranking-view
Ranking
Podium top 3 + full list with current-user highlight.
👤 Account
Profile, stats, settings
12 · #options-view
Ustawienia
Theme, density, session prefs, keyboard shortcuts, danger zone.
13 · #profile-view
Profil
Own profile with stats, sessions, achievements, subscription.
14 · #user-profile-view
Profil publiczny
Other user's public profile — message, follow, public stats only.
17 · #statistics-view
Statystyki
Activity chart, specialty heatmap, time-of-day, streak calendar.
🛡 Admin & creator
Moderation & content tools
16 · #control-panel-view
Panel kontrolny
Admin KPIs, user management table, system alert composer.
18 · #add-question-view
Dodaj pytanie
4-step wizard: stem (rich editor), 5 answers, explanation, metadata.
19 · #edit-question-view
Edytuj pytanie
Same form prefilled + version history + diff highlighting.
🪟 Modals
Dialogs & overlays
M1 · #rich-editor-modal
Rich editor modal
Full-screen editor with toolbar, content, status bar.
M2 · #delete-profile-modal
Usuń konto
Destructive confirm with 3-step verification ritual.
M3 · #app-modal
Generic app modal
Info / confirm / error variants displayed side by side.
M4 · #image-lightbox-modal
Image lightbox
EKG viewer with caption, prev/next, zoom controls, thumbnails.
Mirroring legacy pages/index.html 19 view sections + 4 modals.
Tokens live in _shared.css — single source of truth for redesign.
Wszystkie dane prezentowane to zmyślone dane testowe. No real users, no real medical questions, no real LEK content.