Update templates/index.html

templates/index.html

@@ -4,9 +4,8 @@
     <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>
@@ -25,6 +24,15 @@
             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;
@@ -57,48 +65,52 @@
             border-bottom-color: #60a5fa;
         }
 
-        /* Styles pour la rotation des cartes */
-        .flashcard {
+        @keyframes rotation {
+            0% { transform: rotate(0deg) }
+            100% { transform: rotate(360deg) }
+        }
+
+        .fade-enter-active, .fade-leave-active {
+            transition: opacity 0.5s ease;
+        }
+        .fade-enter-from, .fade-leave-to {
+            opacity: 0;
+        }
+
+        /* Styles pour l'effet de rotation */
+        .card-container {
             perspective: 1000px;
-            transform-style: preserve-3d;
+            position: relative;
+            width: 100%;
+            height: 250px; /* Ajustez la hauteur selon vos besoins */
         }
 
-        .flashcard-inner {
+        .card-inner {
             position: relative;
             width: 100%;
             height: 100%;
-            text-align: left;
             transition: transform 0.8s;
             transform-style: preserve-3d;
         }
 
-        .flashcard.flipped .flashcard-inner {
+        .card-container.is-flipped .card-inner {
             transform: rotateY(180deg);
         }
 
-        .flashcard-front,
-        .flashcard-back {
+        .card-face {
             position: absolute;
             width: 100%;
             height: 100%;
             backface-visibility: hidden;
-            -webkit-backface-visibility: hidden;
         }
 
-        .flashcard-back {
-            transform: rotateY(180deg);
+        .card-front {
+            /* Vos styles existants pour la face avant */
         }
 
-        @keyframes rotation {
-            0% { transform: rotate(0deg) }
-            100% { transform: rotate(360deg) }
-        }
-
-        .fade-enter-active, .fade-leave-active {
-            transition: opacity 0.5s ease;
-        }
-        .fade-enter-from, .fade-leave-to {
-            opacity: 0;
+        .card-back {
+            transform: rotateY(180deg);
+            /* Vos styles pour la face arrière */
         }
     </style>
 </head>
@@ -113,7 +125,7 @@
         <!-- Main Content -->
         <div class="max-w-4xl mx-auto">
             <!-- Input Section -->
-            <div class="glass-morph rounded-2xl p-8 mb-12">
+            <div class="glass-morph rounded-2xl p-8 mb-12 card-hover">
                 <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">
@@ -175,33 +187,25 @@
                             <div 
                                 v-for="(card, index) in flashcards" 
                                 :key="index"
-                                class="flashcard min-h-[200px]"
-                                :class="{ 'flipped': card.showAnswer }"
-                                @click="card.showAnswer = !card.showAnswer"
+                                class="card-container"
+                                :class="{'is-flipped': card.isFlipped}"
+                                @click="card.isFlipped = !card.isFlipped"
                             >
-                                <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 class="card-inner glass-morph rounded-xl">
+                                    <div class="card-face card-front p-6 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>
                                         </div>
                                     </div>
-                                    <!-- 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>
+                                    <div class="card-face card-back p-6 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">
+                                            <p class="text-gray-300">[[card.answer]]</p>
                                         </div>
                                     </div>
                                 </div>
@@ -219,74 +223,71 @@
     </div>
 
     <script>
-        // Attendre que le DOM soit chargé
-        document.addEventListener('DOMContentLoaded', () => {
-            const { createApp } = Vue
-            
-            createApp({
-                delimiters: ['[[', ']]'],
-                data() {
-                    return {
-                        topic: '',
-                        flashcards: [],
-                        activeTab: 'study',
-                        isLoading: false,
-                        error: null
+        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
                     }
-                },
-                methods: {
-                    async generateFlashcards() {
-                        if (!this.topic) {
-                            this.error = 'Veuillez entrer un sujet.'
-                            return
-                        }
 
-                        this.isLoading = true
-                        this.error = null
-                        this.flashcards = []
+                    this.isLoading = true
+                    this.error = null
+                    this.flashcards = []
 
-                        try {
-                            const response = await axios.post('/generate', {
-                                topic: this.topic
-                            })
+                    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('.flashcard', {
-                                            y: 30,
-                                            opacity: 0,
-                                            duration: 0.5,
-                                            stagger: 0.1
-                                        })
+                        if (response.data.success) {
+                            const cards = response.data.flashcards.map(card => ({
+                                ...card,
+                                isFlipped: 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
                                     })
-                                }, 300)
-                            }
-                        } catch (error) {
-                            this.error = error.response?.data?.error || 'Une erreur est survenue lors de la génération.'
-                        } finally {
-                            this.isLoading = false
+                                })
+                            }, 300)
                         }
+                    } 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'
-                    })
                 }
-            }).mount('#app')
-        })
+            },
+            mounted() {
+                // Animation du titre à l'entrée
+                gsap.from('.gradient-text', {
+                    y: -50,
+                    opacity: 0,
+                    duration: 1,
+                    ease: 'power3.out'
+                })
+            }
+        }).mount('#app')
     </script>
 </body>
 </html>