Lab3
This commit is contained in:
parent
517f052e4b
commit
7881e2c55b
@ -1,14 +1,17 @@
|
|||||||
{
|
{
|
||||||
"name": "vite-project",
|
"name": "web-site",
|
||||||
"private": true,
|
"version": "1 .0.0",
|
||||||
"version": "0.0.0",
|
"main": "index.html",
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"start": "http-server -p 3000 ./",
|
||||||
"build": "vite build",
|
"test": "echo \"Error: no test specified\" && exit 1 "
|
||||||
"preview": "vite preview"
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "5.2.1",
|
||||||
|
"@fortawesome/fontawesome-free": "6.2.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vite": "^4.4.5"
|
"http-server": "14.1 .1 "
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
24
Lab3/.gitignore
vendored
Normal file
24
Lab3/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
95
Lab3/Admin.html
Normal file
95
Lab3/Admin.html
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Admin</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<!-- My css -->
|
||||||
|
<link rel="stylesheet" href="./myStyle.css">
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" >
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css_mdb/mdb.min.css" />
|
||||||
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
||||||
|
<!-- Bootstrap JS -->
|
||||||
|
<script defer src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-image overflow-visible pageBackground">
|
||||||
|
<!--Шапка-->
|
||||||
|
<nav class="navbar navbar-expand-xl navbar-light navbar-style">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand btn btn-outline-dark" href="./index.html" >
|
||||||
|
<img src="./img/lable.png" alt="Logo" height="60" class="align-text-top">
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<img src="./img/togglerIcon.png" alt="Toggler" height="40">
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" aria-current="page" href="./index.html">Главная</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Galery.html" >Галерея</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Courses.html">Курсы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Contacts.html" >Контакты</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Reviews.html" >Отзывы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link active me-3 ms-3 fs-3 fw-bold" href="./Admin.html" >Админ</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="container p-2 formStyle formSizeStyle rounded-8 my-4">
|
||||||
|
<a class="btn purple text-light rounded-pill" href="./page-edit.html">Добавить курс</a>
|
||||||
|
<div class="overflow-x-auto height-500 p-0">
|
||||||
|
<table id="items-table" class="table">
|
||||||
|
<thead>
|
||||||
|
<th scope="col" class="fw-bold text-center">№</th>
|
||||||
|
<th scope="col" class="w-25 fw-bold text-center">Курс</th>
|
||||||
|
<th scope="col" class="w-25 fw-bold text-center">Цена</th>
|
||||||
|
<th scope="col" class=" fw-bold minW-160 text-center ">Кол-во занятий</th>
|
||||||
|
<th scope="col" class="w-25 fw-bold text-center">Сумма</th>
|
||||||
|
<th scope="col" class="w-25 fw-bold text-center">Выгода</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</thead>
|
||||||
|
<tbody class="fw-bold overflow-y-scroll"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!--Подвал-->
|
||||||
|
<footer class="position-sticky top-100 footer-style">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm text-center text-sm-start text-light fw-bold fs-5">
|
||||||
|
Техническая поддержка <br>
|
||||||
|
8-800-555-3535 <br>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
<div class="col-sm text-center text-sm-end text-light fw-bold fs-5">
|
||||||
|
Работаем без выходных с 8:00 до 21:30
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!--Подвал-->
|
||||||
|
<script type="module">
|
||||||
|
import validation from "./js/validation";
|
||||||
|
import { linesPageForm } from "./js/lines";
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
validation();
|
||||||
|
linesPageForm();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
88
Lab3/Contacts.html
Normal file
88
Lab3/Contacts.html
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Contacts</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<link rel="stylesheet" href="./myStyle.css">
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" >
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css_mdb/mdb.min.css" />
|
||||||
|
<!-- Bootstrap JS -->
|
||||||
|
<script defer src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-image overflow-visible pageBackground">
|
||||||
|
<!--Шапка-->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light navbar-style">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand btn btn-outline-dark" href="./index.html" >
|
||||||
|
<img src="./img/lable.png" alt="Logo" height="60" class="align-text-top">
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<img src="./img/togglerIcon.png" alt="Toggler" height="40">
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./index.html">Главная</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Galery.html" >Галерея</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Courses.html">Курсы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link active me-3 ms-3 fs-3 fw-bold" aria-current="page" href="./Contacts.html">Контакты</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Reviews.html" >Отзывы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Admin.html" >Админ</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!--Шапка-->
|
||||||
|
<!--Контакты-->
|
||||||
|
<div class="container mx-auto my-5 p-2 rounded-8 fw-bold formStyle formSizeStyle minH-500 hfitcon">
|
||||||
|
<div class="text-dark mx-auto fw-bold fs-3 mb-3 wfitcon">
|
||||||
|
Контактная информация
|
||||||
|
</div>
|
||||||
|
<div class="row row-cols-1 row-cols-xl-2">
|
||||||
|
<div class="col col-12 col-xl-7">
|
||||||
|
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Aa04c81f9d2fb99b1196ebaa14018b658af59476c09548a9d1ed257c055abf2c1&width=100%&height=400px&lang=ru_RU&scroll=true"></script>
|
||||||
|
</div>
|
||||||
|
<div class="col col-12 col-xl-5 text-dark fs-4 fw-bold text-center text-xl-start mt-4 mt-xl-0">
|
||||||
|
Группа в ВКонтакте <br>
|
||||||
|
<a class="text-reset" href="https://vk.com/mackmaffin">@NaStolb73</a> <br>
|
||||||
|
Телефон для связи <br>
|
||||||
|
8-800-555-35-35 <br>
|
||||||
|
Адрес электронной почты<br>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Контакты-->
|
||||||
|
|
||||||
|
<!--Подвал-->
|
||||||
|
<footer class="position-sticky top-100 footer-style">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm text-center text-sm-start text-light fw-bold fs-5">
|
||||||
|
Техническая поддержка <br>
|
||||||
|
8-800-555-3535 <br>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
<div class="col-sm text-center text-sm-end text-light fw-bold fs-5">
|
||||||
|
Работаем без выходных с 8:00 до 21:30
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!--Подвал-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
129
Lab3/Courses.html
Normal file
129
Lab3/Courses.html
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Courses</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<link rel="stylesheet" href="./myStyle.css">
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" >
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css_mdb/mdb.min.css" />
|
||||||
|
<!-- Bootstrap JS -->
|
||||||
|
<script defer src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-image overflow-visible pageBackground">
|
||||||
|
<!--Шапка-->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light navbar-style">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand btn btn-outline-dark" href="./index.html" >
|
||||||
|
<img src="./img/lable.png" alt="Logo" height="60" class="align-text-top">
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<img src="./img/togglerIcon.png" alt="Toggler" height="40">
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./index.html">Главная</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Galery.html" >Галерея</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link active me-3 ms-3 fs-3 fw-bold" aria-current="page" href="./Courses.html">Курсы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Contacts.html" >Контакты</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Reviews.html" >Отзывы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Admin.html" >Админ</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!--Шапка-->
|
||||||
|
<!--Курсы-->
|
||||||
|
<div class="container mx-auto my-5 formSizeStyle">
|
||||||
|
<div class="row row-cols-xl-3 row-cols-md-2 row-cols-1 pd-3 text-center text-secondary-emphasis">
|
||||||
|
<div class="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon" >
|
||||||
|
<img src="img/CourseImage1.jpg" class="my-3 rounded-9" alt="image" height="150">
|
||||||
|
<div class="my-3 fs-3 fw-bold">
|
||||||
|
1 занятие <br>
|
||||||
|
2500 рублей
|
||||||
|
</div>
|
||||||
|
<button class="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
|
||||||
|
Записаться
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon">
|
||||||
|
<img src="img/CourseImage2.jpg" class="my-3 rounded-9" alt="image" height="150">
|
||||||
|
<div class="my-3 fs-3 fw-bold">
|
||||||
|
5 занятий <br>
|
||||||
|
10000 рублей
|
||||||
|
</div>
|
||||||
|
<button class="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
|
||||||
|
Записаться
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="coll col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-2 rounded-8 fw-bold formStyle hfitcon wfitcon">
|
||||||
|
<img src="img/CourseImage3.jpg" class="my-3 rounded-9" alt="image" height="150">
|
||||||
|
<div class="my-3 fs-3 fw-bold">
|
||||||
|
11 занятий <br>
|
||||||
|
20000 рублей
|
||||||
|
</div>
|
||||||
|
<button class="btn rounded-pill btn-lg text-light my-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
|
||||||
|
Записаться
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Модальное окно-->
|
||||||
|
<div class="modal fade" id="signUp" tabindex="-1" aria-labelledby="signUp" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content rounded-8 modalStyle">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title fw-bold fs-3 text-secondary-emphasis" id="signUpLabel">Запись на курс</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="recipient-name" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Ваше имя:</label>
|
||||||
|
<input type="text" class="form-control rounded-8 light-grey" id="recipient-name">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="signUpText" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Ваш номер телефона +7-...:</label>
|
||||||
|
<input type="tel" class="form-control rounded-8 light-grey" id="signUpText">
|
||||||
|
</div>
|
||||||
|
<p class="fw-bold fw-5 text-secondary-emphasis">С вами свяжется наш оператор для уточнения деталей</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn rounded-pill text-light fw-normal fs-6 purple">Ввод</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Подвал-->
|
||||||
|
<footer class="position-sticky top-100 footer-style">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm text-center text-sm-start text-light fw-bold fs-5">
|
||||||
|
Техническая поддержка <br>
|
||||||
|
8-800-555-3535 <br>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
<div class="col-sm text-center text-sm-end text-light fw-bold fs-5">
|
||||||
|
Работаем без выходных с 8:00 до 21:30
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!--Подвал-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
121
Lab3/Galery.html
Normal file
121
Lab3/Galery.html
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Galery</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<link rel="stylesheet" href="./myStyle.css">
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" >
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css_mdb/mdb.min.css" />
|
||||||
|
<!-- Bootstrap JS -->
|
||||||
|
<script defer src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-image overflow-visible pageBackground">
|
||||||
|
<!--Шапка-->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light navbar-style">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand btn btn-outline-dark" href="./index.html" >
|
||||||
|
<img src="./img/lable.png" alt="Logo" height="60" class="align-text-top">
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<img src="./img/togglerIcon.png" alt="Toggler" height="40">
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./index.html">Главная</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link active me-3 ms-3 fs-3 fw-bold" aria-current="page" href="./Galery.html" >Галерея</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Courses.html">Курсы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Contacts.html" >Контакты</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Reviews.html" >Отзывы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Admin.html" >Админ</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!--Шапка-->
|
||||||
|
<!--Галерея-->
|
||||||
|
<div class="container mx-auto my-5 p-2 fw-bold rounded-8 formStyle formSizeStyle hfitcon">
|
||||||
|
<div class="row row-cols-1 row-cols-lg-2 row-cols-xxl-3 pb-3 text-center response-container" id="response-container">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Галерея-->
|
||||||
|
<!-- Модальное окно -->
|
||||||
|
<div class="modal fade " id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel">
|
||||||
|
<div class="modal-dialog modal-dialog-centered modal-fullscreen mx-auto modal-dialog-style">
|
||||||
|
<div class="modal-content rounded-8">
|
||||||
|
<div class="modal-body text-center rounded-8 modalStyle hfitcon width-100">
|
||||||
|
<button type="button" class="btn-close position-absolute top-0 end-0 me-1" data-bs-dismiss="modal" aria-label="Закрыть"></button>
|
||||||
|
<img id="image" class="mx-auto width-100" src="" alt="image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
var exampleModal = document.getElementById('imageModal')
|
||||||
|
exampleModal.addEventListener('show.bs.modal', function (event){
|
||||||
|
var button = event.relatedTarget
|
||||||
|
var source = button.getElementsByTagName('img').item(0).getAttribute('src')
|
||||||
|
document.getElementById('image').setAttribute("src", source.toString())
|
||||||
|
});
|
||||||
|
|
||||||
|
var imgContainer = document.getElementById('response-container')
|
||||||
|
function filling(line){
|
||||||
|
const Container =
|
||||||
|
`<button class="col-xxl-4 col-lg-6 col-12 p-0 btn mx-auto my-2 my-sm-4 p-0 bg-image rounded-8 PictureButton" data-bs-toggle="modal" data-bs-target="#imageModal">
|
||||||
|
<img src="` + line + `" class="rounded-8 width-100" alt="image">
|
||||||
|
</button>`
|
||||||
|
imgContainer.innerHTML += Container
|
||||||
|
}
|
||||||
|
fetch('imgs.txt')
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(data => {
|
||||||
|
readFile(data)
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Ошибка:', error);
|
||||||
|
});
|
||||||
|
|
||||||
|
async function readFile(file) {
|
||||||
|
console.log(file);
|
||||||
|
const arr = file.split(/\r?\n/gm)
|
||||||
|
arr.map(line => filling(line))
|
||||||
|
console.log('done')
|
||||||
|
imgContainer.innerHTML += `<button onclick="file.click()" type="button" class="col-xxl-4 col-lg-6 col-12 p-0 btn btn-dark mx-auto my-4 rounded-8 fw-bold fs-1 PictureButton">
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
<input id="file" type="file" hidden>`
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<!--Подвал-->
|
||||||
|
<footer class="position-sticky top-100 footer-style">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm text-center text-sm-start text-light fw-bold fs-5">
|
||||||
|
Техническая поддержка <br>
|
||||||
|
8-800-555-3535 <br>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
<div class="col-sm text-center text-sm-end text-light fw-bold fs-5">
|
||||||
|
Работаем без выходных с 8:00 до 21:30
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!--Подвал-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
216
Lab3/Reviews.html
Normal file
216
Lab3/Reviews.html
Normal file
@ -0,0 +1,216 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Reviews</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<link rel="stylesheet" href="./myStyle.css">
|
||||||
|
<!-- Bootstrap CSS -->
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" >
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css_mdb/mdb.min.css" />
|
||||||
|
<!-- Bootstrap JS -->
|
||||||
|
<script defer src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-image overflow-visible pageBackground">
|
||||||
|
<!--Шапка-->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light navbar-style">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand btn btn-outline-dark" href="./index.html" >
|
||||||
|
<img src="./img/lable.png" alt="Logo" height="60" class="align-text-top">
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<img src="./img/togglerIcon.png" alt="Toggler" height="40">
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" aria-current="page" href="./index.html">Главная</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Galery.html" >Галерея</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Courses.html">Курсы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Contacts.html" >Контакты</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 active fs-3 fw-bold" aria-current="page" href="./Reviews.html" >Отзывы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Admin.html" >Админ</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!--Шапка-->
|
||||||
|
<!--Отзывы-->
|
||||||
|
<div class="container mx-auto my-5 p-2 rounded-8 fw-bold formStyle formStyle height-500">
|
||||||
|
<div class="row row-cols-2 text-dark float-md-end mx-auto fs-5 fw-medium rounded-7 light-grey accauntPanel">
|
||||||
|
<div class="col col-8 text-center my-auto lh-1">
|
||||||
|
<a type="button" class="text-decoration-underline" data-bs-toggle="modal" data-bs-target="#LogIn">Войдите</a> в аккаунт или
|
||||||
|
<a type="button" class="text-decoration-underline" data-bs-toggle="modal" data-bs-target="#Register">зарегистрируйтесь</a>
|
||||||
|
</div>
|
||||||
|
<div class="col col-4 mx-auto my-auto">
|
||||||
|
<img src="img/AccountIcon.png" alt="Icon" width="80">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-md-start text-center">
|
||||||
|
<button type="button" id="reviewBtn" class="btn rounded-pill btn-lg text-light my-2 mt-md-4 mb-md-5 ms-sm-3 fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#review">
|
||||||
|
Написать отзыв
|
||||||
|
</button>
|
||||||
|
<button id="reset" class="btn rounded-pill">Сброс</button>
|
||||||
|
<div class="container overflow-y-auto height-300" >
|
||||||
|
<div class="text-start p-2 rounded-7 my-2 light-grey hfitcon wfitcon">
|
||||||
|
<h5 class="fw-normal text-dark">Михаил</h5>
|
||||||
|
<h6>Разбил аппарат, рекомендую</h6>
|
||||||
|
</div>
|
||||||
|
<div class="text-start p-2 rounded-7 my-2 light-grey hfitcon wfitcon">
|
||||||
|
<h5 class="fw-normal text-dark">Леша</h5>
|
||||||
|
<h6>Марк 2 лучше</h6>
|
||||||
|
</div>
|
||||||
|
<div class="text-start p-2 rounded-7 my-2 light-grey hfitcon wfitcon">
|
||||||
|
<h5 class="fw-normal text-dark">Женя</h5>
|
||||||
|
<h6>Приехал с сыном на выходных покататься, а заодно и новому научиться,
|
||||||
|
все таки дело полезное. Отлично провели время, инструктор объяснил что и как
|
||||||
|
теперь я действительно чувствую себя увереннее за рулем</h6>
|
||||||
|
</div>
|
||||||
|
<div class="text-start p-2 rounded-7 my-2 light-grey hfitcon wfitcon">
|
||||||
|
<h5 class="fw-normal text-dark">Женя</h5>
|
||||||
|
<h6>Приехал с сыном на выходных покататься, а заодно и новому научиться,
|
||||||
|
все таки дело полезное. Отлично провели время, инструктор объяснил что и как
|
||||||
|
теперь я действительно чувствую себя увереннее за рулем</h6>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Отзывы-->
|
||||||
|
<!--Модальное окно отзыв-->
|
||||||
|
<div class="modal fade" id="review" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content rounded-8 modalStyle">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title fw-bold fs-3 text-secondary-emphasis" id="reviewLabel">Новый отзыв</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="h3 text-danger" id="logged"></div>
|
||||||
|
<form id="reviews-body">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="reviewText" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Текст отзыва:</label>
|
||||||
|
<textarea class="form-control rounded-8 light-grey" rows="5" id="reviewText"></textarea>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer" id="reviews-footer">
|
||||||
|
<button class="btn rounded-pill btn-sm text-light fw-normal fs-6 purple" data-bs-toggle="modal">
|
||||||
|
Отправить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Модальное окно вход-->
|
||||||
|
<div class="modal fade" id="LogIn" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content rounded-8 modalStyle">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title fw-bold fs-3 text-secondary-emphasis" id="LogInLabel">Вход</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="nameLogIn" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Имя:</label>
|
||||||
|
<input type="text" class="form-control rounded-8 light-grey" id="nameLogIn">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="passwordLogIn" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Пароль:</label>
|
||||||
|
<input type="password" class="form-control rounded-8 light-grey" id="passwordLogIn">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn rounded-pill btn-sm text-light fw-normal fs-6 purple" id="signIn" data-bs-toggle="modal">
|
||||||
|
Вход
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Модальное окно регистрация-->
|
||||||
|
<div class="modal fade" id="Register" tabindex="-1" aria-labelledby="RegisterLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content rounded-8 modalStyle">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title fw-bold fs-3 text-secondary-emphasis" id="exampleModalLabel">Регистрация</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="nameRegister" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Имя:</label>
|
||||||
|
<input type="text" class="form-control rounded-8 light-grey" id="nameRegister">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="mailRegister" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Адрес электронной почты:</label>
|
||||||
|
<input type="text" class="form-control rounded-8 light-grey" id="mailRegister">
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="passwordRegister" class="col-form-label fw-bold fw-5 text-secondary-emphasis">Пароль:</label>
|
||||||
|
<input type="password" class="form-control rounded-8 light-grey" id="passwordRegister">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn rounded-pill btn-sm text-light fw-normal fs-6 purple" data-bs-toggle="modal" data-bs-target="#signUp">
|
||||||
|
Регистрация
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Подвал-->
|
||||||
|
<footer class="position-sticky top-100 footer-style">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm text-center text-sm-start text-light fw-bold fs-5">
|
||||||
|
Техническая поддержка <br>
|
||||||
|
8-800-555-3535 <br>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
<div class="col-sm text-center text-sm-end text-light fw-bold fs-5">
|
||||||
|
Работаем без выходных с 8:00 до 21:30
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!--Подвал-->
|
||||||
|
<script>
|
||||||
|
var logged = false
|
||||||
|
var buttonReset = document.getElementById('reset')
|
||||||
|
buttonReset.addEventListener('click', function (){
|
||||||
|
logged = false;
|
||||||
|
});
|
||||||
|
var buttonSignIn = document.getElementById('signIn')
|
||||||
|
buttonSignIn.addEventListener('click', function () {
|
||||||
|
logged = true
|
||||||
|
});
|
||||||
|
var buttonReview = document.getElementById('reviewBtn')
|
||||||
|
buttonReview.addEventListener('click', function (){
|
||||||
|
if(!logged) {
|
||||||
|
document.getElementById('logged').innerText = "Войдите в аккаунт"
|
||||||
|
document.getElementById('reviews-footer').style.display = 'none'
|
||||||
|
document.getElementById('reviews-body').style.display = 'none'
|
||||||
|
} else {
|
||||||
|
document.getElementById('logged').innerText = ""
|
||||||
|
document.getElementById('reviews-footer').style.display = 'block'
|
||||||
|
document.getElementById('reviews-body').style.display = 'block'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
9
Lab3/counter.js
Normal file
9
Lab3/counter.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export function setupCounter(element) {
|
||||||
|
let counter = 0
|
||||||
|
const setCounter = (count) => {
|
||||||
|
counter = count
|
||||||
|
element.innerHTML = `count is ${counter}`
|
||||||
|
}
|
||||||
|
element.addEventListener('click', () => setCounter(counter + 1))
|
||||||
|
setCounter(0)
|
||||||
|
}
|
||||||
120
Lab3/data.json
Normal file
120
Lab3/data.json
Normal file
File diff suppressed because one or more lines are too long
BIN
Lab3/img/AccountIcon.png
Normal file
BIN
Lab3/img/AccountIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
Lab3/img/CourseImage1.jpg
Normal file
BIN
Lab3/img/CourseImage1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
Lab3/img/CourseImage2.jpg
Normal file
BIN
Lab3/img/CourseImage2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
BIN
Lab3/img/CourseImage3.jpg
Normal file
BIN
Lab3/img/CourseImage3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
Lab3/img/MainBackGround.jpg
Normal file
BIN
Lab3/img/MainBackGround.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
Lab3/img/image 3.jpg
Normal file
BIN
Lab3/img/image 3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
Lab3/img/image 4.jpg
Normal file
BIN
Lab3/img/image 4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
Lab3/img/image 5.jpg
Normal file
BIN
Lab3/img/image 5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
Lab3/img/lable.png
Normal file
BIN
Lab3/img/lable.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
Lab3/img/pen-to-square.png
Normal file
BIN
Lab3/img/pen-to-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
Lab3/img/togglerIcon.png
Normal file
BIN
Lab3/img/togglerIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 863 B |
BIN
Lab3/img/trash.png
Normal file
BIN
Lab3/img/trash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 577 B |
3
Lab3/imgs.txt
Normal file
3
Lab3/imgs.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
img/image 4.jpg
|
||||||
|
img/image 5.jpg
|
||||||
|
img/image 3.jpg
|
||||||
77
Lab3/index.html
Normal file
77
Lab3/index.html
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>index</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<!-- My css -->
|
||||||
|
<link rel="stylesheet" href="./myStyle.css">
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" >
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css_mdb/mdb.min.css" />
|
||||||
|
<!-- Bootstrap JS -->
|
||||||
|
<script defer src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="bg-image overflow-visible pageBackground">
|
||||||
|
<!--Шапка-->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light navbar-style">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand btn btn-outline-dark" href="./index.html" >
|
||||||
|
<img src="./img/lable.png" alt="Logo" height="60" class="align-text-top">
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<img src="./img/togglerIcon.png" alt="Toggler" height="40">
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link active me-3 ms-3 fs-3 fw-bold" aria-current="page" href="./index.html">Главная</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Galery.html" >Галерея</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Courses.html">Курсы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Contacts.html" >Контакты</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Reviews.html" >Отзывы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Admin.html" >Админ</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!--Шапка-->
|
||||||
|
<!--Главныей раздел-->
|
||||||
|
<div class="text-light mx-auto mt-5 mb-5 fw-bold p-4 mainPageInf">
|
||||||
|
<h2>Рад приветствовать вас на моем сайте!</h2>
|
||||||
|
<h4 class="mt-4">Меня зовут Илья, я иструктор по экстремальному вождению с 15-летним стажем. В течение многих лет я участвовал и
|
||||||
|
побеждал во многих ралли заездах, таких как
|
||||||
|
<br> "Париж-Дакар", "Симбирский тракт" и др.</h4>
|
||||||
|
<h4 class="mt-4">Обучение экстримальному вождению добавит вам уверенности при езде не только по грунтовым дорогам, но и по асфальту,
|
||||||
|
а также в условиях снега, дождя и при других экстримальных ситуациях. Помните, что ваша безопасность на дороге зависит от ваших навыков вождения!</h4>
|
||||||
|
</div>
|
||||||
|
<!--Главныей раздел-->
|
||||||
|
<!--Подвал-->
|
||||||
|
<footer class="position-sticky top-100 footer-style">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm text-center text-sm-start text-light fw-bold fs-5">
|
||||||
|
Техническая поддержка <br>
|
||||||
|
8-800-555-3535 <br>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
<div class="col-sm text-center text-sm-end text-light fw-bold fs-5">
|
||||||
|
Работаем без выходных с 8:00 до 21:30
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!--Подвал-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
Lab3/javascript.svg
Normal file
1
Lab3/javascript.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
|
||||||
|
After Width: | Height: | Size: 995 B |
59
Lab3/js/lines-modal.js
Normal file
59
Lab3/js/lines-modal.js
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
// Модуль для работы с модальным окном
|
||||||
|
|
||||||
|
// импорт компонента Modal из bootstrap
|
||||||
|
import { Modal } from "bootstrap";
|
||||||
|
import { cntrls, imagePlaceholder } from "./lines-ui";
|
||||||
|
|
||||||
|
// поиск модального окна на странице
|
||||||
|
const modal = document.getElementById("items-update");
|
||||||
|
// если он найден, то создается экземпляр компонента Modal
|
||||||
|
// для программного управления модальным окном
|
||||||
|
const myModal = modal ? new Modal(modal, {}) : null;
|
||||||
|
|
||||||
|
// поиск тега с заголовком модального кона для его смены
|
||||||
|
const modalTitle = document.getElementById("items-update-title");
|
||||||
|
|
||||||
|
// обнуление значений модального окна, т. к.
|
||||||
|
// используется одно окно для всех операций
|
||||||
|
function resetValues() {
|
||||||
|
cntrls.lineId.value = "";
|
||||||
|
cntrls.itemsType.value = "";
|
||||||
|
cntrls.price.value = parseFloat(0).toFixed(2);
|
||||||
|
cntrls.count.value = 0;
|
||||||
|
cntrls.image.value = "";
|
||||||
|
cntrls.imagePreview.src = imagePlaceholder;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция для показа модального окна
|
||||||
|
// перед показом происходит заполнение формы для редактирования
|
||||||
|
// если объект item не пуст
|
||||||
|
export function showUpdateModal(item) {
|
||||||
|
modalTitle.innerHTML = item === null ? "Добавить" : "Изменить";
|
||||||
|
console.info(item);
|
||||||
|
|
||||||
|
if (item) {
|
||||||
|
cntrls.lineId.value = item.id;
|
||||||
|
cntrls.itemsType.value = item.itemsId;
|
||||||
|
cntrls.price.value = item.price;
|
||||||
|
cntrls.count.value = item.count;
|
||||||
|
// заполнение превью
|
||||||
|
// Если пользователь выбрал изображение, то оно загружается
|
||||||
|
// в тэг image с id image - preview
|
||||||
|
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
||||||
|
cntrls.imagePreview.src = item.image ? item.image : imagePlaceholder;
|
||||||
|
} else {
|
||||||
|
resetValues();
|
||||||
|
}
|
||||||
|
|
||||||
|
myModal.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция для скрытия модального окна
|
||||||
|
export function hideUpdateModal() {
|
||||||
|
resetValues();
|
||||||
|
|
||||||
|
// удаление класса was-validated для скрытия результатов валидации
|
||||||
|
cntrls.form.classList.remove("was-validated");
|
||||||
|
|
||||||
|
myModal.hide();
|
||||||
|
}
|
||||||
101
Lab3/js/lines-rest-api.js
Normal file
101
Lab3/js/lines-rest-api.js
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
// модуль для работы с REST API сервера
|
||||||
|
|
||||||
|
// адрес сервера
|
||||||
|
const serverUrl = "http://localhost:8081";
|
||||||
|
|
||||||
|
// функция возвращает объект нужной структуры для отправки на сервер
|
||||||
|
function createLineObject(item, price, count, image, basePrice) {
|
||||||
|
return {
|
||||||
|
itemsId: item,
|
||||||
|
price: parseFloat(price).toFixed(2),
|
||||||
|
count,
|
||||||
|
sum: parseFloat(price * count).toFixed(2),
|
||||||
|
benefit: parseFloat((basePrice-price)*count).toFixed(2),
|
||||||
|
image,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для получения всех типов товара (get)
|
||||||
|
export async function getAllItemTypes() {
|
||||||
|
const response = await fetch(`${serverUrl}/items`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для получения всех записей (get)
|
||||||
|
export async function getAllLines() {
|
||||||
|
const response = await fetch(`${serverUrl}/lines?_expand=items`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для получения записи по первичному ключу (id) (get)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function getLine(id) {
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}?_expand=items`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для создания записи (post)
|
||||||
|
// объект отправляется в теле запроса (body)
|
||||||
|
export async function createLine(item, price, count, image, basePrice) {
|
||||||
|
const itemObject = createLineObject(item, price, count, image, basePrice);
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(itemObject),
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json",
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для обновления записи по id (put)
|
||||||
|
// объект отправляется в теле запроса (body)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function updateLine(id, item, price, count, image, basePrice) {
|
||||||
|
const itemObject = createLineObject(item, price, count, image, basePrice);
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
method: "PUT",
|
||||||
|
body: JSON.stringify(itemObject),
|
||||||
|
headers: {
|
||||||
|
"Accept": "application/json",
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// обращение к серверу для удаления записи по id (delete)
|
||||||
|
// id передается в качестве части пути URL get-запроса
|
||||||
|
export async function deleteLine(id) {
|
||||||
|
const options = {
|
||||||
|
method: "DELETE",
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}`, options);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
102
Lab3/js/lines-ui.js
Normal file
102
Lab3/js/lines-ui.js
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
// модуль для работы с элементами управления
|
||||||
|
|
||||||
|
// объект для удобного получения элементов
|
||||||
|
// при обращении к атрибуту объекта вызывается
|
||||||
|
// нужная функция для поиска элемента
|
||||||
|
export const cntrls = {
|
||||||
|
table: document.querySelector("#items-table tbody"),
|
||||||
|
form: document.getElementById("items-form"),
|
||||||
|
lineId: document.getElementById("items-line-id"),
|
||||||
|
itemsType: document.getElementById("item"),
|
||||||
|
price: document.getElementById("price"),
|
||||||
|
count: document.getElementById("count"),
|
||||||
|
image: document.getElementById("image"),
|
||||||
|
imagePreview: document.getElementById("image-preview"),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Дефолтное превью
|
||||||
|
export const imagePlaceholder = "https://via.placeholder.com/200";
|
||||||
|
|
||||||
|
// функция создает тег option для select
|
||||||
|
// <option value="" selected>name</option>
|
||||||
|
export function createItemsOption(name, value = "", basePriceIn = "", isSelected = false) {
|
||||||
|
var basePrice = "";
|
||||||
|
if(basePriceIn != "")
|
||||||
|
basePrice = basePriceIn + " рублей";
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.value = value || "";
|
||||||
|
option.selected = isSelected;
|
||||||
|
option.text = name + " " + basePrice;
|
||||||
|
option.setAttribute('basePrice', basePriceIn);
|
||||||
|
return option;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создает ссылку (a) для таблицы
|
||||||
|
// содержимое тега a заполняется необходимой иконкой (icon)
|
||||||
|
// при нажатии вызывается callback
|
||||||
|
// ссылка "оборачивается" тегом td
|
||||||
|
// <td><a href="#" onclick="callback()"><i class="fa-solid icon"></i></a></td>
|
||||||
|
function createTableAnchor(icon, callback) {
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src = "./img/" + icon + ".png";
|
||||||
|
img.height = 20;
|
||||||
|
img.alt = "img";
|
||||||
|
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = "#";
|
||||||
|
a.appendChild(img);
|
||||||
|
a.onclick = (event) => {
|
||||||
|
// чтобы в URL не добавлялась решетка
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
callback();
|
||||||
|
};
|
||||||
|
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.setAttribute('class', 'align-middle text-center');
|
||||||
|
td.appendChild(a);
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создает колонку таблицы с текстом value
|
||||||
|
// <td>value</td>
|
||||||
|
function createTableColumn(value) {
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.setAttribute('class', 'align-middle text-center');
|
||||||
|
td.textContent = value;
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция создает строку таблицы
|
||||||
|
// <tr>
|
||||||
|
// <th scope="row">index + 1</th>
|
||||||
|
// <td>item.items.name</td>
|
||||||
|
// <td>parseFloat(item.price).toFixed(2))</td>
|
||||||
|
// <td>item.count</td>
|
||||||
|
// <td>parseFloat(item.sum).toFixed(2))</td>
|
||||||
|
// <td><a href="#" onclick="editCallback()"><i class="fa-solid fa-pencil"></i></a></td>
|
||||||
|
// <td><a href="#" onclick="editPageCallback()"><i class="fa-solid fa-pen-to-square"></i></a></td>
|
||||||
|
// <td><a href="#" onclick="deleteCallback()"><i class="fa-solid fa-trash"></i></a></td>
|
||||||
|
// </tr>
|
||||||
|
export function createTableRow(item, index, editPageCallback, deleteCallback) {
|
||||||
|
const rowNumber = document.createElement("th");
|
||||||
|
rowNumber.scope = "row";
|
||||||
|
rowNumber.textContent = index + 1;
|
||||||
|
rowNumber.setAttribute('class', 'fw-bold align-middle text-center')
|
||||||
|
|
||||||
|
const row = document.createElement("tr");
|
||||||
|
row.id = `line-${item.id}`;
|
||||||
|
|
||||||
|
row.appendChild(rowNumber);
|
||||||
|
row.appendChild(createTableColumn(item.items.name ));
|
||||||
|
row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
|
||||||
|
row.appendChild(createTableColumn(item.count));
|
||||||
|
row.appendChild(createTableColumn(parseFloat(item.sum).toFixed(2)));
|
||||||
|
row.appendChild(createTableColumn(item.benefit));
|
||||||
|
|
||||||
|
// редактировать на странице page-edit
|
||||||
|
row.appendChild(createTableAnchor("pen-to-square", editPageCallback));
|
||||||
|
// удаление
|
||||||
|
row.appendChild(createTableAnchor("trash", deleteCallback));
|
||||||
|
return row;
|
||||||
|
}
|
||||||
233
Lab3/js/lines.js
Normal file
233
Lab3/js/lines.js
Normal file
@ -0,0 +1,233 @@
|
|||||||
|
// модуль с логикой
|
||||||
|
|
||||||
|
import {
|
||||||
|
createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
|
||||||
|
} from "./lines-rest-api";
|
||||||
|
import {
|
||||||
|
cntrls, createItemsOption, createTableRow, imagePlaceholder,
|
||||||
|
} from "./lines-ui";
|
||||||
|
|
||||||
|
async function drawItemsSelect() {
|
||||||
|
// вызов метода REST API для получения списка типов товаров
|
||||||
|
const data = await getAllItemTypes();
|
||||||
|
// очистка содержимого select
|
||||||
|
// удаляется все, что находится между тегами <select></select>
|
||||||
|
// но не атрибуты
|
||||||
|
cntrls.itemsType.innerHTML = "";
|
||||||
|
// пустое значение
|
||||||
|
cntrls.itemsType.appendChild(createItemsOption("Выберите значение", "", "", true));
|
||||||
|
// цикл по результату ответа от сервера
|
||||||
|
// используется лямбда-выражение
|
||||||
|
// (item) => {} аналогично function(item) {}
|
||||||
|
data.forEach((item) => {
|
||||||
|
cntrls.itemsType.appendChild(createItemsOption(item.name, item.id, item.basePrice));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function drawLinesTable() {
|
||||||
|
console.info("Try to load data");
|
||||||
|
if (!cntrls.table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// вызов метода REST API для получения всех записей
|
||||||
|
const data = await getAllLines();
|
||||||
|
// очистка содержимого table
|
||||||
|
// удаляется все, что находится между тегами <table></table>
|
||||||
|
// но не атрибуты
|
||||||
|
cntrls.table.innerHTML = "";
|
||||||
|
// цикл по результату ответа от сервера
|
||||||
|
// используется лямбда-выражение
|
||||||
|
// (item, index) => {} аналогично function(item, index) {}
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
cntrls.table.appendChild(
|
||||||
|
createTableRow(
|
||||||
|
item,
|
||||||
|
index,
|
||||||
|
// функции передаются в качестве параметра
|
||||||
|
// это очень удобно, так как аргументы функций доступны только
|
||||||
|
// в данном месте кода и не передаются в сервисные модули
|
||||||
|
() => location.assign(`page-edit.html?id=${item.id}`),
|
||||||
|
() => removeLine(item.id),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addLine(item, price, count, image, basePrice) {
|
||||||
|
console.info("Try to add item");
|
||||||
|
// вызов метода REST API для добавления записи
|
||||||
|
const data = await createLine(item, price, count, image, basePrice);
|
||||||
|
console.info("Added");
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function editLine(id, item, price, count, image, basePrice) {
|
||||||
|
console.info("Try to update item");
|
||||||
|
// вызов метода REST API для обновления записи
|
||||||
|
const data = await updateLine(id, item, price, count, image, basePrice);
|
||||||
|
console.info("Updated");
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function removeLine(id) {
|
||||||
|
if (!confirm("Do you really want to remove this item?")) {
|
||||||
|
console.info("Canceled");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.info("Try to remove item");
|
||||||
|
// вызов метода REST API для удаления записи
|
||||||
|
const data = await deleteLine(id);
|
||||||
|
console.info(data);
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция для получения содержимого файла в виде base64 строки
|
||||||
|
// https://ru.wikipedia.org/wiki/Base64
|
||||||
|
async function readFile(file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
// создание Promise-объекта для использования функции
|
||||||
|
// с помощью await (асинхронно) без коллбэков (callback)
|
||||||
|
// https://learn.javascript.ru/promise
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// 2. "Возвращаем" содержимое когда файл прочитан
|
||||||
|
// через вызов resolve
|
||||||
|
// Если не использовать Promise, то всю работу по взаимодействию
|
||||||
|
// с REST API пришлось бы делать в обработчике (callback) функции
|
||||||
|
// onloadend
|
||||||
|
reader.onloadend = () => {
|
||||||
|
const fileContent = reader.result;
|
||||||
|
// Здесь могла бы быть работа с REST API
|
||||||
|
// Чтение заканчивает выполняться здесь
|
||||||
|
resolve(fileContent);
|
||||||
|
};
|
||||||
|
// 3. Возвращаем ошибку
|
||||||
|
reader.onerror = () => {
|
||||||
|
// Или здесь в случае ошибки
|
||||||
|
reject(new Error("oops, something went wrong with the file reader."));
|
||||||
|
};
|
||||||
|
// Шаг 1. Сначала читаем файл
|
||||||
|
// Чтение начинает выполняться здесь
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// функция для обновления блока с превью выбранного изображения
|
||||||
|
async function updateImagePreview() {
|
||||||
|
// получение выбранного файла
|
||||||
|
// возможен выбор нескольких файлов, поэтому необходимо получить только первый
|
||||||
|
const file = cntrls.image.files[0];
|
||||||
|
// чтение содержимого файла в виде base64 строки
|
||||||
|
const fileContent = await readFile(file);
|
||||||
|
console.info("base64 ", fileContent);
|
||||||
|
// обновление атрибута src для тега img с id image-preview
|
||||||
|
cntrls.imagePreview.src = fileContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
|
||||||
|
// Если хотите делать через модальное окно, то удалите эту функцию
|
||||||
|
export async function linesPageForm() {
|
||||||
|
console.info("linesPageForm");
|
||||||
|
|
||||||
|
// загрузка и заполнение select со списком товаров
|
||||||
|
drawItemsSelect();
|
||||||
|
// загрузка и заполнение table
|
||||||
|
drawLinesTable();
|
||||||
|
|
||||||
|
// func1 = (id) => {} аналогично function func1(id) {}
|
||||||
|
const goBack = () => location.assign("./Admin.html");
|
||||||
|
|
||||||
|
// Вызов функции обновления превью изображения при возникновении
|
||||||
|
// события onchange в тэге input с id image
|
||||||
|
cntrls.image.addEventListener("change", () => updateImagePreview());
|
||||||
|
cntrls.itemsType.addEventListener("change", () => cntrls.price.value = parseInt(cntrls.itemsType.options[cntrls.itemsType.selectedIndex].getAttribute('basePrice')))
|
||||||
|
|
||||||
|
// получение параметров GET-запроса из URL
|
||||||
|
// параметры перечислены после символа ? (?id=1&color=black&...)
|
||||||
|
const urlParams = new URLSearchParams(location.search);
|
||||||
|
|
||||||
|
// получение значения конкретного параметра (id)
|
||||||
|
// указан только при редактировании
|
||||||
|
const currentId = urlParams.get("id");
|
||||||
|
// если id задан
|
||||||
|
if (currentId) {
|
||||||
|
try {
|
||||||
|
// вызов метода REST API для получения записи по первичному ключу(id)
|
||||||
|
const line = await getLine(currentId);
|
||||||
|
// заполнение формы для редактирования
|
||||||
|
cntrls.itemsType.value = line.itemsId;
|
||||||
|
cntrls.price.value = line.price;
|
||||||
|
cntrls.count.value = line.count;
|
||||||
|
// заполнение превью
|
||||||
|
// Если пользователь выбрал изображение, то оно загружается
|
||||||
|
// в тэг image с id image - preview
|
||||||
|
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
||||||
|
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
||||||
|
} catch {
|
||||||
|
// в случае ошибки происходит возврат к page4
|
||||||
|
goBack();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// обработчик события отправки формы
|
||||||
|
// возникает при нажатии на кнопку (button) с типом submit
|
||||||
|
// кнопка должна находится внутри тега form
|
||||||
|
cntrls.form.addEventListener("submit", async (event) => {
|
||||||
|
console.info("Form onSubmit");
|
||||||
|
// отключение стандартного поведения формы при отправке
|
||||||
|
// при отправке страница обновляется и JS перестает работать
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
// если форма не прошла валидацию, то ничего делать не нужно
|
||||||
|
if (!cntrls.form.checkValidity()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let imageBase64 = "";
|
||||||
|
// Получение выбранного пользователем изображения в виде base64 строки
|
||||||
|
// Если пользователь ничего не выбрал, то не нужно сохранять в БД
|
||||||
|
// дефолтное изображение
|
||||||
|
if (cntrls.imagePreview.src !== imagePlaceholder) {
|
||||||
|
// Загрузка содержимого атрибута src тэга img с id image-preview
|
||||||
|
// Здесь выполняется HTTP запрос с типом GET
|
||||||
|
const result = await fetch(cntrls.imagePreview.src);
|
||||||
|
// Получение из HTTP-ответа бинарного содержимого
|
||||||
|
const blob = await result.blob();
|
||||||
|
// Получение base64 строки для файла
|
||||||
|
// Здесь выполняется Promise из функции readFile
|
||||||
|
// Promise позволяет писать линейный код для работы с асинхронными методами
|
||||||
|
// без использования обработчиков (callback) с помощью await
|
||||||
|
imageBase64 = await readFile(blob);
|
||||||
|
}
|
||||||
|
|
||||||
|
// если значение параметра запроса не задано,
|
||||||
|
// то необходимо выполнить добавление записи
|
||||||
|
// иначе обновление записи
|
||||||
|
if (!currentId) {
|
||||||
|
await addLine(
|
||||||
|
cntrls.itemsType.value,
|
||||||
|
cntrls.price.value,
|
||||||
|
cntrls.count.value,
|
||||||
|
imageBase64,
|
||||||
|
parseInt(cntrls.itemsType.options[cntrls.itemsType.selectedIndex].getAttribute('basePrice')),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
await editLine(
|
||||||
|
currentId,
|
||||||
|
cntrls.itemsType.value,
|
||||||
|
cntrls.price.value,
|
||||||
|
cntrls.count.value,
|
||||||
|
imageBase64,
|
||||||
|
parseInt(cntrls.itemsType.options[cntrls.itemsType.selectedIndex].getAttribute('basePrice')),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// возврат к странице page4
|
||||||
|
goBack();
|
||||||
|
});
|
||||||
|
}
|
||||||
25
Lab3/js/validation.js
Normal file
25
Lab3/js/validation.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
// модуль используется для валидации форма на странице
|
||||||
|
|
||||||
|
function validation() {
|
||||||
|
// поиск всех форма с классом .needs-validation
|
||||||
|
const forms = document.querySelectorAll("form.needs-validation");
|
||||||
|
|
||||||
|
for (let i = 0; i < forms.length; i += 1) {
|
||||||
|
const form = forms[i];
|
||||||
|
// для каждой формы добавляется обработчик события отправки
|
||||||
|
form.addEventListener("submit", (event) => {
|
||||||
|
// если форма не прошла валидацию
|
||||||
|
// то выключить стандартное действие
|
||||||
|
if (!form.checkValidity()) {
|
||||||
|
event.preventDefault();
|
||||||
|
// предотвращает распространение preventDefault
|
||||||
|
// на другие объекты
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
// добавляет к форме класс was-validated
|
||||||
|
form.classList.add("was-validated");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default validation;
|
||||||
24
Lab3/main.js
Normal file
24
Lab3/main.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import './style.css'
|
||||||
|
import javascriptLogo from './javascript.svg'
|
||||||
|
import viteLogo from '/vite.svg'
|
||||||
|
import { setupCounter } from './counter.js'
|
||||||
|
|
||||||
|
document.querySelector('#app').innerHTML = `
|
||||||
|
<div>
|
||||||
|
<a href="https://vitejs.dev" target="_blank">
|
||||||
|
<img src="${viteLogo}" class="logo" alt="Vite logo" />
|
||||||
|
</a>
|
||||||
|
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
|
||||||
|
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
|
||||||
|
</a>
|
||||||
|
<h1>Hello Vite!</h1>
|
||||||
|
<div class="card">
|
||||||
|
<button id="counter" type="button"></button>
|
||||||
|
</div>
|
||||||
|
<p class="read-the-docs">
|
||||||
|
Click on the Vite logo to learn more
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
|
||||||
|
setupCounter(document.querySelector('#counter'))
|
||||||
78
Lab3/myStyle.css
Normal file
78
Lab3/myStyle.css
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
.pageBackground{
|
||||||
|
background-image: url('img/MainBackGround.jpg') !important;
|
||||||
|
background-attachment: fixed !important;
|
||||||
|
height: auto !important; min-height: 100vh !important;
|
||||||
|
}
|
||||||
|
.navbar-style{
|
||||||
|
background-color: rgba(249,134,23,0.8) !important;
|
||||||
|
border-bottom: 7px solid #7c2d00 !important;
|
||||||
|
}
|
||||||
|
.footer-style{
|
||||||
|
background-color: rgba(249,134,23,0.8) !important;
|
||||||
|
border-top: 7px solid #7c2d00 !important;
|
||||||
|
}
|
||||||
|
.mainPageInf{
|
||||||
|
width: 70% !important;
|
||||||
|
min-width: 320px !important;
|
||||||
|
height: fit-content !important;
|
||||||
|
background-color: rgba(66,66,66,0.8) !important;
|
||||||
|
padding:2% !important;
|
||||||
|
border-radius: 20px !important;
|
||||||
|
}
|
||||||
|
.modal-dialog-style{
|
||||||
|
height: fit-content !important;
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
.modalStyle{
|
||||||
|
background-color: #9b9b9b !important;
|
||||||
|
border: 7px solid #424242 !important
|
||||||
|
}
|
||||||
|
.PictureButton{
|
||||||
|
height: 200px !important;
|
||||||
|
width: 300px !important;
|
||||||
|
}
|
||||||
|
.purple{
|
||||||
|
background-color: #8c00e2 !important;
|
||||||
|
}
|
||||||
|
.dark-grey{
|
||||||
|
background-color: #424242 !important;
|
||||||
|
}
|
||||||
|
.light-grey{
|
||||||
|
background-color: #d9d9d9 !important;
|
||||||
|
}
|
||||||
|
.formStyle{
|
||||||
|
background-color: rgba(155,155,155,0.8) !important;
|
||||||
|
border: 7px solid #424242 !important
|
||||||
|
}
|
||||||
|
.formSizeStyle{
|
||||||
|
width: 70% !important;
|
||||||
|
min-width: 320px!important;
|
||||||
|
}
|
||||||
|
.accauntPanel{
|
||||||
|
height: 100px !important;
|
||||||
|
width: 290px !important;
|
||||||
|
}
|
||||||
|
.wfitcon{
|
||||||
|
width: fit-content !important;
|
||||||
|
}
|
||||||
|
.hfitcon{
|
||||||
|
height: fit-content !important;
|
||||||
|
}
|
||||||
|
.minH-500{
|
||||||
|
min-height: 500px !important;
|
||||||
|
}
|
||||||
|
.minW-160{
|
||||||
|
min-width: 160px !important;
|
||||||
|
}
|
||||||
|
.width-100{
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.height-200{
|
||||||
|
height: 200px !important;
|
||||||
|
}
|
||||||
|
.height-300{
|
||||||
|
height: 300px !important;
|
||||||
|
}
|
||||||
|
.height-500{
|
||||||
|
height: 500px !important;
|
||||||
|
}
|
||||||
4627
Lab3/package-lock.json
generated
Normal file
4627
Lab3/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
Lab3/package.json
Normal file
26
Lab3/package.json
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "web-site-vite",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"vite": "vite",
|
||||||
|
"serve": "http-server -p 3000 ./dist/",
|
||||||
|
"build": "vite build",
|
||||||
|
"rest": "json-server --watch data.json -p 8081",
|
||||||
|
"dev": "npm-run-all --parallel rest vite",
|
||||||
|
"prod": "npm-run-all build --parallel serve rest"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "5.2.1",
|
||||||
|
"@fortawesome/fontawesome-free": "6.4.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"vite": "4.4.9",
|
||||||
|
"eslint": "8.50.0",
|
||||||
|
"eslint-config-airbnb-base": "15.0.0",
|
||||||
|
"eslint-plugin-import": "2.28.1",
|
||||||
|
"http-server": "14.1.1",
|
||||||
|
"json-server": "0.17.4",
|
||||||
|
"npm-run-all": "4.1.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
103
Lab3/page-edit.html
Normal file
103
Lab3/page-edit.html
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Page-edit</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<!-- My css -->
|
||||||
|
<link rel="stylesheet" href="./myStyle.css">
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" >
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css_mdb/mdb.min.css" />
|
||||||
|
<!-- Bootstrap JS -->
|
||||||
|
<script defer src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-image overflow-visible pageBackground">
|
||||||
|
<!--Шапка-->
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-light navbar-style">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand btn btn-outline-dark" href="./index.html" >
|
||||||
|
<img src="./img/lable.png" alt="Logo" height="60" class="align-text-top">
|
||||||
|
</a>
|
||||||
|
<button class="navbar-toggler " type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<img src="./img/togglerIcon.png" alt="Toggler" height="40">
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./index.html">Главная</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item ">
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Galery.html" >Галерея</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Courses.html">Курсы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Contacts.html" >Контакты</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Reviews.html" >Отзывы</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item " >
|
||||||
|
<a class="nav-link me-3 ms-3 fs-4 fw-bold" href="./Admin.html" >Админ</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main class="container-fluid p-2 formStyle formSizeStyle rounded-8 my-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<img id="image-preview" src="https://via.placeholder.com/200" class="rounded-8 height-200"
|
||||||
|
alt="placeholder">
|
||||||
|
</div>
|
||||||
|
<form id="items-form" class="needs-validation" novalidate>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label for="item" class="form-label">Курсы</label>
|
||||||
|
<select id="item" class="form-select light-grey rounded-8" name="selected" required>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="price">Цена за занятие</label>
|
||||||
|
<input id="price" name="price" class="form-control light-grey rounded-8" type="number" value="0.00" min="1000.00" step="0.50"
|
||||||
|
required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="count">Количество занятий</label>
|
||||||
|
<input id="count" name="count" class="form-control light-grey rounded-8" type="number" value="0" min="1" step="1" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="image">Изображение</label>
|
||||||
|
<input id="image" type="file" name="image" class="form-control light-grey rounded-8" accept="image/*">
|
||||||
|
</div>
|
||||||
|
<a href="./Admin.html" class="btn dark-grey text-light rounded-pill">Назад</a>
|
||||||
|
<button type="submit" class="btn purple text-light rounded-pill">Сохранить</button>
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!--Подвал-->
|
||||||
|
<footer class="position-sticky top-100 footer-style">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm text-center text-sm-start text-light fw-bold fs-5">
|
||||||
|
Техническая поддержка <br>
|
||||||
|
8-800-555-3535 <br>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
<div class="col-sm text-center text-sm-end text-light fw-bold fs-5">
|
||||||
|
Работаем без выходных с 8:00 до 21:30
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<!--Подвал-->
|
||||||
|
<script type="module">
|
||||||
|
import validation from "./js/validation";
|
||||||
|
import { linesPageForm } from "./js/lines"
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
validation();
|
||||||
|
linesPageForm();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
Lab3/public/vite.svg
Normal file
1
Lab3/public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
97
Lab3/style.css
Normal file
97
Lab3/style.css
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 6em;
|
||||||
|
padding: 1.5em;
|
||||||
|
will-change: filter;
|
||||||
|
transition: filter 300ms;
|
||||||
|
}
|
||||||
|
.logo:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #646cffaa);
|
||||||
|
}
|
||||||
|
.logo.vanilla:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-the-docs {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user