ub-movements/index.html
2024-04-26 15:10:05 +02:00

74 lines
No EOL
1.5 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UvA UB - movements</title>
<style>
#canvas {
/* background: white; */
position: absolute;
top: 0;
left: 0;
transform-origin: top left;
margin: 0;
padding: 0;
overflow: hidden;
}
@font-face {
font-family: 'Fluxisch Mono', sans-serif;
src:
url(assets/fonts/FluxischElse-Regular.woff) format('woff');
font-weight: normal;
}
@font-face {
font-family: 'Fluxisch Mono', sans-serif;
src:
url(assets/fonts/FluxischElse-Light.woff) format('woff');
font-weight: 200;
}
@font-face {
font-family: 'Fluxisch Mono', sans-serif;
src:
url(assets/fonts/FluxischElse-Bold.woff) format('woff');
font-weight: bold;
}
body {
background: black;
}
</style>
<script>
function scaleToFit() {
const el = document.getElementById('canvas');
const sw = window.innerWidth / parseInt(el.style.width);
const sh = window.innerHeight / parseInt(el.style.height);
const s = Math.min(sw, sh);
canvas.style.transform = `scale(${s * 100}%)`;
}
window.addEventListener('resize', scaleToFit);
window.addEventListener('load', scaleToFit);
</script>
</head>
<body>
<div id="canvas">
<div id="viz">
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>