breathwork-timer/index.html at main · CryptoRMac4/breathwork-timer · 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
117
118
119
120
121
122
123
124
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <title>Breathwork Timer — Box Breathing, 4-7-8 &amp; Coherent Breathing</title>
  <meta name="description" content="A free, open-source Breathwork timer with a guided visual pacer for box breathing, 4-7-8, and coherent breathing. No ads, no sign-up, works offline. Built by Liquid Breathwork." />
  <meta name="theme-color" content="#0a1628" />

  <!-- Open Graph -->
  <meta property="og:title" content="Breathwork Timer — Free Guided Breathing Pacer" />
  <meta property="og:description" content="A free, open-source visual Breathwork pacer for box breathing, 4-7-8, and coherent breathing. Built by Liquid Breathwork." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://cryptormac4.github.io/breathwork-timer/" />

  <link rel="canonical" href="https://cryptormac4.github.io/breathwork-timer/" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip-link" href="#controls">Skip to controls</a>

  <main class="app">
    <header class="masthead">
      <h1>Breathwork Timer</h1>
      <p class="tagline">A free, guided breathing pacer. Pick a pattern, follow the circle, let go.</p>
    </header>

    <section class="stage" aria-label="Breathing pacer">
      <div class="orb-wrap">
        <div class="orb" id="orb">
          <div class="orb-inner">
            <span class="phase-label" id="phaseLabel">Ready</span>
            <span class="phase-count" id="phaseCount">—</span>
          </div>
        </div>
        <div class="ring" aria-hidden="true"></div>
      </div>

      <p class="session-meta">
        <span id="cycleMeta">Cycle 0</span>
        <span class="dot" aria-hidden="true">·</span>
        <span id="timeMeta">00:00</span>
      </p>

      <div class="stage-actions">
        <button id="startBtn" class="btn btn-primary" type="button">Start</button>
        <button id="resetBtn" class="btn btn-ghost" type="button" disabled>Reset</button>
      </div>
    </section>

    <section id="controls" class="controls" aria-label="Settings">
      <fieldset class="presets">
        <legend>Pattern</legend>
        <div class="preset-grid" id="presetGrid" role="radiogroup" aria-label="Breathing pattern">
          <!-- buttons injected by app.js -->
        </div>
        <p class="preset-desc" id="presetDesc"></p>
      </fieldset>

      <fieldset class="custom" id="customFields" hidden>
        <legend>Custom timing (seconds)</legend>
        <div class="custom-grid">
          <label>Inhale <input type="number" id="inhale" min="1" max="20" value="4" inputmode="numeric" /></label>
          <label>Hold <input type="number" id="holdIn" min="0" max="20" value="4" inputmode="numeric" /></label>
          <label>Exhale <input type="number" id="exhale" min="1" max="20" value="4" inputmode="numeric" /></label>
          <label>Hold <input type="number" id="holdOut" min="0" max="20" value="4" inputmode="numeric" /></label>
        </div>
      </fieldset>

      <div class="toggles">
        <label class="toggle">
          <input type="checkbox" id="soundToggle" />
          <span>Soft chime on each phase</span>
        </label>
        <label class="toggle">
          <input type="checkbox" id="vibrateToggle" />
          <span>Vibrate on phase (mobile)</span>
        </label>
        <label class="toggle">
          <span class="toggle-text">Stop after</span>
          <select id="durationSelect">
            <option value="0">No limit</option>
            <option value="60">1 minute</option>
            <option value="180">3 minutes</option>
            <option value="300" selected>5 minutes</option>
            <option value="600">10 minutes</option>
          </select>
        </label>
      </div>
    </section>

    <section class="about">
      <h2>About these patterns</h2>
      <ul>
        <li><strong>Box breathing (4-4-4-4):</strong> equal inhale, hold, exhale, hold. Steadies the nervous system and sharpens focus.</li>
        <li><strong>4-7-8:</strong> a long, slow exhale that leans into the parasympathetic (rest) state. Good before sleep.</li>
        <li><strong>Coherent breathing (5-5):</strong> about six breaths per minute, the pace linked with heart-rate variability.</li>
        <li><strong>Calming (4-6):</strong> a gentle extended exhale to downshift without any breath-holding.</li>
      </ul>
      <p class="safety">
        Breathe through your nose where you can, and keep it comfortable. If you feel lightheaded, return to
        normal breathing. This timer is a wellness tool, not medical advice. If you are pregnant or have a
        cardiovascular or respiratory condition, talk with your doctor before starting a breathing practice.
      </p>
    </section>

    <footer class="footer">
      <p>
        Built with care by <a href="https://www.liquidbreathwork.com" rel="noopener">Liquid Breathwork</a>,
        a Breathwork education company in Phoenix, Arizona.
      </p>
      <p class="footer-links">
        <a href="https://www.liquidbreathwork.com/liquid-breathwork-training/" rel="noopener">Facilitator training</a>
        <span class="dot" aria-hidden="true">·</span>
        <a href="https://github.com/CryptoRMac4/breathwork-timer" rel="noopener">Source on GitHub</a>
        <span class="dot" aria-hidden="true">·</span>
        <span>MIT licensed, free forever</span>
      </p>
    </footer>
  </main>

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