• Overview
• Live Demo
• Features
• Screenshots
• Tech Stack
• Getting Started
• Project Structure
• Modules
  • Dashboard
  • Calendar
  • Tasks
  • Learning
  • Habits
  • Goals
  • Notes & Journal
  • Finances
  • Languages
  • Pomodoro
  • Statistics
  • Settings
  • About Developer
• Data Storage
• Design System
• Mobile Support
• Developer

LifeOS is a personal productivity web application built entirely from scratch using vanilla HTML, CSS, and JavaScript — no frameworks, no backend, no database. Everything runs in the browser and persists via localStorage.

The goal was to build a single system that replaces multiple apps:

Open index.html in any modern browser — no installation, no server needed.

# Clone the repo
git clone https://github.com/badreddinemadad05/lifeos.git

# Open in browser
open index.html
# or just double-click the file

• ✅ 13 fully functional modules in a single page — no page reloads
• ✅ 100% offline — works without internet after first load
• ✅ localStorage persistence — data survives browser restarts
• ✅ Export / Import — backup all your data as JSON
• ✅ Dark & Light mode — with system-native color scheme
• ✅ Custom accent color — personalize the theme in Settings
• ✅ Real-time clock — auto-refreshes date at midnight
• ✅ Fully responsive — works on desktop, tablet, and mobile

• ✅ Daily score ring (tasks + habits completion percentage)
• ✅ Celebration animations with confetti when tasks are completed
• ✅ Tomorrow preview on dashboard
• ✅ Quick-add modal accessible from any page
• ✅ Pomodoro focus mode with full-screen overlay and particles

• ✅ Monthly income/expense tracking with navigation between months
• ✅ Budget progress bar with color-coded warnings
• ✅ Doughnut chart breakdown by category
• ✅ Net savings and savings rate calculation

• ✅ Language learning (Dutch & English) with 4 status levels
• ✅ Daily 10-phrase goal with progress tracking
• ✅ Streak counter
• ✅ Subject & lesson management with study time tracking

Below are the main pages of LifeOS.

Zero dependencies beyond Chart.js. No React, no Vue, no Node.js, no server.

• Any modern browser (Chrome, Firefox, Safari, Edge)
• No internet required after first load (Chart.js loads from CDN on first use)

# 1. Download or clone
git clone https://github.com/badreddinemadad05/lifeos.git

# 2. Navigate to folder
cd lifeos

# 3. Open index.html in your browser
#    Double-click the file OR:
open index.html        # macOS
start index.html       # Windows
xdg-open index.html    # Linux

That's it. No npm install, no build step, no server.

lifeos/
│
├── index.html          # Full app structure (all pages, modals, nav)
├── style.css           # Complete design system (~2600 lines)
│   ├── CSS custom properties (dark/light theme variables)
│   ├── Layout (sidebar, topbar, content)
│   ├── Components (cards, buttons, modals, forms)
│   ├── Module-specific styles (finances, languages, about...)
│   └── Responsive breakpoints (768px, 480px, 390px)
│
├── app.js              # All JavaScript logic (~3900 lines)
│   ├── DB         — localStorage abstraction layer
│   ├── Utils      — Date formatting, helpers
│   ├── Modal      — Modal manager
│   ├── Toast      — Notification system
│   ├── Celebration — Confetti + celebration cards
│   ├── DashModule — Dashboard
│   ├── CalModule  — Calendar
│   ├── TaskModule — Tasks
│   ├── LearnModule — Learning (subjects & lessons)
│   ├── HabitModule — Habits + logs
│   ├── GoalModule — Goals
│   ├── NotesModule — Notes & Journal
│   ├── FinanceModule — Finances
│   ├── LangModule — Languages
│   ├── PomodoroModule — Pomodoro timer
│   ├── StatsModule — Statistics
│   ├── SettingsModule — Settings
│   └── App — Main coordinator (navigation, init)
│
├── IMG-DEV.jpg         # Developer profile photo
├── IMG-LG.png          # Site logo
├── README.md           # This file
└── DOCUMENTATION.md    # Full technical documentation (French)

The homepage. Displays a complete daily overview in one glance.

Components:

• Daily Score Ring — SVG circular progress showing % of tasks + habits completed today. Animates with CSS stroke-dashoffset. Goes green (🏆) at 100%.
• Today's Schedule — All calendar events for today, sorted by time
• Today's Tasks — Pending tasks with quick-complete checkbox + quick-delete button. Hides completed tasks automatically. Shows tomorrow's tasks when all done.
• Today's Habits — Remaining habits to validate. Shows "all done 🌟" when complete.
• Quick Stats — 4 widgets: tasks done this week, habit rate today, study hours this week, active goals
• Goals Preview — Top 4 active goals with progress bars
• Daily Quote — Random motivational quote on each load

Celebration system: Completing a task or habit triggers a confetti animation with a personalized message ("Yaaay! Good work, [Name]! 🎉"). Completing everything triggers a grand celebration (90 confetti pieces, 3.8s, 🏆).

Full calendar with 3 views:

Events include: title, date, start/end time, color, location, category, notes.

Day view positions events using absolute CSS:

• top = (start_minutes - startHour*60) px
• height = duration_in_minutes px

A red line marks the current time and updates every 60 seconds.

Full task management system.

Task fields: title, priority (high/medium/low), status (todo/in-progress/done), deadline, time, category.

Features:

• Filter by status and priority
• Sort by priority then time
• Quick-toggle from dashboard (marks done + triggers celebration)
• Quick-delete button (visible on hover / always visible on touch)
• completedAt field stored for historical statistics

Study management organized into subjects → lessons.

Subjects: name, color, level (beginner / intermediate / advanced / expert)

