Pibd-21_Ievlewa_M.D._Intern.../detail_page.html
2023-12-03 18:52:09 +03:00

147 lines
6.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.cdnfonts.com/css/correction-tape" rel="stylesheet">
<title>Detail</title>
<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">
<script>
function toggleMenu() {
var menuWrapper = document.getElementById("menu-wrapper");
menuWrapper.classList.toggle("open");
}
</script>
</head>
<body class="h-100 flex-column">
<div id="menu-wrapper">
<div id="menu">
<ul>
<li><a href="/">Главная</a></li>
<!-- <li><a href="./page2(cinema).html">Кино</a></li> -->
<li><a href="./page2(concerts).html">Концерты</a></li>
<li><a href="./page2(theatre).html">Театр</a></li>
<li><a href="./myTickets.html">Мои билеты</a></li>
<li><a href="./about.html">О сайте</a></li>
</ul>
</div>
</div>
<header>
<nav class="navbar navbar-expand-md navbar-dark">
<div class="container-fluid">
<!-- <p id="toggle-menu" onclick="toggleMenu()">Кликни здесь для открытия/закрытия меню</p> -->
<a id="toggle-menu" onclick="toggleMenu()">
<h1>TicketsBook</h1>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="./signingIn.html">вход/регистрация</a>
<a class="nav-link" href="./lkAdmin.html">админ</a>
</div>
</div>
</div>
</nav>
</header>
<main class="container-fluid p-2">
<div id="image-container">
<img id="background-image" src="" alt="Background Image"></img>
<div class="text-overlay" id="header"></div>
</div>
<div id="container1">
<div id="row1">
<div class="info">
<div class="info-text">
<h1>Описание</h1>
<p id="description"></p>
</div>
</div>
<div class="info">
<div class="info-text">
<h1>Даты</h1>
<p id="additional-info1"></p>
</div>
</div>
</div>
<div class="info">
<div class="info-text">
<h1>Прочее</h1>
<p id="additional-info2"></p>
</div>
<div class="button-overlayAdd">
<button onclick="">add to cart</button>
</div>
</div>
</div>
<script>
// Функция для получения значения параметра из URL
function getParameterByName(name, url = window.location.href) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
// Получаем значение параметра "название" из URL
var name = getParameterByName('name');
// Устанавливаем значение названия в верхней части экрана
var header = document.getElementById('header');
header.textContent = name;
// Устанавливаем фоновое изображение
var backgroundImage = document.getElementById('background-image');
backgroundImage.src = 'pictures/' + name + '.jpg';
// Загружаем содержимое файла описания
var description = document.getElementById('description');
fetch('artists/' + name + '-description.txt')
.then(response => response.text())
.then(data => {
description.textContent = data;
});
// Загружаем содержимое файла дополнительной информации 1
var additionalInfo1 = document.getElementById('additional-info1');
fetch('artists/' + name + '-dates.txt')
.then(response => response.text())
.then(data => {
additionalInfo1.textContent = data;
});
// Загружаем содержимое файла дополнительной информации 2
var additionalInfo2 = document.getElementById('additional-info2');
fetch('artists/' + name + '-performers.txt')
.then(response => response.text())
.then(data => {
additionalInfo2.textContent = data;
});
</script>
</main>
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
Иевлева Милана, 2023
</footer>
</body>
<script>
// Получаем параметры из URL
const urlParams = new URLSearchParams(window.location.search);
const artistName = urlParams.get('artist');
// Выполняем загрузку данных сразу после загрузки страницы
if (artistName) {
loadArtistData(artistName);
}
</script>
</html>