root/KSA-ORACLE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

description

Browse Source
This commit is contained in:
Nyavokevin 2025-09-16 20:00:01 +03:00
parent e4f5c6db20
commit 3f70660958
1 changed files with 77 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
resources/js/pages/cards/FreeCardResult.vue
View File

@ -1,35 +1,3 @@
<script setup lang="ts">
import LandingLayout from '@/layouts/app/LandingLayout.vue';
import { router } from '@inertiajs/vue3';
import axios from 'axios';
import { computed, onMounted, ref } from 'vue';
const goToBooking = () => {
router.visit('/rendez-vous');
};
const card = ref<any>(null);
const error = ref<string | null>(null);
const loading = ref(true);
const params = new URLSearchParams(window.location.search);
const cardId = params.get('id');
const hasCard = computed(() => card.value !== null);
onMounted(async () => {
try {
const response = await axios.get(`/api/get-card/${cardId}`);
card.value = response.data.cards;
} catch (err: any) {
console.error('Card fetch error:', err);
error.value = err.response?.data?.message || 'Failed to get cards from the server. Please contact support.';
} finally {
loading.value = false;
}
});
</script>
<template>
<LandingLayout>
<main class="flex flex-1 justify-center px-4 py-8 sm:px-6 sm:py-12 md:py-16 lg:px-8">
@ -62,46 +30,69 @@ onMounted(async () => {
<!-- Card Header -->
<div class="bg-[var(--midnight-blue)] p-6 text-center text-white">
<h2 class="text-2xl font-bold">{{ card.name }}</h2>
<p v-if="card.orientation" class="mt-2 text-sm opacity-80">
Orientation: {{ card.orientation === 'reversed' ? 'Inversée' : 'Droite' }}
</p>
</div>
<!-- Card Content -->
<div class="p-6">
<!-- Card Image -->
<div class="mb-6 flex justify-center">
<img :src="`/cards/${card.id + 1}.png`" :alt="card.name" class="w-full max-w-xs rounded-lg shadow-md" />
<img
:src="card.image_url || `/cards/${card.id + 1}.png`"
:alt="card.name"
class="w-full max-w-xs rounded-lg shadow-md"
/>
</div>
<!-- Description based on orientation -->
<div class="mb-6">
<h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Signification intégrale</h3>
<!-- General description (if available) -->
<div v-if="card.description" class="mb-6">
<h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Description</h3>
<p class="leading-relaxed text-gray-700">
{{ card.description }}
</p>
</div>
<!-- Description based on orientation -->
<div class="mb-6">
<!-- <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
{{ card.orientation === 'reversed' ? 'Signification Inversée' : 'Signification Droite' }}
</h3> -->
<p class="leading-relaxed text-gray-700">
{{ card.orientation === 'reversed' ? card.description_reversed : card.description_upright }}
</p>
</div>
<!-- Alternative meaning -->
<!-- <div class="mb-6">
<h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
{{
card.orientation === 'reversed'
? 'Signification Alternative (Droite)'
: 'Signification Alternative (Inversée)'
}}
</h3>
<div class="mb-6">
<!-- <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
{{ card.orientation === 'reversed' ? 'Signification Droite' : 'Signification Inversée' }}
</h3> -->
<p class="leading-relaxed text-gray-700">
{{ card.orientation === 'reversed' ? card.description_upright : card.description_reversed }}
</p>
</div> -->
</div>
<!-- Symbolism -->
<div v-if="card.symbolism && card.symbolism.length > 0">
<div v-if="card.symbolism && Object.keys(card.symbolism).length > 0" class="mb-6">
<h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Symbolisme</h3>
<ul class="list-disc space-y-2 pl-5 text-gray-700">
<li v-for="(symbol, index) in card.symbolism" :key="index">
{{ symbol }}
<ul class="space-y-2 text-gray-700">
<li v-for="(value, key) in card.symbolism" :key="key" class="pl-0">
<strong class="text-[var(--midnight-blue)]">{{ key }}:</strong> {{ value }}
</li>
</ul>
</div>
<!-- Additional Information -->
<!-- <div class="mt-8 border-t border-gray-200 pt-6">
<h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">Informations Supplémentaires</h3>
<div class="grid grid-cols-1 gap-4 text-sm text-gray-600 sm:grid-cols-2">
<div><span class="font-medium">ID de la carte:</span> {{ card.id }}</div>
<div><span class="font-medium">Créée le:</span> {{ formatDate(card.created_at) }}</div>
<div><span class="font-medium">Mise à jour le:</span> {{ formatDate(card.updated_at) }}</div>
</div>
</div> -->
</div>
</div>
</div>
@ -126,20 +117,43 @@ onMounted(async () => {
</main>
</LandingLayout>
</template>
<script setup lang="ts">
import LandingLayout from '@/layouts/app/LandingLayout.vue';
import { router } from '@inertiajs/vue3';
import axios from 'axios';
import { computed, onMounted, ref } from 'vue';
<style scoped>
.layout-content-container {
animation: fadeIn 0.6s ease-out;
}
const goToBooking = () => {
router.visit('/rendez-vous');
};
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
const card = ref<any>(null);
const error = ref<string | null>(null);
const loading = ref(true);
const params = new URLSearchParams(window.location.search);
const cardId = params.get('id');
const hasCard = computed(() => card.value !== null);
// Helper function to format dates
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString('fr-FR', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
};
onMounted(async () => {
try {
const response = await axios.get(`/api/get-card/${cardId}`);
card.value = response.data.cards;
} catch (err: any) {
console.error('Card fetch error:', err);
error.value = err.response?.data?.message || 'Failed to get cards from the server. Please contact support.';
} finally {
loading.value = false;
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
});
</script>