forked from perelman/contra-renderer
142 lines
3.4 KiB
HTML
142 lines
3.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 {
|
|
background-color: hsl(27, 99%, 59%);
|
|
}
|
|
td.Ones {
|
|
background-color: hsl(27, 99%, 85%);
|
|
}
|
|
th.Twos {
|
|
background-color: hsl(249, 42%, 57%);
|
|
}
|
|
td.Twos {
|
|
background-color: hsl(249, 52%, 85%);
|
|
}
|
|
|
|
th.Lark::before {
|
|
content: "◠";
|
|
text-decoration: line-through;
|
|
padding-right: 1ex;
|
|
}
|
|
th.Robin::before {
|
|
content: "△";
|
|
padding-right: 1ex;
|
|
}
|
|
|
|
td.Lark.Ones {
|
|
background:
|
|
radial-gradient(circle at bottom left, hsl(27, 99%, 75%) 15%, transparent 16%),
|
|
radial-gradient(circle at bottom right, hsl(27, 99%, 75%) 15%, transparent 16%),
|
|
hsl(27, 99%, 85%);
|
|
background-size: 6em 3em;
|
|
}
|
|
td.Lark.Twos {
|
|
background:
|
|
radial-gradient(circle at bottom left, hsl(249, 42%, 75%) 15%, transparent 16%),
|
|
radial-gradient(circle at bottom right,hsl(249, 42%, 75%) 15%, transparent 16%),
|
|
hsl(249, 52%, 85%);
|
|
background-size: 6em 3em;
|
|
}
|
|
|
|
td.Robin.Ones {
|
|
background:
|
|
linear-gradient(45deg,hsl(27, 99%, 75%) 10%, transparent 10%),
|
|
linear-gradient(135deg, transparent 90%,hsl(27, 99%, 75%) 90%),
|
|
hsl(27, 99%, 85%);
|
|
background-size: 6em 3em;
|
|
}
|
|
td.Robin.Twos {
|
|
background:
|
|
linear-gradient(45deg,hsl(249, 42%, 75%) 10%, transparent 10%),
|
|
linear-gradient(135deg, transparent 90%,hsl(249, 42%, 75%) 90%),
|
|
hsl(249, 52%, 85%);
|
|
background-size: 6em 3em;
|
|
}
|
|
|
|
.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>
|