meta hot

by lycanox

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<div class="wrapper">
  <div class="pointer">
    <span class="server"><strong>Server time</strong><span>00:00</span></span>
    <span class="local"><strong>Your time</strong><span>00:00</span></span>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400, 700);
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #FFFFFF;
}

.wrapper {
  position: relative;
  padding-top: 2em;
}

.pointer {
  position: absolute;
  height: 100%;
  border-left: 2px solid red;
  z-index: 400;
  top: 0;
  transition: left 1s ease-in-out;
}

.pointer .server {
  position: absolute;
  left: 0;
  background: red;
  color: white;
  font-size: 0.8em;
  font-weight: bold;
  padding: 4px 6px;
  margin-left: -2px;
}

.pointer .local {
  position: absolute;
  right: 2px;
  background: #0099ff;
  color: white;
  font-size: 0.8em;
  font-weight: bold;
  padding: 4px 6px;
  margin-left: 0px;
}

.pointer .server strong {
  position: absolute;
  top: 2.1em;
  color: #0099ff;
  left: 6px;
  width: 10em;
}

.pointer .local strong {
  position: absolute;
  top: 2.1em;
  color: #0099ff;
  right: 6px;
  width: 10em;
  text-align: right;
}

.bar {
  display: flex;
  flex-wrap: nowrap;
}

h2 {
  font-size: 1em;
  font-weight: bold;
  width: 100%;
  margin: 0.25em 0;
  color: #ff471a;
}

.bar>div {
  box-sizing: border-box;
  padding: 0.5em;
  font-size: 0.8em;
  position: relative;
  font-weight: bold;
}

.bar>div>span {
  display: inline-block;
  padding: 0px 0 2px 0;
  margin: 2px;
  color: #ffffff;
  font-weight: normal;
  border-bottom: 1px solid rgba(255, 255, 255, 55);
}

.bar>div>strong {
  display: block;
}

}

JavaScript

// Information on all the map metas
// Each has a name and a list of phases, with
// each phase having an offset from the previous phase
// (or start of every even hour for the first phase per meta)
// using server time (UTC)
var metas = {
  vb: {
    name: "Verdant Brink",
    phases: [{
        name: "",
        duration: 10,
        color: "#79ff4d"
      },
      {
        name: "Night Bosses",
        duration: 20,
        color: "#39e600"
      },
      {
        name: "Daytime",
        duration: 75,
        color: "#79ff4d"
      },
      {
        name: "Night",
        duration: 15,
        color: "#39e600"
      },
    ]
  },
  ab: {
    name: "Auric Basin",
    phases: [{
        name: "Pillars",
        duration: 45,
        color: "#e6b800"
      },
      {
        name: "Challenges",
        duration: 15,
        color: "#ffdb4d"
      },
      //{ name: "", duration: 5,  color: "#FFE37F" },
      {
        name: "Octovine",
        duration: 20,
        color: "#e6b800"
      },
      {
        name: "Reset",
        duration: 10,
        color: "#ffdb4d"
      },
      {
        name: "Pillars",
        duration: 30,
        color: "#e6b800"
      },
    ]
  },
  td: {
    name: "Tangled Depths",
    phases: [{
        name: "",
        duration: 25,
        color: "#e60000"
      },
      {
        name: "Prep",
        duration: 5,
        color: "#ff4d4d"
      },
      {
        name: "Chak Gerent",
        duration: 20,
        color: "#e60000"
      },
      {
        name: "Help the Outposts",
        duration: 70,
        color: "#ff4d4d"
      },
    ]
  },
  ds: {
    name: "Dragon's Stand",
    phases: [{
        name: "",
        duration: 90,
        color: "#79d2a6"
      },
      {
        name: "Start",
        duration: 30,
        color: "#39ac73"
      }
    ]
  },
  /*
  ,
  la: {
      name: "Lions Arch",
      phases: [
          { name: "Mad King", duration: 120,  color: "linear-gradient( 90deg, #DDD, #F5F5F5 )" }
      ]
 ...