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
+
+
+
+
+
+
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;
+ }
+}