Fix audrey and
This commit is contained in:
Nyavokevin
parent
348b65fa63
commit
8c315de381
@ -29,8 +29,8 @@ class StripeController extends Controller
|
||||
$clientSessionId = Str::uuid();
|
||||
|
||||
$priceIds = [
|
||||
3 => 'price_1S51zxGaZ3yeYkzWYb0wSt4j',
|
||||
4 => 'price_1S5464GaZ3yeYkzWh8RuJfab',
|
||||
6 => 'price_1S51zxGaZ3yeYkzWYb0wSt4j',
|
||||
18 => 'price_1S5464GaZ3yeYkzWh8RuJfab',
|
||||
];
|
||||
|
||||
if (!isset($priceIds[$count])) {
|
||||
|
||||
BIN
public/logo_or.png
Normal file
BIN
public/logo_or.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
@ -11,6 +11,7 @@
|
||||
--font-heading: 'Cormorant Garamond', serif;
|
||||
--font-body: 'Montserrat', sans-serif;
|
||||
--font-accent: 'Citadel Script', cursive;
|
||||
--font-audrey: 'Audrey', sans-serif;
|
||||
|
||||
--font-sans: var(--font-body);
|
||||
|
||||
@ -77,7 +78,6 @@
|
||||
html {
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
@ -178,6 +178,12 @@
|
||||
.text-shadow-custom {
|
||||
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.font-audrey {
|
||||
font-family: 'Audrey', Sans-serif;
|
||||
font-size: 30px;
|
||||
font-weight: 550;
|
||||
color: var(--e-global-color-2407621);
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
@ -214,3 +220,11 @@
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Audrey';
|
||||
src: url('@/fonts/Audrey/Audrey-Medium.otf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@ -79,8 +79,8 @@ const goToShuffle = () => {
|
||||
class="max-w-2xl text-lg text-[var(--linen)] transition-all delay-500 duration-1000"
|
||||
:class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
|
||||
>
|
||||
Embrassez la sagesse intemporelle de l'Oracle de Kris Saint Ange, un guide stratégique pour naviguer votre destin avec clarté et
|
||||
confiance.
|
||||
Et si vos quatre royaumes intérieurs : Santé, Amour, Fortune, Ambition, chevauchaient vers un même horizon ? Embrassez la sagesse
|
||||
intemporelle de l'Oracle de Kris Saint Ange, un guide stratégique pour naviguer votre destin avec clarté et confiance.
|
||||
</p>
|
||||
|
||||
<!-- Animated button with gold effects -->
|
||||
|
||||
@ -1,11 +1,30 @@
|
||||
<template>
|
||||
<section class="py-20 text-center sm:py-24">
|
||||
<h2 class="text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">
|
||||
Plus Qu’un Guide, <span class="citadel-script text-5xl text-[var(--spiritual-earth)] md:text-6xl">Un Manuscrit Stratégique</span>
|
||||
Plus qu'un guide,
|
||||
<span class="citadel-script relative text-3xl font-normal text-[var(--subtle-gold)] md:text-7xl">Un manuscrit stratégique</span>
|
||||
</h2>
|
||||
<p class="mx-auto mt-6 max-w-3xl text-lg text-[var(--midnight-blue)]/80">
|
||||
L'Oracle de Kris Saint Ange est une boussole pour votre voyage personnel et professionnel. Chaque carte est une clé pour débloquer votre
|
||||
potentiel et prendre des décisions éclairées.
|
||||
Conçu pour les Leaders visionnaires, cet oracle n'est pas un simple guide : c'est un Manuscrit où se croisent stratégie antique et
|
||||
alchimie moderne.
|
||||
</p>
|
||||
|
||||
<div class="mx-auto mt-8 max-w-4xl">
|
||||
<h2 class="mb-4 text-2xl font-bold text-[var(--midnight-blue)]">Chacune des 80 lames vous révèle :</h2>
|
||||
<div class="space-y-4 text-[var(--midnight-blue)]/80">
|
||||
<p>
|
||||
<strong>Un message axial</strong> - lorsqu'elle apparait à l'endroit - colonne vertébrale de la stratégie à adopter, tandis que la
|
||||
carte tirée inversée offre un conseil ciselé, comme le diamantaire retouche une gemme.
|
||||
</p>
|
||||
<p><strong>Des archétypes intemporels</strong>, d'Isis à Napoléon, pour incarner votre légende.</p>
|
||||
<p><strong>Des symboles cryptés</strong> : planètes, pierres, lieux sacrés, éclairant vos choix comme un phare.</p>
|
||||
<p><strong>Un outil d'élite</strong>, où la prédiction se mue en plan d'action.</p>
|
||||
<p>Du néophyte au stratège aguerri, chacun y trouve son code secret.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mx-auto mt-6 max-w-3xl text-lg text-[var(--midnight-blue)]/80">
|
||||
La souveraineté ne se négocie pas. Elle se conquiert. Et votre empire intérieur attend son couronnement.
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
class="flex flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
|
||||
>
|
||||
<div class="text-center">
|
||||
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Lecture Gratuite</h3>
|
||||
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">LECTURE GRATUITE</h3>
|
||||
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">Gratuit</p>
|
||||
</div>
|
||||
<ul class="flex-grow space-y-3 text-[var(--midnight-blue)]/80">
|
||||
@ -49,8 +49,8 @@
|
||||
class="flex scale-105 flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--midnight-blue)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
|
||||
>
|
||||
<div class="text-center">
|
||||
<h3 class="text-2xl font-bold text-[var(--pure-white)]">Profilage</h3>
|
||||
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">29€</p>
|
||||
<h3 class="text-2xl font-bold text-[var(--pure-white)]">PROFILAGE</h3>
|
||||
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">9.99€</p>
|
||||
</div>
|
||||
<ul class="flex-grow space-y-3 text-[var(--linen)]">
|
||||
<li class="flex items-center gap-3">
|
||||
@ -59,7 +59,7 @@
|
||||
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
||||
></path>
|
||||
</svg>
|
||||
Lecture de trois cartes
|
||||
Lecture de 6 cartes
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
@ -91,8 +91,8 @@
|
||||
class="flex flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
|
||||
>
|
||||
<div class="text-center">
|
||||
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Quadrige Doré</h3>
|
||||
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">99€</p>
|
||||
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">QUADRIGE DORÉ</h3>
|
||||
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">15.90€</p>
|
||||
</div>
|
||||
<ul class="flex-grow space-y-3 text-[var(--midnight-blue)]/80">
|
||||
<li class="flex items-center gap-3">
|
||||
@ -101,7 +101,7 @@
|
||||
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
||||
></path>
|
||||
</svg>
|
||||
Lecture de quatre cartes
|
||||
Lecture de 18 cartes
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import CardShuffleTemplate from '@/components/template/CardShuffleTemplate.vue';
|
||||
import { Card } from '@/types/cart';
|
||||
import { router } from '@inertiajs/vue3';
|
||||
import { computed, ref, watchEffect } from 'vue';
|
||||
import { computed, onMounted, ref, watchEffect } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
drawCount?: number; // Optional: number of cards expected to be drawn
|
||||
@ -20,9 +20,53 @@ const drawingIndex = ref<number | null>(null);
|
||||
const revealedCards = ref<Card[]>([]);
|
||||
const isFlipped = ref<boolean[]>([]);
|
||||
const isRestacking = ref(false);
|
||||
const isAutoDrawing = ref(false);
|
||||
const autoDrawProgress = ref(0);
|
||||
|
||||
const remainingDeckSize = computed(() => Math.max(0, deckSize - revealedCards.value.length));
|
||||
const isFinished = computed(() => !!props.drawnCards && revealedCards.value.length >= props.drawnCards.length);
|
||||
const shouldAutoDraw = computed(() => props.drawnCards?.length > 15);
|
||||
|
||||
console.log(props.drawnCards?.length);
|
||||
|
||||
// Auto-draw cards with beautiful animation
|
||||
const startAutoDraw = async () => {
|
||||
if (!props.drawnCards || isAutoDrawing.value) return;
|
||||
|
||||
isAutoDrawing.value = true;
|
||||
isSpread.value = false;
|
||||
|
||||
const totalCards = props.drawnCards.length;
|
||||
const delayBetweenCards = 200; // ms between each card
|
||||
|
||||
for (let i = 0; i < totalCards; i++) {
|
||||
if (!isAutoDrawing.value) break; // Allow cancellation
|
||||
|
||||
autoDrawProgress.value = (i / totalCards) * 100;
|
||||
|
||||
// Add card with animation
|
||||
const nextCard = props.drawnCards[i];
|
||||
revealedCards.value.push(nextCard);
|
||||
isFlipped.value.push(false);
|
||||
|
||||
// Wait before next card
|
||||
if (i < totalCards - 1) {
|
||||
await new Promise((resolve) => setTimeout(resolve, delayBetweenCards));
|
||||
}
|
||||
}
|
||||
|
||||
autoDrawProgress.value = 100;
|
||||
isAutoDrawing.value = false;
|
||||
|
||||
// Auto-flip all cards after drawing
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < revealedCards.value.length; i++) {
|
||||
setTimeout(() => {
|
||||
isFlipped.value[i] = true;
|
||||
}, i * 150);
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const startDraw = (index: number) => {
|
||||
if (!props.drawnCards || revealedCards.value.length >= props.drawnCards.length) return;
|
||||
@ -50,9 +94,15 @@ const startDraw = (index: number) => {
|
||||
};
|
||||
|
||||
const handleDeckClick = () => {
|
||||
if (isDrawing.value) return;
|
||||
if (isDrawing.value || isAutoDrawing.value) return;
|
||||
if (isFinished.value) return;
|
||||
|
||||
// If auto-draw is available and not started, start it
|
||||
if (shouldAutoDraw.value && !isAutoDrawing.value && revealedCards.value.length === 0) {
|
||||
startAutoDraw();
|
||||
return;
|
||||
}
|
||||
|
||||
// First click spreads the deck
|
||||
if (!isSpread.value) {
|
||||
isSpread.value = true;
|
||||
@ -75,7 +125,7 @@ const handleDeckClick = () => {
|
||||
|
||||
const onCardClick = (i: number, e?: MouseEvent) => {
|
||||
// Only handle and stop propagation when spread; otherwise let the deck click handler spread the deck
|
||||
if (!isSpread.value || isDrawing.value) return;
|
||||
if (!isSpread.value || isDrawing.value || isAutoDrawing.value) return;
|
||||
if (e) e.stopPropagation();
|
||||
if (!props.drawnCards || revealedCards.value.length >= props.drawnCards.length) return;
|
||||
startDraw(i);
|
||||
@ -116,12 +166,26 @@ watchEffect(() => {
|
||||
drawingIndex.value = null;
|
||||
revealedCards.value = [];
|
||||
isFlipped.value = [];
|
||||
isAutoDrawing.value = false;
|
||||
autoDrawProgress.value = 0;
|
||||
} else {
|
||||
isSpread.value = false;
|
||||
isDrawing.value = false;
|
||||
drawingIndex.value = null;
|
||||
revealedCards.value = [];
|
||||
isFlipped.value = [];
|
||||
isAutoDrawing.value = false;
|
||||
autoDrawProgress.value = 0;
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-start drawing if conditions are met
|
||||
onMounted(() => {
|
||||
if (shouldAutoDraw.value && props.drawnCards && props.drawnCards.length > 0) {
|
||||
// Small delay to allow initial render
|
||||
setTimeout(() => {
|
||||
startAutoDraw();
|
||||
}, 800);
|
||||
}
|
||||
});
|
||||
|
||||
@ -145,6 +209,15 @@ const setDrawnCards = (cardData: Card[]) => {
|
||||
drawingIndex.value = null;
|
||||
revealedCards.value = [];
|
||||
isFlipped.value = new Array(cardData.length).fill(false);
|
||||
isAutoDrawing.value = false;
|
||||
autoDrawProgress.value = 0;
|
||||
|
||||
// Auto-start if conditions are met
|
||||
if (shouldAutoDraw.value) {
|
||||
setTimeout(() => {
|
||||
startAutoDraw();
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -154,15 +227,40 @@ defineExpose({ setDrawnCards });
|
||||
<template>
|
||||
<CardShuffleTemplate>
|
||||
<template #card-shuffle-slot>
|
||||
<div class="card-container">
|
||||
<div class="card-container w-full">
|
||||
<!-- Auto-draw progress indicator -->
|
||||
<div v-if="shouldAutoDraw && isAutoDrawing" class="auto-draw-progress">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" :style="{ width: `${autoDrawProgress}%` }"></div>
|
||||
</div>
|
||||
<div class="progress-text">Distribution automatique en cours... {{ Math.round(autoDrawProgress) }}%</div>
|
||||
</div>
|
||||
|
||||
<!-- Always show the card stack -->
|
||||
<transition class="card-stack-fade">
|
||||
<div
|
||||
class="card-stack relative mt-4 mb-4 flex h-[500px] w-[300px] items-center justify-center"
|
||||
:class="{ spread: isSpread, drawing: isDrawing, restacking: isRestacking, finished: isFinished }"
|
||||
class="card-stack relative mt-6 mb-8 flex h-[520px] w-[320px] items-center justify-center rounded-2xl border border-[var(--linen)] bg-gradient-to-b from-white to-[var(--light-ivory)] p-4 shadow-xl"
|
||||
:class="{
|
||||
spread: isSpread,
|
||||
drawing: isDrawing,
|
||||
restacking: isRestacking,
|
||||
finished: isFinished,
|
||||
'auto-drawing': isAutoDrawing,
|
||||
}"
|
||||
@click="handleDeckClick"
|
||||
>
|
||||
<div v-for="i in remainingDeckSize" :key="i" class="card" :style="getCardStyle(i)" @click="onCardClick(i, $event)">
|
||||
<div class="pointer-events-none absolute -top-16 -left-16 h-40 w-40 rounded-full bg-[var(--subtle-gold)]/20 blur-3xl"></div>
|
||||
<div
|
||||
class="pointer-events-none absolute -right-16 -bottom-16 h-40 w-40 rounded-full bg-[var(--midnight-blue)]/15 blur-3xl"
|
||||
></div>
|
||||
|
||||
<!-- Auto-draw prompt -->
|
||||
<div v-if="shouldAutoDraw && !isAutoDrawing && revealedCards.length === 0" class="auto-draw-prompt">
|
||||
<div class="prompt-icon">✨</div>
|
||||
<div class="prompt-text">Cliquez pour une distribution automatique</div>
|
||||
</div>
|
||||
|
||||
<div v-for="i in remainingDeckSize" :key="i" class="card group/card" :style="getCardStyle(i)" @click="onCardClick(i, $event)">
|
||||
<div class="card-back">
|
||||
<div class="card-inner-content">
|
||||
<img src="cards/1.png" alt="Card Back" class="card-back-image" />
|
||||
@ -171,11 +269,12 @@ defineExpose({ setDrawnCards });
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- Show result only after clicking and when drawnCards is available -->
|
||||
<transition class="card-result-slide">
|
||||
<div v-if="revealedCards.length > 0" class="cards-result-container">
|
||||
<div v-for="(card, index) in revealedCards" :key="index" class="card-result-wrapper">
|
||||
<div class="result-card" :class="{ flipped: isFlipped[index] }" @click="flipCard(index)">
|
||||
<div v-if="revealedCards.length > 0" class="cards-result-container w-full" :class="{ 'many-cards': shouldAutoDraw }">
|
||||
<div v-for="(card, index) in revealedCards" :key="index" class="card-result-wrapper" :class="`card-${index}`">
|
||||
<div class="result-card" :class="{ flipped: isFlipped[index], 'auto-flipped': isAutoDrawing }" @click="flipCard(index)">
|
||||
<div class="card-face card-unknown-front">
|
||||
<div class="card-inner-content">
|
||||
<img src="cards/1.png" alt="Card Back" class="card-back-image" />
|
||||
@ -191,6 +290,7 @@ defineExpose({ setDrawnCards });
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<button
|
||||
@click="goToSelection"
|
||||
class="mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--midnight-blue)] px-8 text-base font-bold tracking-wide text-[var(--pure-white)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:shadow-[var(--spiritual-earth)]/30 hover:shadow-lg disabled:cursor-not-allowed disabled:bg-gray-400 disabled:hover:shadow-none"
|
||||
@ -213,6 +313,65 @@ defineExpose({ setDrawnCards });
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
/* Auto-draw progress indicator */
|
||||
.auto-draw-progress {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: rgba(31, 42, 68, 0.2);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--midnight-blue), var(--subtle-gold));
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--midnight-blue);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Auto-draw prompt */
|
||||
.auto-draw-prompt {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(215, 186, 141, 0.3);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.prompt-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.prompt-text {
|
||||
color: var(--midnight-blue);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card {
|
||||
@ -238,43 +397,43 @@ defineExpose({ setDrawnCards });
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
perspective: 1000px; /* ajoute profondeur */
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
/* Hover sur la pile */
|
||||
.card-stack:not(.spread):hover {
|
||||
.card-stack:not(.spread):not(.auto-drawing):hover {
|
||||
transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
|
||||
}
|
||||
|
||||
.card-stack:not(.spread):hover .card:nth-child(1) {
|
||||
.card-stack:not(.spread):not(.auto-drawing):hover .card:nth-child(1) {
|
||||
transform: rotateY(-5deg) rotateX(5deg) translateZ(30px) translateX(-20px);
|
||||
}
|
||||
.card-stack:not(.spread):hover .card:nth-child(2) {
|
||||
.card-stack:not(.spread):not(.auto-drawing):hover .card:nth-child(2) {
|
||||
transform: rotateY(0deg) rotateX(2deg) translateZ(20px);
|
||||
}
|
||||
.card-stack:not(.spread):hover .card:nth-child(3) {
|
||||
.card-stack:not(.spread):not(.auto-drawing):hover .card:nth-child(3) {
|
||||
transform: rotateY(5deg) rotateX(5deg) translateZ(10px) translateX(20px);
|
||||
}
|
||||
|
||||
/* Glow doré subtil au hover */
|
||||
.card-stack:hover .card-back {
|
||||
.card-stack:not(.auto-drawing):hover .card-back {
|
||||
box-shadow: 0 0 20px rgba(215, 186, 141, 0.6);
|
||||
transition: box-shadow 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
/* Animation click */
|
||||
@keyframes card-click-tilt {
|
||||
0% {
|
||||
transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-5px) rotateX(-4deg) rotateY(4deg);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-12px) rotateX(3deg) rotateY(-3deg);
|
||||
}
|
||||
/* Auto-drawing state */
|
||||
.card-stack.auto-drawing {
|
||||
cursor: default;
|
||||
animation: gentle-pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes gentle-pulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
@ -297,11 +456,6 @@ defineExpose({ setDrawnCards });
|
||||
}
|
||||
}
|
||||
|
||||
/* Active sur clic */
|
||||
.card-stack.clicked {
|
||||
animation: card-click-tilt 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.card-stack.drawing {
|
||||
animation: card-drawing 1s ease-in-out;
|
||||
}
|
||||
@ -336,76 +490,55 @@ defineExpose({ setDrawnCards });
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
border-radius: 16px;
|
||||
display: flex; /* Keep flexbox for centering if needed */
|
||||
align-items: center; /* For centering .card-inner-content if it's smaller */
|
||||
justify-content: center; /* For centering .card-inner-content if it's smaller */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--subtle-gold);
|
||||
}
|
||||
|
||||
.card-inner-content {
|
||||
width: calc(100% - 10px); /* Adjust 10px to control border thickness (e.g., 5px border on each side) */
|
||||
height: calc(100% - 10px); /* Adjust this value as well */
|
||||
background-color: white; /* Or whatever color you want inside the gold border */
|
||||
border-radius: 14px; /* Slightly smaller to match outer radius with padding */
|
||||
display: flex; /* Use flex to center the image if it's an <img> tag */
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 10px);
|
||||
background-color: white;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden; /* Ensure image doesn't bleed out */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-back-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* Or 'cover' depending on how you want the image to fill the inner content */
|
||||
border-radius: 14px; /* Match inner content border-radius */
|
||||
object-fit: cover;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.card-result-wrapper {
|
||||
width: 250px;
|
||||
height: 400px;
|
||||
width: clamp(140px, 12vw, 160px);
|
||||
aspect-ratio: 5 / 8;
|
||||
perspective: 1000px;
|
||||
border-radius: 16px;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.card-back-design-wrapper {
|
||||
background: radial-gradient(circle, var(--midnight-blue) 0%, #121a2c 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-back-design {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
border: 2px solid var(--subtle-gold);
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.card-back-design::before,
|
||||
.card-back-design::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border-color: var(--subtle-gold);
|
||||
opacity: 0.5;
|
||||
.card-result-wrapper:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.card-face {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden; /* This is crucial for the flip effect */
|
||||
backface-visibility: hidden;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden; /* To keep content within borders */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-unknown-front {
|
||||
background-color: var(--subtle-gold);
|
||||
display: flex; /* Keep flexbox for centering its *own* content */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -415,45 +548,35 @@ defineExpose({ setDrawnCards });
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
transform: rotateY(180deg); /* This face starts rotated, so it's hidden */
|
||||
transform: rotateY(180deg);
|
||||
position: relative;
|
||||
border-radius: 16px; /* Ensure this matches the outer card radius */
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-back-design::before {
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
border-top-width: 1px;
|
||||
border-left-width: 1px;
|
||||
border-top-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-left-radius: 8px;
|
||||
}
|
||||
.card-back-design::after {
|
||||
bottom: -2px;
|
||||
right: -2px;
|
||||
border-bottom-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-bottom-style: solid;
|
||||
border-right-style: solid;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
|
||||
/* Result card styles */
|
||||
.cards-result-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
gap: 15px;
|
||||
margin-top: 2rem;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 100%;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.card-result-container {
|
||||
perspective: 1000px;
|
||||
/* Enhanced layout for many cards */
|
||||
.cards-result-container.many-cards {
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cards-result-container.many-cards .card-result-wrapper {
|
||||
width: clamp(140px, 12vw, 160px);
|
||||
aspect-ratio: 5 / 8;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
@ -469,53 +592,8 @@ defineExpose({ setDrawnCards });
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.card-front,
|
||||
.card-back-info {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.card-back-info p {
|
||||
color: var(--midnight-blue); /* Adjust color if needed */
|
||||
}
|
||||
|
||||
.card-front {
|
||||
background: linear-gradient(145deg, var(--pure-white), var(--linen));
|
||||
color: var(--midnight-blue);
|
||||
}
|
||||
|
||||
.card-back-info {
|
||||
/* Replace the existing background property */
|
||||
background-image: url('back-card.svg'); /* background-size: cover; /* This makes the image cover the entire element */
|
||||
background-position: center; /* This centers the image in the element */
|
||||
background-repeat: no-repeat; /* This prevents the image from repeating */
|
||||
|
||||
color: var(--pure-white);
|
||||
transform: rotateY(180deg);
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.card-content-wrapper {
|
||||
background: linear-gradient(145deg, var(--pure-white), var(--linen));
|
||||
color: var(--midnight-blue);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
transform: rotateY(180deg); /* This is the key part to make it the 'back' of the card */
|
||||
.result-card.auto-flipped {
|
||||
transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.card-image {
|
||||
@ -530,67 +608,26 @@ defineExpose({ setDrawnCards });
|
||||
|
||||
.card-description-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
/* Adjust background for a brighter, more subtle overlay */
|
||||
background: rgba(255, 255, 255, 0.2); /* Lighter, more transparent white overlay */
|
||||
/* You could also use a subtle gradient if you prefer: */
|
||||
/* background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 50%); */
|
||||
|
||||
color: white; /* Keep text white for contrast */
|
||||
padding: 1rem;
|
||||
|
||||
/* Center the content (just the name) in the middle of the card */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* Center vertically */
|
||||
align-items: center; /* Center horizontally */
|
||||
right: 0;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
|
||||
padding: 12px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none; /* Make overlay non-interactive so clicks go through to flip */
|
||||
border-bottom-left-radius: 16px;
|
||||
border-bottom-right-radius: 16px;
|
||||
box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.35);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-description-overlay h3 {
|
||||
margin: 0; /* Remove default margin */
|
||||
font-size: 1.8rem; /* Make the name larger */
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add subtle shadow for readability */
|
||||
color: var(--pure-white); /* Ensure it's clearly white */
|
||||
letter-spacing: 1px; /* Add some letter spacing */
|
||||
}
|
||||
/* Hide these elements completely */
|
||||
.card-description-overlay p.description,
|
||||
.card-description-overlay p.orientation,
|
||||
.card-description-overlay div.symbolism {
|
||||
display: none;
|
||||
}
|
||||
.orientation {
|
||||
font-style: italic;
|
||||
margin-top: 0.5rem;
|
||||
color: var(--spiritual-earth);
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 1rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.symbolism {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.symbolism p {
|
||||
margin: 0.3rem 0;
|
||||
}
|
||||
|
||||
.click-hint {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.7;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
|
||||
color: var(--pure-white);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.card-stack-fade-leave-active {
|
||||
@ -609,4 +646,139 @@ defineExpose({ setDrawnCards });
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 1200px) {
|
||||
.cards-result-container .card-result-wrapper {
|
||||
width: clamp(140px, 12vw, 160px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.cards-result-container .card-result-wrapper {
|
||||
width: clamp(140px, 20vw, 160px);
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 220px;
|
||||
height: 352px;
|
||||
}
|
||||
|
||||
.card-stack {
|
||||
width: 280px;
|
||||
height: 460px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cards-result-container {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.cards-result-container .card-result-wrapper {
|
||||
width: clamp(140px, 26vw, 160px);
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 200px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.card-stack {
|
||||
width: 260px;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.card-description-overlay h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.cards-result-container {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.cards-result-container .card-result-wrapper {
|
||||
width: clamp(140px, 36vw, 160px);
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 180px;
|
||||
height: 288px;
|
||||
}
|
||||
|
||||
.card-stack {
|
||||
width: 240px;
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
.card-description-overlay h3 {
|
||||
font-size: 1.2rem;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.auto-draw-prompt {
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
.prompt-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.prompt-text {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for auto-drawing cards */
|
||||
@keyframes card-appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateY(20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.cards-result-container .card-result-wrapper {
|
||||
animation: card-appear 0.5s ease forwards;
|
||||
}
|
||||
|
||||
/* Stagger animation for multiple cards */
|
||||
.cards-result-container .card-result-wrapper:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.cards-result-container .card-result-wrapper:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.cards-result-container .card-result-wrapper:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.cards-result-container .card-result-wrapper:nth-child(4) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.cards-result-container .card-result-wrapper:nth-child(5) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
.cards-result-container .card-result-wrapper:nth-child(6) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
.cards-result-container .card-result-wrapper:nth-child(7) {
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
.cards-result-container .card-result-wrapper:nth-child(8) {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
.cards-result-container .card-result-wrapper:nth-child(9) {
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
.cards-result-container .card-result-wrapper:nth-child(10) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.cards-result-container .card-result-wrapper:nth-child(n + 11) {
|
||||
animation-delay: 1.1s;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
resources/js/fonts/Audrey/Audrey-Bold.otf
Normal file
BIN
resources/js/fonts/Audrey/Audrey-Bold.otf
Normal file
Binary file not shown.
BIN
resources/js/fonts/Audrey/Audrey-BoldOblique.otf
Normal file
BIN
resources/js/fonts/Audrey/Audrey-BoldOblique.otf
Normal file
Binary file not shown.
BIN
resources/js/fonts/Audrey/Audrey-Medium.otf
Normal file
BIN
resources/js/fonts/Audrey/Audrey-Medium.otf
Normal file
Binary file not shown.
BIN
resources/js/fonts/Audrey/Audrey-MediumOblique.otf
Normal file
BIN
resources/js/fonts/Audrey/Audrey-MediumOblique.otf
Normal file
Binary file not shown.
BIN
resources/js/fonts/Audrey/Audrey-Normal.otf
Normal file
BIN
resources/js/fonts/Audrey/Audrey-Normal.otf
Normal file
Binary file not shown.
BIN
resources/js/fonts/Audrey/Audrey-NormalOblique.otf
Normal file
BIN
resources/js/fonts/Audrey/Audrey-NormalOblique.otf
Normal file
Binary file not shown.
8
resources/js/fonts/Audrey/_License.txt
Normal file
8
resources/js/fonts/Audrey/_License.txt
Normal file
@ -0,0 +1,8 @@
|
||||
FOR PERSONAL AND COMMERCIAL USE (DESKTOP ONLY).
|
||||
You will need a licence for online applications.
|
||||
|
||||
For any info please contact me at info@cristinapagnotta.it
|
||||
|
||||
Thank You!
|
||||
|
||||
Audrey Font - Copyright Cristina Pagnotta. 2016 All rights Reserved
|
||||
@ -46,11 +46,9 @@ onMounted(() => {
|
||||
>
|
||||
<!-- Logo with natural styling (no rounding, no shadow) -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="logo-container">
|
||||
<img src="icon_ksa.jpg" alt="Logo" class="relative h-16 w-16 object-cover md:h-20 md:w-20" />
|
||||
</div>
|
||||
<img src="logo_or.png" alt="Logo" class="relative h-16 w-16 object-cover md:h-20 md:w-20" />
|
||||
<div class="hidden md:block">
|
||||
<h1 class="font-serif text-xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h1>
|
||||
<h1 class="font-audrey text-[var(--midnight-blue)]">KRIS SAINT ANGE</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -149,7 +147,7 @@ onMounted(() => {
|
||||
|
||||
<div class="mb-8 text-center">
|
||||
<!-- Mobile logo without rounding or shadow -->
|
||||
<img src="icon_ksa.jpg" alt="Logo" class="mx-auto mb-4 h-20 w-20 object-cover" />
|
||||
<img src="logo_or.png" alt="Logo" class="mx-auto mb-4 h-20 w-20 object-cover" />
|
||||
<h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h2>
|
||||
</div>
|
||||
|
||||
@ -204,9 +202,7 @@ onMounted(() => {
|
||||
<div class="flex flex-col items-center gap-12">
|
||||
<!-- Logo and description - logo without rounding or shadow -->
|
||||
<div class="max-w-md text-center">
|
||||
<div class="mb-4 flex justify-center">
|
||||
<img src="icon_ksa.jpg" alt="Logo" class="h-16 w-16 object-cover" />
|
||||
</div>
|
||||
<img src="logo_or.png" alt="Logo" class="mx-auto mb-4 h-16 w-16 object-cover" />
|
||||
<h3 class="mb-2 font-serif text-xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h3>
|
||||
</div>
|
||||
|
||||
|
||||
@ -129,7 +129,7 @@ const clearHover = () => {
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Lecture Gratuite</h3>
|
||||
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">LECTURE GRATUITE</h3>
|
||||
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">Gratuit</p>
|
||||
<p class="mt-4 text-sm text-[var(--midnight-blue)]/80 md:text-base">
|
||||
Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
|
||||
@ -182,15 +182,15 @@ const clearHover = () => {
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white md:text-2xl">Profilage</h3>
|
||||
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">29€</p>
|
||||
<h3 class="text-xl font-bold text-white md:text-2xl">PROFILAGE</h3>
|
||||
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">9.99€</p>
|
||||
<p class="mt-4 text-sm text-[var(--linen)] md:text-base">
|
||||
Une analyse approfondie de votre situation avec des conseils stratégiques personnalisés.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-md transition-all duration-300 hover:shadow-lg"
|
||||
@click="handleSelection(3)"
|
||||
@click="handleSelection(6)"
|
||||
>
|
||||
<!-- Button shine effect -->
|
||||
<span
|
||||
@ -214,8 +214,6 @@ const clearHover = () => {
|
||||
<!-- Decorative elements -->
|
||||
<div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent"></div>
|
||||
|
||||
<!-- Gold corner accents -->
|
||||
|
||||
<div class="relative z-10 text-center">
|
||||
<div class="mb-4 flex justify-center">
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)] shadow-sm">
|
||||
@ -235,15 +233,15 @@ const clearHover = () => {
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Quadrige Doré</h3>
|
||||
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">99€</p>
|
||||
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">QUADRIGE DORÉ</h3>
|
||||
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">15.90€</p>
|
||||
<p class="mt-4 text-sm text-[var(--midnight-blue)]/80 md:text-base">
|
||||
Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] shadow-sm transition-all duration-300"
|
||||
@click="handleSelection(4)"
|
||||
@click="handleSelection(18)"
|
||||
>
|
||||
<!-- Button shine effect -->
|
||||
<span
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user