181 lines
9.9 KiB
HTML
181 lines
9.9 KiB
HTML
<!doctype html>
|
||
<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="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css"
|
||
integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7"
|
||
crossorigin="anonymous"
|
||
/>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
|
||
<link rel="stylesheet" href="styleStreamingService.css" />
|
||
</head>
|
||
<body class="min-vh-100 d-flex flex-column m-0 p-0">
|
||
<header class="d-flex align-items-center justify-content-between position-sticky h-60 p-3">
|
||
<div class="header-logo d-flex align-items-center g-3">
|
||
<a href="pageMain.html"><img src="Resources\КАЙФ.jpg" alt="Логотип" /></a>
|
||
<h1>НАЗВАНИЕ СЕРВИСА</h1>
|
||
</div>
|
||
<nav class="navbar d-flex align-items-center justify-content-center me-3 g-3 column-gap-2">
|
||
<a href="pageCategories.html">Категории</a>
|
||
<nav class="dropdown position-relative">
|
||
<span><a>Мой аккаунт ▾</a></span>
|
||
<nav class="features-menu">
|
||
<nav class="features-item"><a href="pageAccount.html">Настройки</a></nav>
|
||
<nav class="features-item"><a href="pageSubscriptions.html">Подписки</a></nav>
|
||
<nav class="features-item"><a href="pageSavedStreams.html">Сохраненные трансляции</a></nav>
|
||
</nav>
|
||
</nav>
|
||
</nav>
|
||
</header>
|
||
<div class="content flex-grow-1 p-3 px-4" id="content">
|
||
<p>Сейчас в эфире <i class="bi bi-cast"></i></p>
|
||
<form id="imageForm" class="mb-4">
|
||
<div class="photo-grid-container d-flex justify-content-center mb-2">
|
||
<div class="photo-grid d-flex align-items-center flex-wrap w-100">
|
||
<div class="photo-grid-item">
|
||
<input
|
||
type="checkbox"
|
||
name="images"
|
||
value="https://steamuserimages-a.akamaihd.net/ugc/2462990917964003785/9E09A87AE9B299BC1F0FC1CBA9F20DB16289442A/?imw=512&imh=298&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true"
|
||
id="cs2"
|
||
/>
|
||
<label for="cs2"
|
||
><img
|
||
src="https://steamuserimages-a.akamaihd.net/ugc/2462990917964003785/9E09A87AE9B299BC1F0FC1CBA9F20DB16289442A/?imw=512&imh=298&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true"
|
||
alt="cs2"
|
||
/></label>
|
||
</div>
|
||
<div class="photo-grid-item">
|
||
<input
|
||
type="checkbox"
|
||
name="images"
|
||
value="https://avatars.mds.yandex.net/i?id=7839e8d6f40309bdce67fac62990d108_sr-10636981-images-thumbs&n=13"
|
||
id="derzko"
|
||
/>
|
||
<label for="derzko"
|
||
><img
|
||
src="https://avatars.mds.yandex.net/i?id=7839e8d6f40309bdce67fac62990d108_sr-10636981-images-thumbs&n=13"
|
||
alt="derzko"
|
||
/></label>
|
||
</div>
|
||
<div class="photo-grid-item">
|
||
<input
|
||
type="checkbox"
|
||
name="images"
|
||
value="https://vkplay.ru/pre_0x736_resize/hotbox/content_files/news/2020/02/12/fe52b98a1367439ea2be293fcf48224a.jpg?quality=85"
|
||
id="stardew"
|
||
/>
|
||
<label for="stardew"
|
||
><img
|
||
src="https://vkplay.ru/pre_0x736_resize/hotbox/content_files/news/2020/02/12/fe52b98a1367439ea2be293fcf48224a.jpg?quality=85"
|
||
alt="stardew"
|
||
/></label>
|
||
</div>
|
||
<div class="photo-grid-item">
|
||
<input
|
||
type="checkbox"
|
||
name="images"
|
||
value="https://avatars.mds.yandex.net/i?id=c111e02e6999cca7c4a7aa47f00a2ab3c384b6dd-5884537-images-thumbs&n=13"
|
||
id="teddy"
|
||
/>
|
||
<label for="teddy"
|
||
><img
|
||
src="https://avatars.mds.yandex.net/i?id=c111e02e6999cca7c4a7aa47f00a2ab3c384b6dd-5884537-images-thumbs&n=13"
|
||
alt="teddy"
|
||
/></label>
|
||
</div>
|
||
<div class="photo-grid-item">
|
||
<input
|
||
type="checkbox"
|
||
name="images"
|
||
value="https://i.pinimg.com/736x/a8/f1/c0/a8f1c04546867fbcd5eccd41c115fb51.jpg"
|
||
id="lofi_girl"
|
||
/>
|
||
<label for="lofi_girl"
|
||
><img
|
||
src="https://i.pinimg.com/736x/a8/f1/c0/a8f1c04546867fbcd5eccd41c115fb51.jpg"
|
||
alt="lofi_girl"
|
||
/></label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Смотреть позже</button>
|
||
</form>
|
||
<h3>Популярные каналы <i class="bi bi-patch-check-fill"></i></h3>
|
||
<ul>
|
||
<li>
|
||
<a href="pageAccount.html" target="_blank"
|
||
><em>ВЫ</em> самый популярный стример на данной платформе!!!</a
|
||
>
|
||
</li>
|
||
<li>какой-то стример 1</li>
|
||
<li>какой-то стример 2</li>
|
||
<li>ммм <b>МАРМОК</b></li>
|
||
</ul>
|
||
<h2>Смотреть позже <i class="bi bi-clock-fill"></i></h2>
|
||
<div class="photo-grid-container d-flex justify-content-center">
|
||
<div class="photo-grid d-flex align-items-center flex-wrap w-100" id="savedImagesGrid">
|
||
<div class="photo-grid-item">
|
||
<img
|
||
src="https://sun9-27.userapi.com/impf/c9811/u99622377/d_9475926f.jpg?quality=96&as=50x50,100x100&sign=a4fcc81d8c851f41a7f85dea825afc66&u=pHWjezk_9pOPyRtoH8161qsxD963pzSE2bk8P8vDAyE&cs=100x100"
|
||
alt="pusto"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer overflow-hidden flex-shrink-1 h-75 p-0 px-4">
|
||
<div class="footer-content d-flex justify-content-between align-items-center">
|
||
<div class="company-name flex-grow-1">RBCS CORP. <i class="bi bi-c-circle"></i></div>
|
||
<div class="footer-images d-flex gap-3 p-3">
|
||
<a href="https://vk.com/sheym_not_shame" target="_blank">
|
||
<img src="Resources\vk_icon.png" alt="vk" />
|
||
</a>
|
||
<a href="https://t.me/sheymuh" target="_blank">
|
||
<img src="Resources\tg_icon.png" alt="tg" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
document.getElementById("imageForm").addEventListener("submit", (event) => {
|
||
event.preventDefault();
|
||
|
||
const selectedImages = Array.from(document.querySelectorAll('input[name="images"]:checked')).map(
|
||
(checkbox) => checkbox.value
|
||
);
|
||
const savedImagesGrid = document.getElementById("savedImagesGrid");
|
||
|
||
const initialImageSrc =
|
||
"https://sun9-27.userapi.com/impf/c9811/u99622377/d_9475926f.jpg?quality=96&as=50x50,100x100&sign=a4fcc81d8c851f41a7f85dea825afc66&u=pHWjezk_9pOPyRtoH8161qsxD963pzSE2bk8P8vDAyE&cs=100x100";
|
||
|
||
const existingImage = Array.from(savedImagesGrid.children).find((item) => {
|
||
const imgElement = item.querySelector("img");
|
||
return imgElement && imgElement.src === initialImageSrc;
|
||
});
|
||
if (existingImage) {
|
||
savedImagesGrid.removeChild(existingImage);
|
||
}
|
||
|
||
selectedImages.forEach((image) => {
|
||
const imageExists = Array.from(savedImagesGrid.children).some((item) => {
|
||
const imgElement = item.querySelector("img");
|
||
return imgElement && imgElement.src === image;
|
||
});
|
||
|
||
if (!imageExists) {
|
||
const item = document.createElement("div");
|
||
item.className = "photo-grid-item";
|
||
item.innerHTML = `<img src="${image}" alt="сохраненное изображение"/>`;
|
||
savedImagesGrid.appendChild(item);
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|