From 243fc7d509a25a143847b69c580409ef87fe8879 Mon Sep 17 00:00:00 2001
From: itten <mrjitten@protonmail.com>
Date: Sun, 2 Aug 2026 13:09:39 +0300
Subject: [PATCH] spending and revenue tables

---
 top-10-teams-by-revenue.csv  |  11 ++
 top-20-teams-by-spending.csv |  21 ++++
 top10.html                   | 204 +++++++++++++++++++++++++++++++++++
 top20.html                   | 200 ++++++++++++++++++++++++++++++++++
 4 files changed, 436 insertions(+)
 create mode 100644 top-10-teams-by-revenue.csv
 create mode 100644 top-20-teams-by-spending.csv
 create mode 100644 top10.html
 create mode 100644 top20.html
diff --git a/top-10-teams-by-revenue.csv b/top-10-teams-by-revenue.csv
new file mode 100644
index 0000000..74eaa6a
--- /dev/null
+++ b/top-10-teams-by-revenue.csv
@@ -0,0 +1,11 @@
+Команда,Доходы(млн),Затраты(млн),Разница(млн)
+«Астон Вилла»,"226,5","105,5",121
+«Ньюкасл»,188,"130,5","57,5"
+«Спортинг»,"151,35","101,28","50,07"
+«Челси»,"132,3","282,7","-150,4"
+«Фрайбург»,"87,15",36,"51,15"
+«Тоттенхэм»,"81,5",267,"-185,5"
+«Брайтон»,"81,2","126,4","-45,2"
+«Айнтрахт»,"75,2","21,3","53,9"
+«Брюгге»,"69,5","13,45","56,05"
+«Ренн»,"68,3","32,3",36
\ No newline at end of file
diff --git a/top-20-teams-by-spending.csv b/top-20-teams-by-spending.csv
new file mode 100644
index 0000000..10c33ac
--- /dev/null
+++ b/top-20-teams-by-spending.csv
@@ -0,0 +1,21 @@
+Команда,Затраты(млн),Доходы(млн),Разница(млн)
+«Челси»,"282,7","132,3","-150,4"
+«Тоттенхэм»,267,"81,5","-185,5"
+«Манчестер Сити»,"175,2","23,17","-152,03"
+«Ньюкасл»,"130,5",188,"57,5"
+«Брайтон»,"126,4","81,2","-45,2"
+«Милан»,"107,35","44,5","-62,85"
+«Астон Вилла»,"105,5","226,5",121
+«Ливерпуль»,"103,6",0,"-103,6"
+«Бавария»,"103,45","34,75","-68,7"
+«Атлетико»,102,1,-101
+«Барселона»,102,14,-88
+«Спортинг»,"101,28","151,35","50,07"
+«Ипсвич Таун»,"98,65","8,17","-90,48"
+«Манчестер Юнайтед»,"97,3",44,"-53,3"
+«Фиорентина»,"90,5","10,55","-79,95"
+«Фенербахче»,"81,17",0,"-81,17"
+«Арсенал»,80,38,-42
+ФК «Париж»,"79,5",0,"-79,5"
+«Реал»,75,"7,5","-67,5"
+«Аль-Ахли»,"71,26",0,"-71,26"
\ No newline at end of file
diff --git a/top10.html b/top10.html
new file mode 100644
index 0000000..6b69b64
--- /dev/null
+++ b/top10.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=1920, initial-scale=1">
+  <title>Top 10 — Revenue</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;
+      --white:    #FFFFFF;
+      --neutral:  #919292;
+      --accent:   #91FF55;
+      --negative: #F8F700;
+      --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;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .table-wrapper {
+      width: fit-content;
+      max-width: 1730px;
+      position: relative;
+      margin: 0 auto;
+    }
+
+    .table-title {
+      font-size: 48px;
+      font-weight: 700;
+      text-transform: uppercase;
+      color: var(--white);
+      text-align: center;
+      margin-bottom: 28px;
+      letter-spacing: 3px;
+    }
+
+    .table-header {
+      display: grid;
+      grid-template-columns: 80px auto 80px 160px 160px 160px;
+      align-items: center;
+      border-bottom: 3px solid var(--white);
+      padding-bottom: 16px;
+      margin-bottom: 8px;
+    }
+
+    .header-cell {
+      font-size: 28px;
+      font-weight: 700;
+      text-transform: uppercase;
+      text-align: center;
+      color: var(--neutral);
+      letter-spacing: 1px;
+    }
+
+    .header-cell.left  { text-align: left;  }
+    .header-cell.right { text-align: right; }
+
+    .table-row {
+      display: grid;
+      grid-template-columns: 80px auto 80px 160px 160px 160px;
+      align-items: center;
+      height: 72px;
+      transition: background 0.2s;
+    }
+
+    .table-row:nth-child(even) {
+      background: var(--row-alt);
+    }
+
+    .col-rank {
+      font-size: 32px;
+      font-weight: 700;
+      color: var(--neutral);
+      text-align: center;
+    }
+
+    .col-team {
+      font-size: 32px;
+      font-weight: 500;
+      color: var(--white);
+      padding-left: 24px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .col-val {
+      font-size: 28px;
+      font-weight: 500;
+      color: var(--white);
+      text-align: right;
+      padding-right: 24px;
+      white-space: nowrap;
+    }
+
+    .col-diff {
+      font-size: 28px;
+      font-weight: 700;
+      text-align: right;
+      padding-right: 24px;
+      white-space: nowrap;
+    }
+
+    .diff-positive { color: var(--accent);   }
+    .diff-negative { color: var(--negative); }
+    .diff-zero     { color: var(--neutral);   }
+  </style>
+</head>
+<body>
+  <div class="frame">
+    <div class="table-wrapper">
+      <div class="table-title">Топ-10 команд по доходам</div>
+      <div class="table-header">
+        <div class="header-cell">№</div>
+        <div class="header-cell left">Команда</div>
+        <div></div>
+        <div class="header-cell right">Доходы</div>
+        <div class="header-cell right">Затраты</div>
+        <div class="header-cell right">Разница</div>
+      </div>
+      <div id="rows"></div>
+    </div>
+  </div>
+
+  <script>
+    var CSV_URL = "top-10-teams-by-revenue.csv";
+
+    function parseCSV(text) {
+      var lines = text.trim().split(/\r?\n/);
+      var result = [];
+      for (var i = 1; i < lines.length; i++) {
+        var line = lines[i].trim();
+        if (!line) continue;
+        var fields = [];
+        var cur = "", 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.length >= 4) result.push({
+          team: fields[0], income: fields[1], spend: fields[2], diff: fields[3]
+        });
+      }
+      return result;
+    }
+
+    function fmt(val) {
+      return val;
+    }
+
+    function diffClass(val) {
+      var n = parseFloat(val.replace(",", ".").replace("«", "").replace("»", ""));
+      if (isNaN(n) || n === 0) return "diff-zero";
+      return n > 0 ? "diff-positive" : "diff-negative";
+    }
+
+    function buildRow(idx, row) {
+      return '<div class="table-row">' +
+        '<div class="col-rank">' + (idx + 1) + '</div>' +
+        '<div class="col-team">' + row.team + '</div>' +
+        '<div></div>' +
+        '<div class="col-val">' + row.income + '</div>' +
+        '<div class="col-val">' + row.spend + '</div>' +
+        '<div class="col-diff ' + diffClass(row.diff) + '">' + row.diff + '</div>' +
+        '</div>';
+    }
+
+    fetch(CSV_URL)
+      .then(function (r) { return r.text(); })
+      .then(function (text) {
+        var data = parseCSV(text);
+        document.getElementById("rows").innerHTML =
+          data.map(function (row, i) { return buildRow(i, row); }).join("");
+        console.log("Loaded " + data.length + " rows");
+      })
+      .catch(function (e) { console.error("Failed to load CSV", e); });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/top20.html b/top20.html
new file mode 100644
index 0000000..0fb43bd
--- /dev/null
+++ b/top20.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=1920, initial-scale=1">
+  <title>Top 20 — Spending</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;
+      --white:    #FFFFFF;
+      --neutral:  #919292;
+      --accent:   #91FF55;
+      --negative: #F8F700;
+      --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;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .table-wrapper {
+      width: fit-content;
+      max-width: 1730px;
+      position: relative;
+      margin: 0 auto;
+    }
+
+    .table-title {
+      font-size: 40px;
+      font-weight: 700;
+      text-transform: uppercase;
+      color: var(--white);
+      text-align: center;
+      margin-bottom: 20px;
+      letter-spacing: 3px;
+    }
+
+    .table-header {
+      display: grid;
+      grid-template-columns: 70px auto 80px 150px 150px 150px;
+      align-items: center;
+      border-bottom: 3px solid var(--white);
+      padding-bottom: 12px;
+      margin-bottom: 6px;
+    }
+
+    .header-cell {
+      font-size: 24px;
+      font-weight: 700;
+      text-transform: uppercase;
+      text-align: center;
+      color: var(--neutral);
+      letter-spacing: 1px;
+    }
+
+    .header-cell.left  { text-align: left;  }
+    .header-cell.right { text-align: right; }
+
+    .table-row {
+      display: grid;
+      grid-template-columns: 70px auto 80px 150px 150px 150px;
+      align-items: center;
+      height: 40px;
+      transition: background 0.2s;
+    }
+
+    .table-row:nth-child(even) {
+      background: var(--row-alt);
+    }
+
+    .col-rank {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--neutral);
+      text-align: center;
+    }
+
+    .col-team {
+      font-size: 26px;
+      font-weight: 500;
+      color: var(--white);
+      padding-left: 24px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .col-val {
+      font-size: 24px;
+      font-weight: 500;
+      color: var(--white);
+      text-align: right;
+      padding-right: 24px;
+      white-space: nowrap;
+    }
+
+    .col-diff {
+      font-size: 24px;
+      font-weight: 700;
+      text-align: right;
+      padding-right: 24px;
+      white-space: nowrap;
+    }
+
+    .diff-positive { color: var(--accent);   }
+    .diff-negative { color: var(--negative); }
+    .diff-zero     { color: var(--neutral);   }
+  </style>
+</head>
+<body>
+  <div class="frame">
+    <div class="table-wrapper">
+      <div class="table-title">Топ-20 команд по затратам</div>
+      <div class="table-header">
+        <div class="header-cell">№</div>
+        <div class="header-cell left">Команда</div>
+        <div></div>
+        <div class="header-cell right">Затраты</div>
+        <div class="header-cell right">Доходы</div>
+        <div class="header-cell right">Разница</div>
+      </div>
+      <div id="rows"></div>
+    </div>
+  </div>
+
+  <script>
+    var CSV_URL = "top-20-teams-by-spending.csv";
+
+    function parseCSV(text) {
+      var lines = text.trim().split(/\r?\n/);
+      var result = [];
+      for (var i = 1; i < lines.length; i++) {
+        var line = lines[i].trim();
+        if (!line) continue;
+        var fields = [];
+        var cur = "", 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.length >= 4) result.push({
+          team: fields[0], spend: fields[1], income: fields[2], diff: fields[3]
+        });
+      }
+      return result;
+    }
+
+    function diffClass(val) {
+      var n = parseFloat(val.replace(",", ".").replace("«", "").replace("»", "").replace("-", ""));
+      if (isNaN(n) || n === 0) return "diff-zero";
+      return val.indexOf("-") !== -1 ? "diff-negative" : "diff-positive";
+    }
+
+    function buildRow(idx, row) {
+      return '<div class="table-row">' +
+        '<div class="col-rank">' + (idx + 1) + '</div>' +
+        '<div class="col-team">' + row.team + '</div>' +
+        '<div></div>' +
+        '<div class="col-val">' + row.spend + '</div>' +
+        '<div class="col-val">' + row.income + '</div>' +
+        '<div class="col-diff ' + diffClass(row.diff) + '">' + row.diff + '</div>' +
+        '</div>';
+    }
+
+    fetch(CSV_URL)
+      .then(function (r) { return r.text(); })
+      .then(function (text) {
+        var data = parseCSV(text);
+        document.getElementById("rows").innerHTML =
+          data.map(function (row, i) { return buildRow(i, row); }).join("");
+        console.log("Loaded " + data.length + " rows");
+      })
+      .catch(function (e) { console.error("Failed to load CSV", e); });
+  </script>
+</body>
+</html>
\ No newline at end of file
