-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathelo.html
147 lines (133 loc) · 4.56 KB
/
elo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./icons8-binary-50.png">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
<title>Saver Abi Elo Viewer | Römmling</title>
<style>
html, body {
font-family: monospace;
max-width: 100%;
background-color: #161616;
padding: 10px;
color: #fff;
}
#list{
color: white;
font-size: 1.17rem;
list-style-type: decimal;
}
#player-list{
list-style-type: katakana;
font-size: 1.17rem;
}
.first-item {
color: green;
}
.first-item::after{
content: '🏆';
}
.last-item {
color: red;
}
.last-item::after{
content: '🤡';
}
button {
display: inline-block;
padding: 5px 10px;
font-size: 12px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
background-color: transparent;
border: 2px solid rgba(227, 35, 17, 0.8);
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
button:hover {
background-color: rgba(227, 35, 17, 0.8);
}
/* Button container */
#buttons {
margin-top: 5px;
text-align: right;
}
label {
display: block; /* Ensures label is displayed on a new line */
margin-bottom: 5px; /* Adds some space between label and select element */
font-weight: bold; /* Makes the label text bold */
}
/* Style for the select element */
#prey-select {
width: auto; /* Adjust the width as needed */
padding: 4px; /* Adds padding inside the select box */
font-size: 14px; /* Sets the font size */
border: 1px solid #ccc; /* Adds a border */
background-color: #161616;
color: white;
border-radius: 1px; /* Rounds the corners of the select box */
}
/* Style for select element when focused */
#prey-select:focus {
outline: none; /* Removes the default focus outline */
border-color:rgba(227, 35, 17, 0.8); /* Changes the border color when the select element is focused */
}
#prey-select option {
padding: 1px; /* Adds padding to the options */
font-size: 16px; /* Sets the font size of the options */
}
/* Style for the selected option */
#prey-select option:checked {
background-color:rgba(227, 35, 17, 0.8); /* Changes the background color of the selected option */
}
.container {
max-height: 100vh;
width: auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
@media (max-width: 767px) {
.container {
flex-direction: column; /* Stack the divs vertically */
align-items: center; /* Center align the divs */
}
}
</style>
<!-- Hier können weitere Meta-Tags, CSS-Links oder Skript-Links hinzugefügt werden -->
</head>
<body>
<main>
<div style="max-height: 90vh;">
<div id="buttons">
<button onclick="showAllPlayers()">Alle Spieler Anzeigen</button>
<button onclick="showLevel10Players()">Nur Level 10 Spieler</button>
</div>
<canvas height="100%" id="eloChart"></canvas> <br>
</div>
<div style="margin-top: 5%; padding: 15px;">
<h3 style="color: #fff;">Der Spieler mit der höchsten Elo ist <a id="maxEloName"></a> mit <a id="maxElo"></a></h3><br>
</div>
<div class='container'>
<div style="padding: 15px;">
<h2>Spieler Liste</h2>
<ul id="list"></ul>
</div>
<div style="padding: 15px;">
<h2>Jäger und Gejagter</h2>
<label for="prey-select">Wähle den Gejagten:</label>
<select id="prey-select"> <!-- Optionen für die Auswahl des Gejagten werden dynamisch generiert --> </select>
<button onclick="generateHunterAndPreyList()">Jagen</button>
<ul id="player-list"></ul>
</div>
</div>
</main>
</body>
<script src="js/charts.js"></script>
</html>