pagination favoris

public/styles/styleAccueil.css

@@ -31,3 +31,68 @@ body.light-mode .citation-du-jour {
     z-index: 5;
     position: relative;
 }
+
+/* ====== PAGINATION STYLES ====== */
+.pagination-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px 0;
+}
+
+.pagination-container select {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 10px;
+    padding: 5px;
+    font-size: 16px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+.pagination-container button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--main-light-gradient);
+    border: none;
+    border-radius: 5px;
+    padding: 5px 10px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
+.pagination-container button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Spinner style */
+.spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #000;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    animation: spin 1s linear infinite;
+    margin-left: 10px;
+    display: none;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Adaptation pour dark mode */
+body.dark-mode .pagination-container button {
+    background: var(--main-dark-gradient);
+    color: #fff;
+}
+
+body.dark-mode .pagination-container select {
+    border: 1px solid #555;
+    background: #333;
+    color: #fff;
+}

vue/favorits.php

@@ -1,6 +1,18 @@
 <?php
 global $twig;
 
+// Paramètres de la pagination
+$perPage = 30;
+$currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
+if ($currentPage < 1) {
+    $currentPage = 1;
+}
+
+$totalItems = count($favorites);
+$totalPages = ceil($totalItems / $perPage);
+$offset = ($currentPage - 1) * $perPage;
+$favoritesPaginated = array_slice($favorites, $offset, $perPage);
+
 echo $twig->render('head.html.twig', [
     'title'   => "Favoris",
     'style'   => "public/styles/styleAccueil.css",
@@ -10,7 +22,43 @@ echo $twig->render('head.html.twig', [
 echo $twig->render('bandeau.html.twig');
 
 echo $twig->render('quoteLittle.html.twig', [
-            'quotes' => $favorites,
+    'quotes' => $favoritesPaginated,
     'titre'  => "Favoris"
 ]);
 ?>
+
+<div class="pagination-container">
+    <button id="prev-page" <?php if($currentPage <= 1) echo "disabled"; ?>>Page précédente</button>
+    <select id="page-selector">
+        <?php for($page = 1; $page <= $totalPages; $page++): ?>
+            <option value="<?php echo $page; ?>" <?php if($page == $currentPage) echo "selected"; ?>>Page <?php echo $page; ?></option>
+        <?php endfor; ?>
+    </select>
+    <button id="next-page" <?php if($currentPage >= $totalPages) echo "disabled"; ?>>Page suivante</button>
+    <div class="spinner" id="spinner"></div>
+</div>
+
+<script>
+document.getElementById('page-selector').addEventListener('change', function() {
+    document.getElementById('spinner').style.display = 'inline-block';
+    window.location.href = "?page=" + this.value;
+});
+
+document.getElementById('prev-page').addEventListener('click', function() {
+    var selector = document.getElementById('page-selector');
+    var newPage = parseInt(selector.value) - 1;
+    if(newPage >= 1) {
+        document.getElementById('spinner').style.display = 'inline-block';
+        window.location.href = "?page=" + newPage;
+    }
+});
+
+document.getElementById('next-page').addEventListener('click', function() {
+    var selector = document.getElementById('page-selector');
+    var newPage = parseInt(selector.value) + 1;
+    if(newPage <= <?php echo $totalPages; ?>) {
+        document.getElementById('spinner').style.display = 'inline-block';
+        window.location.href = "?page=" + newPage;
+    }
+});
+</script>