qkrlnt/PIbd-22_Ulybin_A.A._InternetProgramming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: qkrlnt:lab_1
Branches Tags
qkrlnt:main qkrlnt:lab2.1 qkrlnt:lab_6 qkrlnt:lab_4 qkrlnt:lab_5 qkrlnt:lab_3 qkrlnt:lab_2 qkrlnt:lab_1
..
compare: qkrlnt:lab_2
Branches Tags
qkrlnt:lab2.1 qkrlnt:lab_6 qkrlnt:lab_4 qkrlnt:lab_5 qkrlnt:lab_3 qkrlnt:lab_2 qkrlnt:main qkrlnt:lab_1

2 Commits
lab_1 ... lab_2

Author SHA1 Message Date
qkrlnt
baeb13067f отчет 2025-05-28 16:47:04 +04:00
qkrlnt
0f37299eab lab_2_done 2025-05-20 14:03:18 +04:00
12 changed files with 409 additions and 147 deletions
Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules

48
Account.html
View File

@@ -2,6 +2,7 @@
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Интернет-магазин: ЛК</title> <title>Интернет-магазин: ЛК</title>
<link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/style.css"/>
</head> </head>
@@ -10,23 +11,44 @@
<img src="images/logo.jpg" alt="'Название магазина'"> <img src="images/logo.jpg" alt="'Название магазина'">
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a> <a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
<navbar> <navbar>
<p><a href="Basket.html">Корзина</a></p> <div class="dropdown">
<p><a href="Order.html">Заказы</a></p> <span>Навигация ▾</span>
<p><a href="Favorites.html">Избранное</a></p> <ul class="links">
<p><a href="Account.html">Личный кабинет</a></p> <li><a href="Basket.html">Корзина</a></li>
<li><a href="Order.html">Заказы</a></li>
<li><a href="Favorites.html">Избранное</a></li>
<li><a href="Account.html">Личный кабинет</a></li>
</ul>
</div>
</navbar> </navbar>
</header> </header>
<div class="account"> <div class="account-container">
<img src="images/бананы.jpg"> <div class="account">
<h3>Имя Фамилия</h3> <img src="images/бананы.jpg">
<p>Описание</p> <h3>Имя Фамилия</h3>
<p>Описание</p>
</div>
</div> </div>
<footer> <footer>
<p>Помощь:</p> <div class="contacts">
<p>8 (800)-555-35-35</p> <p>Помощь:</p>
<p>vk.com</p> <div class="contact-item">
<p>tg.me</p> <img src="images/phone.png" alt="Phone">
<p>ozon-zon-zon@mail.joke</p> <p>8 (800)-555-35-35</p>
</div>
<div class="contact-item">
<img src="images/vk.png" alt="VK">
<p>vk.com</p>
</div>
<div class="contact-item">
<img src="images/telegram.png" alt="Telegram">
<p>tg.me</p>
</div>
<div class="contact-item">
<img src="images/gmail.png" alt="Gmail">
<p>ozon-zon-zon@mail.joke</p>
</div>
</div>
</footer> </footer>
</body> </body>
</html> </html>

38
Basket.html
View File

