Update templates/index.html

templates/index.html

@@ -77,40 +77,71 @@
             opacity: 0;
         }
 
-        /* Styles pour l'effet de rotation */
-        .card-container {
+        .flip-card {
             perspective: 1000px;
-            position: relative;
-            width: 100%;
-            height: 250px; /* Ajustez la hauteur selon vos besoins */
+            height: 300px;
         }
 
-        .card-inner {
+        .flip-card-inner {
             position: relative;
             width: 100%;
             height: 100%;
+            text-align: center;
             transition: transform 0.8s;
             transform-style: preserve-3d;
+            cursor: pointer;
         }
 
-        .card-container.is-flipped .card-inner {
+        .flip-card.flipped .flip-card-inner {
             transform: rotateY(180deg);
         }
 
-        .card-face {
+        .flip-card-front, .flip-card-back {
             position: absolute;
             width: 100%;
             height: 100%;
+            -webkit-backface-visibility: hidden;
             backface-visibility: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+            border-radius: 1rem;
         }
 
-        .card-front {
-            /* Vos styles existants pour la face avant */
+        .flip-card-front {
+            background: rgba(255, 255, 255, 0.05);
         }
 
-        .card-back {
+        .flip-card-back {
+            background: rgba(255, 255, 255, 0.07);
             transform: rotateY(180deg);
-            /* Vos styles pour la face arrière */
+        }
+
+        .keyboard-shortcut {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 24px;
+            height: 24px;
+            padding: 0 6px;
+            border-radius: 4px;
+            background: rgba(255, 255, 255, 0.1);
+            font-size: 0.875rem;
+            margin: 0 2px;
+        }
+
+        .progress-bar {
+            height: 4px;
+            background: rgba(96, 165, 250, 0.2);
+            border-radius: 2px;
+            overflow: hidden;
+        }
+
+        .progress-value {
+            height: 100%;
+            background: linear-gradient(90deg, #60a5fa, #a855f7);
+            transition: width 0.3s ease;
         }
     </style>
 </head>
@@ -133,6 +164,7 @@
                             type="text" 
                             id="topic" 
                             v-model="topic" 
+                            @keyup.enter="generateFlashcards"
                             class="w-full px-6 py-4 bg-gray-800/50 rounded-xl border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg transition-all duration-300"
                             placeholder="Ex: Intelligence Artificielle, Quantum Computing..."
                             :disabled="isLoading"
@@ -161,6 +193,11 @@
             <!-- Results Section -->
             <transition name="fade">
                 <div v-if="flashcards.length > 0" class="glass-morph rounded-2xl overflow-hidden">
+                    <!-- Progress Bar -->
+                    <div class="progress-bar">
+                        <div class="progress-value" :style="{ width: `${(currentCardIndex + 1) * 100 / flashcards.length}%` }"></div>
+                    </div>
+
                     <!-- Tabs -->
                     <div class="border-b border-gray-700/50">
                         <div class="flex">
@@ -184,32 +221,49 @@
                     <div class="p-6">
                         <!-- Study Mode -->
                         <div v-if="activeTab === 'study'" class="space-y-6">
-                            <div 
-                                v-for="(card, index) in flashcards" 
-                                :key="index"
-                                class="card-container"
-                                :class="{'is-flipped': card.isFlipped}"
-                                @click="card.isFlipped = !card.isFlipped"
-                            >
-                                <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>
+                            <!-- Keyboard Shortcuts Info -->
+                            <div class="text-center mb-6 text-gray-400">
+                                <span class="keyboard-shortcut">←</span> Précédent
+                                <span class="keyboard-shortcut mx-2">→</span> Suivant
+                                <span class="keyboard-shortcut">Espace</span> Retourner la carte
+                            </div>
+
+                            <div class="flip-card" :class="{ 'flipped': currentCard.showAnswer }" @click="toggleCard">
+                                <div class="flip-card-inner">
+                                    <div class="flip-card-front">
+                                        <div class="text-center">
+                                            <div class="text-2xl font-medium mb-4">[[currentCard.question]]</div>
+                                            <div class="text-gray-400 text-sm">(Cliquez pour voir la réponse)</div>
                                         </div>
                                     </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 class="flip-card-back">
+                                        <div class="text-center">
+                                            <div class="text-xl">[[currentCard.answer]]</div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
+                            
+                            <!-- Navigation Controls -->
+                            <div class="flex items-center justify-center space-x-4 mt-8">
+                                <button 
+                                    @click="previousCard" 
+                                    :disabled="currentCardIndex === 0"
+                                    class="px-6 py-3 bg-blue-500/20 rounded-lg hover:bg-blue-500/30 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300"
+                                >
+                                    ← Précédent
+                                </button>
+                                <div class="text-lg font-medium">
+                                    [[currentCardIndex + 1]] / [[flashcards.length]]
+                                </div>
+                                <button 
+                                    @click="nextCard" 
+                                    :disabled="currentCardIndex === flashcards.length - 1"
+                                    class="px-6 py-3 bg-blue-500/20 rounded-lg hover:bg-blue-500/30 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300"
+                                >
+                                    Suivant →
+                                </button>
+                            </div>
                         </div>
 
                         <!-- JSON Mode -->
@@ -233,12 +287,22 @@
                     flashcards: [],
                     activeTab: 'study',
                     isLoading: false,
-                    error: null
+                    error: null,
+                    currentCardIndex: 0
+                }
+            },
+            computed: {
+                currentCard() {
+                    return this.flashcards[this.currentCardIndex] || { 
+                        question: '', 
+                        answer: '', 
+                        showAnswer: false 
+                    }
                 }
             },
             methods: {
                 async generateFlashcards() {
-                    if (!this.topic) {
+                    if (!this.topic.trim()) {
                         this.error = 'Veuillez entrer un sujet.'
                         return
                     }
@@ -246,6 +310,7 @@
                     this.isLoading = true
                     this.error = null
                     this.flashcards = []
+                    this.currentCardIndex = 0
 
                     try {
                         const response = await axios.post('/generate', {
@@ -255,18 +320,16 @@
                         if (response.data.success) {
                             const cards = response.data.flashcards.map(card => ({
                                 ...card,
-                                isFlipped: false
+                                showAnswer: false
                             }))
                             
-                            // Animation des cartes à leur apparition
                             setTimeout(() => {
                                 this.flashcards = cards
                                 this.$nextTick(() => {
-                                    gsap.from('.card-hover', {
+                                    gsap.from('.flip-card', {
                                         y: 30,
                                         opacity: 0,
-                                        duration: 0.5,
-                                        stagger: 0.1
+                                        duration: 0.5
                                     })
                                 })
                             }, 300)
@@ -276,16 +339,57 @@
                     } finally {
                         this.isLoading = false
                     }
+                },
+                nextCard() {
+                    if (this.currentCardIndex < this.flashcards.length - 1) {
+                        this.flashcards[this.currentCardIndex].showAnswer = false
+                        this.currentCardIndex++
+                        this.animateCardTransition('next')
+                    }
+                },
+                previousCard() {
+                    if (this.currentCardIndex > 0) {
+                        this.flashcards[this.currentCardIndex].showAnswer = false
+                        this.currentCardIndex--
+                        this.animateCardTransition('prev')
+                    }
+                },
+                toggleCard() {
+                    this.flashcards[this.currentCardIndex].showAnswer = !this.flashcards[this.currentCardIndex].showAnswer
+                },
+                animateCardTransition(direction) {
+                    const xOffset = direction === 'next' ? -50 : 50
+                    gsap.fromTo('.flip-card', 
+                        {
+                            x: xOffset,
+                            opacity: 0
+                        },
+                        {
+                            x: 0,
+                            opacity: 1,
+                            duration: 0.3
+                        }
+                    )
                 }
             },
             mounted() {
-                // Animation du titre à l'entrée
                 gsap.from('.gradient-text', {
                     y: -50,
                     opacity: 0,
                     duration: 1,
                     ease: 'power3.out'
                 })
+
+                window.addEventListener('keydown', (e) => {
+                    if (this.activeTab === 'study') {
+                        if (e.key === 'ArrowRight') this.nextCard()
+                        if (e.key === 'ArrowLeft') this.previousCard()
+                        if (e.key === ' ') {
+                            e.preventDefault()
+                            this.toggleCard()
+                        }
+                    }
+                })
             }
         }).mount('#app')
     </script>