This commit is contained in:
Anna 2023-11-24 09:22:17 +04:00
commit 08ebcc2112
30 changed files with 6208 additions and 0 deletions

BIN
Lab1/Tokki (1).fig Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

45
Lab2/lab2/.gitignore vendored Normal file
View File

@ -0,0 +1,45 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
# System files
.DS_Store
Thumbs.db
# Ignore dist
dist/

View File

@ -0,0 +1,150 @@
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Панель администратора</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/Tokki.png" alt="logo" width="90">
</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-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link active" href="index.html">Каталог</a>
<a class="nav-link" href="company.html">О компании</a>
<a class="nav-link" href="delivery.html">Доставка</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="personalAccountLogin.html">Войти</a>
<a class="nav-link" style="padding-right: 90;" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<section class="h-100">
<div class="mask d-flex align-items-center h-100 gradient-custom-3">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-9 col-lg-7 col-xl-6">
<h1 class="text text-center font-weight-bold">Панель администратора</h1>
<div class="card" style="border-radius: 15px; border-color:#767479;">
<div class="card-body p-5">
<h2 class="text-uppercase text-center mb-5">Добавление товара</h2>
<form>
<div class="form-outline mb-4">
<input type="file" name="image" class="form-control" accept="image/*"
onchange="updatePreview(this, 'image-preview')">
<label class="form-label">Фото товара</label>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example1cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1cg">Название товара</label>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example2cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example2cg">Описание товара</label>
</div>
<div class="form-outline mb-4">
<input id="form3Example2cg" min="0" name="quantity" value="2" type="number"
class="form-control form-control-lg" />
<label class="form-label" for="form3Example3cg">Количество товара</label>
</div>
<div class="form-outline mb-4">
<input type="number" id="form3Example4cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example4cg">Цена товара</label>
</div>
<div class="d-flex justify-content-center">
<button class="btn btn-block text-body mb-0">Добавить</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-12">
<h1 class="text text-center font-weight-bold" style="padding-top: 50px;">Таблица данных</h1>
<div class="table-responsive mt-4">
<table class="table table-bordered">
<thead>
<tr>
<th>Фото</th>
<th>Название</th>
<th>Описание</th>
<th>Количество</th>
<th>Цена</th>
<th></th>
</tr>
</thead>
<tbody id="product-table">
<tr>
<td><img src="Images/album.jpg" width="50" alt="Товар 1"></td>
<td>Товар 1</td>
<td>Описание товара 1</td>
<td class="d-flex justify-content-center align-items-center">
<input id="form1" min="0" name="quantity" value="2" type="number" class="form-control form-control-sm" style="width: 50px;" />
</td>
<td>100 рублей</td>
<td class="d-flex justify-content-center align-items-center">
<a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
</td>
</tr>
<tr>
<td><img src="Images/album.jpg" width="50" alt="Товар 2"></td>
<td>Товар 2</td>
<td>Описание товара 2</td>
<td class="d-flex justify-content-center align-items-center">
<input id="form1" min="0" name="quantity" value="2" type="number" class="form-control form-control-sm" style="width: 50px;" />
</td>
<td>150 рублей</td>
<td class="d-flex justify-content-center align-items-center">
<a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
</td>
</tr>
<tr>
<td><img src="Images/album.jpg" width="50" alt="Товар 3"></td>
<td>Товар 3</td>
<td>Описание товара 3</td>
<td class="d-flex justify-content-center align-items-center">
<input id="form1" min="0" name="quantity" value="2" type="number" class="form-control form-control-sm" style="width: 50px;" />
</td>
<td>80 рублей</td>
<td class="d-flex justify-content-center align-items-center">
<a href="#!" class="text-danger"><i class="fas fa-trash fa-lg"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Tokki © 2023-2024
</footer>
</body>
</html>

BIN
Lab2/lab2/Images/Tokki.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
Lab2/lab2/Images/album.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
Lab2/lab2/Images/banner.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

BIN
Lab2/lab2/Images/btc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

161
Lab2/lab2/basket.html Normal file
View File

