-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
138 lines (123 loc) · 6.42 KB
/
Copy pathindex.html
File metadata and controls
138 lines (123 loc) · 6.42 KB
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="icons/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevStretch - Antiburnout Protocol</title>
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#080808">
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="DevStretch: an antiburnout stretch protocol for developers. 11 dev-themed exercises.">
<meta property="og:title" content="DevStretch: Antiburnout Protocol for Devs">
<meta property="og:description" content="Your body filed a bug report. Fix it with 11 dev-themed stretches.">
<meta property="og:type" content="website">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="bootSequence" aria-hidden="true">
<p class="boot-line"><span class="title">DEVSTRETCH v1.0.0</span></p>
<p class="boot-line">// antiburnout protocol for developers</p>
<p class="boot-line"> </p>
<p class="boot-line">Loading exercise protocols... <span class="ok">✓ OK</span></p>
<p class="boot-line">Initializing timer engine... <span class="ok">✓ OK</span></p>
<p class="boot-line">Compiling voice guidance... <span class="ok">✓ OK</span></p>
<p class="boot-line">Checking notification API... <span class="warn">⚠ permission req</span></p>
<p class="boot-line">Mounting PWA service worker... <span class="ok">✓ OK</span></p>
<p class="boot-line"> </p>
<p class="boot-line"><span class="ok">> System ready. Stay healthy, dev.</span></p>
</div>
<div id="mainContent" style="display:none;">
<div class="header">
<div class="header-top">
<span class="app-title">▸ DevStretch</span>
<span class="app-version">v1.0.0</span>
</div>
<div class="app-subtitle">// antiburnout protocol - 11 exercises</div>
</div>
<div class="status-bar">
<span id="statusLine" aria-live="polite">> System ready. Click START WORKOUT.</span>
</div>
<div class="top-controls">
<button class="toggle-btn toggle-on" id="soundToggle">🔊 SND:ON</button>
<button class="toggle-btn toggle-on" id="voiceToggle">🎤 VOX:ON</button>
<button class="toggle-btn" id="notifToggle">🔔 NOTIF:OFF</button>
<button class="toggle-btn install-btn" id="installBtn" style="display: none;">📥 INSTALL</button>
<button class="toggle-btn reset-btn" id="resetBtn">↺ RESET</button>
</div>
<div class="notif-row">
<span class="notif-label">// stand-up reminder:</span>
<select class="notif-select" id="reminderSelect">
<option value="20">every 20m</option>
<option value="45" selected>every 45m</option>
<option value="60">every 60m</option>
</select>
</div>
<div class="timer-display" id="timerDisplay">
<div class="timer-text" id="timerText" aria-live="assertive">00:00</div>
<div class="timer-label" id="timerLabel">// awaiting input...</div>
</div>
<div class="progress-container">
<div id="progressText" aria-hidden="true">[░░░░░░░░░░░░░░░░░░░░░░░░] 0%</div>
</div>
<div class="stats-grid">
<div class="stat-cell">
<span class="stat-value" id="statCurrent">00</span>
<span class="stat-label">Ex</span>
</div>
<div class="stat-cell">
<span class="stat-value" id="statTotal">11</span>
<span class="stat-label">Total</span>
</div>
<div class="stat-cell">
<span class="stat-value" id="statTotalTime">~18m</span>
<span class="stat-label">Time</span>
</div>
<div class="stat-cell">
<span class="stat-value" id="statElapsed">00:00</span>
<span class="stat-label">Done</span>
</div>
</div>
<div class="exercise-panel" id="exerciseInfo">
<span class="section-badge" id="sectionBadge">⚙️ READY TO BOOT</span>
<div class="exercise-header">
<div class="exercise-emoji" id="exerciseEmoji">🖥️</div>
<div class="exercise-title-block">
<div class="exercise-name" id="exerciseName">DevStretch Protocol</div>
<div class="exercise-subtitle" id="exerciseSubtitle">// body-refactoring system</div>
</div>
</div>
<hr class="exercise-divider">
<div class="exercise-description" id="exerciseDescription">
Click START to initialize your physical maintenance routine.
</div>
</div>
<div id="completionScreen" style="display:none;">
<div class="completion-title">✓ BUILD SUCCESS</div>
<div class="completion-time" id="completionTime">00:00</div>
<div class="completion-sub">
git commit -m "took care of myself"<br>
<span style="color:var(--green)">// Deployment to health successful.</span>
</div>
<button class="completion-reset" onclick="window.location.reload()">↺ REBOOT</button>
</div>
<div class="controls">
<button class="main-btn" id="startBtn">▶ START WORKOUT</button>
<button class="main-btn pause-btn" id="pauseBtn">⏸ PAUSE</button>
<div class="nav-row">
<button class="nav-btn" id="prevBtn" disabled>⏮ PREV</button>
<button class="nav-btn" id="nextBtn" disabled>NEXT ⏭</button>
</div>
</div>
<div class="footer">
DEVSTRETCH v1.0.0 - built by a dev for devs
</div>
</div>
<script src="exercises.js" defer></script>
<script src="notifications.js" defer></script>
<script src="script.js" defer></script>
<script src="pwa.js" defer></script>
</body>
</html>