183 lines
3.5 KiB
HTML
183 lines
3.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Ranking</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
<style>
|
|
h1 {
|
|
text-align: center;
|
|
font-size: calc(7vw);
|
|
margin-bottom: 30px;
|
|
color: #bbb;
|
|
}
|
|
|
|
h4 {
|
|
text-align: center;
|
|
font-size: calc(2.2vw);
|
|
/* font-size: 25px; */
|
|
margin-bottom: 30px;
|
|
color: #bbb;
|
|
}
|
|
|
|
.infotext {
|
|
text-align: center;
|
|
font-size: calc(1.8vw);
|
|
/*font-size: 20px; */
|
|
margin-bottom: 20px;
|
|
color: #bbb;
|
|
}
|
|
|
|
.spots {
|
|
text-align: left;
|
|
font-family: sans-serif;
|
|
font-size: calc(2.5vw);
|
|
/* font-size: 35px; */
|
|
color: #bbb;
|
|
}
|
|
|
|
|
|
.nu {
|
|
text-align: right;
|
|
font-family: sans-serif;
|
|
font-size: calc(2.5vw);
|
|
/* font-size: 35px; */
|
|
color: #bbb;
|
|
}
|
|
|
|
|
|
.header {
|
|
text-align: center;
|
|
font-family: sans-serif;
|
|
font-size: calc(2.5vw);
|
|
/* font-size: 35px; */
|
|
color: #AAAAAA;
|
|
}
|
|
|
|
th {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
td {
|
|
padding-left: 25px;
|
|
padding-right: 25px;
|
|
}
|
|
|
|
th {background: #3b4e60}
|
|
tr:nth-child(even) {background: #2b3e50}
|
|
tr:nth-child(odd) {background: #3b4e60}
|
|
|
|
.emoji {
|
|
font-size: 35px;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
.lotw_info_yellow {
|
|
background-image: linear-gradient(to bottom, #3fb618, yellow);
|
|
float: right;
|
|
text-align: right;
|
|
}
|
|
|
|
.lotw_info_orange {
|
|
background-image: linear-gradient(to bottom, #3fb618, orange);
|
|
float: right;
|
|
text-align: right;
|
|
}
|
|
|
|
.lotw_info_red {
|
|
background-image: linear-gradient(to bottom, #3fb618, red);
|
|
float: right;
|
|
text-align: right;
|
|
}
|
|
|
|
table {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body style="background-color: #2b3e50;" onLoad="main()">
|
|
<center><h1>IARU Ranking<br/>DJ7NT+Friends</h1></center>
|
|
<center><h4>a service by DJ7NT</h4></center>
|
|
<div class="infotext" id="infotext"></div>
|
|
<body>
|
|
|
|
|
|
<table id="spots" border="0">
|
|
<thead class="header">
|
|
<tr>
|
|
<th>Rank </th>
|
|
<th> Call </th>
|
|
<th> Score </th>
|
|
<th> Pt/QSO </th>
|
|
<th> QSOs</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="c_spots" class="spots">
|
|
</tbody>
|
|
</table>
|
|
<br/>
|
|
<div class="infotext">You want to be on this list? Drop DJ7NT a message (Matrix, Mail, QSO, Avian Carrier...)</div>
|
|
</body>
|
|
|
|
<script>
|
|
async function fetchSpots() {
|
|
const response = await fetch("/stands.js?"+Math.round(+new Date()/1000));
|
|
const spots = await response.json();
|
|
return spots;
|
|
}
|
|
|
|
async function main() {
|
|
fill_tbl();
|
|
setInterval(fill_tbl,30*1000);
|
|
}
|
|
|
|
async function fill_tbl() {
|
|
tbodyRef = document.getElementById('c_spots');
|
|
i=1;
|
|
spots=await fetchSpots();
|
|
spots.data.sort((a,b) => b.score - a.score)
|
|
tbodyRef.innerHTML='';
|
|
spots.data.forEach(function (spot) {
|
|
ratio=Math.round((spot.score/spot.qsos)*100)/100;
|
|
row=tbodyRef.insertRow();
|
|
switch(i) {
|
|
case 1:
|
|
trophy=' 🥇';
|
|
break;
|
|
case 2:
|
|
trophy=' 🥈';
|
|
break;
|
|
case 3:
|
|
trophy=' 🥉';
|
|
break;
|
|
default:
|
|
trophy=i;
|
|
}
|
|
|
|
row.innerHTML = "<td>"+(trophy)+"</td><td>"+spot.call+" </td><td class='nu'>"+spot.score+"</td><td>"+ratio+'</td><td class="nu">'+spot.qsos+'</td>';
|
|
i++;
|
|
});
|
|
document.getElementById('infotext').innerHTML=spots.date;
|
|
}
|
|
|
|
function fmt(ts) {
|
|
var spotDate = new Date(ts);
|
|
d=spotDate.getUTCDate().toString();
|
|
m=(1+spotDate.getUTCMonth()).toString();
|
|
h=spotDate.getUTCHours().toString();
|
|
i=spotDate.getUTCMinutes().toString();
|
|
retstr=d.padStart(2,'0')+"."+m.padStart(2,'0')+" "+h.padStart(2,'0')+":"+i.padStart(2,'0');
|
|
return retstr;
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|