calender dev 1
This commit is contained in:
parent
38f4fa9774
commit
cdd0ac3531
1 changed files with 161 additions and 56 deletions
|
|
@ -5,49 +5,161 @@
|
||||||
<meta content="width=device-width,initial-scale=1.0" name="viewport">
|
<meta content="width=device-width,initial-scale=1.0" name="viewport">
|
||||||
</head>
|
</head>
|
||||||
<style>
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: sans;
|
||||||
|
}
|
||||||
:root {
|
:root {
|
||||||
touch-action: pan-x pan-y;
|
touch-action: pan-x pan-y;
|
||||||
height: 100%
|
height: 100%
|
||||||
}
|
}
|
||||||
@keyframes wobble {
|
|
||||||
0% {
|
|
||||||
transform: scale(0.1);
|
|
||||||
opacity:0.0
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1.0);
|
|
||||||
opacity:1.0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
body{
|
body{
|
||||||
background-color:#ffa;
|
background-color:#ffa;
|
||||||
|
margin:0
|
||||||
}
|
}
|
||||||
div {
|
.monthview {
|
||||||
margin: 0em;
|
background-color:rgba(255,255,255,0.5);
|
||||||
padding: 2em;
|
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;
|
||||||
}
|
}
|
||||||
#target {
|
.label{
|
||||||
background: white;
|
background-color:#a44;
|
||||||
border: 1px solid black;
|
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>
|
</style>
|
||||||
<!--<body onload="init();" style="touch-action:none">-->
|
<body>
|
||||||
<body onload="init();">
|
<div style="margin:0;scroll-snap-type: y mandatory;height:90vh;overflow:scroll;border: 1px solid red">
|
||||||
<h1> PINCHYYYY</h1>
|
<div class="monthview">
|
||||||
<div id="target">
|
<div class="label">Februar 2025</div>
|
||||||
Touch and Hold with 2 pointers, then pinch in or out.<br />
|
<div class="weekdays">
|
||||||
The background color will change to pink if the pinch is opening (Zoom In)
|
<div>Mo</div>
|
||||||
or changes to lightblue if the pinch is closing (Zoom out).
|
<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>
|
</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>
|
<script>
|
||||||
window.addEventListener("error",(error)=>{
|
window.addEventListener("error",(error)=>{
|
||||||
document.body.innerHTML = "<h1>error</h1><pre>" +
|
document.body.innerHTML = "<h1>error</h1><pre>" +
|
||||||
|
|
@ -56,12 +168,6 @@ window.addEventListener("error",(error)=>{
|
||||||
"\n"+error.message +"</pre>";
|
"\n"+error.message +"</pre>";
|
||||||
},false);
|
},false);
|
||||||
|
|
||||||
['touchstart','touchmove','touchend'].forEach((evname)=>{
|
|
||||||
window.addEventListener(evname,(ev)=>{
|
|
||||||
output.textContent+=evname+"\n" ;
|
|
||||||
ev.preventDefault();
|
|
||||||
},false);
|
|
||||||
});
|
|
||||||
window.addEventListener("load",()=>{
|
window.addEventListener("load",()=>{
|
||||||
var count = localStorage.getItem("app-opened-count")|| 0;
|
var count = localStorage.getItem("app-opened-count")|| 0;
|
||||||
count++;
|
count++;
|
||||||
|
|
@ -72,7 +178,6 @@ window.addEventListener("error",(error)=>{
|
||||||
document.body.appendChild(h2);
|
document.body.appendChild(h2);
|
||||||
},false);
|
},false);
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<script src='pinch.js'></script>
|
<script src='pinch.js'></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue