api/templates/index.html

{% extends 'base.html' %}

{% block title %}Accueil - Cours{% endblock %}

{% block content %}

<!-- Initial Instructions -->
{# Cette section est visible par défaut lorsque la page se charge #}
{# Elle sera cachée par JavaScript une fois qu'un contenu est sélectionné via les sidebars #}
<div id="initial-instructions" class="initial-instructions text-center mt-5">
    <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
    <h3>Bienvenue !</h3>
    <p class="lead">Utilisez le menu <i class="fas fa-bars"></i> en haut à gauche pour naviguer.</p>
    <p>Sélectionnez une matière, puis une sous-catégorie pour afficher le contenu ici.</p>
</div>

<!-- Content Display Section -->
{# Cette section est cachée par défaut ('d-none') #}
{# Elle sera rendue visible et remplie par JavaScript lorsque l'utilisateur sélectionne une sous-catégorie #}
<section id="content-section" class="mb-5 d-none">
    <div class="content-viewer">
        <h2 id="content-title" class="content-title">
            <!-- Le titre du contenu sera chargé ici par JavaScript -->
        </h2>
        <div id="content-blocks" class="content-blocks">
            <!-- Les blocs de contenu seront chargés ici par JavaScript -->
        </div>
    </div>
</section>

{% endblock %}

{% block scripts %}
    {# Si tu as du JavaScript spécifique à cette page (peu probable maintenant que tout est dans main.js), tu peux l'ajouter ici #}
    {# Par exemple : <script src="{{ url_for('static', filename='js/index_specific.js') }}"></script> #}
{% endblock %}

{% block styles %}
    {# Si tu as du CSS spécifique à cette page, tu peux l'ajouter ici #}
{% endblock %}