2020-12-01 12:25:47 +01:00
|
|
|
<!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" />
|
2020-12-01 15:46:11 +01:00
|
|
|
<link rel="stylesheet" type="text/css" href="css/main-adventskalender.css?v=3.4" media="all">
|
2020-12-01 12:25:47 +01:00
|
|
|
|
|
|
|
|
<!--[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>
|
2020-12-01 15:46:11 +01:00
|
|
|
<?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;
|
|
|
|
|
?>
|
|
|
|
|
|
2020-12-01 12:25:47 +01:00
|
|
|
<body>
|
2020-12-01 14:26:41 +01:00
|
|
|
<?php if ($snow_enabled) { ?>
|
|
|
|
|
<canvas class="snow" id="snow"></canvas>
|
|
|
|
|
<?php } ?>
|
2020-12-01 12:25:47 +01:00
|
|
|
<center>
|
|
|
|
|
<p style="color: white; font-family: christmasFont; font-size: 48px; margin: 16px 0px 20px 0px;">Adventskalender Seline</p>
|
|
|
|
|
<div class="mainCalendar">
|
2020-12-01 14:26:41 +01:00
|
|
|
<?php
|
|
|
|
|
$calendar->render();
|
2020-12-01 12:25:47 +01:00
|
|
|
?>
|
|
|
|
|
</div>
|
|
|
|
|
|
2020-12-01 14:26:41 +01:00
|
|
|
<?php if ($showExtras) { ?>
|
2020-12-01 12:25:47 +01:00
|
|
|
<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>
|
2020-12-01 14:26:41 +01:00
|
|
|
|
|
|
|
|
<?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 };
|
|
|
|
|
};
|
2020-12-01 12:25:47 +01:00
|
|
|
|
2020-12-01 14:26:41 +01:00
|
|
|
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 } ?>
|
2020-12-01 12:25:47 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
