89192

api/index.py

@@ -0,0 +1,948 @@
+# --- START OF index.py ---
+
+import os
+import logging
+import json
+from flask import Flask, Blueprint, render_template, request, redirect, url_for, flash, jsonify, session, current_app, send_file, Response
+from flask_sqlalchemy import SQLAlchemy
+from sqlalchemy.orm import DeclarativeBase
+from werkzeug.utils import secure_filename
+from werkzeug.security import check_password_hash, generate_password_hash
+from datetime import datetime
+from functools import wraps
+import requests
+from io import BytesIO
+import base64
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+
+# ---------------------------------------------------------------------------
+# Configuration (Hardcoded as requested)
+# ---------------------------------------------------------------------------
+
+# Database configuration
+SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL')
+
+# Session secret key
+SECRET_KEY = os.environ.get('SESSION_SECRET', 'dev_secret_key_change_in_production')
+if SECRET_KEY == 'dev_secret_key_change_in_production':
+    print("WARNING: Using default SECRET_KEY. Set SESSION_SECRET environment variable for production.")
+
+# Admin login credentials (simple authentication for single admin)
+ADMIN_USERNAME = os.environ.get('ADMIN_USERNAME', 'admin')
+ADMIN_PASSWORD = os.environ.get('ADMIN_PASSWORD', 'password')
+
+# Telegram configuration for feedback
+TELEGRAM_BOT_TOKEN = "7126991043:AAEzeKswNo6eO7oJA49Hxn_bsbzgzUoJ-6A"
+TELEGRAM_CHAT_ID = "-1002081124539"
+
+# Application host/port/debug
+DEBUG = os.environ.get('DEBUG', 'False') == 'True'
+HOST = '0.0.0.0'
+PORT = int(os.environ.get('PORT', 5000))
+
+# ---------------------------------------------------------------------------
+# Flask App Initialization and SQLAlchemy Setup
+# ---------------------------------------------------------------------------
+
+# Create base class for SQLAlchemy models
+class Base(DeclarativeBase):
+    pass
+
+# Initialize SQLAlchemy with the Base class
+db = SQLAlchemy(model_class=Base)
+
+# Create Flask application
+app = Flask(__name__)
+
+# Apply configuration
+app.config['SQLALCHEMY_DATABASE_URI'] = SQLALCHEMY_DATABASE_URI
+app.config['SECRET_KEY'] = SECRET_KEY
+app.config['ADMIN_USERNAME'] = ADMIN_USERNAME
+app.config['ADMIN_PASSWORD'] = ADMIN_PASSWORD
+app.config['TELEGRAM_BOT_TOKEN'] = TELEGRAM_BOT_TOKEN
+app.config['TELEGRAM_CHAT_ID'] = TELEGRAM_CHAT_ID
+app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+app.config["SQLALCHEMY_ENGINE_OPTIONS"] = {
+    "pool_recycle": 300,
+    "pool_pre_ping": True,
+}
+app.config['HOST'] = HOST
+app.config['PORT'] = PORT
+app.config['DEBUG'] = DEBUG
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
+
+# Initialize the app with SQLAlchemy
+db.init_app(app)
+
+# ---------------------------------------------------------------------------
+# Database Models
+# ---------------------------------------------------------------------------
+
+# Matiere (Subject) Model
+class Matiere(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    nom = db.Column(db.String(100), unique=True, nullable=False)
+    color_code = db.Column(db.String(7), nullable=False, default="#3498db")  # Add color code field for subject
+
+    # Relationships
+    sous_categories = db.relationship('SousCategorie', backref='matiere', lazy=True, cascade="all, delete-orphan")
+
+    def __repr__(self):
+        return f'<Matiere {self.nom}>'
+
+# SousCategorie (SubCategory) Model
+class SousCategorie(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    nom = db.Column(db.String(100), nullable=False)
+    matiere_id = db.Column(db.Integer, db.ForeignKey('matiere.id'), nullable=False)
+
+    # Enforce unique constraint on name within same matiere
+    __table_args__ = (db.UniqueConstraint('nom', 'matiere_id', name='_nom_matiere_uc'),)
+
+    # Relationships
+    textes = db.relationship('Texte', backref='sous_categorie', lazy=True, cascade="all, delete-orphan")
+
+    def __repr__(self):
+        return f'<SousCategorie {self.nom} (Matiere ID: {self.matiere_id})>'
+
+# ContentBlock model for the new block-based content
+class ContentBlock(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    texte_id = db.Column(db.Integer, db.ForeignKey('texte.id'), nullable=False)
+    title = db.Column(db.String(200), nullable=True)
+    content = db.Column(db.Text, nullable=False)
+    order = db.Column(db.Integer, nullable=False, default=0)
+    image_id = db.Column(db.Integer, db.ForeignKey('image.id'), nullable=True)
+    image_position = db.Column(db.String(10), nullable=True, default='left')  # 'left', 'right', 'top', 'bottom'
+    
+    # Relationship
+    image = db.relationship('Image', foreign_keys=[image_id])
+    
+    def __repr__(self):
+        return f'<ContentBlock {self.id} (Texte ID: {self.texte_id})>'
+
+# Texte (Text content) Model
+class Texte(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    titre = db.Column(db.String(200), nullable=False)
+    contenu = db.Column(db.Text, nullable=False)
+    sous_categorie_id = db.Column(db.Integer, db.ForeignKey('sous_categorie.id'), nullable=False)
+    created_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow, onupdate=datetime.utcnow)
+    
+    # Relationships
+    historiques = db.relationship('TexteHistorique', backref='texte', lazy=True, cascade="all, delete-orphan")
+    content_blocks = db.relationship('ContentBlock', backref='texte', lazy=True, cascade="all, delete-orphan", 
+                                   order_by="ContentBlock.order")
+
+    def __repr__(self):
+        return f'<Texte {self.titre} (SousCategorie ID: {self.sous_categorie_id})>'
+
+# Image Model for storing content images
+class Image(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    nom_fichier = db.Column(db.String(255))
+    mime_type = db.Column(db.String(100), nullable=False)
+    data = db.Column(db.LargeBinary, nullable=False)  # BLOB/BYTEA for image data
+    uploaded_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
+    
+    # Additional fields for image management
+    description = db.Column(db.String(255), nullable=True)
+    alt_text = db.Column(db.String(255), nullable=True)
+    
+    def __repr__(self):
+        return f'<Image {self.id} ({self.nom_fichier})>'
+
+# TexteHistorique (Text History) Model
+class TexteHistorique(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    texte_id = db.Column(db.Integer, db.ForeignKey('texte.id'), nullable=False)
+    contenu_precedent = db.Column(db.Text, nullable=False)
+    date_modification = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
+
+    def __repr__(self):
+        return f'<TexteHistorique {self.id} (Texte ID: {self.texte_id})>'
+
+# UserPreference Model to store user theme preferences
+class UserPreference(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.String(50), unique=True, nullable=False)  # Use session ID or similar for anonymous users
+    theme = db.Column(db.String(10), nullable=False, default='light')  # 'light' or 'dark'
+    created_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, nullable=False, default=datetime.utcnow, onupdate=datetime.utcnow)
+    
+    def __repr__(self):
+        return f'<UserPreference {self.id} (User ID: {self.user_id})>'
+
+# ---------------------------------------------------------------------------
+# Utility Functions
+# ---------------------------------------------------------------------------
+
+# Admin authentication decorator
+def admin_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if not session.get('admin_logged_in'):
+            flash('Veuillez vous connecter pour accéder à cette page.', 'warning')
+            return redirect(url_for('admin_bp.login'))
+        return f(*args, **kwargs)
+    return decorated_function
+
+# Admin login check
+def check_admin_credentials(username, password):
+    # Access config via current_app proxy
+    admin_username = current_app.config['ADMIN_USERNAME']
+    admin_password = current_app.config['ADMIN_PASSWORD']
+
+    return username == admin_username and password == admin_password
+
+# Send feedback to Telegram
+def send_telegram_feedback(message):
+    token = current_app.config.get('TELEGRAM_BOT_TOKEN')
+    chat_id = current_app.config.get('TELEGRAM_CHAT_ID')
+
+    if not token or not chat_id:
+        current_app.logger.error("Telegram bot token or chat ID not configured")
+        return False
+
+    api_url = f"https://api.telegram.org/bot{token}/sendMessage"
+    payload = {
+        "chat_id": chat_id,
+        "text": f"📝 Nouveau feedback:\n\n{message}",
+        "parse_mode": "HTML"
+    }
+
+    try:
+        response = requests.post(api_url, data=payload, timeout=10)
+        response.raise_for_status()
+        current_app.logger.info("Feedback sent to Telegram successfully")
+        return True
+    except requests.exceptions.RequestException as e:
+        current_app.logger.error(f"Error sending feedback to Telegram: {str(e)}")
+        if hasattr(e, 'response') and e.response is not None:
+             current_app.logger.error(f"Telegram API Response: {e.response.text}")
+        return False
+    except Exception as e:
+        current_app.logger.error(f"Unexpected exception while sending feedback to Telegram: {str(e)}")
+        return False
+
+# Get or create user preferences
+def get_user_preferences():
+    user_id = session.get('user_id')
+    if not user_id:
+        # Generate a unique ID for new users
+        user_id = str(datetime.utcnow().timestamp())
+        session['user_id'] = user_id
+    
+    user_pref = UserPreference.query.filter_by(user_id=user_id).first()
+    if not user_pref:
+        user_pref = UserPreference(user_id=user_id)
+        db.session.add(user_pref)
+        db.session.commit()
+    
+    return user_pref
+
+# Parse text content into blocks
+def parse_content_to_blocks(text_content):
+    # Simple parser that creates blocks based on paragraphs or headings
+    blocks = []
+    current_block = {"title": None, "content": ""}
+    
+    for line in text_content.split('\n'):
+        line = line.strip()
+        if not line:
+            # Empty line might indicate a block break
+            if current_block["content"]:
+                blocks.append(current_block)
+                current_block = {"title": None, "content": ""}
+            continue
+            
+        # Check if line might be a heading (simplistic approach)
+        if len(line) < 100 and not current_block["content"]:
+            current_block["title"] = line
+        else:
+            if current_block["content"]:
+                current_block["content"] += "\n" + line
+            else:
+                current_block["content"] = line
+    
+    # Add the last block if not empty
+    if current_block["content"]:
+        blocks.append(current_block)
+    
+    # If no blocks were created, create one with all content
+    if not blocks:
+        blocks.append({"title": None, "content": text_content})
+    
+    return blocks
+
+# ---------------------------------------------------------------------------
+# Blueprints Definition
+# ---------------------------------------------------------------------------
+main_bp = Blueprint('main_bp', __name__)
+admin_bp = Blueprint('admin_bp', __name__, url_prefix='/gestion')
+
+
+# ---------------------------------------------------------------------------
+# Main Routes
+# ---------------------------------------------------------------------------
+
+@main_bp.route('/')
+def index():
+    # Get user theme preference
+    user_pref = get_user_preferences()
+    
+    # Fetch all subjects (matieres)
+    matieres = Matiere.query.all()
+    
+    return render_template('index.html', matieres=matieres, theme=user_pref.theme)
+
+@main_bp.route('/get_sous_categories/<int:matiere_id>')
+def get_sous_categories(matiere_id):
+    sous_categories = SousCategorie.query.filter_by(matiere_id=matiere_id).all()
+    return jsonify([{'id': sc.id, 'nom': sc.nom} for sc in sous_categories])
+
+@main_bp.route('/get_textes/<int:sous_categorie_id>')
+def get_textes(sous_categorie_id):
+    textes = Texte.query.filter_by(sous_categorie_id=sous_categorie_id).all()
+    return jsonify([{'id': t.id, 'titre': t.titre} for t in textes])
+
+@main_bp.route('/get_texte/<int:texte_id>')
+def get_texte(texte_id):
+    texte = Texte.query.get_or_404(texte_id)
+    
+    # Get the subject color for theming
+    matiere = Matiere.query.join(SousCategorie).filter(SousCategorie.id == texte.sous_categorie_id).first()
+    color_code = matiere.color_code if matiere else "#3498db"
+    
+    # Check if the texte has content blocks
+    if texte.content_blocks:
+        blocks = []
+        for block in texte.content_blocks:
+            block_data = {
+                'id': block.id,
+                'title': block.title,
+                'content': block.content,
+                'order': block.order,
+                'image_position': block.image_position,
+                'image': None
+            }
+            
+            # Add image data if available
+            if block.image:
+                image_data = base64.b64encode(block.image.data).decode('utf-8')
+                block_data['image'] = {
+                    'id': block.image.id,
+                    'src': f"data:{block.image.mime_type};base64,{image_data}",
+                    'alt': block.image.alt_text or block.title or "Image illustration"
+                }
+                
+            blocks.append(block_data)
+    else:
+        # If no blocks exist yet, parse the content to create blocks
+        # This is useful for existing content migration
+        parsed_blocks = parse_content_to_blocks(texte.contenu)
+        blocks = []
+        for i, block_data in enumerate(parsed_blocks):
+            blocks.append({
+                'id': None,
+                'title': block_data['title'],
+                'content': block_data['content'],
+                'order': i,
+                'image_position': 'left',
+                'image': None
+            })
+    
+    return jsonify({
+        'id': texte.id,
+        'titre': texte.titre,
+        'contenu': texte.contenu,
+        'blocks': blocks,
+        'color_code': color_code
+    })
+
+@main_bp.route('/feedback', methods=['POST'])
+def submit_feedback():
+    message = request.form.get('message', '').strip()
+    if not message:
+        flash("Le message ne peut pas être vide.", "error")
+        return redirect(url_for('main_bp.index'))
+    
+    success = send_telegram_feedback(message)
+    if success:
+        flash("Merci pour votre feedback!", "success")
+    else:
+        flash("Une erreur s'est produite lors de l'envoi de votre feedback. Veuillez réessayer plus tard.", "error")
+    
+    return redirect(url_for('main_bp.index'))
+
+@main_bp.route('/set_theme', methods=['POST'])
+def set_theme():
+    theme = request.form.get('theme', 'light')
+    if theme not in ['light', 'dark']:
+        theme = 'light'
+    
+    user_pref = get_user_preferences()
+    user_pref.theme = theme
+    db.session.commit()
+    
+    return jsonify({'success': True, 'theme': theme})
+
+@main_bp.route('/image/<int:image_id>')
+def get_image(image_id):
+    image = Image.query.get_or_404(image_id)
+    return Response(image.data, mimetype=image.mime_type)
+
+# ---------------------------------------------------------------------------
+# Admin Routes
+# ---------------------------------------------------------------------------
+
+@admin_bp.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        username = request.form.get('username')
+        password = request.form.get('password')
+        
+        if check_admin_credentials(username, password):
+            session['admin_logged_in'] = True
+            flash('Connexion réussie !', 'success')
+            return redirect(url_for('admin_bp.dashboard'))
+        else:
+            flash('Nom d\'utilisateur ou mot de passe incorrect.', 'danger')
+    
+    return render_template('admin/login.html')
+
+@admin_bp.route('/logout')
+def logout():
+    session.pop('admin_logged_in', None)
+    flash('Vous avez été déconnecté.', 'info')
+    return redirect(url_for('admin_bp.login'))
+
+@admin_bp.route('/')
+@admin_required
+def dashboard():
+    # Count of each entity type for dashboard stats
+    stats = {
+        'matieres': Matiere.query.count(),
+        'sous_categories': SousCategorie.query.count(),
+        'textes': Texte.query.count(),
+        'images': Image.query.count()
+    }
+    
+    # Get recent texts for dashboard
+    recent_textes = Texte.query.order_by(Texte.updated_at.desc()).limit(5).all()
+    
+    return render_template('admin/dashboard.html', stats=stats, recent_textes=recent_textes)
+
+# Matières (Subjects) Management
+@admin_bp.route('/matieres', methods=['GET', 'POST'])
+@admin_required
+def matieres():
+    if request.method == 'POST':
+        action = request.form.get('action')
+        
+        if action == 'add':
+            nom = request.form.get('nom', '').strip()
+            color_code = request.form.get('color_code', '#3498db')
+            
+            if not nom:
+                flash('Le nom de la matière est requis.', 'danger')
+            else:
+                matiere = Matiere.query.filter_by(nom=nom).first()
+                if matiere:
+                    flash(f'La matière "{nom}" existe déjà.', 'warning')
+                else:
+                    new_matiere = Matiere(nom=nom, color_code=color_code)
+                    db.session.add(new_matiere)
+                    db.session.commit()
+                    flash(f'Matière "{nom}" ajoutée avec succès !', 'success')
+        
+        elif action == 'edit':
+            matiere_id = request.form.get('matiere_id')
+            nom = request.form.get('nom', '').strip()
+            color_code = request.form.get('color_code', '#3498db')
+            
+            if not matiere_id or not nom:
+                flash('Informations incomplètes pour la modification.', 'danger')
+            else:
+                matiere = Matiere.query.get(matiere_id)
+                if not matiere:
+                    flash('Matière non trouvée.', 'danger')
+                else:
+                    existing = Matiere.query.filter_by(nom=nom).first()
+                    if existing and existing.id != int(matiere_id):
+                        flash(f'Une autre matière avec le nom "{nom}" existe déjà.', 'warning')
+                    else:
+                        matiere.nom = nom
+                        matiere.color_code = color_code
+                        db.session.commit()
+                        flash(f'Matière "{nom}" modifiée avec succès !', 'success')
+        
+        elif action == 'delete':
+            matiere_id = request.form.get('matiere_id')
+            
+            if not matiere_id:
+                flash('ID de matière manquant pour la suppression.', 'danger')
+            else:
+                matiere = Matiere.query.get(matiere_id)
+                if not matiere:
+                    flash('Matière non trouvée.', 'danger')
+                else:
+                    nom = matiere.nom
+                    db.session.delete(matiere)
+                    db.session.commit()
+                    flash(f'Matière "{nom}" supprimée avec succès !', 'success')
+    
+    matieres = Matiere.query.all()
+    return render_template('admin/matieres.html', matieres=matieres)
+
+# Sous-Catégories (Subcategories) Management
+@admin_bp.route('/sous_categories', methods=['GET', 'POST'])
+@admin_required
+def sous_categories():
+    if request.method == 'POST':
+        action = request.form.get('action')
+        
+        if action == 'add':
+            nom = request.form.get('nom', '').strip()
+            matiere_id = request.form.get('matiere_id')
+            
+            if not nom or not matiere_id:
+                flash('Le nom et la matière sont requis.', 'danger')
+            else:
+                sous_categorie = SousCategorie.query.filter_by(nom=nom, matiere_id=matiere_id).first()
+                if sous_categorie:
+                    flash(f'La sous-catégorie "{nom}" existe déjà pour cette matière.', 'warning')
+                else:
+                    new_sous_categorie = SousCategorie(nom=nom, matiere_id=matiere_id)
+                    db.session.add(new_sous_categorie)
+                    db.session.commit()
+                    flash(f'Sous-catégorie "{nom}" ajoutée avec succès !', 'success')
+        
+        elif action == 'edit':
+            sous_categorie_id = request.form.get('sous_categorie_id')
+            nom = request.form.get('nom', '').strip()
+            matiere_id = request.form.get('matiere_id')
+            
+            if not sous_categorie_id or not nom or not matiere_id:
+                flash('Informations incomplètes pour la modification.', 'danger')
+            else:
+                sous_categorie = SousCategorie.query.get(sous_categorie_id)
+                if not sous_categorie:
+                    flash('Sous-catégorie non trouvée.', 'danger')
+                else:
+                    existing = SousCategorie.query.filter_by(nom=nom, matiere_id=matiere_id).first()
+                    if existing and existing.id != int(sous_categorie_id):
+                        flash(f'Une sous-catégorie avec le nom "{nom}" existe déjà pour cette matière.', 'warning')
+                    else:
+                        sous_categorie.nom = nom
+                        sous_categorie.matiere_id = matiere_id
+                        db.session.commit()
+                        flash(f'Sous-catégorie "{nom}" modifiée avec succès !', 'success')
+        
+        elif action == 'delete':
+            sous_categorie_id = request.form.get('sous_categorie_id')
+            
+            if not sous_categorie_id:
+                flash('ID de sous-catégorie manquant pour la suppression.', 'danger')
+            else:
+                sous_categorie = SousCategorie.query.get(sous_categorie_id)
+                if not sous_categorie:
+                    flash('Sous-catégorie non trouvée.', 'danger')
+                else:
+                    nom = sous_categorie.nom
+                    db.session.delete(sous_categorie)
+                    db.session.commit()
+                    flash(f'Sous-catégorie "{nom}" supprimée avec succès !', 'success')
+    
+    sous_categories = SousCategorie.query.join(Matiere).all()
+    matieres = Matiere.query.all()
+    return render_template('admin/sous_categories.html', sous_categories=sous_categories, matieres=matieres)
+
+# Textes (Content) Management
+@admin_bp.route('/textes', methods=['GET', 'POST'])
+@admin_required
+def textes():
+    if request.method == 'POST':
+        action = request.form.get('action')
+        
+        if action == 'add':
+            titre = request.form.get('titre', '').strip()
+            sous_categorie_id = request.form.get('sous_categorie_id')
+            contenu = request.form.get('contenu', '').strip()
+            
+            if not titre or not sous_categorie_id or not contenu:
+                flash('Tous les champs sont requis.', 'danger')
+            else:
+                new_texte = Texte(
+                    titre=titre,
+                    sous_categorie_id=sous_categorie_id,
+                    contenu=contenu
+                )
+                db.session.add(new_texte)
+                db.session.commit()
+                
+                # Parse content into blocks
+                blocks = parse_content_to_blocks(contenu)
+                for i, block_data in enumerate(blocks):
+                    new_block = ContentBlock(
+                        texte_id=new_texte.id,
+                        title=block_data['title'],
+                        content=block_data['content'],
+                        order=i
+                    )
+                    db.session.add(new_block)
+                
+                db.session.commit()
+                flash(f'Texte "{titre}" ajouté avec succès !', 'success')
+                return redirect(url_for('admin_bp.edit_texte', texte_id=new_texte.id))
+        
+        elif action == 'delete':
+            texte_id = request.form.get('texte_id')
+            
+            if not texte_id:
+                flash('ID de texte manquant pour la suppression.', 'danger')
+            else:
+                texte = Texte.query.get(texte_id)
+                if not texte:
+                    flash('Texte non trouvé.', 'danger')
+                else:
+                    titre = texte.titre
+                    db.session.delete(texte)
+                    db.session.commit()
+                    flash(f'Texte "{titre}" supprimé avec succès !', 'success')
+    
+    matieres = Matiere.query.all()
+    textes = Texte.query.join(SousCategorie).join(Matiere).order_by(Matiere.nom, SousCategorie.nom, Texte.titre).all()
+    
+    # Group texts by matiere and sous_categorie for easier display
+    grouped_textes = {}
+    for texte in textes:
+        matiere_id = texte.sous_categorie.matiere.id
+        if matiere_id not in grouped_textes:
+            grouped_textes[matiere_id] = {
+                'nom': texte.sous_categorie.matiere.nom,
+                'color': texte.sous_categorie.matiere.color_code,
+                'sous_categories': {}
+            }
+        
+        sous_cat_id = texte.sous_categorie.id
+        if sous_cat_id not in grouped_textes[matiere_id]['sous_categories']:
+            grouped_textes[matiere_id]['sous_categories'][sous_cat_id] = {
+                'nom': texte.sous_categorie.nom,
+                'textes': []
+            }
+        
+        grouped_textes[matiere_id]['sous_categories'][sous_cat_id]['textes'].append({
+            'id': texte.id,
+            'titre': texte.titre,
+            'updated_at': texte.updated_at
+        })
+    
+    sous_categories = SousCategorie.query.all()
+    return render_template('admin/textes.html', grouped_textes=grouped_textes, matieres=matieres, sous_categories=sous_categories)
+
+@admin_bp.route('/textes/edit/<int:texte_id>', methods=['GET', 'POST'])
+@admin_required
+def edit_texte(texte_id):
+    texte = Texte.query.get_or_404(texte_id)
+    
+    if request.method == 'POST':
+        action = request.form.get('action')
+        
+        if action == 'update_basic':
+            # Basic text info update
+            titre = request.form.get('titre', '').strip()
+            sous_categorie_id = request.form.get('sous_categorie_id')
+            
+            if not titre or not sous_categorie_id:
+                flash('Le titre et la sous-catégorie sont requis.', 'danger')
+            else:
+                # Save previous content for history
+                historique = TexteHistorique(
+                    texte_id=texte.id,
+                    contenu_precedent=texte.contenu
+                )
+                db.session.add(historique)
+                
+                texte.titre = titre
+                texte.sous_categorie_id = sous_categorie_id
+                
+                db.session.commit()
+                flash('Informations de base mises à jour avec succès !', 'success')
+        
+        elif action == 'update_blocks':
+            # Update content blocks
+            blocks_data = json.loads(request.form.get('blocks_data', '[]'))
+            
+            # Save previous content for history if changes were made
+            historique = TexteHistorique(
+                texte_id=texte.id,
+                contenu_precedent=texte.contenu
+            )
+            db.session.add(historique)
+            
+            # Update all blocks
+            # First, remove existing blocks
+            for block in texte.content_blocks:
+                db.session.delete(block)
+            
+            # Then create new blocks from the submitted data
+            new_content = []
+            for i, block_data in enumerate(blocks_data):
+                new_block = ContentBlock(
+                    texte_id=texte.id,
+                    title=block_data.get('title'),
+                    content=block_data.get('content', ''),
+                    order=i,
+                    image_position=block_data.get('image_position', 'left')
+                )
+                
+                # Set image if provided
+                image_id = block_data.get('image_id')
+                if image_id and image_id != 'null' and image_id != 'undefined':
+                    new_block.image_id = image_id
+                
+                db.session.add(new_block)
+                
+                # Append to full content for the main text field
+                if new_block.title:
+                    new_content.append(new_block.title)
+                new_content.append(new_block.content)
+            
+            # Update the main content field to match block content
+            texte.contenu = "\n\n".join(new_content)
+            
+            db.session.commit()
+            flash('Contenu mis à jour avec succès !', 'success')
+        
+        elif action == 'upload_image':
+            if 'image' not in request.files:
+                return jsonify({'success': False, 'error': 'Aucun fichier trouvé'})
+                
+            file = request.files['image']
+            if file.filename == '':
+                return jsonify({'success': False, 'error': 'Aucun fichier sélectionné'})
+            
+            # Check file type (accept only images)
+            allowed_mimetypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml']
+            if file.mimetype not in allowed_mimetypes:
+                return jsonify({'success': False, 'error': 'Type de fichier non autorisé'})
+            
+            # Read file data
+            file_data = file.read()
+            if not file_data:
+                return jsonify({'success': False, 'error': 'Fichier vide'})
+            
+            # Create new image record
+            new_image = Image(
+                nom_fichier=secure_filename(file.filename),
+                mime_type=file.mimetype,
+                data=file_data,
+                alt_text=request.form.get('alt_text', '')
+            )
+            db.session.add(new_image)
+            db.session.commit()
+            
+            # Return image details
+            image_data = base64.b64encode(new_image.data).decode('utf-8')
+            return jsonify({
+                'success': True,
+                'image': {
+                    'id': new_image.id,
+                    'filename': new_image.nom_fichier,
+                    'src': f"data:{new_image.mime_type};base64,{image_data}",
+                    'alt': new_image.alt_text or "Image illustration"
+                }
+            })
+    
+    # Get existing content blocks or create them if none exist
+    if not texte.content_blocks:
+        # Parse content into blocks
+        blocks = parse_content_to_blocks(texte.contenu)
+        for i, block_data in enumerate(blocks):
+            new_block = ContentBlock(
+                texte_id=texte.id,
+                title=block_data['title'],
+                content=block_data['content'],
+                order=i
+            )
+            db.session.add(new_block)
+        db.session.commit()
+        
+        # Reload the texte to get the new blocks
+        texte = Texte.query.get(texte_id)
+    
+    # Prepare block data for template
+    blocks = []
+    for block in texte.content_blocks:
+        block_data = {
+            'id': block.id,
+            'title': block.title,
+            'content': block.content,
+            'order': block.order,
+            'image_position': block.image_position,
+            'image': None
+        }
+        
+        # Add image data if available
+        if block.image:
+            image_data = base64.b64encode(block.image.data).decode('utf-8')
+            block_data['image'] = {
+                'id': block.image.id,
+                'src': f"data:{block.image.mime_type};base64,{image_data}",
+                'alt': block.image.alt_text or block.title or "Image illustration"
+            }
+            
+        blocks.append(block_data)
+    
+    # Get all images for selection
+    images = Image.query.order_by(Image.uploaded_at.desc()).all()
+    images_data = []
+    for image in images:
+        image_data = base64.b64encode(image.data).decode('utf-8')
+        images_data.append({
+            'id': image.id,
+            'filename': image.nom_fichier,
+            'src': f"data:{image.mime_type};base64,{image_data}",
+            'alt': image.alt_text or "Image illustration"
+        })
+    
+    sous_categories = SousCategorie.query.all()
+    return render_template('admin/edit_texte.html', 
+                         texte=texte, 
+                         blocks=blocks, 
+                         images=images_data,
+                         sous_categories=sous_categories)
+
+@admin_bp.route('/historique/<int:texte_id>')
+@admin_required
+def historique(texte_id):
+    texte = Texte.query.get_or_404(texte_id)
+    historiques = TexteHistorique.query.filter_by(texte_id=texte_id).order_by(TexteHistorique.date_modification.desc()).all()
+    
+    return render_template('admin/historique.html', texte=texte, historiques=historiques)
+
+@admin_bp.route('/images', methods=['GET', 'POST'])
+@admin_required
+def images():
+    if request.method == 'POST':
+        action = request.form.get('action')
+        
+        if action == 'upload':
+            if 'image' not in request.files:
+                flash('Aucun fichier trouvé.', 'danger')
+                return redirect(request.url)
+                
+            file = request.files['image']
+            if file.filename == '':
+                flash('Aucun fichier sélectionné.', 'danger')
+                return redirect(request.url)
+            
+            # Check file type (accept only images)
+            allowed_mimetypes = ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml']
+            if file.mimetype not in allowed_mimetypes:
+                flash('Type de fichier non autorisé.', 'danger')
+                return redirect(request.url)
+            
+            # Read file data
+            file_data = file.read()
+            if not file_data:
+                flash('Fichier vide.', 'danger')
+                return redirect(request.url)
+            
+            # Create new image record
+            alt_text = request.form.get('alt_text', '')
+            description = request.form.get('description', '')
+            
+            new_image = Image(
+                nom_fichier=secure_filename(file.filename),
+                mime_type=file.mimetype,
+                data=file_data,
+                alt_text=alt_text,
+                description=description
+            )
+            db.session.add(new_image)
+            db.session.commit()
+            
+            flash('Image téléchargée avec succès !', 'success')
+        
+        elif action == 'delete':
+            image_id = request.form.get('image_id')
+            if image_id:
+                image = Image.query.get(image_id)
+                if image:
+                    # Check if image is used in any content block
+                    usage_count = ContentBlock.query.filter_by(image_id=image.id).count()
+                    if usage_count > 0:
+                        flash(f'Cette image est utilisée dans {usage_count} blocs de contenu. Veuillez les modifier avant de supprimer l\'image.', 'warning')
+                    else:
+                        db.session.delete(image)
+                        db.session.commit()
+                        flash('Image supprimée avec succès !', 'success')
+                else:
+                    flash('Image non trouvée.', 'danger')
+            else:
+                flash('ID d\'image manquant.', 'danger')
+        
+        elif action == 'update':
+            image_id = request.form.get('image_id')
+            alt_text = request.form.get('alt_text', '')
+            description = request.form.get('description', '')
+            
+            if image_id:
+                image = Image.query.get(image_id)
+                if image:
+                    image.alt_text = alt_text
+                    image.description = description
+                    db.session.commit()
+                    flash('Informations de l\'image mises à jour avec succès !', 'success')
+                else:
+                    flash('Image non trouvée.', 'danger')
+            else:
+                flash('ID d\'image manquant.', 'danger')
+    
+    # Get all images
+    images = Image.query.order_by(Image.uploaded_at.desc()).all()
+    images_data = []
+    for image in images:
+        image_data = base64.b64encode(image.data).decode('utf-8')
+        images_data.append({
+            'id': image.id,
+            'filename': image.nom_fichier,
+            'description': image.description,
+            'alt_text': image.alt_text,
+            'uploaded_at': image.uploaded_at,
+            'src': f"data:{image.mime_type};base64,{image_data}"
+        })
+    
+    return render_template('admin/images.html', images=images_data)
+
+# ---------------------------------------------------------------------------
+# Register blueprints and setup database
+# ---------------------------------------------------------------------------
+
+app.register_blueprint(main_bp)
+app.register_blueprint(admin_bp)
+
+# Create tables if they don't exist
+with app.app_context():
+    db.create_all()
+
+# Application entry point
+@app.route('/')
+def index():
+    return redirect(url_for('main_bp.index'))
+
+# ---------------------------------------------------------------------------
+# Serve the app - This is only used when running locally
+# ---------------------------------------------------------------------------
+
+if __name__ == '__main__':
+    app.run(host=HOST, port=PORT, debug=DEBUG)
+    
+# For Vercel serverless function
+def app_handler(environ, start_response):
+    return app(environ, start_response)

api/static/css/style.css

@@ -0,0 +1,683 @@
+/* Base Styles & Theme Variables */
+:root {
+    /* Light theme */
+    --background-color: #f8f9fa;
+    --text-color: #212529;
+    --primary-color: #3498db;
+    --secondary-color: #2ecc71;
+    --accent-color: #e74c3c;
+    --muted-color: #95a5a6;
+    --border-color: #dee2e6;
+    --card-bg: #ffffff;
+    --header-bg: #ffffff;
+    --footer-bg: #f1f1f1;
+    --shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    --hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+    --block-bg: #f8f9fa;
+    --block-border: 1px solid #dee2e6;
+    --input-bg: #ffffff;
+    --btn-primary-bg: var(--primary-color);
+    --btn-primary-text: #ffffff;
+    --btn-secondary-bg: #6c757d;
+    --btn-secondary-text: #ffffff;
+    --modal-bg: #ffffff;
+}
+
+[data-theme="dark"] {
+    /* Dark theme */
+    --background-color: #121212;
+    --text-color: #e0e0e0;
+    --primary-color: #3498db;
+    --secondary-color: #2ecc71;
+    --accent-color: #e74c3c;
+    --muted-color: #95a5a6;
+    --border-color: #333333;
+    --card-bg: #1e1e1e;
+    --header-bg: #1a1a1a;
+    --footer-bg: #1a1a1a;
+    --shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+    --hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    --block-bg: #1e1e1e;
+    --block-border: 1px solid #333333;
+    --input-bg: #2c2c2c;
+    --btn-primary-bg: var(--primary-color);
+    --btn-primary-text: #ffffff;
+    --btn-secondary-bg: #555555;
+    --btn-secondary-text: #ffffff;
+    --modal-bg: #1e1e1e;
+}
+
+/* General Styles */
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-family: 'Roboto', 'Segoe UI', 'Arial', sans-serif;
+    line-height: 1.6;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+a:hover {
+    color: #2980b9;
+    text-decoration: underline;
+}
+
+/* Header Styles */
+.main-header {
+    background-color: var(--header-bg);
+    padding: 1rem 0;
+    box-shadow: var(--shadow);
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.site-title {
+    font-size: 1.8rem;
+    font-weight: bold;
+    margin: 0;
+}
+
+.site-title a {
+    color: var(--text-color);
+    text-decoration: none;
+}
+
+/* Theme Toggle */
+.theme-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-color);
+    font-size: 1.5rem;
+    padding: 0.5rem;
+    transition: color 0.3s ease, transform 0.3s ease;
+}
+
+.theme-toggle:hover {
+    color: var(--primary-color);
+    transform: rotate(15deg);
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    padding: 2rem 0;
+}
+
+/* Subject Selection Cards */
+.subject-card {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow);
+    transition: box-shadow 0.3s ease, transform 0.3s ease;
+    cursor: pointer;
+}
+
+.subject-card:hover {
+    box-shadow: var(--hover-shadow);
+    transform: translateY(-5px);
+}
+
+.subject-card h3 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    color: var(--text-color);
+}
+
+/* Subject Color-Coding */
+.subject-indicator {
+    width: 100%;
+    height: 8px;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+}
+
+/* Content Blocks Styling */
+.content-block {
+    background-color: var(--block-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    box-shadow: var(--shadow);
+    border: var(--block-border);
+    transition: box-shadow 0.3s ease;
+    overflow: hidden;
+}
+
+.content-block:hover {
+    box-shadow: var(--hover-shadow);
+}
+
+.content-block-title {
+    font-size: 1.4rem;
+    font-weight: bold;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: var(--text-color);
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--primary-color);
+}
+
+.content-block-content {
+    line-height: 1.7;
+}
+
+/* Image positioning styles */
+.block-with-image {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-start;
+}
+
+.block-with-image.image-left {
+    flex-direction: row;
+}
+
+.block-with-image.image-right {
+    flex-direction: row-reverse;
+}
+
+.block-with-image.image-top {
+    flex-direction: column;
+}
+
+.block-image-container {
+    flex: 0 0 auto;
+    max-width: 30%;
+    margin-bottom: 1rem;
+}
+
+.block-with-image.image-top .block-image-container {
+    max-width: 100%;
+    margin-bottom: 1.5rem;
+}
+
+.block-image {
+    width: 100%;
+    height: auto;
+    border-radius: 6px;
+    box-shadow: var(--shadow);
+}
+
+.block-content-container {
+    flex: 1;
+}
+
+@media (max-width: 768px) {
+    .block-with-image {
+        flex-direction: column !important;
+    }
+    
+    .block-image-container {
+        max-width: 100%;
+        margin-bottom: 1.5rem;
+    }
+}
+
+/* Category Selection UI */
+.selection-container {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    box-shadow: var(--shadow);
+}
+
+.selection-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.selection-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.selection-item {
+    padding: 0.5rem 0.8rem;
+    margin-bottom: 0.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.selection-item:hover {
+    background-color: rgba(52, 152, 219, 0.1);
+}
+
+.selection-item.active {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+/* Content Viewer */
+.content-viewer {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    margin-bottom: 2rem;
+}
+
+.content-title {
+    font-size: 2rem;
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--primary-color);
+}
+
+/* Buttons */
+.btn {
+    display: inline-block;
+    font-weight: 500;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    user-select: none;
+    border: 1px solid transparent;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: 0.25rem;
+    transition: all 0.15s ease-in-out;
+    cursor: pointer;
+}
+
+.btn-primary {
+    background-color: var(--btn-primary-bg);
+    color: var(--btn-primary-text);
+}
+
+.btn-primary:hover {
+    background-color: #2980b9;
+    color: white;
+}
+
+.btn-secondary {
+    background-color: var(--btn-secondary-bg);
+    color: var(--btn-secondary-text);
+}
+
+.btn-secondary:hover {
+    background-color: #5a6268;
+    color: white;
+}
+
+/* Form Elements */
+input, select, textarea {
+    background-color: var(--input-bg);
+    color: var(--text-color);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 0.75rem 1rem;
+    width: 100%;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+input:focus, select:focus, textarea:focus {
+    border-color: var(--primary-color);
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+/* Footer */
+.main-footer {
+    background-color: var(--footer-bg);
+    padding: 2rem 0;
+    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
+    margin-top: auto;
+}
+
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.footer-links {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    gap: 1.5rem;
+}
+
+.feedback-form {
+    margin-top: 1rem;
+}
+
+.feedback-title {
+    font-size: 1.2rem;
+    margin-bottom: 0.75rem;
+}
+
+/* Admin specific styles */
+.admin-container {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    margin-bottom: 2rem;
+}
+
+.admin-title {
+    margin-top: 0;
+    margin-bottom: 1.5rem;
+    font-size: 1.8rem;
+    color: var(--text-color);
+    border-bottom: 2px solid var(--primary-color);
+    padding-bottom: 0.5rem;
+}
+
+.admin-sidebar {
+    background-color: var(--block-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    box-shadow: var(--shadow);
+}
+
+.admin-nav {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.admin-nav-item {
+    margin-bottom: 0.5rem;
+}
+
+.admin-nav-link {
+    display: block;
+    padding: 0.75rem 1rem;
+    border-radius: 4px;
+    color: var(--text-color);
+    text-decoration: none;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.admin-nav-link:hover, .admin-nav-link.active {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.admin-nav-link i {
+    margin-right: 0.5rem;
+    width: 20px;
+    text-align: center;
+}
+
+.admin-card {
+    background-color: var(--block-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow);
+    border-left: 4px solid var(--primary-color);
+}
+
+.admin-card-title {
+    font-size: 1.2rem;
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: var(--text-color);
+}
+
+.admin-stat {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    color: var(--primary-color);
+}
+
+/* Editor styles */
+.editor-container {
+    background-color: var(--block-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    box-shadow: var(--shadow);
+}
+
+.block-editor {
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow);
+    border: var(--block-border);
+    position: relative;
+}
+
+.block-editor-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.block-editor-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.block-editor-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.block-handle {
+    cursor: move;
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background-color: var(--border-color);
+    border-radius: 4px;
+}
+
+.image-preview {
+    max-width: 100%;
+    height: auto;
+    margin-top: 1rem;
+    border-radius: 6px;
+    box-shadow: var(--shadow);
+}
+
+.image-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.gallery-item {
+    position: relative;
+    border-radius: 6px;
+    overflow: hidden;
+    box-shadow: var(--shadow);
+    cursor: pointer;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.gallery-item:hover {
+    transform: scale(1.05);
+    box-shadow: var(--hover-shadow);
+}
+
+.gallery-image {
+    width: 100%;
+    height: 120px;
+    object-fit: cover;
+    display: block;
+}
+
+.gallery-image-select {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Login screen */
+.login-container {
+    max-width: 400px;
+    margin: 3rem auto;
+    background-color: var(--card-bg);
+    border-radius: 8px;
+    padding: 2rem;
+    box-shadow: var(--shadow);
+}
+
+.login-logo {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.login-title {
+    font-size: 1.8rem;
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+/* Responsive design adjustments */
+@media (max-width: 992px) {
+    .container {
+        max-width: 100%;
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .subject-card {
+        padding: 1rem;
+    }
+    
+    .content-viewer {
+        padding: 1.5rem;
+    }
+    
+    .admin-container {
+        padding: 1.5rem;
+    }
+    
+    .content-title {
+        font-size: 1.6rem;
+    }
+}
+
+/* Animation keyframes */
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes slideInUp {
+    from {
+        transform: translateY(50px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.slide-in-up {
+    animation: slideInUp 0.5s ease-out;
+}
+
+/* Utility classes */
+.text-center {
+    text-align: center;
+}
+
+.mb-1 { margin-bottom: 0.5rem; }
+.mb-2 { margin-bottom: 1rem; }
+.mb-3 { margin-bottom: 1.5rem; }
+.mb-4 { margin-bottom: 2rem; }
+
+.mt-1 { margin-top: 0.5rem; }
+.mt-2 { margin-top: 1rem; }
+.mt-3 { margin-top: 1.5rem; }
+.mt-4 { margin-top: 2rem; }
+
+.alert {
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 4px;
+}
+
+.alert-success {
+    background-color: rgba(46, 204, 113, 0.2);
+    color: #2ecc71;
+    border: 1px solid rgba(46, 204, 113, 0.3);
+}
+
+.alert-danger {
+    background-color: rgba(231, 76, 60, 0.2);
+    color: #e74c3c;
+    border: 1px solid rgba(231, 76, 60, 0.3);
+}
+
+.alert-warning {
+    background-color: rgba(241, 196, 15, 0.2);
+    color: #f1c40f;
+    border: 1px solid rgba(241, 196, 15, 0.3);
+}
+
+.alert-info {
+    background-color: rgba(52, 152, 219, 0.2);
+    color: #3498db;
+    border: 1px solid rgba(52, 152, 219, 0.3);
+}

api/static/js/admin.js

@@ -0,0 +1,676 @@
+// Admin JavaScript for the backend management interface
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize theme
+    initTheme();
+    
+    // Setup dashboard functionality
+    setupDashboardCards();
+    
+    // Setup admin forms
+    setupMatiereForm();
+    setupSousCategorieForm();
+    setupTexteForm();
+    
+    // Setup content block editor
+    setupContentBlockEditor();
+    
+    // Setup image management
+    setupImageUploader();
+    setupImageGallery();
+    
+    // Setup theme toggle
+    setupThemeToggle();
+});
+
+// Initialize theme based on user preference
+function initTheme() {
+    const userPreference = localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-theme', userPreference);
+    
+    // Update theme icon
+    updateThemeIcon(userPreference);
+}
+
+// Setup theme toggle functionality
+function setupThemeToggle() {
+    const themeToggle = document.getElementById('theme-toggle');
+    if (!themeToggle) return;
+    
+    themeToggle.addEventListener('click', function() {
+        const currentTheme = document.documentElement.getAttribute('data-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        
+        // Update theme attribute
+        document.documentElement.setAttribute('data-theme', newTheme);
+        
+        // Save preference to localStorage
+        localStorage.setItem('theme', newTheme);
+        
+        // Update icon
+        updateThemeIcon(newTheme);
+        
+        // Send theme preference to server
+        saveThemePreference(newTheme);
+    });
+}
+
+// Update the theme toggle icon based on current theme
+function updateThemeIcon(theme) {
+    const themeToggle = document.getElementById('theme-toggle');
+    if (!themeToggle) return;
+    
+    // Update icon based on theme
+    if (theme === 'dark') {
+        themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+        themeToggle.setAttribute('title', 'Activer le mode clair');
+    } else {
+        themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
+        themeToggle.setAttribute('title', 'Activer le mode sombre');
+    }
+}
+
+// Save theme preference to server
+function saveThemePreference(theme) {
+    const formData = new FormData();
+    formData.append('theme', theme);
+    
+    fetch('/set_theme', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log('Theme preference saved:', data);
+    })
+    .catch(error => {
+        console.error('Error saving theme preference:', error);
+    });
+}
+
+// Setup dashboard cards with hover effects
+function setupDashboardCards() {
+    const dashboardCards = document.querySelectorAll('.admin-card');
+    
+    dashboardCards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-5px)';
+            this.style.boxShadow = 'var(--hover-shadow)';
+            this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0)';
+            this.style.boxShadow = 'var(--shadow)';
+        });
+    });
+}
+
+// Setup matiere form functionality
+function setupMatiereForm() {
+    // Show edit form when edit button is clicked
+    const editButtons = document.querySelectorAll('.edit-matiere-btn');
+    editButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const matiereId = this.getAttribute('data-id');
+            const matiereName = this.getAttribute('data-name');
+            const matiereColor = this.getAttribute('data-color');
+            
+            const editForm = document.getElementById('edit-matiere-form');
+            if (editForm) {
+                const idInput = editForm.querySelector('input[name="matiere_id"]');
+                const nameInput = editForm.querySelector('input[name="nom"]');
+                const colorInput = editForm.querySelector('input[name="color_code"]');
+                
+                idInput.value = matiereId;
+                nameInput.value = matiereName;
+                colorInput.value = matiereColor;
+                
+                // Show the edit form
+                document.getElementById('add-matiere-section').classList.add('d-none');
+                document.getElementById('edit-matiere-section').classList.remove('d-none');
+                
+                // Scroll to edit form
+                editForm.scrollIntoView({ behavior: 'smooth' });
+            }
+        });
+    });
+    
+    // Cancel edit button
+    const cancelEditButton = document.getElementById('cancel-edit-matiere');
+    if (cancelEditButton) {
+        cancelEditButton.addEventListener('click', function(e) {
+            e.preventDefault();
+            document.getElementById('add-matiere-section').classList.remove('d-none');
+            document.getElementById('edit-matiere-section').classList.add('d-none');
+        });
+    }
+    
+    // Color picker preview
+    const colorPickers = document.querySelectorAll('input[type="color"]');
+    colorPickers.forEach(picker => {
+        picker.addEventListener('input', function() {
+            // Find adjacent preview element or create one
+            let preview = this.nextElementSibling;
+            if (!preview || !preview.classList.contains('color-preview')) {
+                preview = document.createElement('span');
+                preview.className = 'color-preview';
+                preview.style.display = 'inline-block';
+                preview.style.width = '24px';
+                preview.style.height = '24px';
+                preview.style.borderRadius = '50%';
+                preview.style.marginLeft = '10px';
+                this.parentNode.insertBefore(preview, this.nextSibling);
+            }
+            
+            preview.style.backgroundColor = this.value;
+        });
+        
+        // Trigger once to initialize
+        const event = new Event('input');
+        picker.dispatchEvent(event);
+    });
+}
+
+// Setup sous categorie form functionality
+function setupSousCategorieForm() {
+    // Show edit form when edit button is clicked
+    const editButtons = document.querySelectorAll('.edit-sous-categorie-btn');
+    editButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const sousCategorieId = this.getAttribute('data-id');
+            const sousCategorieName = this.getAttribute('data-name');
+            const matiereId = this.getAttribute('data-matiere-id');
+            
+            const editForm = document.getElementById('edit-sous-categorie-form');
+            if (editForm) {
+                const idInput = editForm.querySelector('input[name="sous_categorie_id"]');
+                const nameInput = editForm.querySelector('input[name="nom"]');
+                const matiereSelect = editForm.querySelector('select[name="matiere_id"]');
+                
+                idInput.value = sousCategorieId;
+                nameInput.value = sousCategorieName;
+                matiereSelect.value = matiereId;
+                
+                // Show the edit form
+                document.getElementById('add-sous-categorie-section').classList.add('d-none');
+                document.getElementById('edit-sous-categorie-section').classList.remove('d-none');
+                
+                // Scroll to edit form
+                editForm.scrollIntoView({ behavior: 'smooth' });
+            }
+        });
+    });
+    
+    // Cancel edit button
+    const cancelEditButton = document.getElementById('cancel-edit-sous-categorie');
+    if (cancelEditButton) {
+        cancelEditButton.addEventListener('click', function(e) {
+            e.preventDefault();
+            document.getElementById('add-sous-categorie-section').classList.remove('d-none');
+            document.getElementById('edit-sous-categorie-section').classList.add('d-none');
+        });
+    }
+    
+    // Matiere select filter
+    const matiereFilterSelect = document.getElementById('matiere-filter');
+    if (matiereFilterSelect) {
+        matiereFilterSelect.addEventListener('change', function() {
+            const selectedMatiereId = this.value;
+            const sousCategorieRows = document.querySelectorAll('.sous-categorie-row');
+            
+            sousCategorieRows.forEach(row => {
+                if (selectedMatiereId === '' || row.getAttribute('data-matiere-id') === selectedMatiereId) {
+                    row.style.display = '';
+                } else {
+                    row.style.display = 'none';
+                }
+            });
+        });
+    }
+}
+
+// Setup texte form functionality
+function setupTexteForm() {
+    // Matiere select change - populate sous-categories
+    const matiereSelect = document.getElementById('matiere-select');
+    if (matiereSelect) {
+        matiereSelect.addEventListener('change', function() {
+            const matiereId = this.value;
+            const sousCategorieSelect = document.getElementById('sous-categorie-select');
+            
+            if (matiereId && sousCategorieSelect) {
+                // Clear current options
+                sousCategorieSelect.innerHTML = '<option value="">Sélectionnez une sous-catégorie</option>';
+                
+                // Fetch sous-categories for the selected matiere
+                fetch(`/get_sous_categories/${matiereId}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        data.forEach(sousCategorie => {
+                            const option = document.createElement('option');
+                            option.value = sousCategorie.id;
+                            option.textContent = sousCategorie.nom;
+                            sousCategorieSelect.appendChild(option);
+                        });
+                    })
+                    .catch(error => {
+                        console.error('Error loading sous-categories:', error);
+                    });
+            }
+        });
+    }
+}
+
+// Setup content block editor
+function setupContentBlockEditor() {
+    const blocksContainer = document.getElementById('blocks-container');
+    const addBlockButton = document.getElementById('add-block-button');
+    const saveBlocksButton = document.getElementById('save-blocks-button');
+    
+    if (!blocksContainer) return;
+    
+    // Add new block
+    if (addBlockButton) {
+        addBlockButton.addEventListener('click', function() {
+            addContentBlock();
+        });
+    }
+    
+    // Make blocks sortable
+    if (window.Sortable) {
+        new Sortable(blocksContainer, {
+            animation: 150,
+            handle: '.block-handle',
+            ghostClass: 'block-ghost',
+            onEnd: function() {
+                // Update order numbers
+                updateBlockOrder();
+            }
+        });
+    }
+    
+    // Save blocks
+    if (saveBlocksButton) {
+        saveBlocksButton.addEventListener('click', function() {
+            saveContentBlocks();
+        });
+    }
+    
+    // Add event listeners for existing blocks
+    setupExistingBlockControls();
+}
+
+// Setup controls for existing blocks
+function setupExistingBlockControls() {
+    // Setup delete buttons
+    const deleteButtons = document.querySelectorAll('.delete-block-btn');
+    deleteButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            if (confirm('Êtes-vous sûr de vouloir supprimer ce bloc ?')) {
+                const blockEditor = this.closest('.block-editor');
+                blockEditor.remove();
+                updateBlockOrder();
+            }
+        });
+    });
+    
+    // Setup image position selects
+    const positionSelects = document.querySelectorAll('.image-position-select');
+    positionSelects.forEach(select => {
+        select.addEventListener('change', function() {
+            updateBlockImagePreview(this.closest('.block-editor'));
+        });
+    });
+    
+    // Setup image selection buttons
+    const imageSelectButtons = document.querySelectorAll('.select-image-btn');
+    imageSelectButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const blockEditor = this.closest('.block-editor');
+            const galleryModal = document.getElementById('image-gallery-modal');
+            
+            if (galleryModal) {
+                // Set current block ID as data attribute for the modal
+                galleryModal.setAttribute('data-target-block', blockEditor.getAttribute('data-block-id'));
+                
+                // Show the modal
+                const modal = new bootstrap.Modal(galleryModal);
+                modal.show();
+            }
+        });
+    });
+    
+    // Setup image remove buttons
+    const removeImageButtons = document.querySelectorAll('.remove-image-btn');
+    removeImageButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const blockEditor = this.closest('.block-editor');
+            const imageIdInput = blockEditor.querySelector('.block-image-id');
+            const imagePreview = blockEditor.querySelector('.image-preview');
+            
+            if (imageIdInput) {
+                imageIdInput.value = '';
+            }
+            
+            if (imagePreview) {
+                imagePreview.src = '';
+                imagePreview.style.display = 'none';
+            }
+            
+            // Hide remove button
+            this.style.display = 'none';
+            
+            // Show select button
+            const selectButton = blockEditor.querySelector('.select-image-btn');
+            if (selectButton) {
+                selectButton.style.display = 'inline-block';
+            }
+        });
+    });
+}
+
+// Add a new content block to the editor
+function addContentBlock(data = null) {
+    const blocksContainer = document.getElementById('blocks-container');
+    if (!blocksContainer) return;
+    
+    // Generate a unique ID for the block
+    const blockId = 'block-' + Date.now();
+    
+    // Create block HTML
+    const blockHtml = `
+        <div class="block-editor" data-block-id="${blockId}">
+            <div class="block-editor-header">
+                <div class="d-flex align-items-center">
+                    <span class="block-handle"><i class="fas fa-grip-vertical"></i></span>
+                    <h3 class="block-editor-title">Bloc #${blocksContainer.children.length + 1}</h3>
+                </div>
+                <div class="block-editor-actions">
+                    <button type="button" class="btn btn-danger btn-sm delete-block-btn">
+                        <i class="fas fa-trash"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="${blockId}-title">Titre du bloc (optionnel)</label>
+                <input type="text" class="form-control block-title" id="${blockId}-title" value="${data?.title || ''}">
+            </div>
+            <div class="form-group">
+                <label for="${blockId}-content">Contenu du bloc</label>
+                <textarea class="form-control block-content" id="${blockId}-content" rows="5">${data?.content || ''}</textarea>
+            </div>
+            <div class="form-group">
+                <label>Image</label>
+                <div class="d-flex align-items-center mb-2">
+                    <button type="button" class="btn btn-primary btn-sm select-image-btn" style="${data?.image ? 'display:none;' : ''}">
+                        <i class="fas fa-image"></i> Sélectionner une image
+                    </button>
+                    <button type="button" class="btn btn-warning btn-sm remove-image-btn ml-2" style="${data?.image ? '' : 'display:none;'}">
+                        <i class="fas fa-times"></i> Retirer l'image
+                    </button>
+                </div>
+                <input type="hidden" class="block-image-id" value="${data?.image?.id || ''}">
+                <img src="${data?.image?.src || ''}" alt="Preview" class="image-preview mb-2" style="${data?.image ? '' : 'display:none;'}">
+                <div class="form-group">
+                    <label for="${blockId}-image-position">Position de l'image</label>
+                    <select class="form-control image-position-select" id="${blockId}-image-position">
+                        <option value="left" ${data?.image_position === 'left' ? 'selected' : ''}>Gauche</option>
+                        <option value="right" ${data?.image_position === 'right' ? 'selected' : ''}>Droite</option>
+                        <option value="top" ${data?.image_position === 'top' ? 'selected' : ''}>Haut</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+    `;
+    
+    // Add the block to the container
+    blocksContainer.insertAdjacentHTML('beforeend', blockHtml);
+    
+    // Setup event listeners for the new block
+    const newBlock = blocksContainer.lastElementChild;
+    
+    // Delete button
+    const deleteButton = newBlock.querySelector('.delete-block-btn');
+    if (deleteButton) {
+        deleteButton.addEventListener('click', function() {
+            if (confirm('Êtes-vous sûr de vouloir supprimer ce bloc ?')) {
+                newBlock.remove();
+                updateBlockOrder();
+            }
+        });
+    }
+    
+    // Image position select
+    const positionSelect = newBlock.querySelector('.image-position-select');
+    if (positionSelect) {
+        positionSelect.addEventListener('change', function() {
+            updateBlockImagePreview(newBlock);
+        });
+    }
+    
+    // Image selection button
+    const imageSelectButton = newBlock.querySelector('.select-image-btn');
+    if (imageSelectButton) {
+        imageSelectButton.addEventListener('click', function() {
+            const galleryModal = document.getElementById('image-gallery-modal');
+            
+            if (galleryModal) {
+                // Set current block ID as data attribute for the modal
+                galleryModal.setAttribute('data-target-block', blockId);
+                
+                // Show the modal
+                const modal = new bootstrap.Modal(galleryModal);
+                modal.show();
+            }
+        });
+    }
+    
+    // Image remove button
+    const removeImageButton = newBlock.querySelector('.remove-image-btn');
+    if (removeImageButton) {
+        removeImageButton.addEventListener('click', function() {
+            const imageIdInput = newBlock.querySelector('.block-image-id');
+            const imagePreview = newBlock.querySelector('.image-preview');
+            
+            if (imageIdInput) {
+                imageIdInput.value = '';
+            }
+            
+            if (imagePreview) {
+                imagePreview.src = '';
+                imagePreview.style.display = 'none';
+            }
+            
+            // Hide remove button
+            removeImageButton.style.display = 'none';
+            
+            // Show select button
+            if (imageSelectButton) {
+                imageSelectButton.style.display = 'inline-block';
+            }
+        });
+    }
+    
+    // Scroll to the new block
+    newBlock.scrollIntoView({ behavior: 'smooth' });
+}
+
+// Update block order numbers in the UI
+function updateBlockOrder() {
+    const blocks = document.querySelectorAll('.block-editor');
+    blocks.forEach((block, index) => {
+        const titleEl = block.querySelector('.block-editor-title');
+        if (titleEl) {
+            titleEl.textContent = `Bloc #${index + 1}`;
+        }
+    });
+}
+
+// Update image preview based on position
+function updateBlockImagePreview(blockEditor) {
+    // This function would apply CSS classes to show how the image position 
+    // will look in the frontend
+    const positionSelect = blockEditor.querySelector('.image-position-select');
+    const imagePreview = blockEditor.querySelector('.image-preview');
+    
+    if (!positionSelect || !imagePreview || imagePreview.style.display === 'none') {
+        return;
+    }
+    
+    const position = positionSelect.value;
+    
+    // Remove existing position classes
+    imagePreview.classList.remove('position-left', 'position-right', 'position-top');
+    
+    // Add the selected position class
+    imagePreview.classList.add(`position-${position}`);
+    
+    // Apply some simple styling to demonstrate the position
+    switch (position) {
+        case 'left':
+            imagePreview.style.float = 'left';
+            imagePreview.style.marginRight = '15px';
+            imagePreview.style.marginBottom = '10px';
+            imagePreview.style.width = '30%';
+            break;
+        case 'right':
+            imagePreview.style.float = 'right';
+            imagePreview.style.marginLeft = '15px';
+            imagePreview.style.marginBottom = '10px';
+            imagePreview.style.width = '30%';
+            break;
+        case 'top':
+            imagePreview.style.float = 'none';
+            imagePreview.style.marginRight = '0';
+            imagePreview.style.marginLeft = '0';
+            imagePreview.style.marginBottom = '15px';
+            imagePreview.style.width = '100%';
+            break;
+    }
+}
+
+// Save content blocks
+function saveContentBlocks() {
+    const blocksContainer = document.getElementById('blocks-container');
+    const blocksDataInput = document.getElementById('blocks-data');
+    
+    if (!blocksContainer || !blocksDataInput) return;
+    
+    const blocks = blocksContainer.querySelectorAll('.block-editor');
+    const blocksData = [];
+    
+    blocks.forEach((block, index) => {
+        const blockId = block.getAttribute('data-block-id');
+        const title = block.querySelector('.block-title').value;
+        const content = block.querySelector('.block-content').value;
+        const imageId = block.querySelector('.block-image-id').value;
+        const imagePosition = block.querySelector('.image-position-select').value;
+        
+        blocksData.push({
+            id: blockId,
+            title: title,
+            content: content,
+            image_id: imageId,
+            image_position: imagePosition,
+            order: index
+        });
+    });
+    
+    // Set the blocks data as JSON in the hidden input
+    blocksDataInput.value = JSON.stringify(blocksData);
+    
+    // Submit the form
+    const form = document.getElementById('blocks-form');
+    if (form) {
+        form.submit();
+    }
+}
+
+// Setup image uploader
+function setupImageUploader() {
+    const imageUploadForm = document.getElementById('image-upload-form');
+    const imageFileInput = document.getElementById('image-file');
+    const imagePreview = document.getElementById('upload-image-preview');
+    
+    if (imageFileInput && imagePreview) {
+        imageFileInput.addEventListener('change', function() {
+            if (this.files && this.files[0]) {
+                const reader = new FileReader();
+                
+                reader.onload = function(e) {
+                    imagePreview.src = e.target.result;
+                    imagePreview.style.display = 'block';
+                };
+                
+                reader.readAsDataURL(this.files[0]);
+            }
+        });
+    }
+    
+    if (imageUploadForm) {
+        imageUploadForm.addEventListener('submit', function(e) {
+            const fileInput = this.querySelector('#image-file');
+            
+            if (!fileInput.files || fileInput.files.length === 0) {
+                e.preventDefault();
+                alert('Veuillez sélectionner une image.');
+            }
+        });
+    }
+}
+
+// Setup image gallery
+function setupImageGallery() {
+    // Handle image selection from gallery
+    const galleryItems = document.querySelectorAll('.gallery-item');
+    
+    galleryItems.forEach(item => {
+        item.addEventListener('click', function() {
+            const imageId = this.getAttribute('data-image-id');
+            const imageSrc = this.querySelector('img').src;
+            const galleryModal = document.getElementById('image-gallery-modal');
+            
+            if (galleryModal) {
+                const targetBlockId = galleryModal.getAttribute('data-target-block');
+                const blockEditor = document.querySelector(`.block-editor[data-block-id="${targetBlockId}"]`);
+                
+                if (blockEditor) {
+                    // Update the image ID input
+                    const imageIdInput = blockEditor.querySelector('.block-image-id');
+                    if (imageIdInput) {
+                        imageIdInput.value = imageId;
+                    }
+                    
+                    // Update the image preview
+                    const imagePreview = blockEditor.querySelector('.image-preview');
+                    if (imagePreview) {
+                        imagePreview.src = imageSrc;
+                        imagePreview.style.display = 'block';
+                    }
+                    
+                    // Hide select button and show remove button
+                    const selectButton = blockEditor.querySelector('.select-image-btn');
+                    const removeButton = blockEditor.querySelector('.remove-image-btn');
+                    
+                    if (selectButton) {
+                        selectButton.style.display = 'none';
+                    }
+                    
+                    if (removeButton) {
+                        removeButton.style.display = 'inline-block';
+                    }
+                    
+                    // Update image preview position
+                    updateBlockImagePreview(blockEditor);
+                }
+                
+                // Close the modal
+                const modal = bootstrap.Modal.getInstance(galleryModal);
+                if (modal) {
+                    modal.hide();
+                }
+            }
+        });
+    });
+}

api/static/js/main.js

@@ -0,0 +1,393 @@
+// Main application JavaScript for the frontend
+
+// Wait for the DOM to be loaded before executing
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize theme
+    initTheme();
+    
+    // Setup interactive elements
+    setupSubjectSelection();
+    setupCategorySelection();
+    setupTextSelection();
+    setupThemeToggle();
+    
+    // Setup feedback form submission
+    const feedbackForm = document.getElementById('feedback-form');
+    if (feedbackForm) {
+        feedbackForm.addEventListener('submit', function(e) {
+            const feedbackMessage = document.getElementById('feedback-message');
+            if (!feedbackMessage.value.trim()) {
+                e.preventDefault();
+                alert('Veuillez entrer un message avant d\'envoyer votre feedback.');
+            }
+        });
+    }
+});
+
+// Initialize theme based on user preference
+function initTheme() {
+    const userPreference = localStorage.getItem('theme') || 'light';
+    document.documentElement.setAttribute('data-theme', userPreference);
+    
+    // Update theme icon
+    updateThemeIcon(userPreference);
+}
+
+// Setup theme toggle functionality
+function setupThemeToggle() {
+    const themeToggle = document.getElementById('theme-toggle');
+    if (!themeToggle) return;
+    
+    themeToggle.addEventListener('click', function() {
+        const currentTheme = document.documentElement.getAttribute('data-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        
+        // Update theme attribute
+        document.documentElement.setAttribute('data-theme', newTheme);
+        
+        // Save preference to localStorage
+        localStorage.setItem('theme', newTheme);
+        
+        // Update icon
+        updateThemeIcon(newTheme);
+        
+        // Send theme preference to server
+        saveThemePreference(newTheme);
+    });
+}
+
+// Update the theme toggle icon based on current theme
+function updateThemeIcon(theme) {
+    const themeToggle = document.getElementById('theme-toggle');
+    if (!themeToggle) return;
+    
+    // Update icon based on theme
+    if (theme === 'dark') {
+        themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
+        themeToggle.setAttribute('title', 'Activer le mode clair');
+    } else {
+        themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
+        themeToggle.setAttribute('title', 'Activer le mode sombre');
+    }
+}
+
+// Save theme preference to server
+function saveThemePreference(theme) {
+    const formData = new FormData();
+    formData.append('theme', theme);
+    
+    fetch('/set_theme', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log('Theme preference saved:', data);
+    })
+    .catch(error => {
+        console.error('Error saving theme preference:', error);
+    });
+}
+
+// Setup subject selection functionality
+function setupSubjectSelection() {
+    const subjectCards = document.querySelectorAll('.subject-card');
+    const subjectSelect = document.getElementById('matiere-select');
+    
+    // Handle subject card clicks
+    subjectCards.forEach(card => {
+        card.addEventListener('click', function() {
+            const matiereId = this.getAttribute('data-matiere-id');
+            
+            // Update select element if it exists
+            if (subjectSelect) {
+                subjectSelect.value = matiereId;
+                // Trigger change event to load subcategories
+                const event = new Event('change');
+                subjectSelect.dispatchEvent(event);
+            } else {
+                loadSubCategories(matiereId);
+            }
+            
+            // Highlight the selected card
+            subjectCards.forEach(c => c.classList.remove('active'));
+            this.classList.add('active');
+            
+            // Show the categories section
+            const categoriesSection = document.getElementById('sous-categories-section');
+            if (categoriesSection) {
+                categoriesSection.classList.remove('d-none');
+                categoriesSection.scrollIntoView({ behavior: 'smooth' });
+            }
+        });
+    });
+    
+    // Handle subject select change
+    if (subjectSelect) {
+        subjectSelect.addEventListener('change', function() {
+            const matiereId = this.value;
+            if (matiereId) {
+                loadSubCategories(matiereId);
+                
+                // Show the categories section
+                const categoriesSection = document.getElementById('sous-categories-section');
+                if (categoriesSection) {
+                    categoriesSection.classList.remove('d-none');
+                }
+            }
+        });
+    }
+}
+
+// Load subcategories for the selected subject
+function loadSubCategories(matiereId) {
+    fetch(`/get_sous_categories/${matiereId}`)
+        .then(response => response.json())
+        .then(data => {
+            // Update subcategories list
+            const sousCategoriesList = document.getElementById('sous-categories-list');
+            if (sousCategoriesList) {
+                sousCategoriesList.innerHTML = '';
+                
+                data.forEach(category => {
+                    const item = document.createElement('li');
+                    item.className = 'selection-item';
+                    item.setAttribute('data-category-id', category.id);
+                    item.textContent = category.nom;
+                    
+                    // Add click event
+                    item.addEventListener('click', function() {
+                        const categoryId = this.getAttribute('data-category-id');
+                        loadTextes(categoryId);
+                        
+                        // Highlight the selected category
+                        const items = sousCategoriesList.querySelectorAll('.selection-item');
+                        items.forEach(i => i.classList.remove('active'));
+                        this.classList.add('active');
+                        
+                        // Show the texts section
+                        const textesSection = document.getElementById('textes-section');
+                        if (textesSection) {
+                            textesSection.classList.remove('d-none');
+                        }
+                    });
+                    
+                    sousCategoriesList.appendChild(item);
+                });
+                
+                // Show the subcategories section if it's hidden
+                const sousCategoriesSection = document.getElementById('sous-categories-section');
+                if (sousCategoriesSection) {
+                    sousCategoriesSection.classList.remove('d-none');
+                }
+            }
+        })
+        .catch(error => {
+            console.error('Error loading subcategories:', error);
+        });
+}
+
+// Setup category selection functionality
+function setupCategorySelection() {
+    const categorySelect = document.getElementById('sous-categorie-select');
+    
+    if (categorySelect) {
+        categorySelect.addEventListener('change', function() {
+            const categoryId = this.value;
+            if (categoryId) {
+                loadTextes(categoryId);
+                
+                // Show the texts section
+                const textesSection = document.getElementById('textes-section');
+                if (textesSection) {
+                    textesSection.classList.remove('d-none');
+                }
+            }
+        });
+    }
+}
+
+// Load texts for the selected category
+function loadTextes(categoryId) {
+    fetch(`/get_textes/${categoryId}`)
+        .then(response => response.json())
+        .then(data => {
+            // Update texts list
+            const textesList = document.getElementById('textes-list');
+            if (textesList) {
+                textesList.innerHTML = '';
+                
+                data.forEach(texte => {
+                    const item = document.createElement('li');
+                    item.className = 'selection-item';
+                    item.setAttribute('data-texte-id', texte.id);
+                    item.textContent = texte.titre;
+                    
+                    // Add click event
+                    item.addEventListener('click', function() {
+                        const texteId = this.getAttribute('data-texte-id');
+                        displayTexte(texteId);
+                        
+                        // Highlight the selected text
+                        const items = textesList.querySelectorAll('.selection-item');
+                        items.forEach(i => i.classList.remove('active'));
+                        this.classList.add('active');
+                    });
+                    
+                    textesList.appendChild(item);
+                });
+                
+                // Show the texts section
+                const textesSection = document.getElementById('textes-section');
+                if (textesSection) {
+                    textesSection.classList.remove('d-none');
+                }
+                
+                // Hide the content section since no text is selected yet
+                const contentSection = document.getElementById('content-section');
+                if (contentSection) {
+                    contentSection.classList.add('d-none');
+                }
+            }
+        })
+        .catch(error => {
+            console.error('Error loading texts:', error);
+        });
+}
+
+// Setup text selection functionality
+function setupTextSelection() {
+    const texteSelect = document.getElementById('texte-select');
+    
+    if (texteSelect) {
+        texteSelect.addEventListener('change', function() {
+            const texteId = this.value;
+            if (texteId) {
+                displayTexte(texteId);
+            }
+        });
+    }
+}
+
+// Display the selected texte with content blocks
+function displayTexte(texteId) {
+    fetch(`/get_texte/${texteId}`)
+        .then(response => response.json())
+        .then(data => {
+            const contentSection = document.getElementById('content-section');
+            const contentTitle = document.getElementById('content-title');
+            const contentBlocks = document.getElementById('content-blocks');
+            
+            if (contentSection && contentTitle && contentBlocks) {
+                // Update content title
+                contentTitle.textContent = data.titre;
+                
+                // Update content theme color based on matiere color
+                if (data.color_code) {
+                    // Apply color to title underline
+                    contentTitle.style.borderBottomColor = data.color_code;
+                    
+                    // Apply color to all block titles
+                    const style = document.createElement('style');
+                    style.id = 'dynamic-block-styles';
+                    const existingStyle = document.getElementById('dynamic-block-styles');
+                    if (existingStyle) {
+                        existingStyle.remove();
+                    }
+                    
+                    style.textContent = `
+                        .content-block-title {
+                            border-bottom-color: ${data.color_code} !important;
+                        }
+                        .content-block {
+                            border-left: 4px solid ${data.color_code} !important;
+                        }
+                    `;
+                    document.head.appendChild(style);
+                }
+                
+                // Clear existing content
+                contentBlocks.innerHTML = '';
+                
+                // Create content blocks
+                if (data.blocks && data.blocks.length > 0) {
+                    data.blocks.forEach(block => {
+                        // Create block container
+                        const blockDiv = document.createElement('div');
+                        blockDiv.className = 'content-block fade-in';
+                        
+                        // Check if block has an image
+                        if (block.image) {
+                            blockDiv.classList.add('block-with-image');
+                            blockDiv.classList.add(`image-${block.image_position || 'left'}`);
+                            
+                            // Create image container
+                            const imageDiv = document.createElement('div');
+                            imageDiv.className = 'block-image-container';
+                            
+                            // Create image element
+                            const imageEl = document.createElement('img');
+                            imageEl.className = 'block-image';
+                            imageEl.src = block.image.src;
+                            imageEl.alt = block.image.alt || 'Illustration';
+                            
+                            imageDiv.appendChild(imageEl);
+                            blockDiv.appendChild(imageDiv);
+                            
+                            // Create content container
+                            const contentDiv = document.createElement('div');
+                            contentDiv.className = 'block-content-container';
+                            
+                            // Add block title if present
+                            if (block.title) {
+                                const titleEl = document.createElement('h3');
+                                titleEl.className = 'content-block-title';
+                                titleEl.textContent = block.title;
+                                contentDiv.appendChild(titleEl);
+                            }
+                            
+                            // Add block content
+                            const contentEl = document.createElement('div');
+                            contentEl.className = 'content-block-content';
+                            contentEl.innerHTML = block.content.replace(/\n/g, '<br>');
+                            contentDiv.appendChild(contentEl);
+                            
+                            blockDiv.appendChild(contentDiv);
+                        } else {
+                            // No image - simple block
+                            
+                            // Add block title if present
+                            if (block.title) {
+                                const titleEl = document.createElement('h3');
+                                titleEl.className = 'content-block-title';
+                                titleEl.textContent = block.title;
+                                blockDiv.appendChild(titleEl);
+                            }
+                            
+                            // Add block content
+                            const contentEl = document.createElement('div');
+                            contentEl.className = 'content-block-content';
+                            contentEl.innerHTML = block.content.replace(/\n/g, '<br>');
+                            blockDiv.appendChild(contentEl);
+                        }
+                        
+                        // Add the block to the content area
+                        contentBlocks.appendChild(blockDiv);
+                    });
+                } else {
+                    // Fallback to regular content if no blocks
+                    const blockDiv = document.createElement('div');
+                    blockDiv.className = 'content-block';
+                    blockDiv.innerHTML = data.contenu.replace(/\n/g, '<br>');
+                    contentBlocks.appendChild(blockDiv);
+                }
+                
+                // Show the content section
+                contentSection.classList.remove('d-none');
+                contentSection.scrollIntoView({ behavior: 'smooth' });
+            }
+        })
+        .catch(error => {
+            console.error('Error loading texte:', error);
+        });
+}

