From 41e816b0608bd26781121bea6f5046ed85a839a9 Mon Sep 17 00:00:00 2001
From: epantd <epatd3@gmail.com>
Date: Mon, 15 Nov 2021 23:26:41 +0500
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B0=D0=BD=D1=82=D0=B5=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=B5=D0=B2=D0=B0=20=D0=95=D0=BB=D0=B8=D0=B7=D0=B0=D0=B2=D0=B5?=
 =?UTF-8?q?=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/index.html    |  58 ++++++++++++++++++++++++-
 static/styles.css    | 101 ++++++++++++++++++++++++++++++++++---------
 static/validation.js |  20 +++++++++
 3 files changed, 157 insertions(+), 22 deletions(-)
 create mode 100644 static/validation.js

diff --git a/static/index.html b/static/index.html
index 514b62f..166f44e 100644
--- a/static/index.html
+++ b/static/index.html
@@ -9,7 +9,63 @@
 <main>
     <h1>Найди себе друга!</h1>
 
-    <!--Форму размещай тут-->
+    <form action="/pets/orders" method="post" >
+        <fieldset>
+            <legend>Информация о питомце</legend>
+            <label>
+                <span class="text">Тип питомца:</span>
+                <select name="petType">
+                    <option value="cat">Кот</option>
+                    <option value="dog">Собака</option>
+                    <option value="hamster">Хомяк</option>
+                    <option value="rabbit-cuckold">Кролик</option>
+                    <option value="parrot">Попугай</option>
+                    <option value="fish">Рыбка</option>
+                </select>
+            </label>
+            <label>
+                <span class="text">Пол: </span>
+                <input type="radio" name="gender" value="boy">Мальчик
+                <input type="radio" name="gender" value="girl">Девочка
+                <input type="radio" name="gender" value="hermafrodite">Гермафродит
+            </label>
+            <label>
+                <span class="text">Цвет глаз:</span>
+                <input type="color" name="eyeColor">
+            </label>
+            <label>
+                <span class="text">Длина хвоста:</span>
+                <input type="number" name="tailLength" value="3" min="2" step="1">
+            </label>
+            <label><span class="text">Желаемые качества характера:<Br>
+                <textarea name="comment" cols="40" rows="3"  placeholder="Бешеный как черт, злобный, похож на крысу с помойки"></textarea></p></label>
+        </fieldset>
+        <fieldset>
+            <legend>Информация о себе</legend>
+            <label>
+                <span class="text">Ваше Имя Отчество:</span>
+                <input type="text" name="name" placeholder="Денис Борисович">
+            </label>
+            <label>
+                <span class="text">Дата рождения:</span>
+                <input type="date" name="dateOfBirth">
+            </label>
+            <label> 
+                <span class="text">Email:</span>
+                <input type="email" name="email" placeholder="eto-realno-email@mail.ru">
+            </label>
+            <label>
+                <span class="text">Телефон:</span>
+                <input type="tel" name="phone" placeholder="8 800 555 35 35" required>
+            </label>
+        </fieldset>
+        <input type="submit" name="submit" value="Отправить" class="buttonw">
+        <input type="reset" name="reset" value="Сбросить" class="buttonw">
+    </form>
+    <script src="validation.js"></script>
+</main>
+</body>
+</html> 
 
 </main>
 </body>
diff --git a/static/styles.css b/static/styles.css
index ef86c9a..ba939c2 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,31 +1,90 @@
 body {
-    background-color: #F2F2F2;
+  background-color: #f2f2f2;
 }
-
 main {
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 1000px;
-    margin: 30px auto;
-    padding: 30px;
-    background: white;
-    min-height: calc(100vh - 60px);
-    border-radius: 20px;
-}
+  box-sizing: border-box;
+  width: 100%;
 
+  margin: 30px auto;
+  padding: 30px;
+  background: #f5deb3;
+  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;
-    margin-top: 0;
-    font-size: 50px;
-    text-align: center;
-    color: rgba(173,38,164,0.67);
+  font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+  font-weight: 300;
+  margin-top: 0;
+  font-size: 50px;
+  text-align: center;
+  color: rgba(129, 110, 68, 0.67);
 }
-
 .error {
-    color: rgba(173,30,24,0.88);
+  color: rgba(173, 30, 24, 0.88);
 }
 
 .orders {
-    margin: 20px 0;
-}
\ No newline at end of file
+  margin: 20px 0;
+}
+
+form {
+  width: 400px;
+  margin: auto;
+  padding: 10px;
+  background-color: #deb887;
+  border-radius: 20px;
+  box-shadow: 0 0 10px #8b4513;
+}
+
+fieldset {
+  padding: 10px;
+  margin-bottom: 20px;
+  border-radius: 20px;
+  text-align: left;
+}
+
+label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+input,
+select {
+  border-radius: 5px;
+}
+
+legend {
+  font-weight: bold;
+  text-align: center;
+}
+
+.text {
+  font-weight: 550;
+}
+
+input[type="text"],
+input[type="color"],
+input[type="tel"],
+input[type="email"],
+input[type="date"],
+input[type="number"],
+select {
+  width: 95%;
+  height: 20px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+  padding: 2px 5px;
+  box-sizing: content-box;
+  border: 1px solid #8b4513;
+}
+
+input[type="submit"],
+input[type="reset"] {
+  display: inline-block;
+  margin: 0 10px;
+  padding: 10px 50px;
+  color: #ffffff;
+  background-color: #cd853f;
+  border: solid rgb(139, 69, 19);
+}
diff --git a/static/validation.js b/static/validation.js
new file mode 100644
index 0000000..2f0ad2b
--- /dev/null
+++ b/static/validation.js
@@ -0,0 +1,20 @@
+let telphone = document.querySelector('input[type="tel"]');
+let email = document.querySelector('input[type="email"]');
+let form = document.querySelector('form');
+
+function validateEmail() {
+    return email.value.includes('@');
+}
+
+function validatePhone() {
+    const regex = /\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}/;
+    return telphone.value.match(regex);
+}
+
+form.addEventListener("submit", (e) => {
+    let isValidEmail = validateEmail() && validatePhone();
+    if(!isValidEmail) {
+        alert("Данные не валидны");
+        e.preventDefault();
+    }
+});
\ No newline at end of file