184 lines
4.3 KiB
HTML
184 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width,initial-scale=1.0" name="viewport">
|
|
</head>
|
|
<style>
|
|
* {
|
|
font-family: sans;
|
|
}
|
|
:root {
|
|
touch-action: pan-x pan-y;
|
|
height: 100%
|
|
}
|
|
body{
|
|
background-color:#ffa;
|
|
margin:0
|
|
}
|
|
.monthview {
|
|
background-color:rgba(255,255,255,0.5);
|
|
border:2px solid rgba(0,0,0,0.5);
|
|
border-radius: 10%;
|
|
/*margin:5px;*/
|
|
min-height: 20vw;
|
|
margin:5px;
|
|
scroll-snap-align: center;
|
|
overflow:hidden;
|
|
}
|
|
.label{
|
|
background-color:#a44;
|
|
color:#fff;
|
|
font-size:10vw;
|
|
text-align:center;
|
|
}
|
|
.weekdays,.days{
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
|
|
.weekdays{
|
|
height: 1cm;
|
|
}
|
|
|
|
.weekdays div, .days div {
|
|
text-align:center;
|
|
height: 2cm;
|
|
align:content;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div style="margin:0;scroll-snap-type: y mandatory;height:90vh;overflow:scroll;border: 1px solid red">
|
|
<div class="monthview">
|
|
<div class="label">Februar 2025</div>
|
|
<div class="weekdays">
|
|
<div>Mo</div>
|
|
<div>Di</div>
|
|
<div>Mi</div>
|
|
<div>Do</div>
|
|
<div>Fr</div>
|
|
<div>Sa</div>
|
|
<div>So</div>
|
|
</div>
|
|
<div class="days">
|
|
<div>1</div>
|
|
<div>1</div>
|
|
<div>1</div>
|
|
<div>1</div>
|
|
<div>1</div>
|
|
<div>1</div>
|
|
<div>1</div>
|
|
<div>1</div>
|
|
<div>1</div>
|
|
<div>1</div>
|
|
</div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="monthview">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.addEventListener("error",(error)=>{
|
|
document.body.innerHTML = "<h1>error</h1><pre>" +
|
|
error.filename +
|
|
"\nline:" + error.lineno +
|
|
"\n"+error.message +"</pre>";
|
|
},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>
|