api/templates/admin/dashboard.html

@@ -0,0 +1,148 @@
+{% extends 'base.html' %}
+
+{% block title %}Tableau de bord - Administration{% endblock %}
+
+{% block styles %}
+<style>
+    .dashboard-stats {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: 1.5rem;
+        margin-bottom: 2rem;
+    }
+    
+    .recent-activity {
+        background-color: var(--card-bg);
+        border-radius: 8px;
+        padding: 1.5rem;
+        box-shadow: var(--shadow);
+    }
+    
+    .welcome-message {
+        margin-bottom: 2rem;
+        padding: 2rem;
+        background-color: var(--primary-color);
+        color: white;
+        border-radius: 8px;
+        box-shadow: var(--shadow);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-md-3">
+        <div class="admin-sidebar">
+            <h3 class="mb-3">Administration</h3>
+            <ul class="admin-nav">
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link active">
+                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
+                        <i class="fas fa-book"></i> Matières
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
+                        <i class="fas fa-list"></i> Sous-catégories
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link">
+                        <i class="fas fa-file-alt"></i> Textes
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
+                        <i class="fas fa-images"></i> Images
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
+                        <i class="fas fa-sign-out-alt"></i> Déconnexion
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    
+    <div class="col-md-9">
+        <div class="welcome-message">
+            <h2><i class="fas fa-hand-sparkles"></i> Bienvenue dans l'interface d'administration</h2>
+            <p class="mb-0">Gérez ici l'ensemble des contenus de la plateforme éducative. Utilisez les différentes sections pour ajouter, modifier ou supprimer des contenus.</p>
+        </div>
+        
+        <h2 class="mb-4">Tableau de bord</h2>
+        
+        <!-- Stats Cards -->
+        <div class="dashboard-stats">
+            <div class="admin-card">
+                <h3 class="admin-card-title">Matières</h3>
+                <div class="admin-stat">{{ stats.matieres }}</div>
+                <p>Nombre total de matières</p>
+                <a href="{{ url_for('admin_bp.matieres') }}" class="btn btn-primary btn-sm">
+                    <i class="fas fa-eye"></i> Voir
+                </a>
+            </div>
+            
+            <div class="admin-card">
+                <h3 class="admin-card-title">Sous-catégories</h3>
+                <div class="admin-stat">{{ stats.sous_categories }}</div>
+                <p>Nombre total de sous-catégories</p>
+                <a href="{{ url_for('admin_bp.sous_categories') }}" class="btn btn-primary btn-sm">
+                    <i class="fas fa-eye"></i> Voir
+                </a>
+            </div>
+            
+            <div class="admin-card">
+                <h3 class="admin-card-title">Textes</h3>
+                <div class="admin-stat">{{ stats.textes }}</div>
+                <p>Nombre total de textes</p>
+                <a href="{{ url_for('admin_bp.textes') }}" class="btn btn-primary btn-sm">
+                    <i class="fas fa-eye"></i> Voir
+                </a>
+            </div>
+            
+            <div class="admin-card">
+                <h3 class="admin-card-title">Images</h3>
+                <div class="admin-stat">{{ stats.images }}</div>
+                <p>Nombre total d'images</p>
+                <a href="{{ url_for('admin_bp.images') }}" class="btn btn-primary btn-sm">
+                    <i class="fas fa-eye"></i> Voir
+                </a>
+            </div>
+        </div>
+        
+        <!-- Recent Activity -->
+        <div class="recent-activity">
+            <h3 class="mb-3">Textes récemment modifiés</h3>
+            {% if recent_textes %}
+            <ul class="list-group">
+                {% for texte in recent_textes %}
+                <li class="list-group-item d-flex justify-content-between align-items-center">
+                    <div>
+                        <h5 class="mb-1">{{ texte.titre }}</h5>
+                        <small>{{ texte.updated_at.strftime('%d/%m/%Y à %H:%M') }}</small>
+                    </div>
+                    <a href="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}" class="btn btn-sm btn-primary">
+                        <i class="fas fa-edit"></i> Éditer
+                    </a>
+                </li>
+                {% endfor %}
+            </ul>
+            {% else %}
+            <div class="alert alert-info">
+                Aucun texte n'a été modifié récemment.
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
+{% endblock %}

api/templates/admin/edit_texte.html

@@ -0,0 +1,282 @@
+{% extends 'base.html' %}
+
+{% block title %}Éditer {{ texte.titre }} - Administration{% endblock %}
+
+{% block styles %}
+<style>
+    .block-editor {
+        position: relative;
+        transition: all 0.3s ease;
+    }
+    
+    .block-ghost {
+        opacity: 0.5;
+        background: var(--primary-color);
+    }
+    
+    .block-handle {
+        cursor: move;
+        color: var(--muted-color);
+    }
+    
+    .image-position-example {
+        padding: 10px;
+        border: 1px dashed var(--border-color);
+        margin-top: 10px;
+        border-radius: 4px;
+    }
+    
+    .block-image-container {
+        margin-bottom: 15px;
+    }
+    
+    .image-preview {
+        max-height: 150px;
+        object-fit: contain;
+    }
+    
+    .gallery-image {
+        transition: transform 0.2s;
+        cursor: pointer;
+    }
+    
+    .gallery-image:hover {
+        transform: scale(1.05);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-md-3">
+        <div class="admin-sidebar">
+            <h3 class="mb-3">Administration</h3>
+            <ul class="admin-nav">
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
+                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
+                        <i class="fas fa-book"></i> Matières
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
+                        <i class="fas fa-list"></i> Sous-catégories
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link active">
+                        <i class="fas fa-file-alt"></i> Textes
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
+                        <i class="fas fa-images"></i> Images
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
+                        <i class="fas fa-sign-out-alt"></i> Déconnexion
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    
+    <div class="col-md-9">
+        <div class="admin-container">
+            <h2 class="admin-title">Éditer la méthodologie : {{ texte.titre }}</h2>
+            
+            <div class="mb-4">
+                <a href="{{ url_for('admin_bp.textes') }}" class="btn btn-secondary mb-3">
+                    <i class="fas fa-arrow-left"></i> Retour à la liste
+                </a>
+                <a href="{{ url_for('admin_bp.historique', texte_id=texte.id) }}" class="btn btn-info mb-3">
+                    <i class="fas fa-history"></i> Voir l'historique
+                </a>
+            </div>
+            
+            <!-- Basic Information Form -->
+            <div class="card mb-4">
+                <div class="card-header">
+                    <h4>Informations de base</h4>
+                </div>
+                <div class="card-body">
+                    <form method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}">
+                        <input type="hidden" name="action" value="update_basic">
+                        
+                        <div class="form-group mb-3">
+                            <label for="titre">Titre</label>
+                            <input type="text" class="form-control" id="titre" name="titre" value="{{ texte.titre }}" required>
+                        </div>
+                        
+                        <div class="form-group mb-3">
+                            <label for="sous_categorie_id">Sous-catégorie</label>
+                            <select class="form-control" id="sous_categorie_id" name="sous_categorie_id" required>
+                                {% for sc in sous_categories %}
+                                <option value="{{ sc.id }}" {% if sc.id == texte.sous_categorie_id %}selected{% endif %}>
+                                    {{ sc.matiere.nom }} - {{ sc.nom }}
+                                </option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                        
+                        <button type="submit" class="btn btn-primary">
+                            <i class="fas fa-save"></i> Mettre à jour les informations
+                        </button>
+                    </form>
+                </div>
+            </div>
+            
+            <!-- Content Blocks Editor -->
+            <div class="card mb-4">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h4>Blocs de contenu</h4>
+                    <button id="add-block-button" class="btn btn-success">
+                        <i class="fas fa-plus"></i> Ajouter un bloc
+                    </button>
+                </div>
+                <div class="card-body">
+                    <p class="text-muted mb-4">
+                        Organisez votre contenu en blocs distincts. Chaque bloc peut contenir un titre, du texte et une image.
+                        Vous pouvez réorganiser les blocs en les faisant glisser.
+                    </p>
+                    
+                    <form id="blocks-form" method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}">
+                        <input type="hidden" name="action" value="update_blocks">
+                        <input type="hidden" id="blocks-data" name="blocks_data" value="">
+                        
+                        <div id="blocks-container">
+                            {% for block in blocks %}
+                            <div class="block-editor mb-4" data-block-id="{{ block.id }}">
+                                <div class="block-editor-header">
+                                    <div class="d-flex align-items-center">
+                                        <span class="block-handle"><i class="fas fa-grip-vertical"></i></span>
+                                        <h3 class="block-editor-title">Bloc #{{ loop.index }}</h3>
+                                    </div>
+                                    <div class="block-editor-actions">
+                                        <button type="button" class="btn btn-danger btn-sm delete-block-btn">
+                                            <i class="fas fa-trash"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="form-group mb-3">
+                                    <label for="block-{{ block.id }}-title">Titre du bloc (optionnel)</label>
+                                    <input type="text" class="form-control block-title" id="block-{{ block.id }}-title" value="{{ block.title or '' }}">
+                                </div>
+                                <div class="form-group mb-3">
+                                    <label for="block-{{ block.id }}-content">Contenu du bloc</label>
+                                    <textarea class="form-control block-content" id="block-{{ block.id }}-content" rows="5">{{ block.content or '' }}</textarea>
+                                </div>
+                                <div class="form-group">
+                                    <label>Image</label>
+                                    <div class="d-flex align-items-center mb-2">
+                                        <button type="button" class="btn btn-primary btn-sm select-image-btn" {% if block.image %}style="display:none;"{% endif %}>
+                                            <i class="fas fa-image"></i> Sélectionner une image
+                                        </button>
+                                        <button type="button" class="btn btn-warning btn-sm remove-image-btn ml-2" {% if not block.image %}style="display:none;"{% endif %}>
+                                            <i class="fas fa-times"></i> Retirer l'image
+                                        </button>
+                                    </div>
+                                    <input type="hidden" class="block-image-id" value="{{ block.image.id if block.image else '' }}">
+                                    
+                                    {% if block.image %}
+                                    <div class="block-image-container">
+                                        <img src="{{ block.image.src }}" alt="{{ block.image.alt }}" class="image-preview">
+                                    </div>
+                                    {% else %}
+                                    <img src="" alt="Preview" class="image-preview" style="display:none;">
+                                    {% endif %}
+                                    
+                                    <div class="form-group mt-3">
+                                        <label for="block-{{ block.id }}-image-position">Position de l'image</label>
+                                        <select class="form-control image-position-select" id="block-{{ block.id }}-image-position">
+                                            <option value="left" {% if block.image_position == 'left' %}selected{% endif %}>Gauche</option>
+                                            <option value="right" {% if block.image_position == 'right' %}selected{% endif %}>Droite</option>
+                                            <option value="top" {% if block.image_position == 'top' %}selected{% endif %}>Haut</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                        
+                        <div class="mt-4 text-center">
+                            <button type="button" id="save-blocks-button" class="btn btn-primary btn-lg">
+                                <i class="fas fa-save"></i> Enregistrer les modifications
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            
+            <!-- Image Upload Section -->
+            <div class="card mb-4">
+                <div class="card-header">
+                    <h4>Ajouter une nouvelle image</h4>
+                </div>
+                <div class="card-body">
+                    <form method="POST" action="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}" enctype="multipart/form-data">
+                        <input type="hidden" name="action" value="upload_image">
+                        
+                        <div class="form-group mb-3">
+                            <label for="image">Sélectionner une image</label>
+                            <input type="file" class="form-control" id="image" name="image" accept="image/*" required>
+                        </div>
+                        
+                        <div class="form-group mb-3">
+                            <label for="alt_text">Texte alternatif (pour l'accessibilité)</label>
+                            <input type="text" class="form-control" id="alt_text" name="alt_text" placeholder="Description de l'image">
+                        </div>
+                        
+                        <button type="submit" class="btn btn-success">
+                            <i class="fas fa-upload"></i> Télécharger l'image
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Image Gallery Modal -->
+<div class="modal fade" id="image-gallery-modal" tabindex="-1" aria-labelledby="imageGalleryModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="imageGalleryModalLabel">Sélectionner une image</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    {% for image in images %}
+                    <div class="col-md-3 col-sm-4 col-6 mb-3">
+                        <div class="gallery-item" data-image-id="{{ image.id }}">
+                            <img src="{{ image.src }}" alt="{{ image.alt }}" class="gallery-image img-fluid">
+                        </div>
+                    </div>
+                    {% else %}
+                    <div class="col-12">
+                        <div class="alert alert-info">
+                            Aucune image disponible. Veuillez en télécharger une.
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<!-- Include Sortable.js for drag and drop functionality -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
+<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
+{% endblock %}

api/templates/admin/historique.html

@@ -0,0 +1,171 @@
+{% extends 'base.html' %}
+
+{% block title %}Historique des modifications - {{ texte.titre }} - Administration{% endblock %}
+
+{% block styles %}
+<style>
+    .history-entry {
+        position: relative;
+        padding: 20px;
+        border-left: 3px solid var(--primary-color);
+        margin-bottom: 20px;
+        background-color: var(--card-bg);
+        border-radius: 8px;
+        box-shadow: var(--shadow);
+    }
+    
+    .history-date {
+        position: absolute;
+        top: 10px;
+        right: 15px;
+        font-size: 0.9rem;
+        color: var(--muted-color);
+    }
+    
+    .history-content {
+        background-color: var(--block-bg);
+        padding: 15px;
+        border-radius: 8px;
+        margin-top: 15px;
+        white-space: pre-wrap;
+        max-height: 300px;
+        overflow-y: auto;
+        border: 1px solid var(--border-color);
+    }
+    
+    .empty-history {
+        text-align: center;
+        padding: 50px 20px;
+        background-color: var(--block-bg);
+        border-radius: 8px;
+        margin-top: 20px;
+    }
+    
+    .timeline-container {
+        position: relative;
+        margin-left: 20px;
+    }
+    
+    .timeline-line {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 3px;
+        background-color: var(--border-color);
+    }
+    
+    .timeline-dot {
+        position: absolute;
+        left: -8px;
+        top: 20px;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background-color: var(--primary-color);
+        z-index: 2;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-md-3">
+        <div class="admin-sidebar">
+            <h3 class="mb-3">Administration</h3>
+            <ul class="admin-nav">
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
+                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
+                        <i class="fas fa-book"></i> Matières
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
+                        <i class="fas fa-list"></i> Sous-catégories
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link active">
+                        <i class="fas fa-file-alt"></i> Textes
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
+                        <i class="fas fa-images"></i> Images
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
+                        <i class="fas fa-sign-out-alt"></i> Déconnexion
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    
+    <div class="col-md-9">
+        <div class="admin-container">
+            <h2 class="admin-title">Historique des modifications : {{ texte.titre }}</h2>
+            
+            <div class="mb-4">
+                <a href="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}" class="btn btn-secondary">
+                    <i class="fas fa-arrow-left"></i> Retour à l'éditeur
+                </a>
+                <a href="{{ url_for('admin_bp.textes') }}" class="btn btn-secondary">
+                    <i class="fas fa-list"></i> Liste des textes
+                </a>
+            </div>
+            
+            <div class="card mb-4">
+                <div class="card-header">
+                    <h4><i class="fas fa-history"></i> Versions précédentes</h4>
+                </div>
+                <div class="card-body">
+                    {% if historiques %}
+                    <div class="timeline-container">
+                        <div class="timeline-line"></div>
+                        
+                        <!-- Current version -->
+                        <div class="history-entry">
+                            <div class="timeline-dot"></div>
+                            <h5>Version actuelle</h5>
+                            <span class="history-date">
+                                <i class="fas fa-clock"></i> {{ texte.updated_at.strftime('%d/%m/%Y à %H:%M') }}
+                            </span>
+                            <div class="history-content">{{ texte.contenu }}</div>
+                        </div>
+                        
+                        <!-- Previous versions -->
+                        {% for historique in historiques %}
+                        <div class="history-entry">
+                            <div class="timeline-dot"></div>
+                            <h5>Version antérieure #{{ loop.index }}</h5>
+                            <span class="history-date">
+                                <i class="fas fa-clock"></i> {{ historique.date_modification.strftime('%d/%m/%Y à %H:%M') }}
+                            </span>
+                            <div class="history-content">{{ historique.contenu_precedent }}</div>
+                        </div>
+                        {% endfor %}
+                    </div>
+                    {% else %}
+                    <div class="empty-history">
+                        <i class="fas fa-info-circle fa-3x mb-3"></i>
+                        <h4>Aucun historique disponible</h4>
+                        <p>Ce texte n'a pas encore été modifié depuis sa création.</p>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
+{% endblock %}

api/templates/admin/images.html

@@ -0,0 +1,282 @@
+{% extends 'base.html' %}
+
+{% block title %}Gestion des Images - Administration{% endblock %}
+
+{% block styles %}
+<style>
+    .image-card {
+        position: relative;
+        background-color: var(--card-bg);
+        border-radius: 8px;
+        padding: 10px;
+        margin-bottom: 20px;
+        box-shadow: var(--shadow);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+    
+    .image-card:hover {
+        transform: translateY(-5px);
+        box-shadow: var(--hover-shadow);
+    }
+    
+    .image-container {
+        position: relative;
+        width: 100%;
+        height: 200px;
+        margin-bottom: 15px;
+        overflow: hidden;
+        border-radius: 6px;
+        background-color: var(--block-bg);
+    }
+    
+    .image-preview {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+    
+    .image-info {
+        padding: 10px 0;
+    }
+    
+    .image-actions {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+    }
+    
+    .image-upload-preview {
+        max-width: 100%;
+        max-height: 200px;
+        margin-top: 15px;
+        border-radius: 6px;
+        display: none;
+    }
+    
+    .image-date {
+        font-size: 0.8rem;
+        color: var(--muted-color);
+    }
+    
+    .image-detail-modal img {
+        max-width: 100%;
+        max-height: 500px;
+    }
+    
+    .image-filter {
+        margin-bottom: 20px;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-md-3">
+        <div class="admin-sidebar">
+            <h3 class="mb-3">Administration</h3>
+            <ul class="admin-nav">
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
+                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
+                        <i class="fas fa-book"></i> Matières
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
+                        <i class="fas fa-list"></i> Sous-catégories
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link">
+                        <i class="fas fa-file-alt"></i> Textes
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link active">
+                        <i class="fas fa-images"></i> Images
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
+                        <i class="fas fa-sign-out-alt"></i> Déconnexion
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    
+    <div class="col-md-9">
+        <div class="admin-container">
+            <h2 class="admin-title">Gestion des Images</h2>
+            
+            <!-- Upload Image Section -->
+            <div class="card mb-4">
+                <div class="card-header">
+                    <h4><i class="fas fa-upload"></i> Télécharger une nouvelle image</h4>
+                </div>
+                <div class="card-body">
+                    <form id="image-upload-form" method="POST" action="{{ url_for('admin_bp.images') }}" enctype="multipart/form-data">
+                        <input type="hidden" name="action" value="upload">
+                        
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="form-group mb-3">
+                                    <label for="image-file">Sélectionner une image</label>
+                                    <input type="file" class="form-control" id="image-file" name="image" accept="image/*" required>
+                                </div>
+                                
+                                <div class="form-group mb-3">
+                                    <label for="alt_text">Texte alternatif (pour l'accessibilité)</label>
+                                    <input type="text" class="form-control" id="alt_text" name="alt_text" placeholder="Description de l'image">
+                                </div>
+                                
+                                <div class="form-group mb-3">
+                                    <label for="description">Description (optionnelle)</label>
+                                    <textarea class="form-control" id="description" name="description" rows="3" placeholder="Description ou notes sur l'image"></textarea>
+                                </div>
+                            </div>
+                            <div class="col-md-6 d-flex align-items-center justify-content-center">
+                                <img id="upload-image-preview" class="image-upload-preview" src="#" alt="Aperçu">
+                            </div>
+                        </div>
+                        
+                        <button type="submit" class="btn btn-primary">
+                            <i class="fas fa-upload"></i> Télécharger
+                        </button>
+                    </form>
+                </div>
+            </div>
+            
+            <!-- Image Gallery -->
+            <div class="card">
+                <div class="card-header">
+                    <h4><i class="fas fa-images"></i> Bibliothèque d'images</h4>
+                </div>
+                <div class="card-body">
+                    <!-- Filter -->
+                    <div class="image-filter mb-4">
+                        <div class="input-group">
+                            <span class="input-group-text"><i class="fas fa-search"></i></span>
+                            <input type="text" id="image-search" class="form-control" placeholder="Rechercher par nom ou description...">
+                        </div>
+                    </div>
+                    
+                    {% if images %}
+                    <div class="row" id="image-gallery">
+                        {% for image in images %}
+                        <div class="col-lg-4 col-md-6 mb-4">
+                            <div class="image-card">
+                                <div class="image-container">
+                                    <img src="{{ image.src }}" alt="{{ image.alt_text or 'Image' }}" class="image-preview">
+                                </div>
+                                <div class="image-info">
+                                    <h5 class="mb-1" title="{{ image.filename }}">
+                                        {{ image.filename|truncate(20) }}
+                                    </h5>
+                                    <p class="image-date mb-1">
+                                        <i class="fas fa-calendar-alt"></i> 
+                                        {{ image.uploaded_at.strftime('%d/%m/%Y') }}
+                                    </p>
+                                    <p class="text-muted small mb-0">
+                                        {{ image.description|default('Aucune description')|truncate(50) }}
+                                    </p>
+                                </div>
+                                <div class="image-actions">
+                                    <button class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#imageModal{{ image.id }}">
+                                        <i class="fas fa-eye"></i> Détails
+                                    </button>
+                                    <form method="POST" action="{{ url_for('admin_bp.images') }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette image ?')">
+                                        <input type="hidden" name="action" value="delete">
+                                        <input type="hidden" name="image_id" value="{{ image.id }}">
+                                        <button type="submit" class="btn btn-sm btn-danger">
+                                            <i class="fas fa-trash"></i>
+                                        </button>
+                                    </form>
+                                </div>
+                            </div>
+                            
+                            <!-- Image Modal -->
+                            <div class="modal fade image-detail-modal" id="imageModal{{ image.id }}" tabindex="-1" aria-labelledby="imageModalLabel{{ image.id }}" aria-hidden="true">
+                                <div class="modal-dialog modal-lg">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h5 class="modal-title" id="imageModalLabel{{ image.id }}">{{ image.filename }}</h5>
+                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                        </div>
+                                        <div class="modal-body">
+                                            <div class="text-center mb-4">
+                                                <img src="{{ image.src }}" alt="{{ image.alt_text or 'Image' }}" class="img-fluid">
+                                            </div>
+                                            
+                                            <form method="POST" action="{{ url_for('admin_bp.images') }}">
+                                                <input type="hidden" name="action" value="update">
+                                                <input type="hidden" name="image_id" value="{{ image.id }}">
+                                                
+                                                <div class="form-group mb-3">
+                                                    <label>Téléchargée le</label>
+                                                    <input type="text" class="form-control" value="{{ image.uploaded_at.strftime('%d/%m/%Y à %H:%M') }}" readonly>
+                                                </div>
+                                                
+                                                <div class="form-group mb-3">
+                                                    <label for="alt_text{{ image.id }}">Texte alternatif</label>
+                                                    <input type="text" class="form-control" id="alt_text{{ image.id }}" name="alt_text" value="{{ image.alt_text or '' }}">
+                                                </div>
+                                                
+                                                <div class="form-group mb-3">
+                                                    <label for="description{{ image.id }}">Description</label>
+                                                    <textarea class="form-control" id="description{{ image.id }}" name="description" rows="3">{{ image.description or '' }}</textarea>
+                                                </div>
+                                                
+                                                <button type="submit" class="btn btn-primary">
+                                                    <i class="fas fa-save"></i> Mettre à jour
+                                                </button>
+                                            </form>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        {% endfor %}
+                    </div>
+                    {% else %}
+                    <div class="alert alert-info">
+                        Aucune image n'a été téléchargée. Utilisez le formulaire ci-dessus pour ajouter votre première image.
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
+<script>
+    // Image search functionality
+    document.addEventListener('DOMContentLoaded', function() {
+        const searchInput = document.getElementById('image-search');
+        if (!searchInput) return;
+        
+        searchInput.addEventListener('input', function() {
+            const searchTerm = this.value.toLowerCase();
+            const imageCards = document.querySelectorAll('.image-card');
+            
+            imageCards.forEach(card => {
+                const filename = card.querySelector('h5').textContent.toLowerCase();
+                const description = card.querySelector('.text-muted').textContent.toLowerCase();
+                
+                if (filename.includes(searchTerm) || description.includes(searchTerm)) {
+                    card.closest('.col-lg-4').style.display = '';
+                } else {
+                    card.closest('.col-lg-4').style.display = 'none';
+                }
+            });
+        });
+    });
+</script>
+{% endblock %}

api/templates/admin/login.html

@@ -0,0 +1,87 @@
+{% extends 'base.html' %}
+
+{% block title %}Connexion - Administration{% endblock %}
+
+{% block styles %}
+<style>
+    .login-container {
+        max-width: 500px;
+        margin: 50px auto;
+        padding: 30px;
+        background-color: var(--card-bg);
+        border-radius: 10px;
+        box-shadow: var(--shadow);
+    }
+    
+    .login-header {
+        text-align: center;
+        margin-bottom: 30px;
+    }
+    
+    .login-icon {
+        font-size: 60px;
+        color: var(--primary-color);
+        margin-bottom: 20px;
+    }
+    
+    .login-title {
+        font-size: 24px;
+        margin-bottom: 10px;
+    }
+    
+    .login-subtitle {
+        color: var(--muted-color);
+    }
+    
+    .login-form {
+        margin-top: 20px;
+    }
+    
+    .form-floating {
+        margin-bottom: 20px;
+    }
+    
+    .login-footer {
+        text-align: center;
+        margin-top: 20px;
+        color: var(--muted-color);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="login-container">
+    <div class="login-header">
+        <div class="login-icon">
+            <i class="fas fa-user-shield"></i>
+        </div>
+        <h1 class="login-title">Espace d'administration</h1>
+        <p class="login-subtitle">Connectez-vous pour gérer le contenu</p>
+    </div>
+    
+    <form method="POST" action="{{ url_for('admin_bp.login') }}" class="login-form">
+        <div class="form-floating mb-3">
+            <input type="text" class="form-control" id="username" name="username" placeholder="Nom d'utilisateur" required>
+            <label for="username">Nom d'utilisateur</label>
+        </div>
+        
+        <div class="form-floating mb-4">
+            <input type="password" class="form-control" id="password" name="password" placeholder="Mot de passe" required>
+            <label for="password">Mot de passe</label>
+        </div>
+        
+        <div class="d-grid">
+            <button type="submit" class="btn btn-primary btn-lg">
+                <i class="fas fa-sign-in-alt me-2"></i> Se connecter
+            </button>
+        </div>
+    </form>
+    
+    <div class="login-footer">
+        <p>Seuls les administrateurs autorisés peuvent accéder à cette section.</p>
+        <a href="{{ url_for('main_bp.index') }}">
+            <i class="fas fa-arrow-left me-1"></i> Retour à l'accueil
+        </a>
+    </div>
+</div>
+{% endblock %}

api/templates/admin/matieres.html

@@ -0,0 +1,213 @@
+{% extends 'base.html' %}
+
+{% block title %}Gestion des Matières - Administration{% endblock %}
+
+{% block styles %}
+<style>
+    .color-preview {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        margin-left: 10px;
+    }
+    
+    .color-badge {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+        margin-right: 10px;
+    }
+    
+    .matiere-card {
+        background-color: var(--card-bg);
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 16px;
+        box-shadow: var(--shadow);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        border-left: 5px solid #ddd;
+    }
+    
+    .matiere-card:hover {
+        transform: translateY(-5px);
+        box-shadow: var(--hover-shadow);
+    }
+    
+    .matiere-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-md-3">
+        <div class="admin-sidebar">
+            <h3 class="mb-3">Administration</h3>
+            <ul class="admin-nav">
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
+                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link active">
+                        <i class="fas fa-book"></i> Matières
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
+                        <i class="fas fa-list"></i> Sous-catégories
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link">
+                        <i class="fas fa-file-alt"></i> Textes
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
+                        <i class="fas fa-images"></i> Images
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
+                        <i class="fas fa-sign-out-alt"></i> Déconnexion
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    
+    <div class="col-md-9">
+        <div class="admin-container">
+            <h2 class="admin-title">Gestion des Matières</h2>
+            
+            <div class="row mb-4">
+                <!-- Add Matiere Section -->
+                <div id="add-matiere-section" class="col-md-6">
+                    <div class="card">
+                        <div class="card-header">
+                            <h4><i class="fas fa-plus-circle"></i> Ajouter une matière</h4>
+                        </div>
+                        <div class="card-body">
+                            <form method="POST" action="{{ url_for('admin_bp.matieres') }}">
+                                <input type="hidden" name="action" value="add">
+                                
+                                <div class="form-group mb-3">
+                                    <label for="nom">Nom de la matière</label>
+                                    <input type="text" class="form-control" id="nom" name="nom" required>
+                                </div>
+                                
+                                <div class="form-group mb-3">
+                                    <label for="color_code">Couleur</label>
+                                    <div class="input-group">
+                                        <input type="color" class="form-control form-control-color" id="color_code" name="color_code" value="#3498db">
+                                        <!-- Color preview will be added by JS -->
+                                    </div>
+                                </div>
+                                
+                                <button type="submit" class="btn btn-primary">
+                                    <i class="fas fa-save"></i> Ajouter
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Edit Matiere Section (initially hidden) -->
+                <div id="edit-matiere-section" class="col-md-6 d-none">
+                    <div class="card">
+                        <div class="card-header">
+                            <h4><i class="fas fa-edit"></i> Modifier une matière</h4>
+                        </div>
+                        <div class="card-body">
+                            <form id="edit-matiere-form" method="POST" action="{{ url_for('admin_bp.matieres') }}">
+                                <input type="hidden" name="action" value="edit">
+                                <input type="hidden" name="matiere_id" value="">
+                                
+                                <div class="form-group mb-3">
+                                    <label for="edit-nom">Nom de la matière</label>
+                                    <input type="text" class="form-control" id="edit-nom" name="nom" required>
+                                </div>
+                                
+                                <div class="form-group mb-3">
+                                    <label for="edit-color_code">Couleur</label>
+                                    <div class="input-group">
+                                        <input type="color" class="form-control form-control-color" id="edit-color_code" name="color_code" value="#3498db">
+                                        <!-- Color preview will be added by JS -->
+                                    </div>
+                                </div>
+                                
+                                <div class="btn-group">
+                                    <button type="submit" class="btn btn-primary">
+                                        <i class="fas fa-save"></i> Mettre à jour
+                                    </button>
+                                    <button type="button" id="cancel-edit-matiere" class="btn btn-secondary">
+                                        <i class="fas fa-times"></i> Annuler
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- List of Matieres -->
+            <div class="card">
+                <div class="card-header">
+                    <h4><i class="fas fa-list"></i> Liste des matières</h4>
+                </div>
+                <div class="card-body">
+                    {% if matieres %}
+                        <div class="row">
+                            {% for matiere in matieres %}
+                            <div class="col-md-6 mb-3">
+                                <div class="matiere-card" style="border-left-color: {{ matiere.color_code }};">
+                                    <div class="d-flex justify-content-between align-items-center mb-2">
+                                        <h5 class="mb-0">
+                                            <span class="color-badge" style="background-color: {{ matiere.color_code }};"></span>
+                                            {{ matiere.nom }}
+                                        </h5>
+                                    </div>
+                                    <div class="small mb-2">
+                                        <span class="badge bg-secondary">{{ matiere.sous_categories|length }} sous-catégories</span>
+                                    </div>
+                                    <div class="matiere-actions">
+                                        <button class="btn btn-sm btn-primary edit-matiere-btn" 
+                                                data-id="{{ matiere.id }}" 
+                                                data-name="{{ matiere.nom }}" 
+                                                data-color="{{ matiere.color_code }}">
+                                            <i class="fas fa-edit"></i> Modifier
+                                        </button>
+                                        <form method="POST" action="{{ url_for('admin_bp.matieres') }}" style="display: inline-block" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette matière ? Toutes les sous-catégories et textes associés seront également supprimés.')">
+                                            <input type="hidden" name="action" value="delete">
+                                            <input type="hidden" name="matiere_id" value="{{ matiere.id }}">
+                                            <button type="submit" class="btn btn-sm btn-danger">
+                                                <i class="fas fa-trash"></i> Supprimer
+                                            </button>
+                                        </form>
+                                    </div>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    {% else %}
+                        <div class="alert alert-info">
+                            Aucune matière n'a été ajoutée. Utilisez le formulaire ci-dessus pour créer votre première matière.
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
+{% endblock %}

api/templates/admin/sous_categories.html

@@ -0,0 +1,230 @@
+{% extends 'base.html' %}
+
+{% block title %}Gestion des Sous-catégories - Administration{% endblock %}
+
+{% block styles %}
+<style>
+    .sous-categorie-row {
+        transition: background-color 0.3s ease;
+    }
+    
+    .sous-categorie-row:hover {
+        background-color: rgba(52, 152, 219, 0.1);
+    }
+    
+    .color-badge {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
+    
+    .filter-container {
+        background-color: var(--block-bg);
+        padding: 15px;
+        border-radius: 8px;
+        margin-bottom: 20px;
+    }
+    
+    .matiere-container {
+        margin-top: 30px;
+        border-left: 3px solid var(--primary-color);
+        padding-left: 15px;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-md-3">
+        <div class="admin-sidebar">
+            <h3 class="mb-3">Administration</h3>
+            <ul class="admin-nav">
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
+                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
+                        <i class="fas fa-book"></i> Matières
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link active">
+                        <i class="fas fa-list"></i> Sous-catégories
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link">
+                        <i class="fas fa-file-alt"></i> Textes
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
+                        <i class="fas fa-images"></i> Images
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
+                        <i class="fas fa-sign-out-alt"></i> Déconnexion
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    
+    <div class="col-md-9">
+        <div class="admin-container">
+            <h2 class="admin-title">Gestion des Sous-catégories</h2>
+            
+            <div class="row mb-4">
+                <!-- Add Sous-Categorie Section -->
+                <div id="add-sous-categorie-section" class="col-md-6">
+                    <div class="card">
+                        <div class="card-header">
+                            <h4><i class="fas fa-plus-circle"></i> Ajouter une sous-catégorie</h4>
+                        </div>
+                        <div class="card-body">
+                            <form method="POST" action="{{ url_for('admin_bp.sous_categories') }}">
+                                <input type="hidden" name="action" value="add">
+                                
+                                <div class="form-group mb-3">
+                                    <label for="matiere_id">Matière</label>
+                                    <select class="form-control" id="matiere_id" name="matiere_id" required>
+                                        <option value="">Sélectionnez une matière</option>
+                                        {% for matiere in matieres %}
+                                        <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                                
+                                <div class="form-group mb-3">
+                                    <label for="nom">Nom de la sous-catégorie</label>
+                                    <input type="text" class="form-control" id="nom" name="nom" required>
+                                </div>
+                                
+                                <button type="submit" class="btn btn-primary">
+                                    <i class="fas fa-save"></i> Ajouter
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Edit Sous-Categorie Section (initially hidden) -->
+                <div id="edit-sous-categorie-section" class="col-md-6 d-none">
+                    <div class="card">
+                        <div class="card-header">
+                            <h4><i class="fas fa-edit"></i> Modifier une sous-catégorie</h4>
+                        </div>
+                        <div class="card-body">
+                            <form id="edit-sous-categorie-form" method="POST" action="{{ url_for('admin_bp.sous_categories') }}">
+                                <input type="hidden" name="action" value="edit">
+                                <input type="hidden" name="sous_categorie_id" value="">
+                                
+                                <div class="form-group mb-3">
+                                    <label for="edit-matiere_id">Matière</label>
+                                    <select class="form-control" id="edit-matiere_id" name="matiere_id" required>
+                                        {% for matiere in matieres %}
+                                        <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
+                                        {% endfor %}
+                                    </select>
+                                </div>
+                                
+                                <div class="form-group mb-3">
+                                    <label for="edit-nom">Nom de la sous-catégorie</label>
+                                    <input type="text" class="form-control" id="edit-nom" name="nom" required>
+                                </div>
+                                
+                                <div class="btn-group">
+                                    <button type="submit" class="btn btn-primary">
+                                        <i class="fas fa-save"></i> Mettre à jour
+                                    </button>
+                                    <button type="button" id="cancel-edit-sous-categorie" class="btn btn-secondary">
+                                        <i class="fas fa-times"></i> Annuler
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Filter by Matiere -->
+            <div class="filter-container mb-4">
+                <div class="row align-items-center">
+                    <div class="col-md-3">
+                        <label for="matiere-filter" class="form-label mb-0"><strong>Filtrer par matière :</strong></label>
+                    </div>
+                    <div class="col-md-9">
+                        <select id="matiere-filter" class="form-select">
+                            <option value="">Toutes les matières</option>
+                            {% for matiere in matieres %}
+                            <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- List of Sous-Categories -->
+            <div class="card">
+                <div class="card-header">
+                    <h4><i class="fas fa-list"></i> Liste des sous-catégories</h4>
+                </div>
+                <div class="card-body">
+                    {% if sous_categories %}
+                        <div class="table-responsive">
+                            <table class="table table-hover">
+                                <thead>
+                                    <tr>
+                                        <th>Matière</th>
+                                        <th>Sous-catégorie</th>
+                                        <th>Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {% for sous_categorie in sous_categories %}
+                                    <tr class="sous-categorie-row" data-matiere-id="{{ sous_categorie.matiere.id }}">
+                                        <td>
+                                            <span class="color-badge" style="background-color: {{ sous_categorie.matiere.color_code }};"></span>
+                                            {{ sous_categorie.matiere.nom }}
+                                        </td>
+                                        <td>{{ sous_categorie.nom }}</td>
+                                        <td>
+                                            <button class="btn btn-sm btn-primary edit-sous-categorie-btn" 
+                                                    data-id="{{ sous_categorie.id }}" 
+                                                    data-name="{{ sous_categorie.nom }}" 
+                                                    data-matiere-id="{{ sous_categorie.matiere.id }}">
+                                                <i class="fas fa-edit"></i> Modifier
+                                            </button>
+                                            <form method="POST" action="{{ url_for('admin_bp.sous_categories') }}" style="display: inline-block" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cette sous-catégorie ? Tous les textes associés seront également supprimés.')">
+                                                <input type="hidden" name="action" value="delete">
+                                                <input type="hidden" name="sous_categorie_id" value="{{ sous_categorie.id }}">
+                                                <button type="submit" class="btn btn-sm btn-danger">
+                                                    <i class="fas fa-trash"></i> Supprimer
+                                                </button>
+                                            </form>
+                                        </td>
+                                    </tr>
+                                    {% endfor %}
+                                </tbody>
+                            </table>
+                        </div>
+                    {% else %}
+                        <div class="alert alert-info">
+                            Aucune sous-catégorie n'a été ajoutée. Utilisez le formulaire ci-dessus pour créer votre première sous-catégorie.
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
+{% endblock %}

api/templates/admin/textes.html

@@ -0,0 +1,230 @@
+{% extends 'base.html' %}
+
+{% block title %}Gestion des Textes - Administration{% endblock %}
+
+{% block styles %}
+<style>
+    .texte-card {
+        background-color: var(--card-bg);
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 16px;
+        box-shadow: var(--shadow);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        border-left: 5px solid var(--primary-color);
+    }
+    
+    .texte-card:hover {
+        transform: translateY(-5px);
+        box-shadow: var(--hover-shadow);
+    }
+    
+    .texte-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        margin-top: 10px;
+    }
+    
+    .accordion-button:not(.collapsed) {
+        background-color: var(--block-bg);
+        color: var(--text-color);
+    }
+    
+    .matiere-header {
+        padding: 10px 15px;
+        margin: 10px 0;
+        border-radius: 5px;
+        color: white;
+    }
+    
+    .sous-categorie-header {
+        padding: 8px 15px;
+        border-radius: 5px;
+        background-color: var(--block-bg);
+        margin: 10px 0;
+    }
+    
+    .date-info {
+        font-size: 12px;
+        color: var(--muted-color);
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-md-3">
+        <div class="admin-sidebar">
+            <h3 class="mb-3">Administration</h3>
+            <ul class="admin-nav">
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.dashboard') }}" class="admin-nav-link">
+                        <i class="fas fa-tachometer-alt"></i> Tableau de bord
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.matieres') }}" class="admin-nav-link">
+                        <i class="fas fa-book"></i> Matières
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.sous_categories') }}" class="admin-nav-link">
+                        <i class="fas fa-list"></i> Sous-catégories
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.textes') }}" class="admin-nav-link active">
+                        <i class="fas fa-file-alt"></i> Textes
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.images') }}" class="admin-nav-link">
+                        <i class="fas fa-images"></i> Images
+                    </a>
+                </li>
+                <li class="admin-nav-item">
+                    <a href="{{ url_for('admin_bp.logout') }}" class="admin-nav-link">
+                        <i class="fas fa-sign-out-alt"></i> Déconnexion
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+    
+    <div class="col-md-9">
+        <div class="admin-container">
+            <h2 class="admin-title">Gestion des Textes</h2>
+            
+            <!-- Add New Text Button -->
+            <div class="mb-4">
+                <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#addTextCollapse" aria-expanded="false" aria-controls="addTextCollapse">
+                    <i class="fas fa-plus-circle"></i> Ajouter un nouveau texte
+                </button>
+            </div>
+            
+            <!-- Add Text Form (Collapsible) -->
+            <div class="collapse mb-4" id="addTextCollapse">
+                <div class="card">
+                    <div class="card-header">
+                        <h4><i class="fas fa-plus-circle"></i> Nouveau texte</h4>
+                    </div>
+                    <div class="card-body">
+                        <form method="POST" action="{{ url_for('admin_bp.textes') }}">
+                            <input type="hidden" name="action" value="add">
+                            
+                            <div class="form-group mb-3">
+                                <label for="titre">Titre</label>
+                                <input type="text" class="form-control" id="titre" name="titre" required>
+                            </div>
+                            
+                            <div class="row mb-3">
+                                <div class="col-md-6">
+                                    <div class="form-group">
+                                        <label for="matiere-select">Matière</label>
+                                        <select class="form-control" id="matiere-select" required>
+                                            <option value="">Sélectionnez une matière</option>
+                                            {% for matiere in matieres %}
+                                            <option value="{{ matiere.id }}">{{ matiere.nom }}</option>
+                                            {% endfor %}
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="form-group">
+                                        <label for="sous-categorie-select">Sous-catégorie</label>
+                                        <select class="form-control" id="sous-categorie-select" name="sous_categorie_id" required>
+                                            <option value="">Sélectionnez d'abord une matière</option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="form-group mb-3">
+                                <label for="contenu">Contenu</label>
+                                <textarea class="form-control" id="contenu" name="contenu" rows="10" required></textarea>
+                                <small class="form-text text-muted">
+                                    Séparez les paragraphes par des lignes vides. Les titres des blocs peuvent être indiqués sur une ligne séparée et seront automatiquement détectés.
+                                </small>
+                            </div>
+                            
+                            <button type="submit" class="btn btn-primary">
+                                <i class="fas fa-save"></i> Créer et éditer
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- List of Textes -->
+            <div class="card">
+                <div class="card-header">
+                    <h4><i class="fas fa-file-alt"></i> Liste des textes</h4>
+                </div>
+                <div class="card-body">
+                    {% if grouped_textes %}
+                        <div class="accordion" id="textesAccordion">
+                            {% for matiere_id, matiere_data in grouped_textes.items() %}
+                            <div class="accordion-item mb-3">
+                                <h2 class="accordion-header" id="heading{{ matiere_id }}">
+                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ matiere_id }}" aria-expanded="false" aria-controls="collapse{{ matiere_id }}" style="background-color: {{ matiere_data.color }}; color: white;">
+                                        <i class="fas fa-book me-2"></i> {{ matiere_data.nom }}
+                                    </button>
+                                </h2>
+                                <div id="collapse{{ matiere_id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ matiere_id }}" data-bs-parent="#textesAccordion">
+                                    <div class="accordion-body">
+                                        {% for sous_cat_id, sous_cat_data in matiere_data.sous_categories.items() %}
+                                        <div class="sous-categorie-group">
+                                            <div class="sous-categorie-header" style="border-left: 5px solid {{ matiere_data.color }};">
+                                                <i class="fas fa-list-ul me-2"></i> {{ sous_cat_data.nom }}
+                                            </div>
+                                            
+                                            <div class="row">
+                                                {% for texte in sous_cat_data.textes %}
+                                                <div class="col-md-6 mb-3">
+                                                    <div class="texte-card" style="border-left-color: {{ matiere_data.color }};">
+                                                        <h5>{{ texte.titre }}</h5>
+                                                        <p class="date-info">
+                                                            Dernière mise à jour: {{ texte.updated_at.strftime('%d/%m/%Y à %H:%M') }}
+                                                        </p>
+                                                        <div class="texte-actions">
+                                                            <a href="{{ url_for('admin_bp.edit_texte', texte_id=texte.id) }}" class="btn btn-sm btn-primary">
+                                                                <i class="fas fa-edit"></i> Éditer
+                                                            </a>
+                                                            <a href="{{ url_for('admin_bp.historique', texte_id=texte.id) }}" class="btn btn-sm btn-info">
+                                                                <i class="fas fa-history"></i> Historique
+                                                            </a>
+                                                            <form method="POST" action="{{ url_for('admin_bp.textes') }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce texte ?')">
+                                                                <input type="hidden" name="action" value="delete">
+                                                                <input type="hidden" name="texte_id" value="{{ texte.id }}">
+                                                                <button type="submit" class="btn btn-sm btn-danger">
+                                                                    <i class="fas fa-trash"></i>
+                                                                </button>
+                                                            </form>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                {% endfor %}
+                                            </div>
+                                        </div>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    {% else %}
+                        <div class="alert alert-info">
+                            Aucun texte n'a été ajouté. Utilisez le formulaire ci-dessus pour créer votre premier texte.
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
+{% endblock %}

api/templates/base.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="fr" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Plateforme Éducative{% endblock %}</title>
+    
+    <!-- Bootstrap CSS from CDN -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Font Awesome for icons -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    
+    <!-- Additional CSS specific to templates -->
+    {% block styles %}{% endblock %}
+</head>
+<body>
+    <!-- Header -->
+    <header class="main-header">
+        <div class="container header-container">
+            <h1 class="site-title">
+                <a href="{{ url_for('main_bp.index') }}">Méthodologies</a>
+            </h1>
+            
+            <div class="header-actions">
+                <!-- Theme toggle button -->
+                <button id="theme-toggle" class="theme-toggle" title="Changer de thème">
+                    <i class="fas fa-moon"></i>
+                </button>
+                
+                <!-- Admin link if admin is logged in -->
+                {% if session.get('admin_logged_in') %}
+                <a href="{{ url_for('admin_bp.dashboard') }}" class="btn btn-primary btn-sm ms-2">
+                    <i class="fas fa-cog"></i> Gestion
+                </a>
+                {% endif %}
+            </div>
+        </div>
+    </header>
+    
+    <!-- Flash messages -->
+    <div class="container mt-3">
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ category if category != 'message' else 'info' }} alert-dismissible fade show" role="alert">
+                        {{ message }}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+    </div>
+    
+    <!-- Main content -->
+    <main class="main-content">
+        <div class="container">
+            {% block content %}{% endblock %}
+        </div>
+    </main>
+    
+    <!-- Footer -->
+    <footer class="main-footer">
+        <div class="container footer-content">
+            <div>
+                <p>&copy; {{ year|default(2023) }} Méthodologies - Tous droits réservés</p>
+                <ul class="footer-links">
+                    <li><a href="#">À propos</a></li>
+                    <li><a href="#">Contact</a></li>
+                    <li><a href="#">Mentions légales</a></li>
+                </ul>
+            </div>
+            
+            <!-- Feedback form -->
+            <div class="feedback-form">
+                <h4 class="feedback-title">Votre avis nous intéresse</h4>
+                <form id="feedback-form" action="{{ url_for('main_bp.submit_feedback') }}" method="POST">
+                    <div class="form-group mb-2">
+                        <textarea id="feedback-message" name="message" class="form-control" rows="2" placeholder="Laissez-nous un message..."></textarea>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Envoyer</button>
+                </form>
+            </div>
+        </div>
+    </footer>
+    
+    <!-- Bootstrap JS Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Main JavaScript -->
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    
+    <!-- Additional JavaScript -->
+    {% block scripts %}{% endblock %}
+</body>
+</html>

api/templates/index.html

@@ -0,0 +1,79 @@
+{% extends 'base.html' %}
+
+{% block title %}Accueil - Méthodologies{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col-12">
+        <h2 class="mb-4">Bienvenue sur la plateforme de méthodologies</h2>
+        <p class="lead mb-4">Sélectionnez une matière pour découvrir des méthodologies adaptées à vos besoins.</p>
+    </div>
+</div>
+
+<!-- Subject Selection Section -->
+<section id="matieres-section" class="mb-5 slide-in-up">
+    <h3 class="mb-3">Matières</h3>
+    <div class="row">
+        {% for matiere in matieres %}
+        <div class="col-md-4 mb-4">
+            <div class="subject-card" data-matiere-id="{{ matiere.id }}">
+                <div class="subject-indicator" style="background-color: {{ matiere.color_code }};"></div>
+                <h3>{{ matiere.nom }}</h3>
+                <p>Cliquez pour explorer les méthodologies dans cette matière</p>
+                <div class="text-end">
+                    <span class="btn btn-sm" style="background-color: {{ matiere.color_code }}; color: white;">
+                        <i class="fas fa-arrow-right"></i>
+                    </span>
+                </div>
+            </div>
+        </div>
+        {% else %}
+        <div class="col-12">
+            <div class="alert alert-info">
+                Aucune matière n'est disponible pour le moment.
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</section>
+
+<!-- Categories Section (initially hidden) -->
+<section id="sous-categories-section" class="mb-5 d-none fade-in">
+    <h3 class="mb-3">Types de méthodologies</h3>
+    <div class="row">
+        <div class="col-md-6 col-lg-4">
+            <div class="selection-container">
+                <h4 class="selection-title">Sélectionnez un type</h4>
+                <ul id="sous-categories-list" class="selection-list">
+                    <!-- Sous catégories will be loaded here -->
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Texts Section (initially hidden) -->
+<section id="textes-section" class="mb-5 d-none fade-in">
+    <h3 class="mb-3">Méthodologies</h3>
+    <div class="row">
+        <div class="col-md-6 col-lg-4">
+            <div class="selection-container">
+                <h4 class="selection-title">Sélectionnez une méthodologie</h4>
+                <ul id="textes-list" class="selection-list">
+                    <!-- Textes will be loaded here -->
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Content Display Section (initially hidden) -->
+<section id="content-section" class="mb-5 d-none fade-in">
+    <div class="content-viewer">
+        <h2 id="content-title" class="content-title"><!-- Title will be populated here --></h2>
+        <div id="content-blocks" class="content-blocks">
+            <!-- Content blocks will be populated here -->
+        </div>
+    </div>
+</section>
+{% endblock %}

app.py

@@ -0,0 +1,8 @@
+from api.index import app, db
+
+# Create database tables if they don't exist
+with app.app_context():
+    db.create_all()
+
+if __name__ == '__main__':
+    app.run(debug=True)

app/__init__.py

@@ -1,28 +0,0 @@
-from flask import Flask
-from flask_sqlalchemy import SQLAlchemy
-from flask_admin import Admin
-from flask_ckeditor import CKEditor
-from flask_migrate import Migrate
-from config import Config
-
-db = SQLAlchemy()
-migrate = Migrate()  # Initialisation de Flask-Migrate
-admin = Admin(name='Mon Projet', template_mode='bootstrap3')
-ckeditor = CKEditor()
-
-def create_app(config_class=Config):
-    app = Flask(__name__)
-    app.config.from_object(config_class)
-
-    db.init_app(app)
-    migrate.init_app(app, db)   
-    admin.init_app(app)
-    ckeditor.init_app(app)
-
-    from app.admin import bp as custom_admin_bp  # 
-    app.register_blueprint(custom_admin_bp)
-
-    from app.views import bp as main_bp
-    app.register_blueprint(main_bp)
-
-    return app

app/admin.py

@@ -1,70 +0,0 @@
-from flask import Blueprint
-from flask_admin.contrib.sqla import ModelView
-from flask_admin import BaseView, expose
-from app import db, admin
-from app.models import Matiere, SousCategorie, Texte
-from flask_ckeditor import CKEditorField  
-from wtforms import StringField, TextAreaField 
-from bleach import clean
-from bs4 import BeautifulSoup
-
-
-bp = Blueprint('custom_admin', __name__, url_prefix='/admin')
-
-def sanitize_html(html_content):
-    # TRÈS PERMISSIF - UNIQUEMENT POUR LE TEST
-    return clean(html_content, tags=[], attributes={}, strip=False)
-
-
-
-class MatiereView(ModelView):
-    column_list = ('nom', 'sous_categories')  # Colonnes à afficher dans la liste
-    form_columns = ('nom',) 
-
-class SousCategorieView(ModelView):
-    column_list = ('nom', 'matiere')
-    form_columns = ('nom', 'matiere')
-    #form_overrides = dict(nom=StringField)
-    form_args = {  # Amélioration de la sélection de la matière
-        'matiere': {
-            'query_factory': lambda: Matiere.query.order_by(func.lower(Matiere.nom)) #Tri insensible à la casse
-        }
-    }
-    def on_model_change(self, form, model, is_created):
-        # Vérification de l'unicité (nom, matiere_id) *avant* l'insertion/mise à jour
-        if is_created:
-          existing = SousCategorie.query.filter(
-              func.lower(SousCategorie.nom) == func.lower(form.nom.data),
-              SousCategorie.matiere_id == form.matiere.data.id
-          ).first()
-          if existing:
-              raise ValueError("Cette sous-catégorie existe déjà pour cette matière.")
-        else: #Mise à jour
-            existing = SousCategorie.query.filter(
-              func.lower(SousCategorie.nom) == func.lower(form.nom.data),
-              SousCategorie.matiere_id == form.matiere.data.id,
-              SousCategorie.id != model.id 
-          ).first()
-
-            if existing:
-              raise ValueError("Cette sous-catégorie existe déjà pour cette matière.")
-
-
-class TexteView(ModelView):
-    column_list = ('titre', 'sous_categorie')
-    form_columns = ('titre', 'contenu', 'sous_categorie')
-    form_overrides = dict(contenu=CKEditorField)
-    form_args = {
-      'sous_categorie': {
-          'query_factory': lambda: SousCategorie.query.join(Matiere).order_by(func.lower(Matiere.nom), func.lower(SousCategorie.nom))
-      }
-    }
-   
-    def on_model_change(self, form, model, is_created):
-        model.contenu = sanitize_html(form.contenu.data)
-
-
-
-admin.add_view(MatiereView(Matiere, db.session))
-admin.add_view(SousCategorieView(SousCategorie, db.session))
-admin.add_view(TexteView(Texte, db.session))

app/models.py

@@ -1,34 +0,0 @@
-from app import db
-from sqlalchemy import func # pour lower()
-
-class Matiere(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    nom = db.Column(db.String(64), unique=True, nullable=False)
-    sous_categories = db.relationship('SousCategorie', backref='matiere', lazy='dynamic', cascade="all, delete-orphan")
-
-    def __repr__(self):
-        return f'<Matiere {self.nom}>'
-
-
-class SousCategorie(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    nom = db.Column(db.String(64), nullable=False)
-    matiere_id = db.Column(db.Integer, db.ForeignKey('matiere.id'), nullable=False)
-    textes = db.relationship('Texte', backref='sous_categorie', lazy='dynamic', cascade="all, delete-orphan")
-    # Contrainte d'unicité composite
-    __table_args__ = (
-        db.UniqueConstraint('nom', 'matiere_id', name='_nom_matiere_uc'),
-    )
-
-
-    def __repr__(self):
-        return f'<SousCategorie {self.nom}>'
-
-class Texte(db.Model):
-    id = db.Column(db.Integer, primary_key=True)
-    titre = db.Column(db.String(128), nullable=False)
-    contenu = db.Column(db.Text, nullable=False)
-    sous_categorie_id = db.Column(db.Integer, db.ForeignKey('sous_categorie.id'), nullable=False)
-    
-    def __repr__(self):
-        return f'<Texte {self.titre}>'

app/static/css/style.css

@@ -1,585 +0,0 @@
-/* Style pour la page des matières */
-.page-title {
-  text-align: center;
-  margin: 2rem 0 3rem;
-  font-size: 2.5rem;
-  color: #2c3e50;
-  position: relative;
-}
-
-.page-title::after {
-  content: '';
-  position: absolute;
-  bottom: -10px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60px;
-  height: 3px;
-  background: #3498db;
-  border-radius: 2px;
-}
-
-.subjects-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-  padding: 1rem;
-}
-
-.subject-card {
-  background: white;
-  border-radius: 12px;
-  overflow: hidden;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-  position: relative;
-}
-
-.subject-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 15px rgba(52, 152, 219, 0.2);
-}
-
-.subject-link {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5rem;
-  text-decoration: none;
-  color: inherit;
-  position: relative;
-  z-index: 1;
-}
-
-.subject-link::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, #46a1dd 0%, #2980b9 100%);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  z-index: -1;
-}
-
-.subject-link:hover {
-  color: white;
-}
-
-.subject-link:hover::after {
-  opacity: 1;
-}
-
-.subject-name {
-  font-size: 1.2rem;
-  font-weight: 600;
-  transition: color 0.3s ease;
-}
-
-.subject-arrow {
-  font-size: 1.5rem;
-  opacity: 0;
-  transform: translateX(-10px);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.subject-link:hover .subject-arrow {
-  opacity: 1;
-  transform: translateX(0);
-}
-
-.no-subjects {
-  text-align: center;
-  color: #95a5a6;
-  font-size: 1.2rem;
-  padding: 2rem;
-  grid-column: 1 / -1;
-}
-
-/* Animation d'apparition */
-@keyframes cardEntrance {
-  from {
-      opacity: 0;
-      transform: translateY(20px);
-  }
-  to {
-      opacity: 1;
-      transform: translateY(0);
-  }
-}
-
-.subject-card {
-  animation: cardEntrance 0.6s ease forwards;
-  animation-delay: calc(var(--index) * 0.1s);
-}
-
-@media (max-width: 768px) {
-  .subjects-grid {
-      grid-template-columns: 1fr;
-  }
-  
-  .subject-link {
-      padding: 1rem;
-  }
-}
-
-
-/* Page matière */
-.subject-container {
-  max-width: 1200px;
-  margin: 2rem auto;
-  padding: 0 1rem;
-}
-
-.subject-header {
-  text-align: center;
-  margin-bottom: 3rem;
-  position: relative;
-}
-
-.subject-title {
-  font-size: 2.5rem;
-  color: #2c3e50;
-  margin-bottom: 1rem;
-  position: relative;
-  display: inline-block;
-}
-
-.subject-header-decoration {
-  height: 4px;
-  width: 80px;
-  background: #3498db;
-  margin: 0 auto;
-  border-radius: 2px;
-  position: relative;
-  animation: headerLine 1s ease-out;
-}
-
-.subcategories-section {
-  background: white;
-  padding: 2rem;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
-}
-
-.section-title {
-  color: #4a5568;
-  font-size: 1.5rem;
-  margin-bottom: 2rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 2px solid #e2e8f0;
-}
-
-.subcategories-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1.5rem;
-}
-
-.subcategory-card {
-  background: white;
-  border-radius: 8px;
-  padding: 1.5rem;
-  text-decoration: none;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  border: 1px solid #e2e8f0;
-  position: relative;
-  overflow: hidden;
-}
-
-.subcategory-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 10px 15px rgba(52, 152, 219, 0.15);
-  border-color: #3498db;
-}
-
-.subcategory-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.subcategory-name {
-  color: #2c3e50;
-  font-weight: 500;
-  font-size: 1.1rem;
-  transition: color 0.3s ease;
-}
-
-.arrow-icon {
-  width: 24px;
-  height: 24px;
-  opacity: 0;
-  transform: translateX(-10px);
-  transition: all 0.3s ease;
-  color: #3498db;
-}
-
-.subcategory-card:hover .arrow-icon {
-  opacity: 1;
-  transform: translateX(0);
-}
-
-.no-subcategories {
-  text-align: center;
-  padding: 3rem;
-  grid-column: 1 / -1;
-}
-
-.empty-icon {
-  width: 60px;
-  height: 60px;
-  margin-bottom: 1rem;
-  color: #cbd5e0;
-}
-
-.no-subcategories p {
-  color: #a0aec0;
-  font-size: 1.1rem;
-}
-
-/* Animations */
-@keyframes headerLine {
-  from { width: 0; opacity: 0; }
-  to { width: 80px; opacity: 1; }
-}
-
-@media (max-width: 768px) {
-  .subject-container {
-      padding: 0;
-  }
-  
-  .subcategories-section {
-      padding: 1.5rem;
-  }
-  
-  .subject-title {
-      font-size: 2rem;
-  }
-}
-
-
-/*sous catégorie*/ 
-/* Page textes */
-.content-container {
-  max-width: 1200px;
-  margin: 2rem auto;
-  padding: 0 1.5rem;
-}
-
-.header-section {
-  text-align: center;
-  margin-bottom: 3rem;
-}
-
-.main-title {
-  font-size: 2.3rem;
-  color: #2c3e50;
-  margin-bottom: 0.5rem;
-}
-
-.title-underline {
-  width: 60px;
-  height: 3px;
-  background: linear-gradient(135deg, #46a1dd 0%, #2980b9 100%);
-  margin: 0 auto;
-  border-radius: 2px;
-}
-
-.texts-section {
-  background: #fff;
-  padding: 2rem;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
-}
-
-.section-subtitle {
-  color: #4a5568;
-  font-size: 1.4rem;
-  margin-bottom: 2rem;
-  padding-bottom: 0.75rem;
-  border-bottom: 2px solid #edf2f7;
-}
-
-.texts-grid {
-  display: grid;
-  gap: 1.2rem;
-}
-
-.text-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5rem;
-  background: #fff;
-  border-radius: 8px;
-  border: 1px solid #e2e8f0;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  text-decoration: none;
-  position: relative;
-}
-
-.text-card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.15);
-  border-color: #3498db;
-}
-
-.text-title {
-  color: #2c3e50;
-  font-size: 1.1rem;
-  margin-bottom: 0.5rem;
-}
-
-.text-meta {
-  display: flex;
-  gap: 1rem;
-  font-size: 0.9rem;
-  color: #718096;
-}
-
-.meta-item i {
-  margin-right: 0.4rem;
-  color: #3498db;
-}
-
-.card-arrow {
-  color: #3498db;
-  opacity: 0;
-}
-
-/* le texte, cours*/ 
-
-/* Page texte */
-.text-container {
-  max-width: 800px;
-  margin: 2rem auto;
-  padding: 0 1.5rem;
-}
-
-.text-header {
-  text-align: center;
-  margin-bottom: 3rem;
-}
-
-.text-title {
-  font-size: 2.4rem;
-  color: #2c3e50;
-  margin-bottom: 1rem;
-  line-height: 1.3;
-  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  display: inline-block;
-}
-
-.text-meta {
-  display: flex;
-  gap: 1.5rem;
-  justify-content: center;
-  color: #718096;
-  font-size: 0.95rem;
-}
-
-.meta-item i {
-  margin-right: 0.5rem;
-  color: #3498db;
-}
-
-.texte-contenu {
- content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(135deg, #46a1dd 0%, #2980b9 100%);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  z-index: -1;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
-  animation: fadeIn 0.6s ease-out;
-}
-
-/* Styles de contenu riche */
-.texte-contenu h2,
-.texte-contenu h3 {
-  color: #2c3e50;
-  margin: 2rem 0 1rem;
-}
-
-.texte-contenu h2 {
-  font-size: 1.6rem;
-  border-bottom: 2px solid #e2e8f0;
-  padding-bottom: 0.5rem;
-}
-
-.texte-contenu h3 {
-  font-size: 1.4rem;
-}
-
-.texte-contenu p {
-  margin-bottom: 1.5rem;
-}
-
-.texte-contenu img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  margin: 1.5rem 0;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-}
-
-.texte-contenu ul,
-.texte-contenu ol {
-  margin: 1.5rem 0;
-  padding-left: 2rem;
-}
-
-.texte-contenu li {
-  margin-bottom: 0.8rem;
-}
-
-.texte-contenu blockquote {
-  border-left: 4px solid #3498db;
-  margin: 1.5rem 0;
-  padding: 1rem 1.5rem;
-  background: #f8f9fa;
-  border-radius: 0 6px 6px 0;
-}
-
-/* additif */
-
-/* Header */
-.main-navbar {
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
-  padding: 0.8rem 1rem;
-  position: relative;
-  z-index: 1000;
-}
-
-.navbar-brand {
-  font-weight: 700;
-  color: #2c3e50 !important;
-  font-size: 1.4rem;
-  display: flex;
-  align-items: center;
-  transition: transform 0.3s ease;
-}
-
-.navbar-brand:hover {
-  transform: translateX(5px);
-}
-
-.navbar-brand::after {
-  content: "";
-  display: inline-block;
-  width: 2px;
-  height: 24px;
-  background: #3498db;
-  margin-left: 1rem;
-  transform: skew(-15deg);
-}
-
-.nav-link {
-  color: #4a5568 !important;
-  font-weight: 500;
-  padding: 0.5rem 1.2rem !important;
-  border-radius: 8px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-}
-
-.nav-link:hover {
-  color: #3498db !important;
-  background: rgba(52, 152, 219, 0.08);
-}
-
-.nav-link.admin-link {
-  background: rgba(52, 152, 219, 0.1);
-  margin-left: 1rem;
-}
-
-.nav-link.admin-link:hover {
-  background: rgba(52, 152, 219, 0.2);
-}
-
-.nav-link.admin-link::before {
-  content: "\f023";
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  margin-right: 0.5rem;
-}
-
-/* Footer */
-.main-footer {
-  background: #2c3e50;
-  color: #ecf0f1;
-  padding: 1rem 0; /* Réduc pour pc */
-  margin-top: auto;
-  border-top: 3px solid #3498db;
-}
-
-.main-footer .social-links {
-  display: flex;
-  justify-content: center;
-  gap: 1.5rem;
-  margin: 1.5rem 0;
-}
-
-.main-footer .social-links a {
-  color: #bdc3c7;
-  font-size: 1.4rem;
-  transition: all 0.3s ease;
-}
-
-.main-footer .social-links a:hover {
-  color: #3498db;
-  transform: translateY(-3px);
-}
-
-.main-footer .copyright {
-  font-size: 0.9rem;
-  opacity: 0.8;
-  margin-top: 1rem;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .main-footer {
-      padding: 0.75rem 0; /* Réduc pour mobile */
-  }
-}
-  
-  .nav-link {
-      padding: 0.5rem !important;
-  }
-  
-  .main-footer {
-      padding: 1.5rem 0;
-  }
-}
- .copyright {
-  font-size: 0.9rem;
-  opacity: 0.8;
-  margin-top: 1rem;
-  text-align: center;
-}
-
-.text-meta {
-  display: flex;
-  gap: 1.5rem;
-  margin-top: 0.8rem;
-}
-
-.meta-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.9rem;
-  color: #6c757d;
-}

