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

вторая лаба

Browse Source
This commit is contained in:
sheymuh
2025-04-11 15:51:08 +04:00
parent 49435b1342
commit a9bc51d17a
15 changed files with 320 additions and 78 deletions
Download Patch File Download Diff File 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">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Мой аккаунт</title>
<link rel="stylesheet" href="styleStreamingService.css" />
</head>
@@ -11,19 +12,35 @@
<a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
<h1>НАЗВАНИЕ СЕРВИСА</h1>
</div>
<nav class="nav-links">
<a href="pageAccount.html">Мой аккаунт</a>
<nav class="navbar">
<a href="pageCategories.html">Категории</a>
<a href="pageSubscriptions.html">Подписки</a>
<a href="pageSavedStreams.html">Сохраненные трансляции</a>
<nav class="dropdown">
<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>
</div>
<h2><em>Ваш никнейм</em></h2>
<img src="Resources\derzko.webp" alt="derzko" width="128">
<p>ПОЛ МИЛЛИОНА ПОДПИЩИКОВ</p>
<div class="header-logo">
<div class="button">Выйти из аккаунта</div>
<div class="button">Сменить пароль</div>
<div class="content">
<h2><em>Ваш никнейм</em></h2>
<div class="avatar"><img src="Resources\derzko.webp" alt="derzko"></div>
<p>ПОЛ МИЛЛИОНА ПОДПИЩИКОВ</p>
<div class="header-logo">
<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>
</body>
</html>

39
pageCategories.html
View File

@@ -2,6 +2,7 @@
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Популярные категории</title>
<link rel="stylesheet" href="styleStreamingService.css" />
</head>
@@ -11,19 +12,35 @@
<a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
<h1>НАЗВАНИЕ СЕРВИСА</h1>
</div>
<nav class="nav-links">
<a href="pageAccount.html">Мой аккаунт</a>
<nav class="navbar">
<a href="pageCategories.html">Категории</a>
<a href="pageSubscriptions.html">Подписки</a>
<a href="pageSavedStreams.html">Сохраненные трансляции</a>
<nav class="dropdown">
<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>
</div>
<h2>Популярные категории</h2>
<ol>
<li>Общение</li>
<li>Казик</li>
<li>Стрелялки</li>
<li>пупупу</li>
</ol>
<div class="content">
<h2>Популярные категории</h2>
<ol>
<li>Общение</li>
<li>Казик</li>
<li>Стрелялки</li>
<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>
</html>

58
pageMain.html
View File

@@ -2,6 +2,7 @@
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Главная</title>
<link rel="stylesheet" href="styleStreamingService.css" />
</head>
@@ -11,28 +12,45 @@
<a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
<h1>НАЗВАНИЕ СЕРВИСА</h1>
</div>
<nav class="nav-links">
<a href="pageAccount.html">Мой аккаунт</a>
<nav class="navbar">
<a href="pageCategories.html">Категории</a>
<a href="pageSubscriptions.html">Подписки</a>
<a href="pageSavedStreams.html">Сохраненные трансляции</a>
<nav class="dropdown">
<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>
</div>
<p>Сейчас в эфире</p>
<table border="2">
<tbody>
<tr>
<td><img src="Resources\cs2.webp" alt="cs2" width="256" height="200"></td>
<td><img src="Resources\derzko.webp" alt="derzko" width="256"></td>
<td><img src="Resources\stardew.webp" alt="stardew" width="256"></td>
</tr>
</tbody>
</table>
<h3>Популярные каналы</h3>
<ul>
<li><a href="pageAccount.html" target="_blank"><em>ВЫ</em> самый популярный стример на данной платформе!!!</a></li>
<li>какой-то стример 1</li>
<li>какой-то стример 2</li>
</ul>
<div class="content">
<p>Сейчас в эфире</p>
<div class="photo-grid-container">
<div class="photo-grid">
<div class="photo-grid-item"><img src="Resources\cs2.webp" alt="cs2"></div>
<div class="photo-grid-item"><img src="Resources\derzko.webp" alt="derzko"></div>
<div class="photo-grid-item"><img src="Resources\stardew.webp" alt="stardew"></div>
<div class="photo-grid-item"><img src="Resources\teddy.jpg" alt="teddy"></div>
<div class="photo-grid-item"><img src="Resources\lofi_girl.jpg" alt="lofi_girl"></div>
</div>
</div>
<h3>Популярные каналы</h3>
<ul>
<li><a href="pageAccount.html" target="_blank"><em>ВЫ</em> самый популярный стример на данной платформе!!!</a></li>
<li>какой-то стример 1</li>
<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>
</html>

