geo-morpher 0.1.2 → 0.1.3
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.
|
@@ -82,13 +82,46 @@
|
|
|
82
82
|
line-height: 1.6;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.slider
|
|
86
|
-
.toggle,
|
|
87
|
-
.layer-toggles {
|
|
85
|
+
.slider {
|
|
88
86
|
display: grid;
|
|
89
87
|
gap: 0.75rem;
|
|
90
88
|
}
|
|
91
89
|
|
|
90
|
+
.slider-controls {
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
gap: 1rem;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
#play-button {
|
|
97
|
+
background: #3b82f6;
|
|
98
|
+
border: none;
|
|
99
|
+
border-radius: 50%;
|
|
100
|
+
width: 32px;
|
|
101
|
+
height: 32px;
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
color: white;
|
|
107
|
+
flex-shrink: 0;
|
|
108
|
+
transition: background 0.2s, transform 0.1s;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
#play-button:hover {
|
|
112
|
+
background: #2563eb;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
#play-button:active {
|
|
116
|
+
transform: scale(0.95);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
#play-button svg {
|
|
120
|
+
width: 16px;
|
|
121
|
+
height: 16px;
|
|
122
|
+
fill: currentColor;
|
|
123
|
+
}
|
|
124
|
+
|
|
92
125
|
label {
|
|
93
126
|
font-size: 0.9rem;
|
|
94
127
|
font-weight: 500;
|
|
@@ -169,24 +202,61 @@
|
|
|
169
202
|
}
|
|
170
203
|
|
|
171
204
|
/* comparison mode adjustments */
|
|
172
|
-
.
|
|
173
|
-
|
|
174
|
-
|
|
205
|
+
.comparison-table {
|
|
206
|
+
width: 100%;
|
|
207
|
+
border-collapse: collapse;
|
|
208
|
+
font-size: 0.85rem;
|
|
175
209
|
}
|
|
176
210
|
|
|
177
|
-
.
|
|
178
|
-
|
|
211
|
+
.comparison-table th {
|
|
212
|
+
text-align: left;
|
|
213
|
+
padding: 0.5rem 0.5rem 0.75rem 0.5rem;
|
|
214
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
215
|
+
font-weight: 700;
|
|
216
|
+
color: #94a3b8;
|
|
217
|
+
font-size: 0.7rem;
|
|
218
|
+
text-transform: uppercase;
|
|
219
|
+
letter-spacing: 0.05em;
|
|
179
220
|
}
|
|
180
221
|
|
|
181
|
-
.
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
222
|
+
.comparison-table th.header-hovered {
|
|
223
|
+
color: #3b82f6;
|
|
224
|
+
text-align: right;
|
|
225
|
+
max-width: 120px;
|
|
226
|
+
white-space: normal;
|
|
227
|
+
word-wrap: break-word;
|
|
228
|
+
line-height: 1.2;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.comparison-table th.header-selected {
|
|
232
|
+
color: #ef4444;
|
|
233
|
+
text-align: right;
|
|
234
|
+
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
|
235
|
+
max-width: 120px;
|
|
236
|
+
white-space: normal;
|
|
237
|
+
word-wrap: break-word;
|
|
238
|
+
line-height: 1.2;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.comparison-table td {
|
|
242
|
+
padding: 0.4rem 0.5rem;
|
|
243
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.comparison-table td.tooltip-label {
|
|
247
|
+
color: #94a3b8;
|
|
248
|
+
font-weight: 400;
|
|
186
249
|
}
|
|
187
250
|
|
|
188
|
-
.
|
|
251
|
+
.comparison-table td.tooltip-value {
|
|
189
252
|
text-align: right;
|
|
253
|
+
font-weight: 600;
|
|
254
|
+
font-variant-numeric: tabular-nums;
|
|
255
|
+
white-space: nowrap;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.comparison-table td.right {
|
|
259
|
+
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
|
190
260
|
}
|
|
191
261
|
|
|
192
262
|
.tooltip-label {
|
|
@@ -245,7 +315,17 @@
|
|
|
245
315
|
|
|
246
316
|
<div class="slider">
|
|
247
317
|
<label for="morphFactor">Morph factor: <strong id="factorValue">0.50</strong></label>
|
|
248
|
-
<
|
|
318
|
+
<div class="slider-controls">
|
|
319
|
+
<button id="play-button" title="Automate Slider Move">
|
|
320
|
+
<svg id="play-icon" viewBox="0 0 24 24">
|
|
321
|
+
<path d="M8 5v14l11-7z" />
|
|
322
|
+
</svg>
|
|
323
|
+
<svg id="pause-icon" viewBox="0 0 24 24" style="display: none;">
|
|
324
|
+
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
|
|
325
|
+
</svg>
|
|
326
|
+
</button>
|
|
327
|
+
<input id="morphFactor" type="range" min="0" max="1" step="0.01" value="0" />
|
|
328
|
+
</div>
|
|
249
329
|
</div>
|
|
250
330
|
|
|
251
331
|
<div>
|
|
@@ -253,10 +333,10 @@
|
|
|
253
333
|
style="margin: 0 0 0.75rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b;">
|
|
254
334
|
Layer Visibility</h3>
|
|
255
335
|
<div class="layer-toggles">
|
|
336
|
+
<label><input id="toggle-interpolated" type="checkbox" checked /> Animated Transition</label>
|
|
337
|
+
<label><input id="toggle-glyphs" type="checkbox" checked /> Data Flowers</label>
|
|
256
338
|
<label><input id="toggle-regular" type="checkbox" /> Geographic Boundaries</label>
|
|
257
|
-
<label><input id="toggle-interpolated" type="checkbox" checked /> Tween Morph</label>
|
|
258
339
|
<label><input id="toggle-cartogram" type="checkbox" /> Grid Cartogram</label>
|
|
259
|
-
<label><input id="toggle-glyphs" type="checkbox" checked /> Rose Charts</label>
|
|
260
340
|
</div>
|
|
261
341
|
</div>
|
|
262
342
|
|