Compare commits
4 Commits
main
...
lab3-branc
| Author | SHA1 | Date | |
|---|---|---|---|
|
8508ce3ef6 | ||
|
|
627b78800b | ||
|
|
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
LabWork3Report.docx
Normal file
BIN
LabWork3Report.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
lab3/my-project/.eslintrc.json
Normal file
17
lab3/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
lab3/my-project/.gitignore
vendored
Normal file
24
lab3/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
lab3/my-project/.prettierrc.json
Normal file
8
lab3/my-project/.prettierrc.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"printWidth": 80,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
122
lab3/my-project/catalog.html
Normal file
122
lab3/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>
|
||||
138
lab3/my-project/grob.html
Normal file
138
lab3/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
lab3/my-project/grobKaifIliBolshe.html
Normal file
160
lab3/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
lab3/my-project/index.html
Normal file
111
lab3/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>
|
||||
2941
lab3/my-project/package-lock.json
generated
Normal file
2941
lab3/my-project/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
lab3/my-project/package.json
Normal file
25
lab3/my-project/package.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"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"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
}
|
||||
1
lab3/my-project/public/vite.svg
Normal file
1
lab3/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 |
221
lab3/my-project/punkrock.html
Normal file
221
lab3/my-project/punkrock.html
Normal file
@@ -0,0 +1,221 @@
|
||||
<!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">
|
||||
|
||||
|
||||
<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="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>
|
||||
<input type="text" class="form-control bg-dark text-light border-punk" id="description" required>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
document.getElementById('artistForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Получаем данные из формы
|
||||
const name = document.getElementById('artistName').value;
|
||||
const discription = document.getElementById('description').value;
|
||||
const year = document.getElementById('artistYear').value;
|
||||
const country = document.getElementById('artistCountry').value;
|
||||
|
||||
// Валидация
|
||||
if (!name) {
|
||||
alert('Заполните обязательные поля: Название группы!');
|
||||
return;
|
||||
}
|
||||
|
||||
// Создаем новую карточку исполнителя
|
||||
const card = document.createElement('div');
|
||||
card.className = 'col';
|
||||
card.innerHTML = `
|
||||
<div class="card h-100 bg-dark border-punk artist-card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-punk">${name}</h5>
|
||||
<div class="card-text">
|
||||
${year ? `<small class="text-light">Год основания: ${year}</small><br>` : ''}
|
||||
${country ? `<small class="text-light">Страна: ${country}</small>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-outline-punk w-100" data-bs-toggle="modal" data-bs-target="#artistModal-${name.replace(/\s+/g, '-')}">
|
||||
<i class="bi bi-music-note-list"></i> Описание
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно для описания -->
|
||||
<div class="modal fade" id="artistModal-${name.replace(/\s+/g, '-')}" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content bg-dark border-punk">
|
||||
<div class="modal-header border-punk">
|
||||
<h5 class="modal-title text-punk">${name}</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-light">
|
||||
${year ? `<p><strong>Год основания:</strong> ${year}</p>` : ''}
|
||||
${country ? `<p><strong>Страна:</strong> ${country}</p>` : ''}
|
||||
${discription ? `<p><strong>Описание:</strong> ${discription}</p>`: ''}
|
||||
</div>
|
||||
<div class="modal-footer border-punk">
|
||||
<button type="button" class="btn btn-punk" data-bs-dismiss="modal">Закрыть</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Добавляем карточку в контейнер
|
||||
document.getElementById('artistsContainer').appendChild(card);
|
||||
|
||||
// Анимация добавления
|
||||
card.style.opacity = '0';
|
||||
document.getElementById('artistsContainer').prepend(card);
|
||||
setTimeout(() => { card.style.opacity = '1'; }, 10);
|
||||
|
||||
// Очищаем форму
|
||||
this.reset();
|
||||
|
||||
// Фокус на первое поле
|
||||
document.getElementById('artistName').focus();
|
||||
});
|
||||
</script>
|
||||
|
||||
</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>
|
||||
</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
lab3/my-project/src/counter.js
Normal file
9
lab3/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
lab3/my-project/src/css/style.css
Normal file
189
lab3/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
lab3/my-project/src/javascript.svg
Normal file
1
lab3/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 |
27
lab3/my-project/src/main.js
Normal file
27
lab3/my-project/src/main.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import './style.css'
|
||||
import javascriptLogo from './javascript.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import { setupCounter } from './counter.js'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css';
|
||||
import 'bootstrap';
|
||||
|
||||
document.querySelector('#app').innerHTML = `
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src="${viteLogo}" class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
|
||||
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
|
||||
</a>
|
||||
<h1>Hello Vite!</h1>
|
||||
<div class="card">
|
||||
<button id="counter" type="button"></button>
|
||||
</div>
|
||||
<p class="read-the-docs">
|
||||
Click on the Vite logo to learn more
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
|
||||
setupCounter(document.querySelector('#counter'))
|
||||
BIN
lab3/~$bWork3Report.docx
Normal file
BIN
lab3/~$bWork3Report.docx
Normal file
Binary file not shown.
@@ -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 |
BIN
res/psy.png
BIN
res/psy.png
Binary file not shown.
|
Before Width: | Height: | Size: 969 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
~$bWork3Report.docx
Normal file
BIN
~$bWork3Report.docx
Normal file
Binary file not shown.
BIN
~WRL0003.tmp
Normal file
BIN
~WRL0003.tmp
Normal file
Binary file not shown.
Reference in New Issue
Block a user