meta lws4

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 = {
  di: {
    name: "Domain of Istan ",
    phases: [{
        name: "Palawadan",
        duration: 15,
        color: " #0073e6"
      },
      {
        name: "",
        duration: 90,
        color: " #4da6ff"
      },
      {
        name: "Palawadan",
        duration: 15,
        color: " #0073e6"
      },
      //            { name: "",  duration: 45, color: " #4da6ff" },
    ]
  },
  jb: {
    name: "Jahai Bluffs ",
    phases: [{
        name: "",
        duration: 60,
        color: "#70db70"
      },
      {
        name: "Escorts",
        duration: 15,
        color: " #2eb82e"
      },
      {
        name: "Death-Branded Shatterer",
        duration: 15,
        color: "#70db70"
      },
      {
        name: "",
        duration: 30,
        color: " #2eb82e"
      },
      //{ name: "Chak Gerent",  duration: 20, color: "#f99" },
      //{ name: "Help the Outposts",  duration: 70, color: "#FFD7D7" },
    ]
  },
  tp: {
    name: "Thunderhead Peaks",
    phases: [{
        name: "",
        duration: 45,
        color: "#ff66b3"
      },
      {
        name: "The Oil Floes(South)",
        duration: 15,
        color: "#e60073"
      },
      {
        name: "",
        duration: 45,
        color: "#ff66b3"
      },
      {
        name: "Thunderhead Keep(North)",
        duration: 15,
        color: "#e60073"
      },
    ]
  },
  gv: {
    name: "Grothmar Valley",
    phases: [{
        name: "",
        duration: 10,
        color: "#e60000"
      },
      {
        name: "The Burning Effigy",
        duration: 28,
        color: " #ffb3b3"
      },
      {
        name: "Doomlore Shrine",
        duration: 27,
        color: "#e60000"
      },
      {
        name: "Ooze Pit",
        duration: 34,
       ...