@ -0,0 +1,161 @@
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Корзина</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/Tokki.png" alt="logo" width="90">
</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-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Каталог</a>
<a class="nav-link" href="company.html">О компании</a>
<a class="nav-link" href="delivery.html">Доставка</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="personalAccountLogin.html">Войти</a>
<a class="nav-link" style="padding-right: 90;" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container">
<div class="d-flex justify-content-center align-items-center">
<h1 class="text font-weight-bold">Корзина</h1>
</div>
<div class="row">
<div class="col-10">
<div class="card rounded-3 mb-4">
<div class="card-body p-4">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img src="Images/album.jpg" class="img-fluid rounded-3" alt="Koreans">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<p class="lead fw-normal mb-2">Название альбома</p>
<p><span class="text-muted">Описание</span></p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button class="btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="2" type="number"
class="form-control form-control-sm text-center"/>
<button class="btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 class="mb-0">Цена ₽</h5>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-black"><i class="fas fa-trash fa-lg"></i></a>
</div>
</div>
</div>
</div>
<div class="card rounded-3 mb-4">
<div class="card-body p-4">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img src="Images/album.jpg" class="img-fluid rounded-3" alt="Koreans">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<p class="lead fw-normal mb-2">Название альбома</p>
<p><span class="text-muted">Описание</span></p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button class="btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="2" type="number"
class="form-control form-control-sm text-center" />
<button class="btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 class="mb-0">Цена ₽</h5>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-black"><i class="fas fa-trash fa-lg"></i></a>
</div>
</div>
</div>
</div>
<div class="card rounded-3 mb-4">
<div class="card-body p-4">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-md-2 col-lg-2 col-xl-2">
<img src="Images/album.jpg" class="img-fluid rounded-3" alt="Koreans">
</div>
<div class="col-md-3 col-lg-3 col-xl-3">
<p class="lead fw-normal mb-2">Название альбома</p>
<p><span class="text-muted">Описание</span></p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 d-flex">
<button class="btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
<i class="fas fa-minus"></i>
</button>
<input id="form1" min="0" name="quantity" value="2" type="number"
class="form-control form-control-sm text-center" />
<button class="btn-link px-2"
onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
<h5 class="mb-0">Цена ₽</h5>
</div>
<div class="col-md-1 col-lg-1 col-xl-1 text-end">
<a href="#!" class="text-black"><i class="fas fa-trash fa-lg"></i></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-start align-items-center">
<div class="text-dark font-weight-bold" style="font-size: 24px;">
К оплате: </div>
<div class="text-end" style="color: #767479; font-size: 24px;">
</div>
</div>
<a class="btn btn" style="margin-left: 25px; margin-bottom: 10px;" href="makingAnOrder.html">Оплата</a>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Tokki © 2023-2024
</footer>
</body>
</html>

71
Lab2/lab2/company.html Normal file
View File

@ -0,0 +1,71 @@
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Tokki</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/Tokki.png" alt="logo" width="90">
</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-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Каталог</a>
<a class="nav-link" href="company.html">О компании</a>
<a class="nav-link active" href="delivery.html">Доставка</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="personalAccountLogin.html">Войти</a>
<a class="nav-link" style="padding-right: 50;" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<div class="d-flex justify-content-center align-items-center">
<h1 class="text font-weight-bold">О компании</h1>
</div>
<div class="container">
<div class="row">
<h2 class="font-weight-bold" style="font-size: 35px; margin-left: 10px; margin-top: 10px;">Наши преимущества:</h2>
<ul>
<li class="font-weight-bold" style="font-size: 20px; margin-left: 10px; margin-top: 10px;"> привозим официально и напрямую из Южной Кореи</li>
<li class="font-weight-bold" style="font-size: 20px; margin-left: 10px; margin-top: 10px;"> качественная упаковка и обслуживание</li>
<li class="font-weight-bold" style="font-size: 20px; margin-left: 10px; margin-top: 10px;"> быстрая отправка</li>
<li class="font-weight-bold" style="font-size: 20px; margin-left: 10px; margin-top: 10px;"> быстрая доставка (в среднем 8 дней по России)</li>
<li class="font-weight-bold" style="font-size: 20px; margin-left: 10px; margin-top: 10px;"> удобная оплата через сайт</li>
<li class="font-weight-bold" style="font-size: 20px; margin-left: 10px; margin-top: 10px;"> большой ассортимент в наличии в Ульяновске</li>
<li class="font-weight-bold" style="font-size: 20px; margin-left: 10px; margin-top: 10px;"> никаких доплат из-за веса, количества, выбора версии и т.д.</li>
<li class="font-weight-bold" style="font-size: 20px; margin-left: 10px; margin-top: 10px;"> после оплаты заказа на эл. почту Вам приходит чек, подтверждающий Вашу покупку</li>
<li class="font-weight-bold" style="font-size: 20px; margin-left: 10px; margin-top: 10px;"> работаем почти 8 лет</li>
</ul>
<p></p>
<p></p>
<p></p>
<p style="font-size: 25px; text-align: center; margin-left: 10px; margin-top: 10px;">За время работы магазина, мы уже продали более 60 000 альбомов.</p>
<p style="font-size: 25px; text-align: center; margin-left: 10px; margin-top: 10px;">Также у нас есть физический магазин в Ульяновске, где весь товар можно увидеть в живую!</p>
<p style="font-size: 25px; text-align: center; margin-left: 10px; margin-top: 10px;">Адрес магазина: Ульяновск, ул. Северный Венец 32. Время работы: каждый день с 13:00 до 21:00</p>
</div>
</div>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Tokki © 2023-2024
</footer>
</body>
</html>

