coffeeinabit 0.0.11 → 0.0.13

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.
package/public/login.html CHANGED
@@ -4,40 +4,29 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>CoffeeInABit - Login</title>
7
+ <link rel="icon" type="image/png" href="/images/favicon.png">
7
8
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
9
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
9
10
  <link href="/styles.css" rel="stylesheet">
10
11
  </head>
11
- <body class="bg-light">
12
- <div class="dark-mode-toggle-container">
13
- <div class="dark-mode-toggle-button" onclick="toggleDarkMode()">
14
- <i class="bi bi-moon-stars"></i>
15
- <span>Dark Mode</span>
16
- <div class="form-check form-switch mb-0">
17
- <input class="form-check-input" type="checkbox" role="switch" id="darkModeToggle">
18
- </div>
19
- </div>
20
- </div>
21
-
12
+ <body>
22
13
  <div class="container-fluid vh-100 d-flex align-items-center justify-content-center">
23
14
  <div class="row w-100 justify-content-center">
24
15
  <div class="col-md-6 col-lg-4">
25
- <div class="card shadow-lg border-0">
26
- <div class="card-body p-5">
27
- <div class="text-center mb-4">
28
- <h1 class="h3 mb-3 fw-bold text-primary">
29
- <i class="bi bi-cup-hot-fill me-2"></i>
30
- CoffeeInABit
31
- </h1>
32
- <p class="text-muted">Sign in to your account to continue</p>
33
- </div>
16
+ <div class="glass-card">
17
+ <div class="text-center mb-4">
18
+ <h1 class="h3 mb-3 fw-bold" style="color: #ffffff;">
19
+ <img src="/images/favicon.svg" alt="CoffeeInABit" style="width: 75px; height: 75px; margin-bottom: 8px; vertical-align: middle;">
20
+ CoffeeInABit
21
+ </h1>
22
+ <p class="text-muted">Sign in to your account to continue</p>
23
+ </div>
34
24
 
35
- <div class="d-grid gap-2">
36
- <button id="loginButton" class="btn btn-primary btn-lg" onclick="loginToCloud()">
37
- <i class="bi bi-cloud-arrow-up me-2"></i>
38
- Login to CoffeeInABit Cloud
39
- </button>
40
- </div>
25
+ <div class="d-grid gap-2">
26
+ <button id="loginButton" class="glass-button btn-primary" onclick="loginToCloud()">
27
+ <i class="bi bi-cloud-arrow-up me-2"></i>
28
+ Login to CoffeeInABit Cloud
29
+ </button>
41
30
  </div>
42
31
  </div>
43
32
  </div>
@@ -51,31 +40,6 @@
51
40
  const loginButton = document.getElementById('loginButton');
52
41
  const toastContainer = document.getElementById('toastContainer');
53
42
 