@@ -2,6 +2,7 @@
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Интернет-магазин: Корзина</title> <title>Интернет-магазин: Корзина</title>
<link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/style.css"/>
</head> </head>
@@ -10,10 +11,15 @@
<img src="images/logo.jpg" alt="'Название магазина'"> <img src="images/logo.jpg" alt="'Название магазина'">
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a> <a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
<navbar> <navbar>
<p><a href="Basket.html">Корзина</a></p> <div class="dropdown">
<p><a href="Order.html">Заказы</a></p> <span>Навигация ▾</span>
<p><a href="Favorites.html">Избранное</a></p> <ul class="links">
<p><a href="Account.html">Личный кабинет</a></p> <li><a href="Basket.html">Корзина</a></li>
<li><a href="Order.html">Заказы</a></li>
<li><a href="Favorites.html">Избранное</a></li>
<li><a href="Account.html">Личный кабинет</a></li>
</ul>
</div>
</navbar> </navbar>
</header> </header>
<div class="basket"> <div class="basket">
@@ -30,11 +36,25 @@
</a> </a>
</div> </div>
<footer> <footer>
<p>Помощь:</p> <div class="contacts">
<p>8 (800)-555-35-35</p> <p>Помощь:</p>
<p>vk.com</p> <div class="contact-item">
<p>tg.me</p> <img src="images/phone.png" alt="Phone">
<p>ozon-zon-zon@mail.joke</p> <p>8 (800)-555-35-35</p>
</div>
<div class="contact-item">
<img src="images/vk.png" alt="VK">
<p>vk.com</p>
</div>
<div class="contact-item">
<img src="images/telegram.png" alt="Telegram">
<p>tg.me</p>
</div>
<div class="contact-item">
<img src="images/gmail.png" alt="Gmail">
<p>ozon-zon-zon@mail.joke</p>
</div>
</div>
</footer> </footer>
</body> </body>
</html> </html>

42
Favorites.html
View File

@@ -2,6 +2,7 @@
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Интернет-магазин: Избранное</title> <title>Интернет-магазин: Избранное</title>
<link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/style.css"/>
</head> </head>
@@ -10,25 +11,44 @@
<img src="images/logo.jpg" alt="'Название магазина'"> <img src="images/logo.jpg" alt="'Название магазина'">
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a> <a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
<navbar> <navbar>
<p><a href="Basket.html">Корзина</a></p> <div class="dropdown">
<p><a href="Order.html">Заказы</a></p> <span>Навигация ▾</span>
<p><a href="Favorites.html">Избранное</a></p> <ul class="links">
<p><a href="Account.html">Личный кабинет</a></p> <li><a href="Basket.html">Корзина</a></li>
<li><a href="Order.html">Заказы</a></li>
<li><a href="Favorites.html">Избранное</a></li>
<li><a href="Account.html">Личный кабинет</a></li>
</ul>
</div>
</navbar> </navbar>
</header> </header>
<div class="favourites"> <div class="favourites">
<h2>Избранное</h2> <h2>Избранное</h2>
<ul> <ol>
<li><img src ="images/masha.jpg">Женщина<p>бесценна</p></li> <li><img src ="images/masha.jpg">Женщина<p>бесценна</p></li>
<li><img src ="images/screwdriver.jpg">Отвертка<p>219 руб</p></li> <li><img src ="images/screwdriver.jpg">Отвертка<p>219 руб</p></li>
</ul> </ol>
</div> </div>
<footer> <footer>
<p>Помощь:</p> <div class="contacts">
<p>8 (800)-555-35-35</p> <p>Помощь:</p>
<p>vk.com</p> <div class="contact-item">
<p>tg.me</p> <img src="images/phone.png" alt="Phone">
<p>ozon-zon-zon@mail.joke</p> <p>8 (800)-555-35-35</p>
</div>
<div class="contact-item">
<img src="images/vk.png" alt="VK">
<p>vk.com</p>
</div>
<div class="contact-item">
<img src="images/telegram.png" alt="Telegram">
<p>tg.me</p>
</div>
<div class="contact-item">
<img src="images/gmail.png" alt="Gmail">
<p>ozon-zon-zon@mail.joke</p>
</div>
</div>
</footer> </footer>
</body> </body>
</html> </html>

46
Order.html
View File