59
Lab2/lab2/contacts.html Normal file
View File

@ -0,0 +1,59 @@
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Доставка</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/logo.png" alt="logo" width="128">
</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-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Каталог</a>
<a class="nav-link" href="stock.html">О компании</a>
<a class="nav-link active" href="contacts.html">Доставка</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="personalAccountLogin.html">Войти</a>
<a class="nav-link" style="padding-right: 90;" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<div class="d-flex justify-content-center align-items-center">
<h1 class="text-warning font-weight-bold">Контакты</h1>
</div>
<div class="container">
<div class="row">
<div class="div d-flex justify-content-center">
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A0643c92cbdf3809080e5dfb2804b473ea00af31cfabe6fee08676c59d8675f01&amp;source=constructor" class="img-fluid" style="width: 1280; height: 720px;"></iframe>
</div>
<a href="tel:71112223344" class="text-warning font-weight-bold" style="font-size: 35px; margin-left: 10px; margin-top: 10px;">7 111 222 33 44</a>
<h2 class="font-weight-bold" style="font-size: 35px; margin-left: 10px; margin-top: 10px;">ул. Северный венец 32</h2>
<p style="font-size: 25px; margin-left: 10px; margin-top: 10px;">Доставка и самовывоз 10:00 — 23:00</p>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Все права защищены © 2023-2024
</footer>
</body>
</html>

58
Lab2/lab2/delivery.html Normal file
View File

@ -0,0 +1,58 @@
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Tokki</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/Tokki.png" alt="logo" width="90">
</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-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Каталог</a>
<a class="nav-link" href="company.html">О компании</a>
<a class="nav-link active" href="delivery.html">Доставка</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="personalAccountLogin.html">Войти</a>
<a class="nav-link" style="padding-right: 90;" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<div class="d-flex justify-content-center align-items-center">
<h1 class="text font-weight-bold">Доставка</h1>
</div>
<div class="container">
<div class="row">
<h2 class="font-weight-bold" style="font-size: 35px; margin-left: 10px; margin-top: 10px;">Вы можете получить заказ:</h2>
<h2 class="font-weight-bold" style="font-size: 35px; margin-left: 10px; margin-top: 10px;">Самовывозом</h2>
<p style="font-size: 25px; margin-left: 10px; margin-top: 10px;">Вы всегда сможете забрать заказ самостоятельно в Ульяновске в нашем магазине по адресу Северный Венец 32. Время работы 13-21. Когда заказ будет собран и завезен в магазин, Вам на эл. почту придет письмо со статусом заказа "готов к выдаче" (проверяйте папку спам), после этого его можно забирать.</p>
<h2 class="font-weight-bold" style="font-size: 35px; margin-left: 10px; margin-top: 10px;">Доставкой Почты России</h2>
<p style="font-size: 25px; margin-left: 10px; margin-top: 10px;">Почта России - пересылка заказа осуществляется до вашего почтового отделения, получение бандероли в отделении Почты России по извещению. Срок доставки зависит от отдаленности вашего региона от Ульяновска. Примерные сроки доставки по РФ около 7-11 дней</p>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Tokki © 2023-2024
</footer>
</body>
</html>

