sheym/PIbd-23_Sheymuhov_A.I._Internet_Programming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: sheym:Lab1
Branches Tags
sheym:main sheym:Lab5 sheym:Lab4 sheym:Lab3 sheym:Lab2 sheym:Lab1
..
compare: sheym:a9bc51d17ae0f9678fbbfa8e9f465c4c9d8f625a
Branches Tags
sheym:Lab5 sheym:Lab4 sheym:Lab3 sheym:Lab2 sheym:Lab1 sheym:main

1 Commits
Lab1 ... a9bc51d17a

Author SHA1 Message Date
sheymuh
a9bc51d17a вторая лаба 2025-04-11 15:51:08 +04:00
15 changed files with 320 additions and 78 deletions
Expand all files Collapse all files

BIN
Resources/2016.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
Resources/goats.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 642 KiB

BIN
Resources/lofi_girl.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 393 KiB

BIN
Resources/teddy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

BIN
Resources/tg_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
Resources/tg_icon1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
Resources/vk_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
Resources/vk_icon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
Resources/папаня.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

37
pageAccount.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="styleStreamingService.css" /> <link rel="stylesheet" href="styleStreamingService.css" />
</head> </head>
@@ -11,19 +12,35 @@
<a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a> <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
<h1>НАЗВАНИЕ СЕРВИСА</h1> <h1>НАЗВАНИЕ СЕРВИСА</h1>
</div> </div>
<nav class="nav-links"> <nav class="navbar">
<a href="pageAccount.html">Мой аккаунт</a>
<a href="pageCategories.html">Категории</a> <a href="pageCategories.html">Категории</a>
<a href="pageSubscriptions.html">Подписки</a> <nav class="dropdown">
<a href="pageSavedStreams.html">Сохраненные трансляции</a> <span><a>Мой аккаунт ▾</a></span>
<nav class="features-menu">
<a href="pageAccount.html">Настройки</a>
<a href="pageSubscriptions.html">Подписки</a>
<a href="pageSavedStreams.html">Сохраненные трансляции</a>
</nav>
</nav>
</nav> </nav>
</div> </div>
<h2><em>Ваш никнейм</em></h2> <div class="content">
<img src="Resources\derzko.webp" alt="derzko" width="128"> <h2><em>Ваш никнейм</em></h2>
<p>ПОЛ МИЛЛИОНА ПОДПИЩИКОВ</p> <div class="avatar"><img src="Resources\derzko.webp" alt="derzko"></div>
<div class="header-logo"> <p>ПОЛ МИЛЛИОНА ПОДПИЩИКОВ</p>
<div class="button">Выйти из аккаунта</div> <div class="header-logo">
<div class="button">Сменить пароль</div> <div class="button">Выйти из аккаунта</div>
<div class="button">Сменить пароль</div>
</div>
</div>
<div class="footer">
<div class="footer-content">
<div class="company-name">RBCS CORP.</div>
<div class="footer-images">
<img src="Resources\vk_icon.png" alt="vk" class="footer-image">
<img src="Resources\tg_icon.png" alt="tg" class="footer-image">
</div>
</div>
</div> </div>
</body> </body>
</html> </html>

39
pageCategories.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="styleStreamingService.css" /> <link rel="stylesheet" href="styleStreamingService.css" />
</head> </head>
@@ -11,19 +12,35 @@
<a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a> <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
<h1>НАЗВАНИЕ СЕРВИСА</h1> <h1>НАЗВАНИЕ СЕРВИСА</h1>
</div> </div>
<nav class="nav-links"> <nav class="navbar">
<a href="pageAccount.html">Мой аккаунт</a>
<a href="pageCategories.html">Категории</a> <a href="pageCategories.html">Категории</a>
<a href="pageSubscriptions.html">Подписки</a> <nav class="dropdown">
<a href="pageSavedStreams.html">Сохраненные трансляции</a> <span><a>Мой аккаунт ▾</a></span>
<nav class="features-menu">
<a href="pageAccount.html">Настройки</a>
<a href="pageSubscriptions.html">Подписки</a>
<a href="pageSavedStreams.html">Сохраненные трансляции</a>
</nav>
</nav>
</nav> </nav>
</div> </div>
<h2>Популярные категории</h2> <div class="content">
<ol> <h2>Популярные категории</h2>
<li>Общение</li> <ol>
<li>Казик</li> <li>Общение</li>
<li>Стрелялки</li> <li>Казик</li>
<li>пупупу</li> <li>Стрелялки</li>
</ol> <li>пупупу</li>
</ol>
</div>
<div class="footer">
<div class="footer-content">
<div class="company-name">RBCS CORP.</div>
<div class="footer-images">
<img src="Resources\vk_icon.png" alt="vk" class="footer-image">
<img src="Resources\tg_icon.png" alt="tg" class="footer-image">
</div>
</div>
</div>
</body> </body>
</html> </html>