app/templates/base.html

@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <meta charset="UTF-8">
-    <title>{% block title %}Mon Projet{% endblock %}</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
-     <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
-    {% block head %}{% endblock %}
-</head>
-<body class="d-flex flex-column min-vh-100">
-  
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <a class="navbar-brand" href="{{ url_for('main.index') }}">Mariam Ai</a>
-      <ul class="navbar-nav ml-auto"> <!-- ml-auto pour aligner à droite -->
-      
-      </ul>
-  </nav>
-
-    <div class="container mt-4 flex-grow-1">
-        {% block content %}{% endblock %}
-    </div> <!-- End of main container -->
-
-    <footer class="main-footer">
-      <div class="container">
-          <div class="social-links">
-              <a href="https://whatsapp.com/channel/0029VazlRNk9WtBuQuAzUU2d"><i class="fab fa-whatsapp"></i></a>
-              <a href="https://www.tiktok.com/@mariamai241"><i class="fab fa-tiktok"></i></a>
-          </div>
-          <div class="copyright">
-              ©2025 Mariam Ai. Tous droits réservés.
-          </div>
-      </div>
-  </footer>
-
-    <!-- Bootstrap JS, Popper.js, and jQuery (Optional, but often needed) -->
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-    {% block scripts %}{% endblock %}
-</body>
-</html>
-

