248 lines
6.0 KiB
HTML
248 lines
6.0 KiB
HTML
<meta name="viewport" content="initial-scale=1.0">
|
|
<style>
|
|
body {
|
|
background-color: #999;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
p {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
svg {
|
|
width: 100vw;
|
|
height: 200px;
|
|
}
|
|
|
|
circle {
|
|
fill: none;
|
|
stroke: #333;
|
|
stroke-width: 8px;
|
|
}
|
|
|
|
circle.main {
|
|
fill: none;
|
|
stroke-width: 3px;
|
|
}
|
|
|
|
text {
|
|
fill: #333;
|
|
font-family: -apple-system;
|
|
font-size: 52px;
|
|
text-anchor: middle;
|
|
}
|
|
</style>
|
|
<script>
|
|
let ctx = null;
|
|
function spin()
|
|
{
|
|
var endTime = Date.now() + 750;
|
|
|
|
while (true) {
|
|
var foo = document.cookies;
|
|
|
|
var currentTime = Date.now();
|
|
if (currentTime > endTime)
|
|
break;
|
|
}
|
|
}
|
|
|
|
function doSetup()
|
|
{
|
|
let circles = document.querySelectorAll("circle:first-of-type");
|
|
for (let i=0; i < circles.length; i++) {
|
|
let circle = circles[i];
|
|
circle.style.fill = `rgb(${Math.floor(255 - (i / circles.length * 240))}, 80, ${Math.floor((i / circles.length * 220))})`;
|
|
}
|
|
window.addEventListener("touchmove", function(e) {
|
|
spin();
|
|
}, false);
|
|
}
|
|
|
|
window.addEventListener("load", doSetup, false);
|
|
</script>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">a</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">b</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">c</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">d</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">e</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">f</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">g</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">h</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">i</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">j</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">k</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">l</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">m</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">n</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">o</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">p</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">q</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">r</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">s</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">t</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">u</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">v</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">w</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">x</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">y</text>
|
|
</svg>
|
|
</p>
|
|
<p>
|
|
<svg viewBox="0 0 100 100">
|
|
<circle class="main" cx="50" cy="50" r="45"/>
|
|
<circle cx="50" cy="50" r="38"/>
|
|
<text x="50" y="64">z</text>
|
|
</svg>
|
|
</p>
|