diff --git a/verify-account-ui/index.html b/verify-account-ui/index.html new file mode 100644 index 0000000..a8a1c06 --- /dev/null +++ b/verify-account-ui/index.html @@ -0,0 +1,27 @@ + + + + + + + Verify Account + + +
+

Verify Your Account

+

We emailed you the six digit code to cool_guy@email.com
Enter the code below to confirm your email address.

+
+ + + + + + +
+ + This is design only. We didn't actually send you an email as we don't have your email, right? + +
+ + + diff --git a/verify-account-ui/script.js b/verify-account-ui/script.js new file mode 100644 index 0000000..6df6bf0 --- /dev/null +++ b/verify-account-ui/script.js @@ -0,0 +1,14 @@ +const codes = document.querySelectorAll('.code') + +codes[0].focus() + +codes.forEach((code, idx) => { + code.addEventListener('keydown', (e) => { + if(e.key >= 0 && e.key <=9) { + codes[idx].value = '' + setTimeout(() => codes[idx + 1].focus(), 10) + } else if(e.key === 'Backspace') { + setTimeout(() => codes[idx - 1].focus(), 10) + } + }) +}) \ No newline at end of file diff --git a/verify-account-ui/style.css b/verify-account-ui/style.css new file mode 100644 index 0000000..7fb05dc --- /dev/null +++ b/verify-account-ui/style.css @@ -0,0 +1,77 @@ +@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #fbfcfe; + font-family: 'Muli', sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.container { + background-color: #fff; + border: 3px #000 solid; + border-radius: 10px; + padding: 30px; + max-width: 1000px; + text-align: center; +} + +.code-container { + display: flex; + align-items: center; + justify-content: center; + margin: 40px 0; +} + +.code { + border-radius: 5px; + font-size: 75px; + height: 120px; + width: 100px; + border: 1px solid #eee; + margin: 1%; + text-align: center; + font-weight: 300; + -moz-appearance: textfield; +} + +.code::-webkit-outer-spin-button, +.code::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.code:valid { + border-color: #3498db; + box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25); +} + +.info { + background-color: #eaeaea; + display: inline-block; + padding: 10px; + line-height: 20px; + max-width: 400px; + color: #777; + border-radius: 5px; +} + +@media (max-width: 600px) { + .code-container { + flex-wrap: wrap; + } + + .code { + font-size: 60px; + height: 80px; + max-width: 70px; + } +}