Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-06 05:35:19 +02:00
Code Issues Releases Activity

add: new theme

Browse source
This commit is contained in:
RianKhanafi 2025-07-15 11:05:49 +07:00
parent 4e96e529f4
commit 84b3a2a246
19 changed files with 131 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

0
backend/entrypoint.sh Normal file → Executable file
View file

21
docker-compose.yml
View file

@ -1,17 +1,24 @@
services: services:
web: web:
#build: ./frontend/ build: ./frontend/
image: ghcr.io/seanmorley15/adventurelog-frontend:latest #image: ghcr.io/seanmorley15/adventurelog-frontend:latest
#platform: linux/amd64
container_name: adventurelog-frontend container_name: adventurelog-frontend
restart: unless-stopped restart: unless-stopped
env_file: .env env_file: .env
ports: ports:
- "${FRONTEND_PORT:-8015}:3000" - "${FRONTEND_PORT:-8015}:5173"
depends_on: depends_on:
- server - server
volumes:
- ./frontend:/app
- /app/node_modules
command: sh -c "pnpm install && pnpm run dev --host 0.0.0.0"
user: "0:0" # Run as root for development to avoid permission issues
db: db:
image: postgis/postgis:16-3.5 image: postgis/postgis:16-3.5
platform: linux/amd64
container_name: adventurelog-db container_name: adventurelog-db
restart: unless-stopped restart: unless-stopped
env_file: .env env_file: .env
@ -19,8 +26,9 @@ services:
- postgres_data:/var/lib/postgresql/data/ - postgres_data:/var/lib/postgresql/data/
server: server:
#build: ./backend/ build: ./backend/
image: ghcr.io/seanmorley15/adventurelog-backend:latest #image: ghcr.io/seanmorley15/adventurelog-backend:latest
#platform: linux/amd64
container_name: adventurelog-backend container_name: adventurelog-backend
restart: unless-stopped restart: unless-stopped
env_file: .env env_file: .env
@ -29,7 +37,10 @@ services:
depends_on: depends_on:
- db - db
volumes: volumes:
- ./backend:/code
- adventurelog_media:/code/media/ - adventurelog_media:/code/media/
user: "0:0" # Run as root for development to avoid permission issues
command: sh -c "chmod +x /code/entrypoint.sh && cd /code/server && /code/entrypoint.sh"
volumes: volumes:
postgres_data: postgres_data:

6
frontend/src/lib/components/AdventureCard.svelte
View file

