laba
BIN
Lab1/Tokki (1).fig
Normal file
BIN
Lab1/Картинки/Аккаунт.png
Normal file
After Width: | Height: | Size: 38 KiB |
BIN
Lab1/Картинки/Вход.png
Normal file
After Width: | Height: | Size: 25 KiB |
BIN
Lab1/Картинки/ДОСТАВКА.png
Normal file
After Width: | Height: | Size: 100 KiB |
BIN
Lab1/Картинки/КОРЗИНА.png
Normal file
After Width: | Height: | Size: 59 KiB |
BIN
Lab1/Картинки/Каталог - главная.jpg
Normal file
After Width: | Height: | Size: 1.5 MiB |
BIN
Lab1/Картинки/О КОМПАНИИ.png
Normal file
After Width: | Height: | Size: 104 KiB |
BIN
Lab1/Картинки/Оформление заказа.png
Normal file
After Width: | Height: | Size: 46 KiB |
BIN
Lab1/Отчёт по интернет программированию.docx
Normal file
45
Lab2/lab2/.gitignore
vendored
Normal 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/
|
150
Lab2/lab2/Administrator.html
Normal 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
After Width: | Height: | Size: 1.3 KiB |
BIN
Lab2/lab2/Images/album.jpg
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
Lab2/lab2/Images/banner.jpg
Normal file
After Width: | Height: | Size: 164 KiB |
BIN
Lab2/lab2/Images/btc.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
161
Lab2/lab2/basket.html
Normal 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
@ -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
@ -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&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
@ -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
@ -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>
|
194
Lab2/lab2/makingAnOrder.html
Normal 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
26
Lab2/lab2/package.json
Normal 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"
|
||||
}
|
||||
}
|
98
Lab2/lab2/personalAccount.html
Normal 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>
|
91
Lab2/lab2/personalAccountLogin.html
Normal 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>
|
100
Lab2/lab2/personalAccountRegister.html
Normal 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>
|
81
Lab2/lab2/recoveryPassword.html
Normal 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
@ -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
@ -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;
|
||||
}
|