template.html | searchcode

/advent/template.html

https://github.com/infusion/HTML5-Experiments
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>&nbsp;&nbsp;&nbsp;&raquo;" + box.UNameFrom + "</strong>";
                    this.appendChild(span);
                    this.style.background = "rgba(255,255,255,0.9)";
                  }
                  document.body.appendChild(div);
                })(boxes[i]);
              }




            })();

        </script>
    </body>
</html>