Update templates/index.html

templates/index.html

@@ -65,37 +65,6 @@
             border-bottom-color: #60a5fa;
         }
 
-        .custom-file-input {
-            position: relative;
-            display: inline-block;
-            width: 100%;
-        }
-
-        .custom-file-input input[type="file"] {
-            opacity: 0;
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            cursor: pointer;
-        }
-
-        .custom-file-label {
-            padding: 1rem 1.5rem;
-            background: rgba(255, 255, 255, 0.05);
-            border: 2px dashed rgba(255, 255, 255, 0.2);
-            border-radius: 0.75rem;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .custom-file-input:hover .custom-file-label {
-            border-color: rgba(96, 165, 250, 0.5);
-            background: rgba(96, 165, 250, 0.1);
-        }
-
         @keyframes rotation {
             0% { transform: rotate(0deg) }
             100% { transform: rotate(360deg) }
@@ -121,55 +90,27 @@
         <div class="max-w-4xl mx-auto">
             <!-- Input Section -->
             <div class="glass-morph rounded-2xl p-8 mb-12 card-hover">
-                <form @submit.prevent="generateFlashcards" enctype="multipart/form-data">
-                    <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">
-                            <input 
-                                type="text" 
-                                id="topic" 
-                                v-model="topic" 
-                                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"
-                            >
-                        </div>
-                    </div>
-                    
-                    <div class="mb-8">
-                        <label class="block text-lg font-medium mb-3 text-gray-300">
-                            Document PDF (optionnel)
-                        </label>
-                        <div class="custom-file-input">
-                            <input 
-                                type="file" 
-                                ref="fileInput"
-                                accept=".pdf"
-                                @change="handleFileChange"
-                                :disabled="isLoading"
-                            >
-                            <div class="custom-file-label">
-                                <div v-if="selectedFile">
-                                    <span class="text-blue-400">[[selectedFile.name]]</span>
-                                </div>
-                                <div v-else>
-                                    <span class="text-gray-400">Glissez votre fichier PDF ici ou cliquez pour sélectionner</span>
-                                </div>
-                            </div>
-                        </div>
+                <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">
+                        <input 
+                            type="text" 
+                            id="topic" 
+                            v-model="topic" 
+                            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"
+                        >
                     </div>
-
-                    <button 
-                        type="submit"
-                        :disabled="isLoading"
-                        class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 px-8 rounded-xl font-medium text-lg hover:opacity-90 transition-all duration-300 flex items-center justify-center space-x-3"
-                    >
-                        <span v-if="!isLoading">Générer les Flashcards</span>
-                        <span v-else class="custom-loader"></span>
-                    </button>
-                </form>
+                </div>
+                <button 
+                    @click="generateFlashcards" 
+                    :disabled="isLoading"
+                    class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 px-8 rounded-xl font-medium text-lg hover:opacity-90 transition-all duration-300 flex items-center justify-center space-x-3"
+                >
+                    <span v-if="!isLoading">Générer les Flashcards</span>
+                    <span v-else class="custom-loader"></span>
+                </button>
             </div>
 
             <!-- Error Message -->
@@ -250,26 +191,10 @@
                     flashcards: [],
                     activeTab: 'study',
                     isLoading: false,
-                    error: null,
-                    selectedFile: null
+                    error: null
                 }
             },
             methods: {
-                handleFileChange(event) {
-                    const file = event.target.files[0]
-                    if (file) {
-                        if (file.type === 'application/pdf') {
-                            this.selectedFile = file
-                            this.error = null
-                        } else {
-                            this.error = 'Veuillez sélectionner un fichier PDF valide.'
-                            event.target.value = ''
-                            this.selectedFile = null
-                        }
-                    } else {
-                        this.selectedFile = null
-                    }
-                },
                 async generateFlashcards() {
                     if (!this.topic) {
                         this.error = 'Veuillez entrer un sujet.'
@@ -281,17 +206,8 @@
                     this.flashcards = []
 
                     try {
-                        const formData = new FormData()
-                        formData.append('topic', this.topic)
-                        
-                        if (this.selectedFile) {
-                            formData.append('file', this.selectedFile)
-                        }
-
-                        const response = await axios.post('/generate', formData, {
-                            headers: {
-                                'Content-Type': 'multipart/form-data'
-                            }
+                        const response = await axios.post('/generate', {
+                            topic: this.topic
                         })
 
                         if (response.data.success) {
@@ -300,6 +216,7 @@
                                 showAnswer: false
                             }))
                             
+                            // Animation des cartes à leur apparition
                             setTimeout(() => {
                                 this.flashcards = cards
                                 this.$nextTick(() => {
@@ -320,6 +237,7 @@
                 }
             },
             mounted() {
+                // Animation du titre à l'entrée
                 gsap.from('.gradient-text', {
                     y: -50,
                     opacity: 0,