skycel
7e87a341a2
Epic 4: Chemins Narratifs, Challenge & Contact Stories implementees: - 4.1: Composant ChoiceCards pour choix narratifs binaires - 4.2: Sequence d'intro narrative avec Le Bug - 4.3: Chemins narratifs differencies avec useNarrativePath - 4.4: Table easter_eggs et systeme de detection (API + composable) - 4.5: Easter eggs UI (popup, notification, collection) - 4.6: Page challenge avec puzzle de code - 4.7: Page revelation "Monde de Code" - 4.8: Page contact avec formulaire et stats Fichiers crees: - Frontend: ChoiceCards, IntroSequence, ZoneEndChoice, EasterEggPopup, CodePuzzle, ChallengeSuccess, CodeWorld, et pages intro/challenge/revelation - API: EasterEggController, Model, Migration, Seeder Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
81 lines
1.6 KiB
Vue
81 lines
1.6 KiB
Vue
<template>
|
|
<div class="challenge-success text-center relative">
|
|
<!-- Celebration particles -->
|
|
<div class="particles absolute inset-0 overflow-hidden pointer-events-none">
|
|
<span
|
|
v-for="i in 20"
|
|
:key="i"
|
|
class="particle"
|
|
:style="{ '--delay': `${i * 0.1}s`, '--x': `${Math.random() * 100}%` }"
|
|
/>
|
|
</div>
|
|
|
|
<div class="relative z-10">
|
|
<div class="text-6xl mb-4 animate-bounce" aria-hidden="true">*</div>
|
|
|
|
<h2 class="text-3xl font-ui font-bold text-sky-accent mb-4">
|
|
{{ $t('challenge.success') }}
|
|
</h2>
|
|
|
|
<p class="font-narrative text-xl text-sky-text mb-8">
|
|
{{ $t('challenge.successMessage') }}
|
|
</p>
|
|
|
|
<p class="text-sky-text/60">
|
|
{{ $t('challenge.redirecting') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// No dependencies needed - pure CSS animation
|
|
</script>
|
|
|
|
<style scoped>
|
|
.particles {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
animation: confetti 2s ease-out forwards;
|
|
animation-delay: var(--delay, 0s);
|
|
left: var(--x, 50%);
|
|
top: 50%;
|
|
opacity: 0;
|
|
}
|
|
|
|
.particle:nth-child(odd) {
|
|
background-color: var(--sky-accent, #fa784f);
|
|
}
|
|
|
|
.particle:nth-child(even) {
|
|
background-color: #3b82f6;
|
|
}
|
|
|
|
.particle:nth-child(3n) {
|
|
background-color: #10b981;
|
|
}
|
|
|
|
.particle:nth-child(4n) {
|
|
background-color: #f59e0b;
|
|
}
|
|
|
|
@keyframes confetti {
|
|
0% {
|
|
transform: translateY(0) rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(-200px) rotate(720deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|