احسب دورات نومك، استيقظ بنشاط، وتتبّع نومك بنقرة واحدة. Calculate your sleep cycles, wake up refreshed, and track your sleep with a single tap.
 |
 |
 |
 |
| أنام الآن Sleep Now |
استيقاظ محدد Target Wake |
حاسبة حرة Custom |
سجل النوم Tracker |
SleepFlow (مدير النوم الذكي) تطبيق ويب تقدّمي (PWA) خفيف يساعدك على تحسين جودة نومك عن طريق حساب دورات النوم بدقّة. يعتمد الحساب على حقيقتين علميتين: أن دورة النوم الواحدة تستغرق حوالي 90 دقيقة، وأن الإنسان يحتاج في المتوسط إلى 14 دقيقة حتى يغفو. الفكرة أن تستيقظ في نهاية دورة كاملة لا في منتصفها، فتشعر بالنشاط بدل الكسل.
التطبيق كله عربي بالكامل (اتجاه من اليمين لليسار)، يعمل بالوضع الليلي افتراضياً، وقابل للتثبيت على هاتفك كتطبيق حقيقي.
🔗 جرّبه الآن: https://3mmar404.github.io/timer-sleep/
| التبويب | ماذا يفعل؟ |
|---|---|
| 🚀 أنام الآن | لو نمت هذه اللحظة، يحسب لك أفضل أوقات الاستيقاظ (بعد إضافة 14 دقيقة للغفو) ويعرض خيارات من 3 إلى 6 دورات. |
| 🛌 استيقاظ محدد | تُدخل الساعة التي تريد الاستيقاظ فيها، فيحسب لك مواعيد النوم المثالية لإكمال دوراتك. |
| 🔍 حاسبة حرة | تُدخل وقت النوم ووقت الاستيقاظ، فيحلّل مدّة نومك الفعلية وعدد الدورات، ويحذّرك إن كنت ستستيقظ في منتصف دورة ويقترح بديلين مثاليين. |
| 📊 سجل النوم | تتبُّع بنقرة واحدة («سأنام الآن» / «استيقظت الآن») مع خيار الإضافة اليدوية، وإحصائيات لآخر 7 أيام: متوسط النوم ونسبة جودة النوم. |
مميزات إضافية:
- 🌗 وضع ليلي/نهاري مع حفظ اختيارك تلقائياً.
- 📲 PWA — قابل للتثبيت على الشاشة الرئيسية ويعمل بملء الشاشة (standalone).
- 💾 حفظ محلي لكل بياناتك عبر LocalStorage — بدون خوادم ولا حسابات.
- 📱 تصميم متجاوب يعمل على الهاتف والحاسب.
- ⚡ بدون أي مكتبات خارجية (سوى خط Google) — سريع وخفيف.
- ⏱️ مدة الدورة: 90 دقيقة.
- 😴 زمن الغفو: 14 دقيقة تُضاف/تُخصم تلقائياً.
- 🎯 يقيّم كل خيار حسب عدد الدورات:
| عدد الدورات | التقييم |
|---|---|
| 5 – 6 دورات | ✅ مثالي (موصى به) |
| 4 أو 7 دورات | 🟡 مقبول |
| أقل من 4 دورات | 🔴 غير كافٍ |
في الحاسبة الحرة، إذا وقع استيقاظك في منتصف دورة (بين 10 و80 دقيقة داخل الدورة) يظهر تحذير ويُقترح عليك أقرب وقتين لإكمال الدورة. وفي سجل النوم تُحتسب الليلة «جيدة» إذا كانت دوراتها بين 4.5 و6.2، وتظهر النسبة برمز 🤩 (80%+) أو 🙂 (50%+) أو 😴.
| الطبقة | التقنية |
|---|---|
| البنية | HTML5 (صفحة واحدة) |
| التنسيق | CSS3 + متغيّرات CSS (ثيم داكن/فاتح) |
| المنطق | JavaScript خام (Vanilla، بدون أُطر) |
| التخزين | LocalStorage |
| PWA | Web App Manifest + أيقونات SVG مدمجة |
| الخط | Tajawal من Google Fonts |
# 1) استنسخ المستودع
git clone https://github.com/3mmar404/timer-sleep.git
cd timer-sleep
# 2) الأسهل: افتح index.html مباشرةً في المتصفح
# أو شغّل خادماً محلياً (مُفضّل لخصائص الـ PWA):
python3 -m http.server 8000
# ثم افتح: http://localhost:8000التطبيق ملف واحد (
index.html) بلا خطوة بناء (build) ولا تبعيّات.
- افتح النسخة الحية من متصفح الهاتف (Chrome على أندرويد أو Safari على iOS).
- من قائمة المتصفح اختر «إضافة إلى الشاشة الرئيسية».
- ستظهر أيقونة الهلال الأصفر 🌙 على شاشتك وتفتح التطبيق بملء الشاشة.
timer-sleep/
├── index.html # التطبيق كاملاً (HTML + CSS + JS في ملف واحد)
├── README.md # هذا الملف
└── assets/ # صور الـ README (الشعار ولقطات الشاشة)
| المفتاح | الغرض |
|---|---|
sleepflow_theme |
الوضع المحفوظ (داكن/فاتح) |
sleepflow_waketime |
آخر وقت استيقاظ مطلوب |
sleepflow_logs |
سجلّات النوم (مصفوفة JSON) |
sleepflow_active_sleep |
جلسة نوم نشطة (وقت البدء) |
المساهمات مُرحَّب بها! افتح Issue لاقتراح فكرة أو الإبلاغ عن خطأ، أو أرسل Pull Request:
# fork ثم:
git checkout -b feature/my-idea
git commit -m "أضفت ميزة كذا"
git push origin feature/my-idea
# ثم افتح Pull Requestهذا المشروع مرخّص تحت رخصة MIT — يمكنك استخدامه وتعديله وتوزيعه بحرية مع الإبقاء على إشعار حقوق النشر. للتفاصيل راجع ملف LICENSE.
صُنع بـ ❤️ بواسطة 3mmar404.
SleepFlow is a lightweight Progressive Web App (PWA) that helps you improve your sleep quality by precisely calculating your sleep cycles. It's built on two facts: an average sleep cycle lasts about 90 minutes, and it takes a person roughly 14 minutes to fall asleep. The goal is to wake up at the end of a full cycle rather than in the middle of one — so you rise refreshed instead of groggy.
The interface is fully in Arabic (right-to-left), ships in dark mode by default, and can be installed to your phone as a native-like app.
🔗 Try it live: https://3mmar404.github.io/timer-sleep/
| Tab | What it does |
|---|---|
| 🚀 Sleep Now | If you go to bed right now, it calculates the best times to wake up (after adding the 14‑minute fall‑asleep buffer), offering 3–6 cycle options. |
| 🛌 Target Wake | Enter the time you need to wake up, and it tells you the ideal times to head to bed to complete full cycles. |
| 🔍 Custom | Enter any bedtime + wake time to analyze your actual sleep duration and cycle count. It warns you if you'd wake mid‑cycle and suggests two optimal alternatives. |
| 📊 Tracker | One‑tap tracking ("Sleeping now" / "I woke up") plus a manual‑entry option, with 7‑day stats: average sleep duration and a sleep‑quality score. |
Extras:
- 🌗 Dark / light mode with your choice saved automatically.
- 📲 PWA — installable to the home screen, runs standalone (fullscreen).
- 💾 Local‑first — all data stored via LocalStorage; no servers, no accounts.
- 📱 Responsive design for mobile and desktop.
- ⚡ Zero external dependencies (aside from a Google Font) — fast and lightweight.
- ⏱️ Cycle length: 90 minutes.
- 😴 Fall‑asleep time: 14 minutes, added/subtracted automatically.
- 🎯 Each option is rated by cycle count:
| Cycles | Rating |
|---|---|
| 5 – 6 | ✅ Optimal (recommended) |
| 4 or 7 | 🟡 Acceptable |
| Fewer than 4 | 🔴 Insufficient |
In the Custom tab, if your wake‑up lands mid‑cycle (10–80 minutes into a cycle), a warning appears with the two nearest cycle‑complete times. In the Tracker, a night counts as "good" when its cycles fall between 4.5 and 6.2, and the quality score shows as 🤩 (80%+), 🙂 (50%+), or 😴.
| Layer | Technology |
|---|---|
| Structure | HTML5 (single page) |
| Styling | CSS3 + CSS variables (dark/light theme) |
| Logic | Vanilla JavaScript (no frameworks) |
| Storage | LocalStorage |
| PWA | Web App Manifest + embedded SVG icons |
| Font | Tajawal (Google Fonts) |
# 1) Clone the repo
git clone https://github.com/3mmar404/timer-sleep.git
cd timer-sleep
# 2) Easiest: open index.html directly in a browser
# Or serve it locally (recommended for full PWA behavior):
python3 -m http.server 8000
# then open: http://localhost:8000The app is a single
index.htmlfile — no build step, no dependencies.
- Open the live demo in your mobile browser (Chrome on Android or Safari on iOS).
- From the browser menu, choose "Add to Home Screen."
- The yellow crescent icon 🌙 appears on your home screen and launches the app fullscreen.
timer-sleep/
├── index.html # The entire app (HTML + CSS + JS in one file)
├── README.md # This file
└── assets/ # README images (logo and screenshots)
| Key | Purpose |
|---|---|
sleepflow_theme |
Saved theme (dark/light) |
sleepflow_waketime |
Last requested wake time |
sleepflow_logs |
Sleep logs (JSON array) |
sleepflow_active_sleep |
Active sleep session (start time) |
Contributions are welcome! Open an Issue to suggest an idea or report a bug, or send a Pull Request:
# fork, then:
git checkout -b feature/my-idea
git commit -m "Add my feature"
git push origin feature/my-idea
# then open a Pull RequestThis project is licensed under the MIT License — you're free to use, modify, and distribute it, provided the copyright notice is retained. See the LICENSE file for details.
Made with ❤️ by 3mmar404.
🌅 استيقظ بنشاط كل صباح — Wake up refreshed, every single day.