-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathoptions.html
More file actions
163 lines (144 loc) · 7.02 KB
/
options.html
File metadata and controls
163 lines (144 loc) · 7.02 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breathe - Settings</title>
<link rel="stylesheet" href="options.css">
</head>
<body>
<div class="container">
<header class="header">
<h1>Breathe Settings</h1>
<p class="subtitle">Customize your breathing experience</p>
</header>
<div class="settings-section">
<h2>Default Session Settings</h2>
<div class="setting-group">
<label for="defaultPattern">Default Breathing Pattern:</label>
<select id="defaultPattern">
<option value="478">4-7-8 Breathing (Relaxation)</option>
<option value="box">Box Breathing (Focus)</option>
<option value="coherent">Coherent Breathing (Balance)</option>
<option value="calm">Calming Breath (Stress Relief)</option>
</select>
<p class="setting-description">Choose your preferred breathing pattern for new sessions.</p>
</div>
<div class="setting-group">
<label for="defaultDuration">Default Session Duration:</label>
<select id="defaultDuration">
<option value="1">1 minute</option>
<option value="3">3 minutes</option>
<option value="5">5 minutes</option>
<option value="10">10 minutes</option>
<option value="15">15 minutes</option>
<option value="20">20 minutes</option>
</select>
<p class="setting-description">Set your preferred session length.</p>
</div>
</div>
<div class="settings-section">
<h2>Audio & Visual</h2>
<div class="setting-group">
<label class="checkbox-label">
<input type="checkbox" id="soundEnabled">
<span class="checkmark"></span>
Enable Audio Cues
</label>
<p class="setting-description">Play gentle tones to guide your breathing rhythm.</p>
</div>
<div class="setting-group">
<label for="visualTheme">Visual Theme:</label>
<select id="visualTheme">
<option value="gradient">Gradient (Default)</option>
<option value="nature">Nature</option>
<option value="minimal">Minimal</option>
<option value="dark">Dark Mode</option>
</select>
<p class="setting-description">Choose a visual theme that helps you relax.</p>
</div>
</div>
<div class="settings-section">
<h2>Reminders & Goals</h2>
<div class="setting-group">
<label class="checkbox-label">
<input type="checkbox" id="reminderEnabled">
<span class="checkmark"></span>
Enable Breathing Reminders
</label>
<p class="setting-description">Get gentle reminders to take breathing breaks.</p>
</div>
<div class="setting-group" id="reminderSettings">
<label for="reminderInterval">Reminder Interval:</label>
<select id="reminderInterval">
<option value="30">Every 30 minutes</option>
<option value="60">Every hour</option>
<option value="120">Every 2 hours</option>
<option value="240">Every 4 hours</option>
</select>
<p class="setting-description">How often you'd like to be reminded.</p>
</div>
<div class="setting-group">
<label for="dailyGoal">Daily Goal:</label>
<select id="dailyGoal">
<option value="1">1 session per day</option>
<option value="2">2 sessions per day</option>
<option value="3">3 sessions per day</option>
<option value="5">5 sessions per day</option>
</select>
<p class="setting-description">Set a daily target for breathing sessions.</p>
</div>
</div>
<div class="settings-section">
<h2>Data & Privacy</h2>
<div class="setting-group">
<div class="stats-display">
<div class="stat-item">
<span class="stat-label">Total Sessions:</span>
<span id="totalSessionsCount" class="stat-value">0</span>
</div>
<div class="stat-item">
<span class="stat-label">Total Time:</span>
<span id="totalTimeCount" class="stat-value">0 minutes</span>
</div>
<div class="stat-item">
<span class="stat-label">Current Streak:</span>
<span id="currentStreak" class="stat-value">0 days</span>
</div>
</div>
</div>
<div class="setting-group">
<button id="exportData" class="action-btn secondary">Export Session Data</button>
<p class="setting-description">Download your breathing session history.</p>
</div>
<div class="setting-group">
<button id="clearData" class="action-btn danger">Clear All Data</button>
<p class="setting-description">Permanently delete all session history and reset settings.</p>
</div>
</div>
<div class="settings-section">
<h2>About</h2>
<div class="about-content">
<p><strong>Breathe Extension v1.0.0</strong></p>
<p>Guided diaphragmatic breathing exercises for stress relief, better sleep, and improved focus.</p>
<div class="benefits-list">
<h3>Benefits of Diaphragmatic Breathing:</h3>
<ul>
<li>Reduces stress and anxiety</li>
<li>Improves sleep quality</li>
<li>Enhances focus and concentration</li>
<li>Boosts athletic performance</li>
<li>Strengthens the immune system</li>
<li>Lowers blood pressure</li>
</ul>
</div>
</div>
</div>
<div class="actions">
<button id="saveSettings" class="action-btn primary">Save Settings</button>
<button id="resetSettings" class="action-btn secondary">Reset to Defaults</button>
</div>
</div>
<script src="options.js"></script>
</body>
</html>