58
pageMain.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="styleStreamingService.css" /> <link rel="stylesheet" href="styleStreamingService.css" />
</head> </head>
@@ -11,28 +12,45 @@
<a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a> <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
<h1>НАЗВАНИЕ СЕРВИСА</h1> <h1>НАЗВАНИЕ СЕРВИСА</h1>
</div> </div>
<nav class="nav-links"> <nav class="navbar">
<a href="pageAccount.html">Мой аккаунт</a>
<a href="pageCategories.html">Категории</a> <a href="pageCategories.html">Категории</a>
<a href="pageSubscriptions.html">Подписки</a> <nav class="dropdown">
<a href="pageSavedStreams.html">Сохраненные трансляции</a> <span><a>Мой аккаунт ▾</a></span>
<nav class="features-menu">
<a href="pageAccount.html">Настройки</a>
<a href="pageSubscriptions.html">Подписки</a>
<a href="pageSavedStreams.html">Сохраненные трансляции</a>
</nav>
</nav>
</nav> </nav>
</div> </div>
<p>Сейчас в эфире</p> <div class="content">
<table border="2"> <p>Сейчас в эфире</p>
<tbody> <div class="photo-grid-container">
<tr> <div class="photo-grid">
<td><img src="Resources\cs2.webp" alt="cs2" width="256" height="200"></td> <div class="photo-grid-item"><img src="Resources\cs2.webp" alt="cs2"></div>
<td><img src="Resources\derzko.webp" alt="derzko" width="256"></td> <div class="photo-grid-item"><img src="Resources\derzko.webp" alt="derzko"></div>
<td><img src="Resources\stardew.webp" alt="stardew" width="256"></td> <div class="photo-grid-item"><img src="Resources\stardew.webp" alt="stardew"></div>
</tr> <div class="photo-grid-item"><img src="Resources\teddy.jpg" alt="teddy"></div>
</tbody> <div class="photo-grid-item"><img src="Resources\lofi_girl.jpg" alt="lofi_girl"></div>
</table> </div>
<h3>Популярные каналы</h3> </div>
<ul> <h3>Популярные каналы</h3>
<li><a href="pageAccount.html" target="_blank"><em>ВЫ</em> самый популярный стример на данной платформе!!!</a></li> <ul>
<li>какой-то стример 1</li> <li><a href="pageAccount.html" target="_blank"><em>ВЫ</em> самый популярный стример на данной платформе!!!</a></li>
<li>какой-то стример 2</li> <li>какой-то стример 1</li>
</ul> <li>какой-то стример 2</li>
<li>ммм <b>МАРМОК</b></li>
</ul>
</div>
<div class="footer">
<div class="footer-content">
<div class="company-name">RBCS CORP.</div>
<div class="footer-images">
<a href="https://vk.com/sheym_not_shame" target="_blank"><img src="Resources\vk_icon.png" alt="vk" class="footer-image"></a>
<a href="https://t.me/sheymuh" target="_blank"><img src="Resources\tg_icon.png" alt="tg" class="footer-image"></a>
</div>
</div>
</div>
</body> </body>
</html> </html>

