<template>
  <div class="berlinclock">
  <h1>Berlin-Clock</h1>
  <div class="content">
    <div id="background">
      <img id="second" alt="" src="/static/clockimages/second.png" />
      <img id="hour05" alt="" src="/static/clockimages/hour-left.png" />
      <img id="hour10" alt="" src="/static/clockimages/hour-middle.png" />
      <img id="hour15" alt="" src="/static/clockimages/hour-middle.png" />
      <img id="hour20" alt="" src="/static/clockimages/hour-right.png" />
      <img id="hour01" alt="" src="/static/clockimages/hour-left.png" />
      <img id="hour02" alt="" src="/static/clockimages/hour-left.png" />
      <img id="hour03" alt="" src="/static/clockimages/hour-left.png" />
      <img id="hour04" alt="" src="/static/clockimages/hour-left.png" />
      <img id="minute05" alt="" src="/static/clockimages/minute-small-left.png" />
      <img id="minute10" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute15" alt="" src="/static/clockimages/minute-small-red.png" />
      <img id="minute20" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute25" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute30" alt="" src="/static/clockimages/minute-small-red.png" />
      <img id="minute35" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute40" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute45" alt="" src="/static/clockimages/minute-small-red.png" />
      <img id="minute50" alt="" src="/static/clockimages/minute-small-yellow.png" />
      <img id="minute55" alt="" src="/static/clockimages/minute-small-right.png" />
      <img id="minute01" alt="" src="/static/clockimages/minute-left.png" />
      <img id="minute02" alt="" src="/static/clockimages/minute-middle.png" />
      <img id="minute03" alt="" src="/static/clockimages/minute-middle.png" />
      <img id="minute04" alt="" src="/static/clockimages/minute-right.png" />
    </div>
  </div>
  <p><b>Autor:</b></p>
  <p>Rüdiger Appel</p>
  <p><b>Quelle:</b></p>
  <p>http://www.3quarks.com/de/Mengenlehreuhr/index.html</p>
</template>

<script>
export default {
  name: 'berlinclock'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#background {
  width: 190px;
  height: 265px;
  margin: auto;
  position: relative;
  background: transparent url(/static/clockimages/background.png)
  no-repeat top right;
 }
 #second{
  position: absolute;
  left: 70px;
  top: 10px;
  width: 50px;
  height: 50px;
  visibility:hidden;
}
#hour05{
  position: absolute;
  left: 10px; top: 78px;
  width: 38px; height: 27px;
  visibility:hidden;
}
#hour10{
  position: absolute;
  left: 54px;
  top: 78px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour15{
  position: absolute;
  left: 98px;
  top: 78px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour20{
  position: absolute;
  left: 142px;
  top: 78px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour01{
  position: absolute;
  left: 10px;
  top: 127px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour02{
  position: absolute;
  left: 54px;
  top: 127px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#hour03{ 
  position: absolute;
  left: 98px;
  top: 127px;
  width: 38px;
  height: 27px;
 visibility:hidden;
}
#hour04{
  position: absolute;
  left: 142px;
  top: 127px;
  width: 38px;
  height: 27px;
 visibility:hidden;
}
#minute05{
  position: absolute;
  left: 10px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute10{
  position: absolute;
  left: 26px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute15{
  position: absolute;
  left: 42px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute20{
  position: absolute;
  left: 58px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute25{
  position: absolute;
  left: 74px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute30{
  position: absolute;
  left: 90px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute35{
  position: absolute;
  left: 106px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute40{
  position: absolute;
  left: 122px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute45{
  position: absolute;
  left: 138px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute50{
  position: absolute;
  left: 154px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute55{
  position: absolute;
  left: 170px;
  top: 176px;
  width: 10px;
  height: 27px;
  visibility:hidden;
}
#minute01{
  position: absolute;
  left: 10px;
  top: 225px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#minute02{
  position: absolute;
  left: 54px;
  top: 225px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#minute03{
  position: absolute;
  left: 98px;
  top: 225px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
#minute04{
  position: absolute;
  left: 142px;
  top: 225px;
  width: 38px;
  height: 27px;
  visibility:hidden;
}
</style>