diff --git a/table.html b/table.html
index 799a5e4..2e06a37 100644
--- a/table.html
+++ b/table.html
@@ -85,20 +85,19 @@
}
/* ==================================================================
- Pages — two pages with smooth slide transition
+ Pages — up to 3 pages with smooth slide transition
================================================================== */
.pages-track {
display: flex;
- width: 200%;
+ width: 300%;
transition: transform 0.7s cubic-bezier(0.45, 0, 0.15, 1);
}
- .pages-track.page-2 {
- transform: translateX(-50%);
- }
+ .pages-track.page-2 { transform: translateX(-33.333%); }
+ .pages-track.page-3 { transform: translateX(-66.666%); }
.page {
- width: 50%;
+ width: 33.333%;
flex-shrink: 0;
}
@@ -114,7 +113,7 @@
display: grid;
grid-template-columns: 1fr 2px 1fr 2px 1fr;
align-items: center;
- height: 58px;
+ height: 78px;
transition: background 0.2s;
}
@@ -123,7 +122,7 @@
}
.row-player {
- font-size: 26px;
+ font-size: 32px;
font-weight: 500;
color: var(--white);
text-align: center;
@@ -134,12 +133,12 @@
display: flex;
align-items: center;
justify-content: center;
- gap: 10px;
+ gap: 12px;
}
.row-logo {
- width: 28px;
- height: 28px;
+ width: 36px;
+ height: 36px;
object-fit: contain;
flex-shrink: 0;
}
@@ -160,7 +159,7 @@
}
.opinion-icon {
- font-size: 32px;
+ font-size: 42px;
}
/* Upvote */
@@ -244,6 +243,9 @@
+
@@ -303,7 +305,7 @@
};
// ── Config ───────────────────────────────────────────────
- var ROWS_PER_PAGE = 15;
+ var ROWS_PER_PAGE = 10;
var CSV_URL = "assets/transfers-list.csv";
var players = [];
@@ -369,22 +371,23 @@
// ── Render ───────────────────────────────────────────────
function render() {
- var page1 = document.getElementById("rows1");
- var page2 = document.getElementById("rows2");
+ var pages = [
+ document.getElementById("rows1"),
+ document.getElementById("rows2"),
+ document.getElementById("rows3"),
+ ];
- var p1 = players.slice(0, ROWS_PER_PAGE);
- var p2 = players.slice(ROWS_PER_PAGE, ROWS_PER_PAGE * 2);
-
- page1.innerHTML = p1.map(buildRow).join("");
-
- if (p2.length > 0) {
- page2.innerHTML = p2.map(buildRow).join("");
- totalPages = 2;
- } else {
- page2.innerHTML = "";
- totalPages = 1;
+ var count = 0;
+ for (var p = 0; p < 3; p++) {
+ var slice = players.slice(p * ROWS_PER_PAGE, (p + 1) * ROWS_PER_PAGE);
+ if (slice.length > 0) {
+ pages[p].innerHTML = slice.map(buildRow).join("");
+ count = p + 1;
+ } else {
+ pages[p].innerHTML = "";
+ }
}
-
+ totalPages = count;
updateCounter();
}
@@ -393,9 +396,12 @@
}
function goToPage(n) {
+ if (totalPages > 1 && n > totalPages) n = 1;
if (n < 1 || n > totalPages) return;
currentPage = n;
- document.getElementById("pagesTrack").classList.toggle("page-2", currentPage === 2);
+ var track = document.getElementById("pagesTrack");
+ track.classList.toggle("page-2", currentPage === 2);
+ track.classList.toggle("page-3", currentPage === 3);
updateCounter();
}