affirmations/index.html at main · careylzh/affirmations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Affirmations — a soft place for the good stuff</title>
  <meta name="description" content="A radiant little text pad for collecting and reflecting on good things, kind deeds, and gentle plans." />
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌤️</text></svg>" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Parallax sky: layers drift with mouse + scroll -->
  <div class="sky" aria-hidden="true">
    <div class="sky-layer" data-depth="0.015">
      <div class="orb orb-sun"></div>
      <div class="orb orb-rose"></div>
    </div>
    <div class="sky-layer" data-depth="0.035">
      <div class="orb orb-sky"></div>
      <div class="orb orb-mint"></div>
    </div>
    <div class="sky-layer" data-depth="0.06">
      <div class="orb orb-lilac"></div>
      <div class="orb orb-peach"></div>
    </div>
    <div class="sky-layer sky-motes" data-depth="0.09" id="motes"></div>
    <div class="sky-grain"></div>
  </div>

  <canvas id="sparkles" aria-hidden="true"></canvas>

  <main>
    <header class="hero">
      <p class="hero-kicker" id="greeting">hello, radiant human</p>
      <h1>Affirmations</h1>
      <p class="hero-sub">a soft place to keep the good stuff — things that happened,
        kindnesses you gave, and gentle plans for more.</p>
      <button class="prompt-pill" id="promptPill" type="button" title="Tap for another prompt">
        <span class="prompt-spark">✦</span>
        <span id="promptText"></span>
      </button>
    </header>

    <!-- Composer -->
    <section class="card composer" aria-label="Write something good">
      <div class="chip-row" id="catChips" role="radiogroup" aria-label="What kind of good thing?">
        <button class="chip is-active" data-cat="glow"  type="button" role="radio" aria-checked="true">✨ good thing</button>
        <button class="chip" data-cat="deed"  type="button" role="radio" aria-checked="false">💛 kind deed</button>
        <button class="chip" data-cat="plan"  type="button" role="radio" aria-checked="false">🌱 plan to do</button>
        <button class="chip" data-cat="grace" type="button" role="radio" aria-checked="false">🙏 gratitude</button>
      </div>
      <textarea id="entryText" rows="3" maxlength="2000"
        placeholder="What went well? What are you proud of? What small light did you notice today…"></textarea>
      <div class="composer-foot">
        <span class="soft-note" id="countNote">it all counts, even the tiny things</span>
        <button class="btn-save" id="saveBtn" type="button">keep this ✦</button>
      </div>
    </section>

    <!-- Reflect -->
    <section class="card reflect" id="reflectCard" hidden aria-label="A memory to reflect on">
      <div class="reflect-head">
        <span class="reflect-label">↺ remember this?</span>
        <button class="link-btn" id="anotherMemory" type="button">another</button>
      </div>
      <blockquote id="reflectText"></blockquote>
      <p class="reflect-meta" id="reflectMeta"></p>
    </section>

    <!-- Stats -->
    <section class="glowbar" id="glowbar" hidden>
      <div class="glowstat"><strong id="statTotal">0</strong><span>moments kept</span></div>
      <div class="glowstat"><strong id="statDeeds">0</strong><span>kind deeds</span></div>
      <div class="glowstat"><strong id="statDone">0</strong><span>plans bloomed</span></div>
      <div class="glowstat"><strong id="statStreak">0</strong><span>day streak</span></div>
    </section>

    <!-- Timeline -->
    <section class="timeline" aria-label="Your collected moments">
      <div class="timeline-head">
        <h2>your light, collected</h2>
        <div class="chip-row chip-row-small" id="filterChips">
          <button class="chip is-active" data-filter="all" type="button">all</button>
          <button class="chip" data-filter="glow" type="button">✨</button>
          <button class="chip" data-filter="deed" type="button">💛</button>
          <button class="chip" data-filter="plan" type="button">🌱</button>
          <button class="chip" data-filter="grace" type="button">🙏</button>
        </div>
      </div>
      <div id="entries"></div>
      <div class="empty" id="emptyState">
        <p>✨</p>
        <p>nothing here yet — and that's okay.<br/>write one small good thing above to begin.</p>
      </div>
    </section>

    <footer class="foot">
      <p>everything you write stays in <em>this browser only</em> — nothing is uploaded, ever.</p>
      <p>
        <button class="link-btn" id="exportBtn" type="button">export</button> ·
        <button class="link-btn" id="importBtn" type="button">import</button>
        <input type="file" id="importFile" accept="application/json" hidden />
      </p>
      <p class="foot-heart">made with warmth · be gentle with yourself</p>
    </footer>
  </main>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

  <script src="app.js"></script>
</body>
</html>