iop

instance/coursels.db

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cc778fd2d368894b22d8b9f6cc2bd2f814f1eb45eee675f20149fe3f1c004b86
-size 315392
+oid sha256:63df5905a95a503712def14d95e3161c838b7f28682649b42f36abc6f721b64c
+size 512000

static/css/animations.css

@@ -0,0 +1,74 @@
+/* Additional animations and effects */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes gradientAnimation {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+/* Apply animations to elements */
+.header-content h1 {
+    background: linear-gradient(135deg, var(--primary-1), var(--accent-1), var(--primary-2));
+    background-size: 200% 200%;
+    animation: gradientAnimation 5s ease infinite;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.card {
+    animation: fadeIn 0.6s ease-out;
+    animation-fill-mode: both;
+}
+
+.cards-grid .card:nth-child(1) { animation-delay: 0.1s; }
+.cards-grid .card:nth-child(2) { animation-delay: 0.2s; }
+.cards-grid .card:nth-child(3) { animation-delay: 0.3s; }
+.cards-grid .card:nth-child(4) { animation-delay: 0.4s; }
+
+.btn-primary:active {
+    animation: pulse 0.3s ease;
+}
+
+/* Theme toggle animation */
+.theme-toggle-animation {
+    animation: pulse 0.3s ease;
+}
+
+/* Improved glassmorphism effect */
+.glassmorphism {
+    background: rgba(var(--bg-rgb, 255, 255, 255), 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(var(--text-rgb, 0, 0, 0), 0.1);
+}
+
+/* Enhanced card hover effects */
+.card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, 
+        rgba(var(--primary-rgb), 0.1), 
+        rgba(var(--accent-rgb), 0.1));
+    opacity: 0;
+    transition: opacity var(--transition-base);
+    pointer-events: none;
+}
+
+.card:hover::after {
+    opacity: 1;
+}

static/css/style.css

@@ -1,184 +1,517 @@
-/* Custom styles for elegant, mobile-first design */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+/* Modern, clean and accessible design system */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+    /* Light theme colors */
+    --bg: #ffffff;
+    --bg-alt: #f8fafc;
+    --bg-card: #ffffff;
+    --text: #1e293b;
+    --text-light: #64748b;
+    --primary-1: #6366f1;
+    --primary-2: #4f46e5;
+    --accent-1: #f472b6;
+    --accent-2: #ec4899;
+    --success: #10b981;
+    --error: #ef4444;
+    --border-color: rgba(0, 0, 0, 0.1);
+
+    /* Typography */
+    --font-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+    --line-height-base: 1.6;
+
+    /* Spacing */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+
+    /* UI Elements */
+    --card-radius: 16px;
+    --btn-radius: 999px; /* pill buttons */
+    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
+    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.08);
+    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
+
+    /* Transitions */
+    --transition-fast: 150ms ease;
+    --transition-base: 250ms ease;
+}
+
+/* Dark theme colors */
+[data-theme="dark"] {
+    --bg: #0f172a;
+    --bg-alt: #1e293b;
+    --bg-card: #1e293b;
+    --text: #e2e8f0;
+    --text-light: #94a3b8;
+    --primary-1: #818cf8;
+    --primary-2: #6366f1;
+    --accent-1: #f472b6;
+    --accent-2: #ec4899;
+    --border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Base styles with modern refinements */
+html, body { 
+    height: 100%;
+    scroll-behavior: smooth;
+}
 
 body {
-    font-family: 'Roboto', sans-serif;
-    background-color: #f8f9fa;
-    color: #212529;
-    line-height: 1.6;
+    margin: 0;
+    font-family: var(--font-base);
+    background: var(--bg);
+    color: var(--text);
+    line-height: var(--line-height-base);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+    background: var(--primary-1);
+    color: white;
 }
 
 .container {
-    max-width: 1200px;
+    width: 100%;
+    max-width: 100%;
+    padding: 0 var(--spacing-md);
     margin: 0 auto;
-    padding: 0 15px;
+    box-sizing: border-box;
 }
 
 .header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    padding: 1rem 0;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    background: var(--bg);
+    color: var(--text);
+    padding: var(--spacing-md) 0;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
 }
 
 .header h1 {
     margin: 0;
     font-size: 1.5rem;
-    font-weight: 500;
+    font-weight: 600;
+    background: linear-gradient(135deg, var(--primary-1), var(--primary-2));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: -0.02em;
 }
 
 .navbar {
-    background-color: #fff;
-    border-bottom: 1px solid #e9ecef;
-    padding: 0.5rem 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-sm) 0;
+    gap: var(--spacing-md);
+}
+
+.nav-links {
+    display: flex;
+    gap: var(--spacing-md);
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+/* Theme toggle button */
+.theme-toggle {
+    background: none;
+    border: none;
+    padding: var(--spacing-sm);
+    cursor: pointer;
+    color: var(--text-light);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--transition-base);
+    position: relative;
+    overflow: hidden;
+}
+
+.theme-toggle:hover {
+    background: var(--bg-alt);
+    color: var(--primary-1);
+    transform: scale(1.1);
+}
+
+.theme-toggle::before {
+    content: "🌙";
+    position: absolute;
+    opacity: 0;
+    transform: translateY(100%);
+    transition: all var(--transition-base);
+}
+
+.theme-toggle::after {
+    content: "☀️";
+    position: absolute;
+    opacity: 1;
+    transform: translateY(0);
+    transition: all var(--transition-base);
+}
+
+[data-theme="dark"] .theme-toggle::before {
+    opacity: 1;
+    transform: translateY(0);
 }
 
