YakovlevMaxim/PIbd-21_Yakovlev_M.G_IP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lab3

Browse Source
This commit is contained in:
Максим Яковлев 2023-12-08 10:57:03 +04:00
parent ba9488cf92
commit f7f945f7d7
31 changed files with 4990 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Lab3/IP_Otchet_3LB_Yakovlev.docx Normal file
View File

Binary file not shown.

87
Lab3/Lab3/add-game.html Normal file
View 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
View 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
View File

File diff suppressed because one or more lines are too long

74
Lab3/Lab3/gamepage.html Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
Lab3/Lab3/images/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
Lab3/Lab3/images/eldenring.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
Lab3/Lab3/images/gameLog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
Lab3/Lab3/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
Lab3/Lab3/images/poe.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
Lab3/Lab3/images/risk-of-rain-returns.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
Lab3/Lab3/images/sekiro.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
Lab3/Lab3/images/terraria.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

111
Lab3/Lab3/index.html Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View File

File diff suppressed because it is too large Load Diff

25
Lab3/Lab3/package.json Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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"),
},
},
},
});