Mariam-cards2

Running

App Files Files Community

Docfile commited on Jan 22

Commit

92be86b

verified ·

1 Parent(s): 1f7f905

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +125 -51

templates/index.html CHANGED Viewed

@@ -3,85 +3,134 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mariam M-0 | Résolveur de Problèmes Mathématiques</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML"></script>
     <style>
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
         }
         .loader {
-            border-top-color: #3B82F6;
-            animation: spinner 1s linear infinite;
         }
-        @keyframes spinner {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
         .thought-box {
-            transition: max-height 0.3s ease-out;
             max-height: 0;
             overflow: hidden;
         }
         .thought-box.open {
-            max-height: 500px;
         }
     </style>
 </head>
-<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen p-8">
-    <div class="container mx-auto max-w-3xl">
-        <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
-            <div class="flex items-center justify-center mb-8">
-                <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600">
-                    Mariam M-0
-                </h1>
             </div>
-            <form id="problemForm" class="space-y-6">
                 <div class="relative">
-                    <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-blue-500 transition-colors">
                         <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
-                        <div class="space-y-2">
-                            <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
-                                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                            </svg>
-                            <div class="text-gray-600">
-                                Glissez une image ou cliquez pour sélectionner
                             </div>
                         </div>
                     </div>
                 </div>
-                <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-3 px-6 rounded-xl font-medium hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transform transition-all hover:scale-105">
-                    Résoudre
                 </button>
             </form>
-            <div id="loader" class="hidden mt-8">
-                <div class="flex justify-center items-center">
-                    <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div>
                 </div>
-                <div class="text-center mt-4 text-gray-600">Analyse en cours...</div>
             </div>
-            <div id="solution" class="mt-8 hidden space-y-6">
-                <div class="bg-gray-50 rounded-xl p-4">
-                    <button id="thoughtsToggle" class="w-full flex justify-between items-center text-left font-semibold text-gray-700 hover:text-blue-600">
-                        <span>Processus de réflexion</span>
-                        <svg class="w-5 h-5 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                         </svg>
                     </button>
                     <div id="thoughtsBox" class="thought-box mt-4">
-                        <div id="thoughtsContent" class="prose max-w-none"></div>
                     </div>
                 </div>
-                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6">
-                    <h3 class="font-bold text-xl mb-4 text-gray-800">Solution</h3>
-                    <div id="answerContent" class="prose max-w-none"></div>
                 </div>
             </div>
         </div>
@@ -98,12 +147,47 @@
             const thoughtsToggle = document.getElementById('thoughtsToggle');
             const thoughtsBox = document.getElementById('thoughtsBox');
-            // Toggle thoughts
             thoughtsToggle.addEventListener('click', () => {
                 thoughtsBox.classList.toggle('open');
                 thoughtsToggle.querySelector('svg').classList.toggle('rotate-180');
             });
             form.addEventListener('submit', async (event) => {
                 event.preventDefault();
                 const file = imageInput.files[0];
@@ -112,7 +196,6 @@
                     return;
                 }
-                // Show loader
                 loader.classList.remove('hidden');
                 solution.classList.add('hidden');
@@ -130,7 +213,6 @@
                         thoughtsContent.innerHTML = data.thoughts;
                         answerContent.innerHTML = data.answer;
-                        // Refresh MathJax
                         if (window.MathJax) {
                             MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
                         }
@@ -146,14 +228,6 @@
                     loader.classList.add('hidden');
                 }
             });
-            // File input visualization
-            imageInput.addEventListener('change', function() {
-                const fileName = this.files[0]?.name;
-                if (fileName) {
-                    this.parentElement.querySelector('.text-gray-600').textContent = fileName;
-                }
-            });
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mariam M-0 | Solution Mathématique</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML"></script>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Space Grotesk', sans-serif;
+            background: linear-gradient(125deg, #000428 0%, #004e92 100%);
+            min-height: 100vh;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        }
+        .uploadArea {
+            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
+            border: 2px dashed rgba(255, 255, 255, 0.2);
         }
