diff --git a/static/index.html b/static/index.html index 514b62f..1648af1 100644 --- a/static/index.html +++ b/static/index.html @@ -8,9 +8,83 @@

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

+
+
+ Ваши данные + - + + + + + + +
+
+ Данные питомца + + + + + + + + + + + + +
+
+ + +
+
+
\ No newline at end of file diff --git a/static/styles.css b/static/styles.css index ef86c9a..560569c 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,5 +1,6 @@ body { background-color: #F2F2F2; + font-size: 20px; } main { @@ -12,7 +13,6 @@ main { min-height: calc(100vh - 60px); border-radius: 20px; } - h1 { font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; @@ -21,11 +21,70 @@ h1 { text-align: center; color: rgba(173,38,164,0.67); } - .error { color: rgba(173,30,24,0.88); } .orders { margin: 20px 0; +} + +label:not(:nth-last-child(1), :nth-last-child(2)) { + display: block; + margin-bottom: 10px !important; +} + +fieldset { + margin-bottom: 10px; + border-radius: 10px; + border: black solid; + border-size: 10px +} + +fieldset label{ + display: block; +} + +fieldset:last-child { + text-align: center; +} + +.data-user { + background-color: #e4d8f7; +} + +.data-pet { + background-color: #dcf1dd; +} + +legend { + padding: 10px; + background-color: #ffffff; + border-radius: 10px; + border: black solid; + border-size: 10px +} + +label { + padding: 20px; + background: white; + border-radius: 10px; +} + +input { + padding: 5px; + font-size: 20px; + border-radius: 10px; +} + +fieldset:last-child input { + display: inline; + padding: 10px; + background: rgb(8, 16, 50); + color: white; + border-radius: 10px; +} + +fieldset:last-child label { + display: inline-block; } \ No newline at end of file diff --git a/static/validation.js b/static/validation.js new file mode 100644 index 0000000..a4d15f9 --- /dev/null +++ b/static/validation.js @@ -0,0 +1,15 @@ +let submitButton = document.querySelector('input[type="submit"]'); +let telInput = document.querySelector('input[type="tel"]'); +let form = document.querySelector('form'); + +function validatePhone() { + const regex = /\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}/; + return telInput.value.match(regex); +} + +form.addEventListener("submit", (e) => { + if(!validatePhone()) { + alert("Данные не валидны"); + e.preventDefault(); + } +});