app/templates/index.html

@@ -1,19 +0,0 @@
-{% extends "base.html" %}
-{% block content %}
-<div class="container">
-    <h1 class="page-title">Matières</h1>
-    
-    <div class="subjects-grid">
-    {% for matiere in matieres %}
-        <div class="subject-card">
-            <a class="subject-link" href="{{ url_for('main.matiere', matiere_id=matiere.id) }}">
-                <span class="subject-name">{{ matiere.nom }}</span>
-                <span class="subject-arrow">→</span>
-            </a>
-        </div>
-    {% else %}
-        <p class="no-subjects">Aucune matière disponible</p>
-    {% endfor %}
-    </div>
-</div>
-{% endblock %}

app/templates/matiere.html

@@ -1,34 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<div class="subject-container">
-    <div class="subject-header">
-        <h1 class="subject-title">{{ matiere.nom }}</h1>
-        <div class="subject-header-decoration"></div>
-    </div>
-
-    <div class="subcategories-section">
-        <h2 class="section-title">Sous-catégories</h2>
-        
-        <div class="subcategories-grid">
-            {% for sous_categorie in sous_categories %}
-            <a href="{{ url_for('main.sous_categorie', sous_categorie_id=sous_categorie.id) }}" class="subcategory-card">
-                <div class="subcategory-content">
-                    <span class="subcategory-name">{{ sous_categorie.nom }}</span>
-                    <svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
-                    </svg>
-                </div>
-            </a>
-            {% else %}
-            <div class="no-subcategories">
-                <svg class="empty-icon" viewBox="0 0 24 24">
-                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/>
-                </svg>
-                <p>Aucune sous-catégorie disponible</p>
-            </div>
-            {% endfor %}
-        </div>
-    </div>
-</div>
-{% endblock %}