+        .uploadArea:hover {
+            border-color: #60A5FA;
+            transform: translateY(-2px);
+        }
+        .neon-button {
+            background: linear-gradient(90deg, #4F46E5 0%, #60A5FA 100%);
+            box-shadow: 0 0 15px rgba(79, 70, 229, 0.5);
+            transition: all 0.3s ease;
+        }
+        .neon-button:hover {
+            box-shadow: 0 0 25px rgba(79, 70, 229, 0.7);
+            transform: translateY(-2px);
+        }
         .loader {
+            width: 48px;
+            height: 48px;
+            border: 3px solid #FFF;
+            border-bottom-color: transparent;
+            border-radius: 50%;
+            display: inline-block;
+            box-sizing: border-box;
+            animation: rotation 1s linear infinite;
         }
+        @keyframes rotation {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
         .thought-box {
+            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
             max-height: 0;
             overflow: hidden;
         }
         .thought-box.open {
+            max-height: 1000px;
+        }
+        .glow {
+            animation: glow 2s ease-in-out infinite alternate;
+        }
+        @keyframes glow {
+            from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #60A5FA; }
+            to { text-shadow: 0 0 20px #fff, 0 0 30px #4F46E5, 0 0 40px #4F46E5; }
         }
     </style>
 </head>
+<body class="p-4 md:p-8">
+    <div class="container mx-auto max-w-4xl">
+        <div class="glass-card rounded-3xl p-8 md:p-12">
+            <div class="text-center mb-12">
+                <h1 class="text-5xl font-bold text-white glow mb-4">Mariam M-0</h1>
+                <p class="text-blue-200 text-lg">Solution Mathématique Intelligente</p>
             </div>
+            <form id="problemForm" class="space-y-8">
                 <div class="relative">
+                    <div class="uploadArea rounded-2xl p-12 text-center transition-all duration-300 cursor-pointer">
                         <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
+                        <div class="space-y-4">
+                            <div class="w-20 h-20 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
+                                <svg class="w-10 h-10 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                                </svg>
                             </div>
+                            <div class="text-blue-200 text-lg font-medium">Déposez votre image ici</div>
+                            <div class="text-blue-300/60 text-sm">ou cliquez pour sélectionner</div>
                         </div>
                     </div>
                 </div>
+                <button type="submit" class="neon-button w-full py-4 rounded-xl text-white font-medium text-lg transition-all duration-300">
+                    Résoudre le problème
                 </button>
             </form>
+            <div id="loader" class="hidden mt-12">
+                <div class="flex flex-col items-center justify-center space-y-4">
+                    <span class="loader"></span>
+                    <div class="text-blue-200 text-lg">Analyse en cours...</div>
                 </div>
             </div>
+            <div id="solution" class="hidden mt-12 space-y-8">
+                <div class="glass-card rounded-2xl p-6">
+                    <button id="thoughtsToggle" class="w-full flex justify-between items-center text-left text-lg font-medium text-white hover:text-blue-300 transition-colors">
+                        <span>Processus de Réflexion</span>
+                        <svg class="w-6 h-6 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                         </svg>
                     </button>
                     <div id="thoughtsBox" class="thought-box mt-4">
+                        <div id="thoughtsContent" class="prose prose-invert max-w-none text-blue-100"></div>
                     </div>
                 </div>
+                <div class="glass-card rounded-2xl p-8">
+                    <h3 class="text-2xl font-bold text-white mb-6">Solution</h3>
+                    <div id="answerContent" class="prose prose-invert max-w-none text-blue-100"></div>
                 </div>
             </div>
         </div>
             const thoughtsToggle = document.getElementById('thoughtsToggle');
             const thoughtsBox = document.getElementById('thoughtsBox');
             thoughtsToggle.addEventListener('click', () => {
                 thoughtsBox.classList.toggle('open');
                 thoughtsToggle.querySelector('svg').classList.toggle('rotate-180');
             });
+            imageInput.addEventListener('change', function(e) {
+                const fileName = this.files[0]?.name;
+                if (fileName) {
+                    const textElement = this.parentElement.querySelector('.text-lg');
+                    textElement.textContent = `Fichier sélectionné : ${fileName}`;
+                }
+            });
+            // Drag and drop effects
+            const dropZone = document.querySelector('.uploadArea');
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                dropZone.addEventListener(eventName, preventDefaults, false);
+            });
+            function preventDefaults(e) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            ['dragenter', 'dragover'].forEach(eventName => {
+                dropZone.addEventListener(eventName, highlight, false);
+            });
+            ['dragleave', 'drop'].forEach(eventName => {
+                dropZone.addEventListener(eventName, unhighlight, false);
+            });
+            function highlight(e) {
+                dropZone.classList.add('border-blue-400');
+            }
+            function unhighlight(e) {
+                dropZone.classList.remove('border-blue-400');
+            }
             form.addEventListener('submit', async (event) => {
                 event.preventDefault();
                 const file = imageInput.files[0];
                     return;
                 }
                 loader.classList.remove('hidden');
                 solution.classList.add('hidden');
                         thoughtsContent.innerHTML = data.thoughts;
                         answerContent.innerHTML = data.answer;
                         if (window.MathJax) {
                             MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
                         }
                     loader.classList.add('hidden');
                 }
             });
         });
     </script>
 </body>