CMYK, Javascript & device orientation
<!doctype html>
<html lang=“en“>
<head>
<meta charset=“utf-8″>
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no“>
<title>Zwischenstand</title>
<style>
/* RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: “; content: none;}table { border-collapse: collapse;border-spacing: 0;}
/* RESET ENDE */
html, body {
font-size:10px;
background-color: white;
}
.cyan {
position: absolute;
mix-blend-mode: multiply;
fill: white;
fill-opacity: 0;
stroke: cyan;
stroke-width: 15;
width: 160px;
height: 160px;
}
.magenta {
position: absolute;
mix-blend-mode: multiply;
fill: white;
fill-opacity: 0;
stroke: magenta;
stroke-width: 15;
width: 160px;
height: 160px;
}
.yellow {
position: absolute;
mix-blend-mode: multiply;
fill: white;
fill-opacity: 0;
stroke: yellow;
stroke-width: 15;
width: 160px;
height: 160px;
}
</style>
</head>
<body>
<a href=“index.html“>
<svg class=“cyan“ viewbox=“0 0 160 160″>
<circle id=“eins“ cx=“80″ cy=“80″ r=“70″ >
</svg>
<svg class=“magenta“ viewbox=“0 0 160 160″>
<circle id=“zwei“ cx=“80″ cy=“80″ r=“70″ >
</svg>
<svg class=“yellow“ viewbox=“0 0 160 160″>
<circle id=“drei“ cx=“80″ cy=“80″ r=“70″ >
</svg>
<pre class=“output“></pre >
</a>
<script>
var cyan = document.querySelector(‚.cyan‘);
var magenta = document.querySelector(‚.magenta‘);
var yellow = document.querySelector(‚.yellow‘);
var output = document.querySelector(‚.output‘);
function test(event) {
var maxX = document.querySelector(‚html‘).clientWidth;
var maxY = document.querySelector(‚html‘).clientHeight;
const {type} = screen.orientation;
// s.: https://developers.google.com/web/fundamentals/native-hardware/device-orientation
var x = Math.round(event.gamma); // In degree in the range [-90,90)
var y = Math.round(event.beta);
cyan.style.left = ((maxX*x/100) + (maxX/2 -100)) + „px“;
cyan.style.top = ((maxY*y/100) + (maxY/2 -100)) + „px“;
setTimeout(() => {
magenta.style.left = ((maxX*x/100) + (maxX/2 -100)) + „px“;
magenta.style.top = ((maxY*y/100) + (maxY/2 -100)) + „px“;
}, 500);
setTimeout(() => {
yellow.style.left = ((maxX*x/100) + (maxX/2 -100)) + „px“;
yellow.style.top = ((maxY*y/100) + (maxY/2 -100)) + „px“;
}, 1000);
output.textContent = `gamma(x): ${x}\n`;
output.textContent += `beta(y): ${y}\n`;
output.textContent += `MaxX: ${maxX}\n`;
output.textContent += `MaxY: ${maxY}\n`;
output.textContent += `Orient: ${type}\n`;
output.textContent += `Cyan X: ${cyan.style.left}\n`;
output.textContent += `Cyan Y: ${cyan.style.top}\n`;
}
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
document.location = „index.html“;
}
window.addEventListener(‚deviceorientation‘, test);
</script>
</body>
</html>
