@jjlmoya/utils-science 1.17.0 → 1.19.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.
@@ -0,0 +1,265 @@
1
+ :root {
2
+ --cell-primary: #f43f5e;
3
+ --cell-secondary: #8b5cf6;
4
+ --cell-text: #0f172a;
5
+ --cell-text-muted: #475569;
6
+ --cell-bg: #fff;
7
+ --cell-bg-secondary: #f8fafc;
8
+ --cell-bg-tertiary: #f1f5f9;
9
+ --cell-border: #e2e8f0;
10
+ --cell-bar: linear-gradient(90deg, #f43f5e 0%, #8b5cf6 100%);
11
+ }
12
+
13
+ .theme-dark {
14
+ --cell-primary: #ff6b7a;
15
+ --cell-secondary: #a78bfa;
16
+ --cell-text: #fff;
17
+ --cell-text-muted: #a0aec0;
18
+ --cell-bg: #0f172a;
19
+ --cell-bg-secondary: #1c1f2e;
20
+ --cell-bg-tertiary: #151720;
21
+ --cell-border: #2d3748;
22
+ --cell-bar: linear-gradient(90deg, #ff6b7a 0%, #a78bfa 100%);
23
+ }
24
+
25
+ .cellular-app {
26
+ max-width: 850px;
27
+ margin: 0 auto;
28
+ }
29
+
30
+ .cellular-card {
31
+ background: var(--cell-bg);
32
+ border: 1px solid var(--cell-border);
33
+ border-radius: 24px;
34
+ padding: 2rem;
35
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
36
+ }
37
+
38
+ .theme-dark .cellular-card {
39
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
40
+ }
41
+
42
+ .input-section {
43
+ margin-bottom: 3.5rem;
44
+ }
45
+
46
+ .input-group {
47
+ background: var(--cell-bg-secondary);
48
+ padding: 2rem;
49
+ border-radius: 20px;
50
+ border: 1px solid var(--cell-border);
51
+ }
52
+
53
+ .input-label {
54
+ font-size: 0.875rem;
55
+ font-weight: 700;
56
+ color: var(--cell-text-muted);
57
+ text-transform: uppercase;
58
+ letter-spacing: 1px;
59
+ margin-bottom: 1rem;
60
+ display: block;
61
+ }
62
+
63
+ .age-display {
64
+ display: flex;
65
+ align-items: baseline;
66
+ gap: 0.75rem;
67
+ margin-bottom: 1.5rem;
68
+ }
69
+
70
+ #ageDisplay {
71
+ font-size: 3.5rem;
72
+ font-weight: 950;
73
+ color: var(--cell-primary);
74
+ line-height: 1;
75
+ }
76
+
77
+ .age-unit {
78
+ font-size: 0.95rem;
79
+ color: var(--cell-primary);
80
+ font-weight: 500;
81
+ }
82
+
83
+ input[type="range"] {
84
+ -webkit-appearance: none;
85
+ appearance: none;
86
+ width: 100%;
87
+ height: 10px;
88
+ background: var(--cell-bg-tertiary);
89
+ border-radius: 8px;
90
+ outline: none;
91
+ border: 1px solid var(--cell-border);
92
+ }
93
+
94
+ input[type="range"]::-webkit-slider-thumb {
95
+ -webkit-appearance: none;
96
+ width: 24px;
97
+ height: 24px;
98
+ background: var(--cell-primary);
99
+ border: 3px solid var(--cell-bg);
100
+ border-radius: 50%;
101
+ cursor: pointer;
102
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
103
+ transition: transform 0.1s;
104
+ }
105
+
106
+ input[type="range"]::-webkit-slider-thumb:active {
107
+ transform: scale(1.2);
108
+ }
109
+
110
+ input[type="range"]::-moz-range-thumb {
111
+ width: 24px;
112
+ height: 24px;
113
+ background: var(--cell-primary);
114
+ border: 3px solid var(--cell-bg);
115
+ border-radius: 50%;
116
+ cursor: pointer;
117
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
118
+ transition: transform 0.1s;
119
+ }
120
+
121
+ input[type="range"]::-moz-range-thumb:active {
122
+ transform: scale(1.2);
123
+ }
124
+
125
+ .results-grid {
126
+ display: grid;
127
+ grid-template-columns: 1fr 1fr;
128
+ gap: 2rem;
129
+ margin-bottom: 2.5rem;
130
+ }
131
+
132
+ @media (max-width: 640px) {
133
+ .results-grid {
134
+ grid-template-columns: 1fr;
135
+ }
136
+ }
137
+
138
+ .main-stat {
139
+ background: var(--cell-bg-secondary);
140
+ padding: 2.5rem;
141
+ border-radius: 20px;
142
+ border: 2px solid var(--cell-primary);
143
+ text-align: center;
144
+ display: flex;
145
+ flex-direction: column;
146
+ justify-content: center;
147
+ min-height: 280px;
148
+ }
149
+
150
+ .main-stat-label {
151
+ font-size: 0.875rem;
152
+ color: var(--cell-text-muted);
153
+ font-weight: 600;
154
+ margin-bottom: 1.5rem;
155
+ line-height: 1.4;
156
+ }
157
+
158
+ .main-stat-value {
159
+ display: flex;
160
+ align-items: baseline;
161
+ justify-content: center;
162
+ gap: 0.25rem;
163
+ margin-bottom: 1.5rem;
164
+ }
165
+
166
+ #newStatVal {
167
+ font-size: 5rem;
168
+ font-weight: 950;
169
+ color: var(--cell-primary);
170
+ line-height: 1;
171
+ }
172
+
173
+ .percent-sign {
174
+ font-size: 2.5rem;
175
+ font-weight: 700;
176
+ color: var(--cell-primary);
177
+ }
178
+
179
+ .main-stat-sublabel {
180
+ font-size: 0.75rem;
181
+ font-weight: 700;
182
+ color: var(--cell-primary);
183
+ letter-spacing: 2px;
184
+ text-transform: uppercase;
185
+ }
186
+
187
+ .tissue-list {
188
+ display: flex;
189
+ flex-direction: column;
190
+ gap: 1.25rem;
191
+ }
192
+
193
+ .tissue-item {
194
+ background: var(--cell-bg-secondary);
195
+ padding: 1.25rem;
196
+ border-radius: 14px;
197
+ border: 1px solid var(--cell-border);
198
+ }
199
+
200
+ .tissue-header {
201
+ display: flex;
202
+ justify-content: space-between;
203
+ align-items: center;
204
+ margin-bottom: 1rem;
205
+ }
206
+
207
+ .tissue-name {
208
+ font-size: 0.95rem;
209
+ font-weight: 600;
210
+ color: var(--cell-text);
211
+ }
212
+
213
+ .tissue-percentage {
214
+ font-size: 0.95rem;
215
+ font-weight: 700;
216
+ color: var(--cell-primary);
217
+ }
218
+
219
+ .bar-container {
220
+ width: 100%;
221
+ height: 10px;
222
+ background: var(--cell-bg-tertiary);
223
+ border-radius: 5px;
224
+ overflow: hidden;
225
+ }
226
+
227
+ .bar-fill {
228
+ height: 100%;
229
+ background: var(--cell-bar);
230
+ border-radius: 4px;
231
+ transition: width 0.3s ease;
232
+ }
233
+
234
+ .disclaimer {
235
+ font-size: 0.875rem;
236
+ color: #78660b;
237
+ line-height: 1.7;
238
+ padding: 1.5rem;
239
+ background-color: #fef9e7;
240
+ border-radius: 12px;
241
+ border: 1px solid #fce8aa;
242
+ margin: 2.5rem auto 0;
243
+ max-width: 600px;
244
+ text-align: center;
245
+ }
246
+
247
+ .theme-dark .disclaimer {
248
+ color: #78660b;
249
+ background-color: #fef9e7;
250
+ border-color: #fce8aa;
251
+ }
252
+
253
+ @media (max-width: 640px) {
254
+ .cellular-card {
255
+ padding: 1.5rem;
256
+ }
257
+
258
+ #newStatVal {
259
+ font-size: 2.5rem;
260
+ }
261
+
262
+ .input-group {
263
+ padding: 1rem;
264
+ }
265
+ }
@@ -86,273 +86,7 @@ const { ui } = Astro.props;
86
86
  </div>
