Добавлена лаба 2

This commit is contained in:
spacyboy 2023-11-10 16:26:04 +04:00
parent 8eacd11fc3
commit 08393560fc
26 changed files with 4815 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.idea

45
2_laba_IP_project/.gitignore vendored Normal file
View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 209 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

3684
2_laba_IP_project/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View 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"
}
}

View 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>

View 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>

View 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>

View 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>

View File

@ -0,0 +1,5 @@
npm install
npm start
npm run prod

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

353
2_laba_IP_project/style.css Normal file
View 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%;
}
}

View 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>

View 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'),
},
},
},
})

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.