contra-renderer/www/index.html

113 lines
2.4 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype Contra Dance Renderer</title>
<style>
canvas {
border: solid black 2px;
height: 100%;
width: 100%;
}
#canvasDiv {
position: relative;
margin: 1.4em;
width: 40%;
height: 90vh;
top: 0;
left: 0;
float: left;
}
.hallLabel {
position: absolute;
text-align: center;
}
.hallLabel.top {
bottom: -1.2em;
left: 50%;
}
.hallLabel.top::after {
content: " (band/caller)";
}
.hallLabel.bottom {
top: -1.3em;
left: 50%;
}
.hallLabel.left {
left: -1.3em;
top: 50%;
writing-mode: vertical-lr;
transform: rotate(180deg);
}
.hallLabel.right {
right: -1.5em;
top: 50%;
writing-mode: vertical-lr;
}
#debug {
display: none;
}
#showDebug:checked ~ #debug {
display: table;
}
table, tr, th, td {
border: solid black 1px;
vertical-align: top;
}
table pre {
position: sticky;
top: 0;
}
th.Ones.Lark {
background-color: hsl(0, 80%, 50%);
}
td.Ones.Lark {
background-color: hsl(0, 90%, 70%);
}
th.Ones.Robin {
background-color: hsl(39, 80%, 50%);
}
td.Ones.Robin {
background-color: hsl(39, 90%, 70%);
}
th.Twos.Lark {
background-color: hsl(240, 70%, 65%);
}
td.Twos.Lark {
background-color: hsl(240, 90%, 80%);
}
th.Twos.Robin {
background-color: hsl(180, 80%, 50%);
}
td.Twos.Robin {
background-color: hsl(180, 90%, 70%);
}
.move {
list-style-type: none;
cursor: pointer;
}
.currentMove {
background-color: yellow;
list-style-type: '▶';
}
.source {
font-size: 0.8em;
position: absolute;
right: 0;
top: 0;
}
</style>
<script type="module" src="js/main.js"></script>
</head>
<body>
<nav class = "source">
created by
<a href = "mailto:perelman@cs.washington.edu?subject=Prototype Contra Dance Render">Daniel Perelman</a>
|
<a href = "https://git.aweirdimagination.net/perelman/contra-renderer">source code</a> (AGPL3+)
</nav>
</body>
</html>