<section>
  <div>
    <hgroup>
      <h1>Interactive Inputs</h1>
      <h2>using HTML5  + CSS + JS</h2>
    </hgroup>
    <p>See more on <a href="https://dev.to/alvaromontoro/creating-interactive-html-inputs-2ldi" target="_blank">DEV</a> or <a href="https://twitter.com/alvaro_montoro/status/1231737709611429888" target="_blank">Twitter</a></p>
  </div>
</section>

<section id="section-time">
  <input type="time" />
</section>

<section id="section-password">
  <input type="password" placeholder="Password >8 chars" />
</section>

<section id="section-search">
  <input type="search" placeholder="Search" />
</section>

<section id="section-date">
  <input type="date" />
</section>

<section id="section-email">
  <input type="email" required />
</section>

/*** INPUT STYLES ***/
input[type="time"] {
  padding-left: 1.5em;
  padding-right: 0;
  background-repeat: no-repeat;
  background-position: 0.25em center;
  background-size: 1em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='18.5' fill='none' stroke='%23111' stroke-width='3' /><path d='M20,4 20,8 M4,20 8,20 M36,20 32,20 M20,36 20,32' stroke='%23bbb' stroke-width='1' /><g fill='%23111' stroke='%23111' stroke-width='2'><circle cx='20' cy='20' r='2' /><path d='M20,24 20,5' style='transform:rotate(120deg); transform-origin: 50% 50%;' /><path d='M20,24 20,8' style='transform:rotate(20deg); transform-origin: 50% 50%;' /></g></svg>");
}

input[type="password"] {
  padding-left: 1.5em;
  background-repeat: no-repeat;
  background-position: 0.25em center;
  background-size: 1em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='white' stroke='%23111' stroke-width='3'><path d='M10,20 C10,5 10,1.5 20,1.5 30,1.5 30,5 30,20' /><path d='M5,20 35,20 35,38.5 5,38.5Z M20,27 20,33' /><circle cx='20' cy='27' r='1' /></g></svg>");
}

input[type="search"] {
  padding-left: 1.5em;
  background-repeat: no-repeat;
  background-position: 0.25em center;
  background-size: 1em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><clipPath id='magnifier'><circle cx='15' cy='15' r='13.5' /></clipPath><path d='M36,36 20,20' stroke='%23222' stroke-width='2' /><path d='M40,40 28,28' stroke='%23222' stroke-width='5' /><circle cx='15' cy='15' r='13.5' fill='white' stroke='%23222' stroke-width='3' /><text x='0' y='20' style='font:italic 16px serif;fill:%23333' clip-path='url(%23magnifier)'></text></svg>");
}

input[type="date"] {
  padding-left: 1.5em;
  padding-right: 0;
  background-repeat: no-repeat;
  background-position: 0.25em center;
  background-size: 1em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g stroke='%23111' stroke-width='1' fill='none'><path d='M2,5 38,5 38,10 2,10Z' fill='%23aaa' /><path d='M2,5 38,5 38,10 2,10 2,15 38,15 38,20 2,20 2,25 38,25 38,30 2,30 2,35 38,35 33,35 33,5 28,5 28,35 23,35 23,5 18,5 18,35 13,35 13,5 8,5 8,35' /><path d='M01.5,4.5 1.5,35.5 38.5,35.5 38.5,4.5Z' stroke-width='3'/></g></svg>");
}

input[type="email"] {
  padding-left: 1.5em;
  background-repeat: no-repeat;
  background-position: 0.25em center;
  background-size: 1em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M38.5,12 38.5,35 1.5,35 1.5,12 20,25 38.5,12 Z' stroke='%23222' stroke-width='3' fill='white' /><path d='M1.5,11 38.5,11' stroke='%23222' stroke-width='3' /></svg>");
}

input[type="email"]:valid {
  padding-left: 1.5em;
  background-repeat: no-repeat;
  background-position: 0.25em center;
  background-size: 1em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M38.5,12 38.5,35 1.5,35 1.5,12 20,25 38.5,12 20,1.5 1.5,12' stroke='%23222' stroke-width='3' fill='white' /><path d='M1.5,12 20,25 38.5,12 20,1.5Z' stroke='%23222' stroke-width='2' fill='%23ce7' /><path d='M1.5,12 38.5,12' stroke='%23222' stroke-width='1' /></svg>");
  
  /*<path d='M1.5,7 38.5,7' stroke='%23222' stroke-width='3' /><path d='M7,20 7,1 33,1 33,20' fill='%23ce7' stroke='%23222' stroke-width='2' />*/
}


/*** DISPLAY ***/
html, body {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Helvetica, Arial, sans-serif;
}

body {
  display: flex;
  flex-wrap: wrap;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(50vh);
  scroll-snap-type: y mandatory;
}

section {
  box-sizing: border-box;
  padding: 1rem;
  display: flex;
  flex: 1;
  min-width: 100%;
  min-height: 50vh;
  opacity: 0.75;
  justify-content: center;
  align-items: center;
  text-align: center;
  scroll-snap-align: start;
}

h1 {
  color: #fff;
  margin: 0;
  font-size: 8vw;
  font-weight: 200;
}

h2 {
  color: #bbb;
  margin:0;
  font-weight: 200;
  font-size: 5.35vw;
}

p, a {
  font-size: 3vw;
}

a {
  color: white;
}

section:nth-child(1) {
  background: #123;
  color: #eeeeff;
}

section:nth-child(2) {
  background: #8dc;
}

section:nth-child(3) {
  background: #fb4;
}

section:nth-child(4) {
  background: #ff8;
}

section:nth-child(5) {
  background: #e9a;
}