54
- function initializeDarkMode() {
55
- const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
56
- const darkModeToggle = document.getElementById('darkModeToggle');
57
-
58
- if (darkModeEnabled) {
59
- document.body.classList.add('dark-mode');
60
- if (darkModeToggle) {
61
- darkModeToggle.checked = true;
62
- }
63
- }
64
- }
65
-
66
- function toggleDarkMode() {
67
- const darkModeToggle = document.getElementById('darkModeToggle');
68
- const isDarkMode = darkModeToggle.checked;
69
-
70
- if (isDarkMode) {
71
- document.body.classList.add('dark-mode');
72
- localStorage.setItem('darkMode', 'true');
73
- } else {
74
- document.body.classList.remove('dark-mode');
75
- localStorage.setItem('darkMode', 'false');
76
- }
77
- }
78
-
79
43
  async function checkAuthStatus() {
80
44
  try {
81
45
  const response = await fetch('/auth/status');
@@ -156,7 +120,6 @@
156
120
  history.replaceState({}, document.title, window.location.pathname);
157
121
  }
158
122
 
159
- initializeDarkMode();
160
123
  checkAuthStatus();
161
124
  </script>
162
125
  </body>
package/public/styles.css CHANGED
@@ -1,138 +1,199 @@
1
- body {
2
- transition: background-color 0.3s ease, color 0.3s ease;
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
3
5
  }
4
6
 
5
- body.dark-mode {
6
- background-color: #1a1a1a !important;
7
- color: #e0e0e0;
7
+ body {
8
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
9
+ background: linear-gradient(135deg, #2e6a82 0%, #0f3e44 50%, #073443 100%);
10
+ background-attachment: fixed;
11
+ min-height: 100vh;
12
+ color: #ffffff;
13
+ transition: all 0.3s ease;
8
14
  }
9
15
 
10
- body.dark-mode .navbar {
11
- background-color: #2d2d2d !important;
16
+ body::before {
17
+ content: '';
18
+ position: fixed;
19
+ top: 0;
20
+ left: 0;
21
+ width: 100%;
22
+ height: 100%;
23
+ background:
24
+ radial-gradient(circle at 20% 50%, rgba(135, 206, 235, 0.3) 0%, transparent 50%),
25
+ radial-gradient(circle at 80% 80%, rgba(176, 224, 230, 0.3) 0%, transparent 50%),
26
+ radial-gradient(circle at 40% 20%, rgba(173, 216, 230, 0.3) 0%, transparent 50%);
27
+ pointer-events: none;
28
+ z-index: 0;
29
+ }
30
+
31
+ body > * {
32
+ position: relative;
33
+ z-index: 1;
34
+ }
35
+
36
+ .glass-button {
37
+ background: rgba(255, 255, 255, 0.15);
38
+ backdrop-filter: blur(10px);
39
+ -webkit-backdrop-filter: blur(10px);
40
+ border: 1px solid rgba(255, 255, 255, 0.2);
41
+ border-radius: 12px;
42
+ color: #ffffff;
43
+ padding: 12px 24px;
44
+ font-size: 16px;
45
+ font-weight: 500;
46
+ cursor: pointer;
47
+ transition: all 0.3s ease;
48
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
49
+ display: inline-flex;
50
+ align-items: center;
51
+ justify-content: center;
52
+ gap: 8px;
53
+ text-decoration: none;
12
54
  }
13
55
 
14
- body.dark-mode .card {
15
- background-color: #2d2d2d;
16
- color: #e0e0e0;
17
- border-color: #404040 !important;
56
+ .glass-button:hover {
57
+ background: rgba(255, 255, 255, 0.25);
58
+ border-color: rgba(255, 255, 255, 0.3);
59
+ transform: translateY(-2px);
60
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
61
+ color: #ffffff;
18
62
  }
19
63
 
20
- body.dark-mode .card-header {
21
- background-color: #252525 !important;
22
- border-bottom-color: #404040 !important;
64
+ .glass-button:active {
65
+ transform: translateY(0);
23
66
  }
24
67
 
25
- body.dark-mode .bg-light {
26
- background-color: #1a1a1a !important;
68
+ .glass-button:disabled {
69
+ opacity: 0.6;
70
+ cursor: not-allowed;
71
+ transform: none;
27
72
  }
28
73
 
29
- body.dark-mode .bg-white {
30
- background-color: #252525 !important;
74
+ .glass-button.btn-primary {
75
+ background: rgba(79, 172, 254, 0.3);
76
+ border-color: rgba(79, 172, 254, 0.4);
31
77
  }
32
78
 
33
- body.dark-mode .text-muted {
34
- color: #a0a0a0 !important;
79
+ .glass-button.btn-primary:hover {
80
+ background: rgba(79, 172, 254, 0.4);
81
+ border-color: rgba(79, 172, 254, 0.5);
35
82
  }
36
83
 
37
- body.dark-mode .text-primary {
38
- color: #6db3f2 !important;
84
+ .glass-button.btn-danger {
85
+ background: rgba(255, 99, 132, 0.3);
86
+ border-color: rgba(255, 99, 132, 0.4);
39
87
  }
40
88
 
41
- body.dark-mode .dropdown-menu {
42
- background-color: #2d2d2d;
43
- border-color: #404040;
44
- color: #e0e0e0;
89
+ .glass-button.btn-danger:hover {
90
+ background: rgba(255, 99, 132, 0.4);
91
+ border-color: rgba(255, 99, 132, 0.5);
45
92
  }
46
93
 
47
- body.dark-mode .dropdown-menu strong {
48
- color: #e0e0e0;
94
+ .glass-card {
95
+ background: rgba(255, 255, 255, 0.1);
96
+ backdrop-filter: blur(15px);
97
+ -webkit-backdrop-filter: blur(15px);
98
+ border: 1px solid rgba(255, 255, 255, 0.2);
99
+ border-radius: 20px;
100
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
101
+ padding: 2rem;
102
+ transition: all 0.3s ease;
49
103
  }
50
104
 
51
- body.dark-mode .dropdown-menu small {
52
- color: #a0a0a0;
105
+ .glass-card:hover {
106
+ background: rgba(255, 255, 255, 0.15);
107
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
53
108
  }
54
109
 
55
- body.dark-mode .dropdown-item {
56
- color: #e0e0e0;
110
+ .glass-navbar {
111
+ background: rgba(255, 255, 255, 0.1) !important;
112
+ backdrop-filter: blur(15px);
113
+ -webkit-backdrop-filter: blur(15px);
114
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
115
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
57
116
  }
58
117
 
59
- body.dark-mode .dropdown-item:hover {
60
- background-color: #404040;
61
- color: #ffffff;
118
+ .glass-navbar .navbar-brand {
119
+ color: #ffffff !important;
120
+ font-weight: 600;
121
+ font-size: 1.25rem;
62
122
  }
63
123
 
64
- body.dark-mode .dropdown-divider {
65
- border-color: #404040;
124
+ .glass-navbar .nav-link {
125
+ color: rgba(255, 255, 255, 0.9) !important;
126
+ transition: all 0.3s ease;
66
127
  }
67
128
 
68
- body.dark-mode .border {
69
- border-color: #404040 !important;
129
+ .glass-navbar .nav-link:hover {
130
+ color: #ffffff !important;
70
131
  }
71
132
 
72
- body.dark-mode .alert-success {
73
- background-color: #1e4620;
74
- border-color: #2d6930;
75
- color: #a3d9a5;
133
+ .glass-dropdown {
134
+ background: rgba(97, 97, 97, 0.5) !important;
135
+ backdrop-filter: blur(15px);
136
+ -webkit-backdrop-filter: blur(15px);
137
+ border: 1px solid rgba(255, 255, 255, 0.3);
138
+ border-radius: 12px;
139
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
140
+ padding: 0.5rem 0;
76
141
  }
77
142
 
78
- body.dark-mode .alert-danger {
79
- background-color: #4a1f1f;
80
- border-color: #6b2c2c;
81
- color: #f0a3a3;
143
+ .glass-dropdown .dropdown-item {
144
+ color: rgba(255, 255, 255, 0.9);
145
+ padding: 0.75rem 1.5rem;
146
+ transition: all 0.2s ease;
82
147
  }
83
148
 
84
- body.dark-mode .badge {
85
- border: 1px solid #404040;
149
+ .glass-dropdown .dropdown-item:hover {
150
+ background: rgba(255, 255, 255, 0.2);
151
+ color: #ffffff;
86
152
  }
87
153
 
88
- body.dark-mode a:not(.btn):not(.dropdown-item) {
89
- color: #6db3f2;
154
+ .glass-dropdown .dropdown-divider {
155
+ border-color: rgba(255, 255, 255, 0.2);
156
+ margin: 0.5rem 0;
90
157
  }
91
158
 
92
- body.dark-mode .shadow-sm {
93
- box-shadow: 0 .125rem .25rem rgba(0,0,0,.5) !important;
159
+ .glass-dropdown strong {
160
+ color: #ffffff;
94
161
  }
95
162
 
96
- body.dark-mode .shadow-lg {
97
- box-shadow: 0 1rem 3rem rgba(0,0,0,.5) !important;
163
+ .glass-dropdown small {
164
+ color: rgba(255, 255, 255, 0.7);
98
165
  }
99
166
 
100
- body.dark-mode .form-check-input {
101
- background-color: #404040;
102
- border-color: #606060;
167
+ .glass-badge {
168
+ background: rgba(255, 255, 255, 0.2);
169
+ backdrop-filter: blur(10px);
170
+ -webkit-backdrop-filter: blur(10px);
171
+ border: 1px solid rgba(255, 255, 255, 0.3);
172
+ color: #ffffff;
173
+ padding: 0.5rem 1rem;
174
+ border-radius: 20px;
175
+ font-weight: 500;
176
+ font-size: 0.875rem;
103
177
  }
104
178
 
105
- body.dark-mode .form-check-input:checked {
106
- background-color: #0d6efd;
107
- border-color: #0d6efd;
179
+ .badge.bg-secondary {
180
+ background: rgba(255, 255, 255, 0.2) !important;
108
181
  }
109
182
 
110
- .dark-mode-toggle-container {
111
- position: fixed;
112
- top: 20px;
113
- right: 20px;
114
- z-index: 1000;
183
+ .badge.bg-info {
184
+ background: rgba(79, 172, 254, 0.3) !important;
115
185
  }
116
186
 
117
- .dark-mode-toggle-button {
118
- background-color: rgba(255, 255, 255, 0.9);
119
- border: 1px solid #dee2e6;
120
- border-radius: 50px;
121
- padding: 8px 16px;
122
- display: flex;
123
- align-items: center;
124
- gap: 8px;
125
- cursor: pointer;
126
- transition: all 0.3s ease;
187
+ .badge.bg-success {
188
+ background: rgba(76, 175, 80, 0.3) !important;
127
189
  }
128
190
 
129
- body.dark-mode .dark-mode-toggle-button {
130
- background-color: rgba(45, 45, 45, 0.9);
131
- border-color: #404040;
191
+ .badge.bg-warning {
192
+ background: rgba(255, 193, 7, 0.3) !important;
132
193
  }
133
194
 
134
- .dark-mode-toggle-button:hover {
135
- box-shadow: 0 .125rem .25rem rgba(0,0,0,.2);
195
+ .badge.bg-danger {
196
+ background: rgba(255, 99, 132, 0.3) !important;
136
197
  }
137
198
 
138
199
  .toast-container {
@@ -147,9 +208,12 @@ body.dark-mode .dark-mode-toggle-button {
147
208
  }
148
209
 
149
210
  .toast-notification {
150
- background-color: #ffffff;
151
- border-radius: 8px;
152
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
211
+ background: rgba(255, 255, 255, 0.15);
212
+ backdrop-filter: blur(15px);
213
+ -webkit-backdrop-filter: blur(15px);
214
+ border: 1px solid rgba(255, 255, 255, 0.2);
215
+ border-radius: 12px;
216
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
153
217
  padding: 16px 20px;
154
218
  display: flex;
155
219
  align-items: center;
@@ -159,6 +223,7 @@ body.dark-mode .dark-mode-toggle-button {
159
223
  transform: translateX(400px);
160
224
  animation: slideIn 0.3s ease-out forwards;
161
225
  transition: all 0.3s ease;
226
+ color: #ffffff;
162
227
  }
163
228
 
164
229
  .toast-notification.removing {
@@ -166,19 +231,19 @@ body.dark-mode .dark-mode-toggle-button {
166
231
  }
167
232
 
168
233
  .toast-notification.success {
169
- border-left: 4px solid #198754;
234
+ border-left: 4px solid rgba(76, 175, 80, 0.8);
170
235
  }
171
236
 
172
237
  .toast-notification.error {
173
- border-left: 4px solid #dc3545;
238
+ border-left: 4px solid rgba(255, 99, 132, 0.8);
174
239
  }
175
240
 
176
241
  .toast-notification.info {
177
- border-left: 4px solid #0dcaf0;
242
+ border-left: 4px solid rgba(79, 172, 254, 0.8);
178
243
  }
179
244
 
180
245
  .toast-notification.warning {
181
- border-left: 4px solid #ffc107;
246
+ border-left: 4px solid rgba(255, 193, 7, 0.8);
182
247
  }
183
248
 
184
249
  .toast-icon {
@@ -187,24 +252,24 @@ body.dark-mode .dark-mode-toggle-button {
187
252
  }
188
253
 
189
254
  .toast-notification.success .toast-icon {
190
- color: #198754;
255
+ color: rgba(76, 175, 80, 1);
191
256
  }
192
257
 
193
258
  .toast-notification.error .toast-icon {
194
- color: #dc3545;
259
+ color: rgba(255, 99, 132, 1);
195
260
  }
196
261
 
197
262
  .toast-notification.info .toast-icon {
198
- color: #0dcaf0;
263
+ color: rgba(79, 172, 254, 1);
199
264
  }
200
265
 
201
266
  .toast-notification.warning .toast-icon {
202
- color: #ffc107;
267
+ color: rgba(255, 193, 7, 1);
203
268
  }
204
269
 
205
270
  .toast-content {
206
271
  flex: 1;
207
- color: #333;
272
+ color: #ffffff;
208
273
  }
209
274
 
210
275
  .toast-content strong {
@@ -212,19 +277,20 @@ body.dark-mode .dark-mode-toggle-button {
212
277
  margin-bottom: 4px;
213
278
  font-size: 14px;
214
279
  font-weight: 600;
280
+ color: #ffffff;
215
281
  }
216
282
 
217
283
  .toast-content p {
218
284
  margin: 0;
219
285
  font-size: 13px;
220
- color: #666;
286
+ color: rgba(255, 255, 255, 0.9);
221
287
  }
222
288
 
223
289
  .toast-close {
224
290
  background: none;
225
291
  border: none;
226
292
  font-size: 20px;
227
- color: #999;
293
+ color: rgba(255, 255, 255, 0.7);
228
294
  cursor: pointer;
229
295
  padding: 0;
230
296
  width: 24px;
@@ -237,28 +303,7 @@ body.dark-mode .dark-mode-toggle-button {
237
303
  }
238
304
 
239
305
  .toast-close:hover {
240
- color: #333;
241
- }
242
-
243
- body.dark-mode .toast-notification {
244
- background-color: #2d2d2d;
245
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
246
- }
247
-
248
- body.dark-mode .toast-content {
249
- color: #e0e0e0;
250
- }
251
-
252
- body.dark-mode .toast-content p {
253
- color: #a0a0a0;
254
- }
255
-
256
- body.dark-mode .toast-close {
257
- color: #a0a0a0;
258
- }
259
-
260
- body.dark-mode .toast-close:hover {
261
- color: #e0e0e0;
306
+ color: #ffffff;
262
307
  }
263
308
 
264
309
  @keyframes slideIn {
@@ -275,24 +320,119 @@ body.dark-mode .toast-close:hover {
275
320
  }
276
321
  }
277
322
 
323
+ .form-check-input {
324
+ background-color: rgba(255, 255, 255, 0.2);
325
+ border-color: rgba(255, 255, 255, 0.3);
326
+ }
327
+
328
+ .form-check-input:checked {
329
+ background-color: rgba(79, 172, 254, 0.8);
330
+ border-color: rgba(79, 172, 254, 0.8);
331
+ }
332
+
333
+ .text-muted {
334
+ color: rgba(255, 255, 255, 0.7) !important;
335
+ }
336
+
337
+ .text-primary {
338
+ color: rgba(79, 172, 254, 1) !important;
339
+ }
340
+
341
+ a:not(.btn):not(.dropdown-item) {
342
+ color: rgba(79, 172, 254, 1);
343
+ text-decoration: none;
344
+ transition: color 0.2s ease;
345
+ }
346
+
347
+ a:not(.btn):not(.dropdown-item):hover {
348
+ color: rgba(79, 172, 254, 0.8);
349
+ }
350
+
278
351
  #browserViewToggle {
279
- color: inherit;
352
+ color: rgba(255, 255, 255, 0.9);
280
353
  transition: all 0.2s ease;
354
+ background: none;
355
+ border: none;
356
+ padding: 0;
281
357
  }
282
358
 
283
359
  #browserViewToggle:hover {
284
- color: #0d6efd;
360
+ color: rgba(79, 172, 254, 1);
285
361
  }
286
362
 
287
363
  #browserViewChevron {
288
364
  transition: transform 0.2s ease;
289
365
  }
290
366
 
291
- body.dark-mode #browserViewToggle {
292
- color: #e0e0e0;
367
+ .card {
368
+ background: rgba(255, 255, 255, 0.1);
369
+ backdrop-filter: blur(15px);
370
+ -webkit-backdrop-filter: blur(15px);
371
+ border: 1px solid rgba(255, 255, 255, 0.2);
372
+ border-radius: 20px;
373
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
374
+ color: #ffffff;
375
+ }
376
+
377
+ .card-header {
378
+ background: rgba(255, 255, 255, 0.0) !important;
379
+ border-bottom: none;
380
+ }
381
+
382
+ .card-title {
383
+ color: #ffffff;
384
+ }
385
+
386
+ .shadow-sm {
387
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
388
+ }
389
+
390
+ .shadow-lg {
391
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
392
+ }
393
+
394
+ .border {
395
+ border-color: rgba(255, 255, 255, 0.2) !important;
396
+ }
397
+
398
+ .bg-light {
399
+ background: transparent !important;
400
+ }
401
+
402
+ .bg-white {
403
+ background: rgba(255, 255, 255, 0.1) !important;
404
+ }
405
+
406
+ .bg-primary {
407
+ background: rgba(79, 172, 254, 0.3) !important;
408
+ }
409
+
410
+ .btn-link {
411
+ color: rgba(255, 255, 255, 0.9);
293
412
  }
294
413
 
295
- body.dark-mode #browserViewToggle:hover {
296
- color: #6db3f2;
414
+ .btn-link:hover {
415
+ color: rgba(79, 172, 254, 1);
297
416
  }
298
417
 
418
+ img {
419
+ border-radius: 12px;
420
+ }
421
+
422
+ .container-fluid {
423
+ position: relative;
424
+ z-index: 1;
425
+ }
426
+
427
+ .navbar {
428
+ position: relative;
429
+ z-index: 100;
430
+ }
431
+
432
+ h1, h2, h3, h4, h5, h6 {
433
+ color: #ffffff;
434
+ }
435
+
436
+ h1.h3 {
437
+ color: #ffffff;
438
+ }