<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Tamir Khason - Home</title>
<style>
  html {
    height: 100%
  }
  @import url('https://fonts.googleapis.com/css?family=Roboto');
  #root { height: 100%; width: 100%; }
  body {     
    background-repeat:no-repeat;
    background-size:cover;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    overflow: hidden;
}
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.clock {
  height: 20vh;
  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;
  color: white;
  font-size: 22vh;
  font-family: 'Roboto', sans-serif;
  line-height: 20.4vh;
  display: flex;
  position: relative;
  overflow: hidden;
  justify-content: flex-end;
}


.clock > div {
  display: flex;
}

.tick {
  line-height: 17vh;
}

.tick-hidden {
  opacity: 0;
}

.move {
  animation: move linear 1s infinite;
}

@keyframes move {
  from {
    transform: translateY(0vh);
  }
  to {
    transform: translateY(-20vh);
  }
}

@font-face {
    font-family: 'weather';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

i {
  color: #fff;
  font-family: weather;
  font-size: 150px;
  font-weight: normal;
  font-style: normal;
  line-height: 1.0;
}

.weather {
  font-family: 'Roboto', sans-serif;
  width: 100%;
  margin: 0 auto;
  text-align: left;
  margin-top: 80px;
  position: fixed;
  bottom: 0;
}
.weather h2 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 17vh;
  font-weight: 300;
  text-align: left;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
}
    
.weather span {
  font-weight: 100;
  display: block;
  letter-spacing: .4em;
  font-size: 16px;
}

.weather ul {
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
  margin: 0;
  padding: 0;
}

.weather li {
  color: #fff;
  font-size: 2vh;
  padding: 20px;
  display: inline-block;
  border-radius: 5px;
}

.weather .currently {
  margin: 0 20px;
}


</style>
</head>
<body>
<div id="root"><div class="clock">
  <div class="hours">
    <div class="first">
      <div class="number">0</div>
    </div>
    <div class="second">
      <div class="number">0</div>
    </div>
  </div>
  <div class="tick">:</div>
  <div class="minutes">
    <div class="first">
      <div class="number">0</div>
    </div>
    <div class="second">
      <div class="number">0</div>
    </div>
  </div>
</div><div class="weather">
  <h2><i class="temperature-icon"></i><div class="temperature">15&deg;C</div></h2>
  <ul><li class="location">Magicville, Nowhereland</li>
  <li class="currently">Brizzy</li></ul>
</div></div>
<script>
var hoursContainer = document.querySelector('.hours')
var minutesContainer = document.querySelector('.minutes')
var tickElements = Array.from(document.querySelectorAll('.tick'))

var last = new Date(0)
last.setUTCHours(-1)

var tickState = true

function updateTime () {
  var now = new Date
  
  var lastHours = last.getHours().toString()
  var nowHours = now.getHours().toString()
  if (lastHours !== nowHours) {
    updateContainer(hoursContainer, nowHours)
  }
  
  var lastMinutes = last.getMinutes().toString()
  var nowMinutes = now.getMinutes().toString()
  if (lastMinutes !== nowMinutes) {
    updateContainer(minutesContainer, nowMinutes)
  }  
  
  last = now
}

function tick () {
  tickElements.forEach(t => t.classList.toggle('tick-hidden'))
}

function updateContainer (container, newTime) {
  var time = newTime.split('')
  
  if (time.length === 1) {
    time.unshift('0')
  }
  
  
  var first = container.firstElementChild
  if (first.lastElementChild.textContent !== time[0]) {
    updateNumber(first, time[0])
  }
  
  var last = container.lastElementChild
  if (last.lastElementChild.textContent !== time[1]) {
    updateNumber(last, time[1])
  }
}

function updateNumber (element, number) {
  //element.lastElementChild.textContent = number
  var second = element.lastElementChild.cloneNode(true)
  second.textContent = number
  
  element.appendChild(second)
  element.classList.add('move')

  setTimeout(function () {
    element.classList.remove('move')
  }, 990)
  setTimeout(function () {
    element.removeChild(element.firstElementChild)
  }, 990)
}

setInterval(updateTime, 100)

function getCurrentLocation(options) {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, ({code, message}) =>
      reject(Object.assign(new Error(message), {name: "PositionError", code})),
      options);
    });
};

async function getWeather(){
    let long, lat, place;    
    try {
        if(navigator.geolocation){
            let position = await this.getCurrentLocation();
            long = position.coords.longitude;
            lat = position.coords.latitude;
            let info = await (await fetch(`/place/${long},${lat}`)).json();
            place = info.features[0].place_name;
        } else { throw 'PositionError'; }
    } catch {        
        let info = await (await fetch('/location')).json();
        long = info.longitude;
        lat = info.latitude;
        place = info.city + ', ' + info.country_name;
    }
    let lang = (navigator.languages && navigator.languages[0] || navigator.language || navigator.userLanguage).split("-")[0];
    let weather = await (await fetch(`/weather?lat=${lat}&lon=${long}&lang=${lang}`)).json();
    return {
        place: place,
        units: weather.sys.country == 'US'?"F":"C",
        temperature: weather.sys.country == 'US'?(weather.main.feels_like * 1.8 + 32):weather.main.feels_like,
        summary: weather.weather[0].main,
        currently: weather.weather[0].description,
        icon: encodeURI(weather.weather[0].description),
        _raw: weather
    };
}
function updateWeather() {
 getWeather().then(r=>{
 console.log(r);
    let temperature = document.querySelector('.temperature');
    temperature.textContent = r.temperature.toFixed(0)+'°'+r.units;
    let location = document.querySelector('.location');
    location.textContent = r.place; 
    let currently = document.querySelector('.currently');
    currently.textContent = r.summary; 

    fetch('/bg?query='+r.icon).then(rs=>rs.json().then(b=>{
	let body = document.querySelector("body");
    let bg = b.urls.full + '&h='+ body.clientHeight;
    body.style.background =`url(${bg}) no-repeat center center`;
    body.style.backgroundSize = 'cover';
    body.style.justifyContent = 'flex-end';
	body.style.display = 'flex';
	body.style.height = '100%';
	body.style.overflow = 'hidden';
 }));
 });
}

updateWeather();
window.addEventListener('click', function (evt) {
    if (evt.detail === 3) {
	updateWeather();
    }
});
</script>
</body>
</html>

