Update static/styles.css

static/styles.css

@@ -1,223 +1,171 @@
-
-                x: Math.random() * canvas.width,
-       document.addEventListener('DOMContentLoaded', () => {
-    // Animation des étoiles (si vous utilisez un canvas)
-    const canvas = document.querySelector('canvas.stars');
-    if (canvas) {
-        const ctx = canvas.getContext('2d');
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
-
-        // Fond bleu nuit vibrant
-        ctx.fillStyle = '#2A3F9D';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-        // Étoiles
-        const stars = [];
-        for (let i = 0; i < 100; i++) {
-            stars.push({
-                x: Math.random() * canvas.width,
-                y: Math.random() * canvas.height,
-                radius: Math.random() * 2,
-                opacity: Math.random() * 0.5 + 0.5
-            });
-        }
-
-        function animate() {
-            ctx.fillStyle = '#2A3F9D'; // Bleu nuit vibrant
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            ctx.fillStyle = '#E6E6FA'; // Blanc doux pour étoiles
-            stars.forEach(star => {
-                ctx.beginPath();
-                ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
-                ctx.globalAlpha = star.opacity;
-                ctx.fill();
-                star.opacity += (Math.random() - 0.5) * 0.02;
-                if (star.opacity < 0.3) star.opacity = 0.3;
-                if (star.opacity > 1) star.opacity = 1;
-            });
-            requestAnimationFrame(animate);
-        }
-        animate();
-
-        // Ajuster le canvas en cas de redimensionnement
-        window.addEventListener('resize', () => {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-            ctx.fillStyle = '#2A3F9D';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-        });
+/* Importer une police élégante pour le style pro et mignon */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
+
+body {
+    font-family: 'Inter', sans-serif;
+    background: #2A3F9D; /* Bleu nuit vibrant pour le fond */
+    color: #333333; /* Texte sombre pour contraste sur boîtes claires */
+    margin: 0;
+    overflow-x: hidden;
+}
+
+/* Animation des étoiles (si vous utilisez une classe .stars) */
+.stars {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.stars::before, .stars::after {
+    content: '';
+    position: absolute;
+    width: 2px;
+    height: 2px;
+    background: #E6E6FA; /* Blanc doux pour les étoiles */
+    box-shadow: 0 0 8px rgba(230, 230, 250, 0.8); /* Lueur vibrante */
+    animation: twinkle 5s infinite linear;
+}
+
+.stars::before { top: 20%; left: 30%; }
+.stars::after { top: 60%; left: 70%; }
+
+@keyframes twinkle {
+    0%, 100% { opacity: 0.4; transform: scale(1); }
+    50% { opacity: 1; transform: scale(1.3); }
+}
+
+/* Boîtes principales */
+.function-box {
+    background: #FFF5F8; /* Blanc cassé rosé, clair et assorti */
+    border-radius: 12px;
+    border: 1px solid rgba(255, 153, 204, 0.2); /* Bordure rose pastel */
+    padding: 20px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.function-box:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(255, 153, 204, 0.4); /* Rose pastel pour survol */
+}
+
+/* Modal */
+.modal {
+    background: rgba(0, 0, 0, 0.2); /* Fond semi-transparent léger */
+}
+
+.modal-content {
+    background: #FFF5F8; /* Blanc cassé rosé pour modals */
+    border-radius: 12px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    padding: 24px;
+}
+
+/* Boutons de tabulation */
+.tab-btn {
+    background: #E6E6FA; /* Violet clair pour contraste */
+    color: #333333;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+}
+
+.tab-btn.active {
+    background: linear-gradient(45deg, #FF99CC, #99CCFF); /* Rose pastel et bleu clair */
+    color: #FFFFFF;
+}
+
+.tab-btn:hover {
+    background: #D6CCFF; /* Violet plus clair au survol */
+}
+
+/* Boutons cosmiques */
+.cosmic-btn {
+    background: linear-gradient(45deg, #FF99CC, #99CCFF); /* Rose pastel et bleu clair */
+    color: #FFFFFF;
+    border-radius: 8px;
+    border: none;
+    transition: transform 0.2s ease;
+}
+
+.cosmic-btn:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(255, 153, 204, 0.4);
+}
+
+/* Zone de réponse */
+.response-card {
+    background: #E6E6FA; /* Violet clair */
+    border-radius: 8px;
+    color: #333333;
+}
+
+/* Conversation du chatbot */
+.chatbot-conversation {
+    background: #E6E6FA; /* Violet clair */
+    border-radius: 8px;
+}
+
+.chatbot-conversation .user-message {
+    color: #FF99CC; /* Rose pastel */
+}
+
+.chatbot-conversation .bot-message {
+    color: #99CCFF; /* Bleu clair */
+}
+
+/* Barre d'entrée */
+.input-bar {
+    background: #E6E6FA; /* Violet clair */
+    border-radius: 8px;
+}
+
+.input-bar input {
+    color: #333333;
+    background: transparent;
+}
+
+/* Zone de drop */
+.drop-area {
+    border: 2px dashed #99CCFF; /* Bleu clair */
+    background: #E6E6FA; /* Violet clair */
+    border-radius: 8px;
+}
+
+.drop-area:hover {
+    background: #D6CCFF; /* Violet plus clair */
+}
+
+.drop-area p {
+    color: #333333;
+}
+
+/* Spinner de chargement */
+.loading-spinner {
+    color: #333333;
+}
+
+/* Accessibilité */
+.cosmic-btn:focus, .tab-btn:focus, .function-box:focus {
+    outline: 2px solid #FF99CC; /* Rose pastel */
+    outline-offset: 2px;
+}
+
+/* Responsivité */
+@media (max-width: 768px) {
+    .modal-content {
+        width: 95%;
     }
-
-    // Gestion des modals
-    const openModal = (modalId) => {
-        const modal = document.getElementById(modalId);
-        modal.classList.remove('hidden');
-        document.querySelectorAll('.function-box').forEach(box => {
-            if (box.dataset.modal !== modalId) box.classList.add('shadowed');
-        });
-    };
-
-    const closeModal = (modal) => {
-        modal.classList.add('hidden');
-        modal.querySelectorAll('form').forEach(form => form.reset());
-        modal.querySelectorAll('.response-card').forEach(card => {
-            card.classList.add('hidden');
-            card.innerHTML = '';
-        });
-        modal.querySelectorAll('.file-preview').forEach(preview => {
-            preview.classList.add('hidden');
-            preview.innerHTML = '';
-        });
-        modal.querySelectorAll('.drop-area p').forEach(p => {
-            p.textContent = 'Drop File Here or Click to Choose';
-        });
-        if (modal.id === 'chatbot-modal') {
-            document.getElementById('chatbot-conversation').innerHTML = '';
-        }
-        document.querySelectorAll('.function-box').forEach(box => box.classList.remove('shadowed'));
-    };
-
-    // Ouvrir les modals
-    document.querySelectorAll('.function-box').forEach(box => {
-        box.addEventListener('click', () => openModal(box.dataset.modal));
-    });
-
-    // Fermer les modals
-    document.querySelectorAll('.close-modal').forEach(btn => {
-        btn.addEventListener('click', () => closeModal(btn.closest('.modal')));
-    });
-
-    // Gestion des onglets
-    document.querySelectorAll('.tab-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const modal = btn.closest('.modal');
-            modal.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
-            btn.classList.add('active');
-            modal.querySelectorAll('.tab-content').forEach(content => {
-                content.classList.add('hidden');
-                if (content.dataset.tab === btn.dataset.tab) content.classList.remove('hidden');
-            });
-        });
-    });
-
-    // Gestion du drag-and-drop
-    window.handleDrop = (event, dropArea) => {
-        event.preventDefault();
-        const fileInput = dropArea.querySelector('input[type="file"]');
-        const preview = dropArea.querySelector('.file-preview');
-        const files = event.dataTransfer.files;
-        if (files.length > 0) {
-            fileInput.files = files;
-            dropArea.querySelector('p').textContent = `Selected: ${files[0].name}`;
-            if (files[0].type.startsWith('image/')) {
-                const reader = new FileReader();
-                reader.onload = () => {
-                    preview.innerHTML = `<img src="${reader.result}" alt="Preview" class="w-24 h-24 object-cover rounded mt-2">`;
-                    preview.classList.remove('hidden');
-                };
-                reader.readAsDataURL(files[0]);
-            } else {
-                preview.innerHTML = `<p class="text-gray-600">${files[0].name}</p>`;
-                preview.classList.remove('hidden');
-            }
-        }
-    };
-
-    // Notifications toast
-    const showToast = (message, type = 'success') => {
-        const toast = document.createElement('div');
-        toast.className = `fixed bottom-4 right-4 p-4 rounded text-white ${type === 'success' ? 'bg-green-500' : 'bg-red-500'}`;
-        toast.textContent = message;
-        document.body.appendChild(toast);
-        setTimeout(() => toast.remove(), 3000);
-    };
-
-    // Soumission des formulaires
-    const forms = {
-        'summarize-form': { endpoint: '/process', intent: 'summarize' },
-        'summarize-file-form': { endpoint: '/process', intent: 'summarize' },
-        'translate-text-form': { endpoint: '/process', intent: 'translate' },
-        'translate-file-form': { endpoint: '/process', intent: 'file-translate' },
-        'chatbot-form': { endpoint: '/chat', intent: 'chat' },
-        'image-caption-form': { endpoint: '/process', intent: 'image-to-text' },
-        'visual-qa-form': { endpoint: '/process', intent: 'visual-qa' }
-    };
-
-    Object.keys(forms).forEach(formId => {
-        const form = document.getElementById(formId);
-        form.addEventListener('submit', async e => {
-            e.preventDefault();
-            const spinner = form.querySelector('.loading-spinner');
-            const responseCard = form.querySelector('.response-card') || form.nextElementSibling;
-            spinner.classList.remove('hidden');
-            responseCard.classList.add('hidden');
-            responseCard.innerHTML = '';
-
-            const formData = new FormData(form);
-            if (formId === 'summarize-form') {
-                formData.append('text', form.querySelector('input[type="text"]').value);
-            } else if (formId === 'summarize-file-form' || formId === 'translate-file-form' || formId === 'image-caption-form' || formId === 'visual-qa-form') {
-                const file = form.querySelector('input[type="file"]').files[0];
-                if (!file) {
-                    responseCard.innerHTML = `<p class="text-red-500">Please select a file.</p>`;
-                    responseCard.classList.remove('hidden');
-                    spinner.classList.add('hidden');
-                    showToast('Please select a file.', 'error');
-                    return;
-                }
-                formData.append('file', file);
-            } else if (formId === 'translate-text-form') {
-                const text = form.querySelector('input[type="text"]').value;
-                const lang = form.querySelector('select[name="language"]').value;
-                formData.append('text', `Translate to ${lang}: ${text}`);
-            } else if (formId === 'visual-qa-form') {
-                formData.append('text', form.querySelector('input[type="text"]').value);
-            } else if (formId === 'chatbot-form') {
-                const message = form.querySelector('input[name="message"]').value.trim();
-                if (!message) {
-                    spinner.classList.add('hidden');
-                    showToast('Please enter a message.', 'error');
-                    return;
-                }
-                formData.append('message', message);
-                const conversation = document.getElementById('chatbot-conversation');
-                conversation.innerHTML += `<p class="user-message">You: ${message}</p>`;
-                conversation.scrollTop = conversation.scrollHeight;
-            }
-
-            try {
-                const response = await fetch(forms[formId].endpoint, {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                spinner.classList.add('hidden');
-                if (response.ok) {
-                    responseCard.innerHTML = `<p>${data.response}</p>`;
-                    if (data.additional_data) {
-                        Object.entries(data.additional_data).forEach(([key, value]) => {
-                            responseCard.innerHTML += `<p><strong>${key.replace('_', ' ').replace(/\b\w/g, char => char.toUpperCase())}:</strong> ${value}</p>`;
-                        });
-                    }
-                    responseCard.classList.remove('hidden');
-                    showToast('Action completed successfully!', 'success');
-                    if (formId === 'chatbot-form') {
-                        const conversation = document.getElementById('chatbot-conversation');
-                        conversation.innerHTML += `<p class="bot-message">Assistant: ${data.response}</p>`;
-                        conversation.scrollTop = conversation.scrollHeight;
-                    }
-                } else {
-                    responseCard.innerHTML = `<p class="text-red-500">Error: ${data.detail}</p>`;
-                    responseCard.classList.remove('hidden');
-                    showToast('An error occurred.', 'error');
-                }
-            } catch (error) {
-                spinner.classList.add('hidden');
-                responseCard.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`;
-                responseCard.classList.remove('hidden');
-                showToast('An error occurred.', 'error');
-            }
-        });
-    });
-});
+    .input-bar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .cosmic-btn {
+        margin-top: 10px;
+        margin-left: 0;
+    }
+}