diff --git a/fonts/PTSans-Regular.woff b/fonts/PTSans-Regular.woff new file mode 100644 index 000000000..4ecca571b Binary files /dev/null and b/fonts/PTSans-Regular.woff differ diff --git a/fonts/PTSans-Regular.woff2 b/fonts/PTSans-Regular.woff2 new file mode 100644 index 000000000..952d84c87 Binary files /dev/null and b/fonts/PTSans-Regular.woff2 differ diff --git a/fonts/WorkSans-Light.woff b/fonts/WorkSans-Light.woff new file mode 100644 index 000000000..05ad35f79 Binary files /dev/null and b/fonts/WorkSans-Light.woff differ diff --git a/fonts/WorkSans-Light.woff2 b/fonts/WorkSans-Light.woff2 new file mode 100644 index 000000000..618a29ef3 Binary files /dev/null and b/fonts/WorkSans-Light.woff2 differ diff --git a/fonts/WorkSans-Medium.woff b/fonts/WorkSans-Medium.woff new file mode 100644 index 000000000..22af20f72 Binary files /dev/null and b/fonts/WorkSans-Medium.woff differ diff --git a/fonts/WorkSans-Medium.woff2 b/fonts/WorkSans-Medium.woff2 new file mode 100644 index 000000000..c0a2e693a Binary files /dev/null and b/fonts/WorkSans-Medium.woff2 differ diff --git a/fonts/WorkSans-Regular.woff b/fonts/WorkSans-Regular.woff new file mode 100644 index 000000000..6440e9736 Binary files /dev/null and b/fonts/WorkSans-Regular.woff differ diff --git a/fonts/WorkSans-Regular.woff2 b/fonts/WorkSans-Regular.woff2 new file mode 100644 index 000000000..63a5b4bfd Binary files /dev/null and b/fonts/WorkSans-Regular.woff2 differ diff --git a/images/checkmark.svg b/images/checkmark.svg new file mode 100644 index 000000000..78fcccd13 --- /dev/null +++ b/images/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/user-icon.svg b/images/user-icon.svg new file mode 100644 index 000000000..593ec5133 --- /dev/null +++ b/images/user-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 000000000..e41ef07b1 --- /dev/null +++ b/index.html @@ -0,0 +1,128 @@ + + + + + + + + + + + + Sign up + + + +
+
+
+
Sign up
+
+
+
+
+
Thank you!
+
you registered!
+
+
+
+

New user?

+

Use the form below to create your account.

+
+
+
+
+ + +

+
+
+ + +

+
+
+
+
+ +
+
American
+
+
+ +
+
+
+ +
+
21
+
+ December
+
1995 +
+
+
+
+ +
+ + +
+
+
+
+
+ + +

+
+
+ + +

