/advent/template.html
HTML | 372 lines | 291 code | 81 blank | 0 comment | 0 complexity | 9b1618ffd325952603fa461ad08f76b9 MD5 | raw file
- <html>
- <head>
- <title>Advent Calendar</title>
- <meta charset="utf-8">
- <style>
- body {
- background: url(/image/bg.jpg)
- }
- #calendar {
- perspective: 1000px;
- position: relative;
- margin: auto;
- display:none;
- box-shadow: 0px 3px 28px 0px rgba(0,0,0,0.75);
- border: 5px solid white;
- }
- .frame {
- position:absolute;
- cursor: pointer;
- box-shadow: inset 0 0 1px #000;
- }
- .door {
- transform-origin: left;
- transform-style: preserve-3d;
- transition: .7s transform cubic-bezier(0.470, 0.000, 0.745, 0.715);
- }
- .open {
- transform: rotateY(-140deg);
- }
- .wing {
- position: absolute;
- background:white; /* necessary to make contents visible while loading */
- left: 0px;
- top: 0px;
- border: 1px solid rgba(0,0,0,0.2);
- box-shadow: 0px 0px 5px #4195fc;
- backface-visibility: hidden;
- box-sizing: border-box;
- box-shadow: 0px 0px 3px rgba(255,255,255,0.5);
- text-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
- }
- #pre {
- background:white;
- width: 600px;
- height: 500px;
- display:none;
- border-radius: 10px;
- margin:auto;
- position:relative;
- box-shadow: 0px 3px 28px 0px rgba(0,0,0,0.75);
- }
- #pre canvas{
- position:absolute;left:0;top:0;
- }
- </style>
- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
- </head>
- <body>
- <div id="calendar"></div>
- <script>
- (function() {
- var today = <?php echo $today;?>;
- var CALENDAR = document.getElementById('calendar');
- var isMobile = typeof window.orientation !== 'undefined';
- if (isMobile) {
- var scale = 100;
- var radii = 30;
- var yoff = 30;
- var width = 800;
- var height = 800;
- } else {
- var scale = 50;
- var radii = 10;
- var yoff = 30;
- var width = 600;
- var height = 500;
- }
- var isDown = false;
- var allCleared = false;
- var inCircle = -1;
- var prev = {x: 0, y: 0};
- var STATE = getCookies()['F'] || 0;
- var Off = {x: 0, y: 0};
- function setOffset(el) {
- var _x = 0;
- var _y = 0;
- while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
- _x += el.offsetLeft - el.scrollLeft;
- _y += el.offsetTop - el.scrollTop;
- el = el.offsetParent;
- }
- Off.x = _x;
- Off.y = _y;
- }
- CALENDAR.style.display = "block";
- function changeState(i) {
- STATE ^= 1 << i;
- setCookie('F', STATE, 31);
- }
- function setCookie(name, value, daysToLive) {
- var cookie = name + "=" + encodeURIComponent(value);
- if (typeof daysToLive === "number")
- cookie += "; max-age=" + (daysToLive * 60 * 60 * 24);
- cookie += "; path=" + location.pathname;
- document.cookie = cookie;
- }
- function getCookies() {
- var cookies = {};
- var all = document.cookie;
- if (all === "")
- return cookies;
- var list = all.split("; ");
- for (var i = 0; i < list.length; i++) {
- var cookie = list[i];
- var p = cookie.indexOf("=");
- var name = cookie.substring(0, p);
- var value = cookie.substring(p + 1);
- value = decodeURIComponent(value);
- cookies[name] = value;
- }
- return cookies;
- }
- function calendar(opts, doors) {
- var cal = CALENDAR;
- cal.style.width = opts.width + "px";
- cal.style.height = opts.height + "px";
- cal.style.backgroundImage = "url(" + opts.theme + ")";
- for (var i = 0; i < doors.length; i++) {
- (function(i) {
- var d = doors[i];
- var frame = document.createElement("div");
- var door = document.createElement("div");
- var cont = document.createElement("div");
- var front = document.createElement("div");
- var back = document.createElement("div");
- frame.style.background = d.backgroundFloor;
- frame.style.backgroundSize = "cover";
- frame.style.left = d.x + "px";
- frame.style.top = d.y + "px";
- frame.style.width = d.width + "px";
- frame.style.height = d.height + "px";
- frame.className = "frame";
- cont.innerHTML = d.contentFloor;
- cont.style.position = "absolute";
- if (d.open) {
- door.className = "door open";
- } else {
- door.className = "door";
- }
- door.onclick = function(ev) {
- ev.stopPropagation();
- if (today <= i) {
- alert(opts.alertTooEarly);
- return;
- }
- changeState(i);
- if (this.className === "door")
- this.className = "door open";
- else
- this.className = "door";
- };
- front.style.backgroundImage = "url(" + opts.theme + ")";
- front.style.backgroundPosition = (-d.x - 1) + "px " + (-d.y - 1) + "px";
- front.style.width = d.width + "px";
- front.style.height = d.height + "px";
- front.style.font = "18px Arial";
- front.style.textAlign = "right";
- front.style.padding = "70px 10px 0px 0px";
- front.className = "wing";
- front.innerHTML = d.num;
- back.style.background = d.backgroundWing;
- back.style.transform = "rotateY(180deg)";
- back.style.width = d.width + "px";
- back.style.height = d.height + "px";
- back.className = "wing";
- back.innerHTML = d.contentWing;
- door.appendChild(front);
- door.appendChild(back);
- frame.appendChild(cont);
- frame.appendChild(door);
- cal.appendChild(frame);
- })(i);
- }
- }
- var shuffle = function(arr) {
- for (var i = arr.length; i--; ) {
- var j = Math.random() * arr.length | 0;
- var t = arr[i];
- arr[i] = arr[j];
- arr[j] = t;
- }
- return arr;
- };
- var data = <?php echo json_encode($gifts);?>;
- var doors = [];
- var coord = [];
- for (var i = 0; i < 24; i++) {
- var floor = "", wing = "";
- var back = "white";
- if (data[i]) {
- var gift = data[i].DData;
- var back = "";
- var door = "";
- var click = "";
- if (gift[0] == '/') {
- back = '/image' + gift;
- click = "layer";
- } else {
- var m = gift.match(/v=([a-z0-9_-]+)/i);
- if (m !== null && m[1] !== undefined) {
- back = 'https://i.ytimg.com/vi/' + m[1] + '/hqdefault.jpg';
- click = gift;
- } else {
- back = 'https://thumbs.dreamstime.com/b/hand-cursor-clicking-click-here-button-d-render-52415076.jpg';
- click = gift;
- }
- var m = gift.match(/\.(gif|png|jpg)/i);
- if (m !== null) {
- back = gift;
- click = "layer";
- }
- }
- if (click === 'layer') {
- floor = '<a href="' + back + '" target="_blank" title="Greetings from ' + data[i].UNameFrom + '" style="display:block;width:95px;height:95px"></a>';
- back = "url(" + back + ")";
- } else {
- floor = '<a href="' + click + '" target="_blank" title="Greetings from ' + data[i].UNameFrom + '" style="display:block;width:95px;height:95px"></a>';
- back = "white url(" + back + ") center center no-repeat";
- }
- }
- doors.push({
- num: i + 1,
- backgroundFloor: back,
- backgroundWing: wing ? "white" : "white url(/image/flakes/" + (1 + Math.random() * 20 | 0) + ".png) center center no-repeat",
- contentWing: wing,
- contentFloor: floor,
- x: 0,
- y: 0,
- width: 95,
- height: 95,
- open: STATE & (1 << i)
- });
- coord.push([
- (i % 4 | 0) * 190 + 20,
- (i / 4 | 0) * 120 + 20]);
- }
- coord = shuffle(coord);
- for (var i = 0; i < 24; i++) {
- doors[i].x = coord[i][0];
- doors[i].y = coord[i][1];
- }
- calendar({
- height: 750,
- width: 705,
- theme: "/image<?php echo $theme ? $theme : '/cal.jpg' ;?>",
- alertTooEarly: "Bisschen früh, was?"
- }, doors);
- var boxes = <?php echo json_encode($boxes);?>
- for (var i = 0; i < boxes.length; i++) {
- (function(box) {
- var dom = '<img style="float:left" src="/image/box.png" width="' + (Math.random() * 200 + 80) + '">';
- var div = document.createElement('div');
- div.style.position = "absolute";
- div.style.padding = "10px";
- div.style.borderRadius = "10px";
- div.style.top = (100 + (window.innerHeight - 300) * Math.random()) + "px";
- div.style.left = (100 + (window.innerWidth - 500) * Math.random()) + "px";
- div.innerHTML = dom;
- var open = false;
- div.onclick = function(ev) {
- ev.preventDefault();
- if (open) {
- $.ajax({
- url: "/index.php?delete=" + box.GID
- });
- document.body.removeChild(div);
- return;
- }
- open = true;
- var span = document.createElement('span');
- span.innerHTML = box.GData + "<br><strong> »" + box.UNameFrom + "</strong>";
- this.appendChild(span);
- this.style.background = "rgba(255,255,255,0.9)";
- }
- document.body.appendChild(div);
- })(boxes[i]);
- }
- })();
- </script>
- </body>
- </html>