358
Lab2/lab2/index.html Normal file
View File

@ -0,0 +1,358 @@
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Tokki</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/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-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/Tokki.png" alt="logo" width="90">
</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-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link active" href="index.html">Каталог</a>
<a class="nav-link" href="company.html">О компании</a>
<a class="nav-link" href="delivery.html">Доставка</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="personalAccountLogin.html">Войти</a>
<a class="nav-link" style="padding-right: 90;" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<div class="d-flex justify-content-center align-items-center">
<h1 class="text font-weight-bold">Каталог</h1>
</div>
<div class="container">
<div class="row">
<img class="mx-auto pb-5" src="Images/btc.png" alt="banner" width="300">
</div>
</div>
<div class="container">
<div class="row d-flex flex-wrap">
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column h-100">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image" class="img-fluid">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column h-100">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image" class="img-fluid">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column h-100">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image" class="img-fluid">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column h-100">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image" class="img-fluid">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4">
<div class="product d-flex flex-column">
<div class="image_al">
<img src="Images/album.jpg" alt="Product Image">
</div>
<div class="info">
<h3 class="card-title">Название товара</h3>
<p class="card-text">Описание товара</p>
<div class="info-price">
<span class="price"><strong>2999$</strong></span>
<button class="add-to-cart"><i class="bi bi-basket2-fill"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
feel like cinderella naega byeonhae
</footer>
</body>
</html>

View File

@ -0,0 +1,194 @@
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Оформление заказа</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/Tokki.png" alt="logo" width="90">
</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-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Каталог</a>
<a class="nav-link" href="company.html">О компании</a>
<a class="nav-link" href="delivery.html">Доставка</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="personalAccountLogin.html">Войти</a>
<a class="nav-link" style="padding-right: 90;" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<section class="h-100">
<div class="mask d-flex align-items-center h-100 gradient-custom-3">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-9 col-lg-7 col-xl-6">
<div class="card" style="border-radius: 15px; border-color:#767479;">
<div class="card-body p-5">
<h2 class="text-uppercase text-center mb-5">Оформление заказа</h2>
<form>
<div class="form-outline mb-4">
<input type="text" id="form3Example1cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1cg">Ваше имя</label>
</div>
<div class="form-outline mb-4">
<input type="tel" id="form3Example5cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example5cg">Электронная почта</label>
</div>
<label class="form-check-label" for="creditCard">Вариант получения</label>
<div class="form-check mb-4">
<input class="form-check-input" type="radio" name="deliveryMethod" id="selfPickup" value="selfPickup">
<label class="form-check-label" for="selfPickup">Самовывоз</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="radio" name="deliveryMethod" id="delivery" value="delivery">
<label class="form-check-label" for="delivery">Доставка</label>
</div>
<div class="form-outline mb-4" id="deliveryAddress" style="display: none;">
<input type="text" id="form3ExampleAddress" class="form-control form-control-lg" />
<label class="form-label" for="form3ExampleAddress">Ваш адрес доставки</label>
<div id="deliveryTimeOptions">
<select class="form-select" id="timeSlotSelect" name="timeSlot">
<option value="10:00-10:30">10:00-10:30</option>
<option value="10:30-11:00">10:30-11:00</option>
<option value="11:00-11:30">11:00-11:30</option>
<option value="11:30-12:00">11:30-12:00</option>
<option value="12:00-12:30">12:00-12:30</option>
<option value="12:30-13:00">12:30-13:00</option>
<option value="13:00-13:30">13:00-13:30</option>
<option value="13:30-14:00">13:30-14:00</option>
<option value="14:00-14:30">14:00-14:30</option>
<option value="14:30-15:00">14:30-15:00</option>
<option value="15:00-15:30">15:00-15:30</option>
<option value="15:30-16:00">15:30-16:00</option>
<option value="16:00-16:30">16:00-16:30</option>
<option value="16:30-17:00">16:30-17:00</option>
<option value="17:00-17:30">17:00-17:30</option>
<option value="17:30-18:00">17:30-18:00</option>
<option value="18:00-18:30">18:00-18:30</option>
<option value="18:30-19:00">18:30-19:00</option>
<option value="19:00-19:30">19:00-19:30</option>
<option value="19:30-20:00">19:30-20:00</option>
<option value="20:00-20:30">20:00-20:30</option>
<option value="20:30-21:00">20:30-21:00</option>
<option value="21:00-21:30">21:00-21:30</option>
<option value="21:30-22:00">21:30-22:00</option>
<option value="22:00-22:30">22:00-22:30</option>
<option value="22:30-23:00">22:30-23:00</option>
</select>
<label for="timeSlotSelect">Выберите время доставки:</label>
</div>
</div>
<label class="form-check-label" for="creditCard">Вариант оплаты</label>
<div class="form-check mb-4">
<input class="form-check-input" type="radio" name="paymentMethod" id="cash" value="cash">
<label class="form-check-label" for="cash">Наличные</label>
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="radio" name="paymentMethod" id="creditCard" value="creditCard">
<label class="form-check-label" for="creditCard">Оплата картой</label>
</div>
<div class="form-outline mb-4" id="creditCardDetails" style="display: none;">
<div class="row mb-4">
<div class="col">
<div class="form-outline">
<input type="text" id="formNameOnCard" class="form-control" />
<label class="form-label" for="formNameOnCard">Имя держателя карты</label>
</div>
</div>
<div class="col">
<div class="form-outline">
<input type="text" id="formCardNumber" class="form-control" />
<label class="form-label" for="formCardNumber">Номер карты</label>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-3">
<div class="form-outline">
<input type="text" id="formExpiration" class="form-control" />
<label class="form-label" for="formExpiration">Срок действия</label>
</div>
</div>
<div class="col-3">
<div class="form-outline">
<input type="text" id="formCVV" class="form-control" />
<label class="form-label" for="formCVV">CVV</label>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<button class="btn btn" type="button" id="saveButton">Оформить</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('input[type=radio][name=deliveryMethod]').change(function() {
if (this.value === 'delivery') {
$('#deliveryAddress').show();
$('#deliveryTimeOptions').show();
} else {
$('#deliveryAddress').hide();
$('#deliveryTimeOptions').hide();
}
});
$('input[type=radio][name=paymentMethod]').change(function() {
if (this.value === 'creditCard') {
$('#creditCardDetails').show();
} else {
$('#creditCardDetails').hide();
}
});
});
</script>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Tokki © 2023-2024
</footer>
</body>
</html>

