weekly updates
This commit is contained in:
159
home/wird-tracker.org
Normal file
159
home/wird-tracker.org
Normal file
@@ -0,0 +1,159 @@
|
||||
#+TITLE: Wird Tracker
|
||||
#+OPTIONS: toc:nil num:nil
|
||||
#+NO_SIDENOTES: t
|
||||
#+COMMENTS: nil
|
||||
#+SLUG: wird-tracker
|
||||
|
||||
This page tracks my daily awrād and spiritual practices.
|
||||
|
||||
#+BEGIN_EXPORT html
|
||||
|
||||
<div id="wird-app">
|
||||
|
||||
<!-- Today Panel -->
|
||||
<section id="today-panel" class="wird-panel">
|
||||
<div class="wird-panel-header">
|
||||
<h2 id="today-date">—</h2>
|
||||
<div id="today-progress-wrap">
|
||||
<div id="today-progress-bar"><div id="today-progress-fill"></div></div>
|
||||
<span id="today-progress-label">0 / 5 complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wird-cards"></div>
|
||||
</section>
|
||||
|
||||
<!-- Shaykh Meeting Panel -->
|
||||
<section id="meeting-panel" class="wird-panel">
|
||||
<div class="wird-panel-header">
|
||||
<h2>Meeting with the Shaykh</h2>
|
||||
<button id="log-meeting-btn" class="btn-primary">+ Log Meeting</button>
|
||||
</div>
|
||||
<div id="meeting-panel-body">
|
||||
<p style="color:var(--muted);font-style:italic">Loading…</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Log Entry Modal -->
|
||||
<dialog id="log-modal">
|
||||
<form id="log-form" method="dialog">
|
||||
<h3 id="modal-title">Log Entry</h3>
|
||||
|
||||
<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ʾān (juz)</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>
|
||||
<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-notes">Notes <span class="optional">(optional)</span></label>
|
||||
<textarea id="log-notes" rows="2" placeholder="Any reflections…"></textarea>
|
||||
</div>
|
||||
|
||||
<div id="modal-actions">
|
||||
<button type="button" id="modal-cancel">Cancel</button>
|
||||
<button type="submit" id="modal-save" class="btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<!-- Trends -->
|
||||
<section id="trends-panel" class="wird-panel">
|
||||
<div class="wird-panel-header">
|
||||
<h2>Trends</h2>
|
||||
<div id="trend-controls">
|
||||
<select id="trend-type">
|
||||
<option value="durood">Durood</option>
|
||||
<option value="istighfar">Istighfar</option>
|
||||
<option value="quran">Qurʾān</option>
|
||||
<option value="muraqabah">Murāqabah</option>
|
||||
<option value="wuqoof_qalbi">Wuqūf Qalbī</option>
|
||||
</select>
|
||||
<select id="trend-range">
|
||||
<option value="14">14 days</option>
|
||||
<option value="30" selected>30 days</option>
|
||||
<option value="90">90 days</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="trend-chart"></canvas>
|
||||
<div id="trend-stats"></div>
|
||||
</section>
|
||||
|
||||
<!-- History -->
|
||||
<section id="history-panel" class="wird-panel">
|
||||
<div class="wird-panel-header">
|
||||
<h2>History</h2>
|
||||
<button id="open-log-btn" class="btn-primary">+ Log Entry</button>
|
||||
</div>
|
||||
<div id="history-table-wrap">
|
||||
<table id="history-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Wird</th>
|
||||
<th>Amount</th>
|
||||
<th>vs Target</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="history-body">
|
||||
<tr><td colspan="5" class="loading-cell">Loading…</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
#+END_EXPORT
|
||||
Reference in New Issue
Block a user