app/templates/sous_categorie.html

@@ -1,35 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<div class="content-container">
-    <div class="header-section">
-        <h1 class="main-title">{{ sous_categorie.nom }}</h1>
-        <div class="title-underline"></div>
-    </div>
-
-    <div class="texts-section">
-        <h2 class="section-subtitle">Textes</h2>
-        
-        <div class="texts-grid">
-            {% for texte in textes %}
-            <a href="{{ url_for('main.texte', texte_id=texte.id) }}" class="text-card">
-                <div class="card-content">
-                    <h3 class="text-title">{{ texte.titre }}</h3>
-                    <div class="text-meta">
-                        <!-- Ajoutez des métadonnées si disponibles -->
-                        <span class="meta-item"><i class="fas fa-calendar-alt"></i> Date</span>
-                        <span class="meta-item"><i class="fas fa-user-edit"></i> Auteur</span>
-                    </div>
-                </div>
-                <i class="fas fa-arrow-right card-arrow"></i>
-            </a>
-            {% else %}
-            <div class="empty-state">
-                <i class="fas fa-book-open empty-icon"></i>
-                <p>Aucun texte disponible dans cette sous-catégorie</p>
-            </div>
-            {% endfor %}
-        </div>
-    </div>
-</div>
-{% endblock %}