-.navbar .nav-link {
-    color: #495057;
+[data-theme="dark"] .theme-toggle::after {
+    opacity: 0;
+    transform: translateY(-100%);
+}
+
+.nav-links a {
+    color: var(--text-light);
+    text-decoration: none;
     font-weight: 500;
-    transition: color 0.3s ease;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--btn-radius);
+    transition: all var(--transition-fast);
+}
+
+.nav-links a:hover {
+    color: var(--primary-1);
+    background: var(--bg-alt);
+}
+
+.nav-links a[rel="noopener"]::after{
+    content: '↗';
+    display:inline-block;
+    margin-left:0.45rem;
+    font-size:0.85rem;
+    opacity:0.8;
 }
 
-.navbar .nav-link:hover {
-    color: #667eea;
+.nav-links svg {
+    vertical-align: middle;
+    display: inline-block;
+    margin-right: 0.15rem;
+    color: inherit;
+}
+
+/* Modern card grid with hover effects */
+.cards-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--spacing-lg);
+    padding: var(--spacing-md) 0;
 }
 
 .card {
-    border: none;
-    border-radius: 12px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.07);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    margin-bottom: 1rem;
+    background: var(--bg-card);
+    border-radius: var(--card-radius);
+    box-shadow: var(--shadow-md);
+    overflow: hidden;
+    transition: all var(--transition-base);
+    border: 1px solid var(--border-color);
+    position: relative;
+    z-index: 1;
+}
+
+.card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, var(--primary-1), var(--accent-1));
+    opacity: 0;
+    transition: opacity var(--transition-base);
+    z-index: -1;
+    border-radius: var(--card-radius);
 }
 
 .card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+    transform: translateY(-4px) scale(1.02);
+    box-shadow: var(--shadow-lg);
+    border-color: transparent;
+}
+
+.card:hover::before {
+    opacity: 0.1;
 }
 
 .card-img-top {
-    border-radius: 12px 12px 0 0;
-    height: 150px;
+    width: 100%;
+    height: 220px;
     object-fit: cover;
+    transition: all var(--transition-base);
+    filter: brightness(1);
+}
+
+.card:hover .card-img-top {
+    transform: scale(1.05);
+    filter: brightness(1.1);
 }
 
 .card-body {
-    padding: 1.5rem;
+    padding: var(--spacing-lg);
 }
 
 .card-title {
-    font-size: 1.1rem;
+    margin: 0 0 var(--spacing-sm);
     font-weight: 600;
-    color: #495057;
-    margin-bottom: 0.5rem;
+    color: var(--text);
+    font-size: 1.25rem;
+    line-height: 1.4;
 }
 
-.btn-primary {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border: none;
-    border-radius: 8px;
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     padding: 0.75rem 1.5rem;
-    font-weight: 500;
-    transition: transform 0.2s ease;
+    border-radius: var(--btn-radius);
+    font-weight: 600;
+    text-align: center;
+    transition: all var(--transition-fast);
+    text-decoration: none;
+    border: 0;
+    cursor: pointer;
+    gap: var(--spacing-sm);
+    font-size: 0.95rem;
+    /* ensure pill appearance on all buttons */
+    border-radius: 999px;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary-1), var(--primary-2));
+    color: white;
+    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
 }
 
 .btn-primary:hover {
     transform: translateY(-1px);
-    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.35);
 }
 
 .btn-secondary {
-    background-color: #6c757d;
-    border: none;
-    border-radius: 8px;
-    padding: 0.5rem 1rem;
-    font-weight: 500;
+    background: var(--bg-alt);
+    color: var(--text);
+    border: 1px solid rgba(0,0,0,0.1);
 }
 
