<!DOCTYPE html>
<html>
<head>
<title>Seline Adventskalender</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta charset="utf-8">
<meta name="theme-color" content="#2b1616">
<meta property="og:title" content="Adventskalender Seline">
<meta property="og:image" content="https://michu-it.com/seline/images/snowflake.png"/>
<!-- Include main jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal Code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link rel="stylesheet" type="text/css" href="css/main-adventskalender.css?v=3.4" media="all">
<!--[if lte IE 9]>
<style type='text/css'>
a.advent-calendar-entry:hover .advent-calendar-door { display:none; }
</style>
<![endif]-->
<?php if (!$dev) { ?>
<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://analytics.michu-it.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '3']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript><p><img src="https://analytics.michu-it.com/matomo.php?idsite=3&rec=1" style="border:0;" alt="" /></p></noscript>
<!-- End Matomo Code -->
<?php } ?>
</head>
<?php
$dev = isset($_GET['dev']) ? $_GET['dev'] : false;
if ($dev) {
$config = file_get_contents("./calendar_dev.json");
} else {
$config = file_get_contents("./calendar_prod.json");
}
require "adventCalendar.php";
$calendar = new adventCalendar();
$calendar->load_from_json($config);
//echo $calendar->showExtras;
//echo $calendar->enableSnow;
$showExtras = ($calendar->showExtras == 'true') ? true : false;
$snow_enabled = ($calendar->enableSnow == 'true') ? true : false;
?>
<body>
<?php if ($snow_enabled) { ?>
<canvas class="snow" id="snow"></canvas>
<?php } ?>
<center>
<p style="color: white; font-family: christmasFont; font-size: 48px; margin: 16px 0px 20px 0px;">Adventskalender Seline</p>
<div class="mainCalendar">
<?php
$calendar->render();
?>
</div>
<?php if ($showExtras) { ?>
<hr>
<p style="color: white; font-family: christmasFont; font-size: 40px; margin: 16px 0px 20px 0px;">Zite wod nüt sötsch abmache :</p>
<ul style="list-style-type:disc; max-width: 245px; color: white;">
<li>06.12.2020 - Dr Morge</li>
<li>11.12.2020 - Dr Abee</li>
<li>TBD ..</li>
</ul>
<?php } ?>
</center>
<?php if ($snow_enabled) { ?>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
<script>
const Snow = (canvas, count, options) => {
const ctx = canvas.getContext('2d');
const snowflakes = [];
const add = item => snowflakes.push(item(canvas));
const update = () => _.forEach(snowflakes, el => el.update());
const resize = () => {
ctx.canvas.width = canvas.offsetWidth;
ctx.canvas.height = canvas.offsetHeight;
_.forEach(snowflakes, el => el.resized());
};
const draw = () => {
ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
_.forEach(snowflakes, el => el.draw());
};
const events = () => {
window.addEventListener('resize', resize);
};
const loop = () => {
draw();
update();
animFrame(loop);
};
const init = () => {
_.times(count, () => add(canvas => SnowItem(canvas, null, options)));
events();
loop();
};
init(count);
resize();
return { add, resize };
};
const defaultOptions = {
color: 'orange',
radius: [0.5, 3.0],
speed: [1, 3],
wind: [-0.5, 3.0] };
const SnowItem = (canvas, drawFn = null, opts) => {
const options = { ...defaultOptions, ...opts };
const { radius, speed, wind, color } = options;
const params = {
color,
x: _.random(0, canvas.offsetWidth),
y: _.random(-canvas.offsetHeight, 0),
radius: _.random(...radius),
speed: _.random(...speed),
wind: _.random(...wind),
isResized: false };
const ctx = canvas.getContext('2d');
const updateData = () => {
params.x = _.random(0, canvas.offsetWidth);
params.y = _.random(-canvas.offsetHeight, 0);
};
const resized = () => params.isResized = true;
const drawDefault = () => {
ctx.beginPath();
ctx.arc(params.x, params.y, params.radius, 0, 2 * Math.PI);
ctx.fillStyle = params.color;
ctx.fill();
ctx.closePath();
};
const draw = drawFn ?
() => drawFn(ctx, params) :
drawDefault;
const translate = () => {
params.y += params.speed;
params.x += params.wind;
};
const onDown = () => {
if (params.y < canvas.offsetHeight) return;
if (params.isResized) {
updateData();
params.isResized = false;
} else {
params.y = 0;
params.x = _.random(0, canvas.offsetWidth);
}
};
const update = () => {
translate();
onDown();
};
return {
update,
resized,
draw };
};
const el = document.querySelector('.container');
const wrapper = document.querySelector('body');
const canvas = document.getElementById('snow');
const animFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
Snow(canvas, 150, { color: 'white' });
</script>
<?php } ?>
</body>
</html>