Compare commits
No commits in common. "d3366491ef219d0a0b6a4c22939d1c8d54d1152d" and "7e44c2b1a1abe261a40e8163fd5e2c86ad326f00" have entirely different histories.
d3366491ef
...
7e44c2b1a1
@ -1,20 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
@ -1,80 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Steam</title>
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
|
||||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="nav-link active" href="./index.html"> Главная </a>
|
|
||||||
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav">
|
|
||||||
<a class="nav-link active" href="./basket.html">Корзина</a>
|
|
||||||
<a class="nav-link active" href="./library.html">Библиотека</a>
|
|
||||||
<a class="nav-link active" href="./entry.html">Вход</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="container-fluid p-2">
|
|
||||||
<div class="text-center">
|
|
||||||
<img id="image-preview" src="placeholder.jpg" alt="placeholder">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form id="games-form" class="admin_panel mt-4 needs-validation" novalidate>
|
|
||||||
<div class="input-group mb-4">
|
|
||||||
<span class="input-group-text span_admin_panel" id="basic-addon1">Жанр:</span>
|
|
||||||
<select id="genre" class="form-select" name="selected" required>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="input-group mb-4">
|
|
||||||
<span class="input-group-text span_admin_panel" id="basic-addon1">Название:</span>
|
|
||||||
<input id="name" type="text" class="form-control" placeholder="Название" required>
|
|
||||||
</div>
|
|
||||||
<div class="input-group mb-4">
|
|
||||||
<span class="input-group-text span_admin_panel" id="basic-addon1">Цена:</span>
|
|
||||||
<input id = "price" type="number" class="form-control" placeholder="Цена" required>
|
|
||||||
</div>
|
|
||||||
<div class="input-group mb-4">
|
|
||||||
<span class="input-group-text span_admin_panel" id="basic-addon1">Фото:</span>
|
|
||||||
<input id="image" name="image" type="file" class="form-control" placeholder="Фото" accept="image/*">
|
|
||||||
</div>
|
|
||||||
<div class = "d-flex justify-content-center">
|
|
||||||
<button class = "btn_admin_panel" type="submit"> Подтвердить </button> <!-- onclick="window.location.href = './index.html';" -->
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
|
||||||
</main>
|
|
||||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
|
||||||
</footer>
|
|
||||||
<script type="module">
|
|
||||||
import validation from "./js/validation";
|
|
||||||
import { linesPageForm } from "./js/lines"
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
validation();
|
|
||||||
linesPageForm();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,96 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Steam</title>
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
|
||||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="nav-link" href="./index.html"> Главная </a>
|
|
||||||
|
|
||||||
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav">
|
|
||||||
<a class="nav-link active" href="./basket.html">Корзина</a>
|
|
||||||
<a class="nav-link active" href="./library.html">Библиотека</a>
|
|
||||||
<a class="nav-link active" href="./entry.html">Вход</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="container-fluid p-2">
|
|
||||||
<table class="table table-bordered align-middle">
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td class = "p-0 cell1_basket">
|
|
||||||
<img src="Dark Nights preview.jpg" alt="Dark Nights with Poe & Munro" class="img-fluid">
|
|
||||||
</td>
|
|
||||||
<td class = "p-0 cell2_basket">
|
|
||||||
<p class = "basket_name_of_game">Dark Nights with Poe and Munro</p>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
<td class = "p-0 text-center align-middle cell3_basket">
|
|
||||||
|
|
||||||
<p class = "price_of_game_main_page"> 299 руб.</p>
|
|
||||||
</td>
|
|
||||||
<td class = "p-0 text-center align-middle">
|
|
||||||
<button class = "basket_delete_button"> X </button>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class = "p-0 cell1_basket">
|
|
||||||
<img src="Ten Dates preview.jpg" alt="Ten Dates" class="img-fluid">
|
|
||||||
</td>
|
|
||||||
<td class = "p-0 text-center align-middle cell2_basket">
|
|
||||||
<p class = "basket_name_of_game">Ten Dates</p>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
<td class = "p-0 text-center align-middle cell3_basket">
|
|
||||||
<p class = "price_of_game_main_page"> 509 руб.</p>
|
|
||||||
</td>
|
|
||||||
<td class = "p-0 text-center align-middle">
|
|
||||||
<button class = "basket_delete_button"> X </button>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td colspan="2" class = "align-left">
|
|
||||||
<p class = "basket_price_of_games"> Итого: 808 руб.</p>
|
|
||||||
</td>
|
|
||||||
<td colspan="2" class = "text-end">
|
|
||||||
<button class = "basket_buy_button">КУПИТЬ</button>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
|
||||||
Сайт Чернышева Георгия, ПИбд-22
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Steam</title>
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
|
||||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="nav-link active" href="./index.html"> Главная </a>
|
|
||||||
|
|
||||||
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav">
|
|
||||||
<a class="nav-link active" href="./basket.html">Корзина</a>
|
|
||||||
<a class="nav-link active" href="./library.html">Библиотека</a>
|
|
||||||
<a class="nav-link active" href="./entry.html">Вход</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="container-fluid">
|
|
||||||
<div class="row align-items-center justify-content-center mb-2 mt-20vh">
|
|
||||||
<div class="col-auto justify-content-left">
|
|
||||||
<label for="inputMail" class="account_text" id = "label_nickname">ВВЕДИТЕ ПОЧТУ:</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row align-items-center justify-content-center mb-2">
|
|
||||||
<div class="col-auto justify-content-left">
|
|
||||||
<label for="inputMail" class="account_text" id = "label_nickname">ВВЕДИТЕ НИК:</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<input type="text" class="form-control" aria-label="Username" id = "inputMail">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row align-items-center justify-content-center mb-2">
|
|
||||||
<div class="col-auto">
|
|
||||||
<label for="inputPassword6" class="account_text">ВВЕДИТЕ ПАРОЛЬ:</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row align-items-center justify-content-center">
|
|
||||||
<div class="col-auto mt-3">
|
|
||||||
<button class = "account_btn"> СОЗДАТЬ </button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
|
||||||
<a class = "account_text" href = "entry.html">ВОЙТИ В АККАУНТ</a>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Steam</title>
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
|
||||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="nav-link active" href="./index.html"> Главная </a>
|
|
||||||
|
|
||||||
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav">
|
|
||||||
<a class="nav-link active" href="./basket.html">Корзина</a>
|
|
||||||
<a class="nav-link active" href="./library.html">Библиотека</a>
|
|
||||||
<a class="nav-link active" href="./entry.html">Вход</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="container-fluid p-2">
|
|
||||||
<!-- ВЕРХНИЙ DIV -->
|
|
||||||
<div class = "row info_about_game_pic_and_name">
|
|
||||||
<div class = "col-sm-5">
|
|
||||||
<img src="Dark Nights preview.jpg" alt="Dark Nights with Poe & Munro" class="img-fluid">
|
|
||||||
</div>
|
|
||||||
<div class = "col-sm-7 text-center align-items-center">
|
|
||||||
<p class = "info_about_game_name">Dark Nights with Poe and Munro</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class = "row">
|
|
||||||
<div class = "col-sm 12">
|
|
||||||
<p class = "info_about_game_text">Проведите местных радиоведущих По и Манро через шесть похожих на короткометражки эпизодов сверъестественной странности и обжигающего сюжета. От создателей The Infectious Madness of Doctor Dekker и The Shapeshifting Detective.</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class = "info_about_game_div_button text-center align-items-center">
|
|
||||||
<button class = "info_about_game_add_to_basket_button"> Добавить в корзину </button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
|
||||||
Сайт Чернышева Георгия, ПИбд-22
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1,68 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Steam</title>
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
|
||||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="nav-link active" href="./index.html"> Главная </a>
|
|
||||||
|
|
||||||
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav">
|
|
||||||
<a class="nav-link active" href="./basket.html">Корзина</a>
|
|
||||||
<a class="nav-link active" href="./library.html">Библиотека</a>
|
|
||||||
<a class="nav-link active" href="./entry.html">Вход</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
|
|
||||||
<main class = "container-fluid">
|
|
||||||
<div class="row align-items-center justify-content-center mb-2 mt-25vh">
|
|
||||||
<div class="col-auto">
|
|
||||||
<label for="inputMail" class="account_text" id = "label_nickname">ВВЕДИТЕ НИК:</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row align-items-center justify-content-center mb-2">
|
|
||||||
<div class="col-auto">
|
|
||||||
<label for="inputMail" class="account_text" id = "label_nickname">ВВЕДИТЕ ПАРОЛЬ:</label>
|
|
||||||
</div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<input type="text" class="form-control" aria-label="Username" id = "inputMail">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row align-items-center justify-content-center">
|
|
||||||
<div class="col-auto mt-3">
|
|
||||||
<button class = "account_btn"> ВОЙТИ </button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
|
||||||
<a class = "account_text" href = "create_account.html">СОЗДАТЬ АККАУНТ</a>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,71 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Steam</title>
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
|
||||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="nav-link active main_link" href="./index.html"> Главная </a>
|
|
||||||
|
|
||||||
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav">
|
|
||||||
<a class="nav-link" href="./basket.html">Корзина</a>
|
|
||||||
<a class="nav-link" href="./library.html">Библиотека</a>
|
|
||||||
<a class="nav-link" href="./entry.html">Вход</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
|
|
||||||
<main class="container-fluid p-2">
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" class="form-control" placeholder="Название игры" aria-label="Recipient's username" aria-describedby="button_search">
|
|
||||||
<button class="btn btn_searching" type="button" id="button_search">Поиск</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="d-flex flex-row-reverse">
|
|
||||||
<div class="pt-2">
|
|
||||||
<button class="btn_adding_game" onclick="window.location.href = './admin.html';">+</button> <!-- -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<table id = "games-table" class="table table-borderless table_of_main_page"> <!-- id = "games-table" -->
|
|
||||||
<tbody>
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
|
||||||
Сайт Чернышева Георгия, ПИбд-22
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script type="module">
|
|
||||||
import { drawLinesTable } from "./js/lines";
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
drawLinesTable();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
// модуль для работы с REST API сервера
|
|
||||||
|
|
||||||
// адрес сервера
|
|
||||||
const serverUrl = "http://localhost:8081";
|
|
||||||
|
|
||||||
// Функция создания объекта-игры для отправки на сервер
|
|
||||||
function createLineObject(genre, name, price, image) {
|
|
||||||
return {
|
|
||||||
genresId: genre,
|
|
||||||
name,
|
|
||||||
price: Math.floor(parseFloat(price)),
|
|
||||||
image,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Обращение к серверу для получения всех жанров (get)
|
|
||||||
export async function getAllGenreTypes() {
|
|
||||||
const response = await fetch(`${serverUrl}/genres`);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Обращение к серверу для получения всех игр (get)
|
|
||||||
export async function getAllLines() {
|
|
||||||
const response = await fetch(`${serverUrl}/lines?_expand=genres`);
|
|
||||||
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=genres`);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw response.statusText;
|
|
||||||
}
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Обращение к серверу для создания записи (post)
|
|
||||||
// объект отправляется в теле запроса (body)
|
|
||||||
export async function createLine(genre, name, price, image) {
|
|
||||||
const itemObject = createLineObject(genre, name, price, image);
|
|
||||||
|
|
||||||
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, genre, name, price, image) {
|
|
||||||
const itemObject = createLineObject(genre, name, price, image);
|
|
||||||
|
|
||||||
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();
|
|
||||||
}
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
// работа с элементами управления
|
|
||||||
|
|
||||||
// объект для удобного получения элементов
|
|
||||||
// controls - элементы управления
|
|
||||||
// при обращении к атрибуту объекта вызывается
|
|
||||||
// нужная функция для поиска элемента
|
|
||||||
export const controls = {
|
|
||||||
table: document.querySelector("#games-table tbody"),
|
|
||||||
form: document.getElementById("games-form"),
|
|
||||||
lineId: document.getElementById("items-line-id"),
|
|
||||||
genresType: document.getElementById("genre"),
|
|
||||||
price: document.getElementById("price"),
|
|
||||||
name: document.getElementById("name"),
|
|
||||||
image: document.getElementById("image"),
|
|
||||||
imagePreview: document.getElementById("image-preview"),
|
|
||||||
};
|
|
||||||
|
|
||||||
// Дефолтное превью
|
|
||||||
export const imagePlaceholder = "placeholder.jpg";
|
|
||||||
|
|
||||||
// функция создания option для select
|
|
||||||
export function createGenresOption(name, value = "", isSelected = false) {
|
|
||||||
const option = document.createElement("option");
|
|
||||||
option.value = value || "";
|
|
||||||
option.selected = isSelected;
|
|
||||||
option.text = name;
|
|
||||||
return option;
|
|
||||||
}
|
|
||||||
|
|
||||||
// функция создания ячейки (колонки) таблицы с кнопками удаления/редактирования
|
|
||||||
function createTableButtons(text1, text2, callback1, callback2, styleOfCOlumn) {
|
|
||||||
const button1 = document.createElement("button");
|
|
||||||
button1.setAttribute('class', 'btn_for_game_main_page');
|
|
||||||
button1.onclick = () => {
|
|
||||||
callback1(); // вызывается переданная функция
|
|
||||||
};
|
|
||||||
button1.innerHTML = text1;
|
|
||||||
|
|
||||||
const button2 = document.createElement("button");
|
|
||||||
button2.setAttribute('class', 'btn_for_game_main_page');
|
|
||||||
button2.onclick = () => {
|
|
||||||
callback2(); // вызывается переданная функция
|
|
||||||
};
|
|
||||||
button2.innerHTML = text2;
|
|
||||||
|
|
||||||
const td = document.createElement("td");
|
|
||||||
td.setAttribute('class', styleOfCOlumn);
|
|
||||||
td.appendChild(button1);
|
|
||||||
td.appendChild(button2);
|
|
||||||
return td;
|
|
||||||
}
|
|
||||||
|
|
||||||
// функция создания ячейки (колонки) таблицы с фотографией игры
|
|
||||||
function createTableColumnWithImage(imageSrc, styleOfImage, styleOfColumn) {
|
|
||||||
const td = document.createElement("td");
|
|
||||||
td.setAttribute('class', styleOfColumn);
|
|
||||||
|
|
||||||
const img = document.createElement("img");
|
|
||||||
img.setAttribute('src', imageSrc);
|
|
||||||
img.setAttribute('class', styleOfImage);
|
|
||||||
td.appendChild(img);
|
|
||||||
return td;
|
|
||||||
}
|
|
||||||
// функция создания ячейки (колонки) таблицы с названием и ценой игры
|
|
||||||
function createTableColumnWithSeveralTexts(text1, text2, style1, style2, styleOfColumn) {
|
|
||||||
const td = document.createElement("td");
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.setAttribute('class', style1);
|
|
||||||
a.innerHTML = text1;
|
|
||||||
// ССЫЛКА-ЗАГЛУШКА НА СТРАНИЦУ С ИНФОЙ ОБ ИГРЕ ДЛЯ КАЖДОЙ ИГРЫ
|
|
||||||
a.href = "./dark_nights_page.html";
|
|
||||||
|
|
||||||
// Создание абзаца с ценой игры
|
|
||||||
const p = document.createElement("p");
|
|
||||||
p.setAttribute('class', style2);
|
|
||||||
|
|
||||||
// eslint-disable-next-line prefer-template
|
|
||||||
const fullPrice = text2 + ' руб.';
|
|
||||||
p.innerHTML = fullPrice;
|
|
||||||
|
|
||||||
td.setAttribute('class', styleOfColumn);
|
|
||||||
// Добавление названия игры в ячейку
|
|
||||||
td.appendChild(a);
|
|
||||||
// Добавление цены игры в ячейку
|
|
||||||
td.appendChild(p);
|
|
||||||
return td;
|
|
||||||
}
|
|
||||||
|
|
||||||
// функция создания ячейки (колонки) таблицы с жанром игры
|
|
||||||
function createTableColumnWithGenre(value, style, styleOfCOlumn) {
|
|
||||||
const td = document.createElement("td");
|
|
||||||
const p = document.createElement("p");
|
|
||||||
|
|
||||||
p.innerHTML = value;
|
|
||||||
p.setAttribute('class', style);
|
|
||||||
|
|
||||||
td.setAttribute('class', styleOfCOlumn);
|
|
||||||
td.appendChild(p);
|
|
||||||
|
|
||||||
return td;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Создание строки с игрой при обновлении данных
|
|
||||||
export async function createTableRow(item, editPageCallback, deleteCallback) {
|
|
||||||
console.log(item);
|
|
||||||
const row = document.createElement("tr");
|
|
||||||
row.id = `line-${item.id}`;
|
|
||||||
// ПЕРВЫЙ СТОЛБЕЦ С ФОТКОЙ ИГРЫ. Передаю само фото, стиль для неё и для столбца
|
|
||||||
row.appendChild(createTableColumnWithImage(item.image, 'img-fluid w-100 h-100', 'align-middle p-0 cell1_main_page'));
|
|
||||||
// ВТОРОЙ СТОЛБЕЦ С НАЗВАНИЕМ ИГРЫ, ЦЕНОЙ. Передаю название, цену, стили для них и столбца
|
|
||||||
row.appendChild(createTableColumnWithSeveralTexts(item.name, item.price, 'nav-link active name_of_game_main_page', 'price_of_game_main_page', 'align-middle p-0 cell2_main_page'));
|
|
||||||
// ТРЕТИЙ СТОБЕЦ С ЖАНРОМ ИГРЫ
|
|
||||||
row.appendChild(createTableColumnWithGenre(item.genres.name, 'genre_of_game_main_page', 'align-middle p-0'));
|
|
||||||
// ЧЕТВЁРТЫЙ СТОЛБЕЦ С 2 КНОПКАМИ
|
|
||||||
row.appendChild(createTableButtons("изменить", "удалить", editPageCallback, deleteCallback, 'text-center align-middle p-0'));
|
|
||||||
return row;
|
|
||||||
}
|
|
||||||
213
Lab3/js/lines.js
213
Lab3/js/lines.js
@ -1,213 +0,0 @@
|
|||||||
import {
|
|
||||||
createLine, deleteLine, updateLine, getAllGenreTypes, getAllLines, getLine,
|
|
||||||
} from "./lines-rest-api";
|
|
||||||
import {
|
|
||||||
controls, createGenresOption, createTableRow, imagePlaceholder,
|
|
||||||
} from "./lines-ui";
|
|
||||||
|
|
||||||
// ОТОБРАЖЕНИЕ ВОЗМОЖНЫХ ЖАНРОВ ИГРЫ ПРИ СОЗДАНИИ/ИЗМЕНЕНИИ В SELECT
|
|
||||||
async function drawGenresSelect() {
|
|
||||||
// вызов метода REST API для получения списка жанров
|
|
||||||
const data = await getAllGenreTypes();
|
|
||||||
// очистка содержимого select, удаление всего между тегами <select></select>
|
|
||||||
controls.genresType.innerHTML = '';
|
|
||||||
// пустое значение
|
|
||||||
controls.genresType.appendChild(createGenresOption("Выберите жанр", "", true));
|
|
||||||
// цикл по результату ответа от сервера
|
|
||||||
// используется лямбда-выражение
|
|
||||||
// (item) => {} аналогично function(item) {}
|
|
||||||
data.forEach((genre) => {
|
|
||||||
controls.genresType.appendChild(createGenresOption(genre.name, genre.id));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ОБНОВЛЕНИЕ СОДЕРЖИМОГО TABLE ПРИ СОЗДАНИИ, РЕДАКТИРОВАНИИ, УДАЛЕНИИ
|
|
||||||
export async function drawLinesTable() {
|
|
||||||
console.info("Try to load data");
|
|
||||||
if (!controls.table) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// вызов метода REST API для получения всех записей
|
|
||||||
const data = await getAllLines();
|
|
||||||
// очистка содержимого table, удаление всего между тегами <table></table>
|
|
||||||
controls.table.innerHTML = "";
|
|
||||||
// цикл по результату ответа от сервера с лямбда выражением (сокращение от function)
|
|
||||||
// ДОБАВИЛ async И await
|
|
||||||
data.forEach(async (item) => {
|
|
||||||
// добавление строки в конец таблицы
|
|
||||||
controls.table.appendChild(
|
|
||||||
await createTableRow(
|
|
||||||
item,
|
|
||||||
// функции в качестве параметра
|
|
||||||
// location - адрес текущей страницы, ей меняем адрес на страницу админки
|
|
||||||
() => location.assign(`admin.html?id=${item.id}`),
|
|
||||||
() => removeLine(item.id),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ДОБАВЛЕНИЕ НОВОЙ ЗАПИСИ НА СЕРВЕР, ОБНОВЛЕНИЕ ТАБЛИЦЫ
|
|
||||||
async function addLine(genre, name, price, image) {
|
|
||||||
console.info("Try to add item");
|
|
||||||
// вызов метода REST API для добавления записи
|
|
||||||
const data = await createLine(genre, name, price, image);
|
|
||||||
console.info("Added");
|
|
||||||
console.info(data);
|
|
||||||
// загрузка и заполнение table
|
|
||||||
drawLinesTable();
|
|
||||||
}
|
|
||||||
|
|
||||||
// РЕДАКТИРОВАНИЕ ЗАПИСИ НА СЕРВЕРЕ, ОБНОВЛЕНИЕ ТАБЛИЦЫ
|
|
||||||
async function editLine(id, genre, name, price, image) {
|
|
||||||
console.info("Try to update item");
|
|
||||||
// вызов метода REST API для обновления записи
|
|
||||||
const data = await updateLine(id, genre, name, price, image);
|
|
||||||
console.info("Updated");
|
|
||||||
console.info(data);
|
|
||||||
// загрузка и заполнение table
|
|
||||||
drawLinesTable();
|
|
||||||
}
|
|
||||||
|
|
||||||
// УДАЛЕНИЕ ЗАПИСИ НА СЕРВЕРЕ, ОБНОВЛЕНИЕ ТАБЛИЦЫ
|
|
||||||
async function removeLine(id) {
|
|
||||||
if (!confirm("Удалить игру?")) {
|
|
||||||
console.info("Canceled");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
console.info("Try to remove item");
|
|
||||||
// вызов метода REST API для удаления записи
|
|
||||||
const data = await deleteLine(id);
|
|
||||||
console.info(data);
|
|
||||||
// загрузка и заполнение table
|
|
||||||
drawLinesTable();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ПОЛУЧЕНИЕ ДАННЫХ ФАЙЛА (ФОТКИ)
|
|
||||||
|
|
||||||
async function readFile(file) {
|
|
||||||
const reader = new FileReader();
|
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
// Шаг 1. Чтение файла
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
// Шаг 2. "Возвращение" содержимого, если файл нормально прочитан, через вызов resolve
|
|
||||||
reader.onloadend = () => {
|
|
||||||
const fileContent = reader.result;
|
|
||||||
resolve(fileContent);
|
|
||||||
};
|
|
||||||
// 3. Возвращение ошибки, если файл был прочитан с ошбикой
|
|
||||||
reader.onerror = () => {
|
|
||||||
// Или здесь в случае ошибки
|
|
||||||
reject(new Error("Something went wrong with the file reader."));
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Обновление превью выбранного изображения при изменении/создании
|
|
||||||
async function updateImagePreview() {
|
|
||||||
// получение выбранного файла
|
|
||||||
// возможен выбор нескольких файлов, поэтому надо получить только первый
|
|
||||||
const file = controls.image.files[0];
|
|
||||||
// чтение содержимого файла в виде base64 строки
|
|
||||||
const fileContent = await readFile(file);
|
|
||||||
console.info("base64 ", fileContent);
|
|
||||||
// обновление источника src для тега img с id image-preview
|
|
||||||
controls.imagePreview.src = fileContent;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Функция для обработки создания и редактирования элементов таблицы через страницу admin.html
|
|
||||||
export async function linesPageForm() {
|
|
||||||
console.info("linesPageForm");
|
|
||||||
|
|
||||||
// загрузка и заполнение select со списком товаров
|
|
||||||
drawGenresSelect();
|
|
||||||
|
|
||||||
// аналог function goBack() {}
|
|
||||||
const goBack = () => location.assign("/index.html");
|
|
||||||
|
|
||||||
// Вызов функции обновления превью изображения при возникновении
|
|
||||||
// события onchange в тэге input с id image
|
|
||||||
controls.image.addEventListener("change", () => updateImagePreview());
|
|
||||||
|
|
||||||
// получение параметров GET-запроса из URL
|
|
||||||
// параметры перечислены после символа ?
|
|
||||||
const urlParams = new URLSearchParams(location.search);
|
|
||||||
|
|
||||||
// получение значения конкретного параметра (id)
|
|
||||||
// указан только при редактировании
|
|
||||||
const currentId = urlParams.get("id");
|
|
||||||
// если id задан
|
|
||||||
if (currentId) {
|
|
||||||
try {
|
|
||||||
// вызов метода REST API для получения записи по первичному ключу(id)
|
|
||||||
const line = await getLine(currentId);
|
|
||||||
// заполнение формы для редактирования
|
|
||||||
controls.genresType.value = line.genresId;
|
|
||||||
controls.price.value = line.price;
|
|
||||||
controls.name.value = line.name;
|
|
||||||
// заполнение превью
|
|
||||||
// Если пользователь выбрал изображение, то оно загружается
|
|
||||||
// в тэг image с id image - preview
|
|
||||||
// иначе устанавливается заглушка, адрес которой указан в imagePlaceholder
|
|
||||||
controls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
|
||||||
} catch {
|
|
||||||
// в случае ошибки происходит возврат к странице index
|
|
||||||
goBack();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// обработчик события отправки формы
|
|
||||||
// возникает при нажатии на кнопку (button) с типом submit
|
|
||||||
// кнопка должна находится внутри тега form
|
|
||||||
controls.form.addEventListener("submit", async (event) => {
|
|
||||||
console.info("Form onSubmit");
|
|
||||||
// отключение стандартного поведения формы при отправке
|
|
||||||
// при отправке страница обновляется и JS перестает работать
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
// если форма не прошла валидацию, то ничего делать не нужно
|
|
||||||
if (!controls.form.checkValidity()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let imageBase64 = "";
|
|
||||||
// Получение выбранного пользователем изображения в виде base64 строки
|
|
||||||
// Если пользователь ничего не выбрал, то не нужно сохранять в БД
|
|
||||||
// дефолтное изображение
|
|
||||||
if (controls.imagePreview.src !== imagePlaceholder) {
|
|
||||||
// Загрузка содержимого атрибута src тэга img с id image-preview
|
|
||||||
// Здесь выполняется HTTP запрос с типом GET
|
|
||||||
const result = await fetch(controls.imagePreview.src);
|
|
||||||
// Получение из HTTP-ответа бинарного содержимого
|
|
||||||
const blob = await result.blob();
|
|
||||||
// Получение base64 строки для файла
|
|
||||||
// Здесь выполняется Promise из функции readFile
|
|
||||||
// Promise позволяет писать линейный код для работы с асинхронными методами
|
|
||||||
// без использования обработчиков (callback) с помощью await
|
|
||||||
imageBase64 = await readFile(blob);
|
|
||||||
}
|
|
||||||
|
|
||||||
// если значение параметра запроса не задано,
|
|
||||||
// то значит сейчас делается добавление записи
|
|
||||||
// если не задано, значит это обновление записи
|
|
||||||
if (!currentId) {
|
|
||||||
await addLine(
|
|
||||||
controls.genresType.value,
|
|
||||||
controls.name.value,
|
|
||||||
controls.price.value,
|
|
||||||
imageBase64,
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
await editLine(
|
|
||||||
currentId,
|
|
||||||
controls.genresType.value,
|
|
||||||
controls.name.value,
|
|
||||||
controls.price.value,
|
|
||||||
imageBase64,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// возврат к странице index
|
|
||||||
goBack();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
// модуль валидации формы (проверки данных)
|
|
||||||
|
|
||||||
function validation() {
|
|
||||||
// поиск среди тегов form тех, у которых css класс needs-validation (с bootstrap)
|
|
||||||
const forms = document.querySelectorAll("form.needs-validation");
|
|
||||||
|
|
||||||
for (let i = 0; i < forms.length; i += 1) {
|
|
||||||
const form = forms[i];
|
|
||||||
// добавление для каждой формы обработчика нажатия на кнопку с id = "submit"
|
|
||||||
form.addEventListener("submit", (event) => {
|
|
||||||
// если форма не прошла валидацию (зависит от атрибута type у input)
|
|
||||||
if (!form.checkValidity()) {
|
|
||||||
// отключает стандартное действие (отменяет событие), но будет для
|
|
||||||
// всех элементов до тех пор, пока не отменит это методом ниже
|
|
||||||
event.preventDefault();
|
|
||||||
// предотвращение распространения preventDefault на другие объекты
|
|
||||||
event.stopPropagation();
|
|
||||||
}
|
|
||||||
// добавление к форме класса was-validated
|
|
||||||
form.classList.add("was-validated");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Экспортироваться будет сама функция
|
|
||||||
export default validation;
|
|
||||||
@ -1,120 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Steam</title>
|
|
||||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
|
||||||
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
<nav class="navbar navbar-expand-md navbar-dark">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<a class="nav-link active" href="./index.html"> Главная </a>
|
|
||||||
|
|
||||||
<!--КНОПКА С ТРЕМЯ ПОЛОСКАМИ ПРИ УМЕНЬШЕНИИ-->
|
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
|
||||||
<div class="navbar-nav">
|
|
||||||
<a class="nav-link active" href="./basket.html">Корзина</a>
|
|
||||||
<a class="nav-link active" href="./library.html">Библиотека</a>
|
|
||||||
<a class="nav-link active" href="./entry.html">Вход</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="container-fluid p-2">
|
|
||||||
<table class="table table-borderless table_of_library">
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td class = "align-middle p-0 cell1_library">
|
|
||||||
<img src="Dark Nights preview.jpg" alt="Dark Nights with Poe & Munro" class="img-fluid">
|
|
||||||
</td>
|
|
||||||
<td class = "align-middle p-0 cell2_library">
|
|
||||||
<a class = "nav-link library_name_of_game" href="./dark_nights_page.html">Dark Nights with Poe and Munro</a>
|
|
||||||
</td>
|
|
||||||
<td class = "align-middle text-center p-0">
|
|
||||||
<select>
|
|
||||||
<option disabled selected>ИГРА</option>
|
|
||||||
<option>Играть</option>
|
|
||||||
<option>Установить</option>
|
|
||||||
<option>Удалить</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class = "align-middle p-0 cell1_library" >
|
|
||||||
<img src="Song of Farca preview.jpg" alt="Song of Farca" class="img-fluid">
|
|
||||||
</td>
|
|
||||||
<td class = "align-middle p-0 cell2_library" >
|
|
||||||
<a class = "nav-link library_name_of_game" href="./dark_nights_page.html">Song of Farca</a>
|
|
||||||
</td>
|
|
||||||
<td class = "align-middle text-center p-0">
|
|
||||||
<select>
|
|
||||||
<option disabled selected>ИГРА</option>
|
|
||||||
<option>Играть</option>
|
|
||||||
<option>Установить</option>
|
|
||||||
<option>Удалить</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class = "align-middle p-0 cell1_library">
|
|
||||||
<img src="Papers, Please preview.jpg" alt="Papers, Please" class="img-fluid">
|
|
||||||
</td>
|
|
||||||
<td class = "align-middle p-0 cell2_library">
|
|
||||||
<a class = "nav-link library_name_of_game" href="./dark_nights_page.html"> Papers, Please </a>
|
|
||||||
</td>
|
|
||||||
<td class = "align-middle text-center p-0">
|
|
||||||
<select>
|
|
||||||
<option disabled selected>ИГРА</option>
|
|
||||||
<option>Играть</option>
|
|
||||||
<option>Установить</option>
|
|
||||||
<option>Удалить</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td class = "align-middle p-0 cell1_library">
|
|
||||||
<img src="Ten Dates preview.jpg" alt="Ten Dates" class="img-fluid">
|
|
||||||
</td>
|
|
||||||
<td class = "align-middle p-0 cell2_library">
|
|
||||||
<a class = "nav-link library_name_of_game" href="./dark_nights_page.html">Ten Dates</a>
|
|
||||||
</td>
|
|
||||||
<td class = "align-middle text-center p-0">
|
|
||||||
<select>
|
|
||||||
<option disabled selected>ИГРА</option>
|
|
||||||
<option>Играть</option>
|
|
||||||
<option>Установить</option>
|
|
||||||
<option>Удалить</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
</table>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
|
||||||
Сайт Чернышева Георгия, ПИбд-22
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
4700
Lab3/package-lock.json
generated
4700
Lab3/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,26 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "lab3",
|
|
||||||
"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.2.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"http-server": "14.1.1",
|
|
||||||
"vite": "4.4.9",
|
|
||||||
"eslint": "8.50.0",
|
|
||||||
"eslint-config-airbnb-base": "15.0.0",
|
|
||||||
"eslint-plugin-import": "2.28.1",
|
|
||||||
"json-server": "0.17.4",
|
|
||||||
"npm-run-all": "4.1.5"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
323
Lab3/style.css
323
Lab3/style.css
@ -1,323 +0,0 @@
|
|||||||
html {
|
|
||||||
position: relative;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #2e4150;
|
|
||||||
margin-bottom: 70px; /*Равно высоте подвала*/
|
|
||||||
}
|
|
||||||
main {
|
|
||||||
height: 100% !important;
|
|
||||||
}
|
|
||||||
select {
|
|
||||||
background-color: #385a80;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 2.5vw;
|
|
||||||
border: none;
|
|
||||||
border-radius: 2px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
select option {
|
|
||||||
background-color: #385a80;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: auto;
|
|
||||||
border-radius: 2px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
nav {
|
|
||||||
font-family: sans-serif;
|
|
||||||
background-color:#385a80 !important;
|
|
||||||
min-height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: #385a80;
|
|
||||||
height: 70px;
|
|
||||||
max-height: 100px;
|
|
||||||
width: 100%;
|
|
||||||
font-family: sans-serif;
|
|
||||||
color:white;
|
|
||||||
font-size: calc(2vw + 8px) !important;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.navbar > div > a {
|
|
||||||
font-size: calc(18px + 2vw) !important;
|
|
||||||
}
|
|
||||||
.navbar-nav > a {
|
|
||||||
font-family: sans-serif;
|
|
||||||
color: white;
|
|
||||||
font-size: calc(12px + 2vw);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-fluid > a {
|
|
||||||
font-family: sans-serif;
|
|
||||||
color: white;
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
/* ГЛАВНАЯ СТРАНИЦА */
|
|
||||||
.btn_for_game_main_page {
|
|
||||||
border: none;
|
|
||||||
/* size: 0.5rem; */
|
|
||||||
background-color: #385a80 !important;
|
|
||||||
color: white;
|
|
||||||
font-size: calc(1vh + 0.5vw) !important;
|
|
||||||
margin-right: 0.3rem;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
.btn_for_game_main_page {
|
|
||||||
margin-bottom: 10%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.btn_for_game_main_page {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.name_of_game_main_page {
|
|
||||||
color: white;
|
|
||||||
font-size: 3vw !important;
|
|
||||||
margin-left: 1vw !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price_of_game_main_page {
|
|
||||||
color: white;
|
|
||||||
font-size: 2.7vw !important;
|
|
||||||
margin-left: 1vw !important;
|
|
||||||
font-weight: 600 !important;
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-top: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .img-fluid {
|
|
||||||
max-height: 100%;
|
|
||||||
} */
|
|
||||||
.genre_of_game_main_page {
|
|
||||||
color: white;
|
|
||||||
font-size: 1.5vw !important;
|
|
||||||
margin-left: 0 !important;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table_of_main_page {
|
|
||||||
border-collapse: separate;
|
|
||||||
}
|
|
||||||
@media (max-width: 420px) {
|
|
||||||
.table_of_main_page {
|
|
||||||
border-spacing: 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 420px) {
|
|
||||||
.table_of_main_page {
|
|
||||||
border-spacing: 0 0.5vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.cell1_main_page {
|
|
||||||
width: 20% !important;
|
|
||||||
}
|
|
||||||
.cell2_main_page {
|
|
||||||
width: 55% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
main > .container-fluid {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn_searching {
|
|
||||||
background-color: #385a80 !important;
|
|
||||||
color: white !important;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.searching_input {
|
|
||||||
size: 2vw !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn_adding_game {
|
|
||||||
background-color: #385a80 !important;
|
|
||||||
color: white !important;
|
|
||||||
font-weight: bold !important;
|
|
||||||
border: none !important;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* СТРАНИЦА С ОПИСАНИЕМ ИГРЫ */
|
|
||||||
|
|
||||||
.info_about_game_pic_and_name {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 40% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info_about_game_name {
|
|
||||||
color: white;
|
|
||||||
font-weight: 700;
|
|
||||||
align-items: center !important;
|
|
||||||
font-size: calc(3vw + 2vh) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info_about_game_text {
|
|
||||||
color: white;
|
|
||||||
align-items: center !important;
|
|
||||||
font-size: calc(2vw + 2vh) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info_about_game_add_to_basket_button {
|
|
||||||
background-color: #385a80;
|
|
||||||
color: white;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: calc(2.5vw + 1.5vh);
|
|
||||||
border: none;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
.info_about_game_div_button {
|
|
||||||
border: 1px white;
|
|
||||||
align-items: center !important;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* СТРАНИЦЫ АККАУНТА */
|
|
||||||
.account_text {
|
|
||||||
font-family: sans-serif;
|
|
||||||
color: white;
|
|
||||||
font-size: calc(2.5vw + 1.5vh);
|
|
||||||
font-weight: 600;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account_btn {
|
|
||||||
background-color:#385a80;
|
|
||||||
color: white;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: calc(2.5vw + 1.5vh);
|
|
||||||
border: none;
|
|
||||||
border-radius: 3px;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
}
|
|
||||||
.mt-25vh {
|
|
||||||
margin-top: 25vh;
|
|
||||||
}
|
|
||||||
.mt-20vh {
|
|
||||||
margin-top: 20vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* БИБЛИОТЕКА */
|
|
||||||
.library_name_of_game {
|
|
||||||
color: white;
|
|
||||||
font-size: calc(3vw + 0.5vh);
|
|
||||||
font-weight: 600;
|
|
||||||
margin-left: 0.5vw;
|
|
||||||
}
|
|
||||||
.table_of_library {
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0 0.5vw;
|
|
||||||
}
|
|
||||||
.cell1_library {
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
.cell2_library {
|
|
||||||
width: 60%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* КОРЗИНА */
|
|
||||||
.basket_name_of_game {
|
|
||||||
color: white;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 3vw;
|
|
||||||
font-size: auto;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.basket_price_of_games{
|
|
||||||
color: white;
|
|
||||||
font-size: 3vw;
|
|
||||||
margin-bottom: auto;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.basket_delete_button {
|
|
||||||
font-family: sans-serif;
|
|
||||||
border: none !important;
|
|
||||||
background: none !important;
|
|
||||||
color: white !important;
|
|
||||||
font-size: 3vw !important;
|
|
||||||
}
|
|
||||||
.basket_buy_button {
|
|
||||||
background-color: #385a80;
|
|
||||||
color: white;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 3vw;
|
|
||||||
border: none;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
.cell1_basket {
|
|
||||||
width: 20% !important;
|
|
||||||
}
|
|
||||||
.cell2_basket {
|
|
||||||
width: 50% !important;
|
|
||||||
vertical-align: middle;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.cell3_basket {
|
|
||||||
width: 20% !important;
|
|
||||||
}
|
|
||||||
tfoot {
|
|
||||||
border-color: #2e4150;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* СТРАНИЦА АДМИНА */
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
.admin_panel {
|
|
||||||
margin-left: 20%;
|
|
||||||
margin-right: 20%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.admin_panel {
|
|
||||||
margin-left: 5%;
|
|
||||||
margin-right: 5%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.span_admin_panel {
|
|
||||||
background-color: #385a80 !important;
|
|
||||||
color: white !important;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
.span_admin_panel {
|
|
||||||
font-size: 1.5vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.span_admin_panel {
|
|
||||||
font-size: 3vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn_admin_panel {
|
|
||||||
border: none;
|
|
||||||
background-color: #385a80 !important;
|
|
||||||
color: white;
|
|
||||||
font-size: calc(1.5vh + 1.5vw) !important;
|
|
||||||
border-radius: 3px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#image-preview {
|
|
||||||
width: 350px;
|
|
||||||
height: 200px;
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import { resolve } from "path";
|
|
||||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
||||||
import { defineConfig } from "vite";
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
build: {
|
|
||||||
sourcemap: true,
|
|
||||||
emptyOutDir: true,
|
|
||||||
rollupOptions: {
|
|
||||||
input: {
|
|
||||||
main: resolve(__dirname, 'index.html'),
|
|
||||||
basket: resolve(__dirname, 'basket.html'),
|
|
||||||
library: resolve(__dirname, 'library.html'),
|
|
||||||
entry: resolve(__dirname, 'entry.html'),
|
|
||||||
create: resolve(__dirname, 'create_account.html'),
|
|
||||||
info: resolve(__dirname, 'dark_nights_page.html'),
|
|
||||||
admin: resolve(__dirname, 'admin.html'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user