@ -176,7 +176,7 @@
{/if} {/if}
<div <div
class="card w-full max-w-md bg-base-300 shadow-2xl hover:shadow-3xl transition-all duration-300 border border-base-300 hover:border-primary/20 group" class="card w-full max-w-md shadow-sm hover:shadow-md transition-all duration-300 border border-base-300 hover:border-primary/20 group"
> >
<!-- Image Section with Overlay --> <!-- Image Section with Overlay -->
<div class="relative overflow-hidden rounded-t-2xl"> <div class="relative overflow-hidden rounded-t-2xl">
@ -215,7 +215,9 @@
<!-- Category Badge --> <!-- Category Badge -->
{#if adventure.category} {#if adventure.category}
<div class="absolute bottom-4 left-4"> <div class="absolute bottom-4 left-4">
<div class="badge badge-primary shadow-lg font-medium"> <div
class="font-medium h-[24px] text-primary bg-[#EDF3FF] rounded-full px-[12px] pb-[3px] !border-none"
>
{adventure.category.display_name} {adventure.category.display_name}
{adventure.category.icon} {adventure.category.icon}
</div> </div>

2
frontend/src/lib/components/CityCard.svelte
View file

@ -41,7 +41,7 @@
</script> </script>
<div <div
class="card w-full max-w-md bg-base-300 text-base-content shadow-2xl hover:shadow-3xl transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden" class="card w-full max-w-md text-base-content hover:shadow-sm transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden"
> >
<div class="card-body p-6 space-y-4"> <div class="card-body p-6 space-y-4">
<!-- Header --> <!-- Header -->

2
frontend/src/lib/components/CollectionLink.svelte
View file

@ -102,7 +102,7 @@
<Collections class="w-8 h-8 text-primary" /> <Collections class="w-8 h-8 text-primary" />
</div> </div>
<div> <div>
<h1 class="text-3xl font-bold text-primary bg-clip-text"> <h1 class="text-3xl font-bold text-black bg-clip-text">
{$t('adventures.my_collections')} {$t('adventures.my_collections')}
</h1> </h1>
<p class="text-sm text-base-content/60"> <p class="text-sm text-base-content/60">

2
frontend/src/lib/components/CountryCard.svelte
View file

@ -15,7 +15,7 @@
</script> </script>
<div <div
class="card w-full max-w-md bg-base-300 text-base-content shadow-2xl hover:shadow-3xl transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden" class="card w-full max-w-md text-base-content hover:shadow-sm transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden"
> >
<!-- Flag Image --> <!-- Flag Image -->
<figure> <figure>

2
frontend/src/lib/components/RegionCard.svelte
View file

@ -50,7 +50,7 @@
</script> </script>
<div <div
class="card w-full max-w-md bg-base-300 text-base-content shadow-2xl hover:shadow-3xl transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden" class="card w-full max-w-md text-base-content hover:shadow-sm transition-all duration-300 border border-base-300 hover:border-primary/20 group overflow-hidden"
> >
<div class="card-body p-6 space-y-4"> <div class="card-body p-6 space-y-4">
<!-- Header --> <!-- Header -->

8
frontend/src/routes/adventures/+page.svelte
View file

@ -180,12 +180,12 @@
{/if} {/if}
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200"> <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
<div class="drawer lg:drawer-open"> <div class="drawer lg:drawer-open p-[12px]">
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} /> <input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content"> <div class="drawer-content bg-white rounded-[24px] overflow-hidden">
<!-- Header Section --> <!-- Header Section -->
<div class="sticky top-0 z-30 bg-base-100/80 backdrop-blur-lg border-b border-base-300"> <div class="sticky top-0 z-30">
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
@ -197,7 +197,7 @@
<Compass class="w-8 h-8 text-primary" /> <Compass class="w-8 h-8 text-primary" />
</div> </div>
<div> <div>
<h1 class="text-3xl font-bold bg-clip-text text-primary"> <h1 class="text-3xl font-bold bg-clip-text text-black">
{$t('navbar.my_adventures')} {$t('navbar.my_adventures')}
</h1> </h1>
<p class="text-sm text-base-content/60"> <p class="text-sm text-base-content/60">

36
frontend/src/routes/adventures/[id]/+page.svelte
View file

