Skip to content

Оплачко Дмитрий #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
coca-in-a-cola wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Оплачко Дмитрий #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,16 @@ const pageHead =
<head>
<title>Результат заказа питомца</title>
<link rel="stylesheet" href="/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<main>
<h1>Результат заказа питомца</h1>
<main class="container">
<h1 class="text-primary">Результат заказа питомца</h1>
`;

const pageFoot =
`
<a href="/">⃪ Вернуться к форме заказа</a>
<a class="btn btn-primary ps-4" href="/">⃪ Вернуться к форме заказа</a>
</main>
</body>
</html>
Expand Down
101 changes: 98 additions & 3 deletions static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Форма выбора питомца</title>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>
<body>
<main>
<h1>Найди себе друга!</h1>
<div class="container">
<h1 class="text-center pt-5 display-4 text-primary">Найди себе друга!</h1>
<div class="card mx-auto" style="max-width: 36rem;">
<form method="POST" action="/pets/orders" class="card-body">

<!--Форму размещай тут-->
<!--<input type="" name="name" class="form-control">Имя</input>-->
<!--<input type="" name="name" class="form-control">Имя</input>-->
<!--<input type="" name="name" class="form-control">Имя</input>-->
<h3 class="text-center lead">Ваши контактные данные</h3>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Адрес электронной почты</label>
<input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Введите email">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>

<div class="mb-3">
<label for="exampleInputName" class="form-label">Ваше имя</label>
<input type="name" name="name" class="form-control" id="exampleInputName" aria-describedby="nameHelp" placeholder="Введите ваше имя">
</div>

<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Номер телефона</label>
<input type="phone" name="phone" class="form-control" id="exampleInputPhone" aria-describedby="emailHelp" placeholder="Введите ваш телефон">
</div>

<hr/>

<h3 class="text-center lead">Ваш желаемый питомец</h3>

<label for="exampleInputEmail1" class="form-label">Ваш новый друг</label>
<select class="form-select mb-3" name="petType" aria-label="Default select example">
<option value="cat">Котик</option>
<option value="dog">Собачка</option>
<option value="tiger">Тигра рогатая</option>
<!--<option value="Parrot">Папугайч</option>-->
</select>

<label for="exampleInputEmail1" class="form-label">Пол</label>
<select class="form-select mb-3" name="gender" aria-label="Default select example">
<option value="boy">Мальчик</option>
<option value="girl">Девочка</option>
<option value="none">другое</option>
</select>

<div class="row">
<div class="col">
<div class="mb-3">
<label for="inputDate">Цвет глаз</label>
<input type="color" name="eyeColor" class="cursor-pointer h-10 outline-none rounded-full w-10 input-color-picker"
style="height: 2.5rem; width:100%; outline: none; cursor: pointer; padding:0; border:none; display: block;"
value="#0d6efd">
</div>
</div>

<div class="col-4">
<div class="form-group">
<label for="inputDate">Длина хвоста (см)</label>
<input type="number" name="tailLength" class="form-control w-5" min="7" value="20" max="120">
</div>
</div>

<div class="col-4">
<div class="form-group">
<label for="inputDate">Дата рождения:</label>
<input type="date" name="dateOfBirth" class="form-control">
</div>
</div>
<!--Длина хвоста
<input type="number" name="tailLength" class="form-control">-->
</div>
<div class="clearfix"></div>


<div class="mb-3 form-check">
<input type="checkbox" name="rules" value="true" class="form-check-input" id="exampleCheck1" required>
<label class="form-check-label" for="exampleCheck1">Принимаю <a href="https://youtu.be/dQw4w9WgXcQ">
политику конфиденциальности</a>
</label>
</div>

<button type="submit" class="btn btn-primary mx-auto">отправить</button>
</form>
</div>
</div>

<!--
Готово:
Доп. Баллы:

TODO: Доделать табличку
- Добавить стиль
- Перевести значения
- Цвет глаз в чита
- Длина хвоста в единицах измерения
- ...
-->
</main>
</body>
</html>
38 changes: 16 additions & 22 deletions static/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,25 @@
body {
background-color: #F2F2F2;
.orders {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
}

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;
.orders th,
.orders td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #eceeef;
}

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);
.orders thead th {
vertical-align: bottom;
border-bottom: 2px solid #eceeef;
}

.error {
color: rgba(173,30,24,0.88);
.orders tbody + tbody {
border-top: 2px solid #eceeef;
}

.orders {
margin: 20px 0;
.orders .orders {
background-color: #fff;
}