Compare commits
4 Commits
main
...
lab4-branc
| Author | SHA1 | Date | |
|---|---|---|---|
|
3d39fea66d | ||
|
|
51875bcc5e | ||
|
|
51545137be | ||
|
|
0dd5c03d7d |
14
.gitignore
vendored
14
.gitignore
vendored
@@ -1,14 +0,0 @@
|
||||
# ---> VisualStudioCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
|
||||
Binary file not shown.
BIN
LabWork4Report.docx
Normal file
BIN
LabWork4Report.docx
Normal file
Binary file not shown.
38
catalog.html
38
catalog.html
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<head>
|
||||
<title>Каталог</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>Тут разбита музыка на жанры</h3>
|
||||
<p>Инфа будет +- такая</p>
|
||||
<div class="list">
|
||||
<ul class="punk-list">
|
||||
<li>
|
||||
<div class="item">
|
||||
<img class="catalog" src="pankrock.jpg" alt="Панк-Рок" width=200>
|
||||
<a href="punkrock.html">Панк-Рок</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item">
|
||||
<img class="catalog" src="psy.png" alt="Психоделический рок" width=200>
|
||||
<a href="">Психоделика</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item">
|
||||
<img class="catalog" src="garajnipunk.jpg" alt="Гаражный-панк" width=200>
|
||||
<a href="">Гражный-панк</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<a href="index.html"> Вернуться назад</a>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
43
grob.html
43
grob.html
@@ -1,43 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<head>
|
||||
<title>Гражданская оборона</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Здесь можно почитать инфу про исполнителя и перейти на песню</p>
|
||||
<img src = "grob.jpg" alt="Гражданская оборона" width= 500>
|
||||
<div class="descriptionForSong">
|
||||
<p>
|
||||
«Гражданская Оборона» — культовая советская и российская рок-группа, основанная в 1984 году в Омске Егором Летовым.
|
||||
Коллектив стал одним из самых влиятельных в андеграундной среде, а его творчество оказало огромное влияние
|
||||
на развитие русского рока. Группа известна своими резкими, часто провокационными текстами, которые затрагивали
|
||||
темы социального протеста, экзистенциальных переживаний и критики общества.
|
||||
</p>
|
||||
<p>
|
||||
Музыка «Гражданской Обороны» сочетает в себе элементы панк-рока, гаражного рока и лоу-фая.
|
||||
Несмотря на минималистичный подход к звучанию, группа смогла создать уникальный стиль, который
|
||||
стал узнаваемым и вдохновил множество последующих исполнителей.
|
||||
</p>
|
||||
<p>
|
||||
Среди самых известных альбомов группы — «Тоталитаризм», «Мышеловка», «Здорово и вечно»,
|
||||
«Русское поле экспериментов» и «Инструкция по выживанию». Творчество «Гражданской Обороны»
|
||||
остается актуальным и по сей день, а Егор Летов считается одной из ключевых фигур в истории
|
||||
русской рок-музыки.
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
Песни:
|
||||
<ul>
|
||||
<li><a href = "grobKaifIliBolshe.html">Кайф или больше</a></li>
|
||||
<li><a href = "">Зоопарк</a></li>
|
||||
<li><a href = "">Новая патриотическая</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<a href="index.html"> Вернуться назад</a>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,49 +0,0 @@
|
||||
//grobKaifIliBolshe
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<head>
|
||||
<title>Гражданская оборона - "Кайф или больше"</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>Тут будет типа песня</h3>
|
||||
<img src = "nekrofilia.jpg" alt = "Обложка" width="500" >
|
||||
<h2>Кайф или больше</h2>
|
||||
<a href="grob.html">Гражданская оборона</a>
|
||||
<p>Описание</p>
|
||||
<ul>
|
||||
<li>Была выпущена в 1987 году</li>
|
||||
<li>Входит в альбом некрофилия</li>
|
||||
</ul>
|
||||
<div class = "text">
|
||||
<p>Текст песни:
|
||||
<br> [Куплет 1]
|
||||
<br>Рука повисла в небе, полном до краёв
|
||||
<br>Мои ошибки устилают мой позор
|
||||
<br>Я сочно благодарен, словно кошкин блёв
|
||||
<br>И смачно богомолен, словно приговор
|
||||
|
||||
<br>[Припев]
|
||||
<br>Но мне придётся выбирать
|
||||
<br>Кайф или больше
|
||||
<br>Рай или больше
|
||||
<br>Свет или больше… Хей-йо
|
||||
|
||||
<br>[Куплет 2]
|
||||
<br>Я буду ласковым, как тёплый банный лист
|
||||
<br>Я буду вежливым, как битое окно
|
||||
<br>Я буду благотворен, словно онанист
|
||||
<br>Я буду зазеркален, словно всё равно
|
||||
|
||||
<br>[Припев]
|
||||
<br>Но мне придётся выбирать
|
||||
<br>Кайф или больше
|
||||
<br>Рай или больше
|
||||
<br>Свет или больше...хей-йо
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
<a href="index.html"> Вернуться назад</a>
|
||||
|
||||
</html>
|
||||
28
index.html
28
index.html
@@ -1,28 +0,0 @@
|
||||
//index
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Панкуха</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1>Стриминговый сервис <em>"Панкуха"</em></h1>
|
||||
<img src="res/logo.png" alt="Эмблема" width="200">
|
||||
<div class="main">
|
||||
<div class="description">
|
||||
<p><span style="background-color: blueviolet;">Какие страницы я реализовал:</span></p>
|
||||
</div>
|
||||
<ol class = "spisok">
|
||||
<a href="index.html"><li class="spisok_el">Главная страница</li></a>
|
||||
<a href="grob.html"><li>Страница исполнителя</li></a>
|
||||
<li><a href="grobKaifIliBolshe.html">Страница песни</a></li>
|
||||
<a href="catalog.html"><li>Каталог</li></a>
|
||||
<a href="punkrock.html"><li>Страница каталога</li></a>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
17
lab4/my-project/.eslintrc.json
Normal file
17
lab4/my-project/.eslintrc.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"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
Normal file
24
lab4/my-project/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# 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?
|
||||
8
lab4/my-project/.prettierrc.json
Normal file
8
lab4/my-project/.prettierrc.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"printWidth": 80,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
122
lab4/my-project/catalog.html
Normal file
122
lab4/my-project/catalog.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!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>
|
||||
82
lab4/my-project/db.json
Normal file
82
lab4/my-project/db.json
Normal file
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"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-е"
|
||||
}
|
||||
]
|
||||
}
|
||||
138
lab4/my-project/grob.html
Normal file
138
lab4/my-project/grob.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!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>
|
||||
160
lab4/my-project/grobKaifIliBolshe.html
Normal file
160
lab4/my-project/grobKaifIliBolshe.html
Normal file
@@ -0,0 +1,160 @@
|
||||
<!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>
|
||||
111
lab4/my-project/index.html
Normal file
111
lab4/my-project/index.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!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.
|
Before Width: | Height: | Size: 969 KiB After Width: | Height: | Size: 1.5 MiB |
2941
lab4/my-project/package-lock.json
generated
Normal file
2941
lab4/my-project/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
lab4/my-project/package.json
Normal file
27
lab4/my-project/package.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"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
lab4/my-project/public/vite.svg
Normal file
1
lab4/my-project/public/vite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
195
lab4/my-project/punkrock.html
Normal file
195
lab4/my-project/punkrock.html
Normal file
@@ -0,0 +1,195 @@
|
||||
<!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>
|
||||
|
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 |
9
lab4/my-project/src/counter.js
Normal file
9
lab4/my-project/src/counter.js
Normal file
@@ -0,0 +1,9 @@
|
||||
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)
|
||||
}
|
||||
189
lab4/my-project/src/css/style.css
Normal file
189
lab4/my-project/src/css/style.css
Normal file
@@ -0,0 +1,189 @@
|
||||
: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
lab4/my-project/src/javascript.svg
Normal file
1
lab4/my-project/src/javascript.svg
Normal file
@@ -0,0 +1 @@
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 995 B |
96
lab4/my-project/src/js/controller/ArtistController.js
Normal file
96
lab4/my-project/src/js/controller/ArtistController.js
Normal file
@@ -0,0 +1,96 @@
|
||||
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);
|
||||
}
|
||||
};
|
||||
}
|
||||
19
lab4/my-project/src/js/main.js
Normal file
19
lab4/my-project/src/js/main.js
Normal file
@@ -0,0 +1,19 @@
|
||||
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);
|
||||
}
|
||||
});
|
||||
147
lab4/my-project/src/js/model/ArtistModel.js
Normal file
147
lab4/my-project/src/js/model/ArtistModel.js
Normal file
@@ -0,0 +1,147 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
148
lab4/my-project/src/js/view/ArtistView.js
Normal file
148
lab4/my-project/src/js/view/ArtistView.js
Normal file
@@ -0,0 +1,148 @@
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<head>
|
||||
<title>Панк-рок</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>Тут будет перечень исполнителей, принадлежащих жанру</h3>
|
||||
<p>Инфа будет +- такая</p>
|
||||
<ul class="autors">
|
||||
<li><a href="grob.html">Гражданская Оборона</a></li>
|
||||
<li><a href="">Король и Шут</a></li>
|
||||
<li><a href="">Наив</a></li>
|
||||
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
<br><a href="index.html"> Вернуться назад</a>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
BIN
res/grob.jpg
BIN
res/grob.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB |
BIN
res/pankrock.jpg
BIN
res/pankrock.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
121
styles.css
121
styles.css
@@ -1,121 +0,0 @@
|
||||
body{
|
||||
background-color: #474444;
|
||||
color: white;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
font-size: medium;
|
||||
}
|
||||
a{
|
||||
color: aliceblue;
|
||||
text-decoration: none;
|
||||
font-size: 15pt;
|
||||
}
|
||||
a:hover{
|
||||
color:lightblue;
|
||||
}
|
||||
img{
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.description{
|
||||
font-size: 20pt;
|
||||
}
|
||||
.reviews{
|
||||
background-color: rgb(96, 89, 89);
|
||||
margin: 15pt;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.catalog{
|
||||
margin: 10pt;
|
||||
}
|
||||
.text{
|
||||
text-align: center;
|
||||
}
|
||||
.text li{
|
||||
list-style: none;
|
||||
}
|
||||
.descriptionForSong{
|
||||
font-size: 20pt;
|
||||
background-color: beige;
|
||||
color: black;
|
||||
}
|
||||
.punk-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.punk-list li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.list {
|
||||
font-size: 17pt;
|
||||
color: black;
|
||||
}
|
||||
.autors {
|
||||
list-style: none;
|
||||
}
|
||||
.main{
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.main li{
|
||||
list-style: none;
|
||||
margin: 15pt;
|
||||
border-width: 5pt;
|
||||
padding-bottom: 1pt;
|
||||
border-color: aliceblue;
|
||||
border: 1pt solid white;
|
||||
}
|
||||
|
||||
|
||||
footer{
|
||||
text-align: center;
|
||||
background-color: grey;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between; /* Логотип и навигация по краям */
|
||||
align-items: center; /* Выравнивание по вертикали */
|
||||
background-color: #333; /* Цвет фона */
|
||||
padding: 10px 20px; /* Отступы внутри шапки */
|
||||
color: white; /* Цвет текста */
|
||||
}
|
||||
|
||||
|
||||
.logo img {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
|
||||
.nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
Binary file not shown.
BIN
~$bWork4Report.docx
Normal file
BIN
~$bWork4Report.docx
Normal file
Binary file not shown.
Reference in New Issue
Block a user