32 lines
1.6 KiB
HTML
32 lines
1.6 KiB
HTML
<!doctype html>
|
||
<html lang="fi">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||
<title>Värimyrsky CMYK – messupeli</title>
|
||
<style>
|
||
html, body { margin:0; padding:0; background:#0b0b0d; overflow:hidden; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif; }
|
||
#ui { position: fixed; inset: 0.75rem 0.75rem auto auto; display:flex; gap:0.5rem; z-index:10; }
|
||
.btn { font-size: 1.1rem; padding: .6rem 1rem; border-radius: 14px; border:0; background:#1f1f25; color:white; cursor:pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; }
|
||
.btn:active { transform: scale(.98); }
|
||
#leader { position: fixed; left: 0.75rem; top: 0.75rem; z-index:10; color:#c9c9d1; font-size: clamp(14px, 1.8vw, 18px); background: rgba(0,0,0,.35); padding:.5rem .75rem; border-radius:12px; }
|
||
#leader h3 { margin:.1rem 0 .3rem 0; font-weight:700; color:#fff; }
|
||
#leader ol { margin:.2rem 0 0 1rem; padding:0; }
|
||
</style>
|
||
<script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
|
||
<script language="javascript" type="text/javascript" src="sketch_250819b_CMYKGame.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="leader" aria-hidden="true">
|
||
<h3>Päivän top-10</h3>
|
||
<ol id="lb"></ol>
|
||
</div>
|
||
<div id="ui">
|
||
<button id="btnStart" class="btn">▶️ Aloita / Uudestaan</button>
|
||
<button id="btnFull" class="btn">⛶ Koko näyttö</button>
|
||
<button id="btnMute" class="btn">🔈 Äänet päälle/pois</button>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|