lion/calender.app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

calender dev 1

Browse source
This commit is contained in:
Alexander Mahr 2025-02-15 08:12:49 +01:00
parent 38f4fa9774
commit cdd0ac3531
1 changed files with 161 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

217
app/assets/index.html
View file

@ -5,74 +5,179 @@
<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> <div>Mi</div>
<!-- UI for logging/debugging --> <div>Do</div>
<button id="log" onclick="enableLog(event);">Start/Stop event logging</button> <div>Fr</div>
<button id="clearlog" onclick="clearLog(event);">Clear the log</button> <div>Sa</div>
<p></p> <div>So</div>
<output></output> </div>
<div class="days">
<a href="https://server.alexmahr.de/calender">calender</a> <div>1</div>
<h1>Webview</h1> <div>1</div>
<pre id="output">output</pre> <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> <script>
window.addEventListener("error",(error)=>{ window.addEventListener("error",(error)=>{
document.body.innerHTML = "<h1>error</h1><pre>" + document.body.innerHTML = "<h1>error</h1><pre>" +
error.filename + error.filename +
"\nline:" + error.lineno + "\nline:" + error.lineno +
"\n"+error.message +"</pre>"; "\n"+error.message +"</pre>";
},false); },false);
['touchstart','touchmove','touchend'].forEach((evname)=>{ window.addEventListener("load",()=>{
window.addEventListener(evname,(ev)=>{ var count = localStorage.getItem("app-opened-count")|| 0;
output.textContent+=evname+"\n" ; count++;
ev.preventDefault(); localStorage.setItem("app-opened-count",count);
},false); var h2 = document.createElement("h2");
}); h2.textContent = "Javascript works! (app was opened " + count + " times)";
window.addEventListener("load",()=>{ h2.style.animation="wobble 1s ease-in-out 0s 1 forwards normal running"
var count = localStorage.getItem("app-opened-count")|| 0; document.body.appendChild(h2);
count++; },false);
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>
<script src='pinch.js'></script> <script src='pinch.js'></script>
</body> </body>