87
87
  </div>
88
88
 
89
- <style is:inline define:vars={{}}>
90
- :root {
91
- --cell-primary: #f43f5e;
92
- --cell-secondary: #8b5cf6;
93
- --cell-text: #0f172a;
94
- --cell-text-muted: #475569;
95
- --cell-bg: #fff;
96
- --cell-bg-secondary: #f8fafc;
97
- --cell-bg-tertiary: #f1f5f9;
98
- --cell-border: #e2e8f0;
99
- --cell-bar: linear-gradient(90deg, #f43f5e 0%, #8b5cf6 100%);
100
- }
101
-
102
- .theme-dark {
103
- --cell-primary: #ff6b7a;
104
- --cell-secondary: #a78bfa;
105
- --cell-text: #fff;
106
- --cell-text-muted: #a0aec0;
107
- --cell-bg: #0f172a;
108
- --cell-bg-secondary: #1c1f2e;
109
- --cell-bg-tertiary: #151720;
110
- --cell-border: #2d3748;
111
- --cell-bar: linear-gradient(90deg, #ff6b7a 0%, #a78bfa 100%);
112
- }
113
-
114
- .cellular-app {
115
- max-width: 850px;
116
- margin: 0 auto;
117
- }
118
-
119
- .cellular-card {
120
- background: var(--cell-bg);
121
- border: 1px solid var(--cell-border);
122
- border-radius: 24px;
123
- padding: 2rem;
124
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
125
- }
126
-
127
- .theme-dark .cellular-card {
128
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
129
- }
130
-
131
- .input-section {
132
- margin-bottom: 3.5rem;
133
- }
134
-
135
- .input-group {
136
- background: var(--cell-bg-secondary);
137
- padding: 2rem;
138
- border-radius: 20px;
139
- border: 1px solid var(--cell-border);
140
- }
141
-
142
- .input-label {
143
- font-size: 0.875rem;
144
- font-weight: 700;
145
- color: var(--cell-text-muted);
146
- text-transform: uppercase;
147
- letter-spacing: 1px;
148
- margin-bottom: 1rem;
149
- display: block;
150
- }
151
-
152
- .age-display {
153
- display: flex;
154
- align-items: baseline;
155
- gap: 0.75rem;
156
- margin-bottom: 1.5rem;
157
- }
158
-
159
- #ageDisplay {
160
- font-size: 3.5rem;
161
- font-weight: 950;
162
- color: var(--cell-primary);
163
- line-height: 1;
164
- }
165
-
166
- .age-unit {
167
- font-size: 0.95rem;
168
- color: var(--cell-primary);
169
- font-weight: 500;
170
- }
171
-
172
- input[type="range"] {
173
- -webkit-appearance: none;
174
- appearance: none;
175
- width: 100%;
176
- height: 10px;
177
- background: var(--cell-bg-tertiary);
178
- border-radius: 8px;
179
- outline: none;
180
- border: 1px solid var(--cell-border);
181
- }
182
-
183
- input[type="range"]::-webkit-slider-thumb {
184
- -webkit-appearance: none;
185
- width: 24px;
186
- height: 24px;
187
- background: var(--cell-primary);
188
- border: 3px solid var(--cell-bg);
189
- border-radius: 50%;
190
- cursor: pointer;
191
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
192
- transition: transform 0.1s;
193
- }
194
-
195
- input[type="range"]::-webkit-slider-thumb:active {
196
- transform: scale(1.2);
197
- }
198
-
199
- input[type="range"]::-moz-range-thumb {
200
- width: 24px;
201
- height: 24px;
202
- background: var(--cell-primary);
203
- border: 3px solid var(--cell-bg);
204
- border-radius: 50%;
205
- cursor: pointer;
206
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
207
- transition: transform 0.1s;
208
- }
209
-
210
- input[type="range"]::-moz-range-thumb:active {
211
- transform: scale(1.2);
212
- }
213
-
214
- .results-grid {
215
- display: grid;
216
- grid-template-columns: 1fr 1fr;
217
- gap: 2rem;
218
- margin-bottom: 2.5rem;
219
- }
220
-
221
- @media (max-width: 640px) {
222
- .results-grid {
223
- grid-template-columns: 1fr;
224
- }
225
- }
226
-
227
- .main-stat {
228
- background: var(--cell-bg-secondary);
229
- padding: 2.5rem;
230
- border-radius: 20px;
231
- border: 2px solid var(--cell-primary);
232
- text-align: center;
233
- display: flex;
234
- flex-direction: column;
235
- justify-content: center;
236
- min-height: 280px;
237
- }
238
-
239
- .main-stat-label {
240
- font-size: 0.875rem;
241
- color: var(--cell-text-muted);
242
- font-weight: 600;
243
- margin-bottom: 1.5rem;
244
- line-height: 1.4;
245
- }
246
-
247
- .main-stat-value {
248
- display: flex;
249
- align-items: baseline;
250
- justify-content: center;
251
- gap: 0.25rem;
252
- margin-bottom: 1.5rem;
253
- }
254
-
255
- #newStatVal {
256
- font-size: 5rem;
257
- font-weight: 950;
258
- color: var(--cell-primary);
259
- line-height: 1;
260
- }
261
-
262
- .percent-sign {
263
- font-size: 2.5rem;
264
- font-weight: 700;
265
- color: var(--cell-primary);
266
- }
267
-
268
- .main-stat-sublabel {
269
- font-size: 0.75rem;
270
- font-weight: 700;
271
- color: var(--cell-primary);
272
- letter-spacing: 2px;
273
- text-transform: uppercase;
274
- }
275
-
276
- .tissue-list {
277
- display: flex;
278
- flex-direction: column;
279
- gap: 1.25rem;
280
- }
281
-
282
- .tissue-item {
283
- background: var(--cell-bg-secondary);
284
- padding: 1.25rem;
285
- border-radius: 14px;
286
- border: 1px solid var(--cell-border);
287
- }
288
89
 
