Feature Reference · v1.0.0 · 3bit.app/app/meditation/v1/
A mindfulness & meditation platform — daily schedule, AI-powered sessions, dual-mode player. Built on React 18 + TypeScript + Vite. Hybrid dark/light UI design.
Mental Healthy Life uses a distinctive mixed theme: a dark navy sidebar (#0D0D1E) and dark right panel on the outer columns, with a light main content area (#F0F4F8) and white widget cards in the centre. The teal accent (#2EC4B6) runs throughout as the primary action colour. Auth pages are fully light-themed.
| Token | Hex | Where Used |
|---|---|---|
| --app-night-deep | #0D0D1E | Sidebar, right panel, mobile player sheet |
| --app-night | #1A1A2E | App global background, auth page card surface |
| --app-key (Teal) | #2EC4B6 | Active nav, play buttons, progress bars, date widget, category accent |
| --app-key-dark | #1A9E97 | Hover states, darker teal emphasis |
| --dash-bg | #F0F4F8 | Dashboard main area background, auth page background |
| --dash-card | #FFFFFF | All widget cards, schedule cards, recent session cards |
| AI gradient | #2D2560 → #1A1A2E | AI Helper panel background |
| AI border-top | #6A5ACD | AI Helper section divider line (2px top border) |
| ai-light | #C4B5FD | AI Helper text, chips, icons, topbar AI button |
Auth pages use a light theme — #F0F4F8 background with a centred white card (max-width 390px). The card header always shows the real app logo SVG (meditation_logo_dark.svg) + "Mental Healthy Life" text. Inputs are white with dark text. The teal button is the primary action.
/password-change also available to authenticated users from Profile page.localStorage via authStorage. Axios interceptor adds Authorization: Bearer. Auto-refresh on 401. ProtectedRoute redirects to /login. PublicRoute redirects authenticated users to /dashboard.The dashboard (/dashboard or /home) is a three-column resizable layout. Left: dark sidebar (#0D0D1E) with navigation. Centre: light main area (#F0F4F8) with white widget cards. Right: dark panel (#0D0D1E) with the media player on top and AI Helper below. On mobile (<900px) the sidebar becomes a drawer and the right panel is hidden — player opens as a bottom sheet.
#F7F9FC bg. Active: teal accent (rgba(46,196,182,.08)). Clicking "All" navigates to /categories. Clicking a specific category opens Category Detail inline or loads category content.0 2px 8px rgba(46,196,182,.06). Border: #E6F9F8. Last 6 played items from UserContent API.rgba(46,196,182,.10)). Refresh, Bell, AI (sparkles), Profile buttons.4px wide, teal on hover/active. Sizes persisted to localStorage.The Schedule page (/schedule) lets users configure each of the three daily practice slots. The page uses the same hybrid layout (dark sidebar, light main content). Each slot has a 24-hour time picker (custom HH:MM select) and a media tag selector — a searchable dropdown of all content categories.
| Slot | Period | Default Time | API |
|---|---|---|---|
| Morning | MORNING | 08:00 | Schedule configuration saved and content resolved automatically |
| Afternoon | AFTERNOON | 12:00 | |
| Evening | EVENING | 21:00 |
Categories page shows the full content library. Clicking a category in the dashboard widget or navigating to /categories shows all categories. Clicking a category opens a Category Detail view inside the dashboard with: hero image (120×90px), thumbnail icon, name, description, tags as teal chips, and a scrollable content grid.
| Content Status | Code | Playable |
|---|---|---|
| Free | 0 or 1 | Yes — all registered users |
| Premium / Subscription | 2 | Requires active plan |
| Unavailable | -1 | Temporarily disabled |
| Draft | -10 | Not published, hidden from users |
contentCategoryTranslations array — displayed in the user's selected app language. Tags are stored as a comma-separated string and split into chips.The player lives in the top portion of the right panel on desktop (dark #0D0D1E background, resizable height 120–420px). On mobile (<900px) it opens as a bottom sheet with drag-up to fullscreen. Two visual modes: Default (standard media player) and Relax (full-frame media with dark gradient overlay and centred play button).
position:fixed; inset:0; background:#0d1117).rgba(46,196,182,.82) + blur). Progress/countdown text. Info overlay at bottom. Mode toggled in Settings, persisted as playerType in localStorage.#0D0D1E) bottom sheet with border-radius: 18px 18px 0 0. Default height 55% of viewport. Drag up → fullscreen (100dvh). Drag down past threshold → dismiss. White handle bar (44px wide, opacity .18). Auto-opens when track loads on mobile. Auto-closes when viewport >900px.minibarShow in localStorage (Settings toggle). Shows title + play/pause toggle + expand button.contentVideoLink), Background Music (contentMusicLink), Guided Voice (contentVoiceLink). All URLs are cache-busted with ?v=lastUpdated to force refresh after content updates.The AI Helper occupies the bottom portion of the right panel on desktop — below the player, separated by a horizontal resize handle. Background: linear-gradient(160deg, #2D2560 0%, #1A1A2E 100%). Top border: 2px solid #6A5ACD. On mobile, accessible via the Sparkles button in the top bar, which opens a full-screen bottom sheet (ModalAIHelper).
| Parameter | Options | API Endpoint |
|---|---|---|
| Current Mood | Anxious · Sad · Angry · Tired · Numb · Good | |
| Duration | 5 min · 10 min · 15 min · 20 min | |
| Style | Guided Voice · Nature Sounds · Binaural | |
| Free prompt | Text input — "I feel stressed about work…" |
rgba(196,181,253,.15) background). AI text colour is #C4B5FD throughout. Active chip: rgba(46,196,182,.2) teal. The Send button (#C4B5FD circle) submits the request.The Settings page (/settings) uses the same hybrid layout. The content area is light (#F0F4F8) with white section cards. All settings persist to localStorage and are applied immediately without restart.
| Setting | Options | localStorage Key |
|---|---|---|
| Language | English · Украинский-Русский · Українська · Deutsch · Italiano | i18next store |
| Player Mode | default · relax | playerType |
| Mini-Bar | true · false | minibarShow |
| Demo Data | true · false | demoData |
| Sidebar Width | 140–320 px (drag handle) | db_sidebarWidth |
| Right Panel Width | 160–380 px (drag handle) | db_rightPanelWidth |
| Player Height | 120–420 px (drag handle) | db_playerHeight |
demoData key in localStorage.The platform integrates cutting-edge therapeutic methodologies drawn from three traditions: the contemplative wisdom of Tibetan Buddhism and Eastern philosophy, the somatic and mindfulness-based approaches of modern Western psychology, and the structured frameworks of European and American psychoanalysis. This fusion ensures every session is grounded in both ancient inner science and evidence-based clinical practice.
Vipassana, Tibetan Dzogchen, Zen breath, yogic pranayama. Cultivates present-moment awareness, compassion (Metta), dissolution of habitual thought patterns.
MBSR, MBCT, somatic body-scan, trauma-informed breathing, progressive muscle relaxation. All clinically validated in peer-reviewed research.
Jungian depth psychology, IFS, ACT, DBT skills. Emotional regulation, cognitive defusion, depth-psychological integration.
@components, @pages, @utils, @contexts, @hooks.ProtectedRoute + PublicRoute guards.track, isPlaying, togglePlay, setTrack.firebase.json rewrite rules. Build output in public/.authStorage localStorage. Axios interceptor. Auto-refresh on 401 via refreshToken.withCacheBust — appends ?v=timestamp to force reload after content updates.pickTranslated — resolves content names in user's language from mediaContentTranslations.Login / Register / Google / Apple
Set 3 time slots + media tags
Schedule cards, categories, recent
Default or Relax player mode
Categories → content list
Mood + style → recommend or generate
Language · Player mode · Schedule
| Route | Guard | Description |
|---|---|---|
/login | Public | Email/password, Google, Apple, passcode link, forgot password link |
/register | Public | Create account → /register-complete |
/login-passcode | Public | Passwordless one-time code login |
/password-forgot | Public | Request reset link |
/password-reset | Public | Set new password via reset token |
/dashboard | /home | Protected | Main screen — 3-column layout with schedule, categories, player, AI |
/schedule | Protected | Configure Morning/Afternoon/Evening time + tag per slot |
/categories | Protected | Full content library by category |
/profile | Protected | User profile — username, email, avatar |
/password-change | Protected | Change password (authenticated users) |
/settings | Protected | Language, player mode, mini-bar, demo data |
/account-delete | Protected | Permanent account deletion with confirmation |