LabWork_03
This commit is contained in:
parent
a2d8f3f82e
commit
2ee3be61bc
21
LabWork_03/.eslintrc.json
Normal file
21
LabWork_03/.eslintrc.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": "airbnb-base",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 12,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"quotes": "off",
|
||||
"indent": "off",
|
||||
"no-console": "off",
|
||||
"no-use-before-define": "off",
|
||||
"no-alert": "off",
|
||||
"no-restricted-globals": "off",
|
||||
"quote-props": "off",
|
||||
"linebreak-style": 0
|
||||
}
|
||||
}
|
||||
24
LabWork_03/.gitignore
vendored
Normal file
24
LabWork_03/.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?
|
||||
BIN
LabWork_03/Report.docx
Normal file
BIN
LabWork_03/Report.docx
Normal file
Binary file not shown.
92
LabWork_03/about_us.html
Normal file
92
LabWork_03/about_us.html
Normal file
@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="src/css/style.css">
|
||||
<link rel="favicon" href="public/favicon/favicon.ico">
|
||||
<title>Bookshelf</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header class="header">
|
||||
<div class="header__container _container">
|
||||
<div class="header__logo logo">
|
||||
<div class="logo__img">
|
||||
<img src="public/images/logo.png" alt="logo.png">
|
||||
</div>
|
||||
<div class="logo__nametag">
|
||||
<div class="nametag__title">Bookshelf</div>
|
||||
<div class="nametag__subtitle">Online-library</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="header__nav nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="index.html" class="nav__link">Home</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="armor.html" class="nav__link">Armor</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Tools</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Sword</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Bow</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Trident</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="account">
|
||||
<div class="account__img">
|
||||
<img src="public/images/avatar.png" alt="avatar.png">
|
||||
</div>
|
||||
<a class="account__link" href="account.html">My account</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main_about">
|
||||
<div class="main__container _container">
|
||||
<div class="main__about">
|
||||
<p class="main__about_info">
|
||||
Welcome to our online library! We are a team of enthusiasts who are committed to making reading accessible to all. We know how important enchantment books are for Minecraft, but due to the variety of types of enchantments and the vastness of their application, even experienced players cannot intelligently choose the enchantments they need.<br>
|
||||
Our goal is to make the possibility of enchanting accessible and convenient for everyone, and our book selector can help you with that. Go to the desired section and select the books you need - that's all you need to do!<br>
|
||||
Our app is the only one of its kind. All ideas are patented and copyrighted. Any borrowing or use of materials from our labor must be negotiated with our managers, otherwise a lawsuit will follow in your side.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__container _container">
|
||||
<nav class="footer__nav nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="about_us.html" class="nav__link">About us</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="contact_us.html" class="nav__link">Contact us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer__privacy">
|
||||
© made by Factorino. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
131
LabWork_03/account.html
Normal file
131
LabWork_03/account.html
Normal file
@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap"
|
||||
rel="stylesheet" />
|
||||
<link rel="stylesheet" href="src/css/style.css">
|
||||
<link rel="favicon" href="public/favicon/favicon.ico">
|
||||
<title>Bookshelf</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header class="header">
|
||||
<div class="header__container _container">
|
||||
<div class="header__logo logo">
|
||||
<div class="logo__img">
|
||||
<img src="public/images/logo.png" alt="logo.png">
|
||||
</div>
|
||||
<div class="logo__nametag">
|
||||
<div class="nametag__title">Bookshelf</div>
|
||||
<div class="nametag__subtitle">Online-library</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="header__nav nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="index.html" class="nav__link">Home</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="armor.html" class="nav__link">Armor</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Tools</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Sword</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Bow</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Trident</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="account">
|
||||
<div class="account__img">
|
||||
<img src="public/images/avatar.png" alt="avatar.png">
|
||||
</div>
|
||||
<a class="account__link" href="account.html">My account</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="main__container _container">
|
||||
<form class="main__form form needs-validation" novalidate>
|
||||
<h2 class="form__title">Sign in</h2>
|
||||
<h3 class="form__subtitle">in to your account</h3>
|
||||
<div class="form__fields fields">
|
||||
<input class="fields__number form-control" type="number" placeholder="Enter your phone number" name="number" id="number" required>
|
||||
<input class="fields__password form-control" type="password" placeholder="Enter your password" name="password" id="password" required>
|
||||
<input class="fields__password_repeat form-control" type="password" placeholder="Repeat your password" name="password_repeat" id="password_repeat" required>
|
||||
<button class="fields__submit" type="submit" id="submit">Sign up</button>
|
||||
<div class="form__warning">By clicking on the “Sign up” button, you agree to the<br/>processing of personal data</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="main__cart cart">
|
||||
<table class="cart__table" id="items-table">
|
||||
<thead class="cart__row_header">
|
||||
<tr class="cart__row_header">
|
||||
<th scope="col" class="cart__column">Name</th>
|
||||
<th scope="col" class="cart__column">Price</th>
|
||||
<th scope="col" class="cart__column">Amount</th>
|
||||
<th scope="col" class="cart__column">Total</th>
|
||||
<th scope="col" class="cart__column">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="cart__products">
|
||||
<tr class="cart__row" id="line-1">
|
||||
<td class="cart__column">Protection 3</td>
|
||||
<td class="cart__column">150.00</td>
|
||||
<td class="cart__column">2</td>
|
||||
<td class="cart__column">300.00</td>
|
||||
<td class="cart__column">
|
||||
<a href="#"><i class="fa-solid-icon"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__container _container">
|
||||
<nav class="footer__nav nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="about_us.html" class="nav__link">About us</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="contact_us.html" class="nav__link">Contact us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer__privacy">
|
||||
© made by Factorino. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import validation from "./src/js/validation";
|
||||
import linesPageForm from "./src/js/lines";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
linesPageForm();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
189
LabWork_03/armor.html
Normal file
189
LabWork_03/armor.html
Normal file
@ -0,0 +1,189 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="src/css/style.css">
|
||||
<link rel="favicon" href="public/favicon/favicon.ico">
|
||||
<title>Bookshelf</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header class="header">
|
||||
<div class="header__container _container">
|
||||
<div class="header__logo logo">
|
||||
<div class="logo__img">
|
||||
<img src="public/images/logo.png" alt="logo.png">
|
||||
</div>
|
||||
<div class="logo__nametag">
|
||||
<div class="nametag__title">Bookshelf</div>
|
||||
<div class="nametag__subtitle">Online-library</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="header__nav nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="index.html" class="nav__link">Home</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="armor.html" class="nav__link">Armor</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Tools</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Sword</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Bow</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Trident</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="account">
|
||||
<div class="account__img">
|
||||
<img src="public/images/avatar.png" alt="avatar.png">
|
||||
</div>
|
||||
<a class="account__link" href="account.html">My account</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main_armor">
|
||||
<div class="main__container _container">
|
||||
<div class="main__banner banner">
|
||||
<div class="banner__square1"></div>
|
||||
<div class="banner__square2">
|
||||
<div class="banner__img">
|
||||
<img src="public/images/armor.png" alt="armor.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main__table table">
|
||||
<div class="table__row">
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="protection" id="protection4">
|
||||
<label for="protection4" class="table__label">Protection 4</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="protection" id="protection3">
|
||||
<label for="protection3" class="table__label">Protection 3</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="protection" id="protection2">
|
||||
<label for="protection2" class="table__label">Protection 2</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="protection" id="protection1">
|
||||
<label for="protection1" class="table__label">Protection 1</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table__row">
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="unbreaking" id="unbreaking3">
|
||||
<label for="unbreaking3" class="table__label">Unbreaking 3</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="unbreaking" id="unbreaking2">
|
||||
<label for="unbreaking2" class="table__label">Unbreaking 2</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="unbreaking" id="unbreaking1">
|
||||
<label for="unbreaking1" class="table__label">Unbreaking 1</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table__row">
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="mending" id="mending">
|
||||
<label for="mending" class="table__label">Mending</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table__row">
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="thorns" id="thorns3">
|
||||
<label for="thorns3" class="table__label">Thorns 3</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="thorns" id="thorns2">
|
||||
<label for="thorns2" class="table__label">Thorns 2</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="thorns" id="thorns1">
|
||||
<label for="thorns1" class="table__label">Thorns 1</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table__row">
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="swift_sneak" id="swift_sneak2">
|
||||
<label for="swift_sneak2" class="table__label">Swift Sneak 2</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="swift_sneak" id="swift_sneak1">
|
||||
<label for="swift_sneak1" class="table__label">Swift Sneak 1</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table__row">
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="feather_falling" id="feather_falling4">
|
||||
<label for="feather_falling4" class="table__label">Feather Falling 4</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="feather_falling" id="feather_falling3">
|
||||
<label for="feather_falling3" class="table__label">Feather Falling 3</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="feather_falling" id="feather_falling2">
|
||||
<label for="feather_falling2" class="table__label">Feather Falling 2</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="feather_falling" id="feather_falling1">
|
||||
<label for="feather_falling1" class="table__label">Feather Falling 1</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table__row">
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="soul_speed" id="soul_speed3">
|
||||
<label for="soul_speed3" class="table__label">Soul Speed 3</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="soul_speed" id="soul_speed2">
|
||||
<label for="soul_speed2" class="table__label">Soul Speed 2</label>
|
||||
</div>
|
||||
<div class="table__cell">
|
||||
<input class="table__radio" type="radio" name="soul_speed" id="soul_speed1">
|
||||
<label for="soul_speed1" class="table__label">Soul Speed 1</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__container _container">
|
||||
<nav class="footer__nav nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="about_us.html" class="nav__link">About us</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="contact_us.html" class="nav__link">Contact us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer__privacy">
|
||||
© made by Factorino. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
154
LabWork_03/contact_us.html
Normal file
154
LabWork_03/contact_us.html
Normal file
@ -0,0 +1,154 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="src/css/style.css">
|
||||
<link rel="favicon" href="public/favicon/favicon.ico">
|
||||
<title>Bookshelf</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header class="header">
|
||||
<div class="header__container _container">
|
||||
<div class="header__logo logo">
|
||||
<div class="logo__img">
|
||||
<img src="public/images/logo.png" alt="logo.png">
|
||||
</div>
|
||||
<div class="logo__nametag">
|
||||
<div class="nametag__title">Bookshelf</div>
|
||||
<div class="nametag__subtitle">Online-library</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="header__nav nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="index.html" class="nav__link">Home</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="armor.html" class="nav__link">Armor</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Tools</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Sword</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Bow</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Trident</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="account">
|
||||
<div class="account__img">
|
||||
<img src="public/images/avatar.png" alt="avatar.png">
|
||||
</div>
|
||||
<a class="account__link" href="account.html">My account</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main_contact">
|
||||
<div class="main__container _container">
|
||||
<form class="main__form form needs-validation" action="contact_us.html" method="get" novalidate>
|
||||
<h2 class="form__header">Contact us</h2>
|
||||
<div class="form__fields fields">
|
||||
<input class="fields__name form-control" type="text" placeholder="Enter your name" name="name" id="name" required>
|
||||
<input class="fields__email form-control" type="email" placeholder="Enter your valid email" name="email" id="email" required>
|
||||
<input class="fields__message" type="text" placeholder="Enter your message" name="message" id="message" required>
|
||||
<input class="fields__submit" type="submit" value="Send message" id="submit">
|
||||
</div>
|
||||
</form>
|
||||
<div class="main__info info_table">
|
||||
<div class="info_table__row">
|
||||
<div class="info_table__column">
|
||||
<div class="info_table__banner banner">
|
||||
<div class="banner__square1"></div>
|
||||
<div class="banner__square2">
|
||||
<div class="banner__contacts">
|
||||
<h2 class="banner__header">Our main office</h2>
|
||||
<div class="banner__info">SoHo 94<br/> Broadway St New York,<br/> NY 1001</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info_table__column">
|
||||
<div class="info_table__banner banner">
|
||||
<div class="banner__square1"></div>
|
||||
<div class="banner__square2">
|
||||
<div class="banner__contacts">
|
||||
<h2 class="banner__header">Phone number</h2>
|
||||
<div class="banner__info">234-9876-5400</div>
|
||||
<div class="banner__info">+7 (902) 589-29-14</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info_table__row">
|
||||
<div class="info_table__column">
|
||||
<div class="info_table__banner banner">
|
||||
<div class="banner__square1"></div>
|
||||
<div class="banner__square2">
|
||||
<div class="banner__contacts">
|
||||
<h2 class="banner__header">FAX</h2>
|
||||
<div class="banner__info">1-234-567-8900</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info_table__column">
|
||||
<div class="info_table__banner banner">
|
||||
<div class="banner__square1"></div>
|
||||
<div class="banner__square2">
|
||||
<div class="banner__contacts">
|
||||
<h2 class="banner__header">EMAIL</h2>
|
||||
<div class="banner__info">masenkin73@gmail.com</div>
|
||||
<div class="banner__info">masenkin73@xmail.ru</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__container _container">
|
||||
<nav class="footer__nav nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="about_us.html" class="nav__link">About us</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="contact_us.html" class="nav__link">Contact us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer__privacy">
|
||||
© made by Factorino. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import validation from "./src/js/validation";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
20
LabWork_03/css/about_us.css
Normal file
20
LabWork_03/css/about_us.css
Normal file
@ -0,0 +1,20 @@
|
||||
/* Main */
|
||||
.main__container {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Info */
|
||||
.main__about {
|
||||
max-width: 1395px;
|
||||
margin-top: 90px;
|
||||
background-color: #2c2a2a;
|
||||
border-radius: 70px;
|
||||
border: solid 5px;
|
||||
border-color: #a721fa;
|
||||
}
|
||||
.main__info {
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
padding: 77px 44px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
122
LabWork_03/css/account.css
Normal file
122
LabWork_03/css/account.css
Normal file
@ -0,0 +1,122 @@
|
||||
/* Main */
|
||||
.main__container {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.form {
|
||||
height: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 90px;
|
||||
border: solid 5px;
|
||||
border-radius: 70px;
|
||||
border-color: #a721fa;
|
||||
color: #fff;
|
||||
background-color: #2c2a2a;
|
||||
}
|
||||
.form__title {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.form__subtitle {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 60px 84px 60px 84px;
|
||||
gap: 20px;
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
.fields {
|
||||
margin: 60px 70px 60px 70px;
|
||||
}
|
||||
}
|
||||
.fields__nubmer {
|
||||
height: 50px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.fields__password {
|
||||
height: 50px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.fields__password_repeat {
|
||||
height: 50px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.fields__submit {
|
||||
height: 50px;
|
||||
margin-top: 10px;
|
||||
border-radius: 30px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background-color: #a721fa;
|
||||
}
|
||||
.form__warning {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Cart */
|
||||
.cart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 90px;
|
||||
padding: 30px 30px;
|
||||
gap: 10px;
|
||||
border: solid 5px;
|
||||
border-radius: 70px;
|
||||
border-color: #a721fa;
|
||||
color: #fff;
|
||||
background-color: #2c2a2a;
|
||||
}
|
||||
.cart__row_header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.cart__column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
.cart__row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
border-radius: 30px;
|
||||
background-color: #363434;
|
||||
}
|
||||
.cart__button_decrement {
|
||||
color: #fff;
|
||||
}
|
||||
.cart__amount {
|
||||
-moz-appearance: textfield;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-color: #363434;
|
||||
}
|
||||
.cart__button_increment {
|
||||
color: #fff;
|
||||
}
|
||||
.cart__button_close {
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
}
|
||||
73
LabWork_03/css/armor.css
Normal file
73
LabWork_03/css/armor.css
Normal file
@ -0,0 +1,73 @@
|
||||
/* Main */
|
||||
.main__container {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.main__container {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Image */
|
||||
.banner__square1 {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.banner__square2 {
|
||||
margin-left: 50px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.banner__img {
|
||||
max-width: 219px;
|
||||
max-height: 436px;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
.banner__img {
|
||||
max-width: 119px;
|
||||
max-height: 346px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 90px;
|
||||
margin-left: 160px;
|
||||
gap: 20px;
|
||||
padding: 60px 60px;
|
||||
border: solid 5px;
|
||||
border-radius: 70px;
|
||||
border-color: #a721fa;
|
||||
color: #fff;
|
||||
background-color: #2c2a2a;
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
.table {
|
||||
margin: 30px 30px;
|
||||
}
|
||||
}
|
||||
.table__row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
border-radius: 30px;
|
||||
background-color: #363434;
|
||||
}
|
||||
.table__radio {
|
||||
display: none;
|
||||
}
|
||||
.table__radio:checked + .table__label {
|
||||
background-color: #a721fa;
|
||||
}
|
||||
.table__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 30px;
|
||||
background-color: #fff;
|
||||
}
|
||||
107
LabWork_03/css/contact_us.css
Normal file
107
LabWork_03/css/contact_us.css
Normal file
@ -0,0 +1,107 @@
|
||||
/* Main */
|
||||
.main__container {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
@media (max-width: 1250px) {
|
||||
.main__container {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 90px;
|
||||
border: solid 5px;
|
||||
border-radius: 70px;
|
||||
border-color: #a721fa;
|
||||
color: #fff;
|
||||
background-color: #2c2a2a;
|
||||
}
|
||||
.form__header {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 377px;
|
||||
margin: 60px 84px 60px 84px;
|
||||
gap: 20px;
|
||||
}
|
||||
@media (max-width: 570px) {
|
||||
.fields {
|
||||
width: 300px;
|
||||
margin: 60px 30px;
|
||||
}
|
||||
}
|
||||
.fields__name {
|
||||
height: 50px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.fields__email {
|
||||
height: 50px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.fields__message {
|
||||
height: 260px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.fields__submit {
|
||||
height: 50px;
|
||||
border-radius: 30px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background-color: #a721fa;
|
||||
}
|
||||
|
||||
/* Contact info */
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 90px;
|
||||
gap: 50px;
|
||||
}
|
||||
.info__row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 50px;
|
||||
}
|
||||
.banner {
|
||||
min-width: 295px;
|
||||
min-height: 295px;
|
||||
}
|
||||
.banner__square1 {
|
||||
min-width: 275px;
|
||||
min-height: 275px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.banner__square2 {
|
||||
min-width: 275px;
|
||||
min-height: 275px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.banner__contacts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.banner__header {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.banner__info {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
white-space: normal;
|
||||
margin-top: 10px;
|
||||
}
|
||||
56
LabWork_03/css/index.css
Normal file
56
LabWork_03/css/index.css
Normal file
@ -0,0 +1,56 @@
|
||||
/* Info */
|
||||
.main__product {
|
||||
max-width: 752px;
|
||||
min-height: 530px;
|
||||
margin-top: 90px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.info__title {
|
||||
color: #a721fa;
|
||||
font-size: 90px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.info__title {
|
||||
margin-top: 30px;
|
||||
font-size: 50px;
|
||||
}
|
||||
}@media (max-width: 479px) {
|
||||
.info__title {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.info__text {
|
||||
margin-top: 30px;
|
||||
color: #fff;
|
||||
font-size: 25px;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.main__button {
|
||||
max-width: 263px;
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #a721fa;
|
||||
margin-top: 50px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
/* Image */
|
||||
.banner__img {
|
||||
max-width: 400px;
|
||||
max-height: 377px;
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
.banner__img {
|
||||
max-width: 219px;
|
||||
max-height: 177px;
|
||||
}
|
||||
}
|
||||
241
LabWork_03/css/style.css
Normal file
241
LabWork_03/css/style.css
Normal file
@ -0,0 +1,241 @@
|
||||
.root {
|
||||
--color1: #363434;
|
||||
--color2: #2c2a2a;
|
||||
--color3: #a721fa;
|
||||
}
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: .4s;
|
||||
}
|
||||
input {
|
||||
padding-left: 20px;
|
||||
}
|
||||
input::placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding-top: 16px;
|
||||
padding-left: 20px;
|
||||
color: #363434;
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
transition: .4s;
|
||||
}
|
||||
ul, ol, li {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
html, body {
|
||||
height: 100%;
|
||||
line-height: 1;
|
||||
font-family: Montserrat;
|
||||
background-color: #363434;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
._container {
|
||||
max-width: 1680px;
|
||||
margin: 0px auto;
|
||||
padding: 0px 15px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
._container {
|
||||
padding: 0px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #2c2a2a;
|
||||
}
|
||||
.header__container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items:center;
|
||||
min-height: 150px;
|
||||
}
|
||||
.header__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logo__img {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
}
|
||||
.logo__nametag {
|
||||
margin: 0px 0px 0px 30px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.logo__nametag {
|
||||
margin: 0px 0px 0px 15px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
.logo__nametag {
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
}
|
||||
.nametag__title {
|
||||
font-size: 50px;
|
||||
font-weight: 700;
|
||||
color: #a721fa;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.nametag__title {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.nametag__subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.nav__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.nav__item:not(:last-child) {
|
||||
margin-right: 50px;
|
||||
}
|
||||
@media (max-width: 479px) {
|
||||
.nav__item.nav__item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.nav__link {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav__link:hover {
|
||||
color: #a721fa;
|
||||
}
|
||||
.account {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.account__img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.account__link {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.account__link:hover {
|
||||
color: #a721fa;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.main {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.main__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 150px;
|
||||
min-height: 830px;
|
||||
}
|
||||
|
||||
/* Image */
|
||||
.main__banner {
|
||||
min-width: 596px;
|
||||
min-height: 596px;
|
||||
margin-top: 90px;
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
.main__banner {
|
||||
min-width: 375px;
|
||||
max-height: 375px;
|
||||
}
|
||||
}
|
||||
.banner__square1 {
|
||||
position: absolute;
|
||||
min-width: 546px;
|
||||
min-height: 546px;
|
||||
margin-left: 50px;
|
||||
background-color: #fff;
|
||||
border-radius: 70px;
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
.banner__square1 {
|
||||
min-width: 325px;
|
||||
min-height: 325px;
|
||||
}
|
||||
}
|
||||
.banner__square2 {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 546px;
|
||||
min-height: 546px;
|
||||
margin-top: 50px;
|
||||
background-color: #a721fa;
|
||||
border-radius: 70px;
|
||||
border: solid 5px;
|
||||
border-color: #fff;
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
.banner__square2 {
|
||||
min-width: 325px;
|
||||
min-height: 325px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
width: 100%;
|
||||
background-color: #2c2a2a;
|
||||
}
|
||||
.footer__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 100px;
|
||||
}
|
||||
.footer__privacy {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
47
LabWork_03/data.json
Normal file
47
LabWork_03/data.json
Normal file
@ -0,0 +1,47 @@
|
||||
{
|
||||
"items": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Protection 4"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Thorns 3"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Sharpness 5"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Fortune 3"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Infinity"
|
||||
}
|
||||
],
|
||||
"lines": [
|
||||
{
|
||||
"itemsId": "5",
|
||||
"price": "50.00",
|
||||
"amount": "7",
|
||||
"total": "350.00",
|
||||
"id": 2
|
||||
},
|
||||
{
|
||||
"itemsId": "1",
|
||||
"price": "160.00",
|
||||
"amount": "3",
|
||||
"total": "480.00",
|
||||
"id": 3
|
||||
},
|
||||
{
|
||||
"itemsId": "4",
|
||||
"price": "50.00",
|
||||
"amount": "1",
|
||||
"total": "50.00",
|
||||
"id": 4
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
LabWork_03/img/armor.png
Normal file
BIN
LabWork_03/img/armor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
LabWork_03/img/avatar.png
Normal file
BIN
LabWork_03/img/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
LabWork_03/img/book.png
Normal file
BIN
LabWork_03/img/book.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
LabWork_03/img/cross.png
Normal file
BIN
LabWork_03/img/cross.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
LabWork_03/img/logo.png
Normal file
BIN
LabWork_03/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
LabWork_03/img/pickaxe.png
Normal file
BIN
LabWork_03/img/pickaxe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 606 B |
115
LabWork_03/index.html
Normal file
115
LabWork_03/index.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="src/css/style.css">
|
||||
<link rel="favicon" href="public/favicon/favicon.ico">
|
||||
<title>Bookshelf</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header class="header">
|
||||
<div class="header__container _container">
|
||||
<div class="header__logo logo">
|
||||
<div class="logo__img">
|
||||
<img src="public/images/logo.png" alt="logo.png">
|
||||
</div>
|
||||
<div class="logo__nametag">
|
||||
<div class="nametag__title">Bookshelf</div>
|
||||
<div class="nametag__subtitle">Online-library</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="header__nav nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="index.html" class="nav__link">Home</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="armor.html" class="nav__link">Armor</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Tools</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Sword</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Bow</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Trident</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="account">
|
||||
<div class="account__img">
|
||||
<img src="public/images/avatar.png" alt="avatar.png">
|
||||
</div>
|
||||
<a class="account__link" href="account.html">My account</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main_index">
|
||||
<div class="main__container _container">
|
||||
<div class="main__product">
|
||||
<div class="main__info info">
|
||||
<div class="info__title">The power of enchantments</div>
|
||||
<div class="info__text">Enchanting is a mechanic that augments armor, tools, weapons, and books with one or more of a variety of "enchantments" that improve an item's existing abilities or imbue them with additional abilities and uses. A special "glint" animation appears on items that are enchanted.</div>
|
||||
</div>
|
||||
<a href="shop.html" class="main__button">Start buying</a>
|
||||
</div>
|
||||
<div class="main__banner banner">
|
||||
<div class="banner__square1"></div>
|
||||
<div class="banner__square2">
|
||||
<div class="banner__img">
|
||||
<img src="public/images/book.png" alt="book.png">
|
||||
<div class="banner__loop" id="banner">
|
||||
<img class="banner_hide" src="public/images/protection.png" alt="banner1">
|
||||
<img class="banner_hide" src="public/images/thorns.png" alt="banner2">
|
||||
<img class="banner_hide" src="public/images/sharpness.png" alt="banner3">
|
||||
<img class="banner_hide" src="public/images/fortune.png" alt="banner4">
|
||||
<img class="banner_hide" src="public/images/infinity.png" alt="banner5">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__container _container">
|
||||
<nav class="footer__nav nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="about_us.html" class="nav__link">About us</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="contact_us.html" class="nav__link">Contact us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer__privacy">
|
||||
© made by Factorino. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import myBanner from "./src/js/banner";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
myBanner("#banner");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
14
LabWork_03/jsconfig.json
Normal file
14
LabWork_03/jsconfig.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"target": "ES2020",
|
||||
"jsx": "preserve",
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"**/node_modules/*"
|
||||
]
|
||||
}
|
||||
4700
LabWork_03/package-lock.json
generated
Normal file
4700
LabWork_03/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
LabWork_03/package.json
Normal file
27
LabWork_03/package.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "labwork_2",
|
||||
"private": true,
|
||||
"version": "0.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.3.2",
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
BIN
LabWork_03/public/favicon/favicon.ico
Normal file
BIN
LabWork_03/public/favicon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
LabWork_03/public/images/armor.png
Normal file
BIN
LabWork_03/public/images/armor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
LabWork_03/public/images/avatar.png
Normal file
BIN
LabWork_03/public/images/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
LabWork_03/public/images/book.png
Normal file
BIN
LabWork_03/public/images/book.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
LabWork_03/public/images/bookshelf.png
Normal file
BIN
LabWork_03/public/images/bookshelf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
LabWork_03/public/images/cross.png
Normal file
BIN
LabWork_03/public/images/cross.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
LabWork_03/public/images/fortune.png
Normal file
BIN
LabWork_03/public/images/fortune.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
LabWork_03/public/images/infinity.png
Normal file
BIN
LabWork_03/public/images/infinity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
LabWork_03/public/images/logo.png
Normal file
BIN
LabWork_03/public/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
LabWork_03/public/images/pickaxe.png
Normal file
BIN
LabWork_03/public/images/pickaxe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 606 B |
BIN
LabWork_03/public/images/protection.png
Normal file
BIN
LabWork_03/public/images/protection.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
LabWork_03/public/images/sharpness.png
Normal file
BIN
LabWork_03/public/images/sharpness.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
LabWork_03/public/images/thorns.png
Normal file
BIN
LabWork_03/public/images/thorns.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
115
LabWork_03/shop.html
Normal file
115
LabWork_03/shop.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:regular,500,600,700,800,900&display=swap" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="src/css/style.css">
|
||||
<link rel="favicon" href="public/favicon/favicon.ico">
|
||||
<title>Bookshelf</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<header class="header">
|
||||
<div class="header__container _container">
|
||||
<div class="header__logo logo">
|
||||
<div class="logo__img">
|
||||
<img src="public/images/logo.png" alt="logo.png">
|
||||
</div>
|
||||
<div class="logo__nametag">
|
||||
<div class="nametag__title">Bookshelf</div>
|
||||
<div class="nametag__subtitle">Online-library</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="header__nav nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="index.html" class="nav__link">Home</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="armor.html" class="nav__link">Armor</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Tools</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Sword</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Bow</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="" class="nav__link">Trident</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="account">
|
||||
<div class="account__img">
|
||||
<img src="public/images/avatar.png" alt="avatar.png">
|
||||
</div>
|
||||
<a class="account__link" href="account.html">My account</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main_shop">
|
||||
<div class="main__container _container">
|
||||
<div class="main__banner banner">
|
||||
<div class="banner__square1"></div>
|
||||
<div class="banner__square2">
|
||||
<div class="banner__img">
|
||||
<img src="public/images/bookshelf.png" alt="armor.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form class="main__shop_form form needs-validation" id="items-form" novalidate>
|
||||
<h2 class="form__title">Enter the title</h2>
|
||||
<h3 class="form__subtitle">and we will find your book</h3>
|
||||
<div class="form__fields fields">
|
||||
<select class="fields__item" name="selected" id="item" required>
|
||||
</select>
|
||||
<input class="fields__price form-control" type="number" value="0.00" min="50.00" step="5.00" placeholder="Enter the price of the book" name="price" id="price" required>
|
||||
<input class="fields__amount form-control" type="number" value="0" min="1" step="1" placeholder="Enter the amount of books" name="amount" id="amount" required>
|
||||
<button type="submit" class="fields__submit">Buy books</button>
|
||||
<div class="form__warning">With rare exceptions, our library may<br/>not contain the desired book.</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__container _container">
|
||||
<nav class="footer__nav nav">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="about_us.html" class="nav__link">About us</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="contact_us.html" class="nav__link">Contact us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="footer__privacy">
|
||||
© made by Factorino. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import validation from "./src/js/validation";
|
||||
import linesPageForm from "./src/js/lines";
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
validation();
|
||||
linesPageForm();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
20
LabWork_03/src/css/banner.css
Normal file
20
LabWork_03/src/css/banner.css
Normal file
@ -0,0 +1,20 @@
|
||||
#banner {
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#banner img.banner_show {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
transition: opacity 2s, visibility 0s;
|
||||
}
|
||||
|
||||
#banner img.banner_hide {
|
||||
height: 0;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s, visibility 0s 1s;
|
||||
}
|
||||
711
LabWork_03/src/css/style.css
Normal file
711
LabWork_03/src/css/style.css
Normal file
@ -0,0 +1,711 @@
|
||||
/* Обнуление стилей */
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: .4s;
|
||||
}
|
||||
input {
|
||||
padding-left: 20px;
|
||||
}
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input::placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding-top: 16px;
|
||||
padding-left: 20px;
|
||||
color: #363434;
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
transition: .4s;
|
||||
}
|
||||
ul, ol, li {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0px;
|
||||
}
|
||||
table {
|
||||
display: block;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
html, body {
|
||||
height: 100%;
|
||||
line-height: 1;
|
||||
font-family: Montserrat;
|
||||
background-color: #363434;
|
||||
}
|
||||
|
||||
/* Полоса прокрутки */
|
||||
::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #2c2a2a;
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Обёртка */
|
||||
.wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
._container {
|
||||
max-width: 1680px;
|
||||
margin: 0px auto;
|
||||
padding: 0px 15px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Шапка */
|
||||
/* Обертка шапки */
|
||||
.header {
|
||||
background-color: #2c2a2a;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.header__container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Логотип шапки */
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.logo__img img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.logo__nametag {
|
||||
margin-left: 30px;
|
||||
}
|
||||
/* Название логотипа */
|
||||
.nametag__title {
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
color: #a721fa;
|
||||
}
|
||||
.nametag__subtitle {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Навигация шапки */
|
||||
.nav__list {
|
||||
margin: 0px 10px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
.header *> .nav__item {
|
||||
display: inline-block;;
|
||||
width: calc(1/6 * 100%);
|
||||
}
|
||||
.nav__item:not(:last-child) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.nav__link {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.nav__link:hover {
|
||||
color: #a721fa;
|
||||
}
|
||||
|
||||
/* Личный кабинет */
|
||||
.account {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.account__img img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.account__link {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.account__link:hover {
|
||||
color: #a721fa;
|
||||
}
|
||||
|
||||
/* Адаптив шапки */
|
||||
@media (max-width: 768px) {
|
||||
.header__container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nametag__title {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.header *> .nav {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.header *> .nav__list {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20%;
|
||||
}
|
||||
|
||||
.header *> .nav__item:not(:last-child) {
|
||||
margin-right: 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.account__link {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Футер */
|
||||
/* Обертка футера */
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 30px 0px;
|
||||
background-color: #2c2a2a;
|
||||
}
|
||||
.footer__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Права */
|
||||
.footer__privacy {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Адаптив футера */
|
||||
@media (max-width: 768px) {
|
||||
.footer {
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
||||
.footer__container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer *> .nav__item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer__privacy {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Основной контент */
|
||||
/* Обертка основного контента */
|
||||
.main__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 150px 15px;
|
||||
}
|
||||
|
||||
/* Баннер */
|
||||
.banner {
|
||||
width: 30%;
|
||||
min-width: 300px;
|
||||
min-height: 300px;
|
||||
padding-bottom: 30%;
|
||||
margin-bottom: 50px;
|
||||
position: relative;
|
||||
}
|
||||
.banner__square1, .banner__square2 {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
border-radius: 12%;
|
||||
position: absolute;
|
||||
}
|
||||
.banner__square1 {
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
.banner__square2 {
|
||||
bottom: 0;
|
||||
border: 5px solid #fff;
|
||||
background-color: #a721fa;
|
||||
}
|
||||
.banner__img {
|
||||
padding: 12%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Адаптив основного контента */
|
||||
@media (max-width: 1024px) {
|
||||
.main__container {
|
||||
padding: 50px 15px;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Home page (index) */
|
||||
/* Информация */
|
||||
.main__product {
|
||||
width: 45%;
|
||||
margin-right: 300px;
|
||||
}
|
||||
.info__title {
|
||||
color: #a721fa;
|
||||
font-size: 90px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.info__text {
|
||||
width: 85%;
|
||||
margin-top: 30px;
|
||||
color: #fff;
|
||||
font-size: 25px;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Кнопка */
|
||||
.main__button {
|
||||
width: 263px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #a721fa;
|
||||
margin-top: 50px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.main__button:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.main__button:active {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Баннер */
|
||||
.main_index *> .banner__square2 {
|
||||
box-shadow: 10px -10px 10px 10px rgba(0, 0, 0, .2);
|
||||
}
|
||||
.main_index *> .banner__loop {
|
||||
position: absolute;
|
||||
right: 7%;
|
||||
top: 67%;
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
/* Адаптив главной страницы */
|
||||
@media (max-width: 1240px) {
|
||||
.main__button {
|
||||
margin: 50px auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.main__product {
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.info__title {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.info__text {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Armor page */
|
||||
/* Баннер */
|
||||
.main_armor *> .banner__square1 {
|
||||
left: 0;
|
||||
}
|
||||
.main_armor *> .banner__square2 {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-shadow: -10px -10px 10px 10px rgba(0, 0, 0, .2);
|
||||
}
|
||||
.main_armor *> .banner__img {
|
||||
width: 65%;
|
||||
margin: 0 auto;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
/* Таблица */
|
||||
.table {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 3%;
|
||||
border: solid 5px #a721fa;
|
||||
border-radius: 70px;
|
||||
color: #fff;
|
||||
background-color: #2c2a2a;
|
||||
}
|
||||
.table__row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
border-radius: 30px;
|
||||
background-color: #363434;
|
||||
}
|
||||
.table__cell {
|
||||
width: 17%;
|
||||
}
|
||||
.table__radio {
|
||||
display: none;
|
||||
}
|
||||
.table__radio:checked + .table__label {
|
||||
background-color: #a721fa;
|
||||
}
|
||||
.table__label {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 2.5;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-radius: 30px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Адаптив Armor page */
|
||||
@media (max-width: 1024px) {
|
||||
.table {
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.table {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.table__row {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.table__label {
|
||||
height: 100%;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
font-size: 10px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Account page */
|
||||
/* Форма регистрации */
|
||||
.form__title {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.form__subtitle {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.fields__number,
|
||||
.fields__password,
|
||||
.fields__password_repeat {
|
||||
padding: 15px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.form__warning {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Корзина покупок */
|
||||
.cart {
|
||||
width: 50%;
|
||||
min-height: 600px;
|
||||
padding: 3% 3%;
|
||||
border: solid 5px #a721fa;
|
||||
border-radius: 70px;
|
||||
color: #fff;
|
||||
background-color: #2c2a2a;
|
||||
}
|
||||
.cart__products {
|
||||
max-height: 550px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
gap: 10px;
|
||||
}
|
||||
.cart__row_header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.cart__row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
border-radius: 30px;
|
||||
background-color: #363434;
|
||||
}
|
||||
.cart__column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* Адаптив Account page */
|
||||
@media (max-width: 1240px) {
|
||||
.cart {
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.cart__row {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cart__name {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.cart__row_header {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Shop page */
|
||||
/* Баннер */
|
||||
.main_shop *> .banner__square1 {
|
||||
left: 0;
|
||||
}
|
||||
.main_shop *> .banner__square2 {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-shadow: -10px -10px 10px 10px rgba(0, 0, 0, .2);
|
||||
}
|
||||
.main_shop *> .banner__img {
|
||||
width: 100%;
|
||||
margin: 3% 0% 0% -3%;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
/* Форма выбора книги */
|
||||
.main_shop *> .form {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.fields__item,
|
||||
.fields__price,
|
||||
.fields__amount {
|
||||
padding: 15px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* About us page */
|
||||
/* Информация */
|
||||
.main__about_info {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
background-color: #2c2a2a;
|
||||
border: 5px solid #a721fa;
|
||||
border-radius: 70px;
|
||||
font-size: 32px;
|
||||
padding: 77px 44px;
|
||||
line-height: 1.3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Адаптив About us page */
|
||||
@media (max-width: 768px) {
|
||||
.main__about_info {
|
||||
width: 100%;
|
||||
margin-bottom: 50px;
|
||||
padding: 30px 20px;
|
||||
border-radius: 30px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Contact us page */
|
||||
/* Контактная форма */
|
||||
.form {
|
||||
width: 28%;
|
||||
max-width: 550px;
|
||||
margin-right: 50px;
|
||||
border: solid 5px #a721fa;
|
||||
border-radius: 70px;
|
||||
color: #fff;
|
||||
background-color: #2c2a2a;
|
||||
}
|
||||
.form__header {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.fields {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 11% 15%;
|
||||
gap: 20px;
|
||||
}
|
||||
.fields__name,
|
||||
.fields__email {
|
||||
padding: 15px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.fields__message {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 200px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
.fields__submit {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
border-radius: 30px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background-color: #a721fa;
|
||||
}
|
||||
.fields__submit:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.fields__submit:active {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Контактная информация */
|
||||
.info_table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 50px;
|
||||
}
|
||||
.info_table__row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 50px;
|
||||
}
|
||||
.banner__contacts {
|
||||
margin: 25% 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.main_contact *> .banner__square2 {
|
||||
box-shadow: 5px -5px 10px 19px rgba(0, 0, 0, .2);
|
||||
}
|
||||
.banner__header {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
.banner__info {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
white-space: normal;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Адаптив Contact us page */
|
||||
@media (max-width: 1180px) {
|
||||
.form {
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 50px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.info_table {
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.info_table__row {
|
||||
gap: 25px;
|
||||
}
|
||||
}
|
||||
42
LabWork_03/src/js/banner.js
Normal file
42
LabWork_03/src/js/banner.js
Normal file
@ -0,0 +1,42 @@
|
||||
import "../css/banner.css";
|
||||
|
||||
function myBanner(root) {
|
||||
console.info("Loaded");
|
||||
|
||||
// получение всех изображений внутри баннера
|
||||
const banners = document.querySelectorAll(`${root} img`);
|
||||
|
||||
// всем изображениям устанавливается класс banner-hide
|
||||
// если были другие классы, то они будут удалены
|
||||
for (let i = 0; i < banners.length; i += 1) {
|
||||
banners[i].setAttribute("class", "banner_hide");
|
||||
}
|
||||
|
||||
let old = banners.length - 1;
|
||||
let current = 0;
|
||||
|
||||
// функция меняет изображения в цикле
|
||||
// изображение с классом banner-show будет показано
|
||||
// изображение с классом banner-hide будет скрыто
|
||||
// функция запускает таймер, который через 5 секунд
|
||||
// запускает функцию, снова создается таймер и т. д.
|
||||
function loop() {
|
||||
banners[current].setAttribute("class", "banner_show");
|
||||
banners[old].setAttribute("class", "banner_hide");
|
||||
|
||||
console.info("Banner changed");
|
||||
|
||||
old = current;
|
||||
current += 1;
|
||||
|
||||
if (current === banners.length) {
|
||||
current = 0;
|
||||
}
|
||||
|
||||
setTimeout(loop, 5000);
|
||||
}
|
||||
|
||||
loop();
|
||||
}
|
||||
|
||||
export default myBanner;
|
||||
99
LabWork_03/src/js/lines-rest-api.js
Normal file
99
LabWork_03/src/js/lines-rest-api.js
Normal file
@ -0,0 +1,99 @@
|
||||
// модуль для работы с REST API сервера
|
||||
|
||||
// адрес сервера
|
||||
const serverUrl = "http://localhost:8081";
|
||||
|
||||
// функция возвращает объект нужной структуры для отправки на сервер
|
||||
function createLineObject(item, price, amount) {
|
||||
return {
|
||||
itemsId: item,
|
||||
price: parseFloat(price).toFixed(2),
|
||||
amount,
|
||||
total: parseFloat(price * amount).toFixed(2),
|
||||
};
|
||||
}
|
||||
|
||||
// обращение к серверу для получения всех типов товара (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, amount) {
|
||||
const itemObject = createLineObject(item, price, amount);
|
||||
|
||||
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, amount) {
|
||||
const itemObject = createLineObject(item, price, amount);
|
||||
|
||||
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();
|
||||
}
|
||||
80
LabWork_03/src/js/lines-ui.js
Normal file
80
LabWork_03/src/js/lines-ui.js
Normal file
@ -0,0 +1,80 @@
|
||||
// модуль для работы с элементами управления
|
||||
|
||||
// объект для удобного получения элементов
|
||||
// при обращении к атрибуту объекта вызывается
|
||||
// нужная функция для поиска элемента
|
||||
export const cntrls = {
|
||||
table: document.querySelector("#items-table tbody"),
|
||||
form: document.getElementById("items-form"),
|
||||
itemsName: document.getElementById("item"),
|
||||
price: document.getElementById("price"),
|
||||
amount: document.getElementById("amount"),
|
||||
};
|
||||
|
||||
// функция создает тег option для select
|
||||
// <option value="" selected>name</option>
|
||||
export function createItemsOption(name, value = "", isSelected = false) {
|
||||
const option = document.createElement("option");
|
||||
option.value = value || "";
|
||||
option.selected = isSelected;
|
||||
option.text = name;
|
||||
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 i = document.createElement("i");
|
||||
i.classList.add("fa-solid", icon);
|
||||
|
||||
const a = document.createElement("a");
|
||||
a.href = "#";
|
||||
a.appendChild(i);
|
||||
a.onclick = (event) => {
|
||||
// чтобы в URL не добавлялась решетка
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
callback();
|
||||
};
|
||||
|
||||
return a;
|
||||
}
|
||||
|
||||
// функция создает колонку таблицы с текстом value
|
||||
// <td>value</td>
|
||||
function createTableColumn(value) {
|
||||
const td = document.createElement("td");
|
||||
td.className = "cart__column";
|
||||
td.textContent = value;
|
||||
return td;
|
||||
}
|
||||
|
||||
// функция создает строку таблицы
|
||||
// <tr>
|
||||
// <td>item.items.name</td>
|
||||
// <td>parseFloat(item.price).toFixed(2))</td>
|
||||
// <td>item.amount</td>
|
||||
// <td>parseFloat(item.total).toFixed(2))</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, editPageCallback, deleteCallback) {
|
||||
const row = document.createElement("tr");
|
||||
row.className = "cart__row";
|
||||
row.id = `line-${item.id}`;
|
||||
|
||||
row.appendChild(createTableColumn(item.items.name));
|
||||
row.appendChild(createTableColumn(parseFloat(item.price).toFixed(2)));
|
||||
row.appendChild(createTableColumn(item.amount));
|
||||
row.appendChild(createTableColumn(parseFloat(item.total).toFixed(2)));
|
||||
// редактировать и удаление
|
||||
const td = document.createElement("td");
|
||||
td.className = "cart__column";
|
||||
td.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback));
|
||||
td.appendChild(createTableAnchor("fa-trash", deleteCallback));
|
||||
row.appendChild(td);
|
||||
return row;
|
||||
}
|
||||
156
LabWork_03/src/js/lines.js
Normal file
156
LabWork_03/src/js/lines.js
Normal file
@ -0,0 +1,156 @@
|
||||
// модуль с логикой
|
||||
import {
|
||||
createLine, deleteLine, getAllItemTypes, getAllLines, getLine, updateLine,
|
||||
} from "./lines-rest-api";
|
||||
import {
|
||||
cntrls, createItemsOption, createTableRow,
|
||||
} from "./lines-ui";
|
||||
|
||||
async function drawItemsSelect() {
|
||||
// вызов метода REST API для получения списка типов товаров
|
||||
const data = await getAllItemTypes();
|
||||
// очистка содержимого select
|
||||
// удаляется все, что находится между тегами <select></select>
|
||||
// но не атрибуты
|
||||
cntrls.itemsName.innerHTML = "";
|
||||
// пустое значение
|
||||
cntrls.itemsName.appendChild(createItemsOption("Выберите значение", "", true));
|
||||
// цикл по результату ответа от сервера
|
||||
// используется лямбда-выражение
|
||||
// (item) => {} аналогично function(item) {}
|
||||
data.forEach((item) => {
|
||||
cntrls.itemsName.appendChild(createItemsOption(item.name, item.id));
|
||||
});
|
||||
}
|
||||
|
||||
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) => {
|
||||
cntrls.table.appendChild(
|
||||
createTableRow(
|
||||
item,
|
||||
// функции передаются в качестве параметра
|
||||
// это очень удобно, так как аргументы функций доступны только
|
||||
// в данном месте кода и не передаются в сервисные модули
|
||||
() => location.assign(`shop.html?id=${item.id}`),
|
||||
() => removeLine(item.id),
|
||||
),
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
async function addLine(item, price, amount) {
|
||||
console.info("Try to add item");
|
||||
// вызов метода REST API для добавления записи
|
||||
const data = await createLine(item, price, amount);
|
||||
console.info("Added");
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
}
|
||||
|
||||
async function editLine(id, item, price, amount) {
|
||||
console.info("Try to update item");
|
||||
// вызов метода REST API для обновления записи
|
||||
const data = await updateLine(id, item, price, amount);
|
||||
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();
|
||||
}
|
||||
|
||||
// Функция для обработки создания и редактирования элементов таблицы через страницу page-edit.html
|
||||
// Если хотите делать через модальное окно, то удалите эту функцию
|
||||
export default async function linesPageForm() {
|
||||
console.info("linesPageForm");
|
||||
|
||||
// загрузка и заполнение select со списком товаров
|
||||
drawItemsSelect();
|
||||
// загрузка и заполнение table
|
||||
drawLinesTable();
|
||||
|
||||
// func1 = (id) => {} аналогично function func1(id) {}
|
||||
const goBack = () => location.assign("/account.html");
|
||||
|
||||
// получение параметров 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.itemsName.value = line.itemsId;
|
||||
cntrls.price.value = line.price;
|
||||
cntrls.amount.value = line.amount;
|
||||
} catch {
|
||||
// в случае ошибки происходит возврат к account
|
||||
goBack();
|
||||
}
|
||||
}
|
||||
|
||||
// обработчик события отправки формы
|
||||
// возникает при нажатии на кнопку (button) с типом submit
|
||||
// кнопка должна находится внутри тега form
|
||||
cntrls.form.addEventListener("submit", async (event) => {
|
||||
console.info("Form onSubmit");
|
||||
// отключение стандартного поведения формы при отправке
|
||||
// при отправке страница обновляется и JS перестает работать
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// если форма не прошла валидацию, то ничего делать не нужно
|
||||
if (!cntrls.form.checkValidity()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// если значение параметра запроса не задано,
|
||||
// то необходимо выполнить добавление записи
|
||||
// иначе обновление записи
|
||||
if (!currentId) {
|
||||
await addLine(
|
||||
cntrls.itemsName.value,
|
||||
cntrls.price.value,
|
||||
cntrls.amount.value,
|
||||
);
|
||||
} else {
|
||||
await editLine(
|
||||
currentId,
|
||||
cntrls.itemsName.value,
|
||||
cntrls.price.value,
|
||||
cntrls.amount.value,
|
||||
);
|
||||
}
|
||||
// возврат к странице account
|
||||
goBack();
|
||||
});
|
||||
}
|
||||
25
LabWork_03/src/js/validation.js
Normal file
25
LabWork_03/src/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;
|
||||
17
LabWork_03/vite.config.js
Normal file
17
LabWork_03/vite.config.js
Normal file
@ -0,0 +1,17 @@
|
||||
import { resolve } from 'path'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, 'index.html'),
|
||||
armor: resolve(__dirname, 'armor.html'),
|
||||
account: resolve(__dirname, 'account.html'),
|
||||
shop: resolve(__dirname, 'shop.html'),
|
||||
about: resolve(__dirname, 'about_us.html'),
|
||||
contact: resolve(__dirname, 'contact_us.html')
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user