4355
Lab2/lab2/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

26
Lab2/lab2/package.json Normal file
View File

@ -0,0 +1,26 @@
{
"name": "int-prog",
"version": "1.0.0",
"type": "module",
"scripts": {
"vite": "vite",
"serve": "http-server -p 3000 ./dist/",
"build": "vite build",
"rest": "json-server --watch data.json -p 8081",
"dev": "npm-run-all --parallel rest vite",
"prod": "npm-run-all build --parallel serve rest"
},
"dependencies": {
"@fortawesome/fontawesome-free": "6.4.2",
"bootstrap": "5.3.2",
"bootstrap-icons": "^1.11.1"
},
"devDependencies": {
"eslint": "8.50.0",
"eslint-config-airbnb-base": "15.0.0",
"eslint-plugin-import": "2.28.1",
"http-server": "14.1.1",
"json-server": "0.17.4",
"vite": "4.4.9"
}
}

View File

@ -0,0 +1,98 @@
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Личный кабинет</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/Tokki.png" alt="logo" width="90">
</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-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Каталог</a>
<a class="nav-link" href="company.html">О компании</a>
<a class="nav-link" href="delivery.html">Доставка</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="personalAccountLogin.html">Войти</a>
<a class="nav-link" style="padding-right: 90;" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<section class="h-100">
<div class="mask d-flex align-items-center h-100 gradient-custom-3">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-9 col-lg-7 col-xl-6">
<div class="card" style="border-radius: 15px; border-color:#767479;">
<div class="card-body p-5">
<h2 class="text-uppercase text-center mb-5">Личный кабинет</h2>
<form>
<div class="form-outline mb-4">
<input type="text" id="form3Example1cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1cg">Ваше имя</label>
</div>
<div class="form-outline mb-4">
<input type="text" id="form3Example1cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1cg">Ваша фамилия</label>
</div>
<div class="form-outline mb-4">
<input type="email" id="form3Example3cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example3cg">Ваш адрес электронной почты</label>
</div>
<div class="form-outline mb-4">
<input type="date" id="form3Example4cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example4cg">Дата рождения</label>
</div>
<div class="form-outline mb-2">
<input type="tel" id="form3Example5cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example5cg">Номер телефона</label>
</div>
<div class="d-flex justify-content-center">
<button class="btn btn" type="button" id="saveButton">Сохранить</button>
</div>
<div class="d-flex justify-content-center">
<a class="btn btn" type="button" href="index.html">Выйти</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Tokki © 2023-2024
</footer>
</body>
</html>