section:nth-child(6) {
  background: #ce7;
}

input {
/*   font-family: helvetica, arial, sans-serif;
  font-weight: 200; */
  box-shadow: 0 0 0 0.175em rgba(0,0,0,0.4);
  box-sizing: border-box;
  padding-right: 0.5em;
  box-sizing: border-box;
  border: 0;
  border-radius: 0.1235em;
  font-size: 6vw;
  height: 2em;
}

input:focus {
  outline: 2px dashed rgba(0,0,0,0.5);
  outline-offset: 0.25em;
}

@media all and (min-width: 800px) {
  section { min-width: 50%; }
  h1 { font-size: 5vw; }
  h2 { font-size: 3.35vw; }
  p, a { font-size: 2vw; }
  input { font-size: 3vw; }
}

@media all and (min-width: 1200px) {
  section { min-width: 33%; }
  h1 { font-size: 3vw; }
  h2 { font-size: 2vw; }
  p, a { font-size: 1.5vw; }
  input { font-size: 2vw; }
}

document.querySelector("input[type='time']").addEventListener("input", function() {
  if (/^([0-1][0-9]|2[0-3]):[0-5][0-9]$/.exec(this.value)) {
    const minute = Number(this.value.substring(3,5));
    const hour = Number(this.value.substring(0,2)) % 12 + (minute / 60);
    this.style.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='18.5' fill='%239ed' stroke='%23111' stroke-width='3' /><path d='M20,4 20,8 M4,20 8,20 M36,20 32,20 M20,36 20,32' stroke='%23bbb' stroke-width='1' /><g fill='%23111' stroke='%23111' stroke-width='2'><circle cx='20' cy='20' r='2' /><path d='M20,24 20,5' style='transform:rotate(${360 * minute / 60}deg); transform-origin: 50% 50%;' /><path d='M20,24 20,8' style='transform:rotate(${360 * hour / 12}deg); transform-origin: 50% 50%;' /></g></svg>")`;
  } else {
    this.style.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='18.5' fill='none' stroke='%23111' stroke-width='3' /><path d='M20,4 20,8 M4,20 8,20 M36,20 32,20 M20,36 20,32' stroke='%23bbb' stroke-width='1' /><g fill='%23111' stroke='%23111' stroke-width='2'><circle cx='20' cy='20' r='2' /><path d='M20,24 20,5' style='transform:rotate(120deg); transform-origin: 50% 50%;' /><path d='M20,24 20,8' style='transform:rotate(20deg); transform-origin: 50% 50%;' /></g></svg>")`;
  }
});

document.querySelector("input[type='password']").addEventListener("input", function() {
  if (this.value.length >= 8) {
    this.style.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='white' stroke='%23111' stroke-width='3'><path d='M10,20 C10,5 10,1.5 20,1.5 30,1.5 30,5 30,13' /><path d='M5,20 35,20 35,38.5 5,38.5Z M20,27 20,33' fill='%23fc5' /><circle cx='20' cy='27' r='1' /></g></svg>")`;
  } else {
    this.style.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='white' stroke='%23111' stroke-width='3'><path d='M10,20 C10,5 10,1.5 20,1.5 30,1.5 30,5 30,20' /><path d='M5,20 35,20 35,38.5 5,38.5Z M20,27 20,33' /><circle cx='20' cy='27' r='1' /></g></svg>")`;
  }
});

document.querySelector("input[type='search']").addEventListener("input", function() {
  this.style.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><clipPath id='magnifier'><circle cx='15' cy='15' r='13.5' /></clipPath><path d='M36,36 20,20' stroke='%23222' stroke-width='2' /><path d='M40,40 28,28' stroke='%23222' stroke-width='5' /><circle cx='15' cy='15' r='13.5' fill='%23${this.value.length ? 'ffa' : 'fff'}' stroke='%23222' stroke-width='3' /><text x='0' y='20' style='font:italic 20px serif;fill:%23333' clip-path='url(%23magnifier)'>${this.value}</text></svg>")`;
});

document.querySelector("input[type='date']").addEventListener("input", function() {
  if (/^[0-9]{4}\-[0-9]{2}\-[0-9]{2}$/.exec(this.value)) {
    const day = parseInt(this.value.substring(8,12));
    const top = Math.floor((day - 1) / 7) * 5 + 10;
    const left = ((day - 1) % 7) * 5 + 3;
    this.style.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g stroke='%23111' stroke-width='1' fill='none'><path d='M2,5 38,5 38,10 2,10Z' fill='%23e9a' /><path d='M2,5 38,5 38,10 2,10 2,15 38,15 38,20 2,20 2,25 38,25 38,30 2,30 2,35 38,35 33,35 33,5 28,5 28,35 23,35 23,5 18,5 18,35 13,35 13,5 8,5 8,35' /><path d='M01.5,4.5 1.5,35.5 38.5,35.5 38.5,4.5Z' stroke-width='3'/><path d='M${left},${top} ${left+5},${top} ${left+5},${top+5} ${left},${top+5}Z' fill='%23d00' /></g></svg>")`;
  } else {
    this.style.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g stroke='%23111' stroke-width='1' fill='none'><path d='M2,5 38,5 38,10 2,10Z' fill='%23aaa' /><path d='M2,5 38,5 38,10 2,10 2,15 38,15 38,20 2,20 2,25 38,25 38,30 2,30 2,35 38,35 33,35 33,5 28,5 28,35 23,35 23,5 18,5 18,35 13,35 13,5 8,5 8,35' /><path d='M01.5,4.5 1.5,35.5 38.5,35.5 38.5,4.5Z' stroke-width='3'/></g></svg>")`;
  }
})