Загрузил(а) файлы в 'Lab2/Lab2'

This commit is contained in:
YakovlevMaxim 2023-11-08 19:46:34 +04:00
parent 1a6b2f0e23
commit 1c197560bd
5 changed files with 461 additions and 0 deletions

114
Lab2/Lab2/index.html Normal file
View File

@ -0,0 +1,114 @@
<!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 class="but text-center ps-2">
<a class="btn btn-primary " href="./add-game.html" type="submit">Добавить</a>
</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>

105
Lab2/Lab2/page2.html Normal file
View File

@ -0,0 +1,105 @@
<!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" 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" placeholder="От 100"></div>
<div class="pt-1 col"><input class="cost-input" 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 class="p-2">
<a class="btn btn-primary" href="./add-game.html" type="submit">Добавить</a>
</div>
</div>
<div class="col-6 category pb-4">
<form class="p-4 pb-0">
<input type="search" class="search form-control form-control-white text-bg-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>

94
Lab2/Lab2/page3.html Normal file
View File

@ -0,0 +1,94 @@
<!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="p-3 h4">Новинки</div>
<div class="row mx-auto gx-4">
<div class="col"><a href="gamepage.html"><img src="images/poe.jpg" width="100%"></a></div>
<div class="col div"><a href="gamepage.html"><img src="images/poe.jpg" width="100%"></a></div>
</div>
<div class="d-flex flex-column p-3">
<div class="ps-2 ms-1 pt-3">
<div class="row">
<div class="col-3 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>
</div>
<div class="ps-2 ms-1 pt-3">
<div class="row">
<div class="col-3 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>
</div>
<div class="ps-2 ms-1 pt-3">
<div class="row">
<div class="col-3 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>
</div>
<div class="ps-2 ms-1 pt-3">
<div class="row">
<div class="col-3 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>
</div>
<div class="ps-2 ms-1 pt-3">
<div class="row">
<div class="col-3 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>
</div>
<div class="ps-2 ms-1 pt-3">
<div class="row">
<div class="col-3 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>
</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>

85
Lab2/Lab2/page4.html Normal file
View File

@ -0,0 +1,85 @@
<!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 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 bg-dark">
<option selected class="">Банковская карта</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 bg-dark textbx" style="color:white;" placeholder="name@example.com"></div>
<div class="ps-4 py-2"><input type="email" class="form-control bg-dark textbx" style="color:white;" placeholder="repeat name@example.com"></div>
<div class="ps-4 py-2">
<input type="checkbox" class="form-check-input bg-dark check" id="access">
<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>
</body>
</html>

63
Lab2/Lab2/page5.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 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">
<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 bg-dark textbx" style="color:white;" placeholder="name@example.com" type="email">
</div>
<div class="pb-3">
<label class="form-label" for="password">Пароль</label>
<input id="password" name="password" class="form-control bg-dark textbx" style="color:white;" type="password">
</div>
<div class="but text-center">
<a class="btn btn-primary w-50" href="./personal_account.html" type="submit">Далее</a>
</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>
</body>
</html>