51
pageSavedStreams.html
View File

@@ -2,6 +2,7 @@
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Сохранённые трансляции</title>
<link rel="stylesheet" href="styleStreamingService.css" />
</head>
@@ -11,22 +12,44 @@
<a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
<h1>НАЗВАНИЕ СЕРВИСА</h1>
</div>
<nav class="nav-links">
<a href="pageAccount.html">Мой аккаунт</a>
<nav class="navbar">
<a href="pageCategories.html">Категории</a>
<a href="pageSubscriptions.html">Подписки</a>
<a href="pageSavedStreams.html">Сохраненные трансляции</a>
<nav class="dropdown">
<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>
</div>
<h2>Сохраненные трансляции</h2>
<table border="3">
<tbody>
<tr>
<td><img src="Resources\стрим ксго.webp" alt="стрим ксго" width="256"></td>
<td><img src="Resources\асмр человек паук.webp" alt="асмр" width="256"></td>
<td><img src="Resources\резня.jpg" alt="резня" width="256"></td>
</tr>
</tbody>
</table>
<div class="content">
<h2>Запланированные трансляции</h2>
<div class="photo-grid-container">
<div class="photo-grid">
<div class="photo-grid-item"><img src="Resources\стрим ксго.webp" alt="стрим ксго"></div>
<div class="photo-grid-item"><img src="Resources\goats.png" alt="goats"></div>
<div class="photo-grid-item"><img src="Resources\папаня.jpg" alt="папаня"></div>
</div>
</div>
<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>
</html>

37
pageSubscriptions.html
View File

@@ -2,6 +2,7 @@
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>Подписки</title>
<link rel="stylesheet" href="styleStreamingService.css" />
</head>
@@ -11,18 +12,34 @@
<a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип"></a>
<h1>НАЗВАНИЕ СЕРВИСА</h1>
</div>
<nav class="nav-links">
<a href="pageAccount.html">Мой аккаунт</a>
<nav class="navbar">
<a href="pageCategories.html">Категории</a>
<a href="pageSubscriptions.html">Подписки</a>
<a href="pageSavedStreams.html">Сохраненные трансляции</a>
<nav class="dropdown">
<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>
</div>
<h2>Ваши подписки</h2>
<ol>
<li>канал 1<div class="button">Вы подписаны</div></li>
<li>КРУТОЙ КАНАЛ<div class="button red-button">Вы спонсор</div></li>
<li>канал 3<div class="button">Вы подписаны</div></li>
</ol>
<div class="content">
<h2>Ваши подписки</h2>
<ol>
<li>НОРМ канал<div class="button">Вы подписаны</div></li>
<li>САМЫЙ КРУТОЙ КАНАЛ<div class="button blue-button">Вы спонсор</div></li>
<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>
</html>

176
styleStreamingService.css
View File

@@ -1,14 +1,17 @@
body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 18px;
padding: 5px;
background-color: #ade8f4
margin: 0;
padding: 0;
background-color: #ade8f4;
}
h1 {
font-size: 1.5em;
margin: 20px auto;
text-align: center;
}
h2 {
@@ -17,11 +20,57 @@ h2 {
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 {
color: #081c15;
background-color: #90e0ef;
font-weight: bold;
padding: 10px auto;
padding: 10px 5px;
text-align: center;
border: 2px solid #5d6063;
border-radius: 5px;
@@ -30,8 +79,7 @@ h2 {
margin: 10px;
}
.red-button {
color: #081c15;
.blue-button {
background-color: #0077b6;
}
@@ -39,18 +87,22 @@ h2 {
background: #48cae4;
}
.blue-button:hover {
background: #016296;
}
.header {
display: flex;
top: 0;
left: 0;
height: 60px;
position: sticky;
background-color: #00b4d8;
color: #081c15;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.header-logo {
@@ -64,22 +116,120 @@ h2 {
height: auto;
}
.nav-links {
.navbar {
display: flex;
gap: 15px;
justify-content: center;
column-gap: 15px;
margin-right: 20px;
}
.nav-links a {
.navbar a {
display: flex;
text-decoration: none;
width: fit-content;
align-items: center;
justify-content: center;
color: #081c15;
font-weight: bold;
background: #90e0ef;
padding: 8px 15px;
border-radius: 5px;
transition: 0.3s;
}
.nav-links a:hover {
.navbar a:hover {
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;
}