nemunaire/travel-steps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Customize headers

Browse source
This commit is contained in:
nemunaire 2025-10-04 09:42:02 +07:00
commit b1c59923bc
4 changed files with 28 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

3
summer2024-frontend/index.html
View file

@ -6,7 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-status-bar-style" content="#000000">
<title>carnet de voyage été 2024 - kektus</title>
<script defer src="https://pythagore.p0m.fr/script.js" data-website-id="76657392-8b72-4657-bf5d-b8f2cbc03203"></script>
<title>Carnet de voyage</title>
</head>
<!--

10
summer2024-frontend/src/App.vue
View file

@ -8,15 +8,7 @@ const appVersion = ref(import.meta.env.VITE_APP_VERSION)
<template>
<div class="fixed w-full top-0 z-50 flex items-center backdrop-blur-md bg-black/10 gap-2 px-3">
<a href="https://www.kektus.fr"
><h1
id="kektus"
class="font-bold select-none mx-3 my-3 text-2xl hover:text-3xl transition-all duration-300"
>
kektus
</h1></a
>
<h1 class="font-light text-lg my-2 mr-3">carnet de voyage été 2024</h1>
<h1 class="font-light text-lg my-2 mr-3">Carnet de voyage</h1>
<div class="flex-grow"></div>
<RouterLink :to="{ name: 'home' }">
<div class="p-2 bg-black/10 hover:bg-black/20 transition-colors duration-300 rounded-lg">

5
summer2024-frontend/src/components/PostComponent.vue
View file

@ -148,6 +148,7 @@ function scrollSlideToIndex(index) {
<div
ref="postData"
class="m-6 p-2 bg-gray-400/10 h-full w-full backdrop-blur-sm rounded-lg pointer-events-auto transition-colors duration-500"
style="text-shadow: black 0 0 7px"
>
<div
class="absolute top-0 right-0 m-2 p-2 backdrop-blur-sm rounded-sm bg-black/10 hover:bg-black/20 cursor-pointer transition-colors duration-200 opacity-100"
@ -180,12 +181,12 @@ function scrollSlideToIndex(index) {
:key="asset.id"
>
<img
class="absolute top-0 left-0 w-full h-dvh object-cover -z-10"
class="absolute top-0 left-0 w-full h-dvh object-contain -z-10"
:data-src="asset.presignedUrl"
v-if="asset.contentType.startsWith('image/')"
/>
<video
class="absolute top-0 left-0 w-full h-dvh object-cover -z-10"
class="absolute top-0 left-0 w-full h-dvh object-contain -z-10"
preload="none"
loop
muted="true"

37
summer2024-frontend/src/components/WelcomeComponent.vue
View file

@ -7,7 +7,7 @@ import { onMounted, ref } from 'vue'
import { ChevronDown } from 'lucide-vue-next'
const enableCountdown = ref(false)
const countdownDate = ref(new Date('2024-07-28 07:00:00'))
const countdownDate = ref(new Date('2025-09-03 07:00:00'))
onMounted(() => {
const now = new Date().getTime()
@ -22,23 +22,30 @@ const postsStore = usePostsStore()
<template>
<div :class="props.class" ref="section" data-anchor="welcome-section">
<div class="flex flex-col w-full h-full items-center justify-center text-center">
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mx-4 my-4">
3 semaines pour traverser 7 pays d'Europe en train
</h3>
<p v-if="postsStore.posts.length > 0" class="mx-4">
suivez mon voyage en naviguant vers le bas
</p>
<div
class="flex flex-col w-full h-full items-center justify-center text-center"
style="background-image: url(https://polarsteps.s3.amazonaws.com/user_images/trip/large_thumb/u_17405032/c588cad8-cfc0-4ec0-938a-d0048dc824fc_23dc784c-71c7-4faf-981e-90d17ca9714c.jpg); background-size: cover; text-shadow: black 0 0 5px"
>
<div class="flex flex-col rounded-xl items-center backdrop-blur-md bg-black/10 gap-2 px-3 pb-4">
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mx-4 my-4">
Voyage en Asie du Sud-Est
</h3>
<p v-if="postsStore.posts.length > 0" class="mx-4">
suivez le voyage en naviguant vers le bas
</p>
<div v-else>
<div class="mt-16 mx-4" v-if="enableCountdown">
<p>ça commence dans...</p>
<Countdown class="text-3xl font-extrabold" :date="countdownDate" />
</div>
<div v-else class="flex flex-col items-center">
<svg class="mr-3 -ml-1 size-9 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
</div>
</div>
</div>
<div v-if="postsStore.posts.length > 0" class="arrow mt-6">
<ChevronDown size="96" />
</div>
<div v-else>
<p class="mx-4">le contenu n'est pas encore disponible, revenez plus tard</p>
<div class="mt-16 mx-4" v-if="enableCountdown">
<p>ça commence dans...</p>
<Countdown class="text-3xl font-extrabold" :date="countdownDate" />
</div>
</div>
</div>
</div>
</template>