лаба
This commit is contained in:
maxim
Binary file not shown.
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": ["eslint:recommended", "prettier"],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"indent": ["error", 2],
|
||||
"linebreak-style": ["error", "unix"],
|
||||
"quotes": ["error", "single"],
|
||||
"semi": ["error", "always"]
|
||||
}
|
||||
}
|
||||
24
lab4/my-project/.gitignore
vendored
24
lab4/my-project/.gitignore
vendored
@@ -1,24 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"printWidth": 80,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
@@ -1,122 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Панкуха</title>
|
||||
<!-- 1. Bootstrap -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- 2. Иконки -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
|
||||
<!-- 3. Ваши кастомные стили -->
|
||||
<link rel="stylesheet" href="src/css/style.css">
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<!-- Логотип и название -->
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
|
||||
<!-- Кнопка для мобильных -->
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- Навигация -->
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle text-punk fw-bold" href="#" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list-check me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark border-punk">
|
||||
<li><a class="dropdown-item text-punk" href="index.html"><i class="bi bi-house-door me-2"></i>Главная</a></li>
|
||||
<li><hr class="dropdown-divider border-punk"></li>
|
||||
<li><a class="dropdown-item text-punk" href="grob.html"><i class="bi bi-person-badge me-2"></i>Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="grobKaifIliBolshe.html"><i class="bi bi-music-note-beamed me-2"></i>Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="catalog.html"><i class="bi bi-collection me-2"></i>Каталог</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container my-5 flex-grow-1">
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
|
||||
<!-- Панк-рок -->
|
||||
<div class="col">
|
||||
<div class="card h-100 bg-dark border-punk catalog-item d-flex flex-column">
|
||||
<div class="img-container" style="height: 300px; overflow: hidden;">
|
||||
<img src="res/pankrock.jpg" class="w-100 h-100 object-fit-cover" alt="Панк-Рок">
|
||||
</div>
|
||||
<div class="card-body text-center mt-auto">
|
||||
<a href="punkrock.html" class="btn btn-outline-punk btn-lg w-100">
|
||||
<i class="bi bi-vinyl"></i> Панк-Рок
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Психоделика -->
|
||||
<div class="col">
|
||||
<div class="card h-100 bg-dark border-punk catalog-item d-flex flex-column">
|
||||
<div class="img-container" style="height: 300px; overflow: hidden;">
|
||||
<img src="res/psy.png" class="w-100 h-100 object-fit-cover" alt="Психоделический рок">
|
||||
</div>
|
||||
<div class="card-body text-center mt-auto">
|
||||
<a href="#" class="btn btn-outline-punk btn-lg w-100">
|
||||
<i class="bi bi-vinyl"></i> Психоделика
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Гаражный панк -->
|
||||
<div class="col">
|
||||
<div class="card h-100 bg-dark border-punk catalog-item d-flex flex-column">
|
||||
<div class="img-container" style="height: 300px; overflow: hidden;">
|
||||
<img src="res/garajnipunk.jpg" class="w-100 h-100 object-fit-cover" alt="Гаражный панк">
|
||||
</div>
|
||||
<div class="card-body text-center mt-auto">
|
||||
<a href="#" class="btn btn-outline-punk btn-lg w-100">
|
||||
<i class="bi bi-vinyl"></i> Гаражный панк
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<!-- Подвал -->
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
<a href="https://vk.com/kadyshevever" class="text-punk">
|
||||
<i class="bi bi-vk fs-4"></i>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,82 +0,0 @@
|
||||
{
|
||||
"artists": [
|
||||
{
|
||||
"id": "28d5",
|
||||
"name": "что-то",
|
||||
"description": "цуцй",
|
||||
"epochId": 1,
|
||||
"countryId": 2
|
||||
},
|
||||
{
|
||||
"id": "9e30",
|
||||
"name": "что-то",
|
||||
"description": "бб",
|
||||
"epochId": 2,
|
||||
"countryId": 1
|
||||
},
|
||||
{
|
||||
"id": "8ugr",
|
||||
"name": "Летов Игорь",
|
||||
"description": "Беспонтовый пирожок",
|
||||
"epochId": 1,
|
||||
"countryId": 4
|
||||
},
|
||||
{
|
||||
"id": "0823",
|
||||
"name": "киш",
|
||||
"description": "бб",
|
||||
"epochId": 1,
|
||||
"countryId": 4
|
||||
},
|
||||
{
|
||||
"id": "94a1",
|
||||
"name": "dfad",
|
||||
"description": "dfas",
|
||||
"epochId": 2,
|
||||
"countryId": 1
|
||||
},
|
||||
{
|
||||
"id": "ee1c",
|
||||
"name": "Отчет1",
|
||||
"description": "Очень крутой отчет",
|
||||
"epochId": 3,
|
||||
"countryId": 1
|
||||
}
|
||||
],
|
||||
"countries": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Россия"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "США"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"name": "ОАЭ"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"name": "Тайга"
|
||||
}
|
||||
],
|
||||
"epochs": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "1980-е"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "1990-е"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"name": "2000-е"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"name": "2010-е"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,138 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Панкуха</title>
|
||||
<!-- 1. Bootstrap -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- 2. Иконки -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
|
||||
<!-- 3. Ваши кастомные стили -->
|
||||
<link rel="stylesheet" href="src/css/style.css">
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
<!-- Вставьте этот header в начало body (перед основным контентом) -->
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<!-- Логотип и название -->
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
|
||||
<!-- Кнопка для мобильных -->
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- Навигация -->
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle text-punk fw-bold" href="#" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list-check me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark border-punk">
|
||||
<li><a class="dropdown-item text-punk" href="index.html"><i class="bi bi-house-door me-2"></i>Главная</a></li>
|
||||
<li><hr class="dropdown-divider border-punk"></li>
|
||||
<li><a class="dropdown-item text-punk" href="grob.html"><i class="bi bi-person-badge me-2"></i>Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="grobKaifIliBolshe.html"><i class="bi bi-music-note-beamed me-2"></i>Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="catalog.html"><i class="bi bi-collection me-2"></i>Каталог</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Основное содержимое -->
|
||||
<main class="container my-5 flex-grow-1">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<h1 class="display-4 text-punk mb-4">
|
||||
<i class="bi bi-person-badge"></i> Гражданская Оборона
|
||||
</h1>
|
||||
|
||||
<div class="text-center mb-5">
|
||||
<img src="res/grob.jpg" alt="Гражданская оборона" class="img-fluid rounded border border-punk" style="max-width: 100%; height: auto;">
|
||||
</div>
|
||||
<p class="lead">Здесь можно почитать инфу про исполнителя и перейти на песню</p>
|
||||
<div class="card bg-black border-punk mb-4">
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<div class="descriptionForSong">
|
||||
<p>
|
||||
«Гражданская Оборона» — культовая советская и российская рок-группа, основанная в 1984 году в Омске Егором Летовым.
|
||||
Коллектив стал одним из самых влиятельных в андеграундной среде.
|
||||
</p>
|
||||
<p>
|
||||
Музыка «Гражданской Обороны» сочетает в себе элементы панк-рока, гаражного рока и лоу-фая.
|
||||
Несмотря на минималистичный подход к звучанию, группа смогла создать уникальный стиль.
|
||||
</p>
|
||||
<p>
|
||||
Среди самых известных альбомов группы — «Тоталитаризм», «Мышеловка», «Здорово и вечно»,
|
||||
«Русское поле экспериментов» и «Инструкция по выживанию». Творчество «Гражданской Обороны»
|
||||
остается актуальным и по сей день, а Егор Летов считается одной из ключевых фигур в истории
|
||||
русской рок-музыки.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-black border-punk">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-3">
|
||||
<i class="bi bi-music-note-list"></i> Популярные песни:
|
||||
</h3>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="grobKaifIliBolshe.html" class="text-punk text-decoration-none">
|
||||
<i class="bi bi-file-music me-2"></i> Кайф или больше
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="#" class="text-punk text-decoration-none">
|
||||
<i class="bi bi-file-music me-2"></i> Зоопарк
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="#" class="text-punk text-decoration-none">
|
||||
<i class="bi bi-file-music me-2"></i> Новая патриотическая
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Подвал -->
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
<a href="https://vk.com/kadyshevever" class="text-punk">
|
||||
<i class="bi bi-vk fs-4"></i>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,160 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Панкуха</title>
|
||||
<!-- 1. Bootstrap -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- 2. Иконки -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
|
||||
<!-- 3. Ваши кастомные стили -->
|
||||
<link rel="stylesheet" href="src/css/style.css">
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
<!-- Вставьте этот header в начало body (перед основным контентом) -->
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<!-- Логотип и название -->
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
|
||||
<!-- Кнопка для мобильных -->
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- Навигация -->
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle text-punk fw-bold" href="#" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list-check me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark border-punk">
|
||||
<li><a class="dropdown-item text-punk" href="index.html"><i class="bi bi-house-door me-2"></i>Главная</a></li>
|
||||
<li><hr class="dropdown-divider border-punk"></li>
|
||||
<li><a class="dropdown-item text-punk" href="grob.html"><i class="bi bi-person-badge me-2"></i>Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="grobKaifIliBolshe.html"><i class="bi bi-music-note-beamed me-2"></i>Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="catalog.html"><i class="bi bi-collection me-2"></i>Каталог</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container my-5 flex-grow-1">
|
||||
<div class="container mt-4">
|
||||
<!-- Заголовок -->
|
||||
<div class="text-center mb-4">
|
||||
<h3 class="text-punk">Тут будет типа песня</h3>
|
||||
</div>
|
||||
|
||||
<!-- Обложка -->
|
||||
<div class="text-center mb-4">
|
||||
<img src="res/nekrofilia.jpg" alt="Обложка" class="img-fluid rounded border border-punk" style="max-width: 100%; height: auto;">
|
||||
</div>
|
||||
|
||||
<!-- Название песни и исполнитель -->
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body text-center">
|
||||
<h2 class="text-punk mb-3">Кайф или больше</h2>
|
||||
|
||||
<!-- Разделитель -->
|
||||
<hr class="border-punk mx-auto" style="width: 50%; opacity: 0.7;">
|
||||
|
||||
<div class="mt-3">
|
||||
<a href="grob.html" class="text-punk text-decoration-none fs-3">
|
||||
<i class="bi bi-person-badge"></i> Гражданская оборона
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Описание -->
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<h4 class="text-punk mb-3"><i class="bi bi-info-circle"></i> Описание</h4>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item bg-dark text-light border-punk">
|
||||
<i class="bi bi-calendar-event"></i> Была выпущена в 1987 году
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-light border-punk">
|
||||
<i class="bi bi-vinyl"></i> Входит в альбом "Некрофилия"
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Текст песни -->
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h4 class="text-punk mb-3"><i class="bi bi-music-note-list"></i> Текст песни:</h4>
|
||||
<div class="lyrics">
|
||||
<p class="verse">
|
||||
<strong>[Куплет 1]</strong><br>
|
||||
Рука повисла в небе, полном до краёв<br>
|
||||
Мои ошибки устилают мой позор<br>
|
||||
Я сочно благодарен, словно кошкин блёв<br>
|
||||
И смачно богомолен, словно приговор
|
||||
</p>
|
||||
|
||||
<p class="chorus text-punk">
|
||||
<strong>[Припев]</strong><br>
|
||||
Но мне придётся выбирать<br>
|
||||
Кайф или больше<br>
|
||||
Рай или больше<br>
|
||||
Свет или больше... Хей-йо
|
||||
</p>
|
||||
<p class="verse">
|
||||
<br>[Куплет 2]
|
||||
<br>Я буду ласковым, как тёплый банный лист
|
||||
<br>Я буду вежливым, как битое окно
|
||||
<br>Я буду благотворен, словно онанист
|
||||
<br>Я буду зазеркален, словно всё равно
|
||||
</p>
|
||||
<p class="chorus text-punk">
|
||||
<br>[Припев]
|
||||
<br>Но мне придётся выбирать
|
||||
<br>Кайф или больше
|
||||
<br>Рай или больше
|
||||
<br>Свет или больше...хей-йо
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<!-- Подвал -->
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
<a href="https://vk.com/kadyshevever" class="text-punk">
|
||||
<i class="bi bi-vk fs-4"></i>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,111 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Панкуха</title>
|
||||
<!-- 1. Bootstrap -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- 2. Иконки -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
|
||||
<!-- 3. Ваши кастомные стили -->
|
||||
<link rel="stylesheet" href="src/css/style.css">
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
<!-- Вставьте этот header в начало body (перед основным контентом) -->
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<!-- Логотип и название -->
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
|
||||
<!-- Кнопка для мобильных -->
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- Навигация -->
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle text-punk fw-bold" href="#" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list-check me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark border-punk">
|
||||
<li><a class="dropdown-item text-punk" href="index.html"><i class="bi bi-house-door me-2"></i>Главная</a></li>
|
||||
<li><hr class="dropdown-divider border-punk"></li>
|
||||
<li><a class="dropdown-item text-punk" href="grob.html"><i class="bi bi-person-badge me-2"></i>Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="grobKaifIliBolshe.html"><i class="bi bi-music-note-beamed me-2"></i>Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="catalog.html"><i class="bi bi-collection me-2"></i>Каталог</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Основное содержимое -->
|
||||
<main class="container my-5 flex-grow-1">
|
||||
<div class="text-center mb-5">
|
||||
<h1 class="display-4 text-punk mb-4">Стриминговый сервис <em>"Панкуха"</em></h1>
|
||||
<img src="res/logo.png" alt="Эмблема" class="img-fluid" style="max-width: 200px;">
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="card bg-black border-punk mb-5">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title h4 text-punk">
|
||||
<i class="bi bi-clipboard-check-fill"></i> Реализованные страницы:
|
||||
</h2>
|
||||
<div class="list-group">
|
||||
<a href="index.html" class="list-group-item list-group-item-action bg-dark text-punk border-punk">
|
||||
<i class="bi bi-house"></i> Главная страница
|
||||
</a>
|
||||
<a href="grob.html" class="list-group-item list-group-item-action bg-dark text-punk border-punk">
|
||||
<i class="bi bi-person-vcard"></i> Страница исполнителя
|
||||
</a>
|
||||
<a href="grobKaifIliBolshe.html" class="list-group-item list-group-item-action bg-dark text-punk border-punk">
|
||||
<i class="bi bi-music-note-beamed"></i> Страница песни
|
||||
</a>
|
||||
<a href="catalog.html" class="list-group-item list-group-item-action bg-dark text-punk border-punk">
|
||||
<i class="bi bi-collection"></i> Каталог
|
||||
</a>
|
||||
<a href="punkrock.html" class="list-group-item list-group-item-action bg-dark text-punk border-punk">
|
||||
<i class="bi bi-disc"></i> Страница каталога
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Подвал -->
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
<a href="https://vk.com/kadyshevever" class="text-punk">
|
||||
<i class="bi bi-vk fs-4"></i>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
2941
lab4/my-project/package-lock.json
generated
2941
lab4/my-project/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,27 +0,0 @@
|
||||
{
|
||||
"name": "my-project",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint .",
|
||||
"format": "prettier --write .",
|
||||
"prepare": "husky install",
|
||||
"start:server": "json-server --watch db.json --port 3000"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.3.3",
|
||||
"bootstrap-icons": "^1.11.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-prettier": "^10.0.2",
|
||||
"prettier": "^3.2.5",
|
||||
"vite": "^5.1.0",
|
||||
"vite-plugin-html": "^3.2.0",
|
||||
"json-server": "^0.17.4"
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,195 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Панк-рок | Панкуха</title>
|
||||
|
||||
<!-- Подключаем стили в HEAD -->
|
||||
<!-- 1. Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- 2. Иконки Bootstrap -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<!-- 3. Кастомные стили -->
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<!-- Логотип и название -->
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
|
||||
<!-- Кнопка для мобильных -->
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- Навигация -->
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle text-punk fw-bold" href="#" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list-check me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark border-punk">
|
||||
<li><a class="dropdown-item text-punk" href="index.html"><i class="bi bi-house-door me-2"></i>Главная</a></li>
|
||||
<li><hr class="dropdown-divider border-punk"></li>
|
||||
<li><a class="dropdown-item text-punk" href="grob.html"><i class="bi bi-person-badge me-2"></i>Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="grobKaifIliBolshe.html"><i class="bi bi-music-note-beamed me-2"></i>Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="catalog.html"><i class="bi bi-collection me-2"></i>Каталог</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container my-5 flex-grow-1">
|
||||
<div class="container py-4">
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-3">
|
||||
<i class="bi bi-people-fill"></i> Перечень исполнителей панк-рока
|
||||
</h3>
|
||||
<p class="lead text-light">
|
||||
Список культовых групп жанра
|
||||
</p>
|
||||
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="grob.html" class="text-punk text-decoration-none d-flex align-items-center">
|
||||
<i class="bi bi-person-badge me-2"></i> Гражданская Оборона
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="#" class="text-punk text-decoration-none d-flex align-items-center">
|
||||
<i class="bi bi-person-badge me-2"></i> Король и Шут
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="#" class="text-punk text-decoration-none d-flex align-items-center">
|
||||
<i class="bi bi-person-badge me-2"></i> Наив
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Форма добавления исполнителя -->
|
||||
<div class="container my-5">
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-4"><i class="bi bi-person-plus"></i> Добавить исполнителя</h3>
|
||||
|
||||
<form id="artistForm">
|
||||
<!-- Название группы -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Название группы</label>
|
||||
<input type="text" class="form-control bg-dark text-light border-punk" id="artistName" required>
|
||||
</div>
|
||||
<!-- Описание -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Описание</label>
|
||||
<textarea class="form-control bg-dark text-light border-punk" id="description" required></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Эпоха -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Эпоха</label>
|
||||
<select class="form-select bg-dark text-light border-punk" id="artistEpoch" required>
|
||||
<option value="" selected>Выберите эпоху</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Страна -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Страна</label>
|
||||
<select class="form-select bg-dark text-light border-punk" id="artistCountry" required>
|
||||
<option value="" selected>Выберите страну</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Кнопка добавления -->
|
||||
<button type="submit" class="btn btn-punk mt-3">
|
||||
<i class="bi bi-plus-circle"></i> Добавить исполнителя
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Контейнер для карточек исполнителей -->
|
||||
<div id="artistsContainer" class="row row-cols-1 row-cols-md-3 g-4 mt-4"></div>
|
||||
|
||||
<!-- Модальное окно для редактирования исполнителя -->
|
||||
<div class="modal fade" id="editArtistModal" tabindex="-1" aria-labelledby="editArtistModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content bg-dark border-punk">
|
||||
<div class="modal-header border-punk">
|
||||
<h5 class="modal-title text-punk" id="editArtistModalLabel"><i class="bi bi-pencil-square me-2"></i>Редактировать исполнителя</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="editArtistForm">
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Название группы</label>
|
||||
<input type="text" class="form-control bg-dark text-light border-punk" id="editArtistName" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Описание</label>
|
||||
<textarea class="form-control bg-dark text-light border-punk" id="editDescription" required></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Эпоха</label>
|
||||
<select class="form-select bg-dark text-light border-punk" id="editArtistEpoch" required>
|
||||
<option value="" selected>Выберите эпоху</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Страна</label>
|
||||
<select class="form-select bg-dark text-light border-punk" id="editArtistCountry" required>
|
||||
<option value="" selected>Выберите страну</option>
|
||||
</select>
|
||||
</div>
|
||||
<input type="hidden" id="editArtistId">
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer border-punk">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
|
||||
<button type="button" class="btn btn-punk" id="saveEditArtist"><i class="bi bi-save"></i> Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Подвал -->
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Основной скрипт -->
|
||||
<script type="module" src="src/js/main.js"></script>
|
||||
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'93bfefb2de89bd0c',t:'MTc0NjYxMjcxOC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,9 +0,0 @@
|
||||
export function setupCounter(element) {
|
||||
let counter = 0
|
||||
const setCounter = (count) => {
|
||||
counter = count
|
||||
element.innerHTML = `count is ${counter}`
|
||||
}
|
||||
element.addEventListener('click', () => setCounter(counter + 1))
|
||||
setCounter(0)
|
||||
}
|
||||
@@ -1,189 +0,0 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
--punk-primary: blueviolet;
|
||||
--punk-dark: #121212;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: blueviolet;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background-color: var(--punk-dark);
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
}
|
||||
.lyrics {
|
||||
text-align: center;
|
||||
line-height: 1.8;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.chorus {
|
||||
font-weight: bold;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vanilla:hover {
|
||||
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||
}
|
||||
/* Анимация карточек */
|
||||
.catalog-item {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.catalog-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
|
||||
}
|
||||
.btn-punk {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-punk:hover {
|
||||
background-color: #9d4edd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.artist-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.bg-punk {
|
||||
background-color: blueviolet !important;
|
||||
}
|
||||
/* Стиль кнопок */
|
||||
.btn-outline-punk {
|
||||
color: blueviolet;
|
||||
border-color: blueviolet;
|
||||
}
|
||||
.btn-outline-punk:hover {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
color: blueviolet;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
.bg-punk {
|
||||
background-color: var(--punk-primary) !important;
|
||||
}
|
||||
|
||||
.text-punk {
|
||||
color: var(--punk-primary) !important;
|
||||
}
|
||||
.border-punk {
|
||||
border-color: var(--punk-primary) !important;
|
||||
}
|
||||
.nav-link:hover, .dropdown-item:hover {
|
||||
color: white !important;
|
||||
background-color: var(--punk-primary) !important;
|
||||
}
|
||||
.list-group-item-action:hover {
|
||||
transform: translateX(5px);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.lead{
|
||||
color: blueviolet;
|
||||
text-align: center;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:focus {
|
||||
text-shadow: 0 0 8px blueviolet;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
|
||||
|
Before Width: | Height: | Size: 995 B |
@@ -1,96 +0,0 @@
|
||||
export default class ArtistController {
|
||||
constructor(model, view) {
|
||||
this.model = model;
|
||||
this.view = view;
|
||||
|
||||
// Привязка обработчиков
|
||||
this.view.bindAddArtist(this.handleAddArtist);
|
||||
this.view.bindDeleteArtist(this.handleDeleteArtist);
|
||||
this.view.bindEditArtist(this.handleEditArtist);
|
||||
this.view.bindSaveEditArtist(this.handleUpdateArtist);
|
||||
|
||||
// Инициализация приложения
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
try {
|
||||
const [artists, countries, epochs] = await Promise.all([
|
||||
this.model.getAll(),
|
||||
this.model.getCountries(),
|
||||
this.model.getEpochs()
|
||||
]);
|
||||
console.log('Инициализация данных:', { artists, countries, epochs }); // Отладка
|
||||
// Проверяем, есть ли epoch и country у артистов
|
||||
if (artists.length > 0) {
|
||||
console.log('Пример артиста:', artists[0]);
|
||||
}
|
||||
this.view.renderArtists(artists);
|
||||
this.view.initCountries(countries);
|
||||
this.view.initEpochs(epochs);
|
||||
} catch (error) {
|
||||
console.error('Ошибка в init:', error);
|
||||
alert('Ошибка загрузки данных: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
handleAddArtist = async (artist) => {
|
||||
try {
|
||||
console.log('Добавление артиста:', artist); // Отладка
|
||||
await this.model.create(artist);
|
||||
await this.init();
|
||||
alert('Исполнитель добавлен!');
|
||||
} catch (error) {
|
||||
console.error('Ошибка в handleAddArtist:', error);
|
||||
alert('Ошибка: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
Z
|
||||
handleDeleteArtist = async (id) => {
|
||||
if (confirm('Удалить исполнителя?')) {
|
||||
try {
|
||||
await this.model.delete(id);
|
||||
await this.init();
|
||||
alert('Исполнитель удален!');
|
||||
} catch (error) {
|
||||
console.error('Ошибка в handleDeleteArtist:', error);
|
||||
alert('Ошибка: ' + error.message);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleEditArtist = async (id) => {
|
||||
try {
|
||||
const artist = await this.model.getById(id);
|
||||
console.log('Редактирование артиста:', artist); // Отладка
|
||||
if (!artist) {
|
||||
throw new Error('Исполнитель не найден');
|
||||
}
|
||||
this.view.showEditForm(artist);
|
||||
} catch (error) {
|
||||
console.error('Ошибка в handleEditArtist:', error);
|
||||
alert('Ошибка: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
handleUpdateArtist = async (artist) => {
|
||||
try {
|
||||
console.log('Обновление артиста:', artist); // Отладка
|
||||
if (!artist.epochId || !artist.countryId) {
|
||||
throw new Error('Эпоха и страна обязательны');
|
||||
}
|
||||
await this.model.update(artist.id, {
|
||||
name: artist.name,
|
||||
description: artist.description,
|
||||
epochId: artist.epochId,
|
||||
countryId: artist.countryId
|
||||
});
|
||||
await this.init();
|
||||
alert('Изменения сохранены!');
|
||||
} catch (error) {
|
||||
console.error('Ошибка в handleUpdateArtist:', error);
|
||||
alert('Ошибка: ' + error.message);
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import '../css/style.css'
|
||||
import 'bootstrap';
|
||||
|
||||
// Импорты компонентов MVC
|
||||
import ArtistModel from './model/ArtistModel.js';
|
||||
import ArtistView from './view/ArtistView.js';
|
||||
import ArtistController from './controller/ArtistController.js';
|
||||
|
||||
// Инициализация приложения
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
try {
|
||||
const model = new ArtistModel();
|
||||
const view = new ArtistView();
|
||||
new ArtistController(model, view);
|
||||
console.log('Приложение инициализировано');
|
||||
} catch (error) {
|
||||
console.error('Ошибка инициализации:', error);
|
||||
}
|
||||
});
|
||||
@@ -1,147 +0,0 @@
|
||||
export default class ArtistModel {
|
||||
constructor() {
|
||||
this.apiUrl = 'http://localhost:3000';
|
||||
}
|
||||
|
||||
async getAll() {
|
||||
try {
|
||||
const [artistsResponse, countriesResponse, epochsResponse] = await Promise.all([
|
||||
fetch(`${this.apiUrl}/artists`),
|
||||
fetch(`${this.apiUrl}/countries`),
|
||||
fetch(`${this.apiUrl}/epochs`)
|
||||
]);
|
||||
if (!artistsResponse.ok || !countriesResponse.ok || !epochsResponse.ok) {
|
||||
throw new Error('Ошибка загрузки данных');
|
||||
}
|
||||
const artists = await artistsResponse.json();
|
||||
const countries = await countriesResponse.json();
|
||||
const epochs = await epochsResponse.json();
|
||||
|
||||
console.log('Сырые артисты:', artists);
|
||||
console.log('Страны:', countries);
|
||||
console.log('Эпохи:', epochs);
|
||||
|
||||
const artistsWithRelations = artists.map(artist => {
|
||||
const countryId = Number(artist.countryId); // Приводим к числу
|
||||
const epochId = Number(artist.epochId); // Приводим к числу
|
||||
const country = countries.find(c => Number(c.id) === countryId) || { id: null, name: 'Не указана' };
|
||||
const epoch = epochs.find(e => Number(e.id) === epochId) || { id: null, name: 'Не указана' };
|
||||
console.log(`Артист ${artist.name}: countryId=${countryId}, country=${JSON.stringify(country)}, epochId=${epochId}, epoch=${JSON.stringify(epoch)}`);
|
||||
return {
|
||||
...artist,
|
||||
country,
|
||||
epoch
|
||||
};
|
||||
});
|
||||
|
||||
console.log('Артисты с отношениями:', artistsWithRelations);
|
||||
return artistsWithRelations;
|
||||
} catch (error) {
|
||||
console.error('Ошибка в getAll:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async getById(id) {
|
||||
try {
|
||||
const [artistResponse, countriesResponse, epochsResponse] = await Promise.all([
|
||||
fetch(`${this.apiUrl}/artists/${id}`),
|
||||
fetch(`${this.apiUrl}/countries`),
|
||||
fetch(`${this.apiUrl}/epochs`)
|
||||
]);
|
||||
if (!artistResponse.ok || !countriesResponse.ok || !epochsResponse.ok) {
|
||||
throw new Error('Ошибка загрузки данных');
|
||||
}
|
||||
const artist = await artistResponse.json();
|
||||
const countries = await countriesResponse.json();
|
||||
const epochs = await epochsResponse.json();
|
||||
|
||||
const countryId = Number(artist.countryId); // Приводим к числу
|
||||
const epochId = Number(artist.epochId); // Приводим к числу
|
||||
const country = countries.find(c => Number(c.id) === countryId) || { id: null, name: 'Не указана' };
|
||||
const epoch = epochs.find(e => Number(e.id) === epochId) || { id: null, name: 'Не указана' };
|
||||
console.log(`Артист ${artist.name}: countryId=${countryId}, country=${JSON.stringify(country)}, epochId=${epochId}, epoch=${JSON.stringify(epoch)}`);
|
||||
|
||||
const artistWithRelations = {
|
||||
...artist,
|
||||
country,
|
||||
epoch
|
||||
};
|
||||
|
||||
console.log('Полученный артист с отношениями:', artistWithRelations);
|
||||
return artistWithRelations;
|
||||
} catch (error) {
|
||||
console.error('Ошибка в getById:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async getCountries() {
|
||||
try {
|
||||
const response = await fetch(`${this.apiUrl}/countries`);
|
||||
if (!response.ok) throw new Error('Ошибка загрузки стран');
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Ошибка в getCountries:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async getEpochs() {
|
||||
try {
|
||||
const response = await fetch(`${this.apiUrl}/epochs`);
|
||||
if (!response.ok) throw new Error('Ошибка загрузки эпох');
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('Ошибка в getEpochs:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async create(artist) {
|
||||
try {
|
||||
const response = await fetch(`${this.apiUrl}/artists`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(artist)
|
||||
});
|
||||
if (!response.ok) throw new Error('Ошибка создания исполнителя');
|
||||
const createdArtist = await response.json();
|
||||
console.log('Созданный артист:', createdArtist);
|
||||
return createdArtist;
|
||||
} catch (error) {
|
||||
console.error('Ошибка в create:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async update(id, artist) {
|
||||
try {
|
||||
const response = await fetch(`${this.apiUrl}/artists/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(artist)
|
||||
});
|
||||
if (!response.ok) throw new Error('Ошибка обновления исполнителя');
|
||||
const updatedArtist = await response.json();
|
||||
console.log('Обновленный артист:', updatedArtist);
|
||||
return updatedArtist;
|
||||
} catch (error) {
|
||||
console.error('Ошибка в update:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async delete(id) {
|
||||
try {
|
||||
const response = await fetch(`${this.apiUrl}/artists/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (!response.ok) throw new Error('Ошибка удаления исполнителя');
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Ошибка в delete:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,148 +0,0 @@
|
||||
export default class ArtistView {
|
||||
constructor() {
|
||||
this.artistsContainer = document.getElementById('artistsContainer');
|
||||
this.artistForm = document.getElementById('artistForm');
|
||||
this.editArtistModal = document.getElementById('editArtistModal');
|
||||
this.saveEditArtistBtn = document.getElementById('saveEditArtist');
|
||||
|
||||
if (!this.artistsContainer || !this.artistForm || !this.editArtistModal || !this.saveEditArtistBtn) {
|
||||
console.error('Не найдены необходимые элементы DOM');
|
||||
}
|
||||
}
|
||||
|
||||
renderArtists(artists) {
|
||||
console.log('Рендеринг артистов:', artists); // Отладка
|
||||
this.artistsContainer.innerHTML = artists.map(artist => {
|
||||
console.log('Обработка артиста:', artist); // Отладка
|
||||
return `
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-punk">${artist.name}</h5>
|
||||
<p class="card-text text-light">${artist.description || 'Нет описания'}</p>
|
||||
<p class="card-text text-light"><small>Эпоха: ${artist.epoch?.name || 'Не указана'}</small></p>
|
||||
<p class="card-text text-light"><small>Страна: ${artist.country?.name || 'Не указана'}</small></p>
|
||||
<button class="btn btn-outline-primary edit-btn me-2" data-id="${artist.id}">
|
||||
<i class="bi bi-pencil-square"></i> Изменить
|
||||
</button>
|
||||
<button class="btn btn-outline-danger delete-btn" data-id="${artist.id}">
|
||||
<i class="bi bi-trash"></i> Удалить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
initCountries(countries) {
|
||||
const renderSelect = (selectId) => {
|
||||
const select = document.getElementById(selectId);
|
||||
select.innerHTML = '<option value="">Выберите страну</option>';
|
||||
countries.forEach(country => {
|
||||
const option = document.createElement('option');
|
||||
option.value = country.id;
|
||||
option.textContent = country.name;
|
||||
select.appendChild(option);
|
||||
});
|
||||
};
|
||||
|
||||
renderSelect('artistCountry');
|
||||
renderSelect('editArtistCountry');
|
||||
}
|
||||
|
||||
initEpochs(epochs) {
|
||||
const renderSelect = (selectId) => {
|
||||
const select = document.getElementById(selectId);
|
||||
select.innerHTML = '<option value="">Выберите эпоху</option>';
|
||||
epochs.forEach(epoch => {
|
||||
const option = document.createElement('option');
|
||||
option.value = epoch.id;
|
||||
option.textContent = epoch.name;
|
||||
select.appendChild(option);
|
||||
});
|
||||
};
|
||||
|
||||
renderSelect('artistEpoch');
|
||||
renderSelect('editArtistEpoch');
|
||||
}
|
||||
|
||||
showEditForm(artist) {
|
||||
console.log('Открытие формы редактирования:', artist); // Отладка
|
||||
document.getElementById('editArtistName').value = artist.name || '';
|
||||
document.getElementById('editDescription').value = artist.description || '';
|
||||
document.getElementById('editArtistEpoch').value = artist.epoch?.id || artist.epochId || '';
|
||||
document.getElementById('editArtistCountry').value = artist.country?.id || artist.countryId || '';
|
||||
document.getElementById('editArtistId').value = artist.id;
|
||||
|
||||
new bootstrap.Modal(this.editArtistModal).show();
|
||||
}
|
||||
|
||||
bindAddArtist(handler) {
|
||||
this.artistForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const artist = {
|
||||
name: document.getElementById('artistName').value.trim(),
|
||||
description: document.getElementById('description').value.trim(),
|
||||
epochId: parseInt(document.getElementById('artistEpoch').value) || null,
|
||||
countryId: parseInt(document.getElementById('artistCountry').value) || null
|
||||
};
|
||||
|
||||
console.log('Данные для добавления:', artist); // Отладка
|
||||
if (!artist.name || !artist.description || !artist.epochId || !artist.countryId) {
|
||||
alert('Все поля обязательны!');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await handler(artist);
|
||||
this.artistForm.reset();
|
||||
} catch (error) {
|
||||
alert('Ошибка при добавлении исполнителя: ' + error.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bindDeleteArtist(handler) {
|
||||
this.artistsContainer.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.delete-btn')) {
|
||||
const id = e.target.closest('.delete-btn').dataset.id;
|
||||
handler(id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bindEditArtist(handler) {
|
||||
this.artistsContainer.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.edit-btn')) {
|
||||
const id = e.target.closest('.edit-btn').dataset.id;
|
||||
handler(id);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
bindSaveEditArtist(handler) {
|
||||
this.saveEditArtistBtn.addEventListener('click', async () => {
|
||||
const artist = {
|
||||
id: document.getElementById('editArtistId').value,
|
||||
name: document.getElementById('editArtistName').value.trim(),
|
||||
description: document.getElementById('editDescription').value.trim(),
|
||||
epochId: parseInt(document.getElementById('editArtistEpoch').value) || null,
|
||||
countryId: parseInt(document.getElementById('editArtistCountry').value) || null
|
||||
};
|
||||
|
||||
console.log('Данные для обновления:', artist); // Отладка
|
||||
if (!artist.name || !artist.description || !artist.epochId || !artist.countryId) {
|
||||
alert('Все поля обязательны!');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await handler(artist);
|
||||
bootstrap.Modal.getInstance(this.editArtistModal).hide();
|
||||
} catch (error) {
|
||||
alert('Ошибка при обновлении исполнителя: ' + error.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
46
punk-rock-app/README.md
Normal file
46
punk-rock-app/README.md
Normal file
@@ -0,0 +1,46 @@
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
|
||||
The page will reload if you make edits.\
|
||||
You will also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
|
||||
|
||||
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
|
||||
|
||||
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
114
punk-rock-app/db.json
Normal file
114
punk-rock-app/db.json
Normal file
@@ -0,0 +1,114 @@
|
||||
{
|
||||
"artists": [
|
||||
{
|
||||
"id": "6",
|
||||
"name": "The Clash",
|
||||
"description": "Pioneers of British punk rock, known for their political lyrics.",
|
||||
"epochId": "1",
|
||||
"countryId": "1"
|
||||
},
|
||||
{
|
||||
"id": "7",
|
||||
"name": "Sex Pistols",
|
||||
"description": "Notorious for their rebellious attitude and controversial lyrics.",
|
||||
"epochId": "1",
|
||||
"countryId": "1"
|
||||
},
|
||||
{
|
||||
"id": "8",
|
||||
"name": "The Ramones",
|
||||
"description": "Influential American punk rock band, known for their fast-paced music.",
|
||||
"epochId": "1",
|
||||
"countryId": "1"
|
||||
},
|
||||
{
|
||||
"id": "9",
|
||||
"name": "The Damned",
|
||||
"description": "First British punk band to release a single and an album.",
|
||||
"epochId": "1",
|
||||
"countryId": "1"
|
||||
},
|
||||
{
|
||||
"id": "11",
|
||||
"name": "Red Hot Chili Peppers",
|
||||
"description": "Known for their unique fusion of punk rock and funkf",
|
||||
"epochId": "2",
|
||||
"countryId": "2",
|
||||
"epoch": {
|
||||
"id": "2",
|
||||
"name": "1990s"
|
||||
},
|
||||
"country": {
|
||||
"id": "2",
|
||||
"name": "UK"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "7fd4c5fb-933a-4496-967a-8d6b92252603",
|
||||
"name": "ыфвфвы",
|
||||
"description": "аыввавы",
|
||||
"epochId": "2",
|
||||
"countryId": "2"
|
||||
},
|
||||
{
|
||||
"id": "ac9dfa68-fd2c-44d4-8c25-fd9b417c2821",
|
||||
"name": "fdfddf",
|
||||
"description": "efeffdas",
|
||||
"epochId": "2",
|
||||
"countryId": "1"
|
||||
},
|
||||
{
|
||||
"id": "b8a25883-51c4-4075-87d7-a1906a34962e",
|
||||
"name": "Green Day",
|
||||
"description": "дддд",
|
||||
"epochId": "1",
|
||||
"countryId": "1"
|
||||
}
|
||||
],
|
||||
"epochs": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "1970s"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "1990s"
|
||||
}
|
||||
],
|
||||
"countries": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "USA"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "UK"
|
||||
}
|
||||
],
|
||||
"subscriptions": [
|
||||
{
|
||||
"id": "2",
|
||||
"userId": "2",
|
||||
"type": "Premium",
|
||||
"price": 15,
|
||||
"active": true
|
||||
},
|
||||
{
|
||||
"id": "4d38",
|
||||
"type": "Premium",
|
||||
"price": 15,
|
||||
"userId": 1,
|
||||
"active": true
|
||||
}
|
||||
],
|
||||
"users": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "User1"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "User2"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,32 +1,38 @@
|
||||
{
|
||||
"name": "punkrock-react",
|
||||
"name": "punk-rock-app",
|
||||
"version": "0.1.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "punkrock-react",
|
||||
"name": "punk-rock-app",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@testing-library/dom": "^10.4.0",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^16.18.126",
|
||||
"@types/react": "^19.1.6",
|
||||
"@types/react-dom": "^19.1.5",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"axios": "^1.9.0",
|
||||
"bootstrap": "^5.3.6",
|
||||
"bootstrap-icons": "^1.13.1",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap-icons": "^1.11.6",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^7.6.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-router-dom": "^7.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.5",
|
||||
"uuid": "^11.1.0",
|
||||
"web-vitals": "^2.1.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@adobe/css-tools": {
|
||||
"version": "4.4.2",
|
||||
"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.2.tgz",
|
||||
"integrity": "sha512-baYZExFpsdkBNuvGKTKWCwKH57HRZLVtycZS05WTQNVOiXVSeAki3nU35zlRbToeMW8aHlJfyS+1C4BOv27q0A==",
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.3.tgz",
|
||||
"integrity": "sha512-VQKMkwriZbaOgVCby1UDY/LDk5fIjhQicCvVPFqfe+69fWaPWydbWJ3wRt59/YzIwda1I81loas3oCoHxnqvdA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@alloc/quick-lru": {
|
||||
@@ -69,30 +75,30 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/compat-data": {
|
||||
"version": "7.27.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.27.2.tgz",
|
||||
"integrity": "sha512-TUtMJYRPyUb/9aU8f3K0mjmjf6M9N5Woshn2CS6nqJSeJtTtQcpLUXjGt9vbF8ZGff0El99sWkLgzwW3VXnxZQ==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.27.3.tgz",
|
||||
"integrity": "sha512-V42wFfx1ymFte+ecf6iXghnnP8kWTO+ZLXIyZq+1LAXHHvTZdVxicn4yiVYdYMGaCO3tmqub11AorKkv+iodqw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/core": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.27.1.tgz",
|
||||
"integrity": "sha512-IaaGWsQqfsQWVLqMn9OB92MNN7zukfVA4s7KKAI0KfrrDsZ0yhi5uV4baBuLuN7n3vsZpwP8asPPcVwApxvjBQ==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.27.3.tgz",
|
||||
"integrity": "sha512-hyrN8ivxfvJ4i0fIJuV4EOlV0WDMz5Ui4StRTgVaAvWeiRCilXgwVvxJKtFQ3TKtHgJscB2YiXKGNJuVwhQMtA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ampproject/remapping": "^2.2.0",
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
"@babel/generator": "^7.27.1",
|
||||
"@babel/helper-compilation-targets": "^7.27.1",
|
||||
"@babel/helper-module-transforms": "^7.27.1",
|
||||
"@babel/helpers": "^7.27.1",
|
||||
"@babel/parser": "^7.27.1",
|
||||
"@babel/template": "^7.27.1",
|
||||
"@babel/traverse": "^7.27.1",
|
||||
"@babel/types": "^7.27.1",
|
||||
"@babel/generator": "^7.27.3",
|
||||
"@babel/helper-compilation-targets": "^7.27.2",
|
||||
"@babel/helper-module-transforms": "^7.27.3",
|
||||
"@babel/helpers": "^7.27.3",
|
||||
"@babel/parser": "^7.27.3",
|
||||
"@babel/template": "^7.27.2",
|
||||
"@babel/traverse": "^7.27.3",
|
||||
"@babel/types": "^7.27.3",
|
||||
"convert-source-map": "^2.0.0",
|
||||
"debug": "^4.1.0",
|
||||
"gensync": "^1.0.0-beta.2",
|
||||
@@ -153,13 +159,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/generator": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.1.tgz",
|
||||
"integrity": "sha512-UnJfnIpc/+JO0/+KRVQNGU+y5taA5vCbwN8+azkX6beii/ZF+enZJSOKo11ZSzGJjlNfJHfQtmQT8H+9TXPG2w==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.3.tgz",
|
||||
"integrity": "sha512-xnlJYj5zepml8NXtjkG0WquFUv8RskFqyFcVgTBp5k+NaA/8uw/K+OSVf8AMGw5e9HKP2ETd5xpK5MLZQD6b4Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.27.1",
|
||||
"@babel/types": "^7.27.1",
|
||||
"@babel/parser": "^7.27.3",
|
||||
"@babel/types": "^7.27.3",
|
||||
"@jridgewell/gen-mapping": "^0.3.5",
|
||||
"@jridgewell/trace-mapping": "^0.3.25",
|
||||
"jsesc": "^3.0.2"
|
||||
@@ -169,12 +175,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-annotate-as-pure": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.1.tgz",
|
||||
"integrity": "sha512-WnuuDILl9oOBbKnb4L+DyODx7iC47XfzmNCpTttFsSp6hTG7XZxu60+4IO+2/hPfcGOoKbFiwoI/+zwARbNQow==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
|
||||
"integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.27.1"
|
||||
"@babel/types": "^7.27.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
@@ -304,14 +310,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-module-transforms": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.27.1.tgz",
|
||||
"integrity": "sha512-9yHn519/8KvTU5BjTVEEeIM3w9/2yXNKoD82JifINImhpKkARMJKPP59kLo+BafpdN5zgNeIcS4jsGDmd3l58g==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.27.3.tgz",
|
||||
"integrity": "sha512-dSOvYwvyLsWBeIRyOeHXp5vPj5l1I011r52FM1+r1jCERv+aFXYk4whgQccYEGYxK2H3ZAIA8nuPkQ0HaUo3qg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-module-imports": "^7.27.1",
|
||||
"@babel/helper-validator-identifier": "^7.27.1",
|
||||
"@babel/traverse": "^7.27.1"
|
||||
"@babel/traverse": "^7.27.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
@@ -430,25 +436,25 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helpers": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.1.tgz",
|
||||
"integrity": "sha512-FCvFTm0sWV8Fxhpp2McP5/W53GPllQ9QeQ7SiqGWjMf/LVG07lFa5+pgK05IRhVwtvafT22KF+ZSnM9I545CvQ==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.3.tgz",
|
||||
"integrity": "sha512-h/eKy9agOya1IGuLaZ9tEUgz+uIRXcbtOhRtUyyMf8JFmn1iT13vnl/IGVWSkdOCG/pC57U4S1jnAabAavTMwg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/template": "^7.27.1",
|
||||
"@babel/types": "^7.27.1"
|
||||
"@babel/template": "^7.27.2",
|
||||
"@babel/types": "^7.27.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/parser": {
|
||||
"version": "7.27.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.2.tgz",
|
||||
"integrity": "sha512-QYLs8299NA7WM/bZAdp+CviYYkVoYXlDW2rzliy3chxd1PQjej7JORuMJDJXJUb9g0TT+B99EwaVLKmX+sPXWw==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.3.tgz",
|
||||
"integrity": "sha512-xyYxRj6+tLNDTWi0KCBcZ9V7yg3/lwL9DWh9Uwh/RIVlIfFidggcgxKX3GCXwCiswwcGRawBKbEg2LG/Y8eJhw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.27.1"
|
||||
"@babel/types": "^7.27.3"
|
||||
},
|
||||
"bin": {
|
||||
"parser": "bin/babel-parser.js"
|
||||
@@ -999,9 +1005,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/plugin-transform-block-scoping": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.27.1.tgz",
|
||||
"integrity": "sha512-QEcFlMl9nGTgh1rn2nIeU5bkfb9BAjaQcWbiP4LvKxUot52ABcTkpcyJ7f2Q2U2RuQ84BNLgts3jRme2dTx6Fw==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.27.3.tgz",
|
||||
"integrity": "sha512-+F8CnfhuLhwUACIJMLWnjz6zvzYM2r0yeIHKlbgfw7ml8rOMJsXNXV/hyRcb3nb493gRs4WvYpQAndWj/qQmkQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-plugin-utils": "^7.27.1"
|
||||
@@ -1082,9 +1088,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/plugin-transform-destructuring": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.27.1.tgz",
|
||||
"integrity": "sha512-ttDCqhfvpE9emVkXbPD8vyxxh4TWYACVybGkDj+oReOGwnp066ITEivDlLwe0b1R0+evJ13IXQuLNB5w1fhC5Q==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.27.3.tgz",
|
||||
"integrity": "sha512-s4Jrok82JpiaIprtY2nHsYmrThKvvwgHwjgd7UMiYhZaN0asdXNLr0y+NjTfkA7SyQE5i2Fb7eawUOZmLvyqOA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-plugin-utils": "^7.27.1"
|
||||
@@ -1425,14 +1431,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/plugin-transform-object-rest-spread": {
|
||||
"version": "7.27.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.27.2.tgz",
|
||||
"integrity": "sha512-AIUHD7xJ1mCrj3uPozvtngY3s0xpv7Nu7DoUSnzNY6Xam1Cy4rUznR//pvMHOhQ4AvbCexhbqXCtpxGHOGOO6g==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.27.3.tgz",
|
||||
"integrity": "sha512-7ZZtznF9g4l2JCImCo5LNKFHB5eXnN39lLtLY5Tg+VkR0jwOt7TBciMckuiQIOIW7L5tkQOCh3bVGYeXgMx52Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-compilation-targets": "^7.27.2",
|
||||
"@babel/helper-plugin-utils": "^7.27.1",
|
||||
"@babel/plugin-transform-destructuring": "^7.27.1",
|
||||
"@babel/plugin-transform-destructuring": "^7.27.3",
|
||||
"@babel/plugin-transform-parameters": "^7.27.1"
|
||||
},
|
||||
"engines": {
|
||||
@@ -1679,9 +1685,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/plugin-transform-runtime": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.27.1.tgz",
|
||||
"integrity": "sha512-TqGF3desVsTcp3WrJGj4HfKokfCXCLcHpt4PJF0D8/iT6LPd9RS82Upw3KPeyr6B22Lfd3DO8MVrmp0oRkUDdw==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.27.3.tgz",
|
||||
"integrity": "sha512-bA9ZL5PW90YwNgGfjg6U+7Qh/k3zCEQJ06BFgAGRp/yMjw9hP9UGbGPtx3KSOkHGljEPCCxaE+PH4fUR2h1sDw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-module-imports": "^7.27.1",
|
||||
@@ -2011,9 +2017,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.1.tgz",
|
||||
"integrity": "sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.3.tgz",
|
||||
"integrity": "sha512-7EYtGezsdiDMyY80+65EzwiGmcJqpmcZCojSXaRgdrBaGtWTgDZKq69cPIVped6MkIM78cTQ2GOiEYjwOlG4xw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
@@ -2034,16 +2040,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/traverse": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.1.tgz",
|
||||
"integrity": "sha512-ZCYtZciz1IWJB4U61UPu4KEaqyfj+r5T1Q5mqPo+IBpcG9kHv30Z0aD8LXPgC1trYa6rK0orRyAhqUgk4MjmEg==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.3.tgz",
|
||||
"integrity": "sha512-lId/IfN/Ye1CIu8xG7oKBHXd2iNb2aW1ilPszzGcJug6M8RCKfVNcYhpI5+bMvFYjK7lXIM0R+a+6r8xhHp2FQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
"@babel/generator": "^7.27.1",
|
||||
"@babel/parser": "^7.27.1",
|
||||
"@babel/template": "^7.27.1",
|
||||
"@babel/types": "^7.27.1",
|
||||
"@babel/generator": "^7.27.3",
|
||||
"@babel/parser": "^7.27.3",
|
||||
"@babel/template": "^7.27.2",
|
||||
"@babel/types": "^7.27.3",
|
||||
"debug": "^4.3.1",
|
||||
"globals": "^11.1.0"
|
||||
},
|
||||
@@ -2052,9 +2058,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/types": {
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.1.tgz",
|
||||
"integrity": "sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==",
|
||||
"version": "7.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.3.tgz",
|
||||
"integrity": "sha512-Y1GkI4ktrtvmawoSq+4FCVHNryea6uR+qUQy0AGxLSsjCX0nVmkYQMBLHDkXZuo5hGx7eYdnIaslsdBFm7zbUw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-string-parser": "^7.27.1",
|
||||
@@ -3097,6 +3103,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
@@ -3690,9 +3697,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/express": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
|
||||
"integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
|
||||
"version": "4.17.22",
|
||||
"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.22.tgz",
|
||||
"integrity": "sha512-eZUmSnhRX9YRSkplpz0N+k6NljUUn5l3EWZIKZvYzhvMphEuNiyyy1viH/ejgt66JWgALwC/gtSUAeQKtSwW/w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/body-parser": "*",
|
||||
@@ -3734,6 +3741,12 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/history": {
|
||||
"version": "4.7.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
|
||||
"integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/html-minifier-terser": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
|
||||
@@ -3779,6 +3792,16 @@
|
||||
"@types/istanbul-lib-report": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/jest": {
|
||||
"version": "27.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.5.2.tgz",
|
||||
"integrity": "sha512-mpT8LJJ4CMeeahobofYWIjFo0xonRS/HfxnVEPMPFSQdGUt1uHCnoPT7Zhb+sjDU2wz0oKV0OLUR0WzrHNgfeA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jest-matcher-utils": "^27.0.0",
|
||||
"pretty-format": "^27.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/json-schema": {
|
||||
"version": "7.0.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||
@@ -3798,13 +3821,10 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "22.15.18",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.18.tgz",
|
||||
"integrity": "sha512-v1DKRfUdyW+jJhZNEI1PYy29S2YRxMV5AOO/x/SjKmW0acCIOqmbj6Haf9eHAhsPmrhlHSxEhv/1WszcLWV4cg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.21.0"
|
||||
}
|
||||
"version": "16.18.126",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.126.tgz",
|
||||
"integrity": "sha512-OTcgaiwfGFBKacvfwuHzzn1KLxH/er8mluiy8/uM3sGXHaRe73RrSIj01jow9t4kJEW633Ov+cOexXeiApTyAw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node-forge": {
|
||||
"version": "1.3.11",
|
||||
@@ -3834,9 +3854,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/qs": {
|
||||
"version": "6.9.18",
|
||||
"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz",
|
||||
"integrity": "sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==",
|
||||
"version": "6.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
|
||||
"integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/range-parser": {
|
||||
@@ -3845,6 +3865,45 @@
|
||||
"integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "19.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.6.tgz",
|
||||
"integrity": "sha512-JeG0rEWak0N6Itr6QUx+X60uQmN+5t3j9r/OVDtWzFXKaj6kD1BwJzOksD0FF6iWxZlbE1kB0q9vtnU2ekqa1Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "19.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.5.tgz",
|
||||
"integrity": "sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-router": {
|
||||
"version": "5.1.20",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
|
||||
"integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/history": "^4.7.11",
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-router-dom": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
|
||||
"integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/history": "^4.7.11",
|
||||
"@types/react": "*",
|
||||
"@types/react-router": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/resolve": {
|
||||
"version": "1.17.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
||||
@@ -4909,6 +4968,32 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
|
||||
"integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axios/node_modules/form-data": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
|
||||
"integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"es-set-tostringtag": "^2.1.0",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
|
||||
@@ -6412,6 +6497,12 @@
|
||||
"integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/damerau-levenshtein": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
|
||||
@@ -6888,9 +6979,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.152",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.152.tgz",
|
||||
"integrity": "sha512-xBOfg/EBaIlVsHipHl2VdTPJRSvErNUaqW8ejTq5OlOlIYx1wOllCHsAvAIrr55jD1IYEfdR86miUEt8H5IeJg==",
|
||||
"version": "1.5.158",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.158.tgz",
|
||||
"integrity": "sha512-9vcp2xHhkvraY6AHw2WMi+GDSLPX42qe2xjYaVoZqFRJiOcilVQFq9mZmpuHEQpzlgGDelKlV7ZiGcmMsc8WxQ==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/emittery": {
|
||||
@@ -6970,27 +7061,27 @@
|
||||
}
|
||||
},
|
||||
"node_modules/es-abstract": {
|
||||
"version": "1.23.9",
|
||||
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz",
|
||||
"integrity": "sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==",
|
||||
"version": "1.23.10",
|
||||
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.10.tgz",
|
||||
"integrity": "sha512-MtUbM072wlJNyeYAe0mhzrD+M6DIJa96CZAOBBrhDbgKnB4MApIKefcyAB1eOdYn8cUNZgvwBvEzdoAYsxgEIw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"array-buffer-byte-length": "^1.0.2",
|
||||
"arraybuffer.prototype.slice": "^1.0.4",
|
||||
"available-typed-arrays": "^1.0.7",
|
||||
"call-bind": "^1.0.8",
|
||||
"call-bound": "^1.0.3",
|
||||
"call-bound": "^1.0.4",
|
||||
"data-view-buffer": "^1.0.2",
|
||||
"data-view-byte-length": "^1.0.2",
|
||||
"data-view-byte-offset": "^1.0.1",
|
||||
"es-define-property": "^1.0.1",
|
||||
"es-errors": "^1.3.0",
|
||||
"es-object-atoms": "^1.0.0",
|
||||
"es-object-atoms": "^1.1.1",
|
||||
"es-set-tostringtag": "^2.1.0",
|
||||
"es-to-primitive": "^1.3.0",
|
||||
"function.prototype.name": "^1.1.8",
|
||||
"get-intrinsic": "^1.2.7",
|
||||
"get-proto": "^1.0.0",
|
||||
"get-intrinsic": "^1.3.0",
|
||||
"get-proto": "^1.0.1",
|
||||
"get-symbol-description": "^1.1.0",
|
||||
"globalthis": "^1.0.4",
|
||||
"gopd": "^1.2.0",
|
||||
@@ -7006,13 +7097,13 @@
|
||||
"is-shared-array-buffer": "^1.0.4",
|
||||
"is-string": "^1.1.1",
|
||||
"is-typed-array": "^1.1.15",
|
||||
"is-weakref": "^1.1.0",
|
||||
"is-weakref": "^1.1.1",
|
||||
"math-intrinsics": "^1.1.0",
|
||||
"object-inspect": "^1.13.3",
|
||||
"object-inspect": "^1.13.4",
|
||||
"object-keys": "^1.1.1",
|
||||
"object.assign": "^4.1.7",
|
||||
"own-keys": "^1.0.1",
|
||||
"regexp.prototype.flags": "^1.5.3",
|
||||
"regexp.prototype.flags": "^1.5.4",
|
||||
"safe-array-concat": "^1.1.3",
|
||||
"safe-push-apply": "^1.0.0",
|
||||
"safe-regex-test": "^1.1.0",
|
||||
@@ -7025,7 +7116,7 @@
|
||||
"typed-array-byte-offset": "^1.0.4",
|
||||
"typed-array-length": "^1.0.7",
|
||||
"unbox-primitive": "^1.1.0",
|
||||
"which-typed-array": "^1.1.18"
|
||||
"which-typed-array": "^1.1.19"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.4"
|
||||
@@ -12777,15 +12868,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-load-config/node_modules/yaml": {
|
||||
"version": "2.7.1",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
|
||||
"integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
|
||||
"version": "2.8.0",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
|
||||
"integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
|
||||
"license": "ISC",
|
||||
"bin": {
|
||||
"yaml": "bin.mjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14"
|
||||
"node": ">= 14.6"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-loader": {
|
||||
@@ -13676,6 +13767,12 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/psl": {
|
||||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
|
||||
@@ -13804,13 +13901,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
||||
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
|
||||
"version": "19.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
|
||||
"integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@@ -13832,18 +13926,6 @@
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/react-bootstrap-icons": {
|
||||
"version": "1.11.6",
|
||||
"resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.11.6.tgz",
|
||||
"integrity": "sha512-ycXiyeSyzbS1C4+MlPTYe0riB+UlZ7LV7YZQYqlERV2cxDiKtntI0huHmP/3VVvzPt4tGxqK0K+Y6g7We3U6tQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.6"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dev-utils": {
|
||||
"version": "12.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
|
||||
@@ -13950,16 +14032,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
||||
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
|
||||
"version": "19.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
|
||||
"integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.2"
|
||||
"scheduler": "^0.26.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.3.1"
|
||||
"react": "^19.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-error-overlay": {
|
||||
@@ -13984,9 +14065,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.6.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.0.tgz",
|
||||
"integrity": "sha512-GGufuHIVCJDbnIAXP3P9Sxzq3UUsddG3rrI3ut1q6m0FI6vxVBF3JoPQ38+W/blslLH4a5Yutp8drkEpXoddGQ==",
|
||||
"version": "7.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz",
|
||||
"integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^1.0.1",
|
||||
@@ -14006,12 +14087,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.6.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.0.tgz",
|
||||
"integrity": "sha512-DYgm6RDEuKdopSyGOWZGtDfSm7Aofb8CCzgkliTjtu/eDuB0gcsv6qdFhhi8HdtmA+KHkt5MfZ5K2PdzjugYsA==",
|
||||
"version": "7.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.1.tgz",
|
||||
"integrity": "sha512-vxU7ei//UfPYQ3iZvHuO1D/5fX3/JOqhNTbRR+WjSBWxf9bIvpWK+ftjmdfJHzPOuMQKe2fiEdG+dZX6E8uUpA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.6.0"
|
||||
"react-router": "7.6.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
@@ -14697,13 +14778,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.23.2",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
|
||||
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
"version": "0.26.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
|
||||
"integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/schema-utils": {
|
||||
"version": "4.3.2",
|
||||
@@ -15134,6 +15212,15 @@
|
||||
"websocket-driver": "^0.7.4"
|
||||
}
|
||||
},
|
||||
"node_modules/sockjs/node_modules/uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/source-list-map": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
|
||||
@@ -16014,9 +16101,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/tapable": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
|
||||
"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
|
||||
"integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
@@ -16078,13 +16165,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/terser": {
|
||||
"version": "5.39.1",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.39.1.tgz",
|
||||
"integrity": "sha512-Mm6+uad0ZuDtcV8/4uOZQDQ8RuiC5Pu+iZRedJtF7yA/27sPL7d++In/AJKpWZlU3SYMPPkVfwetn6sgZ66pUA==",
|
||||
"version": "5.39.2",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.39.2.tgz",
|
||||
"integrity": "sha512-yEPUmWve+VA78bI71BW70Dh0TuV4HHd+I5SHOAfS1+QBOmvmCiiffgjR8ryyEd3KIfvPGFqoADt8LdQ6XpXIvg==",
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"@jridgewell/source-map": "^0.3.3",
|
||||
"acorn": "^8.8.2",
|
||||
"acorn": "^8.14.0",
|
||||
"commander": "^2.20.0",
|
||||
"source-map-support": "~0.5.20"
|
||||
},
|
||||
@@ -16457,7 +16544,6 @@
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
|
||||
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@@ -16490,12 +16576,6 @@
|
||||
"integrity": "sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "6.21.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
|
||||
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/unicode-canonical-property-names-ecmascript": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
|
||||
@@ -16668,12 +16748,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/uuid": {
|
||||
"version": "8.3.2",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
|
||||
"integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
|
||||
"version": "11.1.0",
|
||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
|
||||
"integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
|
||||
"funding": [
|
||||
"https://github.com/sponsors/broofa",
|
||||
"https://github.com/sponsors/ctavan"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"uuid": "dist/bin/uuid"
|
||||
"uuid": "dist/esm/bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/v8-to-istanbul": {
|
||||
@@ -16737,9 +16821,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/watchpack": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
|
||||
"integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
|
||||
"version": "2.4.4",
|
||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
|
||||
"integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"glob-to-regexp": "^0.4.1",
|
||||
@@ -16774,9 +16858,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/webpack": {
|
||||
"version": "5.99.8",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.99.8.tgz",
|
||||
"integrity": "sha512-lQ3CPiSTpfOnrEGeXDwoq5hIGzSjmwD72GdfVzF7CQAI7t47rJG9eDWvcEkEn3CUQymAElVvDg3YNTlCYj+qUQ==",
|
||||
"version": "5.99.9",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.99.9.tgz",
|
||||
"integrity": "sha512-brOPwM3JnmOa+7kd3NsmOUOwbDAj8FT9xDsG3IW0MgbN9yZV7Oi/s/+MNQ/EcSMqw7qfoRyXPoeEWT8zLVdVGg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/eslint-scope": "^3.7.7",
|
||||
@@ -16962,9 +17046,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-sources": {
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
|
||||
"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.0.tgz",
|
||||
"integrity": "sha512-77R0RDmJfj9dyv5p3bM5pOHa+X8/ZkO9c7kpDstigkC4nIDobadsfSGCwB4bKhMVxqAok8tajaoR8rirM7+VFQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.13.0"
|
||||
@@ -1,21 +1,26 @@
|
||||
{
|
||||
"name": "punkrock-react",
|
||||
"name": "punk-rock-app",
|
||||
"version": "0.1.0",
|
||||
"homepage": "/punkrock",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@testing-library/dom": "^10.4.0",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^16.18.126",
|
||||
"@types/react": "^19.1.6",
|
||||
"@types/react-dom": "^19.1.5",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"axios": "^1.9.0",
|
||||
"bootstrap": "^5.3.6",
|
||||
"bootstrap-icons": "^1.13.1",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap-icons": "^1.11.6",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^7.6.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-router-dom": "^7.6.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.5",
|
||||
"uuid": "^11.1.0",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
@@ -6,7 +6,7 @@
|
||||
<link href="/styles.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<title>Панкуха</title>
|
||||
<title>Punk Rock App</title>
|
||||
</head>
|
||||
<body class="bg-dark text-light">
|
||||
<div id="root"></div>
|
||||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
25
punk-rock-app/public/manifest.json
Normal file
25
punk-rock-app/public/manifest.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 89 KiB After Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 240 KiB After Width: | Height: | Size: 240 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 969 KiB After Width: | Height: | Size: 969 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
@@ -27,8 +27,6 @@ a:hover {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background-color: var(--punk-dark);
|
||||
@@ -79,14 +77,18 @@ h1 {
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
|
||||
}
|
||||
.btn-punk {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
border: none;
|
||||
background-color: blueviolet !important; /* Увеличиваем специфичность */
|
||||
color: white !important;
|
||||
border: none !important;
|
||||
padding: 0.6em 1.2em; /* Убедимся, что есть отступы */
|
||||
display: inline-block; /* Убедимся, что кнопка видна */
|
||||
visibility: visible; /* Убедимся, что не скрыта */
|
||||
opacity: 1; /* Убедимся, что не прозрачна */
|
||||
}
|
||||
|
||||
.btn-punk:hover {
|
||||
background-color: #9d4edd;
|
||||
color: white;
|
||||
background-color: #9d4edd !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
@@ -101,7 +103,7 @@ h1 {
|
||||
.bg-punk {
|
||||
background-color: blueviolet !important;
|
||||
}
|
||||
/* Стиль кнопок */
|
||||
|
||||
.btn-outline-punk {
|
||||
color: blueviolet;
|
||||
border-color: blueviolet;
|
||||
@@ -186,4 +188,4 @@ button:focus-visible {
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
53
punk-rock-app/src/App.tsx
Normal file
53
punk-rock-app/src/App.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
|
||||
import Home from './pages/Home';
|
||||
import Catalog from './pages/Catalog';
|
||||
import ArtistPage from './pages/ArtistPage';
|
||||
import ArtistsPage from './pages/ArtistsPage';
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<Router>
|
||||
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div className="container">
|
||||
<Link className="navbar-brand text-punk" to="/">Панкуха</Link>
|
||||
<button
|
||||
className="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div className="collapse navbar-collapse" id="navbarNav">
|
||||
<ul className="navbar-nav">
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/">Главная</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/catalog">Каталог</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/artist">Исполнитель</Link>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/artists">Список исполнителей</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/catalog" element={<Catalog />} />
|
||||
<Route path="/artist" element={<ArtistPage />} />
|
||||
<Route path="/artists" element={<ArtistsPage />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -1,14 +1,27 @@
|
||||
import React from 'react';
|
||||
import { Artist, Epoch, Country } from '../types';
|
||||
|
||||
interface ArtistCardProps {
|
||||
artist: Artist;
|
||||
epochs: Epoch[];
|
||||
countries: Country[];
|
||||
onEdit: (artist: Artist) => void;
|
||||
onDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
const ArtistCard: React.FC<ArtistCardProps> = ({ artist, epochs, countries, onEdit, onDelete }) => {
|
||||
// Получаем имена эпохи и страны по идентификаторам
|
||||
const epochName = epochs.find(e => e.id === artist.epochId)?.name || 'Не указана';
|
||||
const countryName = countries.find(c => c.id === artist.countryId)?.name || 'Не указана';
|
||||
|
||||
const ArtistCard = ({ artist, onEdit, onDelete }) => {
|
||||
return (
|
||||
<div className="col-md-4 mb-4">
|
||||
<div className="card bg-dark border-punk">
|
||||
<div className="card-body">
|
||||
<h5 className="card-title text-punk">{artist.name}</h5>
|
||||
<p className="card-text text-light">{artist.description || 'Нет описания'}</p>
|
||||
<p className="card-text text-light"><small>Эпоха: {artist.epoch?.name || 'Не указана'}</small></p>
|
||||
<p className="card-text text-light"><small>Страна: {artist.country?.name || 'Не указана'}</small></p>
|
||||
<p className="card-text text-light"><small>Эпоха: {epochName}</small></p>
|
||||
<p className="card-text text-light"><small>Страна: {countryName}</small></p>
|
||||
<button
|
||||
className="btn btn-outline-primary edit-btn me-2"
|
||||
onClick={() => onEdit(artist)}
|
||||
@@ -17,11 +30,7 @@ const ArtistCard = ({ artist, onEdit, onDelete }) => {
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-danger delete-btn"
|
||||
onClick={() => {
|
||||
if (window.confirm('Удалить исполнителя?')) {
|
||||
onDelete(artist.id);
|
||||
}
|
||||
}}
|
||||
onClick={() => onDelete(artist.id)}
|
||||
>
|
||||
<i className="bi bi-trash"></i> Удалить
|
||||
</button>
|
||||
161
punk-rock-app/src/components/ArtistForm.tsx
Normal file
161
punk-rock-app/src/components/ArtistForm.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import React, { useState, useEffect, ChangeEvent } from 'react';
|
||||
import { Artist, Epoch, Country } from '../types';
|
||||
|
||||
interface ArtistFormProps {
|
||||
countries: Country[];
|
||||
epochs: Epoch[];
|
||||
onSubmit: (artist: Artist) => Promise<void>;
|
||||
artist?: Artist | null;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
const ArtistForm: React.FC<ArtistFormProps> = ({ countries, epochs, onSubmit, artist, onCancel }) => {
|
||||
const [formData, setFormData] = useState<Artist>({
|
||||
id: '',
|
||||
name: '',
|
||||
description: '',
|
||||
epochId: '',
|
||||
countryId: '',
|
||||
});
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('ArtistForm artist prop:', artist);
|
||||
if (artist) {
|
||||
setFormData({
|
||||
id: artist.id,
|
||||
name: artist.name,
|
||||
description: artist.description,
|
||||
epochId: artist.epochId,
|
||||
countryId: artist.countryId,
|
||||
});
|
||||
} else {
|
||||
setFormData({
|
||||
id: '',
|
||||
name: '',
|
||||
description: '',
|
||||
epochId: '',
|
||||
countryId: '',
|
||||
});
|
||||
}
|
||||
}, [artist]);
|
||||
|
||||
const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!formData.name || !formData.description || !formData.epochId || !formData.countryId) {
|
||||
setError('Все поля обязательны!');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setError(null);
|
||||
if (artist) {
|
||||
// Если редактируем существующего артиста, передаем id
|
||||
await onSubmit({ ...formData, id: artist.id });
|
||||
} else {
|
||||
// Если добавляем нового артиста, id не передаем
|
||||
await onSubmit(formData);
|
||||
}
|
||||
setFormData({
|
||||
id: '',
|
||||
name: '',
|
||||
description: '',
|
||||
epochId: '',
|
||||
countryId: '',
|
||||
});
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'Ошибка при добавлении/редактировании исполнителя');
|
||||
}
|
||||
};
|
||||
|
||||
console.log('Rendering form with formData:', formData);
|
||||
|
||||
return (
|
||||
<div className="card bg-dark border-punk">
|
||||
<div className="card-body">
|
||||
<h3 className="text-punk mb-4">
|
||||
<i className={`bi ${artist ? 'bi-pencil-square' : 'bi-person-plus'}`}></i>
|
||||
{artist ? 'Редактировать исполнителя' : 'Добавить исполнителя'}
|
||||
</h3>
|
||||
|
||||
{error && <div className="alert alert-danger">{error}</div>}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Название группы</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control bg-dark text-light border-punk"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Описание</label>
|
||||
<textarea
|
||||
className="form-control bg-dark text-light border-punk"
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Эпоха</label>
|
||||
<select
|
||||
className="form-select bg-dark text-light border-punk"
|
||||
name="epochId"
|
||||
value={formData.epochId}
|
||||
onChange={handleChange}
|
||||
required
|
||||
>
|
||||
<option value={0}>Выберите эпоху</option>
|
||||
{epochs.map(epoch => (
|
||||
<option key={epoch.id} value={epoch.id}>{epoch.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Страна</label>
|
||||
<select
|
||||
className="form-select bg-dark text-light border-punk"
|
||||
name="countryId"
|
||||
value={formData.countryId}
|
||||
onChange={handleChange}
|
||||
required
|
||||
>
|
||||
<option value={0}>Выберите страну</option>
|
||||
{countries.map(country => (
|
||||
<option key={country.id} value={country.id}>{country.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-punk mt-3"
|
||||
style={{ zIndex: 1000 }}
|
||||
>
|
||||
<i className={`bi ${artist ? 'bi-save' : 'bi-plus-circle'}`}></i>
|
||||
{artist ? 'Сохранить изменения' : 'Добавить исполнителя'}
|
||||
</button>
|
||||
{artist && <button type="button" className="btn btn-secondary mt-3 ms-2" onClick={onCancel}>Отмена</button>}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArtistForm;
|
||||
30
punk-rock-app/src/components/ArtistList.tsx
Normal file
30
punk-rock-app/src/components/ArtistList.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import ArtistCard from './ArtistCard';
|
||||
import { Artist, Epoch, Country } from '../types';
|
||||
|
||||
interface ArtistListProps {
|
||||
artists: Artist[];
|
||||
epochs: Epoch[];
|
||||
countries: Country[];
|
||||
onEdit: (artist: Artist) => void;
|
||||
onDelete: (id: string) => void;
|
||||
}
|
||||
|
||||
const ArtistList: React.FC<ArtistListProps> = ({ artists, epochs, countries, onEdit, onDelete }) => {
|
||||
return (
|
||||
<div className="row row-cols-1 row-cols-md-3 g-4 mt-4">
|
||||
{artists.map(artist => (
|
||||
<ArtistCard
|
||||
key={artist.id}
|
||||
artist={artist}
|
||||
epochs={epochs}
|
||||
countries={countries}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArtistList;
|
||||
@@ -1,7 +1,6 @@
|
||||
// Footer.jsx
|
||||
import React from 'react';
|
||||
|
||||
const Footer = () => {
|
||||
const Footer: React.FC = () => {
|
||||
return (
|
||||
<footer className="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div className="container">
|
||||
@@ -1,25 +1,22 @@
|
||||
// Header.jsx
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Header = () => {
|
||||
const Header: React.FC = () => {
|
||||
return (
|
||||
<header className="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div className="container-fluid">
|
||||
<a href="/" className="navbar-brand d-flex align-items-center ms-3">
|
||||
|
||||
<Link to="/" className="navbar-brand d-flex align-items-center ms-3">
|
||||
<span className="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
|
||||
</Link>
|
||||
<button className="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div className="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul className="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<Link className="nav-link text-punk fw-bold" to="/contacts">
|
||||
<i className="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
40
punk-rock-app/src/components/SubscriptionForm.tsx
Normal file
40
punk-rock-app/src/components/SubscriptionForm.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import React, { useState, ChangeEvent } from 'react';
|
||||
import { Subscription } from '../types';
|
||||
|
||||
interface SubscriptionFormProps {
|
||||
onSubmit: (subscription: Omit<Subscription, 'id' | 'active' | 'userId'>) => Promise<void>;
|
||||
}
|
||||
|
||||
const SubscriptionForm: React.FC<SubscriptionFormProps> = ({ onSubmit }) => {
|
||||
const [subscriptionType, setSubscriptionType] = useState<string>('Basic');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
await onSubmit({ type: subscriptionType, price: subscriptionType === 'Basic' ? 5 : 15 });
|
||||
};
|
||||
|
||||
const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
|
||||
setSubscriptionType(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card bg-dark border-punk m-2">
|
||||
<div className="card-body">
|
||||
<h5 className="text-punk">Оформить подписку</h5>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<select
|
||||
className="form-select bg-dark text-light border-punk mb-3"
|
||||
value={subscriptionType}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="Basic">Базовая ($5)</option>
|
||||
<option value="Premium">Премиум ($15)</option>
|
||||
</select>
|
||||
<button type="submit" className="btn btn-punk">Подписаться</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubscriptionForm;
|
||||
138
punk-rock-app/src/hooks/useArtists.ts
Normal file
138
punk-rock-app/src/hooks/useArtists.ts
Normal file
@@ -0,0 +1,138 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getArtists, createArtist, updateArtist, deleteArtist, getEpochs, getCountries } from '../services/api';
|
||||
import { Artist, Epoch, Country } from '../types';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
const useArtists = () => {
|
||||
const [artists, setArtists] = useState<Artist[]>([]);
|
||||
const [epochs, setEpochs] = useState<Epoch[]>([]);
|
||||
const [countries, setCountries] = useState<Country[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [artistsData, epochsData, countriesData] = await Promise.all([
|
||||
getArtists(),
|
||||
getEpochs(),
|
||||
getCountries(),
|
||||
]);
|
||||
console.log('Artists data:', artistsData.data);
|
||||
console.log('Epochs data:', epochsData.data);
|
||||
console.log('Countries data:', countriesData.data);
|
||||
|
||||
const enrichedArtists = artistsData.data.map((artist: Artist) => ({
|
||||
...artist,
|
||||
epoch: epochsData.data.find((e: Epoch) => e.id.toString() === artist.epochId.toString()),
|
||||
country: countriesData.data.find((c: Country) => c.id.toString() === artist.countryId.toString()),
|
||||
}));
|
||||
|
||||
const sortedArtists = [...enrichedArtists].sort((a, b) =>
|
||||
sortOrder === 'asc'
|
||||
? a.name.localeCompare(b.name)
|
||||
: b.name.localeCompare(a.name)
|
||||
);
|
||||
|
||||
setArtists(sortedArtists);
|
||||
setEpochs(epochsData.data);
|
||||
setCountries(countriesData.data);
|
||||
setLoading(false);
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [sortOrder]);
|
||||
|
||||
|
||||
|
||||
const addArtist = async (artist: Omit<Artist, 'id'>) => {
|
||||
const nameExists = artists.some(a => a.name.toLowerCase() === artist.name.toLowerCase());
|
||||
if (nameExists) {
|
||||
throw new Error('Исполнитель с таким именем уже существует!');
|
||||
}
|
||||
|
||||
// Генерируем уникальный id на клиентской стороне
|
||||
const uniqueId = uuidv4();
|
||||
|
||||
// Создаем новый объект артиста с id
|
||||
const artistWithId: Artist = {
|
||||
...artist,
|
||||
id: uniqueId,
|
||||
epochId: artist.epochId.toString(),
|
||||
countryId: artist.countryId.toString(),
|
||||
};
|
||||
|
||||
// Отправляем объект на сервер
|
||||
const response = await createArtist(artistWithId);
|
||||
|
||||
const newArtist = {
|
||||
...response.data,
|
||||
epoch: epochs.find(e => e.id.toString() === response.data.epochId.toString()),
|
||||
country: countries.find(c => c.id.toString() === response.data.countryId.toString()),
|
||||
};
|
||||
|
||||
const updatedArtists = [...artists, newArtist].sort((a, b) =>
|
||||
sortOrder === 'asc'
|
||||
? a.name.localeCompare(b.name)
|
||||
: b.name.localeCompare(a.name)
|
||||
);
|
||||
|
||||
setArtists(updatedArtists);
|
||||
};
|
||||
|
||||
const editArtist = async (id: string, artistData: Partial<Artist>) => {
|
||||
if (artistData.name !== undefined) {
|
||||
const nameExists = artists.some(a => a.id !== id && a.name.toLowerCase() === artistData.name!.toLowerCase());
|
||||
if (nameExists) {
|
||||
throw new Error('Исполнитель с таким именем уже существует!');
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await updateArtist(id, artistData);
|
||||
const updatedArtist = {
|
||||
...response.data,
|
||||
epoch: epochs.find(e => e.id.toString() === response.data.epochId.toString()),
|
||||
country: countries.find(c => c.id.toString() === response.data.countryId.toString()),
|
||||
};
|
||||
const updatedArtists = artists.map(a => a.id === id ? updatedArtist : a);
|
||||
setArtists(updatedArtists.sort(((a, b) =>
|
||||
sortOrder === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
|
||||
)));
|
||||
} catch (err: any) {
|
||||
setError(`Ошибка при изменении: ${err.message}. Сервер ответил ${err.response?.status}`);
|
||||
console.error('Edit error:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const removeArtist = async (id: string) => {
|
||||
console.log(`Attempting to delete artist with id: ${id}`);
|
||||
console.log('Current artists:', artists);
|
||||
const artistExists = artists.find(a => a.id.toString() === id.toString());
|
||||
if (!artistExists) {
|
||||
setError(`Ошибка: Исполнитель с id ${id} не найден в текущем списке!`);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await deleteArtist(id);
|
||||
// Повторно загружаем данные с сервера после удаления
|
||||
await fetchData();
|
||||
} catch (err: any) {
|
||||
setError(`Ошибка при удалении: ${err.message}. Сервер ответил ${err.response?.status}`);
|
||||
console.error('Delete error:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSortOrder = () => {
|
||||
setSortOrder(prev => (prev === 'asc' ? 'desc' : 'asc'));
|
||||
};
|
||||
|
||||
return { artists, epochs, countries, loading, error, addArtist, editArtist, removeArtist, toggleSortOrder, sortOrder };
|
||||
};
|
||||
|
||||
export default useArtists;
|
||||
46
punk-rock-app/src/hooks/useSubscriptions.ts
Normal file
46
punk-rock-app/src/hooks/useSubscriptions.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { getSubscriptions, createSubscription, deleteSubscription, getUsers } from '../services/api';
|
||||
import { Subscription, User } from '../types';
|
||||
|
||||
const useSubscriptions = (userId: number) => {
|
||||
const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [subscriptionsData, usersData] = await Promise.all([
|
||||
getSubscriptions(),
|
||||
getUsers(),
|
||||
]);
|
||||
setSubscriptions(subscriptionsData.data);
|
||||
setUsers(usersData.data);
|
||||
setLoading(false);
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const addSubscription = async (subscription: Omit<Subscription, 'id' | 'active' | 'userId'>) => {
|
||||
const response = await createSubscription({ ...subscription, userId, active: true });
|
||||
setSubscriptions([...subscriptions, response.data]);
|
||||
};
|
||||
|
||||
const cancelSubscription = async (id: number) => {
|
||||
await deleteSubscription(id);
|
||||
setSubscriptions(subscriptions.filter(s => s.id !== id));
|
||||
};
|
||||
|
||||
const getUserSubscription = (): Subscription | undefined => {
|
||||
return subscriptions.find(s => s.userId === userId);
|
||||
};
|
||||
|
||||
return { subscriptions, users, loading, error, addSubscription, cancelSubscription, getUserSubscription };
|
||||
};
|
||||
|
||||
export default useSubscriptions;
|
||||
15
punk-rock-app/src/index.tsx
Normal file
15
punk-rock-app/src/index.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css';
|
||||
import App from './App';
|
||||
|
||||
const container = document.getElementById('root');
|
||||
if (container) {
|
||||
const root = createRoot(container);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
}
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
77
punk-rock-app/src/pages/ArtistPage.tsx
Normal file
77
punk-rock-app/src/pages/ArtistPage.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
|
||||
const ArtistPage: React.FC = () => {
|
||||
return (
|
||||
<div className="container my-5 flex-grow-1">
|
||||
<div className="row">
|
||||
<div className="col-lg-8 mx-auto">
|
||||
<h1 className="display-4 text-punk mb-4">
|
||||
<i className="bi bi-person-badge"></i> Гражданская Оборона
|
||||
</h1>
|
||||
|
||||
{/* Изображение (путь /res/grob.jpg из public) */}
|
||||
<div className="text-center mb-5">
|
||||
<img
|
||||
src="/res/grob.jpg"
|
||||
alt="Гражданская Оборона"
|
||||
className="img-fluid rounded border border-punk"
|
||||
style={{ maxWidth: '100%', height: 'auto' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="lead text-punk">
|
||||
Здесь можно почитать инфу про исполнителя и перейти на песню
|
||||
</p>
|
||||
|
||||
<div className="card bg-dark border-punk mb-4">
|
||||
<div className="card-body">
|
||||
<div className="descriptionForSong">
|
||||
<p className="text-light">
|
||||
«Гражданская Оборона» — культовая советская и российская рок-группа, основанная в 1984 году в Омске Егором Летовым.
|
||||
Коллектив стал одним из самых влиятельных в андеграундной среде.
|
||||
</p>
|
||||
<p className="text-light">
|
||||
Музыка «Гражданской Обороны» сочетает в себе элементы панк-рока, гаражного рока и лоу-фая.
|
||||
Несмотря на минималистичный подход к звучанию, группа смогла создать уникальный стиль.
|
||||
</p>
|
||||
<p className="text-light">
|
||||
Среди самых известных альбомов группы — «Тоталитаризм», «Мышеловка», «Здорово и вечно»,
|
||||
«Русское поле экспериментов» и «Инструкция по выживанию». Творчество «Гражданской Обороны»
|
||||
остается актуальным и по сей день, а Егор Летов считается одной из ключевых фигур в истории
|
||||
русской рок-музыки.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card bg-dark border-punk">
|
||||
<div className="card-body">
|
||||
<h3 className="text-punk mb-3">
|
||||
<i className="bi bi-music-note-list"></i> Популярные песни:
|
||||
</h3>
|
||||
<ul className="list-group list-group-flush">
|
||||
<li className="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="#" className="text-punk text-decoration-none">
|
||||
<i className="bi bi-file-music me-2"></i> Кайф или больше
|
||||
</a>
|
||||
</li>
|
||||
<li className="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="#" className="text-punk text-decoration-none">
|
||||
<i className="bi bi-file-music me-2"></i> Зоопарк
|
||||
</a>
|
||||
</li>
|
||||
<li className="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="#" className="text-punk text-decoration-none">
|
||||
<i className="bi bi-file-music me-2"></i> Новая патриотическая
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArtistPage;
|
||||
168
punk-rock-app/src/pages/ArtistsPage.tsx
Normal file
168
punk-rock-app/src/pages/ArtistsPage.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import React, { useState } from 'react';
|
||||
import useArtists from '../hooks/useArtists';
|
||||
import ArtistList from '../components/ArtistList';
|
||||
import { Artist, Epoch, Country } from '../types';
|
||||
|
||||
const ArtistsPage: React.FC = () => {
|
||||
const { artists, loading, error, removeArtist, editArtist, epochs, countries, sortOrder } = useArtists();
|
||||
const [editingArtist, setEditingArtist] = useState<Artist | null>(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [sortConfig, setSortConfig] = useState<{ field: 'name' | 'epoch' | 'country'; direction: 'asc' | 'desc' }>({
|
||||
field: 'name',
|
||||
direction: 'asc'
|
||||
});
|
||||
|
||||
// Константы для пагинации
|
||||
const artistsPerPage = 6;
|
||||
const indexOfLastArtist = currentPage * artistsPerPage;
|
||||
const indexOfFirstArtist = indexOfLastArtist - artistsPerPage;
|
||||
|
||||
|
||||
const sortedArtists = [...artists].sort((a, b) => {
|
||||
const getFieldValue = (artist: Artist) => {
|
||||
if (sortConfig.field === 'name') return artist.name;
|
||||
if (sortConfig.field === 'epoch') return artist.epoch?.name || '';
|
||||
return artist.country?.name || '';
|
||||
};
|
||||
|
||||
const valueA = getFieldValue(a);
|
||||
const valueB = getFieldValue(b);
|
||||
|
||||
if (valueA < valueB) return sortConfig.direction === 'asc' ? -1 : 1;
|
||||
if (valueA > valueB) return sortConfig.direction === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Текущие артисты для отображения
|
||||
const currentArtists = sortedArtists.slice(indexOfFirstArtist, indexOfLastArtist);
|
||||
|
||||
if (loading) return <p className="text-center text-punk my-5">Загрузка...</p>;
|
||||
if (error) return <p className="text-center text-danger my-5">Ошибка: {error}</p>;
|
||||
|
||||
const handleEdit = (artist: Artist) => {
|
||||
setEditingArtist(artist);
|
||||
};
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
removeArtist(id);
|
||||
// Сброс страницы при удалении
|
||||
if (currentArtists.length === 1 && currentPage > 1) {
|
||||
setCurrentPage(currentPage - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (editingArtist) {
|
||||
await editArtist(editingArtist.id, editingArtist);
|
||||
setEditingArtist(null);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSort = (field: 'name' | 'epoch' | 'country') => {
|
||||
setSortConfig(prev => ({
|
||||
field,
|
||||
direction: prev.field === field && prev.direction === 'asc' ? 'desc' : 'asc'
|
||||
}));
|
||||
};
|
||||
|
||||
const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
|
||||
|
||||
return (
|
||||
<div className="container py-4">
|
||||
<h1 className="text-punk mb-3">Список исполнителей</h1>
|
||||
|
||||
{/* Кнопки сортировки */}
|
||||
<div className="d-flex gap-2 mb-3">
|
||||
<button
|
||||
className={`btn btn-outline-punk text-light ${sortConfig.field === 'name' ? 'active' : ''}`}
|
||||
onClick={() => toggleSort('name')}
|
||||
>
|
||||
По имени {sortConfig.field === 'name' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn-outline-punk text-light ${sortConfig.field === 'epoch' ? 'active' : ''}`}
|
||||
onClick={() => toggleSort('epoch')}
|
||||
>
|
||||
По эпохе {sortConfig.field === 'epoch' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
|
||||
</button>
|
||||
<button
|
||||
className={`btn btn-outline-punk text-light ${sortConfig.field === 'country' ? 'active' : ''}`}
|
||||
onClick={() => toggleSort('country')}
|
||||
>
|
||||
По стране {sortConfig.field === 'country' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ArtistList artists={currentArtists} onEdit={handleEdit} onDelete={handleDelete} epochs={epochs} countries={countries} />
|
||||
|
||||
{/* Пагинация */}
|
||||
<nav className="mt-4">
|
||||
<ul className="pagination justify-content-center">
|
||||
{Array.from({ length: Math.ceil(artists.length / artistsPerPage) }).map((_, index) => (
|
||||
<li key={index} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}>
|
||||
<button
|
||||
className="page-link bg-dark text-punk border-punk"
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{/* Модальное окно редактирования */}
|
||||
{editingArtist && (
|
||||
<div className="modal show" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.7)' }}>
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content bg-dark border-punk">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title text-punk">Редактировать исполнителя</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close btn-close-white"
|
||||
onClick={() => setEditingArtist(null)}
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Имя</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control bg-dark text-light border-punk"
|
||||
value={editingArtist.name}
|
||||
onChange={(e) => setEditingArtist({...editingArtist, name: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Описание</label>
|
||||
<textarea
|
||||
className="form-control bg-dark text-light border-punk"
|
||||
value={editingArtist.description}
|
||||
onChange={(e) => setEditingArtist({...editingArtist, description: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={() => setEditingArtist(null)}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-punk"
|
||||
onClick={handleSave}
|
||||
>
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArtistsPage;
|
||||
107
punk-rock-app/src/pages/Catalog.tsx
Normal file
107
punk-rock-app/src/pages/Catalog.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import React, { useState } from 'react';
|
||||
import useArtists from '../hooks/useArtists';
|
||||
import useSubscriptions from '../hooks/useSubscriptions';
|
||||
import SubscriptionForm from '../components/SubscriptionForm';
|
||||
import { Subscription, Artist } from '../types';
|
||||
|
||||
const Catalog: React.FC = () => {
|
||||
const { artists, loading: artistsLoading, error: artistsError } = useArtists();
|
||||
const {
|
||||
getUserSubscription,
|
||||
addSubscription,
|
||||
cancelSubscription,
|
||||
loading: subsLoading,
|
||||
error: subsError
|
||||
} = useSubscriptions(1); // Пример userId = 1
|
||||
const subscription: Subscription | undefined = getUserSubscription();
|
||||
const [subscriptionStartDate, setSubscriptionStartDate] = useState<Date | null>(null);
|
||||
|
||||
if (artistsLoading || subsLoading) return <p className="text-center text-punk my-5">Загрузка...</p>;
|
||||
if (artistsError || subsError) return <p className="text-center text-danger my-5">Ошибка: {artistsError || subsError}</p>;
|
||||
|
||||
const handleAddSubscription = async (subscriptionData: Omit<Subscription, 'id' | 'active' | 'userId'>) => {
|
||||
const response = await addSubscription(subscriptionData);
|
||||
setSubscriptionStartDate(new Date()); // Установите текущую дату как дату начала подписки
|
||||
};
|
||||
|
||||
const handleCancelSubscription = async () => {
|
||||
if (subscription) {
|
||||
await cancelSubscription(subscription.id);
|
||||
setSubscriptionStartDate(null); // Сбросить дату начала подписки
|
||||
}
|
||||
};
|
||||
|
||||
const calculateEndDate = (startDate: Date): Date => {
|
||||
const endDate = new Date(startDate);
|
||||
endDate.setMonth(endDate.getMonth() + 1);
|
||||
return endDate;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container py-4">
|
||||
<h1 className="text-punk mb-3">Каталог</h1>
|
||||
|
||||
|
||||
{subscription ? (
|
||||
<div className="alert bg-dark border-punk">
|
||||
<h5>
|
||||
{subscription.type === 'Premium' ? '💎 Премиум' : '🔹 Базовая'} подписка (${subscription.price})
|
||||
</h5>
|
||||
{subscriptionStartDate && (
|
||||
<p className="text-light">
|
||||
Подписка действует до: {calculateEndDate(subscriptionStartDate).toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-outline-danger btn-sm mt-2"
|
||||
onClick={handleCancelSubscription}
|
||||
>
|
||||
Отменить подписку
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="alert bg-dark border-punk">
|
||||
<h5>У вас нет подписки</h5>
|
||||
<p>Оформите подписку для доступа к каталогу!</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Форма подписки (если нет активной) */}
|
||||
{!subscription && <SubscriptionForm onSubmit={handleAddSubscription} />}
|
||||
|
||||
{/* Контент в зависимости от подписки */}
|
||||
{subscription?.type === 'Premium' ? (
|
||||
<div>
|
||||
<h2 className="text-punk mt-4">Полный каталог артистов</h2>
|
||||
{artists.map((artist) => (
|
||||
<div key={artist.id} className="card bg-dark border-punk my-2">
|
||||
<div className="card-body">
|
||||
<h5 className="card-title text-punk">{artist.name}</h5>
|
||||
<p className="card-text text-light">{artist.description}</p>
|
||||
<small className="text-light">Эпоха: {artist.epoch?.name || 'Не указана'}</small>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : subscription?.type === 'Basic' ? (
|
||||
<div>
|
||||
<h2 className="text-punk mt-4">Базовый каталог</h2>
|
||||
<p className="text-light mb-3">Доступны только названия групп. Для полного доступа оформите Premium.</p>
|
||||
{artists.map((artist) => (
|
||||
<div key={artist.id} className="card bg-dark border-punk my-2">
|
||||
<div className="card-body">
|
||||
<h5 className="card-title text-punk">{artist.name}</h5>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="alert bg-dark border-punk mt-4">
|
||||
<p>🔒 Чтобы увидеть каталог, оформите подписку.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Catalog;
|
||||
12
punk-rock-app/src/pages/Contacts.tsx
Normal file
12
punk-rock-app/src/pages/Contacts.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
const Contacts: React.FC = () => {
|
||||
return (
|
||||
<div className="container py-4">
|
||||
<h1 className="text-punk mb-3">Контакты</h1>
|
||||
<p className="text-light">Свяжитесь с нами: <a href="https://vk.com/kadyshevever" target="_blank" rel="noopener noreferrer">vk.com/kadyshevever</a></p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contacts;
|
||||
52
punk-rock-app/src/pages/Home.tsx
Normal file
52
punk-rock-app/src/pages/Home.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import useArtists from '../hooks/useArtists';
|
||||
import ArtistList from '../components/ArtistList';
|
||||
import ArtistForm from '../components/ArtistForm';
|
||||
import { Artist, Epoch, Country } from '../types';
|
||||
|
||||
const Home: React.FC = () => {
|
||||
const { artists, epochs, countries, loading, error, addArtist, editArtist, removeArtist, toggleSortOrder, sortOrder } = useArtists();
|
||||
const [editingArtist, setEditingArtist] = React.useState<Artist | null>(null);
|
||||
|
||||
if (loading) return <p className="text-center text-punk my-5">Загрузка...</p>;
|
||||
if (error) return <p className="text-center text-danger my-5">Ошибка: {error}</p>;
|
||||
|
||||
const handleSubmit = async (artist: Artist) => {
|
||||
if (editingArtist && editingArtist.id) {
|
||||
await editArtist(editingArtist.id, artist);
|
||||
} else {
|
||||
await addArtist(artist);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container py-4">
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<h1 className="text-punk mb-0">Главная</h1>
|
||||
<button
|
||||
className="btn btn-punk"
|
||||
onClick={toggleSortOrder}
|
||||
>
|
||||
<i className={`bi bi-sort-alpha-${sortOrder === 'asc' ? 'down' : 'up'}`}></i>
|
||||
{sortOrder === 'asc' ? 'Я → А' : 'А → Я'}
|
||||
</button>
|
||||
</div>
|
||||
<ArtistForm
|
||||
countries={countries}
|
||||
epochs={epochs}
|
||||
onSubmit={handleSubmit}
|
||||
artist={editingArtist}
|
||||
onCancel={() => setEditingArtist(null)}
|
||||
/>
|
||||
<ArtistList
|
||||
artists={artists}
|
||||
epochs={epochs}
|
||||
countries={countries}
|
||||
onEdit={setEditingArtist}
|
||||
onDelete={removeArtist}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
12
punk-rock-app/src/pages/SongPage.tsx
Normal file
12
punk-rock-app/src/pages/SongPage.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
const SongPage: React.FC = () => {
|
||||
return (
|
||||
<div className="container py-4">
|
||||
<h1 className="text-punk mb-3">Песня</h1>
|
||||
<p className="text-light">Здесь будет список песен (пока заглушка).</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SongPage;
|
||||
1
punk-rock-app/src/react-app-env.d.ts
vendored
Normal file
1
punk-rock-app/src/react-app-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="react-scripts" />
|
||||
@@ -1,4 +1,6 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
import { ReportHandler } from 'web-vitals';
|
||||
|
||||
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
21
punk-rock-app/src/services/api.ts
Normal file
21
punk-rock-app/src/services/api.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import axios from 'axios';
|
||||
import { Artist, Epoch, Country, Subscription, User } from '../types';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:3001',
|
||||
});
|
||||
|
||||
export const getArtists = () => api.get<Artist[]>('/artists');
|
||||
export const createArtist = (artist: Omit<Artist, 'id'>) => api.post<Artist>('/artists', artist);
|
||||
export const updateArtist = (id: string, artist: Partial<Artist>) => api.put<Artist>(`/artists/${id}`, artist);
|
||||
export const deleteArtist = (id: string) => api.delete(`/artists/${id}`);
|
||||
|
||||
export const getEpochs = () => api.get<Epoch[]>('/epochs');
|
||||
export const getCountries = () => api.get<Country[]>('/countries');
|
||||
|
||||
export const getSubscriptions = () => api.get<Subscription[]>('/subscriptions');
|
||||
export const createSubscription = (subscription: Omit<Subscription, 'id'>) => api.post<Subscription>('/subscriptions', subscription);
|
||||
export const updateSubscription = (id: number, subscription: Partial<Subscription>) => api.put<Subscription>(`/subscriptions/${id}`, subscription);
|
||||
export const deleteSubscription = (id: number) => api.delete(`/subscriptions/${id}`);
|
||||
|
||||
export const getUsers = () => api.get<User[]>('/users');
|
||||
32
punk-rock-app/src/types/index.ts
Normal file
32
punk-rock-app/src/types/index.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
export interface Artist {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
epochId: string;
|
||||
countryId: string;
|
||||
epoch?: { id: string; name: string };
|
||||
country?: { id: string; name: string };
|
||||
}
|
||||
|
||||
export interface Subscription {
|
||||
id: number;
|
||||
userId: number;
|
||||
type: string;
|
||||
price: number;
|
||||
active: boolean;
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface Epoch {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface Country {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
26
punk-rock-app/tsconfig.json
Normal file
26
punk-rock-app/tsconfig.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
@@ -1,58 +0,0 @@
|
||||
{
|
||||
"artists": [
|
||||
{
|
||||
"id": "9daa",
|
||||
"name": "testlabуцк",
|
||||
"description": "sadууу",
|
||||
"epochId": 2,
|
||||
"countryId": 3
|
||||
},
|
||||
{
|
||||
"id": "98ad",
|
||||
"name": "ыфвфы",
|
||||
"description": "выфв",
|
||||
"epochId": 1,
|
||||
"countryId": 1
|
||||
},
|
||||
{
|
||||
"id": "dd28",
|
||||
"name": "аааа",
|
||||
"description": "ааа",
|
||||
"epochId": 2,
|
||||
"countryId": 3
|
||||
},
|
||||
{
|
||||
"id": "b499",
|
||||
"name": "бб",
|
||||
"description": "уафв",
|
||||
"epochId": 1,
|
||||
"countryId": 3
|
||||
}
|
||||
],
|
||||
"countries": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Россия"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "США"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"name": "Тайга"
|
||||
}
|
||||
],
|
||||
"epochs": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "1980-е"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "1990-е"
|
||||
}
|
||||
],
|
||||
"albums": [],
|
||||
"songs": []
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="src/styles.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<title>Панкуха</title>
|
||||
</head>
|
||||
<body class="bg-dark text-light">
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<a href="/" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="/res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-punk fw-bold dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end bg-dark">
|
||||
<li><a class="dropdown-item text-punk" href="/">Главная</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/grob">Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/grobKaifIliBolshe">Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/catalog">Каталог</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/punkrock">Список исполнителей</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container-fluid my-5 flex-grow-1">
|
||||
<div class="container">
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-0"><a class="text-punk" href="/punkrock">Панк-Рок</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-0">Психоделика</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-0">Гаражный панк</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
{
|
||||
"artists": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Гражданская Оборона",
|
||||
"description": "Советская и российская рок-группа, основанная Егором Летовым.",
|
||||
"year": 1984,
|
||||
"country": "Россия"
|
||||
},
|
||||
{
|
||||
"id": "f28f",
|
||||
"name": "что-то",
|
||||
"description": "sdad",
|
||||
"year": 1998,
|
||||
"country": "Россия"
|
||||
},
|
||||
{
|
||||
"id": "2134",
|
||||
"name": "бб",
|
||||
"description": "ццвыф",
|
||||
"year": 1999,
|
||||
"country": "Россия"
|
||||
}
|
||||
],
|
||||
"albums": [
|
||||
{
|
||||
"id": "1",
|
||||
"artistId": 1,
|
||||
"title": "Поганая молодёжь",
|
||||
"year": 1985
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"artistId": 1,
|
||||
"title": "Оптимизм",
|
||||
"year": 1985
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"artistId": 2,
|
||||
"title": "Камнем по голове",
|
||||
"year": 1996
|
||||
}
|
||||
],
|
||||
"songs": [
|
||||
{
|
||||
"id": "1",
|
||||
"albumId": 1,
|
||||
"title": "Я бесполезен",
|
||||
"duration": "2:30"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"albumId": 3,
|
||||
"title": "Кукла колдуна",
|
||||
"duration": "3:15"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="/styles.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<title>Панкуха</title>
|
||||
</head>
|
||||
<body class="bg-dark text-light">
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<a href="/" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="/res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-punk fw-bold dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end bg-dark">
|
||||
<li><a class="dropdown-item text-punk" href="/">Главная</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/grob">Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/grobKaifIliBolshe">Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/catalog">Каталог</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/punkrock">Список исполнителей</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container-fluid my-5 flex-grow-1">
|
||||
<div class="container">
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h1 class="text-punk mb-4">Гражданская Оборона</h1>
|
||||
<div style="text-align: center;">
|
||||
<img src="/res/grob.jpg" alt="uGrob" class="me-2">
|
||||
</div>
|
||||
<p class="lead text-light">
|
||||
Здесь можно почитать инфу про исполнителя и перейти на песню
|
||||
</p>
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item bg-dark text-light border-punk">
|
||||
«Гражданская Оборона» — культовая советская и российская рок-группа, основанная в 1984 году в Омске Егором Летовым.
|
||||
Коллектив стал одним из самых влиятельных в андеграундной среде.
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-light border-punk">
|
||||
Музыка «Гражданской Обороны» сочетает в себе элементы панк-рока, гаражного рока и лоу-фая.
|
||||
Несмотря на минималистичный подход к звучанию, группа смогла создать уникальный стиль.
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-light border-punk">
|
||||
Среди самых известных альбомов группы — «Тоталитаризм», «Мышеловка», «Здорово и вечно»,
|
||||
«Русское поле экспериментов» и «Инструкция по выживанию». Творчество «Гражданской Обороны»
|
||||
остается актуальным и по сей день, а Егор Летов считается одной из ключевых фигур в истории
|
||||
русской рок-музыки.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-3">Популярные песни:</h3>
|
||||
<div class="list-group">
|
||||
<a class="list-group-item list-group-item-action bg-dark text-punk border-punk" href="/grobKaifIliBolshe">
|
||||
Кайф или больше
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action bg-dark text-punk border-punk" href="#">
|
||||
Зоопарк
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action bg-dark text-punk border-punk" href="#">
|
||||
Новая патриотическая
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,123 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="/styles.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<title>Панкуха</title>
|
||||
</head>
|
||||
<body class="bg-dark text-light">
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<a href="/" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="/res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-punk fw-bold dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end bg-dark">
|
||||
<li><a class="dropdown-item text-punk" href="/">Главная</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/grob">Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/grobKaifIliBolshe">Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/catalog">Каталог</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/punkrock">Список исполнителей</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container-fluid my-5 flex-grow-1">
|
||||
<div class="container">
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<h1 class="text-punk mb-4">Кайф или больше</h1>
|
||||
<h3 class="text-light mb-3">
|
||||
<div style="text-align: center;">
|
||||
|
||||
<img src="/res/nekrofilia.jpg" alt="uGrob" class="me-2">
|
||||
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<a class="text-punk" href="/grob">Гражданская оборона</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="text-punk mb-3">Описание</h5>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item bg-dark text-light border-punk">
|
||||
Была выпущена в 1987 году
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-light border-punk">
|
||||
Входит в альбом "Некрофилия"
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h5 class="text-punk mb-3">Текст песни:</h5>
|
||||
<pre class="text-light" style="white-space: pre-wrap;">
|
||||
[Куплет 1]
|
||||
Рука повисла в небе, полном до краёв
|
||||
Мои ошибки устилают мой позор
|
||||
Я сочно благодарен, словно кошкин блёв
|
||||
И смачно богомолен, словно приговор
|
||||
|
||||
[Припев]
|
||||
Но мне придётся выбирать
|
||||
Кайф или больше
|
||||
Рай или больше
|
||||
Свет или больше... Хей-йо
|
||||
|
||||
[Куплет 2]
|
||||
Я буду ласковым, как тёплый банный лист
|
||||
Я буду вежливым, как битое окно
|
||||
Я буду благотворен, словно онанист
|
||||
Я буду зазеркален, словно всё равно
|
||||
|
||||
[Припев]
|
||||
Но мне придётся выбирать
|
||||
Кайф или больше
|
||||
Рай или больше
|
||||
Свет или больше...хей-йо
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"short_name": "PunkRock",
|
||||
"name": "PunkRock SPA",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 969 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
@@ -1,186 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Панк-рок | Панкуха</title>
|
||||
|
||||
<!-- Подключаем стили в HEAD -->
|
||||
<!-- 1. Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- 2. Иконки Bootstrap -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<!-- 3. Кастомные стили -->
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<!-- Логотип и название -->
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
|
||||
<!-- Кнопка для мобильных -->
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- Навигация -->
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle text-punk fw-bold" href="#" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list-check me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark border-punk">
|
||||
<li><a class="dropdown-item text-punk" href="index.html"><i class="bi bi-house-door me-2"></i>Главная</a></li>
|
||||
<li><hr class="dropdown-divider border-punk"></li>
|
||||
<li><a class="dropdown-item text-punk" href="grob.html"><i class="bi bi-person-badge me-2"></i>Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="grobKaifIliBolshe.html"><i class="bi bi-music-note-beamed me-2"></i>Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="catalog.html"><i class="bi bi-collection me-2"></i>Каталог</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container my-5 flex-grow-1">
|
||||
<div class="container py-4">
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-3">
|
||||
<i class="bi bi-people-fill"></i> Перечень исполнителей панк-рока
|
||||
</h3>
|
||||
<p class="lead text-light">
|
||||
Список культовых групп жанра
|
||||
</p>
|
||||
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="grob.html" class="text-punk text-decoration-none d-flex align-items-center">
|
||||
<i class="bi bi-person-badge me-2"></i> Гражданская Оборона
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="#" class="text-punk text-decoration-none d-flex align-items-center">
|
||||
<i class="bi bi-person-badge me-2"></i> Король и Шут
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="#" class="text-punk text-decoration-none d-flex align-items-center">
|
||||
<i class="bi bi-person-badge me-2"></i> Наив
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Форма добавления исполнителя -->
|
||||
<div class="container my-5">
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-4"><i class="bi bi-person-plus"></i> Добавить исполнителя</h3>
|
||||
|
||||
<form id="artistForm">
|
||||
<!-- Название группы -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Название группы</label>
|
||||
<input type="text" class="form-control bg-dark text-light border-punk" id="artistName" required>
|
||||
</div>
|
||||
<!-- Описание -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Описание</label>
|
||||
<textarea class="form-control bg-dark text-light border-punk" id="description" required></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Год основания -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Год основания</label>
|
||||
<input type="number" class="form-control bg-dark text-light border-punk" id="artistYear" min="1700" max="2025">
|
||||
</div>
|
||||
|
||||
<!-- Страна -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Страна</label>
|
||||
<input type="text" class="form-control bg-dark text-light border-punk" id="artistCountry">
|
||||
</div>
|
||||
|
||||
<!-- Кнопка добавления -->
|
||||
<button type="submit" class="btn btn-punk mt-3">
|
||||
<i class="bi bi-plus-circle"></i> Добавить исполнителя
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Контейнер для карточек исполнителей -->
|
||||
<div id="artistsContainer" class="row row-cols-1 row-cols-md-3 g-4 mt-4"></div>
|
||||
|
||||
<!-- Модальное окно для редактирования исполнителя -->
|
||||
<div class="modal fade" id="editArtistModal" tabindex="-1" aria-labelledby="editArtistModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content bg-dark border-punk">
|
||||
<div class="modal-header border-punk">
|
||||
<h5 class="modal-title text-punk" id="editArtistModalLabel"><i class="bi bi-pencil-square me-2"></i>Редактировать исполнителя</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="editArtistForm">
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Название группы</label>
|
||||
<input type="text" class="form-control bg-dark text-light border-punk" id="editArtistName" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Описание</label>
|
||||
<textarea class="form-control bg-dark text-light border-punk" id="editDescription" required></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Год основания</label>
|
||||
<input type="number" class="form-control bg-dark text-light border-punk" id="editArtistYear" min="1700" max="2025">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Страна</label>
|
||||
<input type="text" class="form-control bg-dark text-light border-punk" id="editArtistCountry">
|
||||
</div>
|
||||
<input type="hidden" id="editArtistId">
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer border-punk">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
|
||||
<button type="button" class="btn btn-punk" id="saveEditArtist"><i class="bi bi-save"></i> Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Подвал -->
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Основной скрипт -->
|
||||
<script type="module" src="src/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import PunkRockPage from './pages/PunkRockPage';
|
||||
import './styles.css';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="d-flex flex-column min-vh-100" style={{ width: '100%' }}>
|
||||
<PunkRockPage />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const StaticPage = ({ src }) => {
|
||||
return (
|
||||
<div style={{ height: '100vh', width: '100vw', margin: 0, padding: 0 }}>
|
||||
<iframe
|
||||
src={src}
|
||||
title="Static Page"
|
||||
style={{ width: '100%', height: '100%', border: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StaticPage;
|
||||
@@ -1,145 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const ArtistForm = ({ countries = [], epochs = [], onSubmit, artist }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
epochId: '',
|
||||
countryId: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
console.log('Received countries:', countries);
|
||||
console.log('Received epochs:', epochs);
|
||||
if (artist) {
|
||||
setFormData({
|
||||
name: artist.name,
|
||||
description: artist.description,
|
||||
epochId: artist.epoch?.id || artist.epochId || '',
|
||||
countryId: artist.country?.id || artist.countryId || ''
|
||||
});
|
||||
} else {
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
epochId: '',
|
||||
countryId: ''
|
||||
});
|
||||
}
|
||||
}, [artist, countries, epochs]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (!formData.name || !formData.description || !formData.epochId || !formData.countryId) {
|
||||
alert('Все поля обязательны!');
|
||||
return;
|
||||
}
|
||||
onSubmit({
|
||||
name: formData.name.trim(),
|
||||
description: formData.description.trim(),
|
||||
epochId: parseInt(formData.epochId),
|
||||
countryId: parseInt(formData.countryId)
|
||||
});
|
||||
if (!artist) {
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
epochId: '',
|
||||
countryId: ''
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card bg-dark border-punk">
|
||||
<div className="card-body">
|
||||
<h3 className="text-punk mb-4">
|
||||
<i className={`bi ${artist ? 'bi-pencil-square' : 'bi-person-plus'}`}></i>
|
||||
{artist ? 'Редактировать исполнителя' : 'Добавить исполнителя'}
|
||||
</h3>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Название группы</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control bg-dark text-light border-punk"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Описание</label>
|
||||
<textarea
|
||||
className="form-control bg-dark text-light border-punk"
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Эпоха</label>
|
||||
<select
|
||||
className="form-select bg-dark text-light border-punk"
|
||||
name="epochId"
|
||||
value={formData.epochId}
|
||||
onChange={handleChange}
|
||||
required
|
||||
>
|
||||
<option value="">Выберите эпоху</option>
|
||||
{epochs.length > 0 ? (
|
||||
epochs.map(epoch => (
|
||||
<option key={epoch.id} value={epoch.id}>{epoch.name}</option>
|
||||
))
|
||||
) : (
|
||||
<option disabled>Нет данных</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Страна</label>
|
||||
<select
|
||||
className="form-select bg-dark text-light border-punk"
|
||||
name="countryId"
|
||||
value={formData.countryId}
|
||||
onChange={handleChange}
|
||||
required
|
||||
>
|
||||
<option value="">Выберите страну</option>
|
||||
{countries.length > 0 ? (
|
||||
countries.map(country => (
|
||||
<option key={country.id} value={country.id}>{country.name}</option>
|
||||
))
|
||||
) : (
|
||||
<option disabled>Нет данных</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-punk mt-3">
|
||||
<i className={`bi ${artist ? 'bi-save' : 'bi-plus-circle'}`}></i>
|
||||
{artist ? 'Сохранить изменения' : 'Добавить исполнителя'}
|
||||
</button>
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArtistForm;
|
||||
@@ -1,19 +0,0 @@
|
||||
import React from 'react';
|
||||
import ArtistCard from './ArtistCard';
|
||||
|
||||
const ArtistList = ({ artists, onEdit, onDelete }) => {
|
||||
return (
|
||||
<div className="row row-cols-1 row-cols-md-3 g-4 mt-4">
|
||||
{artists.map(artist => (
|
||||
<ArtistCard
|
||||
key={artist.id}
|
||||
artist={artist}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArtistList;
|
||||
@@ -1,189 +0,0 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
--punk-primary: blueviolet;
|
||||
--punk-dark: #121212;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: blueviolet;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background-color: var(--punk-dark);
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
}
|
||||
.lyrics {
|
||||
text-align: center;
|
||||
line-height: 1.8;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.chorus {
|
||||
font-weight: bold;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vanilla:hover {
|
||||
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||
}
|
||||
/* Анимация карточек */
|
||||
.catalog-item {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.catalog-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
|
||||
}
|
||||
.btn-punk {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-punk:hover {
|
||||
background-color: #9d4edd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.artist-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.bg-punk {
|
||||
background-color: blueviolet !important;
|
||||
}
|
||||
/* Стиль кнопок */
|
||||
.btn-outline-punk {
|
||||
color: blueviolet;
|
||||
border-color: blueviolet;
|
||||
}
|
||||
.btn-outline-punk:hover {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
color: blueviolet;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
.bg-punk {
|
||||
background-color: var(--punk-primary) !important;
|
||||
}
|
||||
|
||||
.text-punk {
|
||||
color: var(--punk-primary) !important;
|
||||
}
|
||||
.border-punk {
|
||||
border-color: var(--punk-primary) !important;
|
||||
}
|
||||
.nav-link:hover, .dropdown-item:hover {
|
||||
color: white !important;
|
||||
background-color: var(--punk-primary) !important;
|
||||
}
|
||||
.list-group-item-action:hover {
|
||||
transform: translateX(5px);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.lead{
|
||||
color: blueviolet;
|
||||
text-align: center;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:focus {
|
||||
text-shadow: 0 0 8px blueviolet;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css';
|
||||
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
|
||||
import App from './App';
|
||||
|
||||
// Компонент для редиректа на статические страницы
|
||||
const RedirectToStatic = () => {
|
||||
const location = useLocation();
|
||||
const hasRedirected = React.useRef(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
// Редирект только если маршрут не заканчивается на .html и редирект ещё не выполнен
|
||||
if (!hasRedirected.current && !location.pathname.endsWith('.html')) {
|
||||
let targetPath = location.pathname === '/' ? '/index.html' : `${location.pathname}.html`;
|
||||
hasRedirected.current = true; // Устанавливаем флаг, чтобы избежать повторного редиректа
|
||||
window.location.replace(targetPath); // Прямой редирект на статический файл
|
||||
}
|
||||
}, [location.pathname]);
|
||||
|
||||
// Ничего не рендерим
|
||||
return null;
|
||||
};
|
||||
|
||||
// Компонент для рендеринга React-логики
|
||||
const RootComponent = () => {
|
||||
return (
|
||||
<div className="d-flex flex-column min-vh-100" style={{ width: '100%' }}>
|
||||
<App />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Рендеринг React только для маршрута /punkrock
|
||||
const rootElement = document.getElementById('root');
|
||||
if (rootElement) {
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/punkrock" element={<RootComponent />} />
|
||||
<Route path="/*" element={<RedirectToStatic />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
} else {
|
||||
console.error('Root element not found. Ensure public/index.html contains <div id="root">');
|
||||
}
|
||||
@@ -1,174 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Header from '../components/Header';
|
||||
import Footer from '../components/Footer';
|
||||
import ArtistList from '../components/ArtistList';
|
||||
import ArtistForm from '../components/ArtistForm';
|
||||
import { getArtists, getCountries, getEpochs, createArtist, updateArtist, deleteArtist } from '../services/api';
|
||||
|
||||
const PunkRockPage = () => {
|
||||
const [artists, setArtists] = useState([]);
|
||||
const [countries, setCountries] = useState([]);
|
||||
const [epochs, setEpochs] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [editingArtist, setEditingArtist] = useState(null);
|
||||
const [sortDirection, setSortDirection] = useState('asc'); // 'asc' для А-Я, 'desc' для Я-А
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [artistsData, countriesData, epochsData] = await Promise.all([
|
||||
getArtists(),
|
||||
getCountries(),
|
||||
getEpochs()
|
||||
]);
|
||||
console.log('Fetched Artists:', artistsData);
|
||||
console.log('Fetched Countries:', countriesData);
|
||||
console.log('Fetched Epochs:', epochsData);
|
||||
setArtists(artistsData);
|
||||
setCountries(countriesData.map(country => ({
|
||||
...country,
|
||||
id: parseInt(country.id)
|
||||
})));
|
||||
setEpochs(epochsData.map(epoch => ({
|
||||
...epoch,
|
||||
id: parseInt(epoch.id)
|
||||
})));
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const handleAddArtist = async (artistData) => {
|
||||
try {
|
||||
// Проверка уникальности имени
|
||||
const isDuplicate = artists.some(artist => artist.name.toLowerCase() === artistData.name.toLowerCase());
|
||||
if (isDuplicate) {
|
||||
alert('Исполнитель с таким именем уже существует!');
|
||||
return;
|
||||
}
|
||||
|
||||
const newArtist = await createArtist(artistData);
|
||||
console.log('Added Artist:', newArtist);
|
||||
setArtists(prevArtists => {
|
||||
const enrichedArtist = {
|
||||
...newArtist,
|
||||
epoch: epochs.find(epoch => epoch.id === parseInt(newArtist.epochId)),
|
||||
country: countries.find(country => country.id === parseInt(newArtist.countryId))
|
||||
};
|
||||
return [...prevArtists, enrichedArtist].sort((a, b) =>
|
||||
sortDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
|
||||
);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error adding artist:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateArtist = async (artistData) => {
|
||||
try {
|
||||
// Проверка уникальности имени (кроме текущего исполнителя)
|
||||
const isDuplicate = artists.some(artist =>
|
||||
artist.name.toLowerCase() === artistData.name.toLowerCase() && artist.id !== editingArtist.id
|
||||
);
|
||||
if (isDuplicate) {
|
||||
alert('Исполнитель с таким именем уже существует!');
|
||||
return;
|
||||
}
|
||||
|
||||
const updatedArtist = await updateArtist(editingArtist.id, artistData);
|
||||
console.log('Updated Artist:', updatedArtist);
|
||||
setArtists(prevArtists => {
|
||||
const enrichedArtist = {
|
||||
...updatedArtist,
|
||||
epoch: epochs.find(epoch => epoch.id === parseInt(updatedArtist.epochId)),
|
||||
country: countries.find(country => country.id === parseInt(updatedArtist.countryId))
|
||||
};
|
||||
return prevArtists.map(a => (a.id === updatedArtist.id ? enrichedArtist : a))
|
||||
.sort((a, b) =>
|
||||
sortDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
|
||||
);
|
||||
});
|
||||
setEditingArtist(null);
|
||||
} catch (error) {
|
||||
console.error('Error updating artist:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteArtist = async (id) => {
|
||||
try {
|
||||
await deleteArtist(id);
|
||||
setArtists(artists.filter(artist => artist.id !== id)
|
||||
.sort((a, b) =>
|
||||
sortDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
|
||||
));
|
||||
} catch (error) {
|
||||
console.error('Error deleting artist:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSortDirection = () => {
|
||||
setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center text-punk my-5">Загрузка...</div>;
|
||||
}
|
||||
|
||||
const enrichedArtists = artists.map(artist => ({
|
||||
...artist,
|
||||
epoch: epochs.find(epoch => epoch.id === parseInt(artist.epochId)),
|
||||
country: countries.find(country => country.id === parseInt(artist.countryId))
|
||||
})).sort((a, b) =>
|
||||
sortDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main className="container-fluid my-5 flex-grow-1">
|
||||
<div className="container py-4">
|
||||
<div className="card bg-dark border-punk mb-4">
|
||||
<div className="card-body">
|
||||
<h3 className="text-punk mb-3">
|
||||
<i className="bi bi-people-fill"></i> Перечень исполнителей панк-рока
|
||||
</h3>
|
||||
<p className="lead text-light">
|
||||
Список культовых групп жанра
|
||||
</p>
|
||||
<button
|
||||
className="btn btn-outline-secondary mb-3"
|
||||
onClick={toggleSortDirection}
|
||||
>
|
||||
Сортировать {sortDirection === 'asc' ? 'А-Я' : 'Я-А'}
|
||||
</button>
|
||||
<ArtistList
|
||||
artists={enrichedArtists}
|
||||
onEdit={setEditingArtist}
|
||||
onDelete={handleDeleteArtist}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container my-5">
|
||||
<ArtistForm
|
||||
countries={countries}
|
||||
epochs={epochs}
|
||||
onSubmit={editingArtist ? handleUpdateArtist : handleAddArtist}
|
||||
artist={editingArtist}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PunkRockPage;
|
||||
@@ -1,47 +0,0 @@
|
||||
const API_URL = 'http://localhost:3000';
|
||||
|
||||
export const getArtists = async () => {
|
||||
const response = await fetch(`${API_URL}/artists`);
|
||||
if (!response.ok) throw new Error('Ошибка загрузки исполнителей');
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const getCountries = async () => {
|
||||
const response = await fetch(`${API_URL}/countries`);
|
||||
if (!response.ok) throw new Error('Ошибка загрузки стран');
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const getEpochs = async () => {
|
||||
const response = await fetch(`${API_URL}/epochs`);
|
||||
if (!response.ok) throw new Error('Ошибка загрузки эпох');
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const createArtist = async (artist) => {
|
||||
const response = await fetch(`${API_URL}/artists`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(artist)
|
||||
});
|
||||
if (!response.ok) throw new Error('Ошибка создания исполнителя');
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const updateArtist = async (id, artist) => {
|
||||
const response = await fetch(`${API_URL}/artists/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(artist)
|
||||
});
|
||||
if (!response.ok) throw new Error('Ошибка обновления исполнителя');
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const deleteArtist = async (id) => {
|
||||
const response = await fetch(`${API_URL}/artists/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (!response.ok) throw new Error('Ошибка удаления исполнителя');
|
||||
return true;
|
||||
};
|
||||
@@ -1,192 +0,0 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
--punk-primary: blueviolet;
|
||||
--punk-dark: #121212;
|
||||
}
|
||||
.btn-outline-secondary{
|
||||
--bs-btn-color: blueviolet;
|
||||
--bs-btn-border-color: blueviolet;
|
||||
}
|
||||
a {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: blueviolet;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background-color: var(--punk-dark);
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
}
|
||||
.lyrics {
|
||||
text-align: center;
|
||||
line-height: 1.8;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.chorus {
|
||||
font-weight: bold;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vanilla:hover {
|
||||
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||
}
|
||||
/* Анимация карточек */
|
||||
.catalog-item {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.catalog-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
|
||||
}
|
||||
.btn-punk {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-punk:hover {
|
||||
background-color: #9d4edd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.artist-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.bg-punk {
|
||||
background-color: blueviolet !important;
|
||||
}
|
||||
/* Стиль кнопок */
|
||||
.btn-outline-punk {
|
||||
color: blueviolet;
|
||||
border-color: blueviolet;
|
||||
}
|
||||
.btn-outline-punk:hover {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
color: blueviolet;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
.bg-punk {
|
||||
background-color: var(--punk-primary) !important;
|
||||
}
|
||||
|
||||
.text-punk {
|
||||
color: var(--punk-primary) !important;
|
||||
}
|
||||
.border-punk {
|
||||
border-color: var(--punk-primary) !important;
|
||||
}
|
||||
.nav-link:hover, .dropdown-item:hover {
|
||||
color: white !important;
|
||||
background-color: var(--punk-primary) !important;
|
||||
}
|
||||
.list-group-item-action:hover {
|
||||
transform: translateX(5px);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.lead{
|
||||
color: blueviolet;
|
||||
text-align: center;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:focus {
|
||||
text-shadow: 0 0 8px blueviolet;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Reference in New Issue
Block a user