79 lines
2.1 KiB
HTML
79 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width,initial-scale=1.0" name="viewport">
|
|
</head>
|
|
<style>
|
|
:root {
|
|
touch-action: pan-x pan-y;
|
|
height: 100%
|
|
}
|
|
@keyframes wobble {
|
|
0% {
|
|
transform: scale(0.1);
|
|
opacity:0.0
|
|
}
|
|
100% {
|
|
transform: scale(1.0);
|
|
opacity:1.0
|
|
}
|
|
}
|
|
body{
|
|
background-color:#ffa;
|
|
}
|
|
div {
|
|
margin: 0em;
|
|
padding: 2em;
|
|
}
|
|
#target {
|
|
background: white;
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
<!--<body onload="init();" style="touch-action:none">-->
|
|
<body onload="init();">
|
|
<h1> PINCHYYYY</h1>
|
|
<div id="target">
|
|
Touch and Hold with 2 pointers, then pinch in or out.<br />
|
|
The background color will change to pink if the pinch is opening (Zoom In)
|
|
or changes to lightblue if the pinch is closing (Zoom out).
|
|
</div>
|
|
<!-- UI for logging/debugging -->
|
|
<button id="log" onclick="enableLog(event);">Start/Stop event logging</button>
|
|
<button id="clearlog" onclick="clearLog(event);">Clear the log</button>
|
|
<p></p>
|
|
<output></output>
|
|
|
|
<a href="https://server.alexmahr.de/calender">calender</a>
|
|
<h1>Webview</h1>
|
|
<pre id="output">output</pre>
|
|
<script>
|
|
window.addEventListener("error",(error)=>{
|
|
document.body.innerHTML = "<h1>error</h1><pre>" +
|
|
error.filename +
|
|
"\nline:" + error.lineno +
|
|
"\n"+error.message +"</pre>";
|
|
},false);
|
|
|
|
['touchstart','touchmove','touchend'].forEach((evname)=>{
|
|
window.addEventListener(evname,(ev)=>{
|
|
output.textContent+=evname+"\n" ;
|
|
ev.preventDefault();
|
|
},false);
|
|
});
|
|
window.addEventListener("load",()=>{
|
|
var count = localStorage.getItem("app-opened-count")|| 0;
|
|
count++;
|
|
localStorage.setItem("app-opened-count",count);
|
|
var h2 = document.createElement("h2");
|
|
h2.textContent = "Javascript works! (app was opened " + count + " times)";
|
|
h2.style.animation="wobble 1s ease-in-out 0s 1 forwards normal running"
|
|
document.body.appendChild(h2);
|
|
},false);
|
|
|
|
|
|
</script>
|
|
<script src='pinch.js'></script>
|
|
</body>
|
|
</html>
|