20256426/Map-Jurnal
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style home country picker page with home image and app theme

Browse Source
This commit is contained in:
haerikimmm
2026-06-16 18:40:51 +09:00
parent ec4eea0977
commit cf9717149f
1 changed files with 91 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
src/lib/auth/CountryPicker.svelte
View File

@@ -1,93 +1,72 @@
<script> <script>
import { getUser, getUserProfile, setHomeCountry } from './userStore.svelte.js'; import { getUser, getUserProfile, setHomeCountry } from './userStore.svelte.js';
import worldData from 'world-atlas/countries-50m.json'; import { countryNames } from '../shared/countries.js';
import homeImg from '../../assets 2/home.png';
let user = $derived(getUser()); let user = $derived(getUser());
let profile = $derived(getUserProfile()); let profile = $derived(getUserProfile());
const countries = $derived.by(() => {
if (!worldData?.objects?.countries?.geometries) return [];
return worldData.objects.countries.geometries
.map(g => ({ name: g.properties?.name, code: g.id }))
.filter(c => c.name && c.code)
.sort((a, b) => a.name.localeCompare(b.name));
});
let search = $state(''); let search = $state('');
let selectedCountry = $state(null); let selectedCountry = $state('');
let filtered = $derived(
search
? countries.filter(c => c.name.toLowerCase().includes(search.toLowerCase()))
: countries
);
let open = $state(false); let open = $state(false);
function select(c) { let filtered = $derived(
selectedCountry = c; search.trim()
search = c.name; ? countryNames.filter(c => c.toLowerCase().includes(search.toLowerCase()))
: countryNames
);
function select(name) {
selectedCountry = name;
search = name;
open = false; open = false;
} }
function handleSubmit() { function handleSubmit() {
if (selectedCountry) { if (selectedCountry) {
setHomeCountry(selectedCountry.name, selectedCountry.code); setHomeCountry(selectedCountry, selectedCountry);
} }
} }
function handleKeydown(e) { function handleKeydown(e) {
if (e.key === 'Enter' && selectedCountry) { if (e.key === 'Enter' && selectedCountry) handleSubmit();
handleSubmit(); if (e.key === 'Escape') open = false;
}
if (e.key === 'Escape') {
open = false;
}
} }
</script> </script>
<div class="overlay"> <div class="overlay">
<div class="card"> <div class="card">
<h1 class="heading">Welcome, {profile?.displayName || 'Traveler'}!</h1> <img src={homeImg} alt="home" class="home-img" />
<p class="subtitle">Select your home country to get started</p> <h1 class="title">Welcome, {profile?.displayName?.split(' ')[0] || 'Traveler'}!</h1>
<p class="subtitle">Where do you call home?</p>
<div class="dropdown" class:open> <div class="dropdown">
<input <input
type="text" type="text"
placeholder="Search for a country..." placeholder="Search country..."
bind:value={search} bind:value={search}
onfocus={() => { open = true; }} onfocus={() => { open = true; }}
oninput={() => { open = true; selectedCountry = null; }} oninput={() => { open = true; selectedCountry = ''; }}
onkeydown={handleKeydown} onkeydown={handleKeydown}
class="search-input" class="search-input"
/> />
{#if open} {#if open && filtered.length > 0}
<ul class="list" role="listbox"> <ul class="list" role="listbox">
{#each filtered as country} {#each filtered as name}
<li <li
role="option" role="option"
aria-selected={selectedCountry?.name === country.name} aria-selected={selectedCountry === name}
class:selected={selectedCountry?.name === country.name} class:selected={selectedCountry === name}
onclick={() => select(country)} onmousedown={() => select(name)}
onkeydown={(e) => { if (e.key === 'Enter') select(country); }}
tabindex="0" tabindex="0"
> >{name}</li>
{country.name}
</li>
{/each} {/each}
{#if filtered.length === 0}
<li class="no-results">No countries found</li>
{/if}
</ul> </ul>
{/if} {/if}
</div> </div>
<button <button class="continue-btn" disabled={!selectedCountry} onclick={handleSubmit}>
class="continue-btn" Set home country
disabled={!selectedCountry}
onclick={handleSubmit}
>
Continue
</button> </button>
</div> </div>
</div> </div>
@@ -96,113 +75,116 @@
.overlay { .overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(15, 23, 42, 0.85); background: var(--bg);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 100; z-index: 100;
backdrop-filter: blur(4px); padding-bottom: 20vh;
} }
.card { .card {
background: #1e2937;
border-radius: 16px;
padding: 40px 36px;
text-align: center; text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); max-width: 360px;
max-width: 420px;
width: 90%; width: 90%;
display: flex;
flex-direction: column;
align-items: center;
} }
.heading { .home-img {
font: 700 24px/1.3 sans-serif; width: 200px;
color: #f1f5f9; height: 200px;
margin-bottom: 6px; object-fit: contain;
margin-bottom: 16px;
}
.title {
font-family: var(--heading);
font-size: 24px;
font-weight: 600;
color: var(--text-h);
letter-spacing: -0.5px;
margin: 0 0 6px;
} }
.subtitle { .subtitle {
font: 400 15px/1.4 sans-serif; font-family: var(--sans);
color: #94a3b8; font-size: 14px;
margin-bottom: 28px; font-weight: 300;
color: var(--text);
margin: 0 0 24px;
} }
.dropdown { .dropdown {
position: relative; position: relative;
margin-bottom: 24px; width: 100%;
margin-bottom: 16px;
text-align: left; text-align: left;
} }
.search-input { .search-input {
width: 100%; width: 100%;
padding: 12px 16px; padding: 10px 14px;
border: 1px solid #475569; border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
background: #0f172a; background: var(--bg-subtle);
color: #f1f5f9; color: var(--text-h);
font: 400 15px/1.4 sans-serif; font-family: var(--sans);
font-size: 14px;
font-weight: 300;
outline: none; outline: none;
transition: border-color 0.2s; transition: border-color 0.15s;
} box-sizing: border-box;
.search-input:focus {
border-color: #3b82f6;
}
.search-input::placeholder {
color: #64748b;
} }
.search-input:focus { border-color: var(--accent-border); }
.search-input::placeholder { color: var(--text-sub); }
.list { .list {
position: absolute; position: absolute;
top: calc(100% + 4px); top: calc(100% + 4px);
left: 0; left: 0;
right: 0; right: 0;
max-height: 240px; max-height: 220px;
overflow-y: auto; overflow-y: auto;
background: #0f172a; background: var(--bg);
border: 1px solid #475569; border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
list-style: none; list-style: none;
z-index: 10; z-index: 10;
padding: 4px;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
} }
.list li { .list li {
padding: 10px 16px; padding: 8px 12px;
cursor: pointer; cursor: pointer;
color: #cbd5e1; color: var(--text);
font: 400 14px/1.4 sans-serif; font-family: var(--sans);
transition: background 0.15s; font-size: 13px;
font-weight: 300;
border-radius: 6px;
transition: background 0.1s;
} }
.list li:hover, .list li:hover, .list li.selected {
.list li.selected { background: var(--accent-bg);
background: #1e3a5f; color: var(--accent);
color: #f1f5f9;
}
.no-results {
color: #64748b;
cursor: default;
} }
.continue-btn { .continue-btn {
width: 100%; width: 100%;
padding: 12px 24px; padding: 11px 24px;
border: none; border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
background: #3b82f6; background: var(--accent);
color: #fff; color: #fff;
font: 600 16px/1.4 sans-serif; font-family: var(--sans);
font-size: 14px;
font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background 0.2s, opacity 0.2s; transition: background 0.15s, opacity 0.15s;
}
.continue-btn:hover:not(:disabled) {
background: #2563eb;
}
.continue-btn:disabled {
opacity: 0.4;
cursor: default;
} }
.continue-btn:hover:not(:disabled) { background: var(--accent-dark); }
.continue-btn:disabled { opacity: 0.4; cursor: default; }
</style> </style>