@ -153,7 +153,7 @@
{#if data.user && data.user.uuid == adventure.user_id} {#if data.user && data.user.uuid == adventure.user_id}
<div class="fixed bottom-6 right-6 z-50"> <div class="fixed bottom-6 right-6 z-50">
<button <button
class="btn btn-primary btn-circle w-16 h-16 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-110" class="btn btn-primary btn-circle w-16 h hover:shadow-2xl transition-all duration-300 hover:scale-110"
on:click={() => (isEditModalOpen = true)} on:click={() => (isEditModalOpen = true)}
> >
<ClipboardList class="w-8 h-8" /> <ClipboardList class="w-8 h-8" />
@ -316,7 +316,7 @@
<div class="lg:col-span-2 space-y-6 sm:space-y-8"> <div class="lg:col-span-2 space-y-6 sm:space-y-8">
<!-- Author Info Card --> <!-- Author Info Card -->
{#if adventure.user} {#if adventure.user}
<div class="card bg-base-200 shadow-xl"> <div class="card bg-white">
<div class="card-body"> <div class="card-body">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
{#if adventure.user.profile_pic} {#if adventure.user.profile_pic}
@ -354,8 +354,10 @@
{adventure.user.last_name || ''} {adventure.user.last_name || ''}
{/if} {/if}
</div> </div>
<div class="flex items-center gap-2 text-sm opacity-70 mt-1"> <div class="flex items-center gap-2 text-sm mt-1">
<div class="badge badge-sm"> <div
class="badge bg-primary text-white block h-[25px] text-[14px] flex items-center"
>
{adventure.is_public {adventure.is_public
? `🌍 ${$t('adventures.public')}` ? `🌍 ${$t('adventures.public')}`
: `🔒 ${$t('adventures.private')}`} : `🔒 ${$t('adventures.private')}`}
@ -382,7 +384,7 @@
<!-- Description Card --> <!-- Description Card -->
{#if adventure.description} {#if adventure.description}
<div class="card bg-base-200 shadow-xl"> <div class="card bg-white">
<div class="card-body"> <div class="card-body">
<h2 class="card-title text-2xl mb-4">📝 {$t('adventures.description')}</h2> <h2 class="card-title text-2xl mb-4">📝 {$t('adventures.description')}</h2>
<article class="prose max-w-none"> <article class="prose max-w-none">
@ -394,7 +396,7 @@
<!-- Visits Timeline --> <!-- Visits Timeline -->
{#if adventure.visits.length > 0} {#if adventure.visits.length > 0}
<div class="card bg-base-200 shadow-xl"> <div class="card bg-white">
<div class="card-body"> <div class="card-body">
<h2 class="card-title text-2xl mb-6">🎯 {$t('adventures.visits')}</h2> <h2 class="card-title text-2xl mb-6">🎯 {$t('adventures.visits')}</h2>
<div class="space-y-4"> <div class="space-y-4">
@ -407,7 +409,7 @@
{/if} {/if}
</div> </div>
<div class="flex-1 pb-4"> <div class="flex-1 pb-4">
<div class="card bg-base-200 shadow"> <div class="card bg-white">
<div class="card-body p-4"> <div class="card-body p-4">
{#if isAllDay(visit.start_date)} {#if isAllDay(visit.start_date)}
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
@ -450,7 +452,7 @@
</div> </div>
{/if} {/if}
{#if visit.notes} {#if visit.notes}
<div class="mt-3 p-3 bg-base-200 rounded-lg"> <div class="mt-3 p-3 bg-white-200 rounded-lg">
<p class="text-sm italic">"{visit.notes}"</p> <p class="text-sm italic">"{visit.notes}"</p>
</div> </div>
{/if} {/if}
@ -466,14 +468,14 @@
<!-- Map Section --> <!-- Map Section -->
{#if (adventure.longitude && adventure.latitude) || geojson} {#if (adventure.longitude && adventure.latitude) || geojson}
<div class="card bg-base-200 shadow-xl"> <div class="card bg-white">
<div class="card-body"> <div class="card-body">
<h2 class="card-title text-2xl mb-4">🗺️ {$t('adventures.location')}</h2> <h2 class="card-title text-2xl mb-4">🗺️ {$t('adventures.location')}</h2>
{#if adventure.longitude && adventure.latitude} {#if adventure.longitude && adventure.latitude}
<!-- Compact Coordinates Card --> <!-- Compact Coordinates Card -->
<div <div
class="card bg-gradient-to-br from-primary/5 to-secondary/5 shadow-lg mb-4 border border-primary/10" class="card bg-gradient-to-br from-primary/5 to-secondary/5 mb-4 border border-primary/10"
> >
<div class="card-body p-4"> <div class="card-body p-4">
<div class="flex items-center justify-between mb-3"> <div class="flex items-center justify-between mb-3">
@ -483,14 +485,14 @@
</div> </div>
<div class="grid grid-cols-2 gap-3 mb-4"> <div class="grid grid-cols-2 gap-3 mb-4">
<div class="text-center p-2 bg-base-200/70 rounded border border-primary/10"> <div class="text-center p-2 bg-white-200/70 rounded border border-primary/10">
<div class="text-xs text-primary/70 uppercase tracking-wide"> <div class="text-xs text-primary/70 uppercase tracking-wide">
{$t('adventures.latitude')} {$t('adventures.latitude')}
</div> </div>
<div class="text-lg font-bold text-primary">{adventure.latitude}°</div> <div class="text-lg font-bold text-primary">{adventure.latitude}°</div>
</div> </div>
<div <div
class="text-center p-2 bg-base-200/70 rounded border border-secondary/10" class="text-center p-2 bg-white-200/70 rounded border border-secondary/10"
> >
<div class="text-xs text-secondary/70 uppercase tracking-wide"> <div class="text-xs text-secondary/70 uppercase tracking-wide">
{$t('adventures.longitude')} {$t('adventures.longitude')}
@ -598,7 +600,7 @@
</div> </div>
{/if} {/if}
<div class="rounded-lg overflow-hidden shadow-lg"> <div class="rounded-lg overflow-hidden">
<MapLibre <MapLibre
style={getBasemapUrl()} style={getBasemapUrl()}
class="w-full h-96" class="w-full h-96"
@ -645,7 +647,7 @@
<!-- Right Column - Sidebar --> <!-- Right Column - Sidebar -->
<div class="space-y-4 sm:space-y-6"> <div class="space-y-4 sm:space-y-6">
<!-- Quick Info Card --> <!-- Quick Info Card -->
<div class="card bg-base-200 shadow-xl"> <div class="card bg-white">
<div class="card-body"> <div class="card-body">
<h3 class="card-title text-lg mb-4">ℹ️ {$t('adventures.basic_information')}</h3> <h3 class="card-title text-lg mb-4">ℹ️ {$t('adventures.basic_information')}</h3>
<div class="space-y-3"> <div class="space-y-3">
@ -679,7 +681,7 @@
<!-- Sunrise/Sunset --> <!-- Sunrise/Sunset -->
{#if adventure.sun_times && adventure.sun_times.length > 0} {#if adventure.sun_times && adventure.sun_times.length > 0}
<div class="card bg-base-200 shadow-xl"> <div class="card bg-white">
<div class="card-body"> <div class="card-body">
<h3 class="card-title text-lg mb-4"> <h3 class="card-title text-lg mb-4">
🌅 {$t('adventures.sun_times')} 🌅 {$t('adventures.sun_times')}
@ -703,7 +705,7 @@
<!-- Attachments --> <!-- Attachments -->
{#if adventure.attachments && adventure.attachments.length > 0} {#if adventure.attachments && adventure.attachments.length > 0}
<div class="card bg-base-200 shadow-xl"> <div class="card bg-white">
<div class="card-body"> <div class="card-body">
<h3 class="card-title text-lg mb-4"> <h3 class="card-title text-lg mb-4">
📎 {$t('adventures.attachments')} 📎 {$t('adventures.attachments')}
@ -722,7 +724,7 @@
<!-- Additional Images --> <!-- Additional Images -->
{#if adventure.images && adventure.images.length > 1} {#if adventure.images && adventure.images.length > 1}
<div class="card bg-base-200 shadow-xl"> <div class="card bg-white">
<div class="card-body"> <div class="card-body">
<h3 class="card-title text-lg mb-4">🖼️ {$t('adventures.images')}</h3> <h3 class="card-title text-lg mb-4">🖼️ {$t('adventures.images')}</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2"> <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">

8
frontend/src/routes/calendar/+page.svelte
View file

@ -178,12 +178,12 @@
</svelte:head> </svelte:head>
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200"> <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
<div class="drawer lg:drawer-open"> <div class="drawer lg:drawer-open p-[12px]">
<input id="calendar-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} /> <input id="calendar-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content"> <div class="drawer-content bg-white rounded-[24px] overflow-hidden">
<!-- Header Section --> <!-- Header Section -->
<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300"> <div class="sticky top-0 z-30">
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
@ -262,7 +262,7 @@
<!-- Main Content --> <!-- Main Content -->
<div class="container mx-auto px-6 py-8"> <div class="container mx-auto px-6 py-8">
<!-- Calendar --> <!-- Calendar -->
<div class="card bg-base-100 shadow-2xl border border-base-300/50"> <div class="card bg-base-100 border border-base-300/50">
<div class="card-body p-0"> <div class="card-body p-0">
<Calendar {plugins} {options} /> <Calendar {plugins} {options} />
</div> </div>

6
frontend/src/routes/collections/+page.svelte
View file

@ -186,12 +186,12 @@
{/if} {/if}
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200"> <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
<div class="drawer lg:drawer-open"> <div class="drawer lg:drawer-open p-[12px]">
<input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} /> <input id="my-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content"> <div class="drawer-content bg-white rounded-[24px] overflow-hidden">
<!-- Header Section --> <!-- Header Section -->
<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300"> <div class="sticky top-0 z-30">
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">

6
frontend/src/routes/collections/[id]/+page.svelte
View file

@ -1054,7 +1054,7 @@
dateString dateString
] || []} ] || []}
<div class="card bg-base-100 shadow-xl my-8"> <div class="card bg-base-100 my-8">
<div class="card-body bg-base-200"> <div class="card-body bg-base-200">
<h2 class="card-title text-3xl justify-center g"> <h2 class="card-title text-3xl justify-center g">
{$t('adventures.day')} {$t('adventures.day')}
@ -1536,7 +1536,7 @@
</MapLibre> </MapLibre>
{#each filteredRecomendations as recomendation} {#each filteredRecomendations as recomendation}
{#if recomendation.name && recomendation.longitude && recomendation.latitude} {#if recomendation.name && recomendation.longitude && recomendation.latitude}
<div class="card bg-base-100 shadow-xl my-4 w-full"> <div class="card bg-base-100 my-4 w-full">
<div class="card-body"> <div class="card-body">
<h2 class="card-title text-xl font-bold"> <h2 class="card-title text-xl font-bold">
{recomendation.name || $t('recomendations.recommendation')} {recomendation.name || $t('recomendations.recommendation')}
@ -1566,7 +1566,7 @@
{/each} {/each}
{/if} {/if}
{#if loadingRecomendations} {#if loadingRecomendations}
<div class="card bg-base-100 shadow-xl my-4 w-full"> <div class="card bg-base-100 my-4 w-full">
<div class="card-body"> <div class="card-body">
<div class="flex flex-col items-center justify-center"> <div class="flex flex-col items-center justify-center">
<span class="loading loading-ring loading-lg"></span> <span class="loading loading-ring loading-lg"></span>

18
frontend/src/routes/dashboard/+page.svelte
View file

@ -45,7 +45,7 @@
</div> </div>
</div> --> </div> -->
<div> <div>
<h1 class="text-4xl lg:text-5xl font-bold bg-clip-text text-primary"> <h1 class="text-4xl lg:text-5xl font-bold bg-clip-text text-black">
{$t('dashboard.welcome_back')}, {user?.first_name {$t('dashboard.welcome_back')}, {user?.first_name
? `${user.first_name}` ? `${user.first_name}`
: user?.username}! : user?.username}!
@ -67,12 +67,12 @@
<div class="flex flex-col sm:flex-row gap-3"> <div class="flex flex-col sm:flex-row gap-3">
<a <a
href="/adventures" href="/adventures"
class="btn btn-primary btn-lg gap-2 shadow-lg hover:shadow-xl transition-all duration-300" class="btn btn-primary btn-lg gap-2 shadow-lg hover:shadow-xl transition-all duration-300 rounded-full"
> >
<Plus class="w-5 h-5" /> <Plus class="w-5 h-5" />
{$t('map.add_adventure')} {$t('map.add_adventure')}
</a> </a>
<a href="/worldtravel" class="btn btn-outline btn-lg gap-2"> <a href="/worldtravel" class="btn btn-outline btn-lg gap-2 rounded-full">
<FlagCheckeredVariantIcon class="w-5 h-5" /> <FlagCheckeredVariantIcon class="w-5 h-5" />
{$t('home.explore_world')} {$t('home.explore_world')}
</a> </a>
@ -86,7 +86,7 @@
> >
<!-- Countries Visited --> <!-- Countries Visited -->
<div <div
class="stat-card card bg-gradient-to-br from-primary/10 to-primary/5 shadow-xl border border-primary/20 hover:shadow-2xl transition-all duration-300" class="stat-card card bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20 hover:shadow-2xl transition-all duration-300"
> >
<div class="card-body p-6"> <div class="card-body p-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
@ -117,7 +117,7 @@
<!-- Regions Visited --> <!-- Regions Visited -->
<div <div
class="stat-card card bg-gradient-to-br from-success/10 to-success/5 shadow-xl border border-success/20 hover:shadow-2xl transition-all duration-300" class="stat-card card bg-gradient-to-br from-success/10 to-success/5 border border-success/20 hover:shadow-2xl transition-all duration-300"
> >
<div class="card-body p-6"> <div class="card-body p-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
@ -138,7 +138,7 @@
<!-- Cities Visited --> <!-- Cities Visited -->
<div <div
class="stat-card card bg-gradient-to-br from-info/10 to-info/5 shadow-xl border border-info/20 hover:shadow-2xl transition-all duration-300" class="stat-card card bg-gradient-to-br from-info/10 to-info/5 border border-info/20 hover:shadow-2xl transition-all duration-300"
> >
<div class="card-body p-6"> <div class="card-body p-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
@ -188,7 +188,7 @@
<!-- Empty State / Inspiration --> <!-- Empty State / Inspiration -->
{#if recentAdventures.length === 0} {#if recentAdventures.length === 0}
<div <div
class="empty-state card bg-gradient-to-br from-base-100 to-base-200 shadow-2xl border border-base-300" class="empty-state card bg-gradient-to-br from-base-100 to-base-200 border border-base-300"
> >
<div class="card-body p-12 text-center"> <div class="card-body p-12 text-center">
<div class="flex justify-center mb-6"> <div class="flex justify-center mb-6">
@ -209,12 +209,12 @@
<div class="flex flex-col sm:flex-row gap-4 justify-center"> <div class="flex flex-col sm:flex-row gap-4 justify-center">
<a <a
href="/adventures" href="/adventures"
class="btn btn-primary btn-lg gap-2 shadow-lg hover:shadow-xl transition-all duration-300" class="btn btn-primary btn-lg gap-2 shadow-lg hover:shadow-xl transition-all duration-300 rounded-full font-normal"
> >
<Plus class="w-5 h-5" /> <Plus class="w-5 h-5" />
{$t('map.add_adventure')} {$t('map.add_adventure')}
</a> </a>
<a href="/worldtravel" class="btn btn-outline btn-lg gap-2"> <a href="/worldtravel" class="btn btn-outline btn-lg gap-2 rounded-full font-normal">
<FlagCheckeredVariantIcon class="w-5 h-5" /> <FlagCheckeredVariantIcon class="w-5 h-5" />
{$t('home.explore_world')} {$t('home.explore_world')}
</a> </a>

8
frontend/src/routes/map/+page.svelte
View file

@ -105,12 +105,12 @@
</svelte:head> </svelte:head>
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200"> <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
<div class="drawer lg:drawer-open"> <div class="drawer lg:drawer-open p-[12px]">
<input id="map-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} /> <input id="map-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content"> <div class="drawer-content bg-white rounded-[24px] overflow-hidden">
<!-- Header Section --> <!-- Header Section -->
<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300"> <div class="sticky top-0 z-30">
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
@ -180,7 +180,7 @@
<!-- Map Section --> <!-- Map Section -->
<div class="container mx-auto px-6 py-4 flex-1"> <div class="container mx-auto px-6 py-4 flex-1">
<div class="card bg-base-100 shadow-xl h-full"> <div class="card bg-base-100 h-full">
<div class="card-body p-4 h-full"> <div class="card-body p-4 h-full">
<MapLibre <MapLibre
style={getBasemapUrl()} style={getBasemapUrl()}

10
frontend/src/routes/profile/[uuid]/+page.svelte
View file

@ -183,7 +183,7 @@
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<!-- Adventures --> <!-- Adventures -->
<div <div
class="stat-card card bg-gradient-to-br from-primary/10 to-primary/5 shadow-xl border border-primary/20 hover:shadow-2xl transition-all duration-300" class="stat-card card bg-gradient-to-br from-primary/10 to-primary/5 border border-primary/20 hover:shadow-2xl transition-all duration-300"
> >
<div class="card-body p-6"> <div class="card-body p-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
@ -226,7 +226,7 @@
<!-- Countries --> <!-- Countries -->
<div <div
class="stat-card card bg-gradient-to-br from-success/10 to-success/5 shadow-xl border border-success/20 hover:shadow-2xl transition-all duration-300" class="stat-card card bg-gradient-to-br from-success/10 to-success/5 border border-success/20 hover:shadow-2xl transition-all duration-300"
> >
<div class="card-body p-6"> <div class="card-body p-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
@ -261,7 +261,7 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Regions --> <!-- Regions -->
<div <div
class="stat-card card bg-gradient-to-br from-info/10 to-info/5 shadow-xl border border-info/20 hover:shadow-2xl transition-all duration-300" class="stat-card card bg-gradient-to-br from-info/10 to-info/5 border border-info/20 hover:shadow-2xl transition-all duration-300"
> >
<div class="card-body p-6"> <div class="card-body p-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
@ -344,7 +344,7 @@
</div> </div>
{#if adventures && adventures.length === 0} {#if adventures && adventures.length === 0}
<div class="card bg-base-100 shadow-xl"> <div class="card bg-base-100">
<div class="card-body text-center py-16"> <div class="card-body text-center py-16">
<div class="p-6 bg-base-200/50 rounded-2xl w-fit mx-auto mb-6"> <div class="p-6 bg-base-200/50 rounded-2xl w-fit mx-auto mb-6">
<Airplane class="w-16 h-16 text-base-content/30" /> <Airplane class="w-16 h-16 text-base-content/30" />
@ -387,7 +387,7 @@
</div> </div>
{#if collections && collections.length === 0} {#if collections && collections.length === 0}
<div class="card bg-base-100 shadow-xl"> <div class="card bg-base-100">
<div class="card-body text-center py-16"> <div class="card-body text-center py-16">
<div class="p-6 bg-base-200/50 rounded-2xl w-fit mx-auto mb-6"> <div class="p-6 bg-base-200/50 rounded-2xl w-fit mx-auto mb-6">
<CollectionIcon class="w-16 h-16 text-base-content/30" /> <CollectionIcon class="w-16 h-16 text-base-content/30" />

10
frontend/src/routes/worldtravel/+page.svelte
View file

@ -91,12 +91,12 @@
</svelte:head> </svelte:head>
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200"> <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
<div class="drawer lg:drawer-open"> <div class="drawer lg:drawer-open p-[12px]">
<input id="travel-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} /> <input id="travel-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content"> <div class="drawer-content bg-white rounded-[24px] overflow-hidden">
<!-- Header Section --> <!-- Header Section -->
<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300"> <div class="sticky top-0 z-30">
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
@ -108,7 +108,7 @@
<Globe class="w-8 h-8 text-primary" /> <Globe class="w-8 h-8 text-primary" />
</div> </div>
<div> <div>
<h1 class="text-3xl font-bold text-primary bg-clip-text"> <h1 class="text-3xl font-bold text-black bg-clip-text">
{$t('worldtravel.country_list')} {$t('worldtravel.country_list')}
</h1> </h1>
<p class="text-sm text-base-content/60"> <p class="text-sm text-base-content/60">
@ -231,7 +231,7 @@
<!-- Map Section --> <!-- Map Section -->
{#if showMap} {#if showMap}
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="card bg-base-100 shadow-xl"> <div class="card bg-base-100">
<div class="card-body p-4"> <div class="card-body p-4">
<MapLibre <MapLibre
style={getBasemapUrl()} style={getBasemapUrl()}

8
frontend/src/routes/worldtravel/[id]/+page.svelte
View file

@ -141,12 +141,12 @@
</svelte:head> </svelte:head>
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200"> <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
<div class="drawer lg:drawer-open"> <div class="drawer lg:drawer-open p-[12px]">
<input id="regions-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} /> <input id="regions-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content"> <div class="drawer-content bg-white rounded-[24px] overflow-hidden">
<!-- Header Section --> <!-- Header Section -->
<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300"> <div class="sticky top-0 z-30">
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
@ -250,7 +250,7 @@
<!-- Map Section --> <!-- Map Section -->
{#if regions.some((region) => region.latitude && region.longitude)} {#if regions.some((region) => region.latitude && region.longitude)}
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="card bg-base-100 shadow-xl"> <div class="card bg-base-100">
<div class="card-body p-4"> <div class="card-body p-4">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">

8
frontend/src/routes/worldtravel/[id]/[id]/+page.svelte
View file

@ -133,12 +133,12 @@
</svelte:head> </svelte:head>
<div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200"> <div class="min-h-screen bg-gradient-to-br from-base-200 via-base-100 to-base-200">
<div class="drawer lg:drawer-open"> <div class="drawer lg:drawer-open p-[12px]">
<input id="cities-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} /> <input id="cities-drawer" type="checkbox" class="drawer-toggle" bind:checked={sidebarOpen} />
<div class="drawer-content"> <div class="drawer-content bg-white rounded-[24px] overflow-hidden">
<!-- Header Section --> <!-- Header Section -->
<div class="sticky top-0 z-40 bg-base-100/80 backdrop-blur-lg border-b border-base-300"> <div class="sticky top-0 z-40">
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
@ -245,7 +245,7 @@
<!-- Map Section --> <!-- Map Section -->
{#if allCities.length > 0} {#if allCities.length > 0}
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="card bg-base-100 shadow-xl"> <div class="card bg-base-100">
<div class="card-body p-4"> <div class="card-body p-4">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">

44
frontend/tailwind.config.js
View file

@ -2,7 +2,11 @@
export default { export default {
content: ['./src/**/*.{html,js,svelte,ts}'], content: ['./src/**/*.{html,js,svelte,ts}'],
theme: { theme: {
extend: {} extend: {
borderRadius: {
card: '24px'
}
}
}, },
plugins: [require('@tailwindcss/typography'), require('daisyui')], plugins: [require('@tailwindcss/typography'), require('daisyui')],
daisyui: { daisyui: {
@ -128,6 +132,44 @@ export default {
success: '#A3BE8C', // Success success: '#A3BE8C', // Success
warning: '#D08770', // Warning warning: '#D08770', // Warning
error: '#BF616A' // Error error: '#BF616A' // Error
},
traveler: {
primary: '#0057FF', // Primary color
'primary-100': '#EDF3FF',
'primary-focus': '#0057FF', // Primary color - focused
'primary-content': '#ECEFF4', // Foreground content color to use on primary color
secondary: '#0057FF', // Secondary color
'secondary-focus': '#0057FF', // Secondary color - focused
'secondary-content': '#ECEFF4', // Foreground content color to use on secondary color
accent: '#B48EAD', // Accent color
'accent-focus': '#A3BE8C', // Accent color - focused
'accent-content': '#ECEFF4', // Foreground content color to use on accent color
neutral: '#4C566A', // Neutral color
'neutral-focus': '#3B4252', // Neutral color - focused
'neutral-content': '#D8DEE9', // Foreground content color to use on neutral color
base: '#ffffff', // Base color of page, used for blank backgrounds
'base-100': '#FAFAFA', // Base color of page, used for blank backgrounds
'base-200': '#F9FAFB', // Base color, a little lighter
'base-300': '#E5E9F0', // Base color, even more lighter
'base-content': '#2E3440', // Foreground content color to use on base color
info: '#88C0D0', // Info
success: '#A3BE8C', // Success
warning: '#D08770', // Warning
error: '#BF616A', // Error
'--rounded-box': '24px', // border radius rounded-box utility class, used in card and other large boxes
'--rounded-btn': '1.9rem', // border radius rounded-btn utility class, used in buttons and similar elements
'--rounded-badge': '1.9rem', // border radius rounded-badge utility class, used in badges and similar
'--animation-btn': '0.25s', // duration of animation when you click on button
'--animation-input': '0.2s', // duration of animation for inputs like checkbox, toggle, radio, etc
'--btn-focus-scale': '0.95', // scale transform of button when you focus on it
'--border-btn': '1px', // border width of buttons
'--tab-border': '1px', // border width of tabs
'--tab-radius': '0.5rem' // border radius of tabs
} }
} }
] ]