-.footer {
-    background-color: #343a40;
-    color: #adb5bd;
-    text-align: center;
-    padding: 1rem 0;
-    margin-top: 2rem;
+.btn-secondary:hover {
+    background: var(--bg);
+    border-color: var(--primary-1);
+    color: var(--primary-1);
 }
 
+/* Footer removed - styles cleaned up */
+
 .article-content {
-    background: white;
-    border-radius: 12px;
-    padding: 2rem;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.07);
-    margin-top: 1rem;
+    background: var(--bg);
+    border-radius: var(--card-radius);
+    padding: var(--spacing-xl);
+    margin-top: var(--spacing-lg);
+    box-shadow: var(--shadow-md);
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .article-content h1 {
-    color: #495057;
+    font-size: 2rem;
+    margin: var(--spacing-md) 0 var(--spacing-lg);
+    color: var(--text);
     font-weight: 700;
-    margin-bottom: 1rem;
-}
-
-.article-content p {
-    margin-bottom: 1rem;
-}
-
-.trix-content img {
-    width: 100%;
-    height: auto;
-    cursor: pointer;
-}
-
-.breadcrumb {
-    background-color: transparent;
-    padding: 0;
-    margin-bottom: 1rem;
-}
-
-.breadcrumb-item a {
-    color: #667eea;
-}
-
-/* Mobile optimizations */
-@media (max-width: 576px) {
-    .header h1 {
-        font-size: 1.25rem;
-    }
-
-    .card-body {
-        padding: 1rem;
-    }
-
-    .article-content {
-        background: none;
-        border-radius: 0;
-        box-shadow: none;
-        padding: 0.5rem;
-    }
-
-    .btn {
-        width: 100%;
-        margin-bottom: 0.5rem;
-    }
-}
-
-/* Admin specific */
-.admin-nav {
-    background-color: #f8f9fa;
-    border-radius: 8px;
-    padding: 1rem;
-    margin-bottom: 1rem;
-}
-
-.admin-nav a {
-    display: inline-block;
-    margin: 0.25rem;
-    padding: 0.5rem 1rem;
-    background-color: #667eea;
-    color: white;
-    text-decoration: none;
-    border-radius: 6px;
-    transition: background-color 0.3s ease;
+    line-height: 1.3;
+}
+
+.article-content p {
+    margin: 0 0 var(--spacing-md);
+    color: var(--text-light);
+    line-height: 1.7;
+}
+
+.trix-content img{max-width:100%;height:auto;cursor:pointer;border-radius:6px}
+
+.breadcrumb{background:transparent;padding:0;margin-bottom:1rem}
+.breadcrumb{
+    display:flex;
+    flex-wrap:wrap;
+    gap:0.5rem;
+    align-items:center;
+    background:transparent;
+    padding:0;
+    margin-bottom:1rem;
+}
+
+.breadcrumb-item{
+    list-style:none;
+}
+
+.breadcrumb-item a{
+    display:inline-block;
+    padding:0.4rem 0.8rem;
+    background: var(--bg-alt);
+    color: var(--text);
+    border-radius: 999px;
+    text-decoration:none;
+    font-weight:600;
+    transition: all var(--transition-fast);
+    border: 1px solid var(--border-color);
+}
+
+.breadcrumb-item a:hover{
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-sm);
+}
+
+.breadcrumb-item.active{
+    display:inline-block;
+    padding:0.45rem 1rem;
+    border-radius:999px;
+    background: linear-gradient(90deg, var(--primary-1), var(--accent-1));
+    color: #fff;
+    font-weight:700;
+    border: none;
+}
+
+/* small separator arrow */
+.breadcrumb-item + .breadcrumb-item::before{
+    content: '›';
+    margin: 0 0.35rem;
+    color: var(--text-light);
+}
+
+/* floats for image shortcodes */
+.float-left{float:left;margin:0 1rem 1rem 0;max-width:40%}
+.float-right{float:right;margin:0 0 1rem 1rem;max-width:40%}
+
+/* video responsive container */
+.video-player{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:8px;margin-bottom:1rem}
+.video-player iframe{width:100%;height:100%;border:0}
+
+/* admin navigation */
+.admin-nav{background:transparent;padding:.5rem 0;margin-bottom:1rem}
+.admin-nav a{display:inline-block;margin:.25rem;padding:.5rem .75rem;border-radius:6px;background:linear-gradient(135deg,var(--primary-1),var(--primary-2));color:#fff;text-decoration:none}
+
+/* Buttons full width on small screens */
+.btn-full{display:block;width:100%}
+
+/* small utilities */
+.text-muted{color:var(--muted)}
+
+/* Responsive layouts */
+@media (min-width: 576px) {
+    .container {
+        max-width: 540px;
+    }
+    .header h1 {
+        font-size: 1.75rem;
+    }
+}
+
+@media (min-width: 768px) {
+    .container {
+        max-width: 720px;
+    }
+    .cards-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .article-content {
+        padding: var(--spacing-xl);
+        margin-top: var(--spacing-xl);
+    }
+    .btn {
+        display: inline-flex;
+        width: auto;
+    }
+}
+
+@media (min-width: 992px) {
+    .container {
+        max-width: 960px;
+    }
+    .cards-grid {
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--spacing-xl);
+    }
+    .header {
+        padding: var(--spacing-lg) 0;
+    }
+}
+
+@media (min-width: 1200px) {
+    .container {
+        max-width: 1140px;
+    }
+    .article-content {
+        padding: calc(var(--spacing-xl) * 1.5);
+    }
+}
+
+/* Enhanced Trix editor */
+trix-editor {
+    min-height: 280px;
+    border-radius: var(--card-radius);
+    border: 1px solid rgba(0,0,0,0.1);
+    padding: var(--spacing-md);
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-base);
+    line-height: var(--line-height-base);
+    transition: border-color var(--transition-fast);
+}
+
+trix-editor:focus {
+    outline: none;
+    border-color: var(--primary-1);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+}
+
+/* Small screen optimizations */
+@media (max-width: 575.98px) {
+    .card-img-top {
+        height: 200px;
+    }
+    .btn {
+        width: 100%;
+        margin-bottom: var(--spacing-sm);
+    }
+    .article-content {
+        padding: var(--spacing-md);
+        border-radius: var(--card-radius);
+        margin-top: var(--spacing-md);
+    }
+    .nav-links {
+        gap: var(--spacing-xs);
+    }
+    .header h1 {
+        font-size: 1.25rem;
+    }
+}
+
+/* Modern utilities */
+.text-gradient {
+    background: linear-gradient(135deg, var(--primary-1), var(--primary-2));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.glassmorphism {
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.shadow-hover {
+    transition: box-shadow var(--transition-fast);
 }
 
-.admin-nav a:hover {
-    background-color: #5a6fd8;
+.shadow-hover:hover {
+    box-shadow: var(--shadow-lg);
 }

static/js/theme.js

@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Respect any early-applied theme (set inline in head) to avoid flicker
+    const initialTheme = document.documentElement.getAttribute('data-theme') || localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-theme', initialTheme);
+
+    // Avoid creating duplicate toggle if one already exists
+    if (document.querySelector('.theme-toggle')) return;
+
+    // Create and insert theme toggle button
+    const themeToggle = document.createElement('button');
+    themeToggle.className = 'theme-toggle';
+    themeToggle.setAttribute('aria-label', 'Toggle dark mode');
+
+    // Set initial accessible label/title/icon state
+    themeToggle.title = initialTheme === 'dark' ? 'Mode clair' : 'Mode sombre';
+
+    // Find the nav-links container and insert the button
+    const navLinks = document.querySelector('.nav-links');
+    if (navLinks) {
+        navLinks.appendChild(themeToggle);
+    }
+
+    // Toggle theme function
+    const toggleTheme = () => {
+        const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        
+        document.documentElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+        themeToggle.title = newTheme === 'dark' ? 'Mode clair' : 'Mode sombre';
+
+        // Add animation class
+        themeToggle.classList.add('theme-toggle-animation');
+        setTimeout(() => themeToggle.classList.remove('theme-toggle-animation'), 300);
+    };
+
+    // Add click event listener
+    themeToggle.addEventListener('click', toggleTheme);
+});

templates/admin_edit_article.html

@@ -1,97 +1,419 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <title>Éditer Article</title>
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.8/dist/trix.css">
-    <script type="text/javascript" src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script>
-    <style>
-        body { font-family: Arial, sans-serif; margin: 20px; }
-        form { max-width: 900px; margin:0 auto }
-        label { display: block; margin-top: 10px; }
-        input, select, button { width: 100%; padding: 10px; margin-top: 5px; box-sizing: border-box }
-        trix-editor { border: 1px solid #e9ecef; min-height: 300px; border-radius:8px }
-        .article-preview { background:#fff;padding:1rem;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.06);margin-top:1rem }
-    </style>
-</head>
-<body>
-    <h1>Éditer Article</h1>
-    <a href="{{ url_for('admin_articles') }}">Retour aux articles</a>
+{% extends "base.html" %}
+
+{% block title %}Éditer Article{% endblock %}
+
+{% block extra_head %}
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.8/dist/trix.css">
+<style>
+    /* Admin Editor Styles */
+    .admin-editor {
+        max-width: 1000px;
+        margin: 0 auto;
+        padding: var(--spacing-lg);
+        background: var(--bg-card);
+        border-radius: var(--card-radius);
+        box-shadow: var(--shadow-md);
+    }
+
+    .editor-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: var(--spacing-lg);
+        flex-wrap: wrap;
+        gap: var(--spacing-md);
+    }
+
+    .editor-title {
+        margin: 0;
+        font-size: 1.5rem;
+        font-weight: 600;
+        background: linear-gradient(135deg, var(--primary-1), var(--accent-1));
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .form-group {
+        margin-bottom: var(--spacing-md);
+    }
+
+    .form-group label {
+        display: block;
+        margin-bottom: var(--spacing-xs);
+        color: var(--text);
+        font-weight: 500;
+    }
+
+    .form-control {
+        width: 100%;
+        padding: 0.75rem 1rem;
+        border: 1px solid var(--border-color);
+        border-radius: var(--btn-radius);
+        background: var(--bg);
+        color: var(--text);
+        transition: all var(--transition-fast);
+    }
+
+    .form-control:focus {
+        outline: none;
+        border-color: var(--primary-1);
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    }
+
+    trix-editor {
+        min-height: 300px;
+        border: 1px solid var(--border-color);
+        border-radius: var(--btn-radius);
+        background: var(--bg);
+        color: var(--text);
+        padding: var(--spacing-md);
+        margin-bottom: var(--spacing-lg);
+    }
+
+    trix-editor:focus {
+        outline: none;
+        border-color: var(--primary-1);
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    }
+
+    .preview-section {
+        margin-top: var(--spacing-xl);
+        padding: var(--spacing-lg);
+        background: var(--bg-alt);
+        border-radius: var(--card-radius);
+    }
+
+    .preview-header {
+        margin-bottom: var(--spacing-md);
+        padding-bottom: var(--spacing-sm);
+        border-bottom: 1px solid var(--border-color);
+    }
+
+    .preview-content {
+        background: var(--bg);
+        padding: var(--spacing-lg);
+        border-radius: var(--card-radius);
+        box-shadow: var(--shadow-sm);
+    }
+
+    /* Custom file input */
+    .file-input-wrapper {
+        position: relative;
+    }
+
+    .file-input-wrapper input[type="file"] {
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+    }
+
+    .file-input-trigger {
+        display: block;
+        padding: 0.75rem 1rem;
+        border: 2px dashed var(--border-color);
+        border-radius: var(--btn-radius);
+        text-align: center;
+        color: var(--text-light);
+        transition: all var(--transition-fast);
+    }
+
+    .file-input-wrapper:hover .file-input-trigger {
+        border-color: var(--primary-1);
+        color: var(--primary-1);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="admin-editor">
+    <div class="editor-header">
+        <h1 class="editor-title">Éditer Article</h1>
+        <a href="{{ url_for('admin_articles') }}" class="btn btn-secondary">← Retour aux articles</a>
+    </div>
     <form method="post" enctype="multipart/form-data">
-        <label for="title">Titre:</label>
-        <input type="text" id="title" name="title" value="{{ article.title }}" required>
+        <div class="form-group">
+            <label for="title">Titre:</label>
+            <input type="text" class="form-control" id="title" name="title" value="{{ article.title }}" required>
+        </div>
 
-        <label for="category_id">Catégorie:</label>
-        <select id="category_id" name="category_id" required>
-            {% for category in article.category.subject.categories %}
-            <option value="{{ category.id }}" {% if category.id == article.category_id %}selected{% endif %}>{{ category.name }}</option>
-            {% endfor %}
-        </select>
+        <div class="form-group">
+            <label for="category_id">Catégorie:</label>
+            <select class="form-control" id="category_id" name="category_id" required>
+                {% for category in article.category.subject.categories %}
+                <option value="{{ category.id }}" {% if category.id == article.category_id %}selected{% endif %}>{{ category.name }}</option>
+                {% endfor %}
+            </select>
+        </div>
 
-        <label for="icon">Image (fichier image):</label>
-        <input type="file" id="icon" name="icon" accept="image/*">
+        <div class="form-group">
+            <label for="icon">Image:</label>
+            <div class="file-input-wrapper">
+                <div class="file-input-trigger">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="upload-icon">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                        <polyline points="17 8 12 3 7 8"/>
+                        <line x1="12" y1="3" x2="12" y2="15"/>
+                    </svg>
+                    <span>Glissez une image ou cliquez pour sélectionner</span>
+                </div>
+                <input type="file" id="icon" name="icon" accept="image/*">
+            </div>
+        </div>
 
-        <label for="youtube_url">Lien YouTube (optionnel) :</label>
-        <input type="url" id="youtube_url" name="youtube_url" placeholder="https://www.youtube.com/watch?v=..." value="{{ article.youtube_url or '' }}">
+        <div class="form-group">
+            <label for="youtube_url">Lien YouTube (optionnel) :</label>
+            <input type="url" class="form-control" id="youtube_url" name="youtube_url" 
+                   placeholder="https://www.youtube.com/watch?v=..." 
+                   value="{{ article.youtube_url or '' }}">
+        </div>
 
-        <label for="content">Contenu:</label>
-        <input id="content" type="hidden" name="content" value="{{ article.content | safe }}">
-        <trix-editor input="content"></trix-editor>
+        <div class="form-group">
+            <label for="content">Contenu:</label>
+            <input id="content" type="hidden" name="content" value="{{ article.content | safe }}">
+            <trix-editor input="content"></trix-editor>
+        </div>
 
-        <button type="submit">Enregistrer</button>
+        <div class="form-group">
+            <button type="submit" class="btn btn-primary">Enregistrer les modifications</button>
+        </div>
     </form>
 
-    <h3>Aperçu</h3>
-    <div id="editor-preview" class="article-preview"></div>
+    <div class="preview-section">
+        <div class="preview-header">
+            <h3>Aperçu en direct</h3>
+        </div>
+        <div id="editor-preview" class="preview-content"></div>
+    </div>
 
-    <script>
+</div>
+
+{% endblock %}
+
+{% block extra_scripts %}
+<script type="text/javascript" src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script>
+<script>
     // Configure Trix before init
-    document.addEventListener('trix-before-initialize', function(){
-        if (window.Trix && Trix.config && Trix.config.dompurify){
-            Trix.config.dompurify.ADD_TAGS = ["iframe","video","source","table","tr","td","th","img"];
-            Trix.config.dompurify.ADD_ATTR = ["src","controls","width","height","class","style","allowfullscreen"];
+    document.addEventListener('trix-before-initialize', function() {
+        if (window.Trix && Trix.config && Trix.config.dompurify) {
+            Trix.config.dompurify.ADD_TAGS = ["iframe", "video", "source", "table", "tr", "td", "th", "img"];
+            Trix.config.dompurify.ADD_ATTR = ["src", "controls", "width", "height", "class", "style", "allowfullscreen"];
         }
-        Trix.config.toolbar.getDefaultHTML = function(){
+        Trix.config.toolbar.getDefaultHTML = function() {
             return `
                 <div class="trix-button-row">
-                  <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" title="Gras">Gras</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" title="Italique">Italique</button>
-                    <button type="button" class="trix-button" data-trix-action="x-heading" title="Titre">H</button>
-                    <button type="button" class="trix-button" data-trix-action="x-quote" title="Citation">"</button>
-                  </span>
+                    <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
+                        <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" title="Gras">Gras</button>
+                        <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" title="Italique">Italique</button>
+                        <button type="button" class="trix-button" data-trix-action="x-heading" title="Titre">H</button>
+                        <button type="button" class="trix-button" data-trix-action="x-quote" title="Citation">"</button>
+                        <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" title="Lien">Lien</button>
+                    </span>
+                    <span class="trix-button-group">
+                        <button type="button" class="trix-button" data-trix-action="x-align-left" title="Aligner à gauche">←</button>
+                        <button type="button" class="trix-button" data-trix-action="x-align-right" title="Aligner à droite">→</button>
+                    </span>
                 </div>`;
         };
     });
 
-    function renderShortcodesForPreview(html){
-        if(!html) return '';
-        html = html.replace(/\[youtube:([^\]]+)\]/g, function(_, url){
-            try{ var parsed = new URL(url.trim()); var id=null; if(parsed.hostname.includes('youtu.be')) id = parsed.pathname.slice(1); else if(parsed.hostname.includes('youtube')) id = parsed.searchParams.get('v') || parsed.pathname.split('/').pop(); if(!id) return '<pre>'+url+'</pre>'; return '<div class="video-player"><iframe src="https://www.youtube.com/embed/'+id+'" allowfullscreen></iframe></div>'; }catch(e){return '<pre>'+url+'</pre>'}
+    function renderShortcodesForPreview(html) {
+        if (!html) return '';
+        html = html.replace(/\[youtube:([^\]]+)\]/g, function(_, url) {
+            try {
+                var parsed = new URL(url.trim());
+                var id = null;
+                if (parsed.hostname.includes('youtu.be')) id = parsed.pathname.slice(1);
+                else if (parsed.hostname.includes('youtube')) id = parsed.searchParams.get('v') || parsed.pathname.split('/').pop();
+                if (!id) return '<pre>' + url + '</pre>';
+                return '<div class="video-player"><iframe src="https://www.youtube.com/embed/' + id + '" allowfullscreen></iframe></div>';
+            } catch (e) {
+                return '<pre>' + url + '</pre>'
+            }
         });
-        html = html.replace(/\[image:([^\]|]+)(?:\|([^\]]+))?\]/g, function(_, url, opts){
-            var classes=''; var style=''; if(opts){ opts.split(/[|,]/).forEach(function(o){ o=o.trim(); if(/^(left|right|center)$/.test(o)){ if(o==='left') classes='float-left'; if(o==='right') classes='float-right'; if(o==='center') style='display:block;margin-left:auto;margin-right:auto'; } else if(/^width=/.test(o)){ style += (style?';':'') + 'width:' + o.split('=')[1]; } else if(/^height=/.test(o)){ style += (style?';':'') + 'height:' + o.split('=')[1]; } }); }
-            return '<img src="'+url.trim()+'" class="'+classes+'" style="'+style+'"/>';
+        html = html.replace(/\[image:([^\]|]+)(?:\|([^\]]+))?\]/g, function(_, url, opts) {
+            var classes = '';
+            var style = '';
+            if (opts) {
+                opts.split(/[|,]/).forEach(function(o) {
+                    o = o.trim();
+                    if (/^(left|right|center)$/.test(o)) {
+                        if (o === 'left') classes = 'float-left';
+                        if (o === 'right') classes = 'float-right';
+                        if (o === 'center') style = 'display:block;margin-left:auto;margin-right:auto';
+                    } else if (/^width=/.test(o)) {
+                        style += (style ? ';' : '') + 'width:' + o.split('=')[1];
+                    } else if (/^height=/.test(o)) {
+                        style += (style ? ';' : '') + 'height:' + o.split('=')[1];
+                    }
+                });
+            }
+            return '<img src="' + url.trim() + '" class="' + classes + '" style="' + style + '"/>';
         });
         return html;
     }
 
-    function uploadFileToServer(fileBlob, filename, attachment){
-        var formData = new FormData(); formData.append('file', fileBlob, filename);
-        fetch('/upload',{method:'POST',body:formData}).then(function(r){return r.json()}).then(function(data){ if(data.url) attachment.setAttributes({url: data.url}); }).catch(function(e){console.error('Upload failed',e)});
+    function uploadFileToServer(fileBlob, filename, attachment) {
+        var formData = new FormData();
+        formData.append('file', fileBlob, filename);
+        fetch('/upload', {
+            method: 'POST',
+            body: formData
+        }).then(function(r) {
+            return r.json()
+        }).then(function(data) {
+            if (data.url) attachment.setAttributes({
+                url: data.url
+            });
+        }).catch(function(e) {
+            console.error('Upload failed', e)
+        });
     }
 
-    document.addEventListener('trix-attachment-add', function(event){
-        var attachment = event.attachment; var file = attachment.file; if(!file) return; if(!file.type.startsWith('image/')){ uploadFileToServer(file,file.name,attachment); return; }
-        var choice = prompt("Redimensionner l'image ? Entrez largeur en px (ex:800) ou % (ex:80%). Laisser vide pour taille originale. Annuler pour ne pas uploader."); if(choice===null) return; if(!choice){ uploadFileToServer(file,file.name,attachment); return; }
-        var reader = new FileReader(); reader.onload = function(e){ var img=new Image(); img.onload=function(){ var origW=img.naturalWidth,origH=img.naturalHeight; var targetW=origW; var c=choice.toString().trim(); if(c.endsWith('%')){ var p=parseFloat(c.replace('%','')); if(!isNaN(p)) targetW=Math.round(origW*p/100);} else { var px=parseInt(c,10); if(!isNaN(px)) targetW=px;} if(targetW<=0||targetW===origW){ uploadFileToServer(file,file.name,attachment); return; } var scale=targetW/origW,targetH=Math.round(origH*scale); var canvas=document.createElement('canvas'); canvas.width=targetW; canvas.height=targetH; var ctx=canvas.getContext('2d'); ctx.drawImage(img,0,0,targetW,targetH); canvas.toBlob(function(blob){ uploadFileToServer(blob,file.name,attachment); }, file.type||'image/jpeg', 0.92); }; img.src=e.target.result; }; reader.readAsDataURL(file);
+    // File upload and image resize handling
+    document.addEventListener('trix-attachment-add', function(event) {
+        var attachment = event.attachment;
+        var file = attachment.file;
+        if (!file) return;
+        if (!file.type.startsWith('image/')) {
+            uploadFileToServer(file, file.name, attachment);
+            return;
+        }
+
+        // Create modal for image resize
+        const modal = document.createElement('div');
+        modal.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999;
+        `;
+        
+        const modalContent = document.createElement('div');
+        modalContent.style.cssText = `
+            background: var(--bg);
+            padding: 2rem;
+            border-radius: var(--card-radius);
+            box-shadow: var(--shadow-lg);
+            max-width: 400px;
+            width: 90%;
+        `;
+        
+        modalContent.innerHTML = `
+            <h3 style="margin-top:0">Redimensionner l'image ?</h3>
+            <p>Entrez la largeur souhaitée :</p>
+            <input type="text" placeholder="800px ou 80%" style="width:100%;padding:0.5rem;margin:1rem 0;border-radius:var(--btn-radius);border:1px solid var(--border-color)">
+            <div style="display:flex;gap:1rem;justify-content:flex-end">
+                <button class="btn btn-secondary cancel">Annuler</button>
+                <button class="btn btn-primary confirm">Confirmer</button>
+            </div>
+        `;
+        
+        modal.appendChild(modalContent);
+        document.body.appendChild(modal);
+        
+        const input = modalContent.querySelector('input');
+        const cancelBtn = modalContent.querySelector('.cancel');
+        const confirmBtn = modalContent.querySelector('.confirm');
+        
+        cancelBtn.onclick = () => {
+            document.body.removeChild(modal);
+        };
+        
+        confirmBtn.onclick = () => {
+            const choice = input.value;
+            document.body.removeChild(modal);
+            
+            if (!choice) {
+                uploadFileToServer(file, file.name, attachment);
+                return;
+            }
+
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const img = new Image();
+                img.onload = function() {
+                    const origW = img.naturalWidth,
+                        origH = img.naturalHeight;
+                    let targetW = origW;
+                    const c = choice.toString().trim();
+                    
+                    if (c.endsWith('%')) {
+                        const p = parseFloat(c.replace('%', ''));
+                        if (!isNaN(p)) targetW = Math.round(origW * p / 100);
+                    } else {
+                        const px = parseInt(c, 10);
+                        if (!isNaN(px)) targetW = px;
+                    }
+                    
+                    if (targetW <= 0 || targetW === origW) {
+                        uploadFileToServer(file, file.name, attachment);
+                        return;
+                    }
+                    
+                    const scale = targetW / origW,
+                        targetH = Math.round(origH * scale);
+                    const canvas = document.createElement('canvas');
+                    canvas.width = targetW;
+                    canvas.height = targetH;
+                    const ctx = canvas.getContext('2d');
+                    ctx.drawImage(img, 0, 0, targetW, targetH);
+                    canvas.toBlob(function(blob) {
+                        uploadFileToServer(blob, file.name, attachment);
+                    }, file.type || 'image/jpeg', 0.92);
+                };
+                img.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        };
+    });
+
+    // Handle image alignment
+    document.addEventListener('trix-action-invoke', function(event) {
+        var action = event.actionName || event.detail && event.detail.actionName;
+        if (action === 'x-align-left' || action === 'x-align-right') {
+            var target = event.target || event.detail && event.detail.target;
+            if (!target) return;
+            var editor = target.editor;
+            var selectedRange = editor.getSelectedRange();
+            var doc = editor.getDocument();
+            var attachments = doc.getAttachments();
+            attachments.forEach(function(att) {
+                var range = att.getRange();
+                if (selectedRange[0] <= range[0] && range[1] <= selectedRange[1])
+                    att.setAttribute('class', action === 'x-align-left' ? 'float-left' : 'float-right');
+            });
+        }
     });
 
-    document.addEventListener('trix-action-invoke', function(event){ var action = event.actionName || event.detail && event.detail.actionName; if(action==='x-align-left' || action==='x-align-right'){ var target=event.target||event.detail&&event.detail.target; if(!target) return; var editor = target.editor; var selectedRange = editor.getSelectedRange(); var doc = editor.getDocument(); var attachments = doc.getAttachments(); attachments.forEach(function(att){ var range = att.getRange(); if(selectedRange[0] <= range[0] && range[1] <= selectedRange[1]) att.setAttribute('class', action==='x-align-left'?'float-left':'float-right'); }); } });
+    // Live preview updates
+    function updatePreview() {
+        var contentInput = document.querySelector('input[name="content"]');
+        var preview = document.getElementById('editor-preview');
+        if (preview && contentInput) {
+            preview.innerHTML = renderShortcodesForPreview(contentInput.value);
+        }
+    }
 
-    document.addEventListener('trix-change', function(){ var contentInput = document.querySelector('input[name="content"]'); var preview = document.getElementById('editor-preview'); if(preview && contentInput) preview.innerHTML = renderShortcodesForPreview(contentInput.value); });
+    document.addEventListener('trix-change', updatePreview);
+    document.addEventListener('DOMContentLoaded', updatePreview);
 
-    document.addEventListener('DOMContentLoaded', function(){ var contentInput = document.querySelector('input[name="content"]'); var preview = document.getElementById('editor-preview'); if(preview && contentInput) preview.innerHTML = renderShortcodesForPreview(contentInput.value); });
-    </script>
-</body>
-</html>
+    // File input visual feedback
+    document.querySelector('.file-input-wrapper input[type="file"]').addEventListener('change', function(e) {
+        const trigger = this.parentElement.querySelector('.file-input-trigger');
+        if (this.files.length > 0) {
+            trigger.textContent = `Fichier sélectionné : ${this.files[0].name}`;
+        }
+    });
+</script>
+{% endblock %}

templates/base.html

@@ -2,18 +2,31 @@
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
+    <script>
+        // Apply saved theme as early as possible to avoid FOUC (flash of un-themed content)
+        (function(){
+            try {
+                var t = localStorage.getItem('theme');
+                if (t) document.documentElement.setAttribute('data-theme', t);
+            } catch(e) { /* ignore */ }
+        })();
+    </script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Mariam AI{% endblock %}</title>
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Custom CSS -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/animations.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     {% block extra_head %}{% endblock %}
 </head>
 <body>
-    <header class="header">
+    <header class="header glassmorphism">
         <div class="container">
-            <h1>Mariam AI</h1>
+            <div class="header-content">
+                <h1 class="text-gradient">Mariam AI</h1>
+            </div>
         </div>
     </header>
 
@@ -21,7 +34,15 @@
         <div class="container">
             <ul class="nav nav-links">
                 <li class="nav-item">
-                    <a class="nav-link" href="{{ url_for('home') }}">Accueil</a>
+                    <a class="nav-link" href="https://mariam-241.vercel.app" title="Aller vers mariam-241" rel="noopener" aria-label="Aller vers mariam-241">
+                        <!-- Home icon SVG -->
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+                            <path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V9.5z" />
+                        </svg>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for('home') }}">Retour</a>
                 </li>
                 {% if request.endpoint and 'admin' in request.endpoint %}
                 <li class="nav-item">
@@ -38,8 +59,11 @@
 
 
 
+    <!-- Footer removed per user request -->
+
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="{{ url_for('static', filename='js/theme.js') }}"></script>
     {% block extra_scripts %}{% endblock %}
 </body>
 </html>