KmRRNJ

index.html

<div class="wrapper">
  <h1>Lillus <span class="beating">&hearts;</span> Tibcsi</h1>
  <hr />
  <div class="item" id="from"><b>2013. 12. 12. 21:45</b><br>ota vagyunk <b>Egyutt</b>, ami</div>
  <div class="item" id="since"></div>
  <div class="item" id="stats"></div>
</div>
  

kmrrnj.markdown

KmRRNJ

A Pen by Tibor Simon on CodePen.

License.

script.babel

const sinceDiv = document.getElementById("since")
const statsDiv = document.getElementById("stats")

const nowItem = document.getElementById("now")

const start = moment('2013.12.12. 21:45:00')

const formatNumber = function(n) {
  let s = n.toString().match(/(\d+?)(?=(\d{3})+(?!\d)|$)/g)
  let ret = ''
  s.forEach(function(str){
    ret += `<span class="group">${str}</span>`
  })
  return highlight(ret+'.')
}

const highlight = function(p) {
  return `<span class="highlight">${p}</span>`
}
const updateTime = function() {
  const diff = moment.duration(moment().diff(start))
  
  const year = highlight(diff.get('years'))
  const month = highlight(diff.get('months'))
  const day = highlight(diff.get('days'))
  const hour = highlight(diff.get('hours'))
  const minute = highlight(diff.get('minutes'))
  const second = highlight(diff.get('seconds'))
  
  const years = formatNumber(Math.floor(diff.asYears()))
  const months = formatNumber(Math.floor(diff.asMonths()))
  const days = formatNumber(Math.floor(diff.asDays()))
  const hours = formatNumber(Math.floor(diff.asHours()))
  const minutes = formatNumber(Math.floor(diff.asMinutes()))
  const seconds = formatNumber(Math.floor(diff.asSeconds()))
  
  sinceDiv.innerHTML =
    `${year} ev ` +
    `${month} honap ` +
    `${day} nap<br>` +
    `${hour} ora ` +
    `${minute} perc es ` +
    `${second} masodperc.`
  
  stats.innerHTML = 
    `Ez az <b>Egyutt</b> toltott` +
    `${years} evunk,<br>` + 
    `${months} honapunk,` + 
    `${days} napunk,<br>` +
    `${hours} orank,` +
    `${minutes} percunk,<br>` +
    `${seconds} masodpercunk.`
}

setInterval(updateTime, 1000)
updateTime()

scripts

<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment-with-locales.min.js"></script>

style.css

html {
  height: 100%;
  background: radial-gradient(circle at center 120px, #7C4D4D, #4F3031 400px);
  background-color: ;
  color: #BC8787;
  text-shadow: 0px 1px 3px black;
}
.wrapper {
  width: 500px;
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 120%;
}
h1 {
  margin: 0;
}
hr {
  margin: 4px 0 20px;
  width: 100%;
  border: none;
  border-top: 2px solid #BC8787;
  box-shadow: 0px 1px 3px black;
}
.item {
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
  margin-bottom: 12px;
}
.highlight {
  font-weight: 600;
  font-size: 120%;
  margin-right: -1px;
  margin-left: 4px;
}
.group {
  margin-left: 5px;
}

#stats {
  font-size: 80%;
  margin-top: 12px;
}

td:first-child {
  text-align: right;
}
td {
  text-align: left;
  padding: 0 2px;
  vertical-align: bottom;
}

@keyframes heartbeat {
  0%   {transform: scale( .75 );}
  15%  {transform: scale( 1 );}
  30%  {transform: scale( .75 );}
  45%  {transform: scale( 1 );}
  70%  {transform: scale( .75 );}
  100% {transform: scale( .75 );}
}

.beating {
  position: relative;
  top: 8px;
  display: inline-block;
  font-size: 150%;
  animation: heartbeat 1s infinite;
}