diff --git a/src/assets/airplane.png b/src/assets/airplane.png new file mode 100644 index 0000000..f645cfe Binary files /dev/null and b/src/assets/airplane.png differ diff --git a/src/assets/bus.png b/src/assets/bus.png new file mode 100644 index 0000000..c667c20 Binary files /dev/null and b/src/assets/bus.png differ diff --git a/src/assets/car.png b/src/assets/car.png new file mode 100644 index 0000000..e3e2522 Binary files /dev/null and b/src/assets/car.png differ diff --git a/src/assets/ship.png b/src/assets/ship.png new file mode 100644 index 0000000..d16da5f Binary files /dev/null and b/src/assets/ship.png differ diff --git a/src/assets/train.png b/src/assets/train.png new file mode 100644 index 0000000..9392332 Binary files /dev/null and b/src/assets/train.png differ diff --git a/src/assets/walk.png b/src/assets/walk.png new file mode 100644 index 0000000..3630327 Binary files /dev/null and b/src/assets/walk.png differ diff --git a/src/lib/timeline/NewEntryForm.svelte b/src/lib/timeline/NewEntryForm.svelte index 6095e27..829ba49 100644 --- a/src/lib/timeline/NewEntryForm.svelte +++ b/src/lib/timeline/NewEntryForm.svelte @@ -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} {/each} @@ -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 {