@pheem49/mint 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/BUILD_AND_RELEASE.md +75 -0
  2. package/LICENSE +654 -0
  3. package/README.md +165 -0
  4. package/assets/Agent_Mint.png +0 -0
  5. package/assets/CLI_Screen.png +0 -0
  6. package/assets/Settings.png +0 -0
  7. package/assets/icon.png +0 -0
  8. package/benchmark_ai.js +71 -0
  9. package/main.js +968 -0
  10. package/mint-cli-logic.js +71 -0
  11. package/mint-cli.js +239 -0
  12. package/package.json +60 -0
  13. package/preload-picker.js +11 -0
  14. package/preload-settings.js +11 -0
  15. package/preload.js +37 -0
  16. package/privacy.txt +1 -0
  17. package/src/AI_Brain/Gemini_API.js +419 -0
  18. package/src/AI_Brain/autonomous_brain.js +139 -0
  19. package/src/AI_Brain/behavior_memory.js +114 -0
  20. package/src/AI_Brain/headless_agent.js +120 -0
  21. package/src/AI_Brain/knowledge_base.js +222 -0
  22. package/src/AI_Brain/proactive_engine.js +168 -0
  23. package/src/Automation_Layer/browser_automation.js +147 -0
  24. package/src/Automation_Layer/file_operations.js +80 -0
  25. package/src/Automation_Layer/open_app.js +56 -0
  26. package/src/Automation_Layer/open_website.js +38 -0
  27. package/src/CLI/chat_ui.js +468 -0
  28. package/src/CLI/list_features.js +56 -0
  29. package/src/CLI/onboarding.js +60 -0
  30. package/src/Command_Parser/parser.js +34 -0
  31. package/src/Plugins/dev_tools.js +41 -0
  32. package/src/Plugins/discord.js +20 -0
  33. package/src/Plugins/docker.js +45 -0
  34. package/src/Plugins/google_calendar.js +26 -0
  35. package/src/Plugins/obsidian.js +54 -0
  36. package/src/Plugins/plugin_manager.js +81 -0
  37. package/src/Plugins/spotify.js +45 -0
  38. package/src/Plugins/system_metrics.js +31 -0
  39. package/src/System/chat_history_manager.js +57 -0
  40. package/src/System/config_manager.js +73 -0
  41. package/src/System/custom_workflows.js +127 -0
  42. package/src/System/daemon_manager.js +67 -0
  43. package/src/System/system_automation.js +88 -0
  44. package/src/System/system_events.js +79 -0
  45. package/src/System/system_info.js +55 -0
  46. package/src/System/task_manager.js +85 -0
  47. package/src/UI/floating.css +80 -0
  48. package/src/UI/floating.html +17 -0
  49. package/src/UI/floating.js +67 -0
  50. package/src/UI/index.html +126 -0
  51. package/src/UI/preload-floating.js +7 -0
  52. package/src/UI/preload-spotlight.js +10 -0
  53. package/src/UI/preload-widget.js +5 -0
  54. package/src/UI/proactive-glow.html +42 -0
  55. package/src/UI/renderer.js +978 -0
  56. package/src/UI/screenPicker.html +214 -0
  57. package/src/UI/screenPicker.js +262 -0
  58. package/src/UI/settings.css +705 -0
  59. package/src/UI/settings.html +396 -0
  60. package/src/UI/settings.js +514 -0
  61. package/src/UI/spotlight.css +119 -0
  62. package/src/UI/spotlight.html +23 -0
  63. package/src/UI/spotlight.js +181 -0
  64. package/src/UI/styles.css +627 -0
  65. package/src/UI/widget.css +218 -0
  66. package/src/UI/widget.html +29 -0
  67. package/src/UI/widget.js +10 -0
  68. package/tech_news.txt +3 -0
  69. package/test_knowledge.txt +3 -0
