77 lines
5.8 KiB
Markdown
77 lines
5.8 KiB
Markdown
# Product Requirements Document: Smart Digital Prayer Clock (Jam Shalat Masjid)
|
|
|
|
## 1. Executive Summary
|
|
**Objective**: Develop a world-class, offline-first digital signage application for mosques running continuously (24/7) on Android TV Boxes without internet dependency.
|
|
**Key Directives**: Avoid the dated, cluttered spreadsheet look of traditional digital clocks. Implement "The Sacred Horizon" design system, focusing on elegance, high visual impact, wide margins, and asymmetrical editorial layouts.
|
|
|
|
## 2. Core Architecture & Tech Stack
|
|
* **Target Platform**: Android TV Box (Android 13/14, 4GB RAM, 64GB ROM) — 1920x1080 Landscape Display.
|
|
* **Framework**: Flutter (Latest Stable).
|
|
* **Architecture Pattern**: Clean Architecture / MVVM.
|
|
* **State Management**: Riverpod (Recommended for predictable timer-based state transitions).
|
|
* **Local Storage**: Isar (High-performance NoSQL for offline caching of monthly APIs and Settings).
|
|
* **Background Management**: `wakelock_plus` package must be implemented to prevent screen sleeping. Timer handling must be memory-leak safe.
|
|
|
|
## 3. Design System Strategy: "The Sacred Horizon"
|
|
* **Creative North Star**: "The Celestial Anchor" - Calm, reverence, and absolute clarity.
|
|
* **Color Palette**:
|
|
* **Background (The Void)**: `#131313`
|
|
* **Primary (Living Green)**: `#88d982` (Used for current time status and active prayer highlights)
|
|
* **Secondary (Sacred Gold)**: `#e9c349` (Used for alerts, Jumu'ah highlights, running text)
|
|
* **Typography**:
|
|
* **Plus Jakarta Sans**: Display (`3.5rem - 12rem`), used for the massive clock, prayer titles. Bold and commanding. Letter-spacing tighter (`-0.02em`).
|
|
* **Manrope**: Used for functional elements (Sub-timers, info panels, marquee). Clean and readable from 2-3 meters.
|
|
* **Surfaces & Depth (The "No-Line" Rule)**:
|
|
* Strictly **NO 1px solid borders** between content. Separation is created using tonal layering (e.g. `surface_container_low` `#1c1b1b` over `#131313` background).
|
|
* Use frosted glass effects (`backdrop-filter`) for floating overlays. Give active items ambient glows instead of hard drop shadows.
|
|
|
|
## 4. App State Machine & UI Experiences
|
|
|
|
The application transitions through a cyclical logic based on `DateTime.now()`.
|
|
|
|
### State 1: NORMAL / ROTATION
|
|
Automatically rotates between Main View and Slideshow based on Admin configurations using smooth `AnimatedSwitcher`.
|
|
* **Main Screen**: Asymmetrical layout. High-contrast massive clock in the center/center-left. Hijri & Gregorian dates. `Bottom Area`: 5/6 prayer cards spanning horizontally. The active/upcoming prayer is elevated using `primary_container` color. `Bottom Edge`: Continuous marquee text.
|
|
* **Slideshow Screen**: Cinematic full-screen graphic behind a subtle gradient overlay. A floating "Glass" widget anchors to the top-right showing current time and upcoming prayer countdown. Central focus is on the poster/quote text.
|
|
|
|
### State 2: MENUJU ADZAN
|
|
* Triggered ~X minutes before the exact prayer time (configurable per prayer).
|
|
* Forced lock to Main Screen (cancels slideshow rotations). Focus shifted to the active countdown. Pulsing UI indicators.
|
|
|
|
### State 3: ADZAN (Time Reached)
|
|
* Full-screen alert takeover. Glowing `Secondary` texts: "WAKTU ADZAN [NAMA SHALAT]". Short audio chime.
|
|
|
|
### State 4: MENUJU IQOMAH
|
|
* Massive, dominant countdown timer taking over the screen center. "PERSIAPAN SHALAT. Luruskan dan rapatkan shaf".
|
|
* **Jumu'ah Override**: On Fridays, Dzuhur is replaced with "JUMAT". During the Iqomah countdown phase, the screen transforms into a "Friday Khutbah Information" panel—displaying Imam and Khatib names with an overarching countdown to the Khutbah itself.
|
|
|
|
### State 5: SHALAT / BLACK SCREEN
|
|
* Post-iqomah. Screen turns to absolute minimal `Black` (`#000000`).
|
|
* Only low-opacity (10-15%) texts remain: "Shalat Sedang Berlangsung" and "Mohon Nonaktifkan Alat Komunikasi".
|
|
|
|
### State 6: KEMBALI NORMAL
|
|
* System resets to `STATE 1` after the configured blank screen duration ends.
|
|
|
|
## 5. Offline-First API & Admin Configuration
|
|
|
|
The App runs 99% offline. Admin dashboard is accessed securely (e.g., hidden D-pad combo).
|
|
* **TV-Optimized Admin UX**: Driven purely by D-Pad logic. Focus management is critical (High contrast borders & states for selected inputs). Avoid heavy typing by utilizing sliders, presets, and large selection buttons.
|
|
* **Admin Features (Bento Grid Layout)**:
|
|
1. **Identity Settings**: Mosque Name, Address.
|
|
2. **Sync Data**: The only feature that requires internet (via mobile tethering). Button pulls 1 full month of data from public prayer API based on City ID.
|
|
3. **Timing & Durations**:
|
|
* Pre-Adzan Lead (minutes per prayer).
|
|
* Iqomah Duration (minutes per prayer).
|
|
* Blank Screen Duration (minutes, separate for normal days and Friday).
|
|
4. **Appearance**: Marquee text configuration, Khatib / Imam input fields for the week.
|
|
|
|
## 6. Implementation Roadmap
|
|
|
|
1. **Phase 1: Foundation Setup**: Initialize Flutter project, Riverpod, Isar database, and `wakelock_plus`. Define configuration models.
|
|
2. **Phase 2: Data layer & State Machine**: API fetching, offline database seed logic. Build the central `Timer` loop dictating the State Machine.
|
|
3. **Phase 3: Design System Tokens**: Translate "The Sacred Horizon" stitch designs into global Flutter themes, custom text styles, and core widgets.
|
|
4. **Phase 4: TV UI Development**:
|
|
* Build all 5 UI states (Normal/Slideshow, Adzan Alert, Iqomah Countdown, Khutbah Override, Black Screen).
|
|
5. **Phase 5: TV Admin Dashboard**: Implement the D-Pad optimized configuration interface ensuring state saves correctly to `Isar`.
|
|
6. **Phase 6: Final Polish**: Focus transition animations, memory leak testing (crucial for 24/7 runtimes), and Android APK generation.
|