app/templates/texte.html

@@ -1,15 +0,0 @@
- {% extends "base.html" %}
-
-{% block content %}
-  <div class="container">
-    <h1>{{ texte.titre }}</h1>
-    <p class="author">
-      
-        Auteur : Admin 
-      
-    </p>
-    <div>
-      {{ texte.contenu|safe }}
-    </div>
-  </div>
-{% endblock %}

app/views.py

@@ -1,28 +0,0 @@
-from flask import Blueprint, render_template, abort
-from app.models import Matiere, SousCategorie, Texte
-from sqlalchemy import func 
-
-bp = Blueprint('main', __name__)
-
-
-@bp.route('/')
-def index():
-    matieres = Matiere.query.order_by(func.lower(Matiere.nom)).all()  
-    return render_template('index.html', matieres=matieres)
-
-@bp.route('/matiere/<int:matiere_id>')
-def matiere(matiere_id):
-    matiere = Matiere.query.get_or_404(matiere_id)
-    sous_categories = matiere.sous_categories.order_by(func.lower(SousCategorie.nom)).all()  # Tri insensible
-    return render_template('matiere.html', matiere=matiere, sous_categories=sous_categories)
-
-@bp.route('/sous_categorie/<int:sous_categorie_id>')
-def sous_categorie(sous_categorie_id):
-    sous_categorie = SousCategorie.query.get_or_404(sous_categorie_id)
-    textes = sous_categorie.textes.order_by(Texte.titre).all()  # Tri par titre
-    return render_template('sous_categorie.html', sous_categorie=sous_categorie, textes=textes)
-
-@bp.route('/texte/<int:texte_id>')
-def texte(texte_id):
-    texte = Texte.query.get_or_404(texte_id)
-    return render_template('texte.html', texte=texte)

