diff --git a/public/plane 2.webp b/public/plane 2.webp deleted file mode 100644 index 6003f20..0000000 Binary files a/public/plane 2.webp and /dev/null differ diff --git a/public/airplane.png b/src/assets/animationPlane.png similarity index 100% rename from public/airplane.png rename to src/assets/animationPlane.png diff --git a/src/lib/layout/selection.svelte.js b/src/lib/layout/selection.svelte.js index 1910e66..7d5a3cb 100644 --- a/src/lib/layout/selection.svelte.js +++ b/src/lib/layout/selection.svelte.js @@ -1,5 +1,6 @@ import { journals } from '../stores/journalStore.js'; import { nameToId } from '../shared/countries.js'; +import { getUserProfile } from '../auth/userStore.svelte.js'; let selected = $state(new Set()); let totalCountries = $state(0); @@ -11,6 +12,11 @@ journals.subscribe((entries) => { const id = nameToId[e.location?.country]; if (id) ids.add(id); } + const profile = getUserProfile(); + if (profile?.homeCountry) { + const homeId = nameToId[profile.homeCountry]; + if (homeId) ids.add(homeId); + } selected = ids; }); diff --git a/src/lib/timeline/detail/NewEntryForm.svelte b/src/lib/timeline/detail/NewEntryForm.svelte index 2334bf8..778cb48 100644 --- a/src/lib/timeline/detail/NewEntryForm.svelte +++ b/src/lib/timeline/detail/NewEntryForm.svelte @@ -178,18 +178,24 @@
{#if step === 1} - -

Trip details

+ +

+ {#if country.trim()} + Journal your trip to {country}! + {:else} + Journal your trip! + {/if} +

- + {#if errors.country}{errors.country}{/if}
- - + + {#if errors.cities}{errors.cities}{/if} {#if cities.length > 0}
@@ -203,24 +209,24 @@
- + {#if errors.date}{errors.date}{/if}
- + {#if errors.days}{errors.days}{/if}
- +
{#each ['solo','friends','family'] as t} {/each}
@@ -228,13 +234,13 @@
- +
{#each transportOptions as opt} -
@@ -249,11 +255,16 @@ {:else} -

Your memories

+

+ Your memories{cities.length > 0 ? ` of ${cities.join(', ')}` : country.trim() ? ` of ${country}` : ''} +

+ {#if cities.length > 0 || country.trim()} +

{cities.join(', ')}{cities.length > 0 && country.trim() ? `, ${country}` : country.trim()}

+ {/if} {#each questions as q, i}
-

{q}

+

{q}{country.trim() ? ` in ${country}` : ''}

{/each} @@ -316,13 +327,13 @@ align-items: center; gap: 6px; font-family: var(--sans); - font-size: 13px; - font-weight: 300; + font-size: 15px; + font-weight: 400; color: var(--text); background: none; border: 1px solid transparent; - border-radius: 8px; - padding: 6px 10px; + border-radius: 10px; + padding: 8px 14px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } @@ -330,20 +341,19 @@ .save-btn { font-family: var(--sans); - font-size: 13px; - font-weight: 300; + font-size: 15px; + font-weight: 400; color: #fff; background: var(--accent); border: 1px solid var(--accent); - border-radius: 8px; - padding: 7px 14px; + border-radius: 10px; + padding: 8px 18px; cursor: pointer; transition: background 0.15s; white-space: nowrap; } .save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); } .save-btn:disabled { opacity: 0.6; cursor: not-allowed; } - .save-err { font-size: 12px; color: #ef4444; margin-top: 4px; display: block; text-align: right; } /* scroll + form */ .scroll { flex: 1; overflow-y: auto; } @@ -364,6 +374,14 @@ letter-spacing: -0.3px; margin: 0 0 2px; } + .page-headline { + font-size: 28px; + font-weight: 500; + color: var(--text-h); + letter-spacing: -0.5px; + margin: 0 0 4px; + } + .page-headline strong { font-weight: 600; } .step-sub { font-size: 13px; font-weight: 300; @@ -384,27 +402,9 @@ color: var(--text-sub); } .req { color: var(--accent); font-size: 11px; } + .kw { color: var(--accent); } - .ferr { font-size: 11px; color: #dc2626; } - - .combo-select, .city-text { - font-family: var(--sans); - font-size: 14px; - font-weight: 300; - color: var(--text-h); - background: var(--bg-subtle); - border: 1px solid var(--border); - border-radius: 8px; - padding: 8px 12px; - outline: none; - transition: border-color 0.15s; - width: 100%; - box-sizing: border-box; - display: block; - } - .combo-select:focus, .city-text:focus { border-color: var(--accent-border); } - .combo-select { margin-bottom: 6px; cursor: pointer; } - .city-text { margin-top: 0; } + .ferr { font-size: 13px; font-weight: 500; color: #dc2626; } .input { font-family: var(--sans); @@ -422,33 +422,22 @@ } .input:focus { border-color: var(--accent-border); } - .toggle-row { display: flex; gap: 8px; } + .toggle-row { display: flex; gap: 10px; flex-wrap: wrap; } .toggle-opt { - display: flex; align-items: center; gap: 6px; - font-size: 13px; font-weight: 300; color: var(--text); - padding: 7px 14px; border-radius: 8px; + display: flex; align-items: center; justify-content: center; gap: 8px; + font-size: 16px; font-weight: 400; color: var(--text); + padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); - cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; + cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s; background: var(--bg-subtle); + white-space: nowrap; } .toggle-opt input { display: none; } - .toggle-opt.active { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); } + .toggle-opt.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } + .toggle-opt.active img { filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1169%) hue-rotate(239deg) brightness(80%) contrast(92%); } - .transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } - .transport-opt { - 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); } - .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); } + .transport-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } + .transport-img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .tag { @@ -467,15 +456,16 @@ .q-card { display: flex; flex-direction: column; - gap: 10px; - background: var(--bg-subtle); - border: 1px solid var(--border); - border-radius: 12px; - padding: 20px; + gap: 14px; + background: var(--bg); + border: 1.5px solid var(--accent-border); + border-radius: 16px; + padding: 28px; + box-shadow: 0 4px 20px rgba(0,0,0,0.06); } .q-text { - font-size: 14px; - font-weight: 400; + font-size: 20px; + font-weight: 500; color: var(--text-h); line-height: 1.5; margin: 0; @@ -483,10 +473,10 @@ } .q-input { font-family: var(--sans); - font-size: 13px; - font-weight: 300; + font-size: 16px; + font-weight: 400; color: var(--text-h); - background: var(--bg); + background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; diff --git a/src/lib/world-map/JourneyView.svelte b/src/lib/world-map/JourneyView.svelte index ba708b3..54a35b8 100644 --- a/src/lib/world-map/JourneyView.svelte +++ b/src/lib/world-map/JourneyView.svelte @@ -5,26 +5,13 @@ import worldData from 'world-atlas/countries-50m.json'; import { get } from 'svelte/store'; import { journals } from '../stores/journalStore.js'; - 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'; + import airplaneImg from '../../assets/animationPlane.png'; let { onclose, onprogress, mode = 'map', onmodechange } = $props(); const HOME_CODE = '203'; - const TRANSPORT_IMG = { - flight: airplaneImg, - train: trainImg, - bus: busImg, - car: carImg, - ship: shipImg, - walk: walkImg, - }; - const PLANE_SIZE = 28; + const PLANE_SIZE = 26; const HOME_COLOR = '#8b5cf6'; const VISITED_COLOR = '#22c55e'; @@ -229,7 +216,7 @@ async function animateTrip(destCode, destFeature, transport = 'flight') { if (!homeFeature || !destFeature) return; - const iconSrc = TRANSPORT_IMG[transport] ?? airplaneImg; + const iconSrc = airplaneImg; const homeCentroid = d3.geoCentroid(homeFeature); const destCentroid = d3.geoCentroid(destFeature); if (mode === 'map') { @@ -391,11 +378,15 @@ {#if isFinished}Journey complete!{:else if currentDateLabel}{currentDateLabel}{/if}
- - + + -
diff --git a/src/lib/world-map/WorldMap.svelte b/src/lib/world-map/WorldMap.svelte index 6f34dc4..b1985be 100644 --- a/src/lib/world-map/WorldMap.svelte +++ b/src/lib/world-map/WorldMap.svelte @@ -90,7 +90,7 @@ if (!found) return; const [cx, cy] = _pathFn.centroid(found); if (isNaN(cx) || isNaN(cy)) return; - const SIZE = 24; + const SIZE = 18; _g.append('image') .attr('class', 'home-marker') .attr('href', homeIconUrl)