2f438d9d7a
- Source unique : supprime app/data/librodrome.config.yml, renomme site/ en bookplayer.config.yml - Morceaux : renommés avec slugs lisibles, fichiers audio renommés, inversion ch2↔ch3 corrigée - Chapitres : 11 fichiers .md réécrits avec le vrai contenu du livre (synthèse fidèle du PDF) - Routes : /lire → /modele-eco, /ecouter → /en-musique, redirections 301 - Admin chapitres : champs structurés (titre, description, temps lecture), compteur mots - Éditeur markdown : mode split, plein écran, support Tab, meilleur rendu aperçu - Admin morceaux : drag & drop, ajout/suppression, gestion playlist - Light mode : palettes printemps/été plus saturées et contrastées, teintes primary - Raccourcis clavier player : espace, flèches gauche/droite - Paroles : toggle supprimé, toujours visibles et scrollables - Nouvelles pages : autonomie, evenement Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
268 lines
13 KiB
Vue
268 lines
13 KiB
Vue
<template>
|
|
<div class="relative overflow-hidden section-padding min-h-[70vh] flex items-center justify-center">
|
|
<!-- Shadok jongleur: juggling coins (top-left) -->
|
|
<svg class="shadok-juggler" viewBox="0 0 240 300" fill="none" aria-hidden="true">
|
|
<!-- Body -->
|
|
<ellipse cx="120" cy="160" rx="38" ry="46" fill="currentColor" opacity="0.85"/>
|
|
<!-- Head -->
|
|
<circle cx="120" cy="98" r="24" fill="currentColor" opacity="0.8"/>
|
|
<!-- Eyes (looking up at coins) -->
|
|
<circle cx="112" cy="92" r="3.5" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="130" cy="92" r="3.5" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="113" cy="91" r="1.5" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="131" cy="91" r="1.5" fill="currentColor" opacity="0.5"/>
|
|
<!-- Smile -->
|
|
<path d="M112 108 Q120 114 128 108" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.35"/>
|
|
<!-- Arms up (juggling) -->
|
|
<line x1="85" y1="145" x2="55" y2="105" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="155" y1="145" x2="185" y2="105" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
<!-- Hands -->
|
|
<circle cx="55" cy="103" r="4" fill="currentColor" opacity="0.4"/>
|
|
<circle cx="185" cy="103" r="4" fill="currentColor" opacity="0.4"/>
|
|
<!-- Juggling coins -->
|
|
<circle cx="90" cy="55" r="8" fill="currentColor" opacity="0.35"/>
|
|
<text x="86" y="59" fill="currentColor" opacity="0.5" font-size="10" font-weight="bold">$</text>
|
|
<circle cx="120" cy="40" r="8" fill="currentColor" opacity="0.3"/>
|
|
<text x="116" y="44" fill="currentColor" opacity="0.45" font-size="10" font-weight="bold">$</text>
|
|
<circle cx="150" cy="50" r="8" fill="currentColor" opacity="0.32"/>
|
|
<text x="146" y="54" fill="currentColor" opacity="0.48" font-size="10" font-weight="bold">$</text>
|
|
<!-- Legs -->
|
|
<line x1="105" y1="203" x2="95" y2="260" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="135" y1="203" x2="145" y2="260" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
</svg>
|
|
|
|
<!-- Shadok échelle: on a wobbly ladder (top-right) -->
|
|
<svg class="shadok-ladder" viewBox="0 0 220 320" fill="none" aria-hidden="true">
|
|
<!-- Ladder (tilting) -->
|
|
<line x1="80" y1="50" x2="70" y2="300" stroke="currentColor" stroke-width="3" opacity="0.35"/>
|
|
<line x1="150" y1="50" x2="140" y2="300" stroke="currentColor" stroke-width="3" opacity="0.35"/>
|
|
<!-- Rungs -->
|
|
<line x1="82" y1="80" x2="148" y2="80" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
|
|
<line x1="83" y1="120" x2="147" y2="120" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
|
|
<line x1="84" y1="160" x2="146" y2="160" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
|
|
<line x1="85" y1="200" x2="145" y2="200" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
|
|
<line x1="86" y1="240" x2="144" y2="240" stroke="currentColor" stroke-width="2.5" opacity="0.3"/>
|
|
<!-- Shadok on top (arms out for balance) -->
|
|
<ellipse cx="115" cy="68" rx="18" ry="14" fill="currentColor" opacity="0.85"/>
|
|
<circle cx="115" cy="46" r="14" fill="currentColor" opacity="0.8"/>
|
|
<!-- Eyes (worried) -->
|
|
<circle cx="110" cy="43" r="3" fill="currentColor" opacity="0.25"/>
|
|
<circle cx="122" cy="43" r="3" fill="currentColor" opacity="0.25"/>
|
|
<circle cx="110" cy="44" r="1.2" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="122" cy="44" r="1.2" fill="currentColor" opacity="0.5"/>
|
|
<!-- Worried mouth -->
|
|
<path d="M108 52 Q115 49 122 52" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
|
|
<!-- Arms out (balancing) -->
|
|
<line x1="97" y1="62" x2="60" y2="55" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="133" y1="62" x2="170" y2="55" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
|
|
</svg>
|
|
|
|
<!-- Shadok acrobate: doing a cartwheel (center) -->
|
|
<svg class="shadok-acrobat" viewBox="0 0 260 240" fill="none" aria-hidden="true">
|
|
<!-- Body (sideways, mid-cartwheel) -->
|
|
<ellipse cx="130" cy="120" rx="30" ry="38" fill="currentColor" opacity="0.85" transform="rotate(45 130 120)"/>
|
|
<!-- Head -->
|
|
<circle cx="155" cy="82" r="20" fill="currentColor" opacity="0.8"/>
|
|
<!-- Eyes (dizzy/happy) -->
|
|
<path d="M148 78 Q152 74 156 78" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
|
|
<path d="M160 78 Q164 74 168 78" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
|
|
<!-- Smile -->
|
|
<path d="M150 90 Q158 95 165 90" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
|
|
<!-- Arms (one touching ground, one up) -->
|
|
<line x1="110" y1="100" x2="80" y2="130" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="150" y1="105" x2="185" y2="70" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
|
|
<!-- Hand on ground -->
|
|
<circle cx="78" cy="132" r="4" fill="currentColor" opacity="0.4"/>
|
|
<!-- Legs (splayed in cartwheel) -->
|
|
<line x1="125" y1="155" x2="100" y2="195" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="140" y1="150" x2="175" y2="175" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.6"/>
|
|
<!-- Motion lines -->
|
|
<path d="M70 110 Q60 105 55 115" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
|
|
<path d="M190 60 Q200 55 205 65" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
|
|
</svg>
|
|
|
|
<!-- Shadok dormeur: sleeping on a cloud (bottom-left) -->
|
|
<svg class="shadok-sleeper" viewBox="0 0 260 220" fill="none" aria-hidden="true">
|
|
<!-- Cloud -->
|
|
<ellipse cx="130" cy="150" rx="80" ry="25" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="80" cy="140" r="25" fill="currentColor" opacity="0.18"/>
|
|
<circle cx="120" cy="130" r="30" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="165" cy="135" r="22" fill="currentColor" opacity="0.18"/>
|
|
<circle cx="190" cy="142" r="18" fill="currentColor" opacity="0.15"/>
|
|
<!-- Shadok body (lying down) -->
|
|
<ellipse cx="130" cy="125" rx="35" ry="18" fill="currentColor" opacity="0.85"/>
|
|
<!-- Head (on cloud, sideways) -->
|
|
<ellipse cx="85" cy="118" rx="18" ry="16" fill="currentColor" opacity="0.8"/>
|
|
<!-- Closed eyes (sleeping) -->
|
|
<path d="M76 115 Q80 112 84 115" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.4"/>
|
|
<path d="M88 115 Q92 112 96 115" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.4"/>
|
|
<!-- Snooze bubbles -->
|
|
<text x="70" y="100" fill="currentColor" opacity="0.3" font-size="12" font-weight="bold">z</text>
|
|
<text x="60" y="85" fill="currentColor" opacity="0.25" font-size="16" font-weight="bold">z</text>
|
|
<text x="48" y="68" fill="currentColor" opacity="0.2" font-size="20" font-weight="bold">z</text>
|
|
<!-- Legs (curled) -->
|
|
<path d="M165 125 Q180 130 175 140" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.5"/>
|
|
<path d="M160 130 Q172 138 168 148" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.5"/>
|
|
</svg>
|
|
|
|
<!-- Shadok cuisinier: cooking in a cauldron (bottom-right) -->
|
|
<svg class="shadok-cook" viewBox="0 0 240 300" fill="none" aria-hidden="true">
|
|
<!-- Body -->
|
|
<ellipse cx="120" cy="145" rx="38" ry="45" fill="currentColor" opacity="0.85"/>
|
|
<!-- Head -->
|
|
<circle cx="120" cy="85" r="24" fill="currentColor" opacity="0.8"/>
|
|
<!-- Chef hat -->
|
|
<ellipse cx="120" cy="62" rx="22" ry="18" fill="currentColor" opacity="0.35"/>
|
|
<rect x="105" y="68" width="30" height="6" rx="1" fill="currentColor" opacity="0.4"/>
|
|
<!-- Eyes (focused on cooking) -->
|
|
<circle cx="112" cy="82" r="3.5" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="130" cy="82" r="3.5" fill="currentColor" opacity="0.2"/>
|
|
<circle cx="113" cy="83" r="1.5" fill="currentColor" opacity="0.5"/>
|
|
<circle cx="131" cy="83" r="1.5" fill="currentColor" opacity="0.5"/>
|
|
<!-- Tongue out (concentrating) -->
|
|
<path d="M115 96 Q120 100 125 96" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.3"/>
|
|
<!-- Arm with ladle -->
|
|
<line x1="155" y1="135" x2="185" y2="175" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
<!-- Ladle -->
|
|
<line x1="185" y1="175" x2="175" y2="200" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
|
|
<ellipse cx="175" cy="205" rx="8" ry="5" fill="currentColor" opacity="0.35"/>
|
|
<!-- Other arm -->
|
|
<line x1="85" y1="140" x2="60" y2="175" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
<!-- Legs -->
|
|
<line x1="105" y1="188" x2="95" y2="250" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
<line x1="135" y1="188" x2="145" y2="250" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
|
|
<!-- Cauldron -->
|
|
<path d="M55 220 Q55 260 120 260 Q185 260 185 220" fill="currentColor" opacity="0.3"/>
|
|
<ellipse cx="120" cy="220" rx="65" ry="12" fill="currentColor" opacity="0.25"/>
|
|
<ellipse cx="120" cy="220" rx="65" ry="12" stroke="currentColor" stroke-width="2" fill="none" opacity="0.35"/>
|
|
<!-- Steam -->
|
|
<path d="M95 210 Q90 195 95 185" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
|
|
<path d="M120 208 Q118 190 122 180" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
|
|
<path d="M145 210 Q148 195 143 185" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.2"/>
|
|
</svg>
|
|
|
|
<div class="container-content relative z-10 text-center">
|
|
<p class="mb-3 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
|
|
<h1 class="page-title font-display font-extrabold tracking-tight text-white">
|
|
{{ content?.title }}
|
|
</h1>
|
|
<p class="mt-4 text-lg text-white/50">
|
|
{{ content?.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'default',
|
|
})
|
|
|
|
const { data: content } = await usePageContent('evenement')
|
|
|
|
useHead({
|
|
title: content.value?.meta?.title ?? 'Évènement',
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-title {
|
|
font-size: clamp(2.5rem, 6vw, 3.5rem);
|
|
}
|
|
|
|
.shadok-juggler {
|
|
position: absolute;
|
|
left: 4%;
|
|
top: 5%;
|
|
width: clamp(100px, 14vw, 190px);
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-bounce-juggler 4s ease-in-out infinite;
|
|
}
|
|
|
|
.shadok-ladder {
|
|
position: absolute;
|
|
right: 4%;
|
|
top: 3%;
|
|
width: clamp(90px, 12vw, 170px);
|
|
opacity: 0.28;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-wobble-ladder 5s ease-in-out infinite;
|
|
}
|
|
|
|
.shadok-acrobat {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 55%;
|
|
transform: translateX(-50%);
|
|
width: clamp(100px, 13vw, 180px);
|
|
opacity: 0.2;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-spin-acrobat 6s ease-in-out infinite;
|
|
}
|
|
|
|
.shadok-sleeper {
|
|
position: absolute;
|
|
left: 3%;
|
|
bottom: 5%;
|
|
width: clamp(110px, 15vw, 210px);
|
|
opacity: 0.25;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-accent));
|
|
animation: shadok-float-sleeper 8s ease-in-out infinite;
|
|
}
|
|
|
|
.shadok-cook {
|
|
position: absolute;
|
|
right: 3%;
|
|
bottom: 4%;
|
|
width: clamp(100px, 14vw, 200px);
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
color: hsl(var(--color-primary));
|
|
animation: shadok-bounce-cook 5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes shadok-bounce-juggler {
|
|
0%, 100% { transform: translateY(0); }
|
|
30% { transform: translateY(-12px); }
|
|
60% { transform: translateY(-6px); }
|
|
}
|
|
|
|
@keyframes shadok-wobble-ladder {
|
|
0%, 100% { transform: rotate(0deg); }
|
|
25% { transform: rotate(3deg); }
|
|
75% { transform: rotate(-3deg); }
|
|
}
|
|
|
|
@keyframes shadok-spin-acrobat {
|
|
0% { transform: translateX(-50%) rotate(0deg); }
|
|
25% { transform: translateX(-50%) rotate(15deg); }
|
|
50% { transform: translateX(-50%) rotate(0deg); }
|
|
75% { transform: translateX(-50%) rotate(-15deg); }
|
|
100% { transform: translateX(-50%) rotate(0deg); }
|
|
}
|
|
|
|
@keyframes shadok-float-sleeper {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-6px); }
|
|
}
|
|
|
|
@keyframes shadok-bounce-cook {
|
|
0%, 100% { transform: translateY(0); }
|
|
40% { transform: translateY(-10px); }
|
|
70% { transform: translateY(-4px); }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.shadok-juggler { display: none; }
|
|
.shadok-ladder { display: none; }
|
|
.shadok-acrobat { display: none; }
|
|
.shadok-sleeper { display: none; }
|
|
.shadok-cook { display: none; }
|
|
}
|
|
</style>
|