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

show html

Browse Source
This commit is contained in:
Nyavokevin 2025-09-17 11:20:26 +03:00
parent 3f70660958
commit 0f066ce52a
1 changed files with 17 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,9 +30,9 @@
<!-- 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 v-if="card.orientation" class="mt-2 text-sm opacity-80">
<div v-html="card.orientation === 'reversed' ? 'Inversée' : 'Droite'"></div>
</div>
</div>
<!-- Card Content -->
@ -49,29 +49,30 @@
<!-- 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 class="leading-relaxed text-gray-700" v-html="card.description"></div>
</div>
<!-- Description based on orientation -->
<div class="mb-6">
<!-- <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
<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>
</h3>
<div
class="leading-relaxed text-gray-700"
v-html="card.orientation === 'reversed' ? card.description_reversed : card.description_upright"
></div>
</div>
<!-- Alternative meaning -->
<div class="mb-6">
<!-- <h3 class="mb-3 text-lg font-semibold text-[var(--midnight-blue)]">
<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>
</h3>
<div
class="leading-relaxed text-gray-700"
v-html="card.orientation === 'reversed' ? card.description_upright : card.description_reversed"
></div>
</div>
<!-- Symbolism -->
@ -83,16 +84,6 @@
</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>
@ -136,15 +127,6 @@ 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}`);