+
+
+
+
American
+
Belarus
+
Czech
+
English
+
German
+
Italian
+
+ + + +
+
+
+ + +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/scripts/animations.js b/scripts/animations.js new file mode 100644 index 000000000..4121e817b --- /dev/null +++ b/scripts/animations.js @@ -0,0 +1,12 @@ +//emersion animation +const emersion = () => { + const fields = document.querySelectorAll('.col') + for (let i = 0; i < fields.length; i++) { + setTimeout(() => { + fields[i].classList.add('emersion') + fields[i].style.opacity = 1 + }, 350 * i) + } +} + +window.addEventListener('load', emersion) \ No newline at end of file diff --git a/scripts/assets.js b/scripts/assets.js new file mode 100644 index 000000000..612c621d7 --- /dev/null +++ b/scripts/assets.js @@ -0,0 +1,9 @@ +//submit form by hitting Enter +const handleEnterClick = () => { + const btn = document.querySelector('.submit-btn') + btn.addEventListener('keydown', (e) => { + if (e.keyCode === '13') { + btn.click() + } + }) +} \ No newline at end of file diff --git a/scripts/handlers.js b/scripts/handlers.js new file mode 100644 index 000000000..c3df19aea --- /dev/null +++ b/scripts/handlers.js @@ -0,0 +1,292 @@ +//onBlur effect for all of fields +const showOverlay = function () { + const overlay = document.querySelector('.overlay') + overlay.style.visibility = 'visible' +} + +const hideOverlay = function () { + const overlay = document.querySelector('.overlay') + overlay.style.visibility = 'hidden' +} + +const closeAllFields = function () { + const selectPicker = document.querySelector('#select-picker') + const dayPicker = document.querySelector('#day-picker') + const monthPicker = document.querySelector('#month-picker') + const yearPicker = document.querySelector('#year-picker') + const successOverlay = document.querySelector('.succes-overlay') + + selectPicker.style.visibility = 'hidden' + dayPicker.style.visibility = 'hidden' + monthPicker.style.visibility = 'hidden' + yearPicker.style.visibility = 'hidden' + successOverlay ? successOverlay.style.display = 'none' : null + + hideOverlay() +} + +//select handler +const setSelect = function (e) { + const currentSelect = document.querySelector('.select-current') + const selectPicker = document.querySelector('#select-picker') + currentSelect.innerHTML = e.target.innerHTML + currentSelect.setAttribute('value', e.target.innerHTML) + selectPicker.style.visibility = 'hidden' +} + +const toggleSelect = function () { + closeAllFields() + + const selectCurrent = document.querySelector('.select-current') + const selectPicker = document.querySelector('#select-picker') + const rect = selectCurrent.getBoundingClientRect() + + selectPicker.style.top = `${rect.bottom + 7}px` + selectPicker.style.left = `${rect.left}px` + selectPicker.style.width = `${rect.width}px` + + selectPicker.style.visibility === 'visible' + ? selectPicker.style.visibility = 'hidden' + : selectPicker.style.visibility = 'visible' + + const selectItems = document.querySelectorAll('.select-item') + for (let i = 0; i < selectItems.length; i++) { + selectItems[i].onclick = setSelect + } + + showOverlay() +} + +//birth date handlers +const setDay = function (e) { + const currentDay = document.querySelector('.current-day') + const dayPicker = document.querySelector('#day-picker') + currentDay.innerHTML = e.currentTarget.value + currentDay.setAttribute('value', e.target.innerHTML) + dayPicker.style.visibility = 'hidden' +} + +const setMonth = function (e) { + const currentMonth = document.querySelector('.current-month') + const monthPicker = document.querySelector('#month-picker') + currentMonth.innerHTML = e.target.innerHTML + currentMonth.setAttribute('value', e.target.innerHTML) + monthPicker.style.visibility = 'hidden' +} + +const setYear = function (e) { + const currentYear = document.querySelector('.current-year') + const yearPicker = document.querySelector('#year-picker') + currentYear.innerHTML = e.currentTarget.value + currentYear.setAttribute('value', e.currentTarget.value) + console.log(currentYear.getAttribute('value')) + yearPicker.style.visibility = 'hidden' +} + +const toggleDay = function () { + closeAllFields() + + const dayPicker = document.querySelector('#day-picker') + const monthPicker = document.querySelector('#month-picker') + const yearPicker = document.querySelector('#year-picker') + + dayPicker.childNodes ? dayPicker.replaceChildren() : null + monthPicker.replaceChildren() + yearPicker.replaceChildren() + + for (let i = 1; i <= 31; i++) { + const li = document.createElement('li') + li.setAttribute('value', i) + li.setAttribute('class', 'day-item') + li.onclick = setDay + li.innerHTML = i + dayPicker.appendChild(li) + } + + //picker position + const currentDay = document.querySelector('.current-day') + const rect = currentDay.getBoundingClientRect() + dayPicker.style.top = `${rect.bottom + 7}px` + dayPicker.style.left = `${rect.left}px` + dayPicker.style.width = `${rect.width}px` + + dayPicker.style.visibility === 'hidden' + ? dayPicker.style.visibility = 'visible' + : dayPicker.style.visibility = 'hidden' + + showOverlay() +} + +const toggleMonth = function () { + closeAllFields() + + const dayPicker = document.querySelector('#day-picker') + const monthPicker = document.querySelector('#month-picker') + const yearPicker = document.querySelector('#year-picker') + + dayPicker.replaceChildren() + monthPicker.childNodes ? monthPicker.replaceChildren() : null + yearPicker.replaceChildren() + + const months = [ + 'January', 'February', 'March', 'April', 'May', 'June', 'July', + 'August', 'September', 'October', 'November', 'December' + ] + + for (let i = 0; i < 12; i++) { + const li = document.createElement('li') + li.setAttribute('value', months[i]) + li.setAttribute('class', 'month-item') + li.onclick = setMonth + li.innerHTML = months[i] + monthPicker.appendChild(li) + } + + const currentMonth = document.querySelector('.current-month') + const rect = currentMonth.getBoundingClientRect() + + monthPicker.style.top = `${rect.bottom + 7}px` + monthPicker.style.left = `${rect.left}px` + monthPicker.style.width = `${rect.width}px` + + + monthPicker.style.visibility === 'hidden' + ? monthPicker.style.visibility = 'visible' + : monthPicker.style.visibility = 'hidden' + + showOverlay() +} + +const toggleYear = function () { + closeAllFields() + + const dayPicker = document.querySelector('#day-picker') + const monthPicker = document.querySelector('#month-picker') + const yearPicker = document.querySelector('#year-picker') + + dayPicker.replaceChildren() + monthPicker.replaceChildren() + yearPicker.childNodes ? yearPicker.replaceChildren() : null + + const date = new Date() + const year = date.getFullYear() + + for (let i = year - 14; i >= 1900; i--) { + const li = document.createElement('li') + li.setAttribute('value', i) + li.setAttribute('class', 'year-item') + li.onclick = setYear + li.innerHTML = i + yearPicker.appendChild(li) + } + + const currentYear = document.querySelector('.current-year') + const rect = currentYear.getBoundingClientRect() + + yearPicker.style.top = `${rect.bottom + 7}px` + yearPicker.style.left = `${rect.left}px` + yearPicker.style.width = `${rect.width}px` + + yearPicker.style.visibility === 'hidden' + ? yearPicker.style.visibility = 'visible' + : yearPicker.style.visibility = 'hidden' + + showOverlay() +} + +//radio buttons handler +const setRadioChecked = (id) => { + const radio = document.querySelector(`#${id}`) + radio.setAttribute('checked', '') + + const radioArr = + Array.from(document.querySelectorAll('input[type=radio].gender-radio')) + const otherRadios = radioArr.filter((radio) => radio.id !== id) + + for (let radio of otherRadios) { + radio.hasAttribute('checked') && radio.removeAttribute('checked') + break + } +} + + +//form handler - get request +const formHandler = async () => { + const data = new FormData(document.querySelector('#form')) + const nationality = document.querySelector('.select-current') + const day = document.querySelector('.current-day') + const month = document.querySelector('.current-month') + const year = document.querySelector('.current-year') + + data.append('nationality', nationality.getAttribute('value')) + data.append('birthday', `${dayNormalize(day.getAttribute('value'))}.${monthNormalize(month.getAttribute('value'))}.${year.getAttribute('value')}`) + + if (data.get('first-name') && data.get('last-name') && data.get('email') + && data.get('gender') && ((data.get('password') === data.get('confirm')) && + data.get('password') !== '')) { + + try { + const response = await fetch('/server-ok.json') + const result = await response.json().then((res) => res.message) + + //result log + console.log(result) + for (let pair of data.entries()) { + console.log(`${pair[0]}: ${pair[1]}`) + } + + //clear all fields + document.querySelector('#form').reset() + document.querySelector('.select-current').setAttribute('value', 'American') + document.querySelector('.email-checkmark').setAttribute('style', 'display: none') + document.querySelector('input[name=gender]:checked').removeAttribute('checked') + + const day = document.querySelector('#current-day') + const month = document.querySelector('#current-month') + const year = document.querySelector('#current-year') + + day.setAttribute('value', '21') + day.innerHTML = '21' + month.setAttribute('value', 'December') + month.innerHTML = 'December' + year.setAttribute('value', '1995') + year.innerHTML = '1995' + + const btn = document.querySelector('.submit-btn') + const form = document.querySelector('.form') + const overlay = document.querySelector('.success-overlay') + + btn.setAttribute('disabled', 'disabled') + btn.setAttribute('value', 'Loading...') + + //overlay position + const rect = form.getBoundingClientRect() + overlay.style.top = `${rect.top}px` + overlay.style.left = `${rect.left}px` + overlay.style.width = `${rect.width}px` + overlay.style.height = `${rect.height}px` + + //server delay simulation + setTimeout(() => { + overlay.style.display = 'flex' + btn.style.display = 'none' + }, 1500) + + //hide overlay and reload button + setTimeout(() => { + overlay.style.display = 'none' + btn.style.display = 'block' + btn.removeAttribute('disabled') + btn.setAttribute('value', 'Complete Signup') + }, 5000) + + } catch (error) { + console.log(error) + } + + } else { + const btn = document.querySelector('.submit-btn') + btn.classList.add('shake') + setTimeout(() => btn.classList.remove('shake'), 400) + } +} \ No newline at end of file diff --git a/scripts/validation.js b/scripts/validation.js new file mode 100644 index 000000000..08e477bf9 --- /dev/null +++ b/scripts/validation.js @@ -0,0 +1,179 @@ +//fields validation +const validate = function (fieldId) { + let value, p + + switch (fieldId) { + + case 'first-name': + nameCheck(fieldId) + break + + case 'last-name': + nameCheck(fieldId) + break + + case 'email': + const email = document.querySelector('#email') + value = email.value + p = document.querySelector('.error-message-email') + + if (value.length > 0) { + emailCheck(email, value, p) + } else { + setError(email, p, 'field is required') + } + + break + + case 'password': + const password = document.querySelector('#password') + value = password.value + p = document.querySelector('.error-message-password') + + if (value.length > 0) { + passwordCheck(password, value, p) + } else { + setError(password, p, 'field is required') + } + + break + + case 'confirm': + const confirm = document.querySelector('#confirm') + const passwordValue = document.querySelector('#password').value + const confirmValue = confirm.value + p = document.querySelector('.error-message-confirm') + + if (confirmValue.length > 0) { + confirmCheck(confirm, passwordValue, confirmValue, p) + } else { + setError(confirm, p, 'field is required') + } + + break + } +} + +//-----------------------------------------------------------------// + +//utils: add new error +const setError = (field, p, text) => { + field.classList.add('error') + p.classList.add('error') + p.innerHTML = text +} + +//utils: remove error +const removeError = (field, p) => { + if (field.classList) { + field.classList.contains('error') && field.classList.remove('error') + p.classList.contains('error') && p.classList.remove('error') + p.innerHTML = '' + } +} + +//utils: normalize name fields +const nameNormalize = (str) => + str.charAt(0).toUpperCase() + str.slice(1).toLowerCase() + +//utils: normalize day +const dayNormalize = (str) => + +str > 9 ? str : `0${str}` + +//utils: normalize month +const monthNormalize = (str) => { + const months = [ + 'January', 'February', 'March', 'April', 'May', 'June', 'July', + 'August', 'September', 'October', 'November', 'December' + ] + + for (let i = 0; i < months.length; i++) { + if (months[i] === str) { + if (i > 8) { + return i + 1 + } else { + return `0${i + 1}` + } + } + } +} + +//utils: check for numbers +const checkForNumbers = (field, value, p) => { + const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'] + + for (let i = 0; i < numbers.length; i++) { + if (value.includes(numbers[i])) { + setError(field, p, 'only letters accepted') + break + } else { + removeError(field, p) + } + } +} + +//utils: name check +const nameCheck = (field) => { + const name = document.querySelector(`#${field}`) + value = name.value + p = document.querySelector(`.error-message-${field}`) + + name.onfocus = () => removeError(name, p) + + if (value.length > 0) { + name.value = nameNormalize(value) + checkForNumbers(name, value, p) + } else { + setError(name, p, 'field is required') + } +} + +//utils: email check +const emailCheck = (field, value, p) => { + //simple check just to introduce functionality + const reg = /@/ + const checkmark = document.querySelector('.email-checkmark') + + field.onfocus = () => removeError(field, p) + + if (!reg.test(value)) { + setError(field, p, 'invalid email') + } else { + removeError(field, p) + } + + field.classList.contains('error') + ? checkmark.style.display = 'none' + : checkmark.style.display = 'block' +} + +//utils: password check +const passwordCheck = (field, value, p) => { + const upperCase = /[A-Z]/ + const lowerCase = /[a-z]/ + const numbers = /[0-9]/ + + field.onfocus = () => removeError(field, p) + + if (value.length < 8) { + setError(field, p, 'your password must be at least 8 characters') + } else if (!upperCase.test(value)) { + setError(field, p, 'your password should contain uppercase letter') + } else if (!lowerCase.test(value)) { + setError(field, p, 'your password should contain lowercase letter') + } else if (!numbers.test(value)) { + setError(field, p, 'your password should contain number') + } else { + removeError(field, p) + } +} +//utils: confirm check +const confirmCheck = (field, passwordValue, confirmValue, p) => { + field.onfocus = () => removeError(field, p) + + if (passwordValue !== confirmValue) { + setError(field, p, 'passwords mismatch') + } else { + removeError(field, p) + } +} \ No newline at end of file diff --git a/server-ok.json b/server-ok.json new file mode 100644 index 000000000..ea55227e7 --- /dev/null +++ b/server-ok.json @@ -0,0 +1,3 @@ +{ + "message": "данные успешно отправлены" +} \ No newline at end of file diff --git a/styles/fonts.css b/styles/fonts.css new file mode 100644 index 000000000..88be220b2 --- /dev/null +++ b/styles/fonts.css @@ -0,0 +1,35 @@ +@font-face { + font-family: 'PT Sans'; + src: url('../fonts/PTSans-Regular.woff2') format('woff2'), + url('../fonts/PTSans-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Work Sans'; + src: url('../fonts/WorkSans-Light.woff2') format('woff2'), + url('../fonts/WorkSans-Light.woff') format('woff'); + font-weight: light; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Work Sans'; + src: url('../fonts/WorkSans-Regular.woff2') format('woff2'), + url('../fonts/WorkSans-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Work Sans'; + src: url('../fonts/WorkSans-Medium.woff2') format('woff2'), + url('../fonts/WorkSans-Medium.woff') format('woff'); + font-weight: medium; + font-style: normal; + font-display: swap; +} \ No newline at end of file diff --git a/styles/responsive.css b/styles/responsive.css new file mode 100644 index 000000000..1c42ea475 --- /dev/null +++ b/styles/responsive.css @@ -0,0 +1,88 @@ +@media only screen and (min-width: 1440px) { + .container { + width: 50%; + height: 50%; + } +} + +@media only screen and (max-width: 600px) { + body { + justify-content: flex-start; + } + + .container { + flex-direction: column; + align-items: stretch; + width: 100%; + height: 100vh; + } + + .title { + flex-direction: row; + align-items: center; + width: 100vw; + height: 100px; + } + + .title>div { + top: 0; + left: 20px; + transform: rotate(0); + } + + .date-picker, + .gender-group { + margin-top: 10px; + } + + .current-month { + margin-left: 5px; + margin-right: 5px; + } +} + +@media only screen and (max-width: 480px) { + .title { + min-height: 70px; + } + + .title>div { + font-size: calc(var(--title-text-size) * 0.7); + } + + .form-container { + padding-top: 22px; + padding-bottom: 48px; + } + + .row { + flex-direction: column; + } + + .col:nth-child(2) { + margin-top: 16px; + margin-left: 0; + } + + .gender-group { + margin-top: 10px; + } + + .select-current { + margin-top: 10px; + margin-left: 0; + } + + .date-picker { + justify-content: flex-start; + } + + .current-month { + margin-left: 10px; + margin-right: 10px; + } + + .buttons { + margin-top: 36px; + } +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 000000000..90ae7367f --- /dev/null +++ b/styles/style.css @@ -0,0 +1,639 @@ +:root { + --body-color: #F4F5FC; + --main-color: #5A61ED; + --main-disabled-color: #9196ee; + --primary-text-color: #111111; + --secondary-text-color: #7C7C7C; + --border-color: #f2f2f2; + --bg-color: #ffffff; + --hover-color: #e4e4e4; + --focus-color: #9fa3e9; + --shadow-color: #afafaf; + --option-text-color: #000000; + --error-color: #FF2828; + --title-text-size: calc(24rem + 1px); + --header-text-size: 11rem; + --primary-text-size: 7rem; + --secondary-text-size: 6rem; + --option-text-size: calc(6rem + 1px); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + letter-spacing: 0; +} + +html { + font-size: 2px; + font-family: "Work Sans"; + font-weight: 500; +} + +body { + width: 100vw; + height: 100vh; + background-color: var(--body-color); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.overlay { + position: absolute; + visibility: hidden; + width: 100%; + height: 100%; + opacity: 25%; + z-index: 2; +} + +.container { + width: clamp(600px, 90%, 665px); + height: min(481px, 90%); + background-color: white; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: stretch; +} + +.title { + display: flex; + flex-direction: column-reverse; + background-color: var(--main-color); + font-size: var(--title-text-size); + width: 138px; +} + +.title>div { + position: relative; + top: -60px; + left: 32px; + font-family: "PT Sans", sans-serif; + font-size: var(--title-text-size); + color: var(--bg-color); + white-space: nowrap; + transform-origin: center; + transform: rotate(-90deg); + letter-spacing: 0.5px; +} + +.form-container { + flex: 3.85 1 auto; + background-color: var(--bg-color); + background-image: url("../images/user-icon.svg"); + background-position: bottom right; + background-repeat: no-repeat; + padding: 39px 22px 33px 21px; + margin-left: -1px; +} + +.form { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} + +.success-overlay { + position: absolute; + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: var(--bg-color); + z-index: 3; +} + +.header, +.description, +label { + font-size: var(--header-text-size); + color: var(--primary-text-color); +} + +.header { + letter-spacing: -0.5px; +} + +.description { + font-size: var(--primary-text-size); + letter-spacing: 0; +} + +.row, +.col { + display: flex; + flex-direction: row; +} + +.col { + flex-direction: column; + flex: 1 1 0; + margin-left: 12px; + opacity: 0; +} + +.col:first-child { + margin-left: 0; +} + +.row { + position: relative; + margin-top: 16px; + z-index: 2; +} + +.row:first-child { + margin-top: 20px; +} + +.row:last-child { + margin-top: 17px; +} + +label { + font-weight: 500; + font-size: var(--secondary-text-size); + color: var(--secondary-text-color); + letter-spacing: 0; +} + +input { + font-family: "Work Sans"; + font-weight: 500; + font-size: var(--primary-text-size); + margin-top: 5px; + padding-bottom: 6px; + outline: none; + border: none; + border-bottom: 0.7px solid var(--border-color); + background-color: transparent; + text-overflow: ellipsis; + letter-spacing: 0; +} + +input[type=email] { + padding-right: 15px; +} + + +/* strange styles.. :) */ +.first-name>input { + margin-left: 0.4px; +} + +.last-name>label { + margin-top: 0.3px; + margin-left: 0.9px; +} + +.last-name>input { + margin-left: 2.3px; +} + +.nationality>label { + margin-top: 0.08px; + margin-left: 0.4px; +} + +.select-current { + margin-top: 5px; + margin-left: 0.4px; + margin-bottom: 6.33px; +} + +.email>label { + margin-top: 0.08px; + margin-left: 0.9px; +} + +.email>input { + margin-left: 1px; + letter-spacing: -0.05px; +} + +.date-birth>label { + font-weight: 300; + font-size: var(--secondary-text-size); +} + + +/* custom select */ +.select { + position: relative; + border-bottom: 1px solid var(--border-color); + background-color: transparent; +} + +.select:hover { + cursor: pointer; +} + +.select-current { + font-size: var(--primary-text-size); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.select-picker { + position: absolute; + visibility: hidden; + min-width: 236px; + max-height: 120px; + top: 42.7%; + overflow-y: scroll; + background-color: var(--bg-color); + box-shadow: 2px 2px 7px var(--shadow-color); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + z-index: 5; +} + +.select-item { + font-family: 'Work Sans'; + font-weight: 500; + font-size: var(--primary-text-size); + padding: 4px 10px; +} + +.select-item:hover { + cursor: pointer; + background-color: var(--hover-color); +} + + +/* more arrows */ +.select:after, +.current-day:after, +.current-month:after, +.current-year:after { + content: '>'; + font: 14px monospace; + color: var(--primary-text-color); + transform: rotate(90deg); + right: 0; + top: 6px; + position: absolute; + pointer-events: none; + letter-spacing: 0.3px; +} + +.current-year:after { + right: 1.4px; +} + +/* custom date picker */ +.date-picker { + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + height: 23px; + margin-top: 5.3px; + padding-bottom: 1px; +} + +.current-day, +.current-month, +.current-year { + position: relative; + font-family: "Work Sans"; + font-size: var(--primary-text-size); + border-bottom: 0.7px solid var(--border-color); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.current-day { + flex: 1 1 22%; + max-width: 56px; + margin-left: 0; + padding-bottom: 5.6px; +} + +.current-month { + flex: 1 1 37%; + max-width: 91px; + padding-bottom: 5.6px; + margin-left: 5px; + margin-right: 5px; +} + +.current-year { + flex: 1 1 27%; + max-width: 69px; + padding-bottom: 6px; +} + +.current-day:hover, +.current-month:hover, +.current-year:hover { + cursor: pointer; +} + +.current-day:after, +.current-month:after, +.current-year:after { + top: 2px; +} + +.current-year:after { + top: 0; +} + +.day-picker, +.month-picker, +.year-picker { + position: absolute; + list-style-type: none; + max-height: 180px; + top: 53%; + overflow-y: scroll; + background-color: var(--bg-color); + box-shadow: 2px 2px 7px var(--shadow-color); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + z-index: 5; +} + +.month-picker { + width: inherit; + left: 42%; +} + +.year-picker { + left: 49.6%; +} + + +/* --classes that were created with JS-- */ +.day-item, +.month-item, +.year-item { + font-family: 'Work Sans'; + font-size: var(--primary-text-size); + padding: 4px 10px; +} + +.day-item:hover, +.month-item:hover, +.year-item:hover { + cursor: pointer; + background-color: var(--hover-color); +} + + +/* custorm radio group */ +.gender { + padding-left: 0.7px; +} + +.gender-group { + display: flex; + flex-direction: row; + justify-content: flex-start; + margin-top: 5.3px; +} + +.radio-container { + display: block; + position: relative; + cursor: pointer; + font-size: var(--primary-text-size); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin-right: 19px; +} + +.radio-container input { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +.checkmark { + position: absolute; + top: 2.4px; + left: 0; + bottom: 1.6px; + height: 12px; + width: 12px; + outline: 0.7px solid var(--main-color); + border-radius: 6.3px; +} + +.checkmark:after { + content: ""; + position: absolute; + display: none; +} + +.radio-container input~.checkmark:after { + display: none; +} + +.radio-container input:checked~.checkmark:after { + display: block; +} + +.radio-container .checkmark:after { + top: 3px; + left: 3px; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--main-color); +} + +.gender-description { + font-family: 'Work Sans'; + font-weight: 500; + font-size: var(--primary-text-size); + color: var(--primary-text-color); + margin-left: 18px; +} + + +/* password & confirm */ +.password>label, +.confirm>label { + font-weight: 300; +} + + +/* buttons */ +.buttons { + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + z-index: 4; +} + +input[type=submit] { + font-family: "PT Sans"; + font-size: var(--primary-text-size); + min-width: 154px; + padding: 7px 26px 7px 25px; + background-color: var(--main-color); + color: var(--bg-color); +} + +input[type=submit]:hover { + cursor: pointer; +} + +input[type=submit]:disabled { + background-color: var(--main-disabled-color); + cursor: wait; +} + +input.error { + border-bottom: 2px solid var(--error-color); + color: var(--error-color); +} + +p.error { + font-size: var(--secondary-text-size); + padding: 3px 0; + color: var(--error-color); +} + +.login { + font-family: "Work Sans"; + font-weight: 300; + font-size: var(--option-text-size); + padding-right: 10px; +} + +.login span { + font-weight: 500; +} + + +/* email checkmark */ +.email-checkmark { + display: none; + position: absolute; + right: 0; + bottom: 10px; + width: 11px; + height: 8px; +} + + +/*focus effects*/ +input[type=text]:focus, +input[type=email]:focus, +input[type=password]:focus, +.select:focus, +.current-day:focus, +.current-month:focus, +.current-year:focus { + outline: none; + border-bottom: 0.7px solid var(--focus-color); +} + +input[type=submit]:focus { + outline-offset: 2px; + outline: 1px solid var(--focus-color); +} + + +/*animations: shake*/ +.shake { + -webkit-animation: horizontal-shake 0.2s 2; + animation: horizontal-shake 0.2s 2; +} + +@-webkit-keyframes horizontal-shake { + 0% { + transform: translateX(0) + } + + 25% { + transform: translateX(2px) + } + + 50% { + transform: translateX(0) + } + + 75% { + transform: translateX(-2px) + } + + 100% { + transform: translateX(0) + } +} + +@keyframes horizontal-shake { + 0% { + transform: translateX(0) + } + + 25% { + transform: translateX(2px) + } + + 50% { + transform: translateX(0) + } + + 75% { + transform: translateX(-2px) + } + + 100% { + transform: translateX(0) + } +} + + +/*animations: emersion */ +.emersion { + -webkit-animation: emersion 1s; + animation: emersion 1s; +} + +@-webkit-keyframes emersion { + from { + transform: translateY(15px); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes emersion { + from { + transform: translateY(15px); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } +} \ No newline at end of file