Last active
March 20, 2026 01:00
-
-
Save smoidu/ab3748e1accd23ff87e1219329e6aefd to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> | |
| <title>Dhikr</title> | |
| <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&family=DM+Mono:wght@400&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg: #f5f4f0; | |
| --surface: #ebe9e3; | |
| --border: #d5d2c8; | |
| --text: #1a1a18; | |
| --muted: #999; | |
| --accent: #6b5bb0; | |
| --accent-bg: rgba(107,91,176,0.09); | |
| } | |
| body.dark { | |
| --bg: #0e0e0e; | |
| --surface: #1a1a1a; | |
| --border: #252525; | |
| --text: #e8e8e6; | |
| --muted: #666; | |
| --accent: #b8a9e8; | |
| --accent-bg: rgba(184,169,232,0.09); | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { background: var(--bg); } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: 'DM Sans', sans-serif; | |
| font-weight: 300; | |
| min-height: 100vh; | |
| -webkit-text-size-adjust: 100%; | |
| font-size: 16px; | |
| } | |
| header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: var(--bg); | |
| border-bottom: 1px solid var(--border); | |
| padding: 1.25rem 1.25rem 0.75rem; | |
| } | |
| #theme-toggle { | |
| display: block; | |
| margin: 0 auto 0.9rem; | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| text-align: center; | |
| padding: 0.2rem 0.6rem; | |
| border-radius: 6px; | |
| } | |
| #theme-toggle:active { opacity: 0.7; } | |
| .h-title { | |
| font-size: 0.7rem; | |
| letter-spacing: 0.3em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| font-weight: 500; | |
| display: block; | |
| } | |
| .h-arabic { | |
| font-size: 1.1rem; | |
| color: var(--muted); | |
| margin-top: 0.15rem; | |
| display: block; | |
| } | |
| .search-wrap { position: relative; margin-bottom: 0.6rem; } | |
| #search { | |
| width: 100%; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| font-family: 'DM Sans', sans-serif; | |
| font-size: 1rem; | |
| font-weight: 300; | |
| padding: 0.7rem 2.25rem 0.7rem 0.9rem; | |
| border-radius: 8px; | |
| outline: none; | |
| -webkit-appearance: none; | |
| } | |
| #search:focus { border-color: var(--accent); } | |
| #search::placeholder { color: var(--muted); } | |
| #clear-btn { | |
| position: absolute; | |
| right: 0.7rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: none; | |
| border: none; | |
| color: var(--muted); | |
| font-size: 1rem; | |
| cursor: pointer; | |
| padding: 0.2rem; | |
| display: none; | |
| } | |
| .header-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| #count { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.62rem; | |
| color: var(--muted); | |
| letter-spacing: 0.1em; | |
| } | |
| #sort-btn { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.62rem; | |
| color: var(--muted); | |
| background: none; | |
| border: 1px solid var(--border); | |
| padding: 0.22rem 0.55rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| letter-spacing: 0.06em; | |
| } | |
| #sort-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); } | |
| #day-btn { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.62rem; | |
| color: var(--muted); | |
| background: none; | |
| border: 1px solid var(--border); | |
| padding: 0.22rem 0.55rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| letter-spacing: 0.06em; | |
| } | |
| #day-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); } | |
| #family-btn { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.62rem; | |
| color: var(--muted); | |
| background: none; | |
| border: 1px solid var(--border); | |
| padding: 0.22rem 0.55rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| letter-spacing: 0.06em; | |
| } | |
| #family-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); } | |
| #aa-btn { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.62rem; | |
| color: var(--muted); | |
| background: none; | |
| border: 1px solid var(--border); | |
| padding: 0.22rem 0.55rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| letter-spacing: 0.06em; | |
| } | |
| #aa-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); } | |
| main { | |
| max-width: 640px; | |
| margin: 0 auto; | |
| padding: 0 1.25rem 5rem; | |
| background: var(--bg); | |
| color: var(--text); | |
| } | |
| .section-label { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.58rem; | |
| letter-spacing: 0.25em; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| opacity: 0.6; | |
| padding: 2rem 0 0.55rem; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .card { | |
| padding: 1.35rem 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .card.hidden { display: none; } | |
| .card-top { | |
| display: flex; | |
| gap: 0.65rem; | |
| align-items: flex-start; | |
| margin-bottom: 0.85rem; | |
| } | |
| .card-num { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.58rem; | |
| color: var(--muted); | |
| padding-top: 0.2rem; | |
| flex-shrink: 0; | |
| min-width: 1.5rem; | |
| } | |
| .card-title { | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| color: var(--accent); | |
| line-height: 1.3; | |
| } | |
| .card-sub { | |
| font-size: 0.7rem; | |
| color: var(--muted); | |
| margin-top: 0.12rem; | |
| font-weight: 300; | |
| } | |
| .card-lines { list-style: none; } | |
| .card-lines li { | |
| font-size: 1.1rem; | |
| line-height: 1.85; | |
| color: var(--text); | |
| font-weight: 300; | |
| } | |
| .card-lines li:last-child { | |
| color: var(--accent); | |
| font-weight: 500; | |
| } | |
| .card-foot { | |
| margin-top: 0.9rem; | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .upvote { | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.62rem; | |
| color: var(--muted); | |
| background: none; | |
| border: 1px solid var(--border); | |
| padding: 0.28rem 0.65rem; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| letter-spacing: 0.04em; | |
| } | |
| .upvote.voted { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); } | |
| .no-results { | |
| text-align: center; | |
| padding: 3.5rem 0; | |
| color: var(--muted); | |
| font-size: 0.9rem; | |
| display: none; | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 1.5rem; | |
| font-family: 'DM Mono', monospace; | |
| font-size: 0.58rem; | |
| color: var(--muted); | |
| letter-spacing: 0.15em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <button id="theme-toggle" aria-label="Toggle theme"> | |
| <span class="h-title">Dhikr</span> | |
| <span class="h-arabic">ذِكْر</span> | |
| </button> | |
| <div class="search-wrap"> | |
| <input type="search" id="search" placeholder="search by feeling, word, or theme..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"> | |
| <button id="clear-btn" aria-label="Clear">✕</button> | |
| </div> | |
| <div class="header-meta"> | |
| <span id="count"></span> | |
| <div style="display:flex;gap:0.4rem;"> | |
| <button id="day-btn">day</button> | |
| <button id="family-btn">family</button> | |
| <button id="aa-btn">aa</button> | |
| <button id="sort-btn">sort by upvoted</button> | |
| </div> | |
| </div> | |
| </header> | |
| <main id="main"> | |
| <div class="section-label" data-section="Baseline">🌱 Baseline</div> | |
| <div class="card" data-section="Baseline" data-tags="wholeness baseline story return forward"><div class="card-top"><span class="card-num">01</span><div><div class="card-title">On Wholeness</div><div class="card-sub">looking forward</div></div></div><ul class="card-lines"><li>My story made me.</li><li>What's ahead calls me.</li><li>I return.</li></ul></div> | |
| <div class="section-label" data-section="Resentment">🔥 Resentment</div> | |
| <div class="card" data-section="Resentment" data-tags="wound resentment history past free story"><div class="card-top"><span class="card-num">02</span><div><div class="card-title">On the Wound</div><div class="card-sub">deep historical resentment</div></div></div><ul class="card-lines"><li>The wound was real.</li><li>The story ends here.</li><li>I am free.</li></ul></div> | |
| <div class="card" data-section="Resentment" data-tags="resentment daily legitimate walk on set down"><div class="card-top"><span class="card-num">03</span><div><div class="card-title">On Legitimate Daily Resentment</div></div></div><ul class="card-lines"><li>I see it clearly.</li><li>I set it down anyway.</li><li>I walk on.</li></ul></div> | |
| <div class="card" data-section="Resentment" data-tags="ego resentment protecting them breathe"><div class="card-top"><span class="card-num">04</span><div><div class="card-title">On Ego-Driven Daily Resentment</div></div></div><ul class="card-lines"><li>This is not about them.</li><li>Who am I protecting?</li><li>I breathe into it.</li></ul></div> | |
| <div class="card" data-section="Resentment" data-tags="minor small irritation sail along pass"><div class="card-top"><span class="card-num">05</span><div><div class="card-title">On Minor Resentments</div><div class="card-sub">small daily irritations</div></div></div><ul class="card-lines"><li>A small thing passed.</li><li>I let it go.</li><li>I sail along.</li></ul></div> | |
| <div class="card" data-section="Resentment" data-tags="slight self-insertion ego move on not about me"><div class="card-top"><span class="card-num">06</span><div><div class="card-title">On Perceived Slight</div><div class="card-sub">self-insertion into others' actions</div></div></div><ul class="card-lines"><li>This wasn't about me.</li><li>I was never part of it.</li><li>I move on.</li></ul></div> | |
| <div class="section-label" data-section="Mood States">🌊 Mood States</div> | |
| <div class="card" data-section="Mood States" data-tags="depression low flat feeling remain verdict lost"><div class="card-top"><span class="card-num">07</span><div><div class="card-title">On The Low</div><div class="card-sub">depression, flatness, absence of feeling</div></div></div><ul class="card-lines"><li>The low is not the verdict.</li><li>What cannot be felt is not lost.</li><li>I remain.</li></ul></div> | |
| <div class="card" data-section="Mood States" data-tags="rumination loop thoughts stuck mind passes truth"><div class="card-top"><span class="card-num">08</span><div><div class="card-title">On Rumination</div><div class="card-sub">looping thoughts, stuck mind</div></div></div><ul class="card-lines"><li>The loop is not the truth.</li><li>I have been here before.</li><li>This too passes.</li></ul></div> | |
| <div class="card" data-section="Mood States" data-tags="panic anxiety fear safe danger overwhelm"><div class="card-top"><span class="card-num">09</span><div><div class="card-title">On Panic</div><div class="card-sub">anxiety spike, fear response, overwhelm</div></div></div><ul class="card-lines"><li>I am not in danger.</li><li>This will pass through me.</li><li>I am safe.</li></ul></div> | |
| <div class="card" data-section="Mood States" data-tags="depression motivation depressed feel action move feet begin anyway"><div class="card-top"><span class="card-num">10</span><div><div class="card-title">On Motivation When Depressed</div><div class="card-sub">acting without feeling it first</div></div></div><ul class="card-lines"><li>I do not have to feel it to do it.</li><li>Action comes first.</li><li>I move my feet.</li></ul></div> | |
| <div class="card" data-section="Mood States" data-tags="stable stability good afraid brace fear well okay calm"><div class="card-top"><span class="card-num">11</span><div><div class="card-title">On Feeling Stable</div><div class="card-sub">afraid things are going well</div></div></div><ul class="card-lines"><li>Stability is not a trap.</li><li>I do not have to brace for what hasn't happened.</li><li>I let this be good.</li></ul></div> | |
| <div class="section-label" data-section="Hypomania & Urgency">⚡ Hypomania & Urgency</div> | |
| <div class="card" data-section="Hypomania & Urgency" data-tags="excitement hypomania racing thoughts urgency wait command"><div class="card-top"><span class="card-num">12</span><div><div class="card-title">On Excitement</div><div class="card-sub">hypomanic pull, racing thoughts</div></div></div><ul class="card-lines"><li>This feeling is not a command.</li><li>I do not have to act.</li><li>I wait.</li></ul></div> | |
| <div class="card" data-section="Hypomania & Urgency" data-tags="speed urgency chase slow smooth fast disturb"><div class="card-top"><span class="card-num">13</span><div><div class="card-title">On Speed</div><div class="card-sub">urgency, chasing, forcing</div></div></div><ul class="card-lines"><li>Slow is smooth and smooth is fast.</li><li>What I chase, I disturb.</li><li>I'm already there.</li></ul></div> | |
| <div class="card" data-section="Hypomania & Urgency" data-tags="gate timing readiness prepared right time startup idea"><div class="card-top"><span class="card-num">14</span><div><div class="card-title">On The Gate</div><div class="card-sub">timing, readiness</div></div></div><ul class="card-lines"><li>The gate does not open because the idea is good.</li><li>It opens when the time is right.</li><li>I arrive prepared.</li></ul></div> | |
| <div class="section-label" data-section="Self Worth & Ego">🪞 Self Worth & Ego</div> | |
| <div class="card" data-section="Self Worth & Ego" data-tags="self worth approval verdict opinion enough exist"><div class="card-top"><span class="card-num">15</span><div><div class="card-title">On Self Worth</div><div class="card-sub">worth defined by others' approval</div></div></div><ul class="card-lines"><li>I do not need their verdict to exist.</li><li>I was here before their opinion.</li><li>I am enough.</li></ul></div> | |
| <div class="card" data-section="Self Worth & Ego" data-tags="self compassion judgment mercy worthy speak"><div class="card-top"><span class="card-num">16</span><div><div class="card-title">On Self Compassion</div><div class="card-sub">harsh self-judgment</div></div></div><ul class="card-lines"><li>I would not speak to another this way.</li><li>I deserve the same mercy I give others.</li><li>I am worthy.</li></ul></div> | |
| <div class="card" data-section="Self Worth & Ego" data-tags="self love care worthy earned now"><div class="card-top"><span class="card-num">17</span><div><div class="card-title">On Self Love</div></div></div><ul class="card-lines"><li>I am worthy of my own care.</li><li>Not when I've earned it.</li><li>Now.</li></ul></div> | |
| <div class="card" data-section="Self Worth & Ego" data-tags="self esteem shown up evidence trust"><div class="card-top"><span class="card-num">18</span><div><div class="card-title">On Self Esteem</div></div></div><ul class="card-lines"><li>I have shown up.</li><li>That is evidence.</li><li>I trust it.</li></ul></div> | |
| <div class="card" data-section="Self Worth & Ego" data-tags="self forgiveness past where I was forward"><div class="card-top"><span class="card-num">19</span><div><div class="card-title">On Self Forgiveness</div></div></div><ul class="card-lines"><li>What I did came from where I was.</li><li>I am not where I was.</li><li>I forgive myself forward.</li></ul></div> | |
| <div class="card" data-section="Self Worth & Ego" data-tags="ego false humility armor apology enough smallness performed"><div class="card-top"><span class="card-num">20</span><div><div class="card-title">On Ego and False Humility</div><div class="card-sub">fragile ego, performed smallness</div></div></div><ul class="card-lines"><li>The armor is not who I am.</li><li>Neither is the apology for it.</li><li>I am enough, as I am.</li></ul></div> | |
| <div class="card" data-section="Self Worth & Ego" data-tags="space too much belong life made me"><div class="card-top"><span class="card-num">21</span><div><div class="card-title">On Taking Up Space</div></div></div><ul class="card-lines"><li>I am not too much.</li><li>I am exactly what this life made me.</li><li>I belong here.</li></ul></div> | |
| <div class="card" data-section="Self Worth & Ego" data-tags="masking potential hide real carry show up"><div class="card-top"><span class="card-num">22</span><div><div class="card-title">On Masking and Potential</div></div></div><ul class="card-lines"><li>What I hide is not less real.</li><li>What I carry is not less mine.</li><li>I show up as I am.</li></ul></div> | |
| <div class="section-label" data-section="People Pleasing & Boundaries">🤲 People Pleasing & Boundaries</div> | |
| <div class="card" data-section="People Pleasing & Boundaries" data-tags="boundaries end begins hold line"><div class="card-top"><span class="card-num">23</span><div><div class="card-title">On Boundaries</div></div></div><ul class="card-lines"><li>This is where I end.</li><li>And another begins.</li><li>I hold the line.</li></ul></div> | |
| <div class="card" data-section="People Pleasing & Boundaries" data-tags="conflict avoidance people pleasing peace truth honesty speak"><div class="card-top"><span class="card-num">24</span><div><div class="card-title">On Conflict Avoidance</div><div class="card-sub">people pleasing through silence</div></div></div><ul class="card-lines"><li>Keeping the peace is not the same as telling the truth.</li><li>I owe honesty more than comfort.</li><li>I speak.</li></ul></div> | |
| <div class="card" data-section="People Pleasing & Boundaries" data-tags="disappointing others pressure ground responsibility comfort"><div class="card-top"><span class="card-num">25</span><div><div class="card-title">On Disappointing Others</div><div class="card-sub">holding ground under pressure</div></div></div><ul class="card-lines"><li>I am allowed to disappoint.</li><li>Their comfort is not my responsibility.</li><li>I hold my ground.</li></ul></div> | |
| <div class="card" data-section="People Pleasing & Boundaries" data-tags="disappointment regret guilt shame anger out of hands unintended"><div class="card-top"><span class="card-num">26</span><div><div class="card-title">On Unintended Disappointment</div><div class="card-sub">something out of your hands</div></div></div><ul class="card-lines"><li>I did not choose this outcome.</li><li>Their disappointment is real and so is my regret.</li><li>I stay present with both.</li></ul></div> | |
| <div class="card" data-section="People Pleasing & Boundaries" data-tags="disappointment regret guilt shame anger choice knowingly let down"><div class="card-top"><span class="card-num">27</span><div><div class="card-title">On Chosen Disappointment</div><div class="card-sub">a choice you made knowingly</div></div></div><ul class="card-lines"><li>I made this choice with care.</li><li>Their hurt is real; so was my reason.</li><li>I stand in it.</li></ul></div> | |
| <div class="card" data-section="People Pleasing & Boundaries" data-tags="bait ball catch reactive land"><div class="card-top"><span class="card-num">28</span><div><div class="card-title">On Not Taking the Bait</div><div class="card-sub">reactive engagement</div></div></div><ul class="card-lines"><li>Someone threw the ball.</li><li>I don't have to catch it.</li><li>Let it land.</li></ul></div> | |
| <div class="card" data-section="People Pleasing & Boundaries" data-tags="peace voice prove say two cents hold"><div class="card-top"><span class="card-num">29</span><div><div class="card-title">On Holding My Peace</div><div class="card-sub">not needing to have my say</div></div></div><ul class="card-lines"><li>This does not need my voice.</li><li>I have nothing to prove here.</li><li>I hold my peace.</li></ul></div> | |
| <div class="card" data-section="People Pleasing & Boundaries" data-tags="unseen suffering recognition witness real"><div class="card-top"><span class="card-num">30</span><div><div class="card-title">On Being Unseen</div></div></div><ul class="card-lines"><li>My suffering is real.</li><li>It does not require their recognition to be true.</li><li>I witness myself.</li></ul></div> | |
| <div class="card" data-section="People Pleasing & Boundaries" data-tags="help unsolicited pushing imposing wanted ask lead support their way"><div class="card-top"><span class="card-num">31</span><div><div class="card-title">On Unsolicited Help</div><div class="card-sub">doing things they didn't ask for</div></div></div><ul class="card-lines"><li>My help is only help if it's wanted.</li><li>I ask before I act.</li><li>I let them lead.</li></ul></div> | |
| <div class="section-label" data-section="Relationships">💑 Relationships</div> | |
| <div class="card" data-section="Relationships" data-tags="false equivalence path measure walk anyway"><div class="card-top"><span class="card-num">32</span><div><div class="card-title">On False Equivalence</div></div></div><ul class="card-lines"><li>My path is my own.</li><li>I do not measure it against another's.</li><li>I walk it anyway.</li></ul></div> | |
| <div class="card" data-section="Relationships" data-tags="patience forgiveness resolved open hands wait"><div class="card-top"><span class="card-num">33</span><div><div class="card-title">On Patience in Forgiveness</div></div></div><ul class="card-lines"><li>This is not resolved today.</li><li>I do not need it to be.</li><li>I wait with open hands.</li></ul></div> | |
| <div class="card" data-section="Relationships" data-tags="mother-in-law difficult anxiety help user manage release emergency grace"><div class="card-top"><span class="card-num">34</span><div><div class="card-title">On a Difficult Person</div><div class="card-sub">helping without absorbing</div></div></div><ul class="card-lines"><li>She is doing the best she can with what she has.</li><li>That does not make it my emergency.</li><li>I help what I can and release the rest.</li></ul></div> | |
| <div class="card" data-section="Relationships" data-tags="cancel vacation trip plans disrupted mother-in-law pattern disappointment show up"><div class="card-top"><span class="card-num">35</span><div><div class="card-title">On Another Cancelled Plan</div><div class="card-sub">the pattern of it</div></div></div><ul class="card-lines"><li>This keeps happening.</li><li>My disappointment is real and allowed.</li><li>I let myself feel it before I show up.</li></ul></div> | |
| <div class="section-label" data-section="Growth & Responsibility">🌿 Growth & Responsibility</div> | |
| <div class="card" data-section="Growth & Responsibility" data-tags="mistake error wrong failure accountability correct move on"><div class="card-top"><span class="card-num">36</span><div><div class="card-title">On Making a Mistake</div></div></div><ul class="card-lines"><li>It happened.</li><li>I am not the sum of my worst moments.</li><li>I correct and move.</li></ul></div> | |
| <div class="card" data-section="Growth & Responsibility" data-tags="responsibility change did next own move"><div class="card-top"><span class="card-num">37</span><div><div class="card-title">On Taking Responsibility</div></div></div><ul class="card-lines"><li>I cannot change what I did.</li><li>I can change what I do next.</li><li>I own it and move.</li></ul></div> | |
| <div class="card" data-section="Growth & Responsibility" data-tags="parent parenting good enough past mistakes present perfect daughter"><div class="card-top"><span class="card-num">38</span><div><div class="card-title">On Being a Good Enough Parent</div><div class="card-sub">past mistakes</div></div></div><ul class="card-lines"><li>I cannot undo yesterday.</li><li>I can show up today.</li><li>She needs me present, not perfect.</li></ul></div> | |
| <div class="card" data-section="Growth & Responsibility" data-tags="failure fear worth trying evidence anyway"><div class="card-top"><span class="card-num">39</span><div><div class="card-title">On Fear of Failure</div></div></div><ul class="card-lines"><li>Failure is not the opposite of worth.</li><li>It is the evidence of trying.</li><li>I try anyway.</li></ul></div> | |
| <div class="card" data-section="Growth & Responsibility" data-tags="progress perfection finish begin step forward"><div class="card-top"><span class="card-num">40</span><div><div class="card-title">On Progress Not Perfection</div><div class="card-sub">first step, not completing the swing</div></div></div><ul class="card-lines"><li>I do not need to finish to begin.</li><li>Each step is whole in itself.</li><li>I move forward.</li></ul></div> | |
| <div class="card" data-section="Growth & Responsibility" data-tags="social inadequacy perform belonging already here enough"><div class="card-top"><span class="card-num">41</span><div><div class="card-title">On Social Inadequacy</div></div></div><ul class="card-lines"><li>I do not need to perform belonging.</li><li>I am already here.</li><li>That is enough.</li></ul></div> | |
| <div class="section-label" data-section="Pacing & Attention">⏳ Pacing & Attention</div> | |
| <div class="card" data-section="Pacing & Attention" data-tags="anticipate worst trust preparation control readiness"><div class="card-top"><span class="card-num">42</span><div><div class="card-title">On Anticipating the Worst</div><div class="card-sub">not trusting preparation</div></div></div><ul class="card-lines"><li>I have prepared.</li><li>What comes next is not mine to control.</li><li>I trust my readiness.</li></ul></div> | |
| <div class="card" data-section="Pacing & Attention" data-tags="long road shortcut cost time arrive slow"><div class="card-top"><span class="card-num">43</span><div><div class="card-title">On Taking the Long Road</div></div></div><ul class="card-lines"><li>The shortcut costs what I cannot see yet.</li><li>The longer road is the one I arrive on.</li><li>I take my time.</li></ul></div> | |
| <div class="card" data-section="Pacing & Attention" data-tags="full plate carry everything today day do what I can"><div class="card-top"><span class="card-num">44</span><div><div class="card-title">On Having a Full Plate</div></div></div><ul class="card-lines"><li>I cannot carry everything at once.</li><li>I set down what is not today's.</li><li>I do what I can.</li></ul></div> | |
| <div class="card" data-section="Pacing & Attention" data-tags="unfinished incomplete tasks distraction continue done"><div class="card-top"><span class="card-num">45</span><div><div class="card-title">On the Unfinished</div><div class="card-sub">distraction of incomplete tasks</div></div></div><ul class="card-lines"><li>It will be done.</li><li>Not by me, not right now.</li><li>I continue.</li></ul></div> | |
| <div class="card" data-section="Pacing & Attention" data-tags="planning over-planning capture committed schedule now return"><div class="card-top"><span class="card-num">46</span><div><div class="card-title">On Over-Planning</div><div class="card-sub">noting without scheduling</div></div></div><ul class="card-lines"><li>Captured, not committed.</li><li>It waits; I don't have to.</li><li>I return to now.</li></ul></div> | |
| <div class="card" data-section="Pacing & Attention" data-tags="procrastination avoiding avoidance noticing begin start doing"><div class="card-top"><span class="card-num">47</span><div><div class="card-title">On Procrastination</div><div class="card-sub">noticing avoidance in the moment</div></div></div><ul class="card-lines"><li>I see what I'm not doing.</li><li>That is enough to begin.</li><li>I start.</li></ul></div> | |
| <div class="card" data-section="Pacing & Attention" data-tags="navel gazing planning overthinking map doing work mundane cast off start"><div class="card-top"><span class="card-num">48</span><div><div class="card-title">On Navel Gazing</div><div class="card-sub">planning instead of doing</div></div></div><ul class="card-lines"><li>I have mapped enough to move.</li><li>The rest reveals itself by going.</li><li>I cast off.</li></ul></div> | |
| <div class="card" data-section="Pacing & Attention" data-tags="waiting reply message open thread others control timing patience"><div class="card-top"><span class="card-num">49</span><div><div class="card-title">On Open Threads</div><div class="card-sub">waiting for others to respond or act</div></div></div><ul class="card-lines"><li>Their timing is not mine to control.</li><li>The thread is open; I set it down.</li><li>I return to my own life.</li></ul></div> | |
| <div class="section-label" data-section="Somatic & Overwhelm">🫁 Somatic & Overwhelm</div> | |
| <div class="card" data-section="Somatic & Overwhelm" data-tags="noise loud sound clattering banging irritating ignore sensory shared space"><div class="card-top"><span class="card-num">50</span><div><div class="card-title">On Irritating Noise</div><div class="card-sub">sounds of someone with no regard</div></div></div><ul class="card-lines"><li>They are not doing this to me.</li><li>The noise is just noise.</li><li>I return to myself.</li></ul></div> | |
| <div class="card" data-section="Somatic & Overwhelm" data-tags="irritated irritation bothered frustrated write name journal process excise"><div class="card-top"><span class="card-num">51</span><div><div class="card-title">On Being Irritated</div><div class="card-sub">processing rather than suppressing</div></div></div><ul class="card-lines"><li>Something is bothering me.</li><li>I name it and set it on paper.</li><li>It no longer lives only in me.</li></ul></div> | |
| <div class="card" data-section="Somatic & Overwhelm" data-tags="overwhelm somatic party social ground feet breathe here"><div class="card-top"><span class="card-num">52</span><div><div class="card-title">On Overwhelm</div><div class="card-sub">somatic anchor — parties, social gathering, sensory overload</div></div></div><ul class="card-lines"><li>I am here.</li><li>My feet are on the ground.</li><li>I breathe.</li></ul></div> | |
| <div class="card" data-section="Somatic & Overwhelm" data-tags="door time anxiety late arrive morning day rush breathe"><div class="card-top"><span class="card-num">53</span><div><div class="card-title">On Getting Out the Door</div><div class="card-sub">time anxiety</div></div></div><ul class="card-lines"><li>This moment will pass.</li><li>Late or on time, we arrive.</li><li>I breathe.</li></ul></div> | |
| <div class="card" data-section="Somatic & Overwhelm" data-tags="daughter parenting step back trust learning wait independent"><div class="card-top"><span class="card-num">54</span><div><div class="card-title">On Letting Her Do It</div><div class="card-sub">stepping back, trusting her process</div></div></div><ul class="card-lines"><li>She is learning.</li><li>My stepping in teaches her I don't trust her.</li><li>I wait.</li></ul></div> | |
| <div class="card" data-section="Somatic & Overwhelm" data-tags="leave party function wife stay exasperated breathe soften her time social"><div class="card-top"><span class="card-num">55</span><div><div class="card-title">On Wanting to Leave</div><div class="card-sub">when she wants to stay till the end</div></div></div><ul class="card-lines"><li>She is not keeping me.</li><li>I can be here a little longer.</li><li>I breathe and soften.</li></ul></div> | |
| <div class="card" data-section="Somatic & Overwhelm" data-tags="fidget racing mind body still settle wind kite calm grounded"><div class="card-top"><span class="card-num">56</span><div><div class="card-title">On Fidgeting</div><div class="card-sub">when body and mind are racing</div></div></div><ul class="card-lines"><li>The wind is strong today.</li><li>I hold the string.</li><li>I settle.</li></ul></div> | |
| <div class="card" data-section="Somatic & Overwhelm" data-tags="anxiety plans planning coordinate perfect impress joy event social showing up"><div class="card-top"><span class="card-num">57</span><div><div class="card-title">On Planning Social Events</div><div class="card-sub">anxiety about perfection and impressing others</div></div></div><ul class="card-lines"><li>No one is grading this.</li><li>The joy is in showing up, not in pulling it off.</li><li>I let it be what it is.</li></ul></div> | |
| <div class="section-label" data-section="Rest & Sleep">😴 Rest & Sleep</div> | |
| <div class="card" data-section="Rest & Sleep" data-tags="sleep rest complete day nothing required"><div class="card-top"><span class="card-num">58</span><div><div class="card-title">On Sleep</div></div></div><ul class="card-lines"><li>The day is complete.</li><li>Nothing is required of me now.</li><li>I rest.</li></ul></div> | |
| <div class="card" data-section="Rest & Sleep" data-tags="sleep mind running tomorrow release night day done"><div class="card-top"><span class="card-num">59</span><div><div class="card-title">On Sleep</div><div class="card-sub">when the mind is still running</div></div></div><ul class="card-lines"><li>I have done what I could.</li><li>The rest belongs to tomorrow.</li><li>I release the night.</li></ul></div> | |
| <div class="card" data-section="Rest & Sleep" data-tags="nap napping rest set down let go just for now"><div class="card-top"><span class="card-num">60</span><div><div class="card-title">On Napping</div><div class="card-sub">permission without permanence</div></div></div><ul class="card-lines"><li>I set it all down.</li><li>Just for now.</li><li>I let go.</li></ul></div> | |
| <div class="section-label" data-section="Daily Practice">📿 Daily Practice</div> | |
| <div class="card" data-section="Daily Practice" data-tags="morning day ahead begin fresh yesterday open start daily"><div class="card-top"><span class="card-num">61</span><div><div class="card-title">🌅 On the Morning</div><div class="card-sub">the day ahead</div></div></div><ul class="card-lines"><li>The day is open.</li><li>What was, was.</li><li>I begin here.</li></ul></div> | |
| <div class="card" data-section="Daily Practice" data-tags="midday middle day in motion footing continue daily"><div class="card-top"><span class="card-num">62</span><div><div class="card-title">☀️ On Midday</div><div class="card-sub">the day in motion</div></div></div><ul class="card-lines"><li>I am in the middle of it.</li><li>That is exactly where I should be.</li><li>I continue.</li></ul></div> | |
| <div class="card" data-section="Daily Practice" data-tags="mid afternoon afternoon energy dip day long next step daily"><div class="card-top"><span class="card-num">63</span><div><div class="card-title">🌤️ On Mid Afternoon</div><div class="card-sub">when the day feels long</div></div></div><ul class="card-lines"><li>The afternoon asks less of me.</li><li>I do not have to push through it.</li><li>I move gently.</li></ul></div> | |
| <div class="card" data-section="Daily Practice" data-tags="night evening close day asked gave daily"><div class="card-top"><span class="card-num">64</span><div><div class="card-title">🌙 On the Night</div><div class="card-sub">closing the day</div></div></div><ul class="card-lines"><li>The day is complete.</li><li>I gave what I could.</li><li>I let it close.</li></ul></div> | |
| <div class="card" data-section="Daily Practice" data-tags="evening night planning tomorrow intention forward day prepare look ahead daily"><div class="card-top"><span class="card-num">65</span><div><div class="card-title">🌠 On Planning Tomorrow</div><div class="card-sub">end of day intention</div></div></div><ul class="card-lines"><li>The day that's coming deserves a moment of thought.</li><li>I set one intention.</li><li>I look forward to meeting it.</li></ul></div> | |
| <div class="card" data-section="Daily Practice" data-tags="still stillness waiting breathe space time nothing required rest pause day"><div class="card-top"><span class="card-num">66</span><div><div class="card-title">🕯️ On Being Still</div><div class="card-sub">waiting, space to breathe</div></div></div><ul class="card-lines"><li>This stillness is not wasted time.</li><li>Nothing is required of me right now.</li><li>I breathe into the space.</li></ul></div> | |
| <div class="card" data-section="Daily Practice" data-tags="10th step evening inventory honest cruelty verdict willing AA daily"><div class="card-top"><span class="card-num">67</span><div><div class="card-title">📋 On the 10th Step</div><div class="card-sub">evening inventory</div></div></div><ul class="card-lines"><li>I look clearly, without cruelty.</li><li>What I see is information, not verdict.</li><li>I am willing to be honest.</li></ul></div> | |
| <div class="card" data-section="Daily Practice" data-tags="sharing approval pride output response resilient esteem worthy name"><div class="card-top"><span class="card-num">68</span><div><div class="card-title">🗣️ On Sharing</div><div class="card-sub">pride without needing approval</div></div></div><ul class="card-lines"><li>I share when it is ready, not when I need to.</li><li>What I put out is worthy of my name.</li><li>The response is not mine to hold.</li></ul></div> | |
| <div class="card" data-section="Daily Practice" data-tags="AA meeting witness listening room present share truth receive"><div class="card-top"><span class="card-num">69</span><div><div class="card-title">🤝 On Being a Witness</div><div class="card-sub">in the AA room</div></div></div><ul class="card-lines"><li>My part right now is to witness.</li><li>Someone is speaking their truth.</li><li>I receive it.</li></ul></div> | |
| <div class="card" data-section="Daily Practice" data-tags="AA step 1 one higher power greater alone carry let go surrender"><div class="card-top"><span class="card-num">70</span><div><div class="card-title">🙏 Step 1</div><div class="card-sub">surrender</div></div></div><ul class="card-lines"><li>I believe something greater than me exists.</li><li>I do not have to carry this alone.</li><li>I let go.</li></ul></div> | |
| <div class="card" data-section="Daily Practice" data-tags="AA step 11 eleven prayer meditation will power carry listen"><div class="card-top"><span class="card-num">71</span><div><div class="card-title">🙏 Step 11</div><div class="card-sub">prayer and meditation</div></div></div><ul class="card-lines"><li>I seek only to know your will for me.</li><li>And the power to carry it out.</li><li>I listen.</li></ul></div> | |
| <div class="card" data-section="Daily Practice" data-tags="AA step 12 twelve carry service suffer show up give message"><div class="card-top"><span class="card-num">72</span><div><div class="card-title">🙏 Step 12</div><div class="card-sub">service</div></div></div><ul class="card-lines"><li>I have been given something real.</li><li>May I carry it to those who still suffer.</li><li>I show up.</li></ul></div> | |
| <div class="section-label" data-section="Living With Contempt">⚔️ Living With Contempt</div> | |
| <div class="card" data-section="Living With Contempt" data-tags="said words worth know who I am contempt marriage"><div class="card-top"><span class="card-num">73</span><div><div class="card-title">On What Was Said</div></div></div><ul class="card-lines"><li>The words were real.</li><li>They do not determine my worth.</li><li>I know who I am.</li></ul></div> | |
| <div class="card" data-section="Living With Contempt" data-tags="chain threat breath stand anyway control power marriage"><div class="card-top"><span class="card-num">74</span><div><div class="card-title">On the Chain</div><div class="card-sub">living under threat</div></div></div><ul class="card-lines"><li>The threat is real.</li><li>It does not own my next breath.</li><li>I stand anyway.</li></ul></div> | |
| <div class="card" data-section="Living With Contempt" data-tags="contempt mirror disgust erosion look away marriage daily"><div class="card-top"><span class="card-num">75</span><div><div class="card-title">On Contempt</div><div class="card-sub">daily erosion</div></div></div><ul class="card-lines"><li>Her contempt is not a mirror.</li><li>I do not see myself through it.</li><li>I look away.</li></ul></div> | |
| <div class="section-label" data-section="Ideas & Acceptance">💡 Ideas & Acceptance</div> | |
| <div class="card" data-section="Ideas & Acceptance" data-tags="ideas receive hold lightly plan act creative startup thinking"><div class="card-top"><span class="card-num">76</span><div><div class="card-title">On Receiving Ideas</div><div class="card-sub">letting ideas in without acting</div></div></div><ul class="card-lines"><li>The idea arrived. I received it.</li><li>It does not need to become a plan.</li><li>I hold it lightly.</li></ul></div> | |
| <div class="card" data-section="Ideas & Acceptance" data-tags="belong group flock room monitor acceptance social anxiety present"><div class="card-top"><span class="card-num">77</span><div><div class="card-title">On Belonging to the Flock</div><div class="card-sub">being present in a group without monitoring</div></div></div><ul class="card-lines"><li>I do not need to monitor the room.</li><li>I am already in it.</li><li>I belong to this.</li></ul></div> | |
| <div class="card" data-section="Ideas & Acceptance" data-tags="liked love impress audience audition enough approval people pleasing"><div class="card-top"><span class="card-num">78</span><div><div class="card-title">On Not Needing to Be Liked</div><div class="card-sub">releasing the need to impress</div></div></div><ul class="card-lines"><li>Not everyone is my audience.</li><li>I am not auditioning.</li><li>I am enough as I am.</li></ul></div> | |
| <div class="card" data-section="Ideas & Acceptance" data-tags="lie evade truth cover wrong caught honesty face accountability"><div class="card-top"><span class="card-num">79</span><div><div class="card-title">On Lying or Evading</div><div class="card-sub">facing truth instead of covering it</div></div></div><ul class="card-lines"><li>The cover costs more than the truth.</li><li>I already know what I did.</li><li>I face it.</li></ul></div> | |
| <div class="card" data-section="Ideas & Acceptance" data-tags="escape discomfort uncomfortable fleeing god relief self-will loosen spiritual"><div class="card-top"><span class="card-num">80</span><div><div class="card-title">On Reaching for Escape</div><div class="card-sub">sitting with discomfort instead of fleeing</div></div></div><ul class="card-lines"><li>The discomfort is not the enemy.</li><li>I do not have to solve it or flee it.</li><li>I loosen my grip and let God hold it.</li></ul></div> | |
| <div class="section-label" data-section="With My Daughter">👧 With My Daughter</div> | |
| <div class="card" data-section="With My Daughter" data-tags="daughter kid hyper energy settle calm preschool her voice"><div class="card-top"><span class="card-num">81</span><div><div class="card-title">On Her Energy</div><div class="card-sub">her voice — for saying together</div></div></div><ul class="card-lines"><li>My body has a lot of energy right now.</li><li>That's okay.</li><li>I can slow down.</li></ul></div> | |
| <div class="card" data-section="With My Daughter" data-tags="daughter kid task resist won't do preschool her voice"><div class="card-top"><span class="card-num">82</span><div><div class="card-title">On Doing the Task</div><div class="card-sub">her voice — for saying together</div></div></div><ul class="card-lines"><li>I don't want to yet.</li><li>That's okay too.</li><li>I can try one small piece.</li></ul></div> | |
| <div class="card" data-section="With My Daughter" data-tags="daughter kid hyper energy settle calm parent my pov"><div class="card-top"><span class="card-num">83</span><div><div class="card-title">On Her Energy</div><div class="card-sub">my POV — when she needs to settle</div></div></div><ul class="card-lines"><li>She is not broken, she is full of life.</li><li>My calm is the weather she adjusts to.</li><li>I slow down first.</li></ul></div> | |
| <div class="card" data-section="With My Daughter" data-tags="daughter kid task resist defying patience insistence parent my pov"><div class="card-top"><span class="card-num">84</span><div><div class="card-title">On Her Resistance</div><div class="card-sub">my POV — when she won't do the task</div></div></div><ul class="card-lines"><li>She is learning, not defying.</li><li>My patience teaches more than my insistence.</li><li>I stay steady.</li></ul></div> | |
| <div class="section-label" data-section="Prayers">🙏 Prayers</div> | |
| <div class="card" data-section="Prayers" data-tags="prayer wife resentment together soften weight peace marriage family"><div class="card-top"><span class="card-num">85</span><div><div class="card-title">For My Wife</div><div class="card-sub">a prayer for us</div></div></div><ul class="card-lines"><li>May the weight she carries lighten.</li><li>May what stands between us soften.</li><li>May we find each other there.</li></ul></div> | |
| <div class="card" data-section="Prayers" data-tags="prayer daughter resilient joy safety world home family"><div class="card-top"><span class="card-num">86</span><div><div class="card-title">For My Daughter</div><div class="card-sub">a prayer for her</div></div></div><ul class="card-lines"><li>May she move through this world with her whole self intact.</li><li>May she know joy that no one can take from her.</li><li>May she always feel safe coming home.</li></ul></div> | |
| <div class="card" data-section="Prayers" data-tags="prayer myself peace content enough moment behind"><div class="card-top"><span class="card-num">87</span><div><div class="card-title">For Myself</div><div class="card-sub">on being at peace and content</div></div></div><ul class="card-lines"><li>I am not behind.</li><li>This moment is enough.</li><li>I am at peace.</li></ul></div> | |
| <div class="card" data-section="Prayers" data-tags="prayer myself future hope open earned appreciation present"><div class="card-top"><span class="card-num">88</span><div><div class="card-title">For Myself</div><div class="card-sub">on the future and where I am now</div></div></div><ul class="card-lines"><li>What is ahead is not a threat.</li><li>I have earned my place in it.</li><li>I walk toward it open.</li></ul></div> | |
| <div class="card" data-section="Prayers" data-tags="prayer mother-in-law anxiety family grace help difficult"><div class="card-top"><span class="card-num">89</span><div><div class="card-title">For My Mother-in-Law</div><div class="card-sub">a prayer for her</div></div></div><ul class="card-lines"><li>May her anxiety find somewhere to rest.</li><li>May she ask for less than she takes.</li><li>May I meet her with more grace than I feel.</li></ul></div> | |
| <div class="card" data-section="Prayers" data-tags="prayer family friends love held show up well family"><div class="card-top"><span class="card-num">90</span><div><div class="card-title">For Family and Friends</div><div class="card-sub">a general prayer</div></div></div><ul class="card-lines"><li>May they know they are held.</li><li>May they find what they are looking for.</li><li>May I show up for them well.</li></ul></div> | |
| <div class="card" data-section="Prayers" data-tags="prayer mother narcissistic anxious overbearing love banter family"><div class="card-top"><span class="card-num">91</span><div><div class="card-title">For My Mother</div><div class="card-sub">a prayer for her</div></div></div><ul class="card-lines"><li>She loves loudly and without asking if I need it.</li><li>Beneath the noise is someone who means well.</li><li>May I receive her as she is.</li></ul></div> | |
| <div class="card" data-section="Prayers" data-tags="prayer father loving patient respect admire peer family"><div class="card-top"><span class="card-num">92</span><div><div class="card-title">For My Father</div><div class="card-sub">a prayer for him</div></div></div><ul class="card-lines"><li>We arrived at each other slowly.</li><li>The wait was worth it.</li><li>May we keep walking together.</li></ul></div> | |
| <div class="no-results" id="no-results">Nothing found. The feeling may not have a name yet.</div> | |
| </main> | |
| <footer>La ilaha illa Allah · March 2026</footer> | |
| <script> | |
| const body = document.body; | |
| const search = document.getElementById('search'); | |
| const clearBtn = document.getElementById('clear-btn'); | |
| const sortBtn = document.getElementById('sort-btn'); | |
| const countEl = document.getElementById('count'); | |
| const noResults = document.getElementById('no-results'); | |
| const mainEl = document.getElementById('main'); | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const cards = Array.from(document.querySelectorAll('.card')); | |
| const labels = Array.from(document.querySelectorAll('.section-label')); | |
| const original = [...cards]; | |
| // Theme — light default | |
| let dark = false; | |
| try { dark = localStorage.getItem('dhikr-theme') === 'dark'; } catch(e) {} | |
| if (dark) body.classList.add('dark'); | |
| themeToggle.addEventListener('click', () => { | |
| dark = !dark; | |
| body.classList.toggle('dark', dark); | |
| try { localStorage.setItem('dhikr-theme', dark ? 'dark' : 'light'); } catch(e) {} | |
| }); | |
| // Votes | |
| let votes = {}; | |
| try { votes = JSON.parse(localStorage.getItem('dhikr-votes') || '{}'); } catch(e) {} | |
| function saveVotes() { try { localStorage.setItem('dhikr-votes', JSON.stringify(votes)); } catch(e) {} } | |
| function key(card) { | |
| return (card.querySelector('.card-title')?.textContent || '') + '|' + (card.querySelector('.card-sub')?.textContent || ''); | |
| } | |
| cards.forEach(card => { | |
| const k = key(card); | |
| if (!votes[k]) votes[k] = 0; | |
| const foot = document.createElement('div'); | |
| foot.className = 'card-foot'; | |
| const btn = document.createElement('button'); | |
| btn.className = 'upvote' + (votes[k] > 0 ? ' voted' : ''); | |
| btn.textContent = votes[k] > 0 ? '↑ ' + votes[k] : '↑'; | |
| btn.addEventListener('click', () => { | |
| votes[k]++; | |
| btn.className = 'upvote voted'; | |
| btn.textContent = '↑ ' + votes[k]; | |
| saveVotes(); | |
| if (sortActive) render(); | |
| }); | |
| foot.appendChild(btn); | |
| card.appendChild(foot); | |
| }); | |
| const dayBtn = document.getElementById('day-btn'); | |
| const dayTitles = ['🌅 On the Morning', '☀️ On Midday', '🌤️ On Mid Afternoon', '🌙 On the Night', '🌠 On Planning Tomorrow']; | |
| let dayFilter = false; | |
| const aaBtn = document.getElementById('aa-btn'); | |
| const aaTitles = ['🙏 Step 1', '🙏 Step 11', '🙏 Step 12', '📋 On the 10th Step', '🤝 On Being a Witness']; | |
| let aaFilter = false; | |
| aaBtn.addEventListener('click', () => { | |
| aaFilter = !aaFilter; | |
| aaBtn.classList.toggle('active', aaFilter); | |
| if (aaFilter) { | |
| dayFilter = false; dayBtn.classList.remove('active'); | |
| familyFilter = false; familyBtn.classList.remove('active'); | |
| search.value = ''; | |
| clearBtn.style.display = 'none'; | |
| } | |
| render(); | |
| }); | |
| const familyBtn = document.getElementById('family-btn'); | |
| const familyTitles = ['For My Wife', 'For My Daughter', 'For My Mother-in-Law', 'For Family and Friends', 'For My Mother', 'For My Father']; | |
| let familyFilter = false; | |
| familyBtn.addEventListener('click', () => { | |
| familyFilter = !familyFilter; | |
| familyBtn.classList.toggle('active', familyFilter); | |
| if (familyFilter) { | |
| dayFilter = false; dayBtn.classList.remove('active'); | |
| aaFilter = false; aaBtn.classList.remove('active'); | |
| search.value = ''; | |
| clearBtn.style.display = 'none'; | |
| } | |
| render(); | |
| }); | |
| dayBtn.addEventListener('click', () => { | |
| dayFilter = !dayFilter; | |
| dayBtn.classList.toggle('active', dayFilter); | |
| if (dayFilter) { | |
| familyFilter = false; familyBtn.classList.remove('active'); | |
| aaFilter = false; aaBtn.classList.remove('active'); | |
| search.value = ''; | |
| clearBtn.style.display = 'none'; | |
| } | |
| render(); | |
| }); | |
| // Sort | |
| let sortActive = false; | |
| sortBtn.addEventListener('click', () => { | |
| sortActive = !sortActive; | |
| sortBtn.classList.toggle('active', sortActive); | |
| sortBtn.textContent = sortActive ? 'sort by default' : 'sort by upvoted'; | |
| render(); | |
| }); | |
| // Search | |
| search.addEventListener('input', () => { | |
| clearBtn.style.display = search.value ? 'block' : 'none'; | |
| render(); | |
| }); | |
| clearBtn.addEventListener('click', () => { | |
| search.value = ''; | |
| clearBtn.style.display = 'none'; | |
| render(); | |
| search.focus(); | |
| }); | |
| const labelMap = {}; | |
| labels.forEach(l => { labelMap[l.dataset.section] = l; }); | |
| function render() { | |
| const q = search.value.toLowerCase().trim(); | |
| const searching = q.length > 0; | |
| let visible = 0; | |
| cards.forEach(c => { | |
| const title = c.querySelector('.card-title')?.textContent || ''; | |
| const text = (c.dataset.tags || '') + ' ' + c.dataset.section + ' ' + c.textContent; | |
| const matchesSearch = !q || text.toLowerCase().includes(q); | |
| const matchesDay = !dayFilter || dayTitles.includes(title); | |
| const matchesFamily = !familyFilter || familyTitles.includes(title); | |
| const matchesAA = !aaFilter || aaTitles.includes(title); | |
| const match = matchesSearch && matchesDay && matchesFamily && matchesAA; | |
| c.classList.toggle('hidden', !match); | |
| if (match) visible++; | |
| }); | |
| const sorted = (searching || sortActive) | |
| ? [...original].sort((a, b) => (votes[key(b)] || 0) - (votes[key(a)] || 0)) | |
| : [...original]; | |
| cards.forEach(c => c.remove()); | |
| labels.forEach(l => l.remove()); | |
| let lastSection = null; | |
| sorted.forEach(card => { | |
| if (card.classList.contains('hidden')) return; | |
| const sec = card.dataset.section; | |
| if (!searching && sec !== lastSection) { | |
| if (labelMap[sec]) mainEl.insertBefore(labelMap[sec], noResults); | |
| lastSection = sec; | |
| } | |
| mainEl.insertBefore(card, noResults); | |
| }); | |
| noResults.style.display = visible === 0 ? 'block' : 'none'; | |
| countEl.textContent = visible === cards.length ? cards.length + ' dhikr' : visible + ' of ' + cards.length; | |
| } | |
| render(); | |
| search.focus(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment