cbax_dev/static/epstein_bingo.html
2024-01-09 00:33:51 -05:00

137 lines
3.4 KiB
HTML

<html>
<head>
<title>Epstein Bingo</title>
<style>
:root {
--nomap-1: #5a9ecf;
--nomap-2: #9cd2dc;
--nomap-3: #f4f58d;
--nomap-4: #ffb6c1;
--nomap-5: #cb5c7d;
}
@font-face {
font-family: 'Comfortaa Bold';
font-style: normal;
font-weight: bold;
src: local('Comfortaa Bold'), url('/res/woff/cfa-b.woff') format('woff');
}
td:nth-child(0n + 1) {
background-color: var(--nomap-1);
}
td:nth-child(0n + 2) {
background-color: var(--nomap-2);
}
td:nth-child(0n + 3) {
background-color: var(--nomap-3);
}
td:nth-child(0n + 4) {
background-color: var(--nomap-4);
}
td:nth-child(0n + 5) {
background-color: var(--nomap-5);
}
th:nth-child(0n + 1) {
color: var(--nomap-1);
}
th:nth-child(0n + 2) {
color: var(--nomap-2);
}
th:nth-child(0n + 3) {
color: var(--nomap-3);
}
th:nth-child(0n + 4) {
color: var(--nomap-4);
}
th:nth-child(0n + 5) {
color: var(--nomap-5);
}
th {
background-color: #000;
font-size: 2em;
}
td {
vertical-align: middle;
}
h1 {
margin-top: 1em;
text-align: center;
}
table {
border: 1em solid;
border-radius: 25px;
text-align: center;
margin: auto;
}
.tile {
font-weight: bold;
width: 10vw;
height: 10vh;
text-align: center;
text-shadow: #888 2px 2px;
font-size: 2em;
display: table-cell;
vertical-align: middle;
cursor: pointer;
}
.free {
background-color: #fff;
}
button {
display: block;
margin: 0 auto;
}
body {
font-family: "Comfortaa Bold";
}
</style>
<script src="/res/js/epstein_bingo.js"></script>
</head>
<body>
<h1>Epstein Bingo</h1>
<table>
<tr>
<th>P</th>
<th>E</th>
<th>D</th>
<th>O</th>
<th>S</th>
</tr>
<tr>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
</tr>
<tr>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
</tr>
<tr>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile free" onclick=selected(this)>Bill Clinton</div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
</tr>
<tr>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
</tr>
<tr>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
<td><div class="tile" onclick=selected(this)></div></td>
</tr>
</table>
</body>
</html>