@@ -0,0 +1,396 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="dark">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Mint — Settings</title>
8
+ <link rel="stylesheet" href="settings.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Mali:wght@400;500;600&family=Prompt:wght@400;500&family=Sarabun:wght@400;500&display=swap" rel="stylesheet">
10
+ </head>
11
+
12
+ <body>
13
+ <div class="settings-container">
14
+ <header class="settings-header drag-region">
15
+ <div class="header-left">
16
+ <span class="settings-icon">⚙️</span>
17
+ <h1>Settings</h1>
18
+ </div>
19
+ <button class="close-btn" id="close-btn" aria-label="Close">
20
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
21
+ stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
22
+ <line x1="18" y1="6" x2="6" y2="18"></line>
23
+ <line x1="6" y1="6" x2="18" y2="18"></line>
24
+ </svg>
25
+ </button>
26
+ </header>
27
+
28
+ <main class="settings-body">
29
+
30
+ <nav class="settings-sidebar" id="settings-sidebar">
31
+ <button class="tab-btn active" data-target="sect-general">⚙️ General</button>
32
+ <button class="tab-btn" data-target="sect-audio">🔊 Audio & Voice</button>
33
+ <button class="tab-btn" data-target="sect-automation">🤖 Automation</button>
34
+ <button class="tab-btn" data-target="sect-theme">🎨 Theme & UI</button>
35
+ <button class="tab-btn" data-target="sect-plugins">🧩 Plugins</button>
36
+ <button class="tab-btn" data-target="sect-shortcuts">⌨️ Shortcuts</button>
37
+ </nav>
38
+ <div class="settings-content" id="settings-content">
39
+
40
+ <div class="tab-pane active" id="sect-general">
41
+ <!-- API Key -->
42
+ <section class="setting-section">
43
+ <h2 class="section-title">🔑 Gemini API Key</h2>
44
+ <div class="setting-row">
45
+ <label for="api-key-input">API Key</label>
46
+ <div class="input-group">
47
+ <input type="password" id="api-key-input" placeholder="Enter your Gemini API Key..."
48
+ autocomplete="off">
49
+ <button class="toggle-visibility" id="toggle-key" title="Show/Hide">👁</button>
50
+ </div>
51
+ <div class="api-actions">
52
+ <button class="api-save-btn" id="save-api-key">Save API Key</button>
53
+ <span class="api-save-status" id="api-save-status" aria-live="polite"></span>
54
+ </div>
55
+ <p class="hint">Get your API Key at <a href="#" id="ai-studio-link">Google AI Studio</a></p>
56
+ </div>
57
+ <div class="setting-row" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 12px; background: rgba(139, 92, 246, 0.1); border-radius: 12px; border: 1px solid rgba(139, 92, 246, 0.2);">
58
+ <div style="display: flex; flex-direction: column; gap: 4px;">
59
+ <label for="show-desktop-widget" style="margin-bottom: 0; font-weight: 500;">Show Desktop AI Candidate</label>
60
+ <span class="hint" style="font-size: 0.75rem;">Show the mini AI character on your desktop</span>
61
+ </div>
62
+ <label class="toggle-switch">
63
+ <input type="checkbox" id="show-desktop-widget">
64
+ <span class="toggle-slider"></span>
65
+ </label>
66
+ </div>
67
+ </section>
68
+ <!-- AI Provider & Model -->
69
+ <section class="setting-section">
70
+ <h2 class="section-title">🧠 AI Engine</h2>
71
+ <div class="setting-row">
72
+ <label for="ai-provider-select">Provider</label>
73
+ <div class="input-group">
74
+ <select id="ai-provider-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
75
+ <option value="gemini" style="background: var(--bg-color)">Google Gemini (Cloud)</option>
76
+ <option value="ollama" style="background: var(--bg-color)">Ollama (Local / Private)</option>
77
+ </select>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- Gemini Options -->
82
+ <div id="gemini-options" style="margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(0,0,0,0.1);">
83
+ <div class="setting-row">
84
+ <label for="gemini-model-select">Gemini Model</label>
85
+ <div class="input-group">
86
+ <select id="gemini-model-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
87
+ <option value="gemini-2.5-flash" style="background: var(--bg-color)">gemini-2.5-flash</option>
88
+ <option value="gemini-3.1-flash-lite" style="background: var(--bg-color)">gemini-3.1-flash-lite</option>
89
+ <option value="gemini-3.1-flash-lite-preview" style="background: var(--bg-color)">gemini-3.1-flash-lite-preview</option>
90
+ <option value="custom" style="background: var(--bg-color)">Custom...</option>
91
+ </select>
92
+ </div>
93
+ </div>
94
+ <div class="setting-row" id="gemini-model-custom-row" style="display: none; margin-top: 10px;">
95
+ <label for="gemini-model-custom">Custom Model</label>
96
+ <input type="text" id="gemini-model-custom" placeholder="e.g. gemini-3.1-flash-lite-preview">
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Ollama Options -->
101
+ <div id="ollama-options" style="display: none; margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(0,0,0,0.1);">
102
+ <div class="setting-row">
103
+ <label for="ollama-model-input">Ollama Model</label>
104
+ <input type="text" id="ollama-model-input" placeholder="e.g. llama3:latest">
105
+ <p class="hint" style="margin-top: 8px; color: #fbbf24;">Make sure Ollama is running at http://localhost:11434</p>
106
+ </div>
107
+ </div>
108
+ </section>
109
+ </div>
110
+ <div class="tab-pane" id="sect-audio">
111
+ <!-- Audio & Voice -->
112
+ <section class="setting-section">
113
+ <h2 class="section-title">🔊 Audio & Voice</h2>
114
+ <div class="setting-row" style="display: flex; align-items: center; justify-content: space-between;">
115
+ <label for="enable-voice-reply" style="margin-bottom: 0;">Enable Voice Reply</label>
116
+ <label class="toggle-switch">
117
+ <input type="checkbox" id="enable-voice-reply">
118
+ <span class="toggle-slider"></span>
119
+ </label>
120
+ </div>
121
+ <p class="hint" style="margin-top: 8px;">If enabled, Mint will speak the responses out loud.</p>
122
+
123
+ <div class="setting-row" style="margin-top: 16px;">
124
+ <label for="tts-provider-select">Voice Engine</label>
125
+ <div class="input-group">
126
+ <select id="tts-provider-select" style="flex: 1; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s;">
127
+ <option value="google" style="background: var(--bg-color)">Google Cloud (Natural, Auto Lang)</option>
128
+ <option value="native" style="background: var(--bg-color)">OS Native (Supports Pitch)</option>
129
+ </select>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="setting-row" style="margin-top: 12px;">
134
+ <label for="tts-volume">Volume</label>
135
+ <div class="slider-group">
136
+ <input type="range" id="tts-volume" class="range-slider" min="0" max="1" step="0.1" value="1">
137
+ <span class="range-value" id="tts-volume-val">100%</span>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="setting-row">
142
+ <label for="tts-speed">Speed (Rate)</label>
143
+ <div class="slider-group">
144
+ <input type="range" id="tts-speed" class="range-slider" min="0.5" max="2" step="0.1" value="1">
145
+ <span class="range-value" id="tts-speed-val">1.0x</span>
146
+ </div>
147
+ </div>
148
+
149
+ <div class="setting-row">
150
+ <label for="tts-pitch">Pitch (OS Native Only)</label>
151
+ <div class="slider-group">
152
+ <input type="range" id="tts-pitch" class="range-slider" min="0" max="2" step="0.1" value="1">
153
+ <span class="range-value" id="tts-pitch-val">1.0</span>
154
+ </div>
155
+ </div>
156
+ </section>
157
+ </div>
158
+ <div class="tab-pane" id="sect-automation">
159
+ <!-- Automation Browser -->
160
+ <section class="setting-section">
161
+ <h2 class="section-title">🌐 Automation Browser</h2>
162
+ <div class="setting-row">
163
+ <label for="automation-browser-select">Browser Engine</label>
164
+ <div class="input-group">
165
+ <select id="automation-browser-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
166
+ <option value="chromium" style="background: var(--bg-color)">Chromium (Bundled)</option>
167
+ <option value="/usr/bin/firefox" style="background: var(--bg-color)">Firefox (System - Linux)</option>
168
+ </select>
169
+ </div>
170
+ </div>
171
+ </section>
172
+ <!-- Proactive Assistant -->
173
+ <section class="setting-section">
174
+ <h2 class="section-title">✨ Proactive Assistant</h2>
175
+
176
+ <div class="setting-row">
177
+ <label for="proactive-interval">Screen Capture Frequency</label>
178
+ <div class="slider-group">
179
+ <input type="range" id="proactive-interval"
180
+ min="30" max="300" step="30" value="60"
181
+ class="range-slider">
182
+ <span class="range-value" id="proactive-interval-display">60 sec</span>
183
+ </div>
184
+ <p class="hint">Interval for AI screen analysis (lower = faster response, but higher API usage)</p>
185
+ </div>
186
+
187
+ <div class="setting-row" style="margin-top: 14px;">
188
+ <label for="proactive-cooldown">Suggestion Cooldown</label>
189
+ <div class="slider-group">
190
+ <input type="range" id="proactive-cooldown"
191
+ min="60" max="600" step="60" value="120"
192
+ class="range-slider">
193
+ <span class="range-value" id="proactive-cooldown-display">2 min</span>
194
+ </div>
195
+ <p class="hint">Min time between repeat suggestions (higher = less intrusive)</p>
196
+ </div>
197
+ </section>
198
+ <!-- Custom Workflows -->
199
+ <section class="setting-section">
200
+ <h2 class="section-title">⚙️ Custom Workflows</h2>
201
+ <div class="setting-row" style="display: flex; align-items: center; justify-content: space-between;">
202
+ <label for="enable-custom-workflows" style="margin-bottom: 0;">Enable Custom Workflows</label>
203
+ <label class="toggle-switch">
204
+ <input type="checkbox" id="enable-custom-workflows">
205
+ <span class="toggle-slider"></span>
206
+ </label>
207
+ </div>
208
+ <div class="setting-row" style="margin-top: 10px;">
209
+ <p class="hint">Edit "If This Then Mint" rules (e.g. "If I open Zoom, check mic") directly via the JSON configuration file.</p>
210
+ </div>
211
+ <div class="setting-row" style="margin-top: 10px; display: flex; gap: 10px;">
212
+ <button class="btn-secondary" id="open-workflows-btn">Open workflows.json</button>
213
+ <button class="btn-primary" id="reload-workflows-btn">Reload Rules</button>
214
+ </div>
215
+ </section>
216
+ </div>
217
+ <div class="tab-pane" id="sect-theme">
218
+ <!-- Theme -->
219
+ <section class="setting-section">
220
+ <h2 class="section-title">🎨 Theme</h2>
221
+ <div class="theme-grid">
222
+ <button class="theme-card" data-theme="dark" id="theme-dark">
223
+ <div class="theme-preview dark-preview"></div>
224
+ <span>Dark</span>
225
+ </button>
226
+ <button class="theme-card" data-theme="light" id="theme-light">
227
+ <div class="theme-preview light-preview"></div>
228
+ <span>Light</span>
229
+ </button>
230
+ <button class="theme-card" data-theme="midnight" id="theme-midnight">
231
+ <div class="theme-preview midnight-preview"></div>
232
+ <span>Midnight</span>
233
+ </button>
234
+ <button class="theme-card" data-theme="custom" id="theme-custom">
235
+ <div class="theme-preview custom-preview" id="custom-theme-preview-box"></div>
236
+ <span>Custom</span>
237
+ </button>
238
+ </div>
239
+
240
+ <div id="custom-theme-controls" style="display: none; margin-top: 16px; padding: 16px; background: rgba(0,0,0,0.2); border-radius: 12px; border: 1px dashed var(--border);">
241
+ <div class="setting-row" style="margin-bottom: 12px;">
242
+ <label>Background Gradient</label>
243
+ <div style="display: flex; gap: 10px; align-items: center;">
244
+ <input type="color" id="custom-bg-start" title="Start Color">
245
+ <span style="font-size: 1.2rem;">→</span>
246
+ <input type="color" id="custom-bg-end" title="End Color">
247
+ </div>
248
+ </div>
249
+ <div class="setting-row">
250
+ <label for="custom-panel-bg">Panel Background</label>
251
+ <input type="color" id="custom-panel-bg">
252
+ </div>
253
+ </div>
254
+ </section>
255
+ <!-- Accent Color -->
256
+ <section class="setting-section">
257
+ <h2 class="section-title">🖌️ Accent Color</h2>
258
+ <div class="setting-row accent-row">
259
+ <div class="color-presets">
260
+ <button class="color-dot" data-color="#8b5cf6" style="background:#8b5cf6"
261
+ title="Purple"></button>
262
+ <button class="color-dot" data-color="#06b6d4" style="background:#06b6d4" title="Cyan"></button>
263
+ <button class="color-dot" data-color="#10b981" style="background:#10b981"
264
+ title="Green"></button>
265
+ <button class="color-dot" data-color="#f59e0b" style="background:#f59e0b"
266
+ title="Amber"></button>
267
+ <button class="color-dot" data-color="#ef4444" style="background:#ef4444" title="Red"></button>
268
+ <button class="color-dot" data-color="#ec4899" style="background:#ec4899" title="Pink"></button>
269
+ </div>
270
+ <div class="custom-color">
271
+ <label for="custom-color">Custom:</label>
272
+ <input type="color" id="custom-color" value="#8b5cf6">
273
+ </div>
274
+ </div>
275
+ </section>
276
+ <!-- UI Customizations (Glassmorphism & Font) -->
277
+ <div class="setting-row" style="margin-bottom: 12px;">
278
+ <label for="glass-blur-select">Glassmorphism (Blur)</label>
279
+ <div class="input-group">
280
+ <select id="glass-blur-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
281
+ <option value="blur(4px)" style="background: var(--bg-color)">Low (4px)</option>
282
+ <option value="blur(16px)" style="background: var(--bg-color)">Medium (16px) - Default</option>
283
+ <option value="blur(32px)" style="background: var(--bg-color)">High (32px)</option>
284
+ <option value="none" style="background: var(--bg-color)">Off (Solid)</option>
285
+ </select>
286
+ </div>
287
+ </div>
288
+ <div class="setting-row">
289
+ <label for="font-family-select">Font Family</label>
290
+ <div class="input-group">
291
+ <select id="font-family-select" style="width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text-main); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color 0.2s; cursor: pointer;">
292
+ <option value="'Outfit', sans-serif" style="background: var(--bg-color)">Outfit (Default)</option>
293
+ <option value="'Mali', cursive" style="background: var(--bg-color)">Mali (Cute Thai Font)</option>
294
+ <option value="'Prompt', sans-serif" style="background: var(--bg-color)">Prompt (Modern Thai)</option>
295
+ <option value="'Sarabun', sans-serif" style="background: var(--bg-color)">Sarabun (Formal Thai)</option>
296
+ </select>
297
+ </div>
298
+ <p class="hint" style="margin-top: 8px;">Mint supports beautiful Google Fonts!</p>
299
+ </div>
300
+ </section>
301
+ <!-- System Text Color -->
302
+ <section class="setting-section">
303
+ <h2 class="section-title">✍️ System Text Color</h2>
304
+ <div class="setting-row">
305
+ <div class="custom-color" style="justify-content: flex-start; gap: 12px;">
306
+ <label for="system-text-color">Choose Color:</label>
307
+ <input type="color" id="system-text-color" value="#f8fafc">
308
+ </div>
309
+ <p class="hint" style="margin-top: 8px;">Adjust system text color (menu, headers) excluding chat messages.</p>
310
+ </div>
311
+ </section>
312
+ </div>
313
+ <div class="tab-pane" id="sect-plugins">
314
+ <!-- Plugins & Integrations -->
315
+ <section class="setting-section">
316
+ <h2 class="section-title">🧩 Plugins & Integrations</h2>
317
+ <div class="plugin-list">
318
+ <!-- Spotify -->
319
+ <div class="plugin-card">
320
+ <div class="plugin-icon">🎵</div>
321
+ <div class="plugin-info">
322
+ <div class="plugin-name">Spotify</div>
323
+ <div class="plugin-desc">Control playback with AI (req: playerctl)</div>
324
+ </div>
325
+ <div class="plugin-actions">
326
+ <button class="btn-connect" id="btn-plugin-spotify" data-plugin="spotify">Connect</button>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Google Calendar -->
331
+ <div class="plugin-card">
332
+ <div class="plugin-icon">📅</div>
333
+ <div class="plugin-info">
334
+ <div class="plugin-name">Google Calendar</div>
335
+ <div class="plugin-desc">Read and schedule your events via Gemini</div>
336
+ </div>
337
+ <div class="plugin-actions">
338
+ <button class="btn-connect" id="btn-plugin-calendar" data-plugin="calendar">Connect</button>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Discord -->
343
+ <div class="plugin-card">
344
+ <div class="plugin-icon">💬</div>
345
+ <div class="plugin-info">
346
+ <div class="plugin-name">Discord RPC</div>
347
+ <div class="plugin-desc">Show "Using Mint Assistant" on your Discord status</div>
348
+ </div>
349
+ <div class="plugin-actions">
350
+ <button class="btn-connect" id="btn-plugin-discord" data-plugin="discord">Connect</button>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </section>
355
+ </div>
356
+ <div class="tab-pane" id="sect-shortcuts">
357
+ <!-- Keyboard Shortcuts -->
358
+ <section class="setting-section">
359
+ <h2 class="section-title">⌨️ Keyboard Shortcuts</h2>
360
+ <div class="shortcut-list">
361
+ <div class="shortcut-item">
362
+ <span>Show/Hide Mint Window</span>
363
+ <div class="keys">
364
+ <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Space</kbd>
365
+ </div>
366
+ </div>
367
+ <div class="shortcut-item">
368
+ <span>Open Spotlight</span>
369
+ <div class="keys">
370
+ <kbd>Alt</kbd>+<kbd>Space</kbd>
371
+ </div>
372
+ </div>
373
+ <div class="shortcut-item">
374
+ <span>Close / Dismiss</span>
375
+ <div class="keys">
376
+ <kbd>Esc</kbd>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </section>
381
+ </div>
382
+ </div> <!-- end settings-content -->
383
+
384
+ </main>
385
+
386
+ <footer class="settings-footer">
387
+ <button class="btn-danger" id="quit-btn" style="margin-right: auto;">Quit Application</button>
388
+ <button class="btn-secondary" id="reset-btn">Reset to Default</button>
389
+ <button class="btn-primary" id="save-btn">Save Settings</button>
390
+ </footer>
391
+ </div>
392
+
393
+ <script src="settings.js"></script>
394
+ </body>
395
+
396
+ </html>