View File

@ -0,0 +1,91 @@
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Личный кабинет - Вход</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/Tokki.png" alt="logo" width="90">
</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-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Каталог</a>
<a class="nav-link" href="company.html">О компании</a>
<a class="nav-link" href="delivery.html">Доставка</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="personalAccountLogin.html">Войти</a>
<a class="nav-link" style="padding-right: 90;" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<section class="h-100">
<div class="mask d-flex align-items-center h-100 gradient-custom-3">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-9 col-lg-7 col-xl-6">
<div class="card" style="border-radius: 15px; border-color:#767479;">
<div class="card-body p-5">
<h2 class="text-uppercase text-center mb-5">Войти</h2>
<form>
<div class="form-outline mb-4">
<input type="email" id="form3Example3cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example3cg">Ваш адрес электронной почты</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form3Example4cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example4cg">Пароль</label>
</div>
<div class="form-check d-flex justify-content-center mb-2">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3cg" />
<label class="form-check-label me-2" for="form2Example3g">Запомнить меня</label>
</div>
<p class="text-center text-muted mb-0">Забыли пароль? <a href="recoveryPassword.html"
class="fw-bold text-body"><u>Восстановление пароля</u></a></p>
<div class="d-flex justify-content-center">
<a class="btn btn-success btn-block text-body mb-0" href="personalAccount.html">Вход</a>
</div>
<p class="text-center text-muted mb-0">У вас нет аккаунта? <a href="personalAccountRegister.html"
class="fw-bold text-body"><u>Регистрация</u></a></p>
<p class="text-center"><a class="fw-bold text-body" href="Administrator.html">Администратор</a></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Tokki © 2023-2024
</footer>
</body>
</html>

View File

@ -0,0 +1,100 @@
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Личный кабинет - Регистрация</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/Tokki.png" alt="logo" width="90">
</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-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Каталог</a>
<a class="nav-link" href="company.html">О компании</a>
<a class="nav-link" href="delivery.html">Доставка</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="personalAccountLogin.html">Войти</a>
<a class="nav-link" style="padding-right: 90;" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<section class="h-100">
<div class="mask d-flex align-items-center h-100 gradient-custom-3">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-9 col-lg-7 col-xl-6">
<div class="card" style="border-radius: 15px; border-color:#767479;">
<div class="card-body p-5">
<h2 class="text-uppercase text-center mb-5">Создать учетную запись</h2>
<form>
<div class="form-outline mb-4">
<input type="text" id="form3Example1cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example1cg">Ваше имя</label>
</div>
<div class="form-outline mb-4">
<input type="email" id="form3Example3cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example3cg">Ваш адрес электронной почты</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form3Example4cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example4cg">Пароль</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form3Example4cdg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example4cdg">Повторите свой пароль</label>
</div>
<div class="form-check d-flex justify-content-center mb-5">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3cg" />
<label class="form-check-label" for="form2Example3g">
Я согласен со всеми утверждениями в <a href="#!" class="text-body"><u>Условиях обслуживания</u></a>
</label>
</div>
<div class="d-flex justify-content-center">
<button type="button"
class="btn btn-success btn-block text-body mb-0">Регистрация</button>
</div>
<p class="text-center text-muted mb-0">У вас уже есть учетная запись? <a href="personalAccountLogin.html"
class="fw-bold text-body"><u>Войдите здесь</u></a></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Tokki © 2023-2024
</footer>
</body>
</html>

View File

