Update api/templates/index.html

api/templates/index.html

@@ -3,77 +3,38 @@
 {% 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>
+<!-- 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 (initially hidden) -->
-<section id="content-section" class="mb-5 d-none fade-in">
+<!-- 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"><!-- Title will be populated here --></h2>
+        <h2 id="content-title" class="content-title">
+            <!-- Le titre du contenu sera chargé ici par JavaScript -->
+        </h2>
         <div id="content-blocks" class="content-blocks">
-            <!-- Content blocks will be populated here -->
+            <!-- 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 %}