Skip to content

Instantly share code, notes, and snippets.

@mohammedsalem97

mohammedsalem97/today_plan.html

Created May 4, 2026 17:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mohammedsalem97/50218133f40926ab407bc047adbd89f2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mohammedsalem97/50218133f40926ab407bc047adbd89f2 to your computer and use it in GitHub Desktop.
Download ZIP
Quranpedia - خطة عمل اليوم Sprint 3
Raw
today_plan.html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>خطة اليوم – Quranpedia</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
background: #0f172a;
color: #e2e8f0;
min-height: 100vh;
padding: 32px 20px;
}
.container { max-width: 860px; margin: 0 auto; }
/* Header */
.header {
text-align: center;
margin-bottom: 40px;
}
.header .date {
font-size: 13px;
color: #64748b;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 8px;
}
.header h1 {
font-size: 28px;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 6px;
}
.header .subtitle {
font-size: 14px;
color: #94a3b8;
}
/* Progress bar */
.progress-section {
background: #1e293b;
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 32px;
}
.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.progress-label { font-size: 14px; color: #94a3b8; }
.progress-value { font-size: 20px; font-weight: 700; color: #22d3ee; }
.progress-bar-bg {
background: #0f172a;
border-radius: 999px;
height: 10px;
overflow: hidden;
}
.progress-bar-fill {
background: linear-gradient(90deg, #0891b2, #22d3ee);
height: 100%;
border-radius: 999px;
transition: width 1s ease;
}
.progress-stats {
display: flex;
gap: 24px;
margin-top: 16px;
}
.stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.stat-num { font-size: 22px; font-weight: 700; color: #f1f5f9; }
.stat-lbl { font-size: 12px; color: #64748b; }
/* Sprints grid */
.sprints-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 32px;
}
@media (max-width: 600px) { .sprints-grid { grid-template-columns: 1fr; } }
.sprint-card {
background: #1e293b;
border-radius: 12px;
padding: 18px 20px;
border: 1px solid #334155;
position: relative;
overflow: hidden;
}
.sprint-card.done {
border-color: #166534;
background: #14293b;
}
.sprint-card.today {
border-color: #0891b2;
background: #0c2233;
box-shadow: 0 0 0 1px #0891b2, 0 4px 24px rgba(8,145,178,0.15);
}
.sprint-card.upcoming {
opacity: 0.5;
}
.sprint-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.badge-done { background: #14532d; color: #4ade80; }
.badge-today { background: #0c4a6e; color: #38bdf8; }
.badge-upcoming { background: #1e293b; color: #64748b; border: 1px solid #334155; }
.sprint-title {
font-size: 15px;
font-weight: 600;
color: #f1f5f9;
margin-bottom: 4px;
}
.sprint-meta {
font-size: 12px;
color: #64748b;
margin-bottom: 12px;
}
.sprint-tasks { display: flex; flex-direction: column; gap: 6px; }
.task-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #cbd5e1;
}
.task-row .dot {
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.dot-done { background: #4ade80; }
.dot-today { background: #38bdf8; }
.dot-upcoming { background: #475569; }
.task-id {
font-size: 11px;
font-family: monospace;
color: #64748b;
flex-shrink: 0;
}
/* Today focus */
.today-focus {
background: #0c2233;
border: 1px solid #0891b2;
border-radius: 12px;
padding: 24px;
margin-bottom: 32px;
}
.today-focus h2 {
font-size: 16px;
font-weight: 700;
color: #38bdf8;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
}
.focus-tasks { display: flex; flex-direction: column; gap: 12px; }
.focus-task {
background: #0f172a;
border-radius: 10px;
padding: 14px 16px;
display: flex;
align-items: flex-start;
gap: 14px;
border: 1px solid #1e3a5f;
}
.focus-task-id {
font-family: monospace;
font-size: 12px;
font-weight: 700;
color: #0891b2;
background: #0c2233;
border: 1px solid #0891b2;
padding: 3px 8px;
border-radius: 6px;
flex-shrink: 0;
margin-top: 2px;
}
.focus-task-info {}
.focus-task-name {
font-size: 14px;
font-weight: 600;
color: #f1f5f9;
margin-bottom: 4px;
}
.focus-task-desc {
font-size: 12px;
color: #64748b;
line-height: 1.6;
}
.focus-task-hours {
font-size: 11px;
color: #22d3ee;
margin-top: 6px;
font-weight: 600;
}
/* Arch reminder */
.arch-box {
background: #1e293b;
border-radius: 12px;
padding: 20px 24px;
border-right: 3px solid #f59e0b;
}
.arch-box h3 {
font-size: 14px;
font-weight: 700;
color: #fbbf24;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.rules { display: flex; flex-direction: column; gap: 8px; }
.rule {
font-size: 13px;
color: #94a3b8;
display: flex;
align-items: center;
gap: 8px;
}
.rule::before { content: "✓"; color: #4ade80; font-weight: 700; flex-shrink: 0; }
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<div class="date">الإثنين · 4 مايو 2026</div>
<h1>خطة عمل اليوم</h1>
<div class="subtitle">Quranpedia · Mohammed Salem</div>
</div>
<!-- Overall Progress -->
<div class="progress-section">
<div class="progress-header">
<span class="progress-label">تقدم المشروع الكلي</span>
<span class="progress-value">27%</span>
</div>
<div class="progress-bar-bg">
<div class="progress-bar-fill" style="width: 27%"></div>
</div>
<div class="progress-stats">
<div class="stat">
<span class="stat-num">62</span>
<span class="stat-lbl">ساعة منجزة</span>
</div>
<div class="stat">
<span class="stat-num">164</span>
<span class="stat-lbl">ساعة متبقية</span>
</div>
<div class="stat">
<span class="stat-num">9 / 34</span>
<span class="stat-lbl">تاسك منجزة</span>
</div>
<div class="stat">
<span class="stat-num">Sprint 3</span>
<span class="stat-lbl">السبرينت الحالي</span>
</div>
</div>
</div>
<!-- All Sprints Overview -->
<div class="sprints-grid">
<div class="sprint-card done">
<span class="sprint-badge badge-done">✓ مكتمل</span>
<div class="sprint-title">Sprint 0 – الإعداد والبنية</div>
<div class="sprint-meta">4 tasks · 20 ساعة</div>
<div class="sprint-tasks">
<div class="task-row"><span class="dot dot-done"></span><span class="task-id">SETUP-01</span>هيكلة المشروع والمكتبات</div>
<div class="task-row"><span class="dot dot-done"></span><span class="task-id">SETUP-02</span>إدارة اللغة RTL/LTR</div>
<div class="task-row"><span class="dot dot-done"></span><span class="task-id">SETUP-03</span>SharedPreferences & DataStore</div>
<div class="task-row"><span class="dot dot-done"></span><span class="task-id">SETUP-04</span>قاعدة البيانات المحلية (Drift)</div>
</div>
</div>
<div class="sprint-card done">
<span class="sprint-badge badge-done">✓ مكتمل</span>
<div class="sprint-title">Sprint 1 – Splash & اللغة</div>
<div class="sprint-meta">2 tasks · 16 ساعة</div>
<div class="sprint-tasks">
<div class="task-row"><span class="dot dot-done"></span><span class="task-id">SPL-01</span>شاشة Splash</div>
<div class="task-row"><span class="dot dot-done"></span><span class="task-id">LANG-01</span>شاشة اختيار اللغة</div>
</div>
</div>
<div class="sprint-card done">
<span class="sprint-badge badge-done">✓ مكتمل</span>
<div class="sprint-title">Sprint 2 – Home Tab</div>
<div class="sprint-meta">3 tasks · 16 ساعة</div>
<div class="sprint-tasks">
<div class="task-row"><span class="dot dot-done"></span><span class="task-id">HOME-01</span>Bottom Navigation Bar</div>
<div class="task-row"><span class="dot dot-done"></span><span class="task-id">HOME-02</span>عرض محتوى Home</div>
<div class="task-row"><span class="dot dot-done"></span><span class="task-id">HOME-03</span>ربط عناصر Home بالشاشات</div>
</div>
</div>
<div class="sprint-card today">
<span class="sprint-badge badge-today">▶ اليوم</span>
<div class="sprint-title">Sprint 3 – المصحف الأساسيات</div>
<div class="sprint-meta">3 tasks · 24 ساعة</div>
<div class="sprint-tasks">
<div class="task-row"><span class="dot dot-today"></span><span class="task-id">QURAN-01</span>فهرس السور</div>
<div class="task-row"><span class="dot dot-today"></span><span class="task-id">QURAN-02</span>صفحة عرض المصحف</div>
<div class="task-row"><span class="dot dot-today"></span><span class="task-id">QURAN-03</span>القائمة الجانبية للسور</div>
</div>
</div>
<div class="sprint-card upcoming">
<span class="sprint-badge badge-upcoming">قادم</span>
<div class="sprint-title">Sprint 4 – المصحف المتقدم</div>
<div class="sprint-meta">3 tasks · 28 ساعة</div>
<div class="sprint-tasks">
<div class="task-row"><span class="dot dot-upcoming"></span><span class="task-id">QURAN-04</span>التفسير المختصر</div>
<div class="task-row"><span class="dot dot-upcoming"></span><span class="task-id">QURAN-05</span>الموضوعات القرآنية</div>
<div class="task-row"><span class="dot dot-upcoming"></span><span class="task-id">QURAN-06</span>آية بآية مع ترجمة</div>
</div>
</div>
<div class="sprint-card upcoming">
<span class="sprint-badge badge-upcoming">قادم</span>
<div class="sprint-title">Sprint 5 – الاستماع</div>
<div class="sprint-meta">4 tasks · 32 ساعة</div>
<div class="sprint-tasks">
<div class="task-row"><span class="dot dot-upcoming"></span><span class="task-id">AUD-01</span>قائمة القراء</div>
<div class="task-row"><span class="dot dot-upcoming"></span><span class="task-id">AUD-02</span>تفاصيل القارئ</div>
<div class="task-row"><span class="dot dot-upcoming"></span><span class="task-id">AUD-03</span>مشغل الاستماع</div>
<div class="task-row"><span class="dot dot-upcoming"></span><span class="task-id">AUD-04</span>Dialog القارئ</div>
</div>
</div>
</div>
<!-- Today Focus -->
<div class="today-focus">
<h2>🎯 تفاصيل مهام اليوم — Sprint 3</h2>
<div class="focus-tasks">
<div class="focus-task">
<span class="focus-task-id">QURAN-01</span>
<div class="focus-task-info">
<div class="focus-task-name">فهرس السور</div>
<div class="focus-task-desc">Fragment يعرض قائمة السور (اسم، عدد الآيات، رقم الصفحة) مع حقل بحث فوري. يتطلب: SETUP-04, HOME-01</div>
<div class="focus-task-hours">⏱ 8 ساعات</div>
</div>
</div>
<div class="focus-task">
<span class="focus-task-id">QURAN-02</span>
<div class="focus-task-info">
<div class="focus-task-name">صفحة عرض المصحف (النص القرآني)</div>
<div class="focus-task-desc">Fragment يعرض نص السورة القرآنية مع تمرير رأسي وخط قرآني. يتطلب: QURAN-01</div>
<div class="focus-task-hours">⏱ 10 ساعات</div>
</div>
</div>
<div class="focus-task">
<span class="focus-task-id">QURAN-03</span>
<div class="focus-task-info">
<div class="focus-task-name">القائمة الجانبية للسور</div>
<div class="focus-task-desc">DrawerLayout أو BottomSheet يحتوي على قائمة السور مع بحث؛ الضغط يبدّل السورة المعروضة. يتطلب: QURAN-02</div>
<div class="focus-task-hours">⏱ 6 ساعات</div>
</div>
</div>
</div>
</div>
<!-- Architecture Reminders -->
<div class="arch-box">
<h3>⚠️ تذكير معماري قبل البدء</h3>
<div class="rules">
<div class="rule">Clean Architecture: presentation / domain / data منفصلين</div>
<div class="rule">Cubit فقط للـ state management، مش Riverpod</div>
<div class="rule">لا business logic داخل الـ widgets</div>
<div class="rule">Typography والـ Spacing من الـ theme فقط</div>
<div class="rule">Reusable widgets تروح في lib/core/widgets/</div>
<div class="rule">لا Dio داخل Cubit أو Widget مباشرة</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment