Update templates/index.html

templates/index.html

@@ -4,8 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Flashcards Generator</title>
+    <!-- Chargement des scripts dans le bon ordre -->
+    <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.2/axios.min.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
@@ -24,15 +25,6 @@
             border: 1px solid rgba(255, 255, 255, 0.1);
         }
 
-        .card-hover {
-            transition: all 0.3s ease;
-        }
-
-        .card-hover:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
-        }
-
         .gradient-text {
             background: linear-gradient(45deg, #60a5fa, #a855f7);
             -webkit-background-clip: text;
@@ -65,6 +57,38 @@
             border-bottom-color: #60a5fa;
         }
 
+        /* Styles pour la rotation des cartes */
+        .flashcard {
+            perspective: 1000px;
+            transform-style: preserve-3d;
+        }
+
+        .flashcard-inner {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            text-align: left;
+            transition: transform 0.8s;
+            transform-style: preserve-3d;
+        }
+
+        .flashcard.flipped .flashcard-inner {
+            transform: rotateY(180deg);
+        }
+
+        .flashcard-front,
+        .flashcard-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            -webkit-backface-visibility: hidden;
+        }
+
+        .flashcard-back {
+            transform: rotateY(180deg);
+        }
+
         @keyframes rotation {
             0% { transform: rotate(0deg) }
             100% { transform: rotate(360deg) }
@@ -89,7 +113,7 @@
         <!-- Main Content -->
         <div class="max-w-4xl mx-auto">
             <!-- Input Section -->
-            <div class="glass-morph rounded-2xl p-8 mb-12 card-hover">
+            <div class="glass-morph rounded-2xl p-8 mb-12">
                 <div class="mb-6">
                     <label for="topic" class="block text-lg font-medium mb-3 text-gray-300">Quel sujet souhaitez-vous explorer ?</label>
                     <div class="relative">
@@ -151,20 +175,34 @@
                             <div 
                                 v-for="(card, index) in flashcards" 
                                 :key="index"
-                                class="glass-morph rounded-xl p-6 card-hover cursor-pointer transition-all duration-300"
+                                class="flashcard min-h-[200px]"
+                                :class="{ 'flipped': card.showAnswer }"
                                 @click="card.showAnswer = !card.showAnswer"
                             >
-                                <div class="flex items-start space-x-4">
-                                    <div class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-500/20 text-blue-400 font-bold">
-                                        [[index + 1]]
+                                <div class="flashcard-inner">
+                                    <!-- Front of card -->
+                                    <div class="flashcard-front glass-morph rounded-xl p-6">
+                                        <div class="flex items-start space-x-4">
+                                            <div class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-500/20 text-blue-400 font-bold">
+                                                [[index + 1]]
+                                            </div>
+                                            <div class="flex-1">
+                                                <h3 class="text-xl font-medium">[[card.question]]</h3>
+                                                <p class="text-gray-400 mt-2">(Cliquez pour voir la réponse)</p>
+                                            </div>
+                                        </div>
                                     </div>
-                                    <div class="flex-1">
-                                        <h3 class="text-xl font-medium mb-4">[[card.question]]</h3>
-                                        <transition name="fade">
-                                            <div v-if="card.showAnswer" class="mt-4 pt-4 border-t border-gray-700/50">
+                                    <!-- Back of card -->
+                                    <div class="flashcard-back glass-morph rounded-xl p-6">
+                                        <div class="flex items-start space-x-4">
+                                            <div class="w-12 h-12 flex items-center justify-center rounded-full bg-purple-500/20 text-purple-400 font-bold">
+                                                [[index + 1]]
+                                            </div>
+                                            <div class="flex-1">
                                                 <p class="text-gray-300">[[card.answer]]</p>
+                                                <p class="text-gray-400 mt-2">(Cliquez pour voir la question)</p>
                                             </div>
-                                        </transition>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -181,71 +219,74 @@
     </div>
 
     <script>
-        const { createApp } = Vue
-        
-        createApp({
-            delimiters: ['[[', ']]'],
-            data() {
-                return {
-                    topic: '',
-                    flashcards: [],
-                    activeTab: 'study',
-                    isLoading: false,
-                    error: null
-                }
-            },
-            methods: {
-                async generateFlashcards() {
-                    if (!this.topic) {
-                        this.error = 'Veuillez entrer un sujet.'
-                        return
+        // Attendre que le DOM soit chargé
+        document.addEventListener('DOMContentLoaded', () => {
+            const { createApp } = Vue
+            
+            createApp({
+                delimiters: ['[[', ']]'],
+                data() {
+                    return {
+                        topic: '',
+                        flashcards: [],
+                        activeTab: 'study',
+                        isLoading: false,
+                        error: null
                     }
+                },
+                methods: {
+                    async generateFlashcards() {
+                        if (!this.topic) {
+                            this.error = 'Veuillez entrer un sujet.'
+                            return
+                        }
+
+                        this.isLoading = true
+                        this.error = null
+                        this.flashcards = []
+
+                        try {
+                            const response = await axios.post('/generate', {
+                                topic: this.topic
+                            })
 
-                    this.isLoading = true
-                    this.error = null
-                    this.flashcards = []
-
-                    try {
-                        const response = await axios.post('/generate', {
-                            topic: this.topic
-                        })
-
-                        if (response.data.success) {
-                            const cards = response.data.flashcards.map(card => ({
-                                ...card,
-                                showAnswer: false
-                            }))
-                            
-                            // Animation des cartes à leur apparition
-                            setTimeout(() => {
-                                this.flashcards = cards
-                                this.$nextTick(() => {
-                                    gsap.from('.card-hover', {
-                                        y: 30,
-                                        opacity: 0,
-                                        duration: 0.5,
-                                        stagger: 0.1
+                            if (response.data.success) {
+                                const cards = response.data.flashcards.map(card => ({
+                                    ...card,
+                                    showAnswer: false
+                                }))
+                                
+                                // Animation des cartes à leur apparition
+                                setTimeout(() => {
+                                    this.flashcards = cards
+                                    this.$nextTick(() => {
+                                        gsap.from('.flashcard', {
+                                            y: 30,
+                                            opacity: 0,
+                                            duration: 0.5,
+                                            stagger: 0.1
+                                        })
                                     })
-                                })
-                            }, 300)
+                                }, 300)
+                            }
+                        } catch (error) {
+                            this.error = error.response?.data?.error || 'Une erreur est survenue lors de la génération.'
+                        } finally {
+                            this.isLoading = false
                         }
-                    } catch (error) {
-                        this.error = error.response?.data?.error || 'Une erreur est survenue lors de la génération.'
-                    } finally {
-                        this.isLoading = false
                     }
+                },
+                mounted() {
+                    // Animation du titre à l'entrée
+                    gsap.from('.gradient-text', {
+                        y: -50,
+                        opacity: 0,
+                        duration: 1,
+                        ease: 'power3.out'
+                    })
                 }
-            },
-            mounted() {
-                // Animation du titre à l'entrée
-                gsap.from('.gradient-text', {
-                    y: -50,
-                    opacity: 0,
-                    duration: 1,
-                    ease: 'power3.out'
-                })
-            }
-        }).mount('#app')
+            }).mount('#app')
+        })
     </script>
 </body>
 </html>