config.py

@@ -1,17 +0,0 @@
-import os
-
-class Config:
-    SECRET_KEY = os.getenv("SECRET_KEY", "changeme")  # Utilise une variable d'environnement, avec une valeur par défaut à changer
-    
-    SQLALCHEMY_DATABASE_URI =os.getenv("DATABASE_URL")
-    SQLALCHEMY_TRACK_MODIFICATIONS = False
-
-    SQLALCHEMY_ENGINE_OPTIONS = {
-        # Recycle connections after 280 seconds (less than potential 5-min server timeout)
-        'pool_recycle': 280,
-        # Optionally, enable pre-ping for extra robustness (recommended)
-        'pool_pre_ping': True
-    }
-    
-    
-    FLASK_ADMIN_SWATCH = 'cerulean'  # Optionnel, permet de changer le style facilement

main.py

@@ -0,0 +1,10 @@
+import os
+from api.index import app, db
+
+# Create database tables if they don't exist
+with app.app_context():
+    db.create_all()
+
+if __name__ == '__main__':
+    port = int(os.environ.get("PORT", 5000))
+    app.run(host="0.0.0.0", port=port)

migrations/README

@@ -1 +0,0 @@
-Single-database configuration for Flask.

migrations/alembic.ini

@@ -1,50 +0,0 @@
-# A generic, single database configuration.
-
-[alembic]
-# template used to generate migration files
-# file_template = %%(rev)s_%%(slug)s
-
-# set to 'true' to run the environment during
-# the 'revision' command, regardless of autogenerate
-# revision_environment = false
-
-
-# Logging configuration
-[loggers]
-keys = root,sqlalchemy,alembic,flask_migrate
-
-[handlers]
-keys = console
-
-[formatters]
-keys = generic
-
-[logger_root]
-level = WARN
-handlers = console
-qualname =
-
-[logger_sqlalchemy]
-level = WARN
-handlers =
-qualname = sqlalchemy.engine
-
-[logger_alembic]
-level = INFO
-handlers =
-qualname = alembic
-
-[logger_flask_migrate]
-level = INFO
-handlers =
-qualname = flask_migrate
-
-[handler_console]
-class = StreamHandler
-args = (sys.stderr,)
-level = NOTSET
-formatter = generic
-
-[formatter_generic]
-format = %(levelname)-5.5s [%(name)s] %(message)s
-datefmt = %H:%M:%S

