diff --git a/static/index.html b/static/index.html index 514b62f..3bd54e7 100644 --- a/static/index.html +++ b/static/index.html @@ -8,9 +8,74 @@

Найди себе друга!

+
+
+ Информация о питомце + - + + + +
+
+ Информация о себе + + + + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/static/styles.css b/static/styles.css index ef86c9a..284ded2 100644 --- a/static/styles.css +++ b/static/styles.css @@ -28,4 +28,77 @@ h1 { .orders { margin: 20px 0; +} + +form { + width: 700px; + margin: 0 auto; + border: 1px solid #a7a7a7; + border-radius: 10px; + padding: 10px; + font-family: "Segoe UI", sans-serif; + color: black; + background-color: #ffffff; +} + +fieldset { + padding: 10px; + margin-bottom: 10px; + border: 1px solid #2c3e50; + border-radius: 5px; +} + +fieldset:last-child { + margin-bottom: 0; +} + +fieldset legend { + text-align: center; + color: #2c3e50; +} + +label { + display: block; + margin-bottom: 10px; +} + +input, select { + border-radius: 5px; +} + +input[type="text"], +input[type="color"], +input[type="tel"], +input[type="email"], +input[type="date"], +input[type="number"], +select { + width: 95%; + height: 24px; + margin-bottom: 10px; + margin-top: 10px; + padding: 2px 5px; + box-sizing: content-box; + border: 1px solid #cccccc; +} + +input[type="submit"], +input[type="reset"] { + display: inline-block; + margin: 0 5px; + padding: 6px 15px; + + color: #ffffff; + + background-color: #2c3e50; + border: none; +} + +input[type="submit"]:disabled { + opacity: 0.25; +} + +.buttons { + margin-top: 10px; + text-align: center; } \ No newline at end of file diff --git a/static/submitForm.js b/static/submitForm.js new file mode 100644 index 0000000..44e1cd9 --- /dev/null +++ b/static/submitForm.js @@ -0,0 +1,11 @@ +let submit = document.querySelector("input[type=submit]"); +let reset = document.querySelector("input[type=reset]"); +let rules = document.querySelector("input[name=rules]"); + +rules.onchange = function () { + submit.disabled = !rules.checked; +} + +reset.onclick = function () { + submit.disabled = true; +} \ No newline at end of file diff --git a/static/validate.js b/static/validate.js new file mode 100644 index 0000000..8be7566 --- /dev/null +++ b/static/validate.js @@ -0,0 +1,16 @@ +let telPhone = document.querySelector(".phone"); +let form = document.querySelector('form'); + +function validatePhone() { + const regex = /\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}/; + return telPhone.value.match(regex); +} + +form.addEventListener("submit", (e) => { + let isValidEmail = validatePhone(); + if(!isValidEmail) { + alert("Данные не валидны"); + telPhone.focus(); + e.preventDefault(); + } +});