launcher/cal.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="icon" href="/icon-192.png" type="image/png">
    <link rel="apple-touch-icon" href="/icon-192.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="light dark">
    <title>[calendar]</title>
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="style.css">

    <meta name="theme-color" content="#000000">
    <style>
	body {
		overflow: hidden;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		height: 100dvh;
	}


	.frame div,a {
		display: flex;
		padding: 0.7rem;
	}

	.box {
		overflow-y: auto;
	}

	ul {
		list-style: none;
		padding:0;
		margin:0;
	}


	@media only screen and (max-width: 600px) {
		body {
			font-size: 12px;
		}

		.frame {
			display: grid;
			grid-template-rows: 650px;
			grid-template-columns: 400px;
			gap: 1rem;
			grid-template-areas:
				"box-1";
		}	
		ul {
			list-style: none;
			display:flex;
			justify-content:center;
			align-items:center;
			padding:0;
			margin:0;
		}
	}
	/* ipad portrait */
	@media only screen and (min-width: 600px) {
		body {
			font-size: 16px;
		}

		.frame {
			display: grid;
			grid-template-rows: 800px;
			grid-template-columns: 600px;
			gap: 1rem;
			grid-template-areas:
				"box-1";
		}	
		ul {
			display:flex;
			justify-content:center;
			align-items:center;
		}
	}
	/* phone horizontal*/
	@media only screen and (min-width: 768px) {
		body {
			font-size: 12px;
		}

		.frame {
			display: grid;
			grid-template-rows: 350px;
			grid-template-columns: 700px;
			gap: 1rem;
			grid-template-areas:
				"box-1";
		}	
		ul {
			display:block;
			justify-content:center;
			align-items:center;
		}
	}
	/* ipad landscape*/
	@media only screen and (min-width: 992px) {
		body {
			font-size: 16px;
		}

		.frame {
			display: grid;
			grid-template-rows: 450px ;
			grid-template-columns: 800px;
			gap: 1rem;
			grid-template-areas:
				"box-1";
		}	
		ul {
			display:block;
			justify-content:center;
			align-items:center;
		}
	}

	@media only screen and (min-width: 1200px) {
		body {
			font-size: 18px; 
		}

		.frame {
			display: grid;
			grid-template-rows: 700px;
			grid-template-columns: 1100px;
			gap: 1rem;
			grid-template-areas:
				"box-1";
		}	
		ul {
			display:block;
			justify-content:center;
			align-items:center;
		}
	}
    </style>
</head>
<body>
	<div class="container">
		<div class="frame">
			<div class="box box-1" style="grid-area: box-1">
				<iframe id="open-web-calendar" 
    style="background:url('https://raw.githubusercontent.com/niccokunzmann/open-web-calendar/master/static/img/loaders/circular-loader.gif') center center no-repeat;"
    src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?css=.dhx_cal_navline%2C%20.dhx_scale_bar%2C%20.dhx_cal_container%2C%20.dhx_cal_header%2C%20.dhx_cal_scale_placeholder%2C%20.dhx_scale_holder%2C%20.dhx_scale_hour%20%7Bbackground-color%3A%20%23ffffff%3B%7D&amp;date=2025-09-20&amp;prefer_browser_language=true&amp;skin=flat&amp;target=_blank&amp;title=0ff.space&amp;url=https%3A%2F%2Fcal.0ff.space%2Fcalendar%2Fpublic%2F"
    sandbox="allow-scripts allow-same-origin allow-popups allow-downloads"
    allowTransparency="true" scrolling="no" 
    frameborder="0" height="851px" width="100%"></iframe>
			</div>
		</div>
	</div>
</body>
</html>