289
- .tissue-header {
290
- display: flex;
291
- justify-content: space-between;
292
- align-items: center;
293
- margin-bottom: 1rem;
294
- }
295
-
296
- .tissue-name {
297
- font-size: 0.95rem;
298
- font-weight: 600;
299
- color: var(--cell-text);
300
- }
301
-
302
- .tissue-percentage {
303
- font-size: 0.95rem;
304
- font-weight: 700;
305
- color: var(--cell-primary);
306
- }
307
-
308
- .bar-container {
309
- width: 100%;
310
- height: 10px;
311
- background: var(--cell-bg-tertiary);
312
- border-radius: 5px;
313
- overflow: hidden;
314
- }
315
-
316
- .bar-fill {
317
- height: 100%;
318
- background: var(--cell-bar);
319
- border-radius: 4px;
320
- transition: width 0.3s ease;
321
- }
322
-
323
- .disclaimer {
324
- font-size: 0.875rem;
325
- color: #78660b;
326
- line-height: 1.7;
327
- padding: 1.5rem;
328
- background-color: #fef9e7;
329
- border-radius: 12px;
330
- border: 1px solid #fce8aa;
331
- margin: 2.5rem auto 0;
332
- max-width: 600px;
333
- text-align: center;
334
- }
335
-
336
- .theme-dark .disclaimer {
337
- color: #78660b;
338
- background-color: #fef9e7;
339
- border-color: #fce8aa;
340
- }
341
-
342
- @media (max-width: 640px) {
343
- .cellular-card {
344
- padding: 1.5rem;
345
- }
346
-
347
- #newStatVal {
348
- font-size: 2.5rem;
349
- }
350
-
351
- .input-group {
352
- padding: 1rem;
353
- }
354
- }
355
- </style>
356
90
 
357
91
  <script>
358
92
  import { CellularRenewalEngine } from "./logic/CellularRenewalEngine";