itten
228 lines
6.2 KiB
HTML
228 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1920, initial-scale=1">
|
|
<title>Top 15 — Gossips</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: 1730px;
|
|
position: relative;
|
|
}
|
|
|
|
.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: 80px 1fr auto auto;
|
|
align-items: center;
|
|
border-bottom: 3px solid var(--white);
|
|
padding-bottom: 14px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.header-cell {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
color: var(--neutral);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.header-cell.left { text-align: left; padding-left: 24px; }
|
|
.header-cell.right { text-align: right; padding-right: 24px; }
|
|
|
|
.table-row {
|
|
display: grid;
|
|
grid-template-columns: 80px 1fr auto auto;
|
|
align-items: center;
|
|
height: 50px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.table-row:nth-child(even) {
|
|
background: var(--row-alt);
|
|
}
|
|
|
|
.col-rank {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
color: var(--neutral);
|
|
text-align: center;
|
|
}
|
|
|
|
.col-player {
|
|
font-size: 26px;
|
|
font-weight: 500;
|
|
color: var(--white);
|
|
padding-left: 24px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.col-team {
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
color: var(--neutral);
|
|
padding-left: 16px;
|
|
padding-right: 24px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.col-prob {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
text-align: right;
|
|
padding-right: 24px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.prob-high { color: var(--accent); }
|
|
.prob-medium { color: var(--white); }
|
|
.prob-low { color: var(--neutral); }
|
|
|
|
.prob-bar {
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 8px;
|
|
background: var(--row-alt);
|
|
border-radius: 4px;
|
|
margin-right: 12px;
|
|
vertical-align: middle;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.prob-bar-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.prob-high .prob-bar-fill { background: var(--accent); }
|
|
.prob-medium .prob-bar-fill { background: var(--white); }
|
|
.prob-low .prob-bar-fill { background: var(--neutral); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="frame">
|
|
<div class="table-wrapper">
|
|
<div class="table-title">Топ-15 слухов</div>
|
|
<div class="table-header">
|
|
<div class="header-cell">№</div>
|
|
<div class="header-cell left">Игрок</div>
|
|
<div class="header-cell">Команда</div>
|
|
<div class="header-cell right">Вероятность</div>
|
|
</div>
|
|
<div id="rows"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var CSV_URL = "top-15-gossips.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 >= 3) result.push({
|
|
player: fields[0],
|
|
team: fields[1],
|
|
prob: fields[2],
|
|
});
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function probClass(val) {
|
|
var n = parseFloat(val);
|
|
if (isNaN(n)) return "prob-medium";
|
|
if (n >= 70) return "prob-high";
|
|
if (n >= 50) return "prob-medium";
|
|
return "prob-low";
|
|
}
|
|
|
|
function probNum(val) {
|
|
var n = parseFloat(val);
|
|
return isNaN(n) ? 0 : n;
|
|
}
|
|
|
|
function buildRow(idx, row) {
|
|
var cls = probClass(row.prob);
|
|
var pct = probNum(row.prob);
|
|
return '<div class="table-row">' +
|
|
'<div class="col-rank">' + (idx + 1) + '</div>' +
|
|
'<div class="col-player">' + row.player + '</div>' +
|
|
'<div class="col-team ' + cls + '">' + row.team + '</div>' +
|
|
'<div class="col-prob ' + cls + '">' +
|
|
'<span class="prob-bar"><span class="prob-bar-fill" style="width:' + pct + '%"></span></span>' +
|
|
row.prob + '%' +
|
|
'</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> |