Flasksite1

Sleeping

App Files Files Community

Docfile commited on Aug 27, 2025

Commit

87e553e

verified ·

1 Parent(s): be583ae

Update templates/philosophie.html

Browse files

Files changed (1) hide show

templates/philosophie.html +1001 -167

templates/philosophie.html CHANGED Viewed

@@ -1,189 +1,1023 @@
 <!DOCTYPE html>
-<html lang="fr">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Assistant de Philosophie (Vue.js)</title>
-  <script src="https://unpkg.com/vue@3"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
-  <!-- Ajout du crossorigin pour aider le chargement des fonts dans html2canvas -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Kalam&family=Lato:wght@400;700&display=swap" rel="stylesheet" crossorigin="anonymous">
-  <style>
-    body { font-family: 'Lato', sans-serif; background-color: #f4f4f9; margin: 0; padding: 20px; color: #333; }
-    .container { max-width: 900px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
-    h1 { text-align: center; color: #2c3e50; }
-    textarea { width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #ddd; min-height: 80px; margin-bottom: 10px; font-size: 16px; }
-    button { display: block; width: 100%; padding: 15px; background-color: #2980b9; color: white; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; transition: background-color 0.3s; }
-    button:hover { background-color: #3498db; }
-    button:disabled { background-color: #95a5a6; cursor: not-allowed; }
-    .loader { display: block; border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 20px auto; }
-    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-    .error { color: #c0392b; text-align: center; margin-top: 20px; font-weight: bold; }
-    /* Paper style */
-    .dissertation-paper {
-      font-family: 'Kalam', cursive;
-      font-size: 20px;
-      color: #1a2a4c;
-      background-color: #fdfaf4;
-      line-height: 1.8;
-      background-image: linear-gradient(transparent 97%, #d8e2ee 98%);
-      background-size: 100% 36px;
-      border-left: 2px solid #ffaaab;
-      padding-left: 4em;
-      margin: 40px -30px -30px -30px;
-      padding-top: 30px;
-      padding-bottom: 30px;
-      padding-right: 30px;
-      /* for better printing */
-      -webkit-print-color-adjust: exact;
-      print-color-adjust: exact;
-      -webkit-font-smoothing: antialiased;
-      /* Force white background for canvas capture (avoid transparent PNG-like issues) */
-      background-clip: padding-box;
-    }
-    .dissertation-paper h2 { font-size: 1.5em; text-align: center; margin-bottom: 1.8em; }
-    .dissertation-paper h3 { font-size: 1.2em; margin-top: 3.6em; margin-bottom: 1.8em; text-transform: uppercase; text-decoration: underline; }
-    .dissertation-paper .development-block { margin-top: 3.6em; }
-    .dissertation-paper p { text-align: justify; margin: 0; padding: 0; }
-    .dissertation-paper .prof { text-align: center; font-style: italic; margin-bottom: 1.8em; }
-    .dissertation-paper .indented { text-indent: 3em; }
-    .dissertation-paper .transition { margin-top: 1.8em; margin-bottom: 1.8em; font-style: italic; color: #4a6a9c; }
-    .dissertation-paper .pdf-button-container { text-align: center; margin-top: 3.6em; }
-    .dissertation-paper .pdf-button { font-family: 'Lato', sans-serif; font-size: 16px; padding: 10px 20px; width: auto; }
-    /* Evite que des blocs soient cassés au mauvais endroit */
-    .dissertation-paper, .dissertation-paper * { box-sizing: border-box; }
-    .avoid-page-break { page-break-inside: avoid; break-inside: avoid; }
   </style>
 </head>
-<body>
-  <div id="app" class="container">
-    <!-- contenu Vue -->
-    <h1>Assistant de Dissertation Philosophique</h1>
-    <form @submit.prevent="generateDissertation">
-      <textarea v-model="question" placeholder="Entrez votre sujet de dissertation ici..."></textarea>
-      <button type="submit" :disabled="isLoading">
-        {{ isLoading ? 'Génération en cours...' : 'Générer la dissertation' }}
-      </button>
-    </form>
-    <div v-if="isLoading" class="loader"></div>
-    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
-    <div v-if="dissertation" id="dissertation-content" class="dissertation-paper">
-      <h2>Sujet : {{ dissertation.sujet }}</h2>
-      <p class="prof">Prof : {{ dissertation.prof }}</p>
-      <h3>Introduction</h3>
-      <p class="indented">{{ dissertation.introduction }}</p>
-      <div v-for="partie in dissertation.parties" :key="partie.chapeau" class="avoid-page-break">
-        <div class="development-block">
-          <p class="indented">{{ partie.chapeau }}</p>
-          <p v-for="(arg, idx) in partie.arguments" :key="idx" class="indented">
-            {{ arg.paragraphe_argumentatif }}
-          </p>
         </div>
-        <p v-if="partie.transition" class="indented transition">{{ partie.transition }}</p>
       </div>
-      <h3>Conclusion</h3>
-      <p class="indented">{{ dissertation.conclusion }}</p>
-      <div class="pdf-button-container" data-html2canvas-ignore="true">
-        <!-- data-html2canvas-ignore empêchera le bouton d'être rendu dans le canvas -->
-        <button class="pdf-button" @click="generatePDF">Télécharger en PDF</button>
       </div>
     </div>
-    <!-- fin contenu Vue -->
-  </div>
-  <script>
-    const { createApp } = Vue;
-    createApp({
-      data() {
-        return {
-          question: '',
-          isLoading: false,
-          errorMessage: null,
-          dissertation: null
-        }
-      },
-      methods: {
-        async generateDissertation() {
-          if (!this.question.trim()) {
-            this.errorMessage = "Veuillez entrer un sujet de dissertation.";
-            return;
-          }
-          this.isLoading = true;
-          this.errorMessage = null;
-          this.dissertation = null;
-          try {
-            const response = await fetch('/api/generate_dissertation', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ question: this.question })
             });
-            const data = await response.json();
-            if (!response.ok) {
-              throw new Error(data.error || "Une erreur inconnue est survenue.");
             }
-            this.dissertation = data;
-            // petit timeout facultatif pour s'assurer que le DOM est posé
-            await new Promise(r => setTimeout(r, 50));
-          } catch (error) {
-            this.errorMessage = error.message;
-          } finally {
-            this.isLoading = false;
-          }
-        },
-        async generatePDF() {
-          const element = document.getElementById('dissertation-content');
-          if (!element) {
-            this.errorMessage = "Contenu introuvable pour le PDF.";
-            return;
-          }
-          try {
-            // attendre que les polices web soient chargées (important pour html2canvas)
-            if (document.fonts && document.fonts.ready) {
-              await document.fonts.ready;
             }
-            // mettre la page en haut (prévenir offset / découpage)
-            window.scrollTo(0, 0);
-            const options = {
-              margin: [10, 10, 10, 10], // mm
-              filename: 'dissertation-philosophie.pdf',
-              image: { type: 'jpeg', quality: 0.98 },
-              html2canvas: {
-                scale: 2,
-                useCORS: true,
-                logging: true,
-                backgroundColor: '#ffffff' // important si l'élément a un fond semi-transparent
-              },
-              jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
-            };
-            // génération
-            await html2pdf().set(options).from(element).save();
-          } catch (err) {
-            console.error('Erreur html2pdf:', err);
-            this.errorMessage = "Erreur lors de la génération du PDF. Vérifiez la console pour plus de détails (CORS / ressources externes).";
-          }
         }
-      }
-    }).mount('#app');
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="fr" class="scroll-smooth">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mariam AI - Assistant Philosophique</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/fr.js"></script>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+  <style>
+    /* Styles pour le Glow Up */
+    :root {
+      font-family: 'Inter', sans-serif;
+      --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      --transition-fast: all 0.15s ease-out;
+      --violet-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);
+    }
+    html {
+      scroll-behavior: smooth;
+      -webkit-overflow-scrolling: touch;
+    }
+    body {
+      will-change: scroll-position;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    /* Loader magnifique avec animations */
+    .progress-container {
+      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+      border: 2px solid #e2e8f0;
+      position: relative;
+      overflow: hidden;
+    }
+    .progress-container::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
+      animation: shimmer 2s infinite;
+    }
+    @keyframes shimmer {
+      0% { left: -100%; }
+      100% { left: 100%; }
+    }
+    .progress-bar {
+      background: var(--violet-gradient);
+      height: 100%;
+      transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
+    }
+    .progress-bar::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
+      animation: progressGlow 2s ease-in-out infinite;
+    }
+    @keyframes progressGlow {
+      0%, 100% { transform: translateX(-100%) skewX(-15deg); }
+      50% { transform: translateX(200%) skewX(-15deg); }
+    }
+    .loading-dots {
+      display: inline-flex;
+      align-items: center;
+    }
+    .loading-dots span {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #8b5cf6;
+      margin: 0 2px;
+      animation: loadingDots 1.4s infinite ease-in-out both;
+    }
+    .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
+    .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
+    @keyframes loadingDots {
+      0%, 80%, 100% {
+        transform: scale(0.8);
+        opacity: 0.5;
+      }
+      40% {
+        transform: scale(1.2);
+        opacity: 1;
+      }
+    }
+    /* Animation de fondu pour le streaming */
+    .streaming-text {
+      opacity: 0;
+      animation: fadeInUp 0.6s ease-out forwards;
+    }
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .word-by-word {
+      display: inline;
+      opacity: 0;
+      animation: wordFadeIn 0.3s ease-out forwards;
+    }
+    @keyframes wordFadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+    /* Pulse effect pour le contenu en cours de génération */
+    .generating-pulse {
+      animation: pulseGlow 2s ease-in-out infinite;
+    }
+    @keyframes pulseGlow {
+      0%, 100% {
+        box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
+        transform: scale(1);
+      }
+      50% {
+        box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
+        transform: scale(1.01);
+      }
+    }
+    /* Styles pour le texte en cours de streaming */
+    .streaming-cursor::after {
+      content: '|';
+      animation: cursorBlink 1s infinite;
+      color: #8b5cf6;
+      margin-left: 2px;
+    }
+    @keyframes cursorBlink {
+      0%, 50% { opacity: 1; }
+      51%, 100% { opacity: 0; }
+    }
+    .collapsible {
+      cursor: pointer;
+      padding: 1rem;
+      width: 100%;
+      border: none;
+      text-align: left;
+      outline: none;
+      transition: var(--transition-fast);
+      touch-action: manipulation;
+      -webkit-tap-highlight-color: transparent;
+    }
+    .collapsible:hover {
+      background-color: #f9fafb;
+    }
+    .content {
+      padding: 0 1rem;
+      display: none;
+      overflow: hidden;
+      background-color: white;
+      transition: var(--transition-smooth);
+    }
+    .prose {
+      max-width: 100% !important;
+      text-rendering: optimizeLegibility;
+    }
+    #response .prose {
+      color: #374151;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      hyphens: auto;
+      -webkit-hyphens: auto;
+      -moz-hyphens: auto;
+    }
+    .prose p, .prose ul, .prose ol, .prose li {
+      line-height: 1.75;
+    }
+    .prose h1, .prose h2, .prose h3 {
+      margin-top: 1.5em;
+      margin-bottom: 0.8em;
+      line-height: 1.3;
+    }
+    .animate-fadeIn {
+      animation: fadeIn 0.4s ease-out forwards;
+      transform: translateZ(0);
+      will-change: opacity, transform;
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(15px) translateZ(0);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) translateZ(0);
+      }
+    }
+    .select2-container--default .select2-selection--single {
+      border: 1px solid #d1d5db;
+      border-radius: 0.75rem;
+      height: auto;
+      padding: 0.75rem 1rem;
+      background-color: white;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    }
+    .select2-container--default .select2-selection--single .select2-selection__rendered {
+      color: #111827;
+      line-height: inherit;
+      padding-right: 1.5rem;
+    }
+    .select2-results__option .course-author {
+      font-size: 0.875rem;
+      color: #6b7280;
+      display: block;
+      margin-top: 0.1rem;
+    }
+    .select2-dropdown {
+      border-radius: 0.75rem;
+      border: 1px solid #d1d5db;
+      box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
+    }
+    #image-preview {
+      max-height: 200px;
+      border-radius: 0.75rem;
+      box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
+    }
+    summary {
+      list-style: none;
+    }
+    summary::-webkit-details-marker {
+      display: none;
+    }
+    @media (max-width: 640px) {
+      .max-w-3xl {
+        max-width: 100%;
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+      }
+      #response, #thinking-wrapper {
+        overflow-x: hidden;
+      }
+      .prose {
+        font-size: 0.95rem;
+        line-height: 1.6;
+      }
+      .animate-fadeIn {
+        animation-duration: 0.2s;
+      }
+    }
+    .generation-container {
+      contain: layout style;
+      transform: translateZ(0);
+    }
+    textarea {
+      resize: none;
+      -webkit-appearance: none;
+    }
+    button {
+      touch-action: manipulation;
+      -webkit-tap-highlight-color: transparent;
+      transition: var(--transition-fast);
+    }
+    .content-scrollable {
+      -webkit-overflow-scrolling: touch;
+      scroll-behavior: smooth;
+    }
   </style>
 </head>
