style home country picker page with home image and app theme
This commit is contained in:
haerikimmm
@@ -1,93 +1,72 @@
|
||||
<script>
|
||||
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 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 selectedCountry = $state(null);
|
||||
|
||||
let filtered = $derived(
|
||||
search
|
||||
? countries.filter(c => c.name.toLowerCase().includes(search.toLowerCase()))
|
||||
: countries
|
||||
);
|
||||
|
||||
let selectedCountry = $state('');
|
||||
let open = $state(false);
|
||||
|
||||
function select(c) {
|
||||
selectedCountry = c;
|
||||
search = c.name;
|
||||
let filtered = $derived(
|
||||
search.trim()
|
||||
? countryNames.filter(c => c.toLowerCase().includes(search.toLowerCase()))
|
||||
: countryNames
|
||||
);
|
||||
|
||||
function select(name) {
|
||||
selectedCountry = name;
|
||||
search = name;
|
||||
open = false;
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
if (selectedCountry) {
|
||||
setHomeCountry(selectedCountry.name, selectedCountry.code);
|
||||
setHomeCountry(selectedCountry, selectedCountry);
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(e) {
|
||||
if (e.key === 'Enter' && selectedCountry) {
|
||||
handleSubmit();
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
open = false;
|
||||
}
|
||||
if (e.key === 'Enter' && selectedCountry) handleSubmit();
|
||||
if (e.key === 'Escape') open = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="overlay">
|
||||
<div class="card">
|
||||
<h1 class="heading">Welcome, {profile?.displayName || 'Traveler'}!</h1>
|
||||
<p class="subtitle">Select your home country to get started</p>
|
||||
<img src={homeImg} alt="home" class="home-img" />
|
||||
<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
|
||||
type="text"
|
||||
placeholder="Search for a country..."
|
||||
placeholder="Search country..."
|
||||
bind:value={search}
|
||||
onfocus={() => { open = true; }}
|
||||
oninput={() => { open = true; selectedCountry = null; }}
|
||||
oninput={() => { open = true; selectedCountry = ''; }}
|
||||
onkeydown={handleKeydown}
|
||||
class="search-input"
|
||||
/>
|
||||
{#if open}
|
||||
{#if open && filtered.length > 0}
|
||||
<ul class="list" role="listbox">
|
||||
{#each filtered as country}
|
||||
{#each filtered as name}
|
||||
<li
|
||||
role="option"
|
||||
aria-selected={selectedCountry?.name === country.name}
|
||||
class:selected={selectedCountry?.name === country.name}
|
||||
onclick={() => select(country)}
|
||||
onkeydown={(e) => { if (e.key === 'Enter') select(country); }}
|
||||
aria-selected={selectedCountry === name}
|
||||
class:selected={selectedCountry === name}
|
||||
onmousedown={() => select(name)}
|
||||
tabindex="0"
|
||||
>
|
||||
{country.name}
|
||||
</li>
|
||||
>{name}</li>
|
||||
{/each}
|
||||
{#if filtered.length === 0}
|
||||
<li class="no-results">No countries found</li>
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="continue-btn"
|
||||
disabled={!selectedCountry}
|
||||
onclick={handleSubmit}
|
||||
>
|
||||
Continue
|
||||
<button class="continue-btn" disabled={!selectedCountry} onclick={handleSubmit}>
|
||||
Set home country
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -96,113 +75,116 @@
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(4px);
|
||||
padding-bottom: 20vh;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #1e2937;
|
||||
border-radius: 16px;
|
||||
padding: 40px 36px;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
max-width: 420px;
|
||||
max-width: 360px;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font: 700 24px/1.3 sans-serif;
|
||||
color: #f1f5f9;
|
||||
margin-bottom: 6px;
|
||||
.home-img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
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 {
|
||||
font: 400 15px/1.4 sans-serif;
|
||||
color: #94a3b8;
|
||||
margin-bottom: 28px;
|
||||
font-family: var(--sans);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: var(--text);
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #475569;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #0f172a;
|
||||
color: #f1f5f9;
|
||||
font: 400 15px/1.4 sans-serif;
|
||||
background: var(--bg-subtle);
|
||||
color: var(--text-h);
|
||||
font-family: var(--sans);
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #64748b;
|
||||
transition: border-color 0.15s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.search-input:focus { border-color: var(--accent-border); }
|
||||
.search-input::placeholder { color: var(--text-sub); }
|
||||
|
||||
.list {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 240px;
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
background: #0f172a;
|
||||
border: 1px solid #475569;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
list-style: none;
|
||||
z-index: 10;
|
||||
padding: 4px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.list li {
|
||||
padding: 10px 16px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
color: #cbd5e1;
|
||||
font: 400 14px/1.4 sans-serif;
|
||||
transition: background 0.15s;
|
||||
color: var(--text);
|
||||
font-family: var(--sans);
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
border-radius: 6px;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.list li:hover,
|
||||
.list li.selected {
|
||||
background: #1e3a5f;
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
color: #64748b;
|
||||
cursor: default;
|
||||
.list li:hover, .list li.selected {
|
||||
background: var(--accent-bg);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.continue-btn {
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
padding: 11px 24px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #3b82f6;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font: 600 16px/1.4 sans-serif;
|
||||
font-family: var(--sans);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, opacity 0.2s;
|
||||
}
|
||||
|
||||
.continue-btn:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.continue-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
transition: background 0.15s, opacity 0.15s;
|
||||
}
|
||||
.continue-btn:hover:not(:disabled) { background: var(--accent-dark); }
|
||||
.continue-btn:disabled { opacity: 0.4; cursor: default; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user