Обновил пагинацию

music_storage/static/css/pagination.css

@@ -0,0 +1,52 @@
+.pagination {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin: 30px 0;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.page-btn {
+    min-width: 38px;
+    height: 38px;
+    padding: 0 12px;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    background: #ffffff;
+    color: #4a4a5a;
+
+    border: 1px solid #c7cad8;
+    border-radius: 8px;
+
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+    transition: all 0.2s ease;
+}
+
+.page-btn:hover {
+    background: #f1f2f7;
+    border-color: #bab5c0;
+    color: #2f2f3a;
+}
+
+.page-btn.active {
+    background: linear-gradient(135deg, #bbc0d4 0%, #bab5c0 100%);
+    color: #ffffff;
+    border-color: transparent;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+    cursor: default;
+}
+
+.page-btn.disabled {
+    background: #f5f6fa;
+    color: #9a9db0;
+    border-color: #e0e2ec;
+    box-shadow: none;
+    pointer-events: none;
+}

music_storage/templates/components/pagination.html

@@ -1,11 +1,38 @@
+{% load static %}
+
+<link rel="stylesheet" href="{% static 'css/pagination.css' %}">
+
+<nav class="pagination">
+    <!-- Первая страница — всегда доступна -->
+
     {% if page_obj.has_previous %}
-    <a href="?page={{ page_obj.previous_page_number }}">← Назад</a>
+        <a class="page-btn" href="?page={{ page_obj.previous_page_number }}">‹</a>
+        {% if page_obj.number > 1 %}
+            <a class="page-btn" href="?page=1">1</a>
+            {% if page_obj.number > 3 %}
+                <span class="ellipsis">...</span>
+            {% endif %}
+        {% endif %}
+    {% else %}
+        <span class="page-btn disabled">‹</span>
     {% endif %}
 
-<span>
+    {% for num in page_obj.paginator.page_range %}
-    Страница {{ page_obj.number }} из {{ page_obj.paginator.num_pages }}
+    {% if num != 1 %}
-</span>
+        {% if num == page_obj.number %}
+            <span class="page-btn active">{{ num }}</span>
+        {% elif num > page_obj.number|add:"-3" and num < page_obj.number|add:"3" %}
+            <a class="page-btn" href="?page={{ num }}">{{ num }}</a>
+        {% endif %}
+    {% elif num == 1 and num == page_obj.number %}
+        <span class="page-btn disabled">{{ num }}</span>
+    {% endif %}
+    {% endfor %}
 
     {% if page_obj.has_next %}
-    <a href="?page={{ page_obj.next_page_number }}">Вперёд →</a>
+        <a class="page-btn" href="?page={{ page_obj.next_page_number }}">›</a>
+    {% else %}
+        <span class="page-btn disabled">›</span>
     {% endif %}
+</nav>
+