glass.css - Phase 3 Ergänzungen: Nav Auto-Hide (Section 18): - .nav-bottom: will-change: transform + transition für smooth slide - .nav-bottom--hidden: translateY(100% + safe-area) + pointer-events: none Modal Spring-Entrance (Section 19): - Desktop: glass-modal-scale-in mit --ease-glass (spring overshoot) 0.32s, scale(0.90) → scale(1) + translateY(8px) → 0 - Mobile: glass-sheet-in, sanfterer Slide (40% statt 100%) + opacity ramp - Beide Animationen ersetzen die linearen layout.css-Varianten Seitentransitionen (Section 20): - In-Animationen: 0.30s mit --ease-glass statt 0.20s ease - Out-Animationen: 0.14s mit --ease-out (schnell raus, langsam rein) List-Stagger (Section 21): - 0.28s + --ease-glass für physikalisch plausibleren Erscheinungseffekt Focus-Ring (Section 22): - transition auf outline-offset + box-shadow für sanften Focus-Pop Skeleton Shimmer (Section 23): - 105° Gradient mit glass-highlight-Tint statt flat-grey - Hellerer Mittelpunkt simuliert Lichtreflexion FAB Attention Pulse (Section 24): - Einmaliger Ring-Expand 0.6s nach Erscheinen (fab-ring-pulse) - Kombinierte animation-Deklaration mit fab-in Accessibility (Section 25): - prefers-reduced-motion deaktiviert alle Phase-3-Animationen router.js: - initNavHideOnScroll(): scroll-Listener auf #main-content versteckt .nav-bottom beim Runterscrollen (+ 4px Hysterese) zeigt wieder beim Hochscrollen (- 4px) oder bei < 10px nur aktiv bei < 1024px (Mobile/Tablet, kein Desktop) - wird in renderAppShell() nach initBottomNavSwipe() aufgerufen
Oikos
Self-hosted family planner for small households
Tasks · Shopping Lists · Meal Planning · Calendar Sync · Budget · Notes · Contacts
|
|
|
Toggle GitHub light/dark mode to see both themes.
Highlights
Task Management: Shared tasks with deadlines, priorities, subtasks, recurring schedules, Kanban view with one-tap status buttons for touch devices
Shopping Lists: Collaborative lists with aisle categories and one-click import from meal plans
Meal Planning: Weekly drag-and-drop planner with ingredient lists and shopping export
Calendar Sync: Two-way sync with Google Calendar (OAuth) and Apple iCloud (CalDAV)
Budget Tracking: Income and expenses, recurring entries, configurable currency (15 currencies), monthly trends, CSV export
Notes & Contacts: Colored sticky notes with Markdown, contact directory with vCard import/export
Zero Build Step: Pure ES modules, no bundler, no transpiler, no framework. Ships what you write.
Privacy First: SQLCipher AES-256 encrypted database, fully self-hosted, zero telemetry
PWA Native Feel: Installable on any device, works offline, dark mode, responsive from phone to desktop
Multilingual: German, English, Spanish, French, Italian, Swedish, Greek, Russian, Turkish, and Chinese UI with automatic locale detection
Quick Start
Option A — pre-built image (fastest, no clone required):
curl -O https://raw.githubusercontent.com/ulsklyc/oikos/main/docker-compose.yml
curl -O https://raw.githubusercontent.com/ulsklyc/oikos/main/.env.example
cp .env.example .env # edit .env — set SESSION_SECRET and DB_ENCRYPTION_KEY
docker compose up -d
docker compose exec oikos node setup.js
Option B — build from source:
git clone https://github.com/ulsklyc/oikos.git && cd oikos
cp .env.example .env # edit .env — set SESSION_SECRET and DB_ENCRYPTION_KEY
docker compose up -d --build
docker compose exec oikos node setup.js
Then open http://localhost:3000 and log in with the admin credentials you set in the previous step. Add family members from Settings.
New to Docker? The Installation Guide walks you through every step: From installing Docker to HTTPS setup, backups, and troubleshooting.
Tech Stack
Documentation
| Installation | Spec & Data Model | Contributing | Security | Changelog | Backlog |
|---|


