diff --git a/package-lock.json b/package-lock.json index 6aaf3bc..486f987 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "tables-and-forms", "version": "1.0.0", "license": "ISC", "dependencies": { diff --git a/static/form-styles.css b/static/form-styles.css new file mode 100644 index 0000000..e7ec6cb --- /dev/null +++ b/static/form-styles.css @@ -0,0 +1,77 @@ +* { + color: rgb(173, 38, 164); +} + +form, select, input { + font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +form { + font-size: 25px; + padding: 10px; + background-color: #EEE; + text-align: start; +} + +fieldset { + margin-bottom: 10px; +} + +a { + color: cornflowerblue; + text-decoration: none; +} + +label[for="rules"] { + font-size: smaller; +} + +form, fieldset, .field, .btn { + border-radius: 0.3em; +} + +.row { + display: flex; + margin: 5px; + flex-flow: row wrap; + justify-content: center; + align-items: baseline; +} + +.field, .btn { + padding: 5px; + background-color: #FFF; +} + +.field:hover, .btn:hover { + background-color: #DDD; +} + +.field:focus-within, .btn:active { + background-color: #CCC; +} + +.field.row { + gap: 5px; +} + +input, select, option { + color: #D659CB; +} + +.buttons input[type="reset"] { + float: right; +} + +input[type="radio"] { + display: none; +} + +.btn, +input[type="radio"]:checked + label { + font-weight: bold; +} + +select, input { + font-size: 20px; +} diff --git a/static/index.html b/static/index.html index 514b62f..6a589fc 100644 --- a/static/index.html +++ b/static/index.html @@ -4,13 +4,79 @@ Форма выбора питомца +

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

- +
+
+ Информация о желаемом питомце +
+
+ + +
+
+ + + + + + + +
+
+
+
+ + +
+
+ + +
+
+
+
+ Информация о себе +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + \ No newline at end of file diff --git a/static/styles.css b/static/styles.css index ef86c9a..940fa55 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,3 +1,7 @@ +* { + margin: 0; +} + body { background-color: #F2F2F2; } @@ -19,13 +23,13 @@ h1 { margin-top: 0; font-size: 50px; text-align: center; - color: rgba(173,38,164,0.67); + color: rgba(173, 38, 164, 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 +} diff --git a/static/validation.js b/static/validation.js new file mode 100644 index 0000000..0743a38 --- /dev/null +++ b/static/validation.js @@ -0,0 +1,7 @@ +const phone = document.querySelector('#phone'); + +phone.oninput = () => { + phone.setCustomValidity(/(\+7 ?)?\d{3} ?\d{3}-?\d{2}-?\d{2}/.test(phone.value) === false + ? "Неверный формат" + : ""); +};