51
pageSavedStreams.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="styleStreamingService.css" /> <link rel="stylesheet" href="styleStreamingService.css" />
</head> </head>
@@ -11,22 +12,44 @@
<a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a> <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
<h1>НАЗВАНИЕ СЕРВИСА</h1> <h1>НАЗВАНИЕ СЕРВИСА</h1>
</div> </div>
<nav class="nav-links"> <nav class="navbar">
<a href="pageAccount.html">Мой аккаунт</a>
<a href="pageCategories.html">Категории</a> <a href="pageCategories.html">Категории</a>
<a href="pageSubscriptions.html">Подписки</a> <nav class="dropdown">
<a href="pageSavedStreams.html">Сохраненные трансляции</a> <span><a>Мой аккаунт ▾</a></span>
<nav class="features-menu">
<a href="pageAccount.html">Настройки</a>
<a href="pageSubscriptions.html">Подписки</a>
<a href="pageSavedStreams.html">Сохраненные трансляции</a>
</nav>
</nav>
</nav> </nav>
</div> </div>
<h2>Сохраненные трансляции</h2> <div class="content">
<table border="3"> <h2>Запланированные трансляции</h2>
<tbody> <div class="photo-grid-container">
<tr> <div class="photo-grid">
<td><img src="Resources\стрим ксго.webp" alt="стрим ксго" width="256"></td> <div class="photo-grid-item"><img src="Resources\стрим ксго.webp" alt="стрим ксго"></div>
<td><img src="Resources\асмр человек паук.webp" alt="асмр" width="256"></td> <div class="photo-grid-item"><img src="Resources\goats.png" alt="goats"></div>
<td><img src="Resources\резня.jpg" alt="резня" width="256"></td> <div class="photo-grid-item"><img src="Resources\папаня.jpg" alt="папаня"></div>
</tr> </div>
</tbody> </div>
</table> <h2>Смотреть позже</h2>
<div class="photo-grid-container">
<div class="photo-grid">
<div class="photo-grid-item"><img src="Resources\2016.jpeg" alt="стрим ксго"></div>
<div class="photo-grid-item"><img src="Resources\асмр человек паук.webp" alt="асмр"></div>
<div class="photo-grid-item"><img src="Resources\резня.jpg" alt="резня"></div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-content">
<div class="company-name">RBCS CORP.</div>
<div class="footer-images">
<img src="Resources\vk_icon.png" alt="vk" class="footer-image">
<img src="Resources\tg_icon.png" alt="tg" class="footer-image">
</div>
</div>
</div>
</body> </body>
</html> </html>

37
pageSubscriptions.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="styleStreamingService.css" /> <link rel="stylesheet" href="styleStreamingService.css" />
</head> </head>
@@ -11,18 +12,34 @@
<a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a> <a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
<h1>НАЗВАНИЕ СЕРВИСА</h1> <h1>НАЗВАНИЕ СЕРВИСА</h1>
</div> </div>
<nav class="nav-links"> <nav class="navbar">
<a href="pageAccount.html">Мой аккаунт</a>
<a href="pageCategories.html">Категории</a> <a href="pageCategories.html">Категории</a>
<a href="pageSubscriptions.html">Подписки</a> <nav class="dropdown">
<a href="pageSavedStreams.html">Сохраненные трансляции</a> <span><a>Мой аккаунт ▾</a></span>
<nav class="features-menu">
<a href="pageAccount.html">Настройки</a>
<a href="pageSubscriptions.html">Подписки</a>
<a href="pageSavedStreams.html">Сохраненные трансляции</a>
</nav>
</nav>
</nav> </nav>
</div> </div>
<h2>Ваши подписки</h2> <div class="content">
<ol> <h2>Ваши подписки</h2>
<li>канал 1<div class="button">Вы подписаны</div></li> <ol>
<li>КРУТОЙ КАНАЛ<div class="button red-button">Вы спонсор</div></li> <li>НОРМ канал<div class="button">Вы подписаны</div></li>
<li>канал 3<div class="button">Вы подписаны</div></li> <li>САМЫЙ КРУТОЙ КАНАЛ<div class="button blue-button">Вы спонсор</div></li>
</ol> <li>ПРОСТО КРУТОЙ канал<div class="button">Вы подписаны</div></li>
</ol>
</div>
<div class="footer">
<div class="footer-content">
<div class="company-name">RBCS CORP.</div>
<div class="footer-images">
<img src="Resources\vk_icon.png" alt="vk" class="footer-image">
<img src="Resources\tg_icon.png" alt="tg" class="footer-image">
</div>
</div>
</div>
</body> </body>
</html> </html>

176
styleStreamingService.css
View File