migrations/env.py

@@ -1,113 +0,0 @@
-import logging
-from logging.config import fileConfig
-
-from flask import current_app
-
-from alembic import context
-
-# this is the Alembic Config object, which provides
-# access to the values within the .ini file in use.
-config = context.config
-
-# Interpret the config file for Python logging.
-# This line sets up loggers basically.
-fileConfig(config.config_file_name)
-logger = logging.getLogger('alembic.env')
-
-
-def get_engine():
-    try:
-        # this works with Flask-SQLAlchemy<3 and Alchemical
-        return current_app.extensions['migrate'].db.get_engine()
-    except (TypeError, AttributeError):
-        # this works with Flask-SQLAlchemy>=3
-        return current_app.extensions['migrate'].db.engine
-
-
-def get_engine_url():
-    try:
-        return get_engine().url.render_as_string(hide_password=False).replace(
-            '%', '%%')
-    except AttributeError:
-        return str(get_engine().url).replace('%', '%%')
-
-
-# add your model's MetaData object here
-# for 'autogenerate' support
-# from myapp import mymodel
-# target_metadata = mymodel.Base.metadata
-config.set_main_option('sqlalchemy.url', get_engine_url())
-target_db = current_app.extensions['migrate'].db
-
-# other values from the config, defined by the needs of env.py,
-# can be acquired:
-# my_important_option = config.get_main_option("my_important_option")
-# ... etc.
-
-
-def get_metadata():
-    if hasattr(target_db, 'metadatas'):
-        return target_db.metadatas[None]
-    return target_db.metadata
-
-
-def run_migrations_offline():
-    """Run migrations in 'offline' mode.
-
-    This configures the context with just a URL
-    and not an Engine, though an Engine is acceptable
-    here as well.  By skipping the Engine creation
-    we don't even need a DBAPI to be available.
-
-    Calls to context.execute() here emit the given string to the
-    script output.
-
-    """
-    url = config.get_main_option("sqlalchemy.url")
-    context.configure(
-        url=url, target_metadata=get_metadata(), literal_binds=True
-    )
-
-    with context.begin_transaction():
-        context.run_migrations()
-
-
-def run_migrations_online():
-    """Run migrations in 'online' mode.
-
-    In this scenario we need to create an Engine
-    and associate a connection with the context.
-
-    """
-
-    # this callback is used to prevent an auto-migration from being generated
-    # when there are no changes to the schema
-    # reference: http://alembic.zzzcomputing.com/en/latest/cookbook.html
-    def process_revision_directives(context, revision, directives):
-        if getattr(config.cmd_opts, 'autogenerate', False):
-            script = directives[0]
-            if script.upgrade_ops.is_empty():
-                directives[:] = []
-                logger.info('No changes in schema detected.')
-
-    conf_args = current_app.extensions['migrate'].configure_args
-    if conf_args.get("process_revision_directives") is None:
-        conf_args["process_revision_directives"] = process_revision_directives
-
-    connectable = get_engine()
-
-    with connectable.connect() as connection:
-        context.configure(
-            connection=connection,
-            target_metadata=get_metadata(),
-            **conf_args
-        )
-
-        with context.begin_transaction():
-            context.run_migrations()
-
-
-if context.is_offline_mode():
-    run_migrations_offline()
-else:
-    run_migrations_online()

migrations/script.py.mako

@@ -1,24 +0,0 @@
-"""${message}
-
-Revision ID: ${up_revision}
-Revises: ${down_revision | comma,n}
-Create Date: ${create_date}
-
-"""
-from alembic import op
-import sqlalchemy as sa
-${imports if imports else ""}
-
-# revision identifiers, used by Alembic.
-revision = ${repr(up_revision)}
-down_revision = ${repr(down_revision)}
-branch_labels = ${repr(branch_labels)}
-depends_on = ${repr(depends_on)}
-
-
-def upgrade():
-    ${upgrades if upgrades else "pass"}
-
-
-def downgrade():
-    ${downgrades if downgrades else "pass"}

migrations/versions/80f91a17b1db_initial_migration.py

@@ -1,112 +0,0 @@
-"""Initial migration
-
-Revision ID: 80f91a17b1db
-Revises: 
-Create Date: 2025-02-17 12:20:44.860732
-
-"""
-from alembic import op
-import sqlalchemy as sa
-from sqlalchemy.dialects import postgresql
-
-# revision identifiers, used by Alembic.
-revision = '80f91a17b1db'
-down_revision = None
-branch_labels = None
-depends_on = None
-
-
-def upgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    op.create_table('sous_categorie',
-    sa.Column('id', sa.Integer(), nullable=False),
-    sa.Column('nom', sa.String(length=64), nullable=False),
-    sa.Column('matiere_id', sa.Integer(), nullable=False),
-    sa.ForeignKeyConstraint(['matiere_id'], ['matiere.id'], ),
-    sa.PrimaryKeyConstraint('id'),
-    sa.UniqueConstraint('nom', 'matiere_id', name='_nom_matiere_uc')
-    )
-    op.create_table('texte',
-    sa.Column('id', sa.Integer(), nullable=False),
-    sa.Column('titre', sa.String(length=128), nullable=False),
-    sa.Column('contenu', sa.Text(), nullable=False),
-    sa.Column('sous_categorie_id', sa.Integer(), nullable=False),
-    sa.ForeignKeyConstraint(['sous_categorie_id'], ['sous_categorie.id'], ),
-    sa.PrimaryKeyConstraint('id')
-    )
-    op.drop_table('cours')
-    op.drop_table('subjects')
-    op.drop_table('texts')
-    op.drop_table('commentaire')
-    op.drop_table('categories')
-    op.drop_table('categorie')
-    with op.batch_alter_table('matiere', schema=None) as batch_op:
-        batch_op.alter_column('nom',
-               existing_type=sa.VARCHAR(length=255),
-               type_=sa.String(length=64),
-               existing_nullable=False)
-        batch_op.create_unique_constraint(None, ['nom'])
-        batch_op.drop_column('description')
-
-    # ### end Alembic commands ###
-
-
-def downgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    with op.batch_alter_table('matiere', schema=None) as batch_op:
-        batch_op.add_column(sa.Column('description', sa.TEXT(), autoincrement=False, nullable=True))
-        batch_op.drop_constraint(None, type_='unique')
-        batch_op.alter_column('nom',
-               existing_type=sa.String(length=64),
-               type_=sa.VARCHAR(length=255),
-               existing_nullable=False)
-
-    op.create_table('categorie',
-    sa.Column('id', sa.INTEGER(), server_default=sa.text("nextval('categorie_id_seq'::regclass)"), autoincrement=True, nullable=False),
-    sa.Column('nom', sa.VARCHAR(length=255), autoincrement=False, nullable=False),
-    sa.Column('matiere_id', sa.INTEGER(), autoincrement=False, nullable=False),
-    sa.ForeignKeyConstraint(['matiere_id'], ['matiere.id'], name='fk_matiere', ondelete='CASCADE'),
-    sa.PrimaryKeyConstraint('id', name='categorie_pkey'),
-    postgresql_ignore_search_path=False
-    )
-    op.create_table('categories',
-    sa.Column('id', sa.INTEGER(), server_default=sa.text("nextval('categories_id_seq'::regclass)"), autoincrement=True, nullable=False),
-    sa.Column('name', sa.VARCHAR(length=100), autoincrement=False, nullable=False),
-    sa.Column('subject_id', sa.INTEGER(), autoincrement=False, nullable=False),
-    sa.ForeignKeyConstraint(['subject_id'], ['subjects.id'], name='categories_subject_id_fkey'),
-    sa.PrimaryKeyConstraint('id', name='categories_pkey'),
-    postgresql_ignore_search_path=False
-    )
-    op.create_table('commentaire',
-    sa.Column('id', sa.INTEGER(), autoincrement=True, nullable=False),
-    sa.Column('contenu', sa.TEXT(), autoincrement=False, nullable=False),
-    sa.Column('auteur', sa.VARCHAR(length=255), autoincrement=False, nullable=False),
-    sa.Column('date', postgresql.TIMESTAMP(), server_default=sa.text('CURRENT_TIMESTAMP'), autoincrement=False, nullable=True),
-    sa.Column('cours_id', sa.INTEGER(), autoincrement=False, nullable=False),
-    sa.ForeignKeyConstraint(['cours_id'], ['cours.id'], name='fk_cours', ondelete='CASCADE'),
-    sa.PrimaryKeyConstraint('id', name='commentaire_pkey')
-    )
-    op.create_table('texts',
-    sa.Column('id', sa.INTEGER(), autoincrement=True, nullable=False),
-    sa.Column('title', sa.VARCHAR(length=150), autoincrement=False, nullable=True),
-    sa.Column('content', sa.TEXT(), autoincrement=False, nullable=False),
-    sa.Column('category_id', sa.INTEGER(), autoincrement=False, nullable=False),
-    sa.ForeignKeyConstraint(['category_id'], ['categories.id'], name='texts_category_id_fkey'),
-    sa.PrimaryKeyConstraint('id', name='texts_pkey')
-    )
-    op.create_table('subjects',
-    sa.Column('id', sa.INTEGER(), autoincrement=True, nullable=False),
-    sa.Column('name', sa.VARCHAR(length=100), autoincrement=False, nullable=False),
-    sa.PrimaryKeyConstraint('id', name='subjects_pkey')
-    )
-    op.create_table('cours',
-    sa.Column('id', sa.INTEGER(), autoincrement=True, nullable=False),
-    sa.Column('titre', sa.VARCHAR(length=255), autoincrement=False, nullable=False),
-    sa.Column('description', sa.TEXT(), autoincrement=False, nullable=True),
-    sa.Column('categorie_id', sa.INTEGER(), autoincrement=False, nullable=False),
-    sa.ForeignKeyConstraint(['categorie_id'], ['categorie.id'], name='fk_categorie', ondelete='CASCADE'),
-    sa.PrimaryKeyConstraint('id', name='cours_pkey')
-    )
-    op.drop_table('texte')
-    op.drop_table('sous_categorie')
-    # ### end Alembic commands ###

run.py

@@ -1,6 +0,0 @@
-from app import create_app
-import os
-app = create_app()
-
-if __name__ == '__main__':
-    app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))