+<body class="bg-gray-50 text-gray-900">
+  <!-- Navbar -->
+  <nav class="bg-white/90 backdrop-blur-lg border-b border-gray-200 fixed w-full z-50">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex justify-between items-center h-16">
+        <div class="flex items-center space-x-3">
+          <svg class="h-8 w-auto text-violet-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.311a15.045 15.045 0 01-7.5 0C4.508 19.663 2.25 15.184 2.25 10.5 2.25 5.816 5.816 2.25 10.5 2.25c4.684 0 8.25 3.566 8.25 8.25 0 4.684-2.258 9.163-5.25 11.584z" />
+          </svg>
+          <div class="text-xl font-bold text-gray-800">Mariam AI</div>
+        </div>
+        <div class="flex items-center">
+          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-violet-100 text-violet-800">
+            Assistant Philosophique
+          </span>
         </div>
       </div>
+    </div>
+  </nav>
+  <!-- Main Content -->
+  <main class="pt-24 pb-16 px-4 sm:px-6 lg:px-8">
+    <div class="max-w-3xl mx-auto">
+      <div class="bg-white rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
+        <div class="p-6 sm:p-8">
+          <div class="text-center">
+            <h1 class="text-3xl font-bold text-gray-900">Gen'Dissertation</h1>
+            <p class="mt-2 text-md text-gray-600">Créez des dissertations et analyses pertinentes et structurées.</p>
+          </div>
+        </div>
+        <div class="p-6 sm:p-8 border-t border-gray-200 space-y-6">
+          <!-- Type Selection -->
+          <div class="space-y-2">
+            <label for="type-select" class="block text-sm font-medium text-gray-700">Type de travail</label>
+            <select id="type-select" class="w-full rounded-xl border-gray-300 shadow-sm focus:border-violet-500 focus:ring-violet-500 bg-white py-3 px-4">
+              <option value="1">Sujet Type 1</option>
+              <option value="2">Sujet Type 2 (Citation)</option>
+              <option value="3">Sujet Type 3</option>
+            </select>
+          </div>
+          <!-- Conteneur pour les champs texte -->
+          <div id="text-input-container">
+            <!-- Course Selection -->
+            <div class="space-y-2">
+              <label for="course-select" class="block text-sm font-medium text-gray-700">Utiliser un cours comme contexte</label>
+              <select id="course-select" class="w-full">
+                <option value="">Choisir un cours...</option>
+              </select>
+            </div>
+            <!-- Question Input -->
+            <div class="space-y-2 mt-4">
+              <label for="question" class="block text-sm font-medium text-gray-700">Sujet de dissertation</label>
+              <textarea id="question" rows="4" class="w-full rounded-xl border-gray-300 shadow-sm focus:border-violet-500 focus:ring-violet-500 resize-none bg-white py-3 px-4" placeholder="Saisissez votre sujet de dissertation... ex: 'La liberté consiste-t-elle à faire tout ce que l'on veut ?'"></textarea>
+            </div>
+          </div>
+          <!-- Conteneur pour l'upload d'image -->
+          <div id="image-input-container" class="hidden">
+             <div class="space-y-2">
+                <label for="image-upload" class="block text-sm font-medium text-gray-700">Charger un document pour analyse</label>
+                <input type="file" id="image-upload" accept="image/jpeg, image/png, image/webp" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100 cursor-pointer"/>
+                <div class="mt-4 flex justify-center"><img id="image-preview" src="" alt="Aperçu de l'image" class="hidden"/></div>
+            </div>
+          </div>
+          <!-- Submit Button -->
+          <div class="pt-4">
+            <button id="submit-btn" class="w-full flex items-center justify-center py-3.5 px-6 rounded-xl bg-violet-600 text-white font-semibold shadow-md shadow-violet-200 hover:bg-violet-700 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2">
+              <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd" /></svg>
+              Générer la dissertation
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- Loading Section -->
+      <div id="loading-section" class="hidden mt-8 generation-container">
+        <div class="bg-white border border-gray-200 rounded-xl shadow-lg p-8 generating-pulse">
+          <div class="text-center space-y-6">
+            <div class="mx-auto w-16 h-16 relative">
+              <svg class="w-16 h-16 text-violet-600 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            </div>
+            <div class="space-y-3">
+              <h3 class="text-xl font-semibold text-gray-800">Génération en cours</h3>
+              <p id="loading-message" class="text-gray-600">Initialisation de l'IA philosophique</p>
+              <div class="loading-dots">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+            <!-- Barre de progression -->
+            <div class="space-y-2">
+              <div class="flex justify-between text-sm text-gray-600">
+                <span>Progression</span>
+                <span id="progress-percentage">0%</span>
+              </div>
+              <div class="progress-container w-full h-3 rounded-full">
+                <div id="progress-bar" class="progress-bar w-0 rounded-full"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Thinking Process Section -->
+      <div id="thinking-wrapper" class="hidden mt-8 generation-container">
+        <details id="thinking-container" class="bg-white border border-gray-200 rounded-xl shadow-sm">
+          <summary class="flex justify-between items-center p-4 cursor-pointer">
+            <h3 class="text-md font-semibold text-gray-700">Processus de pensée de l'IA</h3>
+            <svg class="h-5 w-5 text-gray-500 transition-transform transform open:rotate-180" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+            </svg>
+          </summary>
+          <div id="thinking-process" class="p-4 border-t border-gray-200 text-sm text-gray-600 prose prose-sm max-w-none max-h-64 overflow-y-auto content-scrollable">
+          </div>
+        </details>
+      </div>
+      <!-- Response Section -->
+      <div id="response" class="hidden mt-6 generation-container">
+        <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 sm:p-8 prose prose-violet max-w-none">
+        </div>
+      </div>
+      <!-- Action Buttons -->
+      <div id="action-buttons" class="hidden mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <button id="copy-btn" class="w-full flex items-center justify-center py-3 px-6 rounded-xl bg-gray-100 text-gray-800 font-medium border border-gray-200 hover:bg-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2">
+            <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>
+            Copier le texte
+          </button>
+      </div>
+      <!-- Saved Dissertations Section -->
+      <div class="mt-12">
+        <h3 class="text-xl font-bold text-gray-800 mb-4">Historique</h3>
+        <div id="dissertations-list" class="space-y-3">
+        </div>
       </div>
     </div>
