Добавлена лаба 2
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
.idea
|
45
2_laba_IP_project/.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/
|
BIN
2_laba_IP_project/acc_icon.png
Normal file
After Width: | Height: | Size: 6.3 KiB |
BIN
2_laba_IP_project/arrow_icon.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
2_laba_IP_project/back_arrow_icon.png
Normal file
After Width: | Height: | Size: 2.8 KiB |
208
2_laba_IP_project/index.html
Normal file
@ -0,0 +1,208 @@
|
||||
<html lang="ru">
|
||||
|
||||
<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="h-100 d-flex flex-column">
|
||||
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-white fixed-top">
|
||||
<div class="btn_open_sidebar">
|
||||
<button class="btn_open btn-primary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling"></button>
|
||||
</div>
|
||||
<div class="container-fluid top_pannel">
|
||||
|
||||
<div class="navbar-collapse collapse justify-content-start" id="navbarNav">
|
||||
<div class="navbar-nav text_containter">
|
||||
<div class="arrow_and_cities">
|
||||
<img class="icon_top" src="./arrow_icon.png" alt="arrow_icon">
|
||||
<a class="nav-link " href="./index.html" style=" color: black;">Ульяновск</a>
|
||||
</div>
|
||||
<a class="nav-link adress" href="./test-delete.html" style="margin-left: 40px; color: black;">Адреса
|
||||
магазинов</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse justify-content-end " id="navbarNav1">
|
||||
<div class="navbar-nav icon-container">
|
||||
<a href="./page2.html">
|
||||
<img class="icon_top" src="./acc_icon.png" alt="acc_icon">
|
||||
</a>
|
||||
<a href="./page5.html">
|
||||
<img class="icon_top" src="./shop_icon.png" alt="shop_icon">
|
||||
</a>
|
||||
<a href="./page2.html">
|
||||
<img class="icon_top" src="./search_icon.png" alt="search_icon">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="offcanvas offcanvas-start show" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
|
||||
id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
|
||||
<div class="offcanvas-header">
|
||||
<a href="./index.html">
|
||||
<img class="logo_sidebar" src="./logo.png" alt="shop_icon">
|
||||
</a>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body">
|
||||
<div class="list_sidebar">
|
||||
<div class="list_font">
|
||||
<ul>
|
||||
<li>Клубника в шоколаде</li>
|
||||
<li>Бананы в шоколаде</li>
|
||||
<li>Конфеты</li>
|
||||
<li>Шоколад</li>
|
||||
<li>Медианты</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_sidebar">
|
||||
<h0>8 800 700 34 21
|
||||
<div class="take_order" style="color: #25e000;">Сделать заказ</div>
|
||||
</h0>
|
||||
<div class="social_network">
|
||||
<a href="./page3.html" style="text-decoration: none;">
|
||||
<img class="vk" src="./whatsapp_icon.png" alt="vk">
|
||||
</a>
|
||||
<img class="whatsapp" src="./vk_icon.png" alt="whatsapp">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function checkMediaQuery() {
|
||||
var sidebar = document.querySelector('.offcanvas');
|
||||
var button = document.querySelector('.btn-primary');
|
||||
if (window.matchMedia('(max-width: 1300px)').matches) {
|
||||
sidebar.classList.remove('show');
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
} else {
|
||||
sidebar.classList.add('show');
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', checkMediaQuery);
|
||||
window.addEventListener('resize', checkMediaQuery);
|
||||
</script>
|
||||
|
||||
<main class="container main_pannel">
|
||||
<h1>Клубника в шоколаде</h1>
|
||||
|
||||
<div class="container table">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<a href="./page4.html" style="text-decoration: none;">
|
||||
<img class="objects" src="./object_1.png" alt="object">
|
||||
<div class="caption"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
<div class="caption_2"> 400₽</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="./page4.html" style="text-decoration: none;">
|
||||
<img class="objects" src="./object_2.png" alt="object">
|
||||
<div class="caption"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
<div class="caption_2"> 400₽</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="./page4.html" style="text-decoration: none;">
|
||||
<img class="objects" src="./object_3.png" alt="object">
|
||||
<div class="caption"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
<div class="caption_2"> 400₽</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<a href="./page3.html" style="text-decoration: none;">
|
||||
<img class="objects" src="./object_1.png" alt="object">
|
||||
<div class="caption"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
<div class="caption_2"> 400₽</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="./page4.html" style="text-decoration: none;">
|
||||
<img class="objects" src="./object_2.png" alt="object">
|
||||
<div class="caption"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
<div class="caption_2"> 400₽</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="./page4.html" style="text-decoration: none;">
|
||||
<img class="objects" src="./object_3.png" alt="object">
|
||||
<div class="caption"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
<div class="caption_2"> 400₽</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<a href="./page3.html" style="text-decoration: none;">
|
||||
<img class="objects" src="./object_1.png" alt="object">
|
||||
<div class="caption"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
<div class="caption_2"> 400₽</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="./page4.html" style="text-decoration: none;">
|
||||
<img class="objects" src="./object_2.png" alt="object">
|
||||
<div class="caption"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
<div class="caption_2"> 400₽</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="./page4.html" style="text-decoration: none;">
|
||||
<img class="objects" src="./object_3.png" alt="object">
|
||||
<div class="caption"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
<div class="caption_2"> 400₽</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<a href="./page3.html" style="text-decoration: none;">
|
||||
<img class="objects" src="./object_1.png" alt="object">
|
||||
<div class="caption"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
<div class="caption_2"> 400₽</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="./page4.html" style="text-decoration: none;">
|
||||
<img class="objects" src="./object_2.png" alt="object">
|
||||
<div class="caption"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
<div class="caption_2"> 400₽</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="./page4.html" style="text-decoration: none;">
|
||||
<img class="objects" src="./object_3.png" alt="object">
|
||||
<div class="caption"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
<div class="caption_2"> 400₽</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
BIN
2_laba_IP_project/logo.png
Normal file
After Width: | Height: | Size: 37 KiB |
BIN
2_laba_IP_project/object_1.png
Normal file
After Width: | Height: | Size: 209 KiB |
BIN
2_laba_IP_project/object_2.png
Normal file
After Width: | Height: | Size: 163 KiB |
BIN
2_laba_IP_project/object_3.png
Normal file
After Width: | Height: | Size: 202 KiB |
BIN
2_laba_IP_project/open_sidebar.png
Normal file
After Width: | Height: | Size: 3.0 KiB |
3684
2_laba_IP_project/package-lock.json
generated
Normal file
20
2_laba_IP_project/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "int-prog",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"serve": "http-server -p 3000 ./dist/",
|
||||
"build": "vite build",
|
||||
"prod": "npm-run-all build serve"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "6.4.2",
|
||||
"bootstrap": "5.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"http-server": "14.1.1",
|
||||
"npm-run-all": "4.1.5",
|
||||
"vite": "^4.4.9"
|
||||
}
|
||||
}
|
36
2_laba_IP_project/page2.html
Normal file
@ -0,0 +1,36 @@
|
||||
<html lang="ru" xmlns="http://www.w3.org/1999/html">
|
||||
<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="h-100 d-flex flex-column">
|
||||
<main class="container-fluid p-2">
|
||||
<div class="text-center login_pannel">
|
||||
<a href="./index.html">
|
||||
<img class="back_arrow_icon " src="./back_arrow_icon.png" alt="back_arrow">
|
||||
</a>
|
||||
<img class="logo_sidebar" src="./logo.png" alt="logo">
|
||||
<h2>Войдите или зарегистрируйтесь</h2>
|
||||
<div class="input-group flex-nowrap width_input_mail">
|
||||
<span class="input-group-text" id="addon-wrapping">@</span>
|
||||
<input type="text" class="form-control" placeholder="Введите почту" aria-label="Username"
|
||||
aria-describedby="addon-wrapping">
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
<h2 class="h2_light">
|
||||
Согласен на обработку <a href="./page2.html">персональных данных</a>
|
||||
</h2>
|
||||
</label>
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
46
2_laba_IP_project/page3.html
Normal file
@ -0,0 +1,46 @@
|
||||
<html lang="ru">
|
||||
<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="h-100 d-flex flex-column">
|
||||
|
||||
<main class="container-fluid p-2">
|
||||
<div class="text-center add_object">
|
||||
<a href="./index.html">
|
||||
<img class="back_arrow_icon " src="./back_arrow_icon.png" alt="logo">
|
||||
</a>
|
||||
<h2>Добавить товар</h2>
|
||||
|
||||
<div class="mb-2 width_add_object">
|
||||
<input id="name_object" name="name_object" class="form-control" type="text" placeholder="Название товара"
|
||||
required>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 width_add_object">
|
||||
<input id="price_object" name="price_object" class="form-control" type="text" placeholder="Цена" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 width_add_object">
|
||||
<input id="count_object" name="count_object" class="form-control" type="text" placeholder="Количество"
|
||||
required>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3 width_add_object">
|
||||
<input type="file" class="form-control" id="inputGroupFile02">
|
||||
<label class="input-group-text" for="inputGroupFile02">Upload</label>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button class="btn btn-primary add_object-button" type="submit">Добавить</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
114
2_laba_IP_project/page4.html
Normal file
@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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="h-100 d-flex flex-column">
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-white fixed-top">
|
||||
<div class="btn_open_sidebar">
|
||||
<button class="btn_open btn-primary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling"></button>
|
||||
</div>
|
||||
<div class="container-fluid top_pannel">
|
||||
<div class="navbar-collapse collapse justify-content-start" id="navbarNav">
|
||||
<div class="navbar-nav text_containter">
|
||||
<div class="arrow_and_cities">
|
||||
<img class="icon_top" src="./arrow_icon.png" alt="arrow_icon">
|
||||
<a class="nav-link " href="./index.html" style=" color: black;">Ульяновск</a>
|
||||
</div>
|
||||
<a class="nav-link adress" href="./test-delete.html" style="margin-left: 40px; color: black;">Адреса
|
||||
магазинов</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse justify-content-end " id="navbarNav1">
|
||||
<div class="navbar-nav icon-container">
|
||||
<a href="./page2.html">
|
||||
<img class="icon_top" src="./acc_icon.png" alt="acc_icon">
|
||||
</a>
|
||||
<a href="./page5.html">
|
||||
<img class="icon_top" src="./shop_icon.png" alt="shop_icon">
|
||||
</a>
|
||||
<a href="./page2.html">
|
||||
<img class="icon_top" src="./search_icon.png" alt="search_icon">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="offcanvas offcanvas-start show" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
|
||||
id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
|
||||
<div class="offcanvas-header">
|
||||
<a href="./index.html">
|
||||
<img class="logo_sidebar" src="./logo.png" alt="shop_icon">
|
||||
</a>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<div class="list_sidebar">
|
||||
<div class="list_font">
|
||||
<ul>
|
||||
<li>Клубника в шоколаде</li>
|
||||
<li>Бананы в шоколаде</li>
|
||||
<li>Конфеты</li>
|
||||
<li>Шоколад</li>
|
||||
<li>Медианты</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_sidebar">
|
||||
<h0>8 800 700 34 21
|
||||
<div class="take_order" style="color: #25e000;">Сделать заказ</div>
|
||||
</h0>
|
||||
<div class="social_network">
|
||||
<a href="./page3.html" style="text-decoration: none;">
|
||||
<img class="vk" src="./whatsapp_icon.png" alt="vk">
|
||||
</a>
|
||||
<img class="whatsapp" src="./vk_icon.png" alt="whatsapp">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function checkMediaQuery() {
|
||||
var sidebar = document.querySelector('.offcanvas');
|
||||
var button = document.querySelector('.btn-primary');
|
||||
if (window.matchMedia('(max-width: 1300px)').matches) {
|
||||
sidebar.classList.remove('show');
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
} else {
|
||||
sidebar.classList.add('show');
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', checkMediaQuery);
|
||||
window.addEventListener('resize', checkMediaQuery);
|
||||
</script>
|
||||
|
||||
<main class="container main_pannel2">
|
||||
<div class="container view_object d-flex flex-column flex-md-row">
|
||||
<div class="left-cell">
|
||||
<img class="objects" src="./object_3.png" alt="object">
|
||||
</div>
|
||||
<div class="right-cell">
|
||||
<h3>Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</h3>
|
||||
<div>
|
||||
<h3 style="font-size: 24px; color: #a2a2a2; ">Итого:</h3>
|
||||
<h3 class="price_object">3000₽</h3>
|
||||
<a href="./page5.html">
|
||||
<button type="button" class="btn btn-success btn-lg ">Добавить в корзину</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
257
2_laba_IP_project/page5.html
Normal file
@ -0,0 +1,257 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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="h-100 d-flex flex-column">
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-white fixed-top">
|
||||
<div class="btn_open_sidebar">
|
||||
<button class="btn_open btn-primary" type="button" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling"></button>
|
||||
</div>
|
||||
<div class="container-fluid top_pannel">
|
||||
|
||||
<div class="navbar-collapse collapse justify-content-start" id="navbarNav">
|
||||
<div class="navbar-nav text_containter">
|
||||
<div class="arrow_and_cities">
|
||||
<img class="icon_top" src="./arrow_icon.png" alt="arrow_icon">
|
||||
<a class="nav-link " href="./index.html" style=" color: black;">Ульяновск</a>
|
||||
</div>
|
||||
<a class="nav-link adress" href="./test-delete.html" style="margin-left: 40px; color: black;">Адреса
|
||||
магазинов</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-collapse collapse justify-content-end " id="navbarNav1">
|
||||
<div class="navbar-nav icon-container">
|
||||
<a href="./page2.html">
|
||||
<img class="icon_top" src="./acc_icon.png" alt="acc_icon">
|
||||
</a>
|
||||
<a href="./page5.html">
|
||||
<img class="icon_top" src="./shop_icon.png" alt="shop_icon">
|
||||
</a>
|
||||
<a href="./page2.html">
|
||||
<img class="icon_top" src="./search_icon.png" alt="search_icon">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="offcanvas offcanvas-start show" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
|
||||
id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
|
||||
<div class="offcanvas-header">
|
||||
<a href="./inex.html">
|
||||
<img class="logo_sidebar" src="./logo.png" alt="shop_icon">
|
||||
</a>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<div class="list_sidebar">
|
||||
<div class="list_font">
|
||||
<ul>
|
||||
<li>Клубника в шоколаде</li>
|
||||
<li>Бананы в шоколаде</li>
|
||||
<li>Конфеты</li>
|
||||
<li>Шоколад</li>
|
||||
<li>Медианты</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_sidebar">
|
||||
<h0>8 800 700 34 21
|
||||
<div class="take_order" style="color: #25e000;">Сделать заказ</div>
|
||||
</h0>
|
||||
<div class="social_network">
|
||||
<a href="./page3.html" style="text-decoration: none;">
|
||||
<img class="vk" src="./whatsapp_icon.png" alt="vk">
|
||||
</a>
|
||||
<img class="whatsapp" src="./vk_icon.png" alt="whatsapp">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function checkMediaQuery() {
|
||||
var sidebar = document.querySelector('.offcanvas');
|
||||
var button = document.querySelector('.btn-primary');
|
||||
if (window.matchMedia('(max-width: 1300px)').matches) {
|
||||
sidebar.classList.remove('show');
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
} else {
|
||||
sidebar.classList.add('show');
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('load', checkMediaQuery);
|
||||
window.addEventListener('resize', checkMediaQuery);
|
||||
</script>
|
||||
<main class="container main_pannel">
|
||||
|
||||
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home"
|
||||
type="button" role="tab" aria-controls="pills-home" aria-selected="true"><h2>Корзина</h2></button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile"
|
||||
type="button" role="tab" aria-controls="pills-profile" aria-selected="false"><h2>История
|
||||
Заказов</h2></button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="pills-tabContent">
|
||||
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"
|
||||
tabindex="0">
|
||||
<div class="container table">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="objects_basket" src="./object_1.png" alt="object">
|
||||
</div>
|
||||
<div class="col ">
|
||||
<div class="caption_basket"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="caption_basket_price"> 3000₽</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit">Перейти к оплате</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="objects_basket" src="./object_2.png" alt="object">
|
||||
</div>
|
||||
<div class="col ">
|
||||
<div class="caption_basket"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="caption_basket_price"> 3000₽</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit">Перейти к оплате</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="objects_basket" src="./object_3.png" alt="object">
|
||||
</div>
|
||||
<div class="col ">
|
||||
<div class="caption_basket"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="caption_basket_price"> 3000₽</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit">Перейти к оплате</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="objects_basket" src="./object_2.png" alt="object">
|
||||
</div>
|
||||
<div class="col ">
|
||||
<div class="caption_basket"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="caption_basket_price"> 3000₽</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit">Перейти к оплате</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="objects_basket" src="./object_1.png" alt="object">
|
||||
</div>
|
||||
<div class="col ">
|
||||
<div class="caption_basket"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="caption_basket_price"> 3000₽</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit">Перейти к оплате</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="./index.html">
|
||||
<img class="back_arrow_icon " src="./back_arrow_icon.png" alt="logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="objects_basket" src="./object_1.png" alt="object">
|
||||
</div>
|
||||
<div class="col ">
|
||||
<div class="caption_basket"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit" disabled>Доставлено</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit">Оставить отзыв</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="objects_basket" src="./object_2.png" alt="object">
|
||||
</div>
|
||||
<div class="col ">
|
||||
<div class="caption_basket"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit" disabled>Доставлено</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit">Оставить отзыв</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="objects_basket" src="./object_1.png" alt="object">
|
||||
</div>
|
||||
<div class="col ">
|
||||
<div class="caption_basket"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit" disabled>Доставлено</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit">Оставить отзыв</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<img class="objects_basket" src="./object_3.png" alt="object">
|
||||
</div>
|
||||
<div class="col ">
|
||||
<div class="caption_basket"> Букет из клубники 108. <br>Набор из клубники в шоколаде в коробке</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit" disabled>Доставлено</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="btn btn-primary add_object-button w-100" type="submit">Оставить отзыв</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
5
2_laba_IP_project/readme.md
Normal file
@ -0,0 +1,5 @@
|
||||
npm install
|
||||
|
||||
npm start
|
||||
|
||||
npm run prod
|
BIN
2_laba_IP_project/search_icon.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
2_laba_IP_project/shop_icon.png
Normal file
After Width: | Height: | Size: 13 KiB |
353
2_laba_IP_project/style.css
Normal file
@ -0,0 +1,353 @@
|
||||
.top_pannel { /*отступ слева в top_pannel*/
|
||||
margin-left: 20vw;
|
||||
}
|
||||
|
||||
.logo_sidebar { /*размеры лого sidebar*/
|
||||
width: 17vh;
|
||||
}
|
||||
|
||||
.list_font { /*текст sidebar*/
|
||||
line-height: 3;
|
||||
font-size: 2.4vh;
|
||||
color: #5d5d5d;
|
||||
}
|
||||
|
||||
.offcanvas-start.show { /*ширина sidebar*/
|
||||
width: 25vw;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.offcanvas-header { /*настройки header sidebar*/
|
||||
margin-top: 8vh;
|
||||
height: 15%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.offcanvas-body { /*настройки body sidebar*/
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
h1 { /*форматирование текста*/
|
||||
font-size: 4.5vw;
|
||||
font-family: "Segoe UI Light";
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.main_pannel { /*основная панель main_pannel*/
|
||||
margin-left: 28vw;
|
||||
margin-top: 5vw;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.table { /*таблица */
|
||||
margin-top: 5vh;
|
||||
margin-left: 0vw;
|
||||
width: 60vw;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden; /* скрыть горизонтальную прокрутку на всей странице */
|
||||
}
|
||||
|
||||
.objects { /*объекты в таблицe main_pannel*/
|
||||
width: 17vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.caption { /*описание к объекту в таблице main_pannel*/
|
||||
font-weight: lighter;
|
||||
text-align: center;
|
||||
font-size: 1.2vw;
|
||||
margin-top: 1vw;
|
||||
}
|
||||
|
||||
.caption_2 { /*описание к объекту в цене main_pannel*/
|
||||
font-weight: lighter;
|
||||
text-align: center;
|
||||
font-size: 2vw;
|
||||
color: #5d5d5d;
|
||||
margin-top: 0.3vw;
|
||||
}
|
||||
|
||||
.icon_top { /*top_pannel*/
|
||||
margin-left: 2vw;
|
||||
width: 1.1vw;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
.nav-link { /* текста top_pannel*/
|
||||
font-size: calc(0.6vw + 0.6vh);
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
header nav { /*заливка панели белым top_pannel*/
|
||||
background-color: #ffffff
|
||||
}
|
||||
|
||||
.icon-container { /* сдвиг top_pannel*/
|
||||
margin-right: 5vw;
|
||||
}
|
||||
|
||||
.text_containter { /* сдвиг top_pannel*/
|
||||
margin-left: 5vw;
|
||||
}
|
||||
|
||||
.list_sidebar { /* список sidebar*/
|
||||
top: 10vh;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
header nav a:hover { /* подчеркивание текста top_pannel*/
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.social_network img { /*иконки соц сетей*/
|
||||
margin-top: 1vh;
|
||||
height: 3.5vh;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
.bottom_sidebar { /*bottom sidebar*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0vh;
|
||||
flex-direction: column;
|
||||
margin-top: 60vh;
|
||||
}
|
||||
|
||||
.arrow_and_cities { /*чтобы все было на одном уровне, стрелка и город top_pannel*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
h0 {
|
||||
font-size: 2vh;
|
||||
}
|
||||
|
||||
.btn_open {
|
||||
background-image: url('open_sidebar.png');
|
||||
background-color: transparent;
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
margin-top: 0vh;
|
||||
margin-left: 3vh;
|
||||
border: none;
|
||||
height: 4vh;
|
||||
width: 3vw;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
top: 5vh;
|
||||
right: 5vh;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.width_input_mail { /*ширина панели для вводы почты*/
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.back_arrow_icon { /*стрелка назад*/
|
||||
height: 4vh;
|
||||
position: absolute;
|
||||
top: 4vh;
|
||||
left: 3vw;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: lighter;
|
||||
font-size: 4vh;
|
||||
}
|
||||
|
||||
.h2_light {
|
||||
font-weight: lighter;
|
||||
font-size: 2vh;
|
||||
}
|
||||
|
||||
.login_pannel { /*2 страница, расположение объектов*/
|
||||
height: 90vh; /* на весь экран */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 2vh; /* Добавляет отступы между элементами */
|
||||
}
|
||||
|
||||
.add_object {
|
||||
height: 90vh; /* на весь экран */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 1vh; /* Добавляет отступы между элементами */
|
||||
}
|
||||
|
||||
.width_add_object {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.add_object-button {
|
||||
background-color: #118500;
|
||||
border-color: #118500;
|
||||
}
|
||||
|
||||
.view_object {
|
||||
margin-top: 6vh;
|
||||
margin-left: 0vw;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr; /* Делит контейнер на две равные колонки */
|
||||
gap: 6vh; /* Добавляет промежуток между клеточками */
|
||||
}
|
||||
|
||||
.left-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6vh;
|
||||
margin-top: 6vh;
|
||||
margin-left: 15vw;
|
||||
}
|
||||
|
||||
.right-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6vh;
|
||||
margin-top: 6vh;
|
||||
}
|
||||
|
||||
.main_pannel2 {
|
||||
height: 90vh; /* на весь экран */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: lighter;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link {
|
||||
color: rgba(166, 166, 166, 0.7);
|
||||
}
|
||||
|
||||
.nav-pills .nav-link:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.nav-pills .nav-link:focus,
|
||||
.nav-pills .nav-link.active,
|
||||
.nav-pills .nav-link:visited {
|
||||
background-color: rgba(0, 255, 49, 0.28);
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.objects_basket {
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
.caption_basket {
|
||||
text-align: left;
|
||||
font-weight: lighter;
|
||||
font-size: 2.5vh;
|
||||
}
|
||||
|
||||
.caption_basket_price {
|
||||
font-weight: lighter;
|
||||
font-size: 4vh;
|
||||
}
|
||||
|
||||
.add_object-button:hover {
|
||||
background-color: rgba(0, 255, 49, 0.28);
|
||||
color: black;
|
||||
border-color: #118500;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
.main_pannel {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.table { /*таблица */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 60vw;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.offcanvas-start.show {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.col-4 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.objects { /*объекты в таблицe main_pannel*/
|
||||
width: 52vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.caption { /*описание к объекту в таблице main_pannel*/
|
||||
font-size: 3.2vw;
|
||||
}
|
||||
|
||||
.caption_2 { /*описание к объекту в цене main_pannel*/
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
.list_font { /*текст sidebar*/
|
||||
font-size: 2vh;
|
||||
}
|
||||
|
||||
.offcanvas-start.show { /*ширина sidebar*/
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top_pannel {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.width_input_mail {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.width_add_object {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
32
2_laba_IP_project/test-delete.html
Normal file
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>dasdasd</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="h-100 d-flex flex-column">
|
||||
|
||||
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling"
|
||||
aria-controls="offcanvasScrolling">Enable body scrolling
|
||||
</button>
|
||||
|
||||
<div class="offcanvas offcanvas-start show" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1"
|
||||
id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>Try scrolling the rest of the page to see this option in action.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
14
2_laba_IP_project/vite.config.js
Normal file
@ -0,0 +1,14 @@
|
||||
import {resolve} from 'path'
|
||||
import {defineConfig} from 'vite'
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, 'index.html'),
|
||||
page2: resolve(__dirname, 'page2.html'),
|
||||
page3: resolve(__dirname, 'page3.html'),
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
BIN
2_laba_IP_project/vk_icon.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
2_laba_IP_project/whatsapp_icon.png
Normal file
After Width: | Height: | Size: 20 KiB |