@@ -2,6 +2,7 @@
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Интернет-магазин: Заказы</title> <title>Интернет-магазин: Заказы</title>
<link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/style.css"/>
</head> </head>
@@ -10,36 +11,55 @@
<img src="images/logo.jpg" alt="'Название магазина'"> <img src="images/logo.jpg" alt="'Название магазина'">
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a> <a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
<navbar> <navbar>
<p><a href="Basket.html">Корзина</a></p> <div class="dropdown">
<p><a href="Order.html">Заказы</a></p> <span>Навигация ▾</span>
<p><a href="Favorites.html">Избранное</a></p> <ul class="links">
<p><a href="Account.html">Личный кабинет</a></p> <li><a href="Basket.html">Корзина</a></li>
<li><a href="Order.html">Заказы</a></li>
<li><a href="Favorites.html">Избранное</a></li>
<li><a href="Account.html">Личный кабинет</a></li>
</ul>
</div>
</navbar> </navbar>
</header> </header>
<div class="orders"><h1>Заказы</h1></div> <div class="orders"><h1>Заказы</h1></div>
<div class="typeOfOrder"> <div class="typeOfOrder">
<div class="inProcess"> <div class="inProcess">
<h2>В процессе</h2> <h2>В процессе</h2>
<ul> <ol>
<li><img src="images/spoon.jpg">Ложка</li> <li><img src="images/spoon.jpg">Ложка</li>
<li><img src="images/fork.jpg">Вилка</li> <li><img src="images/fork.jpg">Вилка</li>
<li><img src="images/knife.jpg">Нож</li> <li><img src="images/knife.jpg">Нож</li>
</ul> </ol>
</div> </div>
<div class="done"> <div class="done">
<h2>Завершённые</h2> <h2>Завершённые</h2>
<ul> <ol>
<li><img src="images/iron.jpg">Утюг</li> <li><img src="images/iron.jpg">Утюг</li>
<li><img src="images/bananas.jpg">Бананы</li> <li><img src="images/bananas.jpg">Бананы</li>
</ul> </ol>
</div> </div>
</div> </div>
<footer> <footer>
<p>Помощь:</p> <div class="contacts">
<p>8 (800)-555-35-35</p> <p>Помощь:</p>
<p>vk.com</p> <div class="contact-item">
<p>tg.me</p> <img src="images/phone.png" alt="Phone">
<p>ozon-zon-zon@mail.joke</p> <p>8 (800)-555-35-35</p>
</div>
<div class="contact-item">
<img src="images/vk.png" alt="VK">
<p>vk.com</p>
</div>
<div class="contact-item">
<img src="images/telegram.png" alt="Telegram">
<p>tg.me</p>
</div>
<div class="contact-item">
<img src="images/gmail.png" alt="Gmail">
<p>ozon-zon-zon@mail.joke</p>
</div>
</div>
</footer> </footer>
</body> </body>
</html> </html>

341
css/style.css
View File