+  </main>
+  <!-- Bouton flottant DeepThink -->
+  <button id="deepthink-btn" class="fixed bottom-6 right-6 z-50 flex items-center bg-indigo-600 text-white px-5 py-3 rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-transform hover:scale-105">
+    <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.898 20.562L16.25 22.5l-.648-1.938a3.375 3.375 0 00-2.672-2.672L11.25 18l1.938-.648a3.375 3.375 0 002.672-2.672L16.25 13.5l.648 1.938a3.375 3.375 0 002.672 2.672L21.75 18l-1.938.648a3.375 3.375 0 00-2.672 2.672z" /></svg>
+    DeepThink
+  </button>
+<script>
+$(document).ready(function() {
+    // --- Initialisations ---
+    $('#course-select').select2({
+        placeholder: 'Optionnel : choisir un cours...',
+        allowClear: true,
+        templateResult: function (course) {
+            if (!course.id) { return course.text; }
+            return $(`<span>${course.text}</span><span class="course-author">Pr. ${$(course.element).data('author')}</span>`);
+        },
+        templateSelection: function (course) { return course.text; },
+    });
+    marked.setOptions({ breaks: true, gfm: true, headerIds: false, mangle: false });
+    moment.locale('fr');
+    const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true });
+    // Variables pour le loader et streaming
+    let currentProgress = 0;
+    let progressInterval;
+    let streamingTimeout;
+    // Messages de chargement rotatifs
+    const loadingMessages = [
+        "Initialisation de l'IA philosophique",
+        "Analyse du sujet proposé",
+        "Recherche des concepts clés",
+        "Construction de l'argumentation",
+        "Structuration de la dissertation",
+        "Vérification de la cohérence",
+        "Finalisation de la réponse"
+    ];
+    // Fonction pour simuler le progress loader
+    function startProgressLoader() {
+        currentProgress = 0;
+        let messageIndex = 0;
+        $('#loading-section').removeClass('hidden').addClass('animate-fadeIn');
+        $('#progress-bar').css('width', '0%');
+        $('#progress-percentage').text('0%');
+        // Animation du message
+        const messageInterval = setInterval(() => {
+            $('#loading-message').fadeOut(300, function() {
+                $(this).text(loadingMessages[messageIndex]).fadeIn(300);
+                messageIndex = (messageIndex + 1) % loadingMessages.length;
             });
+        }, 2000);
+        // Animation de la barre de progression
+        progressInterval = setInterval(() => {
+            if (currentProgress < 95) {
+                // Progression plus rapide au début, plus lente vers la fin
+                const increment = currentProgress < 30 ? Math.random() * 8 + 3 :
+                                 currentProgress < 60 ? Math.random() * 4 + 2 :
+                                 Math.random() * 2 + 0.5;
+                currentProgress = Math.min(currentProgress + increment, 95);
+                updateProgressBar(currentProgress);
             }
+        }, 300);
+        // Nettoyer après 30 secondes max
+        setTimeout(() => {
+            clearInterval(messageInterval);
+            clearInterval(progressInterval);
+            completeProgress();
+        }, 30000);
+    }
+    function updateProgressBar(progress) {
+        $('#progress-bar').css('width', progress + '%');
+        $('#progress-percentage').text(Math.round(progress) + '%');
+    }
+    function completeProgress() {
+        clearInterval(progressInterval);
+        currentProgress = 100;
+        updateProgressBar(100);
+        setTimeout(() => {
+            $('#loading-section').fadeOut(500, function() {
+                startStreamingDisplay();
+            });
+        }, 800);
+    }
+    // Fonction pour démarrer l'affichage en streaming avec effet de fondu
+    function startStreamingDisplay() {
+        // Simuler des données reçues (remplacer par vraies données de l'API)
+        simulateStreamingData();
+    }
+    // Simulation du streaming avec de vraies données (remplacer par l'appel API réel)
+    function simulateStreamingData() {
+        // Exemple de données - remplacer par les vraies données de votre API
+        const sampleThinking = `## Analyse du sujet
+Le sujet "La liberté consiste-t-elle à faire tout ce que l'on veut ?" interroge la nature même de la liberté. Il faut distinguer entre liberté et licence, entre pouvoir et droit.
+## Plan envisagé
+1. La liberté comme absence de contraintes
+2. Les limites nécessaires à la liberté
+3. La liberté authentique comme autodétermination`;
+        const sampleResponse = `# La liberté consiste-t-elle à faire tout ce que l'on veut ?
+## Introduction
+La question de la liberté traverse toute l'histoire de la philosophie. À première vue, être libre semble signifier pouvoir agir selon ses désirs, sans contrainte. Cependant, cette conception spontanée de la liberté pose problème : peut-on vraiment identifier liberté et licence ? La liberté véritable ne suppose-t-elle pas au contraire certaines limites ?
+## I. La liberté comme absence de contraintes
+### A. La conception commune de la liberté
+Dans l'usage courant, être libre c'est faire ce que l'on veut, quand on le veut. Cette conception négative de la liberté la définit par l'absence d'obstacles extérieurs à nos actions.
+### B. La liberté naturelle selon Hobbes
+Thomas Hobbes définit la liberté comme "l'absence d'obstacles extérieurs". Dans l'état de nature, chaque individu a le droit à tout, y compris au corps d'autrui.
+## II. Les limites nécessaires à la liberté
+### A. La liberté des uns s'arrête où commence celle des autres
+John Stuart Mill, dans "De la liberté", établit le principe de non-nuisance : ma liberté ne doit pas porter atteinte à celle d'autrui.
+### B. Les contraintes comme conditions de la liberté
+Paradoxalement, certaines contraintes peuvent être libératrices. Les règles du jeu au tennis ne limitent pas le joueur, elles rendent le jeu possible.
+## III. La liberté authentique comme autodétermination
+### A. La liberté selon Kant
+Pour Kant, la vraie liberté n'est pas de suivre ses inclinations, mais d'agir selon des principes rationnels que l'on s'est donnés à soi-même.
+### B. L'autonomie comme essence de la liberté
+Être libre, c'est être autonome, c'est-à-dire se donner ses propres lois. Cela implique une maîtrise de soi et une réflexion sur ses actes.
+## Conclusion
+La liberté ne peut se réduire à la simple capacité de faire tout ce que l'on veut. Une telle conception conduirait au chaos et à la négation même de la liberté. La véritable liberté réside dans l'autodétermination rationnelle, dans la capacité à agir selon des principes que l'on s'est librement choisis. Ainsi, les contraintes ne s'opposent pas nécessairement à la liberté ; elles peuvent même la rendre possible.`;
+        // Démarrer le streaming avec effet de fondu
+        startWordByWordStreaming(sampleThinking, sampleResponse);
+    }
+    // Fonction pour l'affichage mot par mot avec effet de fondu
+    function startWordByWordStreaming(thinkingText, responseText) {
+        // Afficher d'abord la section de pensée
+        $('#thinking-wrapper').removeClass('hidden').addClass('animate-fadeIn');
+        streamTextWordByWord('#thinking-process', thinkingText, 50, () => {
+            // Une fois la pensée terminée, afficher la réponse
+            $('#response').removeClass('hidden').addClass('animate-fadeIn');
+            streamTextWordByWord('#response > div', responseText, 30, () => {
+                // Une fois terminé, afficher les boutons d'action
+                $('#action-buttons').removeClass('hidden').addClass('animate-fadeIn');
+                Toast.fire({ icon: 'success', title: 'Génération terminée !' });
+                // Sauvegarder la dissertation
+                let title;
+                if ($('#type-select').val() === '3') {
+                    const fileName = $('#image-upload')[0].files[0]?.name || "Analyse de document";
+                    title = `Analyse (Sujet Type 3): ${fileName}`;
+                } else {
+                    title = $('#question').val().trim();
+                }
+                saveDissertation(title, responseText);
+            });
+        });
+    }
+    // Fonction pour streamer le texte mot par mot
+    function streamTextWordByWord(selector, text, delay = 50, callback) {
+        const container = $(selector);
+        container.empty();
+        // Convertir le markdown en HTML
+        const htmlContent = marked.parse(text);
+        // Créer un élément temporaire pour extraire le texte
+        const tempDiv = $('<div>').html(htmlContent);
+        // Fonction récursive pour traiter chaque nœud
+        function processNode(node, targetContainer) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                // Nœud texte - streamer mot par mot
+                const words = node.textContent.split(/(\s+)/);
+                let wordIndex = 0;
+                function addNextWord() {
+                    if (wordIndex < words.length) {
+                        const word = words[wordIndex];
+                        const span = $('<span>').addClass('word-by-word').text(word);
+                        span.css('animation-delay', '0s');
+                        targetContainer.append(span);
+                        setTimeout(() => {
+                            wordIndex++;
+                            addNextWord();
+                        }, delay);
+                    } else if (callback && node === tempDiv.get(0).lastChild) {
+                        setTimeout(callback, 500);
+                    }
+                }
+                addNextWord();
+            } else if (node.nodeType === Node.ELEMENT_NODE) {
+                // Nœud élément - recréer l'élément et traiter ses enfants
+                const newElement = $(`<${node.tagName.toLowerCase()}>`);
+                // Copier les attributs
+                Array.from(node.attributes).forEach(attr => {
+                    newElement.attr(attr.name, attr.value);
+                });
+                targetContainer.append(newElement);
+                // Traiter les enfants
+                Array.from(node.childNodes).forEach(child => {
+                    processNode(child, newElement);
+                });
             }
