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">
</head>
<style>
* {
font-family: sans;
}
: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;
background-color:#ffa;
margin:0
}
div {
margin: 0em;
padding: 2em;
.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;
}
#target {
background: white;
border: 1px solid black;
.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 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>
<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("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);
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>