Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-29 01:39:36 +02:00
Code Issues Releases Activity

Add geographic coordinates to Transportation model and update related components

Browse source
This commit is contained in:
Sean Morley 2024-12-19 18:46:52 -05:00
parent 57f2bdb8ba
commit 7c68dc839a
11 changed files with 1025 additions and 289 deletions
Download patch file Download diff file Expand all files Collapse all files

173
frontend/src/lib/components/AboutModal.svelte
View file

@ -1,13 +1,14 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import { onMount } from 'svelte';
let modal: HTMLDialogElement;
import { t } from 'svelte-i18n';
import { appVersion, copyrightYear, versionChangelog } from '$lib/config';
const dispatch = createEventDispatcher();
let modal: HTMLDialogElement;
onMount(() => {
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
modal = document.getElementById('about_modal') as HTMLDialogElement;
if (modal) {
modal.showModal();
}
@ -24,56 +25,126 @@
}
</script>
<dialog id="my_modal_1" class="modal">
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<dialog id="about_modal" class="modal backdrop-blur-md bg-opacity-70">
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">
{$t('about.about')} AdventureLog<span class=" inline-block"
><img src="/favicon.png" alt="Map Logo" class="w-10 -mb-3 ml-2" /></span
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<div
class="modal-box rounded-xl shadow-lg backdrop-blur-lg bg-white/80 dark:bg-gray-900/80 transition-transform duration-300 ease-out transform scale-100"
role="dialog"
on:keydown={handleKeydown}
tabindex="0"
>
<!-- Branding -->
<div class="text-center">
<h3
class="text-2xl font-extrabold text-gray-800 dark:text-white flex items-center justify-center"
>
</h3>
<p class="py-1">
AdventureLog <a
target="_blank"
rel="noopener noreferrer"
class="text-primary-500 underline"
href={versionChangelog}>{appVersion}</a
>
</p>
<p class="py-1">
© {copyrightYear}
<a
href="https://seanmorley.com"
target="_blank"
rel="noopener noreferrer"
class="text-primary-500 underline">Sean Morley</a
>
</p>
<p class="py-1">{$t('about.license')}</p>
<p class="py-1">
<a
href="https://github.com/seanmorley15/AdventureLog"
target="_blank"
rel="noopener noreferrer"
class="text-primary-500 underline">{$t('about.source_code')}</a
>
</p>
<p class="py-1">{$t('about.message')}</p>
<div class="divider"></div>
<h3 class="font-bold text-md">{$t('about.oss_attributions')}</h3>
<p class="py-1 mb-4">
{$t('about.nominatim_1')}
<a
target="_blank"
rel="noopener noreferrer"
class="text-primary-500 underline"
href="https://operations.osmfoundation.org/policies/nominatim/">OpenStreepMap</a
>. {$t('about.nominatim_2')}
<br />
{$t('about.other_attributions')}
</p>
{$t('about.about')} AdventureLog
<img src="/favicon.png" alt="Map Logo" class="w-12 h-12 ml-3 inline-block" />
</h3>
<p class="mt-2 text-gray-500 dark:text-gray-300 text-sm">
AdventureLog
<a
href={versionChangelog}
target="_blank"
rel="noopener noreferrer"
class="text-primary hover:underline"
>
{appVersion}
</a>
</p>
</div>
<button class="btn btn-primary" on:click={close}>{$t('about.close')}</button>
<!-- Links and Details -->
<div class="mt-4 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">
© {copyrightYear}
<a
href="https://seanmorley.com"
target="_blank"
rel="noopener noreferrer"
class="text-primary hover:underline"
>
Sean Morley
</a>
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">{$t('about.license')}</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
<a
href="https://github.com/seanmorley15/AdventureLog"
target="_blank"
rel="noopener noreferrer"
class="text-primary hover:underline"
>
{$t('about.source_code')}
</a>
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">{$t('about.message')}</p>
</div>
<!-- Divider -->
<div class="my-6 border-t border-gray-200 dark:border-gray-700"></div>
<!-- OSS Acknowledgments -->
<div class="text-left">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
{$t('about.oss_attributions')}
</h3>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
{$t('about.nominatim_1')}
<a
href="https://operations.osmfoundation.org/policies/nominatim/"
target="_blank"
rel="noopener noreferrer"
class="text-primary hover:underline"
>
OpenStreetMap
</a>
. {$t('about.nominatim_2')}
</p>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{$t('about.other_attributions')}</p>
</div>
<!-- Close Button -->
<div class="flex justify-center mt-6">
<button
class="px-6 py-2 text-sm font-medium text-white bg-primary rounded-full shadow-md hover:shadow-lg hover:scale-105 transform transition"
on:click={close}
>
{$t('about.close')}
</button>
</div>
</div>
</dialog>
<style>
.modal {
display: grid;
place-items: center;
background: rgba(0, 0, 0, 0.5);
animation: fadeIn 0.3s ease-in-out;
}
.modal-box {
max-width: 600px;
padding: 2rem;
animation: slideUp 0.4s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(20%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>