From 3a1e08aa53337c4b895223df44552f2dbbd60f37 Mon Sep 17 00:00:00 2001
From: itten <mrjitten@protonmail.com>
Date: Sun, 2 Aug 2026 12:37:10 +0300
Subject: [PATCH] vote table

---
 table.html | 424 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 424 insertions(+)
 create mode 100644 table.html
diff --git a/table.html b/table.html
new file mode 100644
index 0000000..b6f0503
--- /dev/null
+++ b/table.html
@@ -0,0 +1,424 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=1920, initial-scale=1">
+  <title>Vadim vs Nikita — Transfer Opinions</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <style>
+    @font-face { font-family: 'ONY One'; src: local('ONY One Regular'), url('file:///home/itten/.local/share/fonts/ONYOne-Regular.otf') format('opentype'); font-weight: 400; }
+    @font-face { font-family: 'ONY One'; src: local('ONY One Medium'),  url('file:///home/itten/.local/share/fonts/ONYOne-Medium.otf')  format('opentype'); font-weight: 500; }
+    @font-face { font-family: 'ONY One'; src: local('ONY One Bold'),    url('file:///home/itten/.local/share/fonts/ONYOne-Bold.otf')    format('opentype'); font-weight: 700; }
+
+    :root {
+      --bg:       #222524;
+      --upvote:   #91FF55;
+      --downvote: #F8F700;
+      --neutral:  #919292;
+      --white:    #FFFFFF;
+      --black:    #000000;
+      --row-alt:  #2A2D2C;
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    html, body {
+      width: 1920px;
+      height: 1080px;
+      background: var(--bg);
+      overflow: hidden;
+      font-family: 'ONY One', 'Arial Narrow', sans-serif;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .frame {
+      position: relative;
+      width: 1920px;
+      height: 1080px;
+      background: var(--bg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* ==================================================================
+       Table container — max 1730x880, centered in frame
+       ================================================================== */
+    .table-wrapper {
+      width: 1730px;
+      max-height: 880px;
+      position: relative;
+      overflow: hidden;
+      background: var(--bg);
+    }
+
+    /* Header row */
+    .table-header {
+      display: grid;
+      grid-template-columns: 1fr 2px 1fr 2px 1fr;
+      align-items: center;
+      border-bottom: 3px solid var(--white);
+      padding-bottom: 16px;
+      margin-bottom: 8px;
+    }
+
+    .header-cell {
+      font-size: 42px;
+      font-weight: 700;
+      text-transform: uppercase;
+      text-align: center;
+      color: var(--white);
+      letter-spacing: 2px;
+    }
+
+    .header-center {
+      font-size: 24px;
+      font-weight: 500;
+      color: var(--neutral);
+      text-align: center;
+    }
+
+    .header-divider {
+      height: 36px;
+      border-left: 2px solid rgba(255, 255, 255, 0.1);
+      justify-self: center;
+    }
+
+    /* ==================================================================
+       Pages — two pages with smooth slide transition
+       ================================================================== */
+    .pages-track {
+      display: flex;
+      width: 200%;
+      transition: transform 0.7s cubic-bezier(0.45, 0, 0.15, 1);
+    }
+
+    .pages-track.page-2 {
+      transform: translateX(-50%);
+    }
+
+    .page {
+      width: 50%;
+      flex-shrink: 0;
+    }
+
+    /* ==================================================================
+       Table rows
+       ================================================================== */
+    .table-rows {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .table-row {
+      display: grid;
+      grid-template-columns: 1fr 2px 1fr 2px 1fr;
+      align-items: center;
+      height: 58px;
+      transition: background 0.2s;
+    }
+
+    .table-row:nth-child(even) {
+      background: var(--row-alt);
+    }
+
+    .row-player {
+      font-size: 26px;
+      font-weight: 500;
+      color: var(--white);
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+    }
+
+    .row-logo {
+      width: 28px;
+      height: 28px;
+      object-fit: contain;
+      flex-shrink: 0;
+    }
+
+    .row-divider {
+      height: 36px;
+      border-left: 2px solid rgba(255, 255, 255, 0.1);
+      justify-self: center;
+    }
+
+    /* Opinion cells */
+    .opinion {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      height: 100%;
+    }
+
+    .opinion-icon {
+      font-size: 32px;
+    }
+
+    /* Upvote */
+    .opinion.upvote {
+      color: var(--upvote);
+    }
+
+    /* Downvote */
+    .opinion.downvote {
+      color: var(--downvote);
+    }
+
+    /* Neutral */
+    .opinion.neutral {
+      color: var(--neutral);
+    }
+
+    /* ==================================================================
+       Paging indicator + counter
+       ================================================================== */
+    .paging-bar {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .page-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.2);
+      transition: background 0.3s;
+    }
+
+    .page-dot.active {
+      background: var(--white);
+    }
+
+    .page-counter {
+      font-size: 16px;
+      color: var(--neutral);
+      margin-left: 12px;
+    }
+
+    /* ==================================================================
+       Operator hint (dev)
+       ================================================================== */
+    .op-hint {
+      position: absolute;
+      top: 10px;
+      right: 20px;
+      font-size: 14px;
+      color: var(--neutral);
+      opacity: 0.3;
+      pointer-events: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="frame">
+    <div class="table-wrapper" id="tableWrapper">
+
+      <!-- Header -->
+      <div class="table-header">
+        <div class="header-cell">ВАДИМ</div>
+        <div class="header-divider"></div>
+        <div class="header-center">VS</div>
+        <div class="header-divider"></div>
+        <div class="header-cell">НИКИТА</div>
+      </div>
+
+      <!-- Pages -->
+      <div class="pages-track" id="pagesTrack">
+        <div class="page" id="page1">
+          <div class="table-rows" id="rows1"></div>
+        </div>
+        <div class="page" id="page2">
+          <div class="table-rows" id="rows2"></div>
+        </div>
+      </div>
+
+      </div>
+
+    <div class="op-hint">&#8592; / &#8594; pages &nbsp; R reset</div>
+  </div>
+
+  <script>
+    /**
+     * Opinions data — EDIT MANUALLY.
+     *
+     * Each entry uses the player name from the CSV.
+     * opinion values: "upvote" | "downvote" | "neutral"
+     *
+     * If a player is not listed here, both default to "neutral".
+     */
+    var OPINIONS = {
+      // ── Page 1 ──────────────────────────────────────────────
+      "Морган Роджерс":      { vadim: "upvote",   nikita: "downvote" },
+      "Эллиот Андерсон":     { vadim: "upvote",   nikita: "upvote" },
+      "Сандро Тонали":       { vadim: "neutral",  nikita: "upvote" },
+      "Матеус Фернандес":     { vadim: "downvote", nikita: "neutral" },
+      "Энтони Гордон":        { vadim: "upvote",   nikita: "upvote" },
+      "Гонсало Рамуш":        { vadim: "downvote", nikita: "downvote" },
+      "Самервилл":           { vadim: "neutral",  nikita: "downvote" },
+      "Жереми Жаке":         { vadim: "upvote",   nikita: "neutral" },
+      "Ван Хекке":           { vadim: "upvote",   nikita: "downvote" },
+      "Йохан Манзамби":      { vadim: "neutral",  nikita: "upvote" },
+      "Лука Вушкович":       { vadim: "downvote", nikita: "downvote" },
+      "Марко Палестра":      { vadim: "upvote",   nikita: "upvote" },
+      "Андре Сантос":        { vadim: "neutral",  nikita: "neutral" },
+      "Марк Кукурелья":      { vadim: "upvote",   nikita: "downvote" },
+      // ── Page 2 ──────────────────────────────────────────────
+      "Натаниэль Браун":     { vadim: "downvote", nikita: "neutral" },
+      "Исмаэль Сайбари":     { vadim: "upvote",   nikita: "upvote" },
+      "Ибрагим Конате":      { vadim: "upvote",   nikita: "upvote" },
+      "Опенда":             { vadim: "downvote", nikita: "downvote" },
+      "Тилеманс":           { vadim: "neutral",  nikita: "upvote" },
+      "Христос Цолис":       { vadim: "upvote",   nikita: "neutral" },
+      "Кан Ли":             { vadim: "downvote", nikita: "downvote" },
+      "Карим Адейеми":       { vadim: "upvote",   nikita: "upvote" },
+      "Гарначо":            { vadim: "upvote",   nikita: "downvote" },
+      "Александар Станкович": { vadim: "neutral",  nikita: "upvote" },
+      "Думфрис":            { vadim: "upvote",   nikita: "upvote" },
+      "Гримальдо":          { vadim: "downvote", nikita: "neutral" },
+      "Бернардо Силва":      { vadim: "upvote",   nikita: "upvote" },
+      "Оскар Мингеза":       { vadim: "neutral",  nikita: "downvote" },
+      "Аканжи":             { vadim: "upvote",   nikita: "neutral" },
+      "Альваро Мората":      { vadim: "downvote", nikita: "downvote" },
+    };
+
+    // ── Icons ────────────────────────────────────────────────
+    var ICONS = {
+      upvote:   '<i class="fa-solid fa-thumbs-up opinion-icon"></i>',
+      downvote: '<i class="fa-solid fa-thumbs-down opinion-icon"></i>',
+      neutral:  '<i class="fa-solid fa-minus opinion-icon"></i>',
+    };
+
+    // ── Config ───────────────────────────────────────────────
+    var ROWS_PER_PAGE = 15;
+    var CSV_URL = "assets/transfers-list.csv";
+
+    var players = [];
+    var currentPage = 1;
+    var totalPages = 1;
+
+    // ── Parse CSV (simple parser, handles quoted fields) ─────
+    function parseCSV(text) {
+      var lines = text.trim().split(/\r?\n/);
+      var header = lines[0].split(",").map(function (h) {
+        return h.trim();
+      });
+      var playerIdx = header.indexOf("Player");
+      if (playerIdx === -1) playerIdx = 0;
+      var clubIdx = header.indexOf("Club");
+      if (clubIdx === -1) clubIdx = 1;
+      var logoIdx = header.indexOf("Logo");
+      if (logoIdx === -1) logoIdx = 4;
+
+      var result = [];
+      for (var i = 1; i < lines.length; i++) {
+        var line = lines[i].trim();
+        if (!line) continue;
+        // simple parse: split by comma but respect quotes
+        var fields = [];
+        var cur = "";
+        var inQ = false;
+        for (var j = 0; j < line.length; j++) {
+          var ch = line[j];
+          if (ch === '"') { inQ = !inQ; }
+          else if (ch === ',' && !inQ) { fields.push(cur.trim()); cur = ""; }
+          else { cur += ch; }
+        }
+        fields.push(cur.trim());
+        if (fields[playerIdx]) result.push({
+          name: fields[playerIdx],
+          club: fields[clubIdx] || "",
+          logo: fields[logoIdx] || "",
+        });
+      }
+      return result;
+    }
+
+    // ── Build row HTML ───────────────────────────────────────
+    function opinionCell(who, player) {
+      var op = "neutral";
+      var entry = OPINIONS[player.name];
+      if (entry && entry[who]) op = entry[who];
+      return '<div class="opinion ' + op + '">' + ICONS[op] + '</div>';
+    }
+
+    function buildRow(player) {
+      var label = player.name;
+      if (player.logo) label = '<img class="row-logo" src="clubs-logo/' + player.logo + '" alt="">' + label;
+      return '<div class="table-row">' +
+        opinionCell("vadim", player) +
+        '<div class="row-divider"></div>' +
+        '<div class="row-player">' + label + '</div>' +
+        '<div class="row-divider"></div>' +
+        opinionCell("nikita", player) +
+        '</div>';
+    }
+
+    // ── Render ───────────────────────────────────────────────
+    function render() {
+      var page1 = document.getElementById("rows1");
+      var page2 = document.getElementById("rows2");
+
+      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;
+      }
+
+      updateCounter();
+    }
+
+    function updateCounter() {
+      console.log("Page " + currentPage + " / " + totalPages);
+    }
+
+    function goToPage(n) {
+      if (n < 1 || n > totalPages) return;
+      currentPage = n;
+      document.getElementById("pagesTrack").classList.toggle("page-2", currentPage === 2);
+      updateCounter();
+    }
+
+    // ── Keys ─────────────────────────────────────────────────
+    document.addEventListener("keydown", function (e) {
+      switch (e.key) {
+        case "ArrowRight": goToPage(currentPage + 1); break;
+        case "ArrowLeft":  goToPage(currentPage - 1); break;
+        case "r": case "R": goToPage(1); break;
+      }
+    });
+
+    // ── Init ────────────────────────────────────────────────
+    fetch(CSV_URL)
+      .then(function (r) { return r.text(); })
+      .then(function (text) {
+        players = parseCSV(text);
+        render();
+        console.log("Table loaded: " + players.length + " players, " + totalPages + " pages");
+      })
+      .catch(function (e) {
+        console.error("Failed to load CSV", e);
+      });
+  </script>
+</body>
+</html>
\ No newline at end of file