@@ -1,69 +1,103 @@
/*Общие стили*/
body { body {
background-color: #edf7f6; background-color: #edf7f6;
}
* {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
} }
header {
margin-bottom: 50px;
}
img {
width: 180px;
height: 150px;
margin-right: 10px;
}
h2 {
text-align: center;
}
footer {
margin-top: 50px;
text-align: center;
font-size: 14px;
}
a { a {
text-decoration: none; text-decoration: none;
color: black; color: black;
font-weight: bold; font-weight: bold;
} }
header h1 a{ h2 {
text-decoration: none; text-align: center;
color: black; }
font-weight: bold;
text-align: left; img {
width: 180px;
height: 150px;
margin-right: 10px;
}
/*header*/
header {
display: flex;
flex-direction: column;
align-items: start;
margin-bottom: 50px;
} }
header img { header img {
width: 200px; width: 200px;
height: auto; height: auto;
margin-right: 10px;
margin-bottom: 10px;
} }
header h1 a{
text-align: left;
}
/*навигация*/
navbar { navbar {
display: flex; display: flex;
gap: 15px; gap: 15px;
position: fixed; position: fixed;
top: 40px;
right: 20px;
z-index: 3;
}
span{
top: 10px; top: 10px;
right: 35px;
} }
.links a { .dropdown > span {
text-decoration: none; z-index: 2;
position: relative;
cursor: pointer;
border: 2px solid black;
border-radius: 5px;
padding: 5px;
/*background: #edf7f6;*/
background: white;
margin-right: 0;
}
.dropdown:hover .links{
display: flex;
flex-direction: column;
background: white;
border-radius: 10px;
padding-right: 30px;
padding-top: 50px;
position: absolute;
top: -25px;
left: -115px;
z-index: 1;
}
.links {
display: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.links li {
list-style: none;
color: black; color: black;
font-weight: bold; width: 140px;
border: none;
} }
/*Основной контент*/
.goods { .goods {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 70px; margin-bottom: 70px;
gap: 15px;
} }
.goods p { .goods p {
@@ -78,9 +112,10 @@ navbar {
width: 250px; width: 250px;
height: 250px; height: 250px;
object-fit: cover; object-fit: cover;
margin: 0 auto; /* Центрирование */ margin: 0 auto;
} }
/*Заказы*/
.typeOfOrder { .typeOfOrder {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@@ -101,11 +136,14 @@ navbar {
background-color: green; background-color: green;
} }
.basket { /*Корзина и Избранное*/
.basket,
.favourites {
margin-left: 50px; margin-left: 50px;
} }
.basket h1 { .basket h1,
.orders h1 {
margin-left: 50px; margin-left: 50px;
} }
@@ -114,58 +152,22 @@ li {
border: 2px solid black; border: 2px solid black;
border-radius: 10px; border-radius: 10px;
width: 400px; width: 400px;
height: auto;
display: flex; display: flex;
font-size: large; font-size: large;
margin-bottom: 15px; margin-bottom: 15px;
padding: 10px; padding: 10px;
} }
.basket p { .basket p,
position: absolute;
bottom: 5px;
right: 10px;
margin: 0;
font-weight: bold;
}
.orders h1 {
margin-left: 50px;
}
.favourites p { .favourites p {
position: absolute; position: absolute;
bottom: 5px; bottom: 5px;
right: 10px; right: 10px;
margin: 0; margin: 0;
font-weight: bold;
}
/*.buy {
position: fixed;
bottom: 20px;
right: 20px;
background-color: greenyellow;
text-align: center;
border: 2px solid black;
border-radius: 10px;
width: 200px; /* Фиксированный размер кнопки *
height: 70px;
display: flex;
justify-content: center;
}
.buy a {
font-size: xx-large;
text-decoration: none;
color: black;
font-weight: bold; font-weight: bold;
width: 100%; /* Растягиваем ссылку на всю кнопку * }
height: 100%;
display: flex; /*Кнопка опалты в корзине*/
align-items: center;
justify-content: center;
}*/
.buy { .buy {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
@@ -181,8 +183,6 @@ li {
} }
.buy a { .buy a {
text-decoration: none;
color: black;
font-size: xx-large; font-size: xx-large;
font-weight: bold; font-weight: bold;
width: 100%; width: 100%;
@@ -196,22 +196,27 @@ li {
background-color: lightgreen; background-color: lightgreen;
} }
/*Личный кабинет*/
.account-container {
display: flex;
}
.account { .account {
text-align: center; text-align: center;
margin: 50px auto; margin: auto;
/*margin: 50px auto;*/
width: 300px; width: 300px;
padding: 20px; padding: 20px;
border: 2px solid black; border: 2px solid black;
border-radius: 15px; border-radius: 15px;
background-color: #f9f9f9; background-color: #f9f9f9;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
} }
.account img { .account img {
width: 150px; width: 150px;
height: 150px; height: 150px;
object-fit: cover; object-fit: cover;
border-radius: 20px; /* Закругленные углы */ border-radius: 20px;
border: 3px solid black; border: 3px solid black;
} }
@@ -220,9 +225,163 @@ li {
margin-top: 10px; margin-top: 10px;
font-size: x-large; font-size: x-large;
} }
/*
.dialogue { /*Footer*/
text-align: left; footer {
margin-top: 10px; margin-top: 50px;
font-size: 20px; text-align: center;
}*/ font-size: 14px;
}
.contacts {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.contact-item {
display: flex;
align-items: center;
}
.contact-item p {
margin: 0;
}
.contact-item img {
width: 24px;
height: auto;
}
/* Адаптивная верстка */
@media only screen and (min-width: 961px) {
.goods {
justify-content: space-around;
}
.basket,
.favourites {
margin-left: 50px;
}
}
@media only screen and (min-width: 401px) and (max-width: 960px) {
.goods {
justify-content: center;
}
.typeOfOrder{
flex-direction: column;
}
.typeOfOrder h2 {
margin-left: 0;
}
li {
width: 50%;
flex-direction: column;
}
.basket,
.favourites {
margin-left: auto;
margin-right: auto;
}
.basket p,
.favourites p {
position: relative;
display: block;
bottom: -5px;
right: auto;
}
.buy {
width: 150px;
height: 50px;
}
}
@media only screen and (max-width: 400px) {
body {
font-size: 14px;
}
header {
flex-direction: column;
align-items: center;
}
navbar {
position: static;
flex-direction: column;
align-items: center;
gap: 10px;
}
.dropdown:hover .links {
top: 180px;
left: auto;
}
.goods p {
width: 100%;
height: auto;
}
.goods img {
width: 97%;
height: auto;
}
li {
width: auto;
flex-direction: column;
align-items: center;
}
.typeOfOrder{
flex-direction: column;
}
.typeOfOrder h2 {
margin-left: 5;
}
.basket,
.favourites {
width: 100%;
margin-left: auto;
margin-right: auto;
}
ol {
padding-inline-start: 0;
}
.basket p,
.favourites p {
position: relative;
display: block;
bottom: -5px;
}
.buy {
width: 110px;
height: 35px;
}
.buy a {
font-size: x-large;
}
.account {
width: 100%;
}
.contacts {
gap: 2px;
}
}

BIN
images/gmail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 781 B

BIN
images/phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 595 B

BIN
images/telegram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
images/vk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 715 B

40
newSite.html
View File

@@ -2,6 +2,7 @@
<html lang="ru"> <html lang="ru">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Интернет-магазин</title> <title>Интернет-магазин</title>
<link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/style.css"/>
</head> </head>
@@ -10,10 +11,15 @@
<img src="images/logo.jpg" alt="'Название магазина'"> <img src="images/logo.jpg" alt="'Название магазина'">
<a href="newSite.html"><h1><b>"Название магазина"</b></h1></a> <a href="newSite.html"><h1><b>"Название магазина"</b></h1></a>
<navbar> <navbar>
<p><a href="Basket.html">Корзина</a></p> <div class="dropdown">
<p><a href="Order.html">Заказы</a></p> <span><b>Навигация ▾</b></span>
<p><a href="Favorites.html">Избранное</a></p> <ul class="links">
<p><a href="Account.html">Личный кабинет</a></p> <li><a href="Basket.html">Корзина</a></li>
<li><a href="Order.html">Заказы</a></li>
<li><a href="Favorites.html">Избранное</a></li>
<li><a href="Account.html">Личный кабинет</a></li>
</ul>
</div>
</navbar> </navbar>
</header> </header>
<h2>Рекомендуемые товары:</h2> <h2>Рекомендуемые товары:</h2>
@@ -25,12 +31,26 @@
<p><img src="images/bananas.jpg">Бананы</p> <p><img src="images/bananas.jpg">Бананы</p>
</div> </div>
<footer> <footer>
<p>Помощь:</p> <div class="contacts">
<p>8 (800)-555-35-35</p> <p>Помощь:</p>
<p>vk.com</p> <div class="contact-item">
<p>tg.me</p> <img src="images/phone.png" alt="Phone">
<p>ozon-zon-zon@mail.joke</p> <p>8 (800)-555-35-35</p>
</div>
<div class="contact-item">
<img src="images/vk.png" alt="VK">
<p>vk.com</p>
</div>
<div class="contact-item">
<img src="images/telegram.png" alt="Telegram">
<p>tg.me</p>
</div>
<div class="contact-item">
<img src="images/gmail.png" alt="Gmail">
<p>ozon-zon-zon@mail.joke</p>
</div>
</div>
<p><img src="images/бананы.jpg"></p> <p><img src="images/бананы.jpg"></p>
</footer> </footer>
</body> </body>
</html> </html>

BIN
Отчет2.docx Normal file
View File

Binary file not shown.