Lab3
This commit is contained in:
parent
ba9488cf92
commit
f7f945f7d7
BIN
Lab3/IP_Otchet_3LB_Yakovlev.docx
Normal file
BIN
Lab3/IP_Otchet_3LB_Yakovlev.docx
Normal file
Binary file not shown.
87
Lab3/Lab3/add-game.html
Normal file
87
Lab3/Lab3/add-game.html
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru" class="h-100" data-bs-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Set game</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.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 rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-lg">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand">
|
||||||
|
<i class="bi-solid bi-controller"></i>
|
||||||
|
GAMEPAD.RU
|
||||||
|
</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">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a class="nav-link active" href="index.html">Главная</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page2.html">Каталог</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page3.html">Новинки</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page4.html">Корзина</a><li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page5.html">Личный кабинет</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid">
|
||||||
|
<div class="main d-flex mt-0 row pt-3 ps-3 ">
|
||||||
|
<div class="mb-0 h4 mx-auto text-center">Настройка поста</div>
|
||||||
|
<div class="text-center p-3">
|
||||||
|
<img id="image-preview" src="https://via.placeholder.com/450x250" alt="placeholder" width="50%" accept="image/*">
|
||||||
|
</div>
|
||||||
|
<form id="items-form" class="needs-validation">
|
||||||
|
<div class="w-50">
|
||||||
|
<label class="form-label" for="image">Изображение</label>
|
||||||
|
<input id="image" type="file" accept="image/*" class="col-md-4 form-control" name="image">
|
||||||
|
</div>
|
||||||
|
<div class="w-25">
|
||||||
|
<label for="item" class="form-label">Вид товара</label>
|
||||||
|
<select id="item" class="form-select" name="selected" required></select>
|
||||||
|
</div>
|
||||||
|
<div class="w-25">
|
||||||
|
<label for="genre" class="form-label">Жанр</label>
|
||||||
|
<select id="genre" class="form-select" name="selectGen" required></select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Цена</label>
|
||||||
|
<input id="price" type="number" class="form-control w-25" value="0.00" min="100.00" step="0.50" required>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>Описание</label>
|
||||||
|
<textarea id="description" cols="70" rows="6" class="form-control w-50" name="description" required></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="text-center py-4">
|
||||||
|
<a href="/page3.html" class="btn btn-primary">Назад</a>
|
||||||
|
<button class="btn btn-primary" type="submit">Сохранить</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="push"></div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-end align-items-right">
|
||||||
|
GAMEPAD.RU © 2023
|
||||||
|
</footer>
|
||||||
|
<script type="module">
|
||||||
|
import validation from "./js/validation";
|
||||||
|
import { linesPageForm } from "./js/lines";
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
validation();
|
||||||
|
linesPageForm();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
Lab3/Lab3/css/banner.css
Normal file
24
Lab3/Lab3/css/banner.css
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
|
||||||
|
#banner {
|
||||||
|
margin: 0px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner img {
|
||||||
|
border: 0px solid #3c3c3f;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner img.banner-show{
|
||||||
|
width: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 1s, visibility 0s;
|
||||||
|
}
|
||||||
|
#banner img.banner-hide{
|
||||||
|
height:0;
|
||||||
|
width:0;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity 1s, visibility 0s 1s;
|
||||||
|
}
|
||||||
72
Lab3/Lab3/data.json
Normal file
72
Lab3/Lab3/data.json
Normal file
File diff suppressed because one or more lines are too long
74
Lab3/Lab3/gamepage.html
Normal file
74
Lab3/Lab3/gamepage.html
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru" class="h-100">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Gamepad.ru</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
|
||||||
|
|
||||||
|
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="node_modules/@fortawsome/fontawsome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-lg">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand">
|
||||||
|
<i class="bi-solid bi-controller"></i>
|
||||||
|
GAMEPAD.RU
|
||||||
|
</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">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a class="nav-link active" href="index.html">Главная</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page2.html">Каталог</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page3.html">Новинки</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page4.html">Корзина</a><li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page5.html">Личный кабинет</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid main d-flex flex-column" style="color:white;">
|
||||||
|
<div class="row">
|
||||||
|
<div class="h4 p-2 col-4">//Название игры//</div>
|
||||||
|
<div class=" pt-2 col">
|
||||||
|
<a class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .65rem;" href="./add-game.html" type="submit">Редактировать</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ps-3"><img src="./images/poe.jpg" width="500px" ></div>
|
||||||
|
<div class="row p-3">
|
||||||
|
<div class="col">
|
||||||
|
Описание:<br>
|
||||||
|
Path of Exile — это бесплатная многопользовательская ролевая игра, действие которой разворачивается в тёмном фэнтезийном мире Рэкласта.
|
||||||
|
В игре представлена глубокая система настройки персонажа с обширным деревом пассивных навыков, ячейками для камней умений, огромным количеством предметов и системой для создания оружия и снаряжения.
|
||||||
|
Вы можете выбрать один из семи начальных классов и 18 подклассов. Играйте в одиночку или вместе с пятью друзьями.
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
Системные требования:<br>
|
||||||
|
Рекомендованные:<br>
|
||||||
|
ОС: Windows 10<br>
|
||||||
|
Процессор: x64-совместимый 4-х ядерный 3,2 ГГц<br>
|
||||||
|
Оперативная память: 16 GB ОЗУ<br>
|
||||||
|
Видеокарта: NVIDIA® GeForce® GTX 1050 Ti или ATI Radeon™ RX560<br>
|
||||||
|
DirectX: версии 11<br>
|
||||||
|
Сеть: Широкополосное подключение к интернету<br>
|
||||||
|
Место на диске: 40 GB<br>
|
||||||
|
Дополнительно: рекомендуется использовать твердотельный накопитель<br>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="push"></div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-end align-items-right">
|
||||||
|
GAMEPAD.RU © 2023
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
Lab3/Lab3/images/GoW.png
Normal file
BIN
Lab3/Lab3/images/GoW.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
BIN
Lab3/Lab3/images/avatar.png
Normal file
BIN
Lab3/Lab3/images/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
Lab3/Lab3/images/eldenring.jpg
Normal file
BIN
Lab3/Lab3/images/eldenring.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
Lab3/Lab3/images/gameLog.png
Normal file
BIN
Lab3/Lab3/images/gameLog.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
Lab3/Lab3/images/logo.png
Normal file
BIN
Lab3/Lab3/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
Lab3/Lab3/images/poe.jpg
Normal file
BIN
Lab3/Lab3/images/poe.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
Lab3/Lab3/images/risk-of-rain-returns.jpg
Normal file
BIN
Lab3/Lab3/images/risk-of-rain-returns.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
Lab3/Lab3/images/sekiro.jpg
Normal file
BIN
Lab3/Lab3/images/sekiro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
Lab3/Lab3/images/terraria.jpg
Normal file
BIN
Lab3/Lab3/images/terraria.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
111
Lab3/Lab3/index.html
Normal file
111
Lab3/Lab3/index.html
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Gamepad.ru</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.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 rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-lg">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand">
|
||||||
|
<i class="bi-solid bi-controller"></i>
|
||||||
|
GAMEPAD.RU
|
||||||
|
</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">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a class="nav-link active" href="index.html">Главная</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page2.html">Каталог</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page3.html">Новинки</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page4.html">Корзина</a><li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page5.html">Личный кабинет</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<!---------------------------------------------------->
|
||||||
|
<main class="">
|
||||||
|
<div class="main flex-column mx-auto">
|
||||||
|
<div class="row mx-auto">
|
||||||
|
<div class="img pt-4 ps-4 mt-4 col-8">
|
||||||
|
<a href="gamepage.html"><img class="img" src="images/poe.jpg" width="100%"></a>
|
||||||
|
</div>
|
||||||
|
<div class="pe-3 flex-column col-4 div">
|
||||||
|
<div class="pt-4 ps-2">Популярные новинки:</div>
|
||||||
|
<div><a href="gamepage.html"><img class="p-2" src="images/poe.jpg" width="100%"></a></div>
|
||||||
|
<div><a href="gamepage.html"><img class="p-2" src="images/poe.jpg" width="100%"></a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mx-auto">
|
||||||
|
<div class="flex-column pt-3 col-2 categ">
|
||||||
|
<div class="ps-3 pb-3"><i class="bi bi-dpad"></i>Жанры:</div>
|
||||||
|
<div class="ps-4 pb-3">Шутеры</div>
|
||||||
|
<div class="ps-4 pb-3">Экшен</div>
|
||||||
|
<div class="ps-4 pb-3">Приключения</div>
|
||||||
|
<div class="ps-4 pb-3">Выживание</div>
|
||||||
|
<div class="ps-4 pb-3">Стратегии</div>
|
||||||
|
<div class="ps-4 pb-3">Ролевые</div>
|
||||||
|
<div class="ps-4 pb-3">Симуляторы</div>
|
||||||
|
<div class="ps-4 pb-3">Аркады</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-column pb-4 col">
|
||||||
|
<div class="pt-3 ps-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4 pe-0"><a href="gamepage.html"><img src="images/poe.jpg" width="100%"></a></div>
|
||||||
|
<div class="col my-auto destext">Path of Exile - это сетевая ролевая игра активного действия в мрачном колдовском мире Рэкласта. Игра полностью бесплатна.</div>
|
||||||
|
<!--<div class="ps-4 pt-2">
|
||||||
|
<a class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .65rem;" href="./add-game.html" type="submit">Редактировать</a>
|
||||||
|
</div>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-3 ps-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4 pe-0"><a href="gamepage.html"><img src="images/poe.jpg" width="100%"></a></div>
|
||||||
|
<div class="col my-auto destext">Path of Exile - это сетевая ролевая игра активного действия в мрачном колдовском мире Рэкласта. Игра полностью бесплатна.</div>
|
||||||
|
<!--<div class="ps-4 pt-2">
|
||||||
|
<a class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .65rem;" href="./add-game.html" type="submit">Редактировать</a>
|
||||||
|
</div>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-3 ps-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4 pe-0"><a href="gamepage.html"><img src="images/poe.jpg" width="100%"></a></div>
|
||||||
|
<div class="col my-auto destext">Path of Exile - это сетевая ролевая игра активного действия в мрачном колдовском мире Рэкласта. Игра полностью бесплатна.</div>
|
||||||
|
<!--<div class="ps-4 pt-2">
|
||||||
|
<a class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .65rem;" href="./add-game.html" type="submit">Редактировать</a>
|
||||||
|
</div>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-3 ps-4">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4 pe-0"><a href="gamepage.html"><img src="images/poe.jpg" width="100%"></a></div>
|
||||||
|
<div class="col my-auto destext">Path of Exile - это сетевая ролевая игра активного действия в мрачном колдовском мире Рэкласта. Игра полностью бесплатна.</div>
|
||||||
|
<!--<div class="ps-4 pt-2">
|
||||||
|
<a class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .4rem; --bs-btn-font-size: .65rem;" href="./add-game.html" type="submit">Редактировать</a>
|
||||||
|
</div>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="push"></div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer d-flex flex-shrink-0 justify-content-end">
|
||||||
|
GAMEPAD.RU © 2023
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
35
Lab3/Lab3/js/banner.js
Normal file
35
Lab3/Lab3/js/banner.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import "../css/banner.css";
|
||||||
|
|
||||||
|
function myBanner(root){
|
||||||
|
console.info("Loaded");
|
||||||
|
|
||||||
|
const banners = document.querySelectorAll(`${root} img`);
|
||||||
|
|
||||||
|
for(let i = 0;i<banners.length;i+=1){
|
||||||
|
banners[i].setAttribute("class", "banner-hide");
|
||||||
|
}
|
||||||
|
|
||||||
|
let old = banners.length-1;
|
||||||
|
let current = 0;
|
||||||
|
|
||||||
|
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, 6000);
|
||||||
|
}
|
||||||
|
|
||||||
|
loop();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default myBanner;
|
||||||
42
Lab3/Lab3/js/lines-modal.js
Normal file
42
Lab3/Lab3/js/lines-modal.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import {Modal} from "bootstrap";
|
||||||
|
import { cntrls, imagePlaceholder } from "./lines-ui";
|
||||||
|
|
||||||
|
const modal = document.getElementById("items-update");
|
||||||
|
|
||||||
|
const myModal = modal ? new Modal(modal, {}) : null;
|
||||||
|
|
||||||
|
const modalTitle = document.getElementById("items-update-title");
|
||||||
|
|
||||||
|
function resetValues(){
|
||||||
|
cntrls.lineId.value = "";
|
||||||
|
cntrls.itemsType.value = "";
|
||||||
|
cntrls.price.value = parseFloat(0).toFixed(2);
|
||||||
|
cntrls.description.value = "";
|
||||||
|
cntrls.genre.value = "";
|
||||||
|
cntrls.image.value = "";
|
||||||
|
cntrls.imagePreview.src = imagePlaceholder;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function showUpdateModal(item){
|
||||||
|
modalTitle.innerHTML = item === null ? "Добавить" : "Изменить";
|
||||||
|
console.info(item);
|
||||||
|
|
||||||
|
if(item){
|
||||||
|
cntrls.lineId.value = item.id;
|
||||||
|
cntrls.itemsType.value = item.itemsId;
|
||||||
|
cntrls.price.value = item.price;
|
||||||
|
cntrls.description.value = item.description;
|
||||||
|
cntrls.genre.value = item.genre;
|
||||||
|
cntrls.imagePreview.src = item.image ? item.image : imagePlaceholder;
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
resetValues();
|
||||||
|
}
|
||||||
|
myModal.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
export function hideUpdateModal(){
|
||||||
|
resetValues();
|
||||||
|
cntrls.form.classList.remove("was-validated");
|
||||||
|
myModal.hide();
|
||||||
|
}
|
||||||
96
Lab3/Lab3/js/lines-rest-api.js
Normal file
96
Lab3/Lab3/js/lines-rest-api.js
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
const serverUrl = "http://localhost:8081";
|
||||||
|
|
||||||
|
export async function getAllItemTypes(){
|
||||||
|
const response = await fetch(`${serverUrl}/items`);
|
||||||
|
if(!response.ok){
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getAllGenres(){
|
||||||
|
const response = await fetch(`${serverUrl}/genres`);
|
||||||
|
if(!response.ok){
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getLine(id){
|
||||||
|
const response = await fetch(`${serverUrl}/lines/${id}?_expand=items`);
|
||||||
|
console.info(response);
|
||||||
|
if(!response.ok){
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getAllLines(){
|
||||||
|
const response = await fetch(`${serverUrl}/lines?_expand=items&_expand=genres`);
|
||||||
|
|
||||||
|
if(!response.ok){
|
||||||
|
throw response.statusText;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createLineObject(item, price, description, genre, image){
|
||||||
|
return {
|
||||||
|
itemsId: item,
|
||||||
|
price: parseFloat(price).toFixed(2),
|
||||||
|
description: description,
|
||||||
|
genresId: genre,
|
||||||
|
image: image,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createLine(item, price, description, genre, image) {
|
||||||
|
const itemObject = createLineObject(item, price, description, genre,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();
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateLine(id, item, price, description, genre, image){
|
||||||
|
const itemObject = createLineObject(item, price, description, genre, 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();
|
||||||
|
}
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
86
Lab3/Lab3/js/lines-ui.js
Normal file
86
Lab3/Lab3/js/lines-ui.js
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
export const imagePlaceholder = "https://via.placeholder.com/200";
|
||||||
|
|
||||||
|
export const cntrls = {
|
||||||
|
button: document.getElementById("items-add"),
|
||||||
|
table: document.querySelector("#items-table tbody"),
|
||||||
|
form: document.getElementById("items-form"),
|
||||||
|
lineId: document.getElementById("items-line-id"),
|
||||||
|
itemsType: document.getElementById("item"),
|
||||||
|
genre: document.getElementById("genre"),
|
||||||
|
price: document.getElementById("price"),
|
||||||
|
description: document.getElementById("description"),
|
||||||
|
image: document.getElementById("image"),
|
||||||
|
imagePreview: document.getElementById("image-preview"),
|
||||||
|
};
|
||||||
|
|
||||||
|
export function createItemsOption(name, value = "", isSelected = false){
|
||||||
|
const option = document.createElement("option");
|
||||||
|
option.value = value || "";
|
||||||
|
option.selected = isSelected;
|
||||||
|
option.text = name;
|
||||||
|
return option;
|
||||||
|
}
|
||||||
|
|
||||||
|
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) =>{
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
callback();
|
||||||
|
};
|
||||||
|
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.appendChild(a);
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTableColumn(value){
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.classList.add("my-auto", "w-25", "px-5");
|
||||||
|
td.textContent = value;
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTableDescription(value){
|
||||||
|
const td = document.createElement("td");
|
||||||
|
const div = document.createElement("div");
|
||||||
|
td.classList.add("w-50");
|
||||||
|
div.textContent = value;
|
||||||
|
div.classList.add("d-inline-block", "align-middle", "p-2");
|
||||||
|
td.appendChild(div);
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTableImage(image){
|
||||||
|
const td = document.createElement("td");
|
||||||
|
td.classList.add("w-25");
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src = image;
|
||||||
|
img.classList.add("w-100");
|
||||||
|
td.appendChild(img);
|
||||||
|
return td;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createTableRow(item, editPageCallback, deleteCallback){
|
||||||
|
|
||||||
|
const div = document.createElement("div");
|
||||||
|
|
||||||
|
const row = document.createElement("tr");
|
||||||
|
row.id = `line-${item.id}`;
|
||||||
|
div.classList.add("p-2");
|
||||||
|
if(item.image){
|
||||||
|
row.appendChild(createTableImage(item.image));
|
||||||
|
}
|
||||||
|
row.appendChild(createTableDescription(item.description));
|
||||||
|
row.appendChild(createTableColumn("Цена: "+item.price+"\nЖанр: "+item.genres.name));
|
||||||
|
//row.appendChild(createTableAnchor("fa-pencil",editCallback));
|
||||||
|
row.appendChild(createTableAnchor("fa-pen-to-square", editPageCallback));
|
||||||
|
row.appendChild(createTableAnchor("fa-trash", deleteCallback));
|
||||||
|
div.appendChild(row);
|
||||||
|
return div;
|
||||||
|
}
|
||||||
227
Lab3/Lab3/js/lines.js
Normal file
227
Lab3/Lab3/js/lines.js
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
|
||||||
|
import {getAllItemTypes, getLine, createLine, getAllLines, deleteLine, updateLine, getAllGenres} from "./lines-rest-api";
|
||||||
|
import {cntrls, createItemsOption, imagePlaceholder, createTableRow} from "./lines-ui";
|
||||||
|
import { showUpdateModal, hideUpdateModal } from "./lines-modal";
|
||||||
|
|
||||||
|
async function drawItemsSelect(){
|
||||||
|
const data = await getAllItemTypes();
|
||||||
|
cntrls.itemsType.innerHTML = "";
|
||||||
|
cntrls.itemsType.appendChild(createItemsOption("Выберите значение", "", true));
|
||||||
|
data.forEach((item)=>{
|
||||||
|
cntrls.itemsType.appendChild(createItemsOption(item.name, item.id));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function drawGenresSelect(){
|
||||||
|
console.info("drawGenres");
|
||||||
|
const data = await getAllGenres();
|
||||||
|
cntrls.genre.innerHTML = "";
|
||||||
|
cntrls.genre.appendChild(createItemsOption("Выберите значение", "", true));
|
||||||
|
data.forEach((item)=>{
|
||||||
|
cntrls.genre.appendChild(createItemsOption(item.name, item.id));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function readFile(file){
|
||||||
|
const reader = new FileReader();
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
|
||||||
|
reader.onloadend = () =>{
|
||||||
|
const fileContent = reader.result;
|
||||||
|
resolve(fileContent);
|
||||||
|
};
|
||||||
|
|
||||||
|
reader.onerror = () => {
|
||||||
|
reject(new Error("oops, something went wrong with the file reader."));
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function drawLinesTable(){
|
||||||
|
console.info("Try to load data");
|
||||||
|
if(!cntrls.table){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await getAllLines();
|
||||||
|
|
||||||
|
console.info(data);
|
||||||
|
|
||||||
|
cntrls.table.innerHTML = "";
|
||||||
|
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
cntrls.table.appendChild(
|
||||||
|
createTableRow(
|
||||||
|
item,
|
||||||
|
//()=> showUpdateModal(item),
|
||||||
|
()=> location.assign(`add-game.html?id=${item.id}`),
|
||||||
|
()=> removeLine(item.id),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function addLine(item, price, description,genre, image){
|
||||||
|
console.info("Try to add item");
|
||||||
|
|
||||||
|
const data = await createLine(item,price,description,genre,image);
|
||||||
|
console.info("Added");
|
||||||
|
console.info(data);
|
||||||
|
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function removeLine(id){
|
||||||
|
if(!confirm("Y/N?")){
|
||||||
|
console.info("canceled");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.info("try to remove item");
|
||||||
|
|
||||||
|
const data = await deleteLine(id);
|
||||||
|
console.info(data);
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function editLine(id, item, price, description,genre, image){
|
||||||
|
console.info("try ro update");
|
||||||
|
|
||||||
|
const data = await updateLine(id, item, price, description,genre, image);
|
||||||
|
console.info("Upd");
|
||||||
|
console.info(data);
|
||||||
|
drawLinesTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateImagePreview(){
|
||||||
|
const file = cntrls.image.files[0];
|
||||||
|
const fileContent = await readFile(file);
|
||||||
|
console.info("base64 ", fileContent);
|
||||||
|
cntrls.imagePreview.src = fileContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function linesForm(){
|
||||||
|
console.info("linesForm");
|
||||||
|
|
||||||
|
drawItemsSelect();
|
||||||
|
|
||||||
|
drawLinesTable();
|
||||||
|
|
||||||
|
cntrls.image.addEventListener("change", ()=>updateImagePreview());
|
||||||
|
|
||||||
|
//cntrls.button.addEventListener("click",()=>showUpdateModal(null));
|
||||||
|
|
||||||
|
cntrls.form.addEventListener("submit", async (event) =>{
|
||||||
|
console.info("Form inSubmit");
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
if(!cntrls.form.checkValidity()){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let imageBase64 = "";
|
||||||
|
|
||||||
|
if(cntrls.imagePreview.src !== imagePlaceholder){
|
||||||
|
const result = await fetch(cntrls.imagePreview.src);
|
||||||
|
|
||||||
|
const blob = await result.blob();
|
||||||
|
|
||||||
|
imageBase64 = await readFile(blob);
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentId = cntrls.lineId.value;
|
||||||
|
|
||||||
|
if(!currentId){
|
||||||
|
await addLine(
|
||||||
|
cntrls.itemsType.value,
|
||||||
|
cntrls.price.value,
|
||||||
|
cntrls.description.value,
|
||||||
|
cntrls.genre.value,
|
||||||
|
cntrls.imagePreview.src = imageBase64,
|
||||||
|
);
|
||||||
|
}else{
|
||||||
|
await editLine(
|
||||||
|
currentId,
|
||||||
|
cntrls.itemsType.value,
|
||||||
|
cntrls.price.value,
|
||||||
|
cntrls.description.value,
|
||||||
|
cntrls.genre.value,
|
||||||
|
imageBase64,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
hideUpdateModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function linesPageForm(){
|
||||||
|
console.info("linesPageForm");
|
||||||
|
|
||||||
|
drawItemsSelect();
|
||||||
|
drawGenresSelect();
|
||||||
|
|
||||||
|
const goBack = () => location.assign("/page3.html");
|
||||||
|
|
||||||
|
cntrls.image.addEventListener("change", () => updateImagePreview());
|
||||||
|
|
||||||
|
const urlParams = new URLSearchParams(location.search);
|
||||||
|
|
||||||
|
const currentId = urlParams.get("id");
|
||||||
|
|
||||||
|
if(currentId){
|
||||||
|
try{
|
||||||
|
const line = await getLine(currentId);
|
||||||
|
|
||||||
|
cntrls.itemsType.value = line.itemsId;
|
||||||
|
cntrls.price.value = line.price;
|
||||||
|
cntrls.description.value = line.description;
|
||||||
|
cntrls.genre.value = line.genresId;
|
||||||
|
cntrls.imagePreview.src = line.image ? line.image : imagePlaceholder;
|
||||||
|
} catch {
|
||||||
|
goBack();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cntrls.form.addEventListener("submit", async (event) => {
|
||||||
|
console.info("Form onSubmit");
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
if(!cntrls.form.checkValidity()){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let imageBase64 = "";
|
||||||
|
|
||||||
|
if(cntrls.imagePreview.src !== imagePlaceholder){
|
||||||
|
const result = await fetch(cntrls.imagePreview.src);
|
||||||
|
const blob = await result.blob();
|
||||||
|
imageBase64 = await readFile(blob);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!currentId){
|
||||||
|
await addLine(
|
||||||
|
cntrls.itemsType.value,
|
||||||
|
cntrls.price.value,
|
||||||
|
cntrls.description.value,
|
||||||
|
cntrls.genre.value,
|
||||||
|
imageBase64,
|
||||||
|
);
|
||||||
|
} else{
|
||||||
|
await editLine(
|
||||||
|
currentId,
|
||||||
|
cntrls.itemsType.value,
|
||||||
|
cntrls.price.value,
|
||||||
|
cntrls.description.value,
|
||||||
|
cntrls.genre.value,
|
||||||
|
imageBase64,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
goBack();
|
||||||
|
});
|
||||||
|
}
|
||||||
18
Lab3/Lab3/js/validation.js
Normal file
18
Lab3/Lab3/js/validation.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
function 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();
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
form.classList.add("was-validated");
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default validation;
|
||||||
3396
Lab3/Lab3/package-lock.json
generated
Normal file
3396
Lab3/Lab3/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
Lab3/Lab3/package.json
Normal file
25
Lab3/Lab3/package.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "init-prog",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "index.html",
|
||||||
|
"scripts": {
|
||||||
|
"start": "vite",
|
||||||
|
"serve": "http-server -p 3000 ./",
|
||||||
|
"build": "vite build",
|
||||||
|
"rest" : "json-server --watch data.json -p 8081",
|
||||||
|
"dev" : "npm-run-all --parallel rest start",
|
||||||
|
"prod" : "npm-run-all build serve rest",
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-free": "6.4.2",
|
||||||
|
"bootstrap": "5.3.2",
|
||||||
|
"bootstrap-icons": "^1.11.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"http-server": "14.1.1",
|
||||||
|
"vite": "4.4.9",
|
||||||
|
"npm-run-all": "4.1.5",
|
||||||
|
"json-server": "0.17.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
102
Lab3/Lab3/page2.html
Normal file
102
Lab3/Lab3/page2.html
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru" class="h-100" data-bs-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Gamepad.ru</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<script type="module" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
|
||||||
|
|
||||||
|
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||||||
|
<link href="node_modules/@fortawsome/fontawsome-free/css/all.min.css" rel="stylesheet"/>
|
||||||
|
<link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-lg">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand">
|
||||||
|
<i class="bi-solid bi-controller"></i>
|
||||||
|
GAMEPAD.RU
|
||||||
|
</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">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="index.html">Главная</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link active" href="page2.html">Каталог</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page3.html">Новинки</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page4.html">Корзина</a><li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page5.html">Личный кабинет</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="row mx-auto">
|
||||||
|
<div class="flex-column ps-5 col-md-3">
|
||||||
|
<div class="pt-5">Цена:</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="pt-1 col"><input class="cost-input border-0" placeholder="От 100"></div>
|
||||||
|
<div class="pt-1 col"><input class="cost-input border-0" placeholder=" До 1000"></div>
|
||||||
|
</div>
|
||||||
|
<div class="row pt-3">
|
||||||
|
<div class="col-lg-6 ps-3">Платформа:</div>
|
||||||
|
<div class="col-2 ps-0"><i class="bi bi-windows"></i></div>
|
||||||
|
<div class="col-2 ps-0"><i class="bi bi-xbox"></i></div>
|
||||||
|
<div class="col-2 ps-0"><i class="bi bi-playstation"></i></div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-3 ps-1">Категории:</div>
|
||||||
|
<div class="form-check pt-3 ps-5">
|
||||||
|
<input class="form-check-input" type="checkbox" id="check1">
|
||||||
|
<label class="form-check-label" for="check1">Одиночный</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check pt-3 ps-5">
|
||||||
|
<input class="form-check-input" type="checkbox" id="check2">
|
||||||
|
<label class="form-check-label" for="check2">Мультиплеер</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check pt-3 ps-5">
|
||||||
|
<input class="form-check-input" type="checkbox" id="check3">
|
||||||
|
<label class="form-check-label" for="check3">Кооператив</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check pt-3 ps-5">
|
||||||
|
<input class="form-check-input" type="checkbox" id="check4">
|
||||||
|
<label class="form-check-label" for="check4">Скидки</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 category pb-4">
|
||||||
|
<form class="p-4 pb-0">
|
||||||
|
<input type="search" class="search form-control border-1 border-black search-input" placeholder="Поиск">
|
||||||
|
</form>
|
||||||
|
<div class="p-3">Сбросить</div>
|
||||||
|
<div>
|
||||||
|
<div class="row mx-auto gx-1 pt-5">
|
||||||
|
<div class="col"><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="250px"></a></div>
|
||||||
|
<div class="col cart"><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="250px"></a></div>
|
||||||
|
<div class="col images "><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="250px"></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="row mx-auto gx-1 pt-3 ">
|
||||||
|
<div class="col "><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="250px"></a></div>
|
||||||
|
<div class="col cart "><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="250px"></a></div>
|
||||||
|
<div class="col images "><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="250px"></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="row mx-auto gx-1 pt-3 ">
|
||||||
|
<div class="col "><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="250px"></a></div>
|
||||||
|
<div class="col cart"><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="250px"></a></div>
|
||||||
|
<div class="col images "><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="250px"></a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="push"></div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-end align-items-right">
|
||||||
|
GAMEPAD.RU © 2023
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
124
Lab3/Lab3/page3.html
Normal file
124
Lab3/Lab3/page3.html
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru" class="h-100">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Gamepad.ru</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.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 rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-lg">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand">
|
||||||
|
<i class="bi-solid bi-controller"></i>
|
||||||
|
GAMEPAD.RU
|
||||||
|
</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">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="index.html">Главная</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page2.html">Каталог</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link active" href="page3.html">Новинки</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page4.html">Корзина</a><li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page5.html">Личный кабинет</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="d-flex main mx-auto">
|
||||||
|
<div class="flex-column">
|
||||||
|
<div class="btn-group p-3" role="group">
|
||||||
|
<a class="btn btn-success" href="/add-game.html">Добавить товар</a>
|
||||||
|
</div>
|
||||||
|
<div class="p-2 h4">Новинки</div>
|
||||||
|
|
||||||
|
<div class="row mx-auto gx-4">
|
||||||
|
<div class="px-4" id="banner">
|
||||||
|
<img class="banner-hide" src="images/risk-of-rain-returns.jpg" width="100%" alt="banner1">
|
||||||
|
<!--<img class="banner-hide" src="images/poe.jpg" width="100%" alt="banner1">-->
|
||||||
|
<img class="banner-hide" src="images/sekiro.jpg" width="100%" alt="banner1">
|
||||||
|
<img class="banner-hide" src="images/eldenring.jpg" width="100%" alt="banner1">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex flex-column p-3">
|
||||||
|
<table id="items-table" class=" align-top">
|
||||||
|
<thead></thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="push"></div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-end align-items-right">
|
||||||
|
GAMEPAD.RU © 2023
|
||||||
|
</footer>
|
||||||
|
<div id="items-update" class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<form id="items-form" class="needs-validation" novalidate>
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h1 class="modal-title fs-5" id="items-update-title"></h1>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="text-center">
|
||||||
|
<img id="image-preview" src="https://via.placeholder.com/200" class="w-100" alt="placeholder">
|
||||||
|
</div>
|
||||||
|
<input id="items-line-id" type="number" hidden>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label for="item" class="form-label">Вид товара</label>
|
||||||
|
<select id="item" class="form-select" name="selected" required>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="price">Цена</label>
|
||||||
|
<input id="price" name="price" class="form-control" type="number" value="0.00" min="100.00"
|
||||||
|
step="0.50" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="description">Описание</label>
|
||||||
|
<input id="description" name="description" class="form-control" type="text"
|
||||||
|
required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="form-label" for="image">Изображение</label>
|
||||||
|
<input id="image" type="file" name="image" class="form-control" accept="image/*">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
|
||||||
|
<button type="submit" class="btn btn-primary">Сохранить</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="module">
|
||||||
|
import myBanner from "./js/banner";
|
||||||
|
import {linesForm} from "./js/lines";
|
||||||
|
import validation from "./js/validation";
|
||||||
|
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", ()=>{
|
||||||
|
myBanner("#banner");
|
||||||
|
linesForm();
|
||||||
|
validation();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
92
Lab3/Lab3/page4.html
Normal file
92
Lab3/Lab3/page4.html
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru" class="h-100" data-bs-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Gamepad.ru</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.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 rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-lg">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand">
|
||||||
|
<i class="bi-solid bi-controller"></i>
|
||||||
|
GAMEPAD.RU
|
||||||
|
</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">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="index.html">Главная</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page2.html">Каталог</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page3.html">Новинки</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link active" href="page4.html">Корзина</a><li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page5.html">Личный кабинет</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid">
|
||||||
|
<div class="d-flex main justify-content-center">
|
||||||
|
<form class="pe-4 pb-4">
|
||||||
|
<div class="h4 p-4">Оформление заказа</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="ps-4 ms-3 col-3"><a href="gamepage.html"><img src="images/poe.jpg" width="200px"></a></div>
|
||||||
|
<div class="col my-auto text"></div>
|
||||||
|
</div>
|
||||||
|
<hr class="ms-4">
|
||||||
|
<div class="h5 ps-4 pt-3">Способ оплаты</div>
|
||||||
|
<div class="ps-4">
|
||||||
|
<select class="form-select select">
|
||||||
|
<option selected>Банковская карта</option>
|
||||||
|
<option>QIWI Кошелёк</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="h5 ps-4 py-3">Итого:-------</div>
|
||||||
|
<hr class="ms-4">
|
||||||
|
<div class="h5 ps-4">Скидка постоянным покупателям</div>
|
||||||
|
<div class="ps-4"><p class="disc px-4 py-2">2000р-------------------------------------7%<br>
|
||||||
|
1500р-------------------------------------6%<br>
|
||||||
|
1100р-------------------------------------5%<br>
|
||||||
|
950р--------------------------------------4%<br>
|
||||||
|
800р--------------------------------------3%<br>
|
||||||
|
500р--------------------------------------2%<br>
|
||||||
|
300р--------------------------------------1%</p>
|
||||||
|
</div>
|
||||||
|
<hr class="ms-4">
|
||||||
|
<div class="h5 ps-4">E-mail</div>
|
||||||
|
<div class="ps-4 py-2"><input type="email" class="form-control" placeholder="name@example.com" required></div>
|
||||||
|
<div class="ps-4 py-2"><input type="email" class="form-control" placeholder="repeat name@example.com" required></div>
|
||||||
|
<div class="ps-4 py-2 from-check">
|
||||||
|
<input type="checkbox" class="form-check-input check" id="access" required>
|
||||||
|
<label class="from-check-label" for="access">Я ознакомлен с описанием товара и региональными ограничениями, и даю согласие на обработку данных.</label>
|
||||||
|
</div>
|
||||||
|
<hr class="ms-4">
|
||||||
|
<div class="ps-4 pt-2"><button class=" btn w-100 btn-lg btn-primary" type="submit">Далее</button></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="push"></div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-end">
|
||||||
|
GAMEPAD.RU © 2023
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
import validation from "./js/validation";
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
validation();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
70
Lab3/Lab3/page5.html
Normal file
70
Lab3/Lab3/page5.html
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru" class="h-100" data-bs-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Gamepad.ru</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.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 rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-lg">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand">
|
||||||
|
<i class="bi-solid bi-controller"></i>
|
||||||
|
GAMEPAD.RU
|
||||||
|
</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">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="index.html">Главная</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page2.html">Каталог</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page3.html">Новинки</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page4.html">Корзина</a><li>
|
||||||
|
<li class="nav-item"><a class="nav-link active" href="page5.html">Личный кабинет</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid">
|
||||||
|
<div class="main d-flex mt-0 row justify-content-center">
|
||||||
|
<form class="col-md-6 sign-form needs-validation" action="./personal_account.html" method="get">
|
||||||
|
<div class="mb-0 h4">Войти</div>
|
||||||
|
<div class="pb-2"><a href="./reg.html"><small>Зарегистрироваться</small></a></div>
|
||||||
|
<div class="pb-3">
|
||||||
|
<label class="form-label" for="email">Почта</label>
|
||||||
|
<input id="email" name="email" class="form-control border-0" placeholder="name@example.com" type="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="pb-3">
|
||||||
|
<label class="form-label" for="password">Пароль</label>
|
||||||
|
<input id="password" name="password" class="form-control border-0" type="password" required>
|
||||||
|
</div>
|
||||||
|
<div class="but text-center">
|
||||||
|
<button class="btn btn-primary w-50" type="submit">Далее</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="push"></div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-end align-items-right">
|
||||||
|
GAMEPAD.RU © 2023
|
||||||
|
</footer>
|
||||||
|
<script type="module">
|
||||||
|
import validation from "./js/validation";
|
||||||
|
|
||||||
|
document.addEventsListener("DOMContentLoaded", () =>{
|
||||||
|
validation();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
63
Lab3/Lab3/personal_account.html
Normal file
63
Lab3/Lab3/personal_account.html
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru" class="h-100">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Gamepad.ru</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.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 rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-lg">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand">
|
||||||
|
<i class="bi-solid bi-controller"></i>
|
||||||
|
GAMEPAD.RU
|
||||||
|
</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">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="index.html">Главная</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page2.html">Каталог</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page3.html">Новинки</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page4.html">Корзина</a><li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page5.html">Личный кабинет</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid">
|
||||||
|
<div class="flex-column main justify-content-center pb-4">
|
||||||
|
<div class="p-3 h4">Мой профиль</div>
|
||||||
|
<div class="p-3"><img src="./images/avatar.png" width="130px"></div>
|
||||||
|
<div class="p-3 h4">Мои покупки</div>
|
||||||
|
<div class="row gx-3 mx-auto">
|
||||||
|
<div class="col p-2"><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="270px"></a></div>
|
||||||
|
<div class="col p-2"><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="270px"></a></div>
|
||||||
|
<div class="col p-2"><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="270px"></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 gx-3 h4">Список желаемого</div>
|
||||||
|
<div class="row mx-auto">
|
||||||
|
<div class="col p-2"><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="270px"></a></div>
|
||||||
|
<div class="col p-2"><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="270px"></a></div>
|
||||||
|
<div class="col p-2"><a href="gamepage.html"><img class="mx-auto d-block" src="images/poe.jpg" width="270px"></a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="push"></div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-end align-items-right">
|
||||||
|
GAMEPAD.RU © 2023
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
74
Lab3/Lab3/reg.html
Normal file
74
Lab3/Lab3/reg.html
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru" class="h-100" data-bs-theme="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>registration</title>
|
||||||
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.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 rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
<header>
|
||||||
|
<nav class="navbar navbar-expand-lg">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand">
|
||||||
|
<i class="bi-solid bi-controller"></i>
|
||||||
|
GAMEPAD.RU
|
||||||
|
</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">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a class="nav-link" href="index.html">Главная</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page2.html">Каталог</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page3.html">Новинки</a></li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page4.html">Корзина</a><li>
|
||||||
|
<li class="nav-item"><a class="nav-link" href="page5.html">Личный кабинет</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main class="container-fluid">
|
||||||
|
<div class="main d-flex mt-0 row justify-content-center">
|
||||||
|
<form class="col-md-6 sign-form needs-validation" action="./personal_account.html">
|
||||||
|
<div class="mb-0 h4">Зарегистрироваться</div>
|
||||||
|
<div class="pb-2"><a href="./page5.html"><small>Уже зарегестрированны?</small></a></div>
|
||||||
|
<div class="pb-3">
|
||||||
|
<label class="form-label" for="email">Почта</label>
|
||||||
|
<input id="email" name="" class="form-control border-0" placeholder="name@example.com" type="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="pb-3">
|
||||||
|
<label class="form-label" for="password1">Пароль</label>
|
||||||
|
<input id="password1" name="" class="form-control border-0" type="password" required>
|
||||||
|
</div>
|
||||||
|
<div class="pb-3">
|
||||||
|
<label class="form-label" for="password">Повторите пароль</label>
|
||||||
|
<input id="password" name="" class="form-control border-0" type="password" required>
|
||||||
|
</div>
|
||||||
|
<div class="but text-center">
|
||||||
|
<button class="btn btn-primary w-50" type="submit">Далее</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="push"></div>
|
||||||
|
</main>
|
||||||
|
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-end align-items-right">
|
||||||
|
GAMEPAD.RU © 2023
|
||||||
|
</footer>
|
||||||
|
<script type="module">
|
||||||
|
import validation from "./js/validation"
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
validation();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
153
Lab3/Lab3/style.css
Normal file
153
Lab3/Lab3/style.css
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
header nav{
|
||||||
|
background-color: #08D9D6;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.category{
|
||||||
|
width:55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width:768px){
|
||||||
|
.im{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width:900px){
|
||||||
|
.text{
|
||||||
|
padding-left: 100px;
|
||||||
|
}
|
||||||
|
.div{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.ots {
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.img{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:600px){
|
||||||
|
.categ{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.imrow{
|
||||||
|
width:250px;
|
||||||
|
}
|
||||||
|
.destext{
|
||||||
|
width:200px;
|
||||||
|
height: 70px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.cart{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1500px){
|
||||||
|
.category{
|
||||||
|
width:65%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1250px){
|
||||||
|
.search{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.category{
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@media (max-width:830px){
|
||||||
|
.category{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1040px){
|
||||||
|
.images{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.cata{
|
||||||
|
gap: 4px;
|
||||||
|
grid-template-columns: 3fr;
|
||||||
|
}
|
||||||
|
.imrow{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.textmain
|
||||||
|
|
||||||
|
header nav a:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
html, body {
|
||||||
|
background-color: #252A34;
|
||||||
|
height: 100%;
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #FF2E63;
|
||||||
|
color:black;
|
||||||
|
height:32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.push {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
center {
|
||||||
|
width: 900px;
|
||||||
|
margin: 0 auto ;
|
||||||
|
background-color: #353b47;
|
||||||
|
}
|
||||||
|
.main {
|
||||||
|
background-color: #353b47;
|
||||||
|
color:white;
|
||||||
|
max-width:1000px;
|
||||||
|
margin: 0 auto -32px;
|
||||||
|
}
|
||||||
|
.cost-input {
|
||||||
|
width:80px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.search-input{
|
||||||
|
border-radius: 15px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
|
||||||
|
border-radius: 10px;
|
||||||
|
color: white;
|
||||||
|
border:1px;
|
||||||
|
}
|
||||||
|
.disc{
|
||||||
|
border: 1px solid black;
|
||||||
|
line-height: 2.5;
|
||||||
|
max-width:360px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.textbx {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px;
|
||||||
|
}
|
||||||
|
input[type="email"]::placeholder {color: grey;}
|
||||||
|
.check {
|
||||||
|
border:1px;
|
||||||
|
}
|
||||||
|
.sign-form{
|
||||||
|
padding-top:25%;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
.but{
|
||||||
|
padding-bottom: 200px;
|
||||||
|
}
|
||||||
19
Lab3/Lab3/vite.config.js
Normal file
19
Lab3/Lab3/vite.config.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
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"),
|
||||||
|
page2: resolve(__dirname, "page2.html"),
|
||||||
|
page3: resolve(__dirname, "page3.html"),
|
||||||
|
page4: resolve(__dirname, "page4.html"),
|
||||||
|
page5: resolve(__dirname, "page5.html"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user