@jjlmoya/utils-sports 1.43.0 → 1.44.0

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/tool/runningPacePredictor/component.astro +4 -2
  3. package/src/tool/runningPacePredictor/running-pace-predictor.css +249 -150
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jjlmoya/utils-sports",
3
- "version": "1.43.0",
3
+ "version": "1.44.0",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
package/src/tool/runningPacePredictor/component.astro CHANGED
@@ -9,8 +9,9 @@ interface Props {
9
9
  const { ui } = Astro.props;
10
10
  ---
11
11
 
12
- <div class="rpp-container">
13
- <div class="rpp-unit-switch-container">
12
+ <div class="rpp-card">
13
+ <div class="rpp-container">
14
+ <div class="rpp-unit-switch-container">
14
15
  <button class="rpp-btn-unit active" data-unit="km">{ui.unitKm}</button>
15
16
  <button class="rpp-btn-unit" data-unit="mi">{ui.unitMiles}</button>
16
17
  </div>
@@ -71,6 +72,7 @@ const { ui } = Astro.props;
71
72
  <div class="rpp-zones-grid" id="rpp-zones-cards"></div>
72
73
  </div>
73
74
  </div>
75
+ </div>
74
76
 
75
77
  <script>
76
78
  import {
package/src/tool/runningPacePredictor/running-pace-predictor.css CHANGED
@@ -1,268 +1,362 @@
1
1
  .rpp-card {
2
- background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
3
- border: 1px solid rgba(255, 255, 255, 0.1);
4
- border-radius: 24px;
5
- padding: 2.25rem;
6
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
7
- color: #f8fafc;
2
+ background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(59, 130, 246, 0.02) 100%), var(--bg-surface, #fff);
3
+ border: 1px solid var(--border-base, #e2e8f0);
4
+ border-radius: 20px;
5
+ padding: 1.75rem;
6
+ box-shadow: 0 20px 40px -15px rgba(37, 99, 235, 0.12);
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: 1.75rem;
10
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
8
11
  }
9
12
 
10
- .rpp-unit-toggle {
13
+ .theme-dark .rpp-card {
14
+ background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(37, 99, 235, 0.1) 100%), var(--bg-surface, #0f172a);
15
+ border-color: var(--border-base, #1e293b);
16
+ box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
17
+ }
18
+
19
+ .rpp-container {
11
20
  display: flex;
12
- background: rgba(15, 23, 42, 0.6);
13
- border: 1px solid rgba(255, 255, 255, 0.1);
14
- border-radius: 14px;
15
- padding: 0.3rem;
16
- margin-bottom: 2rem;
17
- gap: 0.3rem;
21
+ flex-direction: column;
22
+ gap: 1.5rem;
23
+ }
24
+
25
+ .rpp-unit-switch-container {
26
+ display: flex;
27
+ justify-content: flex-end;
28
+ align-items: center;
29
+ gap: 0.5rem;
18
30
  }
19
31
 
20
32
  .rpp-btn-unit {
21
- flex: 1;
22
- padding: 0.75rem 1.25rem;
23
- font-size: 0.95rem;
33
+ background: var(--bg-surface-elevated, #fff);
34
+ border: 1px solid var(--border-base, #94a3b8);
35
+ color: var(--text-base, #1e293b);
36
+ padding: 0.45rem 1rem;
37
+ border-radius: 25px;
38
+ font-size: 0.85rem;
24
39
  font-weight: 700;
25
- border: none;
26
- border-radius: 10px;
27
- background: transparent;
28
- color: #94a3b8;
29
40
  cursor: pointer;
30
- transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
41
+ transition: all 0.2s ease;
42
+ }
43
+
44
+ .theme-dark .rpp-btn-unit {
45
+ background: var(--bg-surface-elevated, #1e293b);
46
+ border-color: var(--border-base, #475569);
47
+ color: var(--text-base, #f8fafc);
48
+ }
49
+
50
+ .rpp-btn-unit:hover {
51
+ border-color: var(--color-primary, #2563eb);
52
+ color: var(--color-primary, #2563eb);
31
53
  }
32
54
 
33
55
  .rpp-btn-unit.active {
34
- background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
56
+ background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
57
+ border-color: #2563eb;
35
58
  color: #fff;
36
- box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
59
+ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
37
60
  }
38
61
 
39
- .rpp-grid {
40
- display: grid;
41
- grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
42
- gap: 2rem;
62
+ .rpp-calculator-card {
63
+ background: var(--bg-surface-elevated, #f8fafc);
64
+ border: 1px solid var(--border-base, #e2e8f0);
65
+ border-radius: 16px;
66
+ padding: 1.5rem;
67
+ display: flex;
68
+ flex-direction: column;
69
+ gap: 1.25rem;
43
70
  }
44
71
 
45
- .rpp-section {
46
- background: rgba(30, 41, 59, 0.4);
47
- backdrop-filter: blur(12px);
48
- border: 1px solid rgba(255, 255, 255, 0.08);
49
- border-radius: 20px;
50
- padding: 1.75rem;
72
+ .theme-dark .rpp-calculator-card {
73
+ background: var(--bg-surface-elevated, #1e293b);
74
+ border-color: var(--border-base, #334155);
51
75
  }
52
76
 
53
- .rpp-section-title {
54
- font-size: 1.25rem;
77
+ .rpp-card-title {
78
+ font-size: 1.2rem;
55
79
  font-weight: 800;
56
- margin-bottom: 1.5rem;
57
- color: #f8fafc;
80
+ color: var(--text-base, #0f172a);
81
+ }
82
+
83
+ .theme-dark .rpp-card-title {
84
+ color: var(--text-base, #f8fafc);
85
+ }
86
+
87
+ .rpp-presets-bar {
58
88
  display: flex;
59
89
  align-items: center;
60
90
  gap: 0.5rem;
91
+ flex-wrap: wrap;
61
92
  }
62
93
 
63
- .rpp-presets-grid {
64
- display: grid;
65
- grid-template-columns: repeat(4, 1fr);
66
- gap: 0.5rem;
67
- margin-bottom: 1rem;
94
+ .rpp-presets-title {
95
+ font-size: 0.85rem;
96
+ font-weight: 700;
97
+ color: var(--text-muted, #64748b);
68
98
  }
69
99
 
70
100
  .rpp-btn-preset {
71
- padding: 0.75rem 0.5rem;
72
- font-size: 0.95rem;
73
- font-weight: 800;
74
- border: 1px solid rgba(255, 255, 255, 0.1);
75
- border-radius: 12px;
76
- background: rgba(15, 23, 42, 0.5);
77
- color: #94a3b8;
101
+ padding: 0.4rem 0.85rem;
102
+ font-size: 0.85rem;
103
+ font-weight: 700;
104
+ border: 1px solid var(--border-base, #cbd5e1);
105
+ border-radius: 10px;
106
+ background: var(--bg-surface, #fff);
107
+ color: var(--text-base, #0f172a);
78
108
  cursor: pointer;
79
109
  transition: all 0.2s ease;
80
110
  }
81
111
 
112
+ .theme-dark .rpp-btn-preset {
113
+ background: var(--bg-surface, #0f172a);
114
+ border-color: var(--border-base, #334155);
115
+ color: var(--text-base, #f8fafc);
116
+ }
117
+
82
118
  .rpp-btn-preset.active,
83
119
  .rpp-btn-preset:hover {
84
- background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
120
+ background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
85
121
  color: #fff;
86
122
  border-color: transparent;
87
- box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
88
- transform: translateY(-2px);
123
+ box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
124
+ }
125
+
126
+ .rpp-inputs-grid {
127
+ display: grid;
128
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
129
+ gap: 1.25rem;
89
130
  }
90
131
 
91
132
  .rpp-custom-dist-container {
92
133
  display: flex;
93
134
  align-items: center;
94
135
  gap: 0.75rem;
95
- background: rgba(15, 23, 42, 0.6);
96
- border: 1px solid rgba(255, 255, 255, 0.1);
97
- border-radius: 14px;
136
+ background: var(--bg-surface, #fff);
137
+ border: 1px solid var(--border-base, #cbd5e1);
138
+ border-radius: 12px;
98
139
  padding: 0.75rem 1rem;
99
- margin-bottom: 1.5rem;
140
+ }
141
+
142
+ .theme-dark .rpp-custom-dist-container {
143
+ background: var(--bg-surface, #0f172a);
144
+ border-color: var(--border-base, #334155);
100
145
  }
101
146
 
102
147
  .rpp-custom-dist-input {
103
148
  width: 100%;
104
149
  background: transparent;
105
150
  border: none;
106
- color: #38bdf8;
151
+ color: var(--color-primary, #2563eb);
107
152
  font-size: 1.4rem;
108
153
  font-weight: 900;
109
154
  outline: none;
110
155
  }
111
156
 
157
+ .theme-dark .rpp-custom-dist-input {
158
+ color: #60a5fa;
159
+ }
160
+
112
161
  .rpp-custom-dist-unit {
113
162
  font-size: 0.9rem;
114
163
  font-weight: 700;
115
- color: #94a3b8;
164
+ color: var(--text-muted, #64748b);
116
165
  }
117
166
 
118
- .rpp-stepper-control {
119
- background: rgba(15, 23, 42, 0.6);
120
- border: 1px solid rgba(255, 255, 255, 0.1);
121
- border-radius: 16px;
122
- padding: 1.25rem;
123
- margin-bottom: 1.5rem;
167
+ .rpp-stepper-card {
168
+ background: var(--bg-surface, #fff);
169
+ border: 1px solid var(--border-base, #cbd5e1);
170
+ border-radius: 12px;
171
+ padding: 0.85rem 1rem;
172
+ display: flex;
173
+ flex-direction: column;
174
+ gap: 0.5rem;
175
+ }
176
+
177
+ .theme-dark .rpp-stepper-card {
178
+ background: var(--bg-surface, #0f172a);
179
+ border-color: var(--border-base, #334155);
124
180
  }
125
181
 
126
182
  .rpp-stepper-header {
127
183
  display: flex;
128
184
  justify-content: space-between;
129
185
  align-items: center;
130
- margin-bottom: 0.75rem;
131
186
  }
132
187
 
133
188
  .rpp-stepper-title {
134
- font-size: 0.85rem;
189
+ font-size: 0.8rem;
135
190
  font-weight: 700;
136
191
  text-transform: uppercase;
137
- letter-spacing: 0.05em;
138
- color: #94a3b8;
192
+ color: var(--text-muted, #64748b);
139
193
  }
140
194
 
141
- .rpp-stepper-display {
142
- font-size: 2rem;
195
+ .rpp-stepper-value {
196
+ font-size: 1.25rem;
143
197
  font-weight: 900;
144
- color: #f8fafc;
145
- font-variant-numeric: tabular-nums;
198
+ color: var(--text-base, #0f172a);
146
199
  }
147
200
 
148
- .rpp-stepper-btns {
201
+ .theme-dark .rpp-stepper-value {
202
+ color: var(--text-base, #f8fafc);
203
+ }
204
+
205
+ .rpp-stepper-controls {
149
206
  display: flex;
150
- gap: 0.5rem;
207
+ gap: 0.4rem;
151
208
  }
152
209
 
153
210
  .rpp-btn-step {
154
211
  flex: 1;
155
- padding: 0.6rem;
156
- font-size: 0.85rem;
212
+ padding: 0.4rem;
213
+ font-size: 0.8rem;
157
214
  font-weight: 800;
158
- border: 1px solid rgba(255, 255, 255, 0.1);
159
- border-radius: 10px;
160
- background: rgba(255, 255, 255, 0.05);
161
- color: #e2e8f0;
215
+ border: 1px solid var(--border-base, #cbd5e1);
216
+ border-radius: 8px;
217
+ background: var(--bg-surface-elevated, #f1f5f9);
218
+ color: var(--text-base, #334155);
162
219
  cursor: pointer;
163
220
  transition: all 0.15s ease;
164
221
  }
165
222
 
166
- .rpp-btn-step:hover {
167
- background: rgba(59, 130, 246, 0.2);
168
- border-color: #3b82f6;
169
- color: #fff;
223
+ .theme-dark .rpp-btn-step {
224
+ background: var(--bg-surface-elevated, #1e293b);
225
+ border-color: var(--border-base, #334155);
226
+ color: var(--text-base, #f8fafc);
170
227
  }
171
228
 
172
- .rpp-btn-step:active {
173
- transform: scale(0.96);
229
+ .rpp-btn-step:hover {
230
+ background: var(--color-primary, #2563eb);
231
+ color: #fff;
232
+ border-color: #2563eb;
174
233
  }
175
234
 
176
- .rpp-hero-pace {
177
- background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
178
- border: 1px solid rgba(59, 130, 246, 0.3);
179
- border-radius: 18px;
180
- padding: 1.5rem;
235
+ .rpp-hero-pace-card {
236
+ background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.03) 100%);
237
+ border: 2px solid var(--color-primary, #2563eb);
238
+ border-radius: 14px;
239
+ padding: 1.25rem;
181
240
  text-align: center;
182
- box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.1);
183
241
  }
184
242
 
185
243
  .rpp-hero-pace-label {
186
- font-size: 0.85rem;
244
+ font-size: 0.8rem;
187
245
  font-weight: 800;
188
246
  text-transform: uppercase;
189
- letter-spacing: 0.08em;
190
- color: #38bdf8;
247
+ color: var(--color-primary, #2563eb);
191
248
  }
192
249
 
193
- .rpp-hero-pace-val {
194
- font-size: 2.8rem;
250
+ .rpp-hero-pace-value {
251
+ font-size: 2.2rem;
195
252
  font-weight: 900;
196
- color: #fff;
253
+ color: var(--text-base, #0f172a);
197
254
  line-height: 1.1;
198
- margin-top: 0.3rem;
199
- text-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
255
+ margin-top: 0.2rem;
200
256
  }
201
257
 
202
- .rpp-cards-list {
203
- display: flex;
204
- flex-direction: column;
205
- gap: 0.85rem;
258
+ .theme-dark .rpp-hero-pace-value {
259
+ color: var(--text-base, #f8fafc);
260
+ }
261
+
262
+ .rpp-section-title {
263
+ font-size: 1.15rem;
264
+ font-weight: 800;
265
+ color: var(--text-base, #0f172a);
266
+ margin-bottom: 0.25rem;
267
+ }
268
+
269
+ .theme-dark .rpp-section-title {
270
+ color: var(--text-base, #f8fafc);
271
+ }
272
+
273
+ .rpp-section-subtitle {
274
+ font-size: 0.85rem;
275
+ color: var(--text-muted, #64748b);
276
+ margin-bottom: 1rem;
277
+ }
278
+
279
+ .rpp-pred-grid {
280
+ display: grid;
281
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
282
+ gap: 1rem;
206
283
  }
207
284
 
208
285
  .rpp-pred-card {
209
- padding: 1.1rem 1.4rem;
210
- background: rgba(15, 23, 42, 0.6);
211
- border: 1px solid rgba(255, 255, 255, 0.08);
212
- border-radius: 16px;
213
- position: relative;
214
- overflow: hidden;
215
- transition: all 0.25s ease;
286
+ padding: 1rem 1.25rem;
287
+ background: var(--bg-surface-elevated, #f8fafc);
288
+ border: 1px solid var(--border-base, #e2e8f0);
289
+ border-radius: 14px;
290
+ display: flex;
291
+ flex-direction: column;
292
+ gap: 0.5rem;
216
293
  }
217
294
 
218
- .rpp-pred-card:hover {
219
- transform: translateX(6px);
220
- border-color: #3b82f6;
221
- box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
295
+ .theme-dark .rpp-pred-card {
296
+ background: var(--bg-surface-elevated, #1e293b);
297
+ border-color: var(--border-base, #334155);
222
298
  }
223
299
 
224
300
  .rpp-pred-card-top {
225
301
  display: flex;
226
302
  justify-content: space-between;
227
303
  align-items: center;
228
- margin-bottom: 0.5rem;
229
304
  }
230
305
 
231
306
  .rpp-pred-dist {
232
- font-weight: 900;
233
- font-size: 1.1rem;
234
- color: #f8fafc;
307
+ font-weight: 800;
308
+ font-size: 1rem;
309
+ color: var(--text-base, #0f172a);
310
+ }
311
+
312
+ .theme-dark .rpp-pred-dist {
313
+ color: var(--text-base, #f8fafc);
235
314
  }
236
315
 
237
316
  .rpp-pred-time {
238
- font-size: 1.3rem;
317
+ font-size: 1.2rem;
239
318
  font-weight: 900;
240
- color: #38bdf8;
319
+ color: var(--color-primary, #2563eb);
241
320
  }
242
321
 
243
322
  .rpp-pred-bar-bg {
244
323
  width: 100%;
245
324
  height: 6px;
246
- background: rgba(255, 255, 255, 0.08);
325
+ background: var(--border-base, #e2e8f0);
247
326
  border-radius: 4px;
248
327
  overflow: hidden;
249
328
  }
250
329
 
330
+ .theme-dark .rpp-pred-bar-bg {
331
+ background: #334155;
332
+ }
333
+
251
334
  .rpp-pred-bar-fill {
252
335
  height: 100%;
253
- background: linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%);
336
+ background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
254
337
  border-radius: 4px;
255
338
  transition: width 0.4s ease;
256
339
  }
257
340
 
341
+ .rpp-zones-grid {
342
+ display: grid;
343
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
344
+ gap: 1rem;
345
+ }
346
+
258
347
  .rpp-zone-card {
259
- padding: 1.25rem 1.5rem;
260
- border-radius: 16px;
261
- background: rgba(15, 23, 42, 0.6);
262
- border: 1px solid rgba(255, 255, 255, 0.08);
348
+ padding: 1.1rem 1.25rem;
349
+ border-radius: 14px;
350
+ background: var(--bg-surface-elevated, #f8fafc);
351
+ border: 1px solid var(--border-base, #e2e8f0);
263
352
  display: flex;
264
353
  flex-direction: column;
265
- gap: 0.75rem;
354
+ gap: 0.6rem;
355
+ }
356
+
357
+ .theme-dark .rpp-zone-card {
358
+ background: var(--bg-surface-elevated, #1e293b);
359
+ border-color: var(--border-base, #334155);
266
360
  }
267
361
 
268
362
  .rpp-zone-header {
@@ -272,59 +366,64 @@
272
366
  }
273
367
 
274
368
  .rpp-zone-pill {
275
- padding: 0.4rem 0.85rem;
276
- border-radius: 20px;
277
- font-size: 0.8rem;
278
- font-weight: 900;
279
- letter-spacing: 0.05em;
369
+ padding: 0.3rem 0.65rem;
370
+ border-radius: 16px;
371
+ font-size: 0.75rem;
372
+ font-weight: 800;
280
373
  }
281
374
 
282
375
  .rpp-zone-pill-easy {
283
- background: rgba(34, 197, 94, 0.2);
284
- color: #4ade80;
285
- border: 1px solid rgba(34, 197, 94, 0.4);
376
+ background: rgba(34, 197, 94, 0.15);
377
+ color: #16a34a;
286
378
  }
287
379
 
288
380
  .rpp-zone-pill-tempo {
289
- background: rgba(234, 179, 8, 0.2);
290
- color: #facc15;
291
- border: 1px solid rgba(234, 179, 8, 0.4);
381
+ background: rgba(234, 179, 8, 0.15);
382
+ color: #ca8a04;
292
383
  }
293
384
 
294
385
  .rpp-zone-pill-intervals {
295
- background: rgba(239, 68, 68, 0.2);
296
- color: #f87171;
297
- border: 1px solid rgba(239, 68, 68, 0.4);
386
+ background: rgba(239, 68, 68, 0.15);
387
+ color: #dc2626;
298
388
  }
299
389
 
300
390
  .rpp-zone-range {
301
- font-size: 1.25rem;
302
- font-weight: 900;
303
- color: #f8fafc;
391
+ font-size: 1.1rem;
392
+ font-weight: 800;
393
+ color: var(--text-base, #0f172a);
394
+ }
395
+
396
+ .theme-dark .rpp-zone-range {
397
+ color: var(--text-base, #f8fafc);
304
398
  }
305
399
 
306
400
  .rpp-zone-bar-bg {
307
401
  width: 100%;
308
- height: 8px;
309
- background: rgba(255, 255, 255, 0.08);
402
+ height: 6px;
403
+ background: var(--border-base, #e2e8f0);
310
404
  border-radius: 4px;
311
405
  overflow: hidden;
312
406
  }
313
407
 
408
+ .theme-dark .rpp-zone-bar-bg {
409
+ background: #334155;
410
+ }
411
+
314
412
  .rpp-zone-bar-easy {
315
413
  width: 50%;
316
414
  height: 100%;
317
- background: linear-gradient(90deg, #10b981 0%, #4ade80 100%);
415
+ background: #22c55e;
318
416
  }
319
417
 
320
418
  .rpp-zone-bar-tempo {
321
419
  width: 75%;
322
420
  height: 100%;
323
- background: linear-gradient(90deg, #f59e0b 0%, #facc15 100%);
421
+ background: #eab308;
324
422
  }
325
423
 
326
424
  .rpp-zone-bar-intervals {
327
425
  width: 95%;
328
426
  height: 100%;
329
- background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
427
+ background: #ef4444;
330
428
  }
429
+