feat: add transport image icons and expand country list to match world map
This commit is contained in:
BIN
src/assets/airplane.png
Normal file
BIN
src/assets/airplane.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
BIN
src/assets/bus.png
Normal file
BIN
src/assets/bus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
src/assets/car.png
Normal file
BIN
src/assets/car.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
BIN
src/assets/ship.png
Normal file
BIN
src/assets/ship.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 283 KiB |
BIN
src/assets/train.png
Normal file
BIN
src/assets/train.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 343 KiB |
BIN
src/assets/walk.png
Normal file
BIN
src/assets/walk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
@@ -4,6 +4,12 @@
|
||||
import { countryNames } from '../shared/countries.js';
|
||||
import SearchInput from '../shared/SearchInput.svelte';
|
||||
import PhotoEditor from './PhotoEditor.svelte';
|
||||
import airplaneImg from '../../assets/airplane.png';
|
||||
import trainImg from '../../assets/train.png';
|
||||
import busImg from '../../assets/bus.png';
|
||||
import carImg from '../../assets/car.png';
|
||||
import shipImg from '../../assets/ship.png';
|
||||
import walkImg from '../../assets/walk.png';
|
||||
|
||||
let { initialCountry = '', onBack } = $props();
|
||||
|
||||
@@ -69,12 +75,12 @@
|
||||
$effect(() => { if (transport) errors.transport = ''; });
|
||||
|
||||
const transportOptions = [
|
||||
{ value: 'flight', label: '✈ Flight' },
|
||||
{ value: 'train', label: '🚂 Train' },
|
||||
{ value: 'bus', label: '🚌 Bus' },
|
||||
{ value: 'car', label: '🚗 Car' },
|
||||
{ value: 'ship', label: '🚢 Ship' },
|
||||
{ value: 'walk', label: '🚶 Walk' },
|
||||
{ value: 'flight', label: 'Flight', img: airplaneImg },
|
||||
{ value: 'train', label: 'Train', img: trainImg },
|
||||
{ value: 'bus', label: 'Bus', img: busImg },
|
||||
{ value: 'car', label: 'Car', img: carImg },
|
||||
{ value: 'ship', label: 'Ship', img: shipImg },
|
||||
{ value: 'walk', label: 'Walk', img: walkImg },
|
||||
];
|
||||
|
||||
// ── Navigation ─────────────────────────────────────────────────────
|
||||
@@ -210,7 +216,8 @@
|
||||
{#each transportOptions as opt}
|
||||
<label class="transport-opt" class:active={transport === opt.value}>
|
||||
<input type="radio" name="nc-transport" value={opt.value} bind:group={transport} />
|
||||
{opt.label}
|
||||
<img src={opt.img} alt={opt.label} class="transport-img" />
|
||||
<span class="transport-label">{opt.label}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -392,15 +399,19 @@
|
||||
|
||||
.transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
||||
.transport-opt {
|
||||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
font-size: 13px; font-weight: 300; color: var(--text);
|
||||
padding: 8px 10px; border-radius: 8px;
|
||||
border: 1px solid var(--border); background: var(--bg-subtle);
|
||||
cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
|
||||
white-space: nowrap;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: 8px; aspect-ratio: 1;
|
||||
border-radius: 12px; border: 1px solid var(--border); background: var(--bg-subtle);
|
||||
cursor: pointer; transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.transport-opt input { display: none; }
|
||||
.transport-opt.active { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); }
|
||||
.transport-opt.active { border-color: var(--accent-border); background: var(--accent-bg); }
|
||||
.transport-img { width: 60px; height: 60px; object-fit: contain; }
|
||||
.transport-label {
|
||||
font-size: 12px; font-weight: 300; color: var(--text-sub);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.transport-opt.active .transport-label { color: var(--accent); }
|
||||
|
||||
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
|
||||
.tag {
|
||||
|
||||
Reference in New Issue
Block a user