@@ -22,6 +22,43 @@ This page tracks my daily awrād and spiritual practices.
< div id = "wird-cards" > < / div >
< / section >
<!-- Nafl Prayers Panel -->
< section id = "nafl-panel" class = "wird-panel" >
< div class = "wird-panel-header" >
< h2 > Nafl Prayers< / h2 >
< / div >
< div id = "nafl-cards" >
< div class = "nafl-card" id = "nafl-salatul_tawbah" >
< div class = "nafl-icon" > 🤲< / div >
< div class = "nafl-name" > Ṣalāt al-Tawbah< / div >
< div class = "nafl-sub" > 2 rakʿāt · repentance< / div >
< button class = "nafl-toggle" data-type = "salatul_tawbah" > Mark as prayed< / button >
< / div >
< div class = "nafl-card" id = "nafl-salatul_hajaat" >
< div class = "nafl-icon" > 🌙< / div >
< div class = "nafl-name" > Ṣalāt al-Ḥājah< / div >
< div class = "nafl-sub" > 2 rakʿāt · need & supplication< / div >
< button class = "nafl-toggle" data-type = "salatul_hajaat" > Mark as prayed< / button >
< / div >
< div class = "nafl-card" id = "nafl-tahajjud" >
< div class = "nafl-icon" > ⭐< / div >
< div class = "nafl-name" > Tahajjud< / div >
< div class = "nafl-sub" > night vigil prayer< / div >
< button class = "nafl-toggle" data-type = "tahajjud" > Mark as prayed< / button >
< / div >
< / div >
< div id = "nafl-completion-bar-wrap" >
< div id = "nafl-bar-track" >
< div id = "nafl-completion-bar" > < / div >
< / div >
< span id = "nafl-completion-label" > 0 / 3 today< / span >
< / div >
< / section >
<!-- Shaykh Meeting Panel -->
< section id = "meeting-panel" class = "wird-panel" >
< div class = "wird-panel-header" >
@@ -33,72 +70,137 @@ This page tracks my daily awrād and spiritual practices.
< / div >
< / section >
<!-- Khatm Tracker -->
< section id = "khatm-panel" class = "wird-panel" >
< div class = "wird-panel-header" >
< h2 > Khatm — Qurʾ < / h2 >
< button id = "log-khatm-btn" class = "btn-primary" > + Log Khatm< / button >
< / div >
< div id = "khatm-stats-row" >
< div class = "stat-chip" >
< span class = "stat-val" id = "khatm-total" > —< / span >
< span class = "stat-lbl" > total khatms< / span >
< / div >
< div class = "stat-chip" >
< span class = "stat-val" id = "khatm-this-year" > —< / span >
< span class = "stat-lbl" > this year< / span >
< / div >
< div class = "stat-chip" >
< span class = "stat-val" id = "khatm-avg-days" > —< / span >
< span class = "stat-lbl" > avg days between< / span >
< / div >
< div class = "stat-chip" >
< span class = "stat-val" id = "khatm-last" > —< / span >
< span class = "stat-lbl" > last completed< / span >
< / div >
< / div >
< div id = "khatm-list" >
< p style = "color:var(--muted);font-style:italic" > Loading…< / p >
< / div >
< / section >
<!-- Khatm Modal -->
< dialog id = "khatm-modal" >
< form id = "khatm-form" method = "dialog" >
< h3 > Log Khatm< / h3 >
< div class = "modal-body" >
< div class = "field-group" >
< label for = "khatm-date" > Date completed< / label >
< input type = "date" id = "khatm-date" required >
< / div >
< div class = "field-group" >
< label for = "khatm-recitation" > Recitation type < span class = "optional" > (optional)< / span > < / label >
< select id = "khatm-recitation" >
< option value = "" > — select —< / option >
< option value = "tilawah" > Tilāwah (reading)< / option >
< option value = "hifz" > Ḥifẓ (memorisation)< / option >
< option value = "tadabbur" > Tadabbur (reflection)< / option >
< / select >
< / div >
< div class = "field-group" >
< label for = "khatm-notes" > Notes < span class = "optional" > (optional)< / span > < / label >
< textarea id = "khatm-notes" rows = "3" placeholder = "Any reflections…" > < / textarea >
< / div >
< / div >
< div id = "khatm-modal-actions" >
< button type = "button" id = "khatm-cancel" > Cancel< / button >
< button type = "submit" class = "btn-primary" > Save< / button >
< / div >
< / form >
< / dialog >
<!-- Log Entry Modal -->
< dialog id = "log-modal" >
< form id = "log-form" method = "dialog" >
< h3 id = "modal-title" > Log Entry< / h3 >
< div class = "modal-body" >
< div class = "field-group" >
< label for = "log-date" > Date< / label >
< input type = "date" id = "log-date" required >
< / div >
< div class = "field-group" >
< label for = "log-type" > Wird< / label >
< select id = "log-type" required >
< option value = "durood" > Durood< / option >
< option value = "istighfar" > Istighfar< / option >
< option value = "quran" > Qurʾ < / option >
< option value = "muraqabah" > Murāqabah (min)< / option >
< option value = "wuqoof_qalbi" > Wuqūf Qalbī< / option >
< option value = "shaykh_meeting" style = "display:none" > Meeting with Shaykh< / option >
< / select >
< / div >
<!-- Numeric amount — count/juz/min wirds -->
< div class = "field-group" id = "value-group" >
< label for = "log-value" > Amount< / label >
< input type = "number" id = "log-value" min = "0" step = "0.5" placeholder = "0" >
< / div >
<!-- Rating picker — wuqoof qalbi only -->
< div class = "field-group" id = "rating-group" style = "display:none" >
< label > Quality of presence< / label >
< div class = "modal-pips" id = "modal-pips" >
< button type = "button" class = "modal-pip" data-val = "1" >
< span class = "pip-dot" > < / span >
< span class = "pip-lbl" > distracted< / span >
< / button >
< button type = "button" class = "modal-pip" data-val = "2" >
< span class = "pip-dot" > < / span >
< span class = "pip-lbl" > scattered< / span >
< / button >
< button type = "button" class = "modal-pip" data-val = "3" >
< span class = "pip-dot" > < / span >
< span class = "pip-lbl" > present< / span >
< / button >
< button type = "button" class = "modal-pip" data-val = "4" >
< span class = "pip-dot" > < / span >
< span class = "pip-lbl" > attentive< / span >
< / button >
< button type = "button" class = "modal-pip" data-val = "5" >
< span class = "pip-dot" > < / span >
< span class = "pip-lbl" > absorbed< / span >
< / button >
< div class = "field-group" >
< label for = "log-date" > Date< / label >
< input type = "date" id = "log-date" required >
< / div >
< input type = "hidden" id = "log-rating-value" >
< / div >
<!-- Shaykh meeting note -- >
< div class = "field-group" id = "shaykh-group" style = "display:none" >
< p style = "font-size:.82rem;color:var(--muted);margin:0" > Set the date above to when the meeting took place.< / p >
< / div >
< div class = "field-group"
< label for = "log-type" > Wird< / label >
< select id = "log-type" required >
< option value = "durood" > Durood< / option >
< option value = "istighfar" > Istighfar< / option >
< option value = "quran" > Qurʾ < / option >
< option value = "muraqabah" > Murāqabah (min)< / option >
< option value = "wuqoof_qalbi" > Wuqūf Qalbī< / option >
< option value = "shaykh_meeting" style = "display:none" > Meeting with Shaykh< / option >
< / select >
< / div >
< div class = "field-group"
< label for = "log-notes" > Notes < span class = "optional" > (optional)< / span > < / label >
< textarea id = "log-notes" rows = "2" placeholder = "Any reflections… "> < / textarea >
< / div >
<!-- Numeric amount — count/juz/min wirds -- >
< div class = "field-group" id = "value-group" >
< label for = "log-value "> Amount < / label >
< input type = "number" id = "log-value" min = "0" step = "0.5" placeholder = "0" >
< / div >
<!-- Rating picker — wuqoof qalbi only -->
< div class = "field-group" id = "rating-group" style = "display:none" >
< label > Quality of presence< / label >
< div class = "modal-pips" id = "modal-pips" >
< button type = "button" class = "modal-pip" data-val = "1" >
< span class = "pip-dot" > < / span >
< span class = "pip-lbl" > distracted< / span >
< / button >
< button type = "button" class = "modal-pip" data-val = "2" >
< span class = "pip-dot" > < / span >
< span class = "pip-lbl" > scattered< / span >
< / button >
< button type = "button" class = "modal-pip" data-val = "3" >
< span class = "pip-dot" > < / span >
< span class = "pip-lbl" > present< / span >
< / button >
< button type = "button" class = "modal-pip" data-val = "4" >
< span class = "pip-dot" > < / span >
< span class = "pip-lbl" > attentive< / span >
< / button >
< button type = "button" class = "modal-pip" data-val = "5" >
< span class = "pip-dot" > < / span >
< span class = "pip-lbl" > absorbed< / span >
< / button >
< / div >
< input type = "hidden" id = "log-rating-value" >
< / div >
<!-- Shaykh meeting note -->
< div class = "field-group" id = "shaykh-group" style = "display:none" >
< p style = "font-size:.85rem;color:var(--muted);margin:0" > Set the date above to when the meeting took place.< / p >
< / div >
< div class = "field-group" >
< label for = "log-notes" > Notes < span class = "optional" > (optional)< / span > < / label >
< textarea id = "log-notes" rows = "3" placeholder = "Any reflections…" > < / textarea >
< / div >
< / div >
< div id = "modal-actions" >
< button type = "button" id = "modal-cancel" > Cancel< / button >
< button type = "submit" id = "modal-save" class = "btn-primary" > Save< / button >
@@ -106,6 +208,112 @@ This page tracks my daily awrād and spiritual practices.
< / form >
< / dialog >
<!-- Mutāla'ah (Study) Panel -->
< section id = "motalah-panel" class = "wird-panel" >
< div class = "wird-panel-header" >
< h2 > Mutālaʿah — Study< / h2 >
< button id = "log-motalah-btn" class = "btn-primary" > + Log Session< / button >
< / div >
<!-- Today summary -->
< div id = "motalah-today-row" >
< div class = "motalah-today-stat" >
< span class = "motalah-today-val" id = "motalah-today-mins" > —< / span >
< span class = "motalah-today-lbl" > min today< / span >
< / div >
< div class = "motalah-today-stat" >
< span class = "motalah-today-val" id = "motalah-streak" > —< / span >
< span class = "motalah-today-lbl" > day streak< / span >
< / div >
< div class = "motalah-today-stat" >
< span class = "motalah-today-val" id = "motalah-total-hrs" > —< / span >
< span class = "motalah-today-lbl" > hrs this month< / span >
< / div >
< div class = "motalah-today-stat" >
< span class = "motalah-today-val" id = "motalah-books-count" > —< / span >
< span class = "motalah-today-lbl" > books touched< / span >
< / div >
< / div >
<!-- Recent sessions -->
< div id = "motalah-sessions-wrap" >
< p style = "color:var(--muted);font-style:italic" > Loading…< / p >
< / div >
< / section >
<!-- Mutāla'ah Log Modal -->
< dialog id = "motalah-modal" >
< form id = "motalah-form" method = "dialog" >
< h3 > Log Study Session< / h3 >
< div class = "modal-body" >
< div class = "field-group" >
< label for = "motalah-date" > Date< / label >
< input type = "date" id = "motalah-date" required >
< / div >
< div class = "field-group" >
< label for = "motalah-duration" > Duration (minutes)< / label >
< input type = "number" id = "motalah-duration" min = "1" step = "1" placeholder = "e.g. 45" required >
< / div >
< div class = "field-group" >
< label > Books covered < span class = "optional" > (optional)< / span > < / label >
< div class = "book-search-wrap" >
< span class = "book-search-icon" > 🔍< / span >
< input type = "text" id = "motalah-book-search" placeholder = "Search your library…" autocomplete = "off" >
< div id = "book-search-results" > < / div >
< / div >
< div id = "selected-books-chips" > < / div >
<!-- Hidden to carry selected IDs for JS -->
< select id = "motalah-books" multiple style = "display:none" > < / select >
< / div >
< div class = "field-group" >
< label for = "motalah-notes" > Notes < span class = "optional" > (optional)< / span > < / label >
< textarea id = "motalah-notes" rows = "3" placeholder = "What did you cover?" > < / textarea >
< / div >
< / div >
< div id = "motalah-modal-actions" >
< button type = "button" id = "motalah-cancel" > Cancel< / button >
< button type = "submit" id = "motalah-save" class = "btn-primary" > Save< / button >
< / div >
< / form >
< / dialog >
<!-- Heatmap -->
< section id = "heatmap-panel" class = "wird-panel" >
< div class = "wird-panel-header" >
< h2 > Consistency< / h2 >
< select id = "heatmap-type" >
< option value = "__all__" > All wirds< / option >
< option value = "durood" > Durood< / option >
< option value = "istighfar" > Istighfar< / option >
< option value = "quran" > Qurʾ < / option >
< option value = "muraqabah" > Murāqabah< / option >
< option value = "wuqoof_qalbi" > Wuqūf Qalbī< / option >
< option value = "nafl" > Nafl prayers< / option >
< option value = "khatm" > Khatm< / option >
< option value = "motalah" > Mutālaʿah< / option >
< / select >
< / div >
< div id = "heatmap-wrap" >
< div id = "heatmap-month-labels" > < / div >
< div id = "heatmap-grid" > < / div >
< div id = "heatmap-legend" >
< span class = "hm-legend-lbl" > less< / span >
< span class = "hm-swatch" data-level = "0" > < / span >
< span class = "hm-swatch" data-level = "1" > < / span >
< span class = "hm-swatch" data-level = "2" > < / span >
< span class = "hm-swatch" data-level = "3" > < / span >
< span class = "hm-swatch" data-level = "4" > < / span >
< span class = "hm-legend-lbl" > more< / span >
< / div >
< / div >
< div id = "heatmap-stats" > < / div >
< / section >
<!-- Trends -->
< section id = "trends-panel" class = "wird-panel" >
< div class = "wird-panel-header" >
@@ -117,6 +325,7 @@ This page tracks my daily awrād and spiritual practices.
< option value = "quran" > Qurʾ < / option >
< option value = "muraqabah" > Murāqabah< / option >
< option value = "wuqoof_qalbi" > Wuqūf Qalbī< / option >
< option value = "motalah" > Mutālaʿah< / option >
< / select >
< select id = "trend-range" >
< option value = "14" > 14 days< / option >
@@ -156,4 +365,4 @@ This page tracks my daily awrād and spiritual practices.
< / div >
< script src = "https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js" > < / script >
#+END_EXPORT
#+END_EXPORT
