From 0f066ce52af124b70173589e4dfa816e32310fd1 Mon Sep 17 00:00:00 2001
From: Nyavokevin <42602932+nyavokevin@users.noreply.github.com>
Date: Wed, 17 Sep 2025 11:20:26 +0300
Subject: [PATCH] show html

---
 resources/js/pages/cards/FreeCardResult.vue | 52 +++++++--------------
 1 file changed, 17 insertions(+), 35 deletions(-)

diff --git a/resources/js/pages/cards/FreeCardResult.vue b/resources/js/pages/cards/FreeCardResult.vue
index 79f3605..2304664 100644
--- a/resources/js/pages/cards/FreeCardResult.vue
+++ b/resources/js/pages/cards/FreeCardResult.vue
@@ -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}`);