@ -0,0 +1,81 @@
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>Личный кабинет - Восстановление пароля</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/Tokki.png" alt="logo" width="90">
</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-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Каталог</a>
<a class="nav-link" href="company.html">О компании</a>
<a class="nav-link" href="delivery.html">Доставка</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="personalAccountLogin.html">Войти</a>
<a class="nav-link" style="padding-right: 90;" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<section class="h-100">
<div class="mask d-flex align-items-center h-100 gradient-custom-3">
<div class="container h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-9 col-lg-7 col-xl-6">
<div class="card" style="border-radius: 15px; border-color:#767479;">
<div class="card-body p-5">
<h2 class="text-uppercase text-center mb-5">Восстановление пароля</h2>
<h4 class="text-black text-center mb-5">Введите свой адрес электронной почты, и мы вышлем вам электронное письмо с инструкциями по сбросу вашего пароля</h4>
<form>
<div class="form-outline mb-4">
<input type="email" id="form3Example3cg" class="form-control form-control-lg" />
<label class="form-label" for="form3Example3cg">Ваш адрес электронной почты</label>
</div>
<div class="d-flex justify-content-center">
<button type="button"
class="btn btn-success btn-block text-body mb-0">Сбросить пароль</button>
</div>
<p class="text-center text-muted mb-0"><a href="personalAccountLogin.html"
class="fw-bold text-body"><u>Войти</u></a></p>
<p class="text-center text-muted mb-0"><a href="personalAccountRegister.html"
class="fw-bold text-body"><u>Регистрация</u></a></p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Tokki © 2023-2024
</footer>
</body>
</html>

248
Lab2/lab2/stock.html Normal file
View File

@ -0,0 +1,248 @@
<html lang="ru" class="h-100">
<head>
<meta charset="UTF-8">
<title>О компании</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="./style.css">
</head>ы
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="Images/logo.png" alt="logo" width="128">
</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-start" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Каталог</a>
<a class="nav-link active" href="stock.html">О компании</a>
<a class="nav-link" href="contacts.html">Доставка</a>
</div>
</div>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="personalAccountLogin.html">Войти</a>
<a class="nav-link" style="padding-right: 90;" href="basket.html">Корзина</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<div class="d-flex justify-content-center align-items-center">
<h1 class="text-warning font-weight-bold">Акции</h1>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4">
<div class="card">
<img src="Images/stock.png" class="card-img-top" alt="Product Image">
<div class="card-body">
<h5 class="card-title">Дарим кибер-призы</h5>
<p class="card-text">Вот так ачивка! Закажите Кибер-комбо и получите доступ к играм от MY.GAMES, а еще кокосовый батончик и шоколадное печенье «Cyber» от Bite. А также станьте автоматическим участником розыгрыша игровых ключей и больших пицц 29 июня.
</p>
</div>
<div class="card-footer">
<button class="btn btn-warning">Посмотреть</button>
</div>
</div>
</div>
</div>
</div>ч
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Все права защищены © 2023-2024
</footer>
</body>
</html>

113
Lab2/lab2/style.css Normal file
View File

@ -0,0 +1,113 @@
header nav {
background-color: #ffeaf7;
}
@media (min-width: 768px) {
header nav {
height: 110px;
}
}
header nav a:hover {
text-decoration: underline;
}
.navbar-brand img {
margin-left: 235px;
}
@media (max-width: 576px) {
.navbar-brand img {
margin-left: 25px;
}
}
@media (min-width: 577px) and (max-width: 992px) {
.navbar-brand img {
margin-left: 25px
}
}
@media (min-width: 993px) and (max-width: 1200px) {
.navbar-brand img {
margin-left: 150px;
}
}
@media (min-width: 1201px) {
.navbar-brand img {
margin-left: 235px;
}
}
.navbar-banner img {
margin-left: 10px;
width: 50%;
object-fit: cover;
object-position: bottom;
}
.product {
margin-bottom: 30px;
padding-right: 5px;
padding-left: 5px;
height: 100%;
}
.image_al {
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.image_al img {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 7px;
}
.info h3 {
font-size: 21px;
}
.info-price {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.add-to-cart {
border: none;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
background-color: #767479;
color: #ffffff;
}
.btn {
height: 35px;
width: 176px;
border-radius: 8px;
margin-right: 10px;
margin-top: 10px;
background-color: #767479;
color: #ffffff !important;
}
.btn:hover {
background-color: #bababa !important;
}
footer {
background-color: #ffeaf7;
}

BIN
Lab2/Отчёт 2.docx Normal file

Binary file not shown.