+        }
+        // Démarrer le traitement
+        Array.from(tempDiv.get(0).childNodes).forEach(child => {
+            processNode(child, container);
+        });
+        // Auto-scroll pendant le streaming
+        const scrollInterval = setInterval(() => {
+            smoothScrollToBottom();
+        }, 200);
+        setTimeout(() => {
+            clearInterval(scrollInterval);
+        }, (text.split(' ').length * delay) + 2000);
+    }
+    // Fonction de scroll optimisée
+    function smoothScrollToBottom() {
+        const targetScrollTop = Math.max(0, document.documentElement.scrollHeight - window.innerHeight - 50);
+        window.scrollTo({
+            top: targetScrollTop,
+            behavior: 'smooth'
+        });
+    }
+    // --- Gestion de l'interface ---
+    $('#type-select').change(function() {
+        const type = $(this).val();
+        // Cacher les sections de résultat lors du changement de type
+        $('#loading-section, #thinking-wrapper, #response, #action-buttons').addClass('hidden');
+        if (type === '3') { // Sujet Type 3
+            $('#text-input-container').hide();
+            $('#image-input-container').show().addClass('animate-fadeIn');
+            $('#deepthink-btn').hide();
+            $('#submit-btn').html('<svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg>Analyser le sujet');
+        } else { // Dissertation texte
+            $('#text-input-container').show().addClass('animate-fadeIn');
+            $('#image-input-container').hide();
+            $('#deepthink-btn').show();
+            $('#submit-btn').html('<svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd" /></svg>Générer la dissertation');
         }
+    }).trigger('change');
+    $('#image-upload').change(function(e) {
+        if (e.target.files && e.target.files[0]) {
+            const reader = new FileReader();
+            reader.onload = (event) => $('#image-preview').attr('src', event.target.result).removeClass('hidden').addClass('animate-fadeIn');
+            reader.readAsDataURL(e.target.files[0]);
+        }
+    });
+    // --- Gestion des clics pour démarrer la génération ---
+    $('#submit-btn, #deepthink-btn').click(function() {
+        const type = $('#type-select').val();
+        const isDeepThink = $(this).attr('id') === 'deepthink-btn';
+        if (type === '3') {
+            const imageFile = $('#image-upload')[0].files[0];
+            if (!imageFile) {
+                Swal.fire('Erreur', 'Veuillez sélectionner un document.', 'error');
+                return;
+            }
+        } else {
+            const question = $('#question').val().trim();
+            if (!question) {
+                Swal.fire('Erreur', 'Veuillez saisir un sujet.', 'error');
+                return;
+            }
+        }
+        // Cacher les sections précédentes et démarrer le loader
+        $('#thinking-wrapper, #response, #action-buttons').addClass('hidden');
+        startProgressLoader();
+        // Simuler une génération (remplacer par l'appel API réel)
+        setTimeout(() => {
+            completeProgress();
+        }, Math.random() * 3000 + 2000); // Entre 2 et 5 secondes
+        /*
+        // Code pour l'appel API réel (décommenter et adapter) :
+        const data = type === '3' ?
+            new FormData().append('image', $('#image-upload')[0].files[0]) :
+            { question: $('#question').val().trim(), type, courseId: $('#course-select').val() || null };
+        const url = type === '3' ? '/stream_philo_image' :
+                   isDeepThink ? '/stream_philo_deepthink' : '/stream_philo';
+        handleRealStreamedGeneration(url, {
+            method: 'POST',
+            headers: type !== '3' ? { 'Content-Type': 'application/json' } : undefined,
+            body: type === '3' ? data : JSON.stringify(data)
+        });
+        */
+    });
+    // Fonction pour les vrais appels API streamés (à utiliser quand l'API est prête)
+    async function handleRealStreamedGeneration(url, options) {
+        startProgressLoader();
+        let fullResponseText = '', fullThinkingText = '';
+        try {
+            const response = await fetch(url, options);
+            if (!response.ok) throw new Error(await response.text());
+            // Compléter la barre de progression
+            completeProgress();
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+            while (true) {
+                const { value, done } = await reader.read();
+                if (done) break;
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split('\n');
+                buffer = lines.pop();
+                for (const line of lines) {
+                    if (line.trim() === '') continue;
+                    try {
+                        const data = JSON.parse(line.trim());
+                        if (data.type === 'thought') {
+                            fullThinkingText += data.content;
+                        } else if (data.type === 'answer') {
+                            fullResponseText += data.content;
+                        } else if (data.type === 'error') {
+                            throw new Error(data.content);
+                        }
+                    } catch (e) {
+                        console.error("Erreur JSON parse:", line, e);
+                    }
+                }
+            }
+            // Démarrer l'affichage streaming avec les vraies données
+            startWordByWordStreaming(fullThinkingText, fullResponseText);
+        } catch (error) {
+            $('#loading-section').addClass('hidden');
+            Swal.fire({ icon: 'error', title: 'Erreur', text: error.message || "Une erreur inconnue est survenue." });
+        }
+    }
+    // --- Fonctions de gestion de l'historique ---
+    function loadCourses() {
+        // Simuler le chargement des cours
+        const sampleCourses = [
+            { id: '1', title: 'Introduction à la philosophie politique', author: 'Martin' },
+            { id: '2', title: 'Éthique et morale', author: 'Dubois' },
+            { id: '3', title: 'Métaphysique contemporaine', author: 'Laurent' }
+        ];
+        const select = $('#course-select');
+        sampleCourses.forEach(course => {
+            const newOption = new Option(course.title, course.id, false, false);
+            $(newOption).data('author', course.author);
+            select.append(newOption);
+        });
+        select.trigger('change');
+        /*
+        // Code pour l'appel API réel :
+        $.ajax({
+          url: '/api/philosophy/courses',
+          method: 'GET',
+        }).done(function(courses) {
+            const select = $('#course-select');
+            courses.forEach(course => {
+              const newOption = new Option(course.title, course.id, false, false);
+              $(newOption).data('author', course.author);
+              select.append(newOption);
+            });
+            select.trigger('change');
+        }).fail(function() {
+            Toast.fire({ icon: 'error', title: 'Erreur de chargement des cours' });
+        });
+        */
+    }
+    function saveDissertation(title, content) {
+        if (!title || !content) return;
+        let saved = JSON.parse(localStorage.getItem('dissertations')) || [];
+        saved.unshift({ title, content, timestamp: Date.now() });
+        if(saved.length > 10) saved.pop();
+        localStorage.setItem('dissertations', JSON.stringify(saved));
+        updateSavedDissertationsList();
+    }
+    function deleteDissertation(index) {
+        let saved = JSON.parse(localStorage.getItem('dissertations')) || [];
+        saved.splice(index, 1);
+        localStorage.setItem('dissertations', JSON.stringify(saved));
+        updateSavedDissertationsList();
+        Toast.fire({ icon: 'info', title: 'Dissertation supprimée' });
+    }
+    function updateSavedDissertationsList() {
+        const list = $('#dissertations-list');
+        list.empty();
+        let saved = JSON.parse(localStorage.getItem('dissertations')) || [];
+        if (saved.length === 0) {
+            list.append('<p class="text-gray-500 text-center py-4">Aucune dissertation dans l\'historique.</p>');
+            return;
+        }
+        saved.forEach((diss, index) => {
+            const date = moment(diss.timestamp).fromNow();
+            const title = diss.title.length > 60 ? diss.title.substring(0, 60) + '...' : diss.title;
+            const item = $(`
+              <div class="border border-gray-200 bg-white rounded-xl shadow-sm transition-shadow hover:shadow-md">
+                <button class="collapsible rounded-t-xl w-full text-left">
+                    <div class="flex justify-between items-center w-full p-4">
+                        <span class="font-medium text-gray-800">${title}</span>
+                        <span class="text-gray-500 text-sm flex-shrink-0 ml-4">${date}</span>
+                    </div>
+                </button>
+                <div class="content prose max-w-none border-t border-gray-200">
+                  <div class="inner-content p-4 content-scrollable"></div>
+                  <div class="p-4 border-t border-gray-200 bg-gray-50 rounded-b-xl">
+                    <button class="delete-btn text-sm text-red-600 hover:text-red-800 font-medium" data-index="${index}">Supprimer</button>
+                  </div>
+                </div>
+              </div>
+            `);
+            item.find('.inner-content').html(marked.parse(diss.content));
+            list.append(item);
+        });
+    }
+    // Gestion des interactions avec l'historique
+    $('#dissertations-list').on('click', '.collapsible', function() {
+        const content = $(this).next('.content');
+        const isVisible = content.is(':visible');
+        content.stop(true, true).slideToggle({
+            duration: 300,
+            easing: 'swing',
+            start: function() {
+                $(this).css('overflow', 'hidden');
+            },
+            complete: function() {
+                $(this).css('overflow', isVisible ? 'hidden' : 'visible');
+            }
+        });
+        $(this).toggleClass("active");
+    });
+    $('#dissertations-list').on('click', '.delete-btn', function(e) {
+        e.stopPropagation();
+        const index = $(this).data('index');
+        deleteDissertation(index);
+    });
+    $('#copy-btn').click(function() {
+        const htmlToCopy = $('#response > div').html();
+        const textToCopy = new DOMParser().parseFromString(htmlToCopy, 'text/html').body.textContent || "";
+        navigator.clipboard.writeText(textToCopy).then(() => {
+            Toast.fire({ icon: 'success', title: 'Copié dans le presse-papiers!' });
+        }).catch(() => {
+            Toast.fire({ icon: 'error', title: 'Erreur de copie' });
+        });
+    });
+    // Optimisations mobiles
+    let ticking = false;
+    function updateScrollPosition() {
+        ticking = false;
+    }
+    window.addEventListener('scroll', function() {
+        if (!ticking) {
+            requestAnimationFrame(updateScrollPosition);
+            ticking = true;
+        }
+    }, { passive: true });
+    let resizeTimer;
+    window.addEventListener('resize', function() {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(function() {
+            if (window.innerWidth <= 640) {
+                $('body').addClass('mobile-optimized');
+            } else {
+                $('body').removeClass('mobile-optimized');
+            }
+        }, 250);
+    }, { passive: true });
+    if ('ontouchstart' in window) {
+        $('body').addClass('touch-device');
+        $(document).on('touchstart', 'button, .collapsible', function() {
+            $(this).addClass('touch-active');
+        });
+        $(document).on('touchend', 'button, .collapsible', function() {
+            const element = $(this);
+            setTimeout(() => element.removeClass('touch-active'), 150);
+        });
+    }
+    // Initialisation
+    loadCourses();
+    updateSavedDissertationsList();
+});
+</script>
 </body>
 </html>