@@ -1,14 +1,17 @@
body { body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: "Helvetica", "Arial", sans-serif; font-family: "Helvetica", "Arial", sans-serif;
font-size: 18px; font-size: 18px;
padding: 5px; margin: 0;
background-color: #ade8f4 padding: 0;
background-color: #ade8f4;
} }
h1 { h1 {
font-size: 1.5em; font-size: 1.5em;
margin: 20px auto; margin: 20px auto;
text-align: center;
} }
h2 { h2 {
@@ -17,11 +20,57 @@ h2 {
text-align: left; text-align: left;
} }
/* Мобильное устройство (ширина области отображения от 0 до 400px)*/
@media only screen and (max-width: 400px) {
body {
background-color: #ff0008;
width: fit-content;
}
h1 {
font-size: 1em;;
}
.header {
gap: 20px;
}
.navbar {
flex-direction: column;
align-self: center;
row-gap: 5px;
}
.navbar a {
height: 10px;
}
.avatar img {
width: 200px;
height: auto;
}
}
/* Планшет (ширина области отображения от 401 до 960px)*/
@media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #ffa200;
width: fit-content;
}
.header {
gap: 20px;
}
}
/* ПК (ширина области отображения от 961 до inf px) */
/* @media only screen and (min-width: 961px) {
body {
background-color: #b2d6ff;
}
} */
.button { .button {
color: #081c15; color: #081c15;
background-color: #90e0ef; background-color: #90e0ef;
font-weight: bold; font-weight: bold;
padding: 10px auto; padding: 10px 5px;
text-align: center; text-align: center;
border: 2px solid #5d6063; border: 2px solid #5d6063;
border-radius: 5px; border-radius: 5px;
@@ -30,8 +79,7 @@ h2 {
margin: 10px; margin: 10px;
} }
.red-button { .blue-button {
color: #081c15;
background-color: #0077b6; background-color: #0077b6;
} }
@@ -39,18 +87,22 @@ h2 {
background: #48cae4; background: #48cae4;
} }
.blue-button:hover {
background: #016296;
}
.header { .header {
display: flex;
top: 0; top: 0;
left: 0; left: 0;
height: 60px; height: 60px;
position: sticky;
background-color: #00b4d8; background-color: #00b4d8;
color: #081c15; color: #081c15;
display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 10px; padding: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
} }
.header-logo { .header-logo {
@@ -64,22 +116,120 @@ h2 {
height: auto; height: auto;
} }
.nav-links { .navbar {
display: flex; display: flex;
gap: 15px; justify-content: center;
column-gap: 15px;
margin-right: 20px; margin-right: 20px;
} }
.nav-links a { .navbar a {
display: flex;
text-decoration: none; text-decoration: none;
width: fit-content;
align-items: center;
justify-content: center;
color: #081c15; color: #081c15;
font-weight: bold; font-weight: bold;
background: #90e0ef; background: #90e0ef;
padding: 8px 15px; padding: 8px 15px;
border-radius: 5px; border-radius: 5px;
transition: 0.3s;
} }
.nav-links a:hover { .navbar a:hover {
background: #48cae4; background: #48cae4;
} }
.dropdown {
width: max-content;
position: relative;
}
.dropdown > span {
z-index: 2;
position: relative;
cursor: pointer;
}
.dropdown:hover .features-menu {
display: flex;
flex-direction: column;
background: #90e0ef;
border-radius: 5px;
padding-top: 20px;
position: absolute;
z-index: 1;
}
.features-menu {
display: none;
}
.content {
flex: 1;
padding: 10px 20px;
}
.avatar {
display: flex;
justify-content: left;
}
.photo-grid-container {
display: flex;
justify-content: center;
}
.photo-grid {
width: 100%;
display: flex;
justify-content: left;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
.photo-grid img {
width: 256px;
height: 200px;
}
.photo-grid-item {
height: 200px;
background-color: #5995da;
align-items: center;
justify-self: center;
border: 2px solid #fff;
}
.footer {
height: 80px;
background-color: #023047;
text-align: center;
padding: 0 40px;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.company-name {
flex: 1; /* Занимает доступное пространство */
color: #ade8f4;
}
.footer-images {
display: flex;
gap: 20px;
padding: 10px;
}
.footer-image {
width: 60px;
height: auto;
}