Lessons: title, duration, date, status (todo / in-progress / done), notes, linked to a subject

Progress bar shows lessons completed per subject. Deleting a subject removes all its lessons automatically.

Daily habit tracking with streak counting.

Habit logs are stored as:

{ "2026-03-16": { "habit_id": true } }

A streak is computed by walking backwards from today, counting consecutive days the habit was done.

The weekly grid shows the last 7 days as a visual pattern for each habit.

Completing a habit from the dashboard triggers a celebration and celebration if all habits are done.

Long-term goal tracking with visual progress bars.

Goal fields: title, description, category, start date, target date, priority, progress (0–100%), status.

• Progress updated via a slider
• Days remaining warning (red when < 7 days)
• Mark as completed → moves to completed list

Two-tab module:

Notes tab

• Two-panel layout: list (left) + editor (right)
• Pinned notes (📌) always appear first
• Auto-sort: pinned → most recently modified
• Fields: title + free-text content

Journal tab

• One entry per day (indexed by YYYY-MM-DD)
• Fields: free text + mood emoji (😊 😐 😔 😤 😴)
• Displays all past entries below the editor

Monthly income and expense tracker.

Navigation: ← / → buttons change currentMonth (format YYYY-MM). Uses local date methods (not toISOString()) to avoid UTC timezone offset bugs.

Expense categories:

Income categories: Job étudiant 💼, Autre revenu 💰

Calculations:

• Net savings = Income − Expenses
• Savings rate = (Savings / Income) × 100
• Budget bar: green < 80%, orange 80–100%, red > 100%

Chart: Chart.js doughnut (cutout: 65%) showing expense breakdown. Destroyed and recreated on each render to avoid Canvas conflicts.

Phrase-based language learning module.

Supported languages: 🇧🇪 Dutch · 🇬🇧 English

Phrase status levels:

Daily goal: 10 phrases. A dot-progress bar shows the 10 most recent phrases with color-coded status dots.

Streak: Counts consecutive days where at least one phrase was added or updated.

Filters: Today / To review / All / Learned + full-text search.

Focus timer implementing the Pomodoro Technique.

Configurable settings:

• Work session duration (5–120 min, default 25)
• Short break (1–30 min, default 5)
• Long break (5–60 min, default 15)
• Sessions before long break (2–8, default 4)

Focus Mode (full-screen overlay):

• SVG ring timer with animated gradient (purple = work, green = break)
• Floating particle animations in background
• Random motivational messages that change each phase
• Browser tab title updates: "⏱ 24:45 | Work — LifeOS"
• Can be linked to a subject or a task for contextual tracking

Historical data analysis across 3 time periods: Week / Month / Year.

Charts (Chart.js):

• Bar chart: tasks per day
• Bar chart: habits per day
• Line chart: productivity rate over time

Daily History: Reconstructs past days from completedAt fields on tasks and habitLogs — no extra storage needed. Shows the last 14 days with score, tasks done, and habits validated.

Options:

• User name and avatar initial
• Dark / Light theme toggle
• Primary color picker (applied instantly via CSS custom properties)
• Calendar start/end hours

Data Management:

• Export: Downloads lifeos-backup-YYYY-MM-DD.json containing all data
• Import: Restores all data from a JSON backup file

A personal portfolio page embedded within the app. Displays:

• Profile photo with animated gradient ring
• Name, title, location, availability status
• Social links (Email, LinkedIn, GitHub, GitLab)
• Education (BSc Computer Science, University of Namur)
• Technical skills with color-coded badges (Python, Java, C, Rust, HTML, CSS, JS...)
• 5 featured projects with tags
• Work experience
• Language proficiency bars (Arabic, French, English, Dutch)

All data is stored in localStorage with the prefix lifeos_.

ID generation:

Date.now().toString(36) + Math.random().toString(36).slice(2, 7)
// Example: "lzr8k4a2m" — unique, compact, timestamp-based

Data safety: All user-input text is escaped via Utils.escHtml() before rendering in the DOM, preventing XSS injection.

Controlled by data-theme attribute on <html>:

• Default → dark mode (color-scheme: dark)
• data-theme="light" → light mode (color-scheme: light)

:root {
  --primary: #6366f1;        /* Indigo accent */
  --bg: #020817;             /* Page background */
  --bg-card: rgba(255,255,255,0.04); /* Card background */
  --text-primary: #f1f5f9;   /* Main text */
  --text-secondary: #94a3b8; /* Secondary text */
  --radius: 12px;            /* Border radius */
  --transition: all 0.22s ease;
}

• Glassmorphism: backdrop-filter: blur(24px) + semi-transparent backgrounds
• 3D Tilt: Cards tilt on mouse move via perspective(800px) rotateY() rotateX() — disabled on touch devices
• Ambient Background: CSS radial gradients + noise texture overlay
• Animated ring (About page): CSS @keyframes spinning gradient border

LifeOS is fully optimized for mobile use:

• Bottom navigation bar with 6 key pages + "More" button (opens sidebar)
• Sidebar slides in as overlay when "More" or hamburger is tapped
• Modals slide up from the bottom instead of appearing centered
• safe-area-inset support for iPhones with Dynamic Island / notch
• font-size: 16px on all inputs → prevents iOS Safari auto-zoom
• 100dvh height → correct sizing with dynamic browser bar
• Touch targets minimum 44×44px (Apple/Google standard)
• -webkit-overflow-scrolling: touch for smooth scrolling on iOS
• Horizontal scroll on calendar week view (wrapped in overflow container)
• 3D tilt effects disabled on touch devices (no hover = no glitches)

This project is a personal project built for learning and productivity purposes. Feel free to explore the code and use it as inspiration for your own projects.