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

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>