лаба + отчет
This commit is contained in:
maxim
BIN
lab3/LabWork3Report.docx
Normal file
BIN
lab3/LabWork3Report.docx
Normal file
Binary file not shown.
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.
Binary file not shown.
@@ -1,68 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
<head>
|
|
||||||
<title>Каталог</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header class="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<div class="logo">
|
|
||||||
<img src="logo.png" alt="Логотип">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<h1 class="site-title">Панкуха</h1>
|
|
||||||
<nav class="nav">
|
|
||||||
<ul class="menu">
|
|
||||||
<li class="dropdown">
|
|
||||||
<span>Страницы</span>
|
|
||||||
<ul class="features-menu">
|
|
||||||
<li><a href="index.html">Главная страница</a></li>
|
|
||||||
<li><a href="catalog.html">Каталог</a></li>
|
|
||||||
<li><a href="grobKaifIliBolshe.html">Песня</a></li>
|
|
||||||
<li><a href="punkrock.html">Исполнители</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="https://vk.com/kadyshevever">Контакты</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>© 2025. Все права защищены.</p>
|
|
||||||
<nav>
|
|
||||||
<a href="#">Политика конфиденциальности</a>
|
|
||||||
<a href="https://vk.com/kadyshevever"><div class="logo">
|
|
||||||
<img src="vk.png" alt="Логотип">
|
|
||||||
</div></a>
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
<head>
|
|
||||||
<title>Гражданская оборона</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header class="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<div class="logo">
|
|
||||||
<img src="logo.png" alt="Логотип">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<h1 class="site-title">Панкуха</h1>
|
|
||||||
<nav class="nav">
|
|
||||||
<ul class="menu">
|
|
||||||
<li class="dropdown">
|
|
||||||
<span>Страницы</span>
|
|
||||||
<ul class="features-menu">
|
|
||||||
<li><a href="index.html">Главная страница</a></li>
|
|
||||||
<li><a href="catalog.html">Каталог</a></li>
|
|
||||||
<li><a href="grobKaifIliBolshe.html">Песня</a></li>
|
|
||||||
<li><a href="punkrock.html">Исполнители</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="https://vk.com/kadyshevever">Контакты</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>© 2025. Все права защищены.</p>
|
|
||||||
<nav>
|
|
||||||
<a href="#">Политика конфиденциальности</a>
|
|
||||||
<a href="https://vk.com/kadyshevever"><div class="logo">
|
|
||||||
<img src="vk.png" alt="Логотип">
|
|
||||||
</div></a>
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
<head>
|
|
||||||
<title>Гражданская оборона - "Кайф или больше"</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header class="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<div class="logo">
|
|
||||||
<img src="logo.png" alt="Логотип">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<h1 class="site-title">Панкуха</h1>
|
|
||||||
<nav class="nav">
|
|
||||||
<ul class="menu">
|
|
||||||
<li class="dropdown">
|
|
||||||
<span>Страницы</span>
|
|
||||||
<ul class="features-menu">
|
|
||||||
<li><a href="index.html">Главная страница</a></li>
|
|
||||||
<li><a href="catalog.html">Каталог</a></li>
|
|
||||||
<li><a href="grobKaifIliBolshe.html">Песня</a></li>
|
|
||||||
<li><a href="punkrock.html">Исполнители</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="https://vk.com/kadyshevever">Контакты</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<footer>
|
|
||||||
<p>© 2025. Все права защищены.</p>
|
|
||||||
<nav>
|
|
||||||
<a href="#">Политика конфиденциальности</a>
|
|
||||||
<a href="https://vk.com/kadyshevever"><div class="logo">
|
|
||||||
<img src="vk.png" alt="Логотип">
|
|
||||||
</div></a>
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
</html>
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
<!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>
|
|
||||||
<header class="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<div class="logo">
|
|
||||||
<img src="logo.png" alt="Логотип">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<h1 class="site-title">Панкуха</h1>
|
|
||||||
<nav class="nav">
|
|
||||||
<ul class="menu">
|
|
||||||
<li class="dropdown">
|
|
||||||
<span>Страницы</span>
|
|
||||||
<ul class="features-menu">
|
|
||||||
<li><a href="index.html">Главная страница</a></li>
|
|
||||||
<li><a href="catalog.html">Каталог</a></li>
|
|
||||||
<li><a href="grobKaifIliBolshe.html">Песня</a></li>
|
|
||||||
<li><a href="punkrock.html">Исполнители</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="https://vk.com/kadyshevever">Контакты</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<h1>Стриминговый сервис <em>"Панкуха"</em></h1>
|
|
||||||
<img src="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>
|
|
||||||
|
|
||||||
<footer class="footer">
|
|
||||||
<p>© 2025. Все права защищены.</p>
|
|
||||||
<nav>
|
|
||||||
<a href="#">Политика конфиденциальности</a>
|
|
||||||
<a href="https://vk.com/kadyshevever">
|
|
||||||
<div class="logo">
|
|
||||||
<img src="vk.png" alt="Логотип">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="ru">
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
<head>
|
|
||||||
<title>Панк-рок</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header class="header">
|
|
||||||
<a href="index.html">
|
|
||||||
<div class="logo">
|
|
||||||
<img src="logo.png" alt="Логотип">
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<h1 class="site-title">Панкуха</h1>
|
|
||||||
<nav class="nav">
|
|
||||||
<ul class="menu">
|
|
||||||
<li class="dropdown">
|
|
||||||
<span>Страницы</span>
|
|
||||||
<ul class="features-menu">
|
|
||||||
<li><a href="index.html">Главная страница</a></li>
|
|
||||||
<li><a href="catalog.html">Каталог</a></li>
|
|
||||||
<li><a href="grobKaifIliBolshe.html">Песня</a></li>
|
|
||||||
<li><a href="punkrock.html">Исполнители</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li><a href="https://vk.com/kadyshevever">Контакты</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<div class = "content">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<footer>
|
|
||||||
<p>© 2025. Все права защищены.</p>
|
|
||||||
<nav>
|
|
||||||
<a href="#">Политика конфиденциальности</a>
|
|
||||||
<a href="https://vk.com/kadyshevever"><div class="logo">
|
|
||||||
<img src="vk.png" alt="Логотип">
|
|
||||||
</div></a>
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
</html>
|
|
||||||
348
лаб2/styles.css
348
лаб2/styles.css
@@ -1,348 +0,0 @@
|
|||||||
/* Общие стили */
|
|
||||||
body {
|
|
||||||
background-color: #474444;
|
|
||||||
color: white;
|
|
||||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
|
||||||
font-size: medium;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: aliceblue;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 15pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: lightblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 100%;
|
|
||||||
height: 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;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
padding: 10px;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #333;
|
|
||||||
padding: 10px 20px;
|
|
||||||
color: white;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo img {
|
|
||||||
height: 50px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav ul li {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav ul li a,
|
|
||||||
.nav ul li span {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: block;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown>span {
|
|
||||||
z-index: 2;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown .features-menu {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
background-color: #333;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
box-shadow: 0 4px 8px rgba(205, 26, 26, 0.1);
|
|
||||||
padding: 10px 0;
|
|
||||||
min-width: 150px;
|
|
||||||
z-index: 1000;
|
|
||||||
margin: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown:hover .features-menu {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features-menu li {
|
|
||||||
padding: 5px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features-menu li a {
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features-menu li a:hover {
|
|
||||||
background-color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown span::after {
|
|
||||||
content: " ▾";
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spisok li {
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
transition: 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spisok li:hover {
|
|
||||||
background-color:blueviolet
|
|
||||||
}
|
|
||||||
/* Мобилка */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.header {
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-title {
|
|
||||||
font-size: 18px;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo img {
|
|
||||||
height: 40px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav ul {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav ul li {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav a {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown .features-menu {
|
|
||||||
position: static;
|
|
||||||
background-color: #444;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
padding: 0;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown:hover .features-menu {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown span::after {
|
|
||||||
content: " ▾";
|
|
||||||
}
|
|
||||||
|
|
||||||
.description,
|
|
||||||
.reviews,
|
|
||||||
.descriptionForSong {
|
|
||||||
font-size: 16pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main li {
|
|
||||||
margin: 10pt;
|
|
||||||
padding: 5pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
.punk-list {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item img {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 200px;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p{
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
h3{
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
h1{
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
font-size: 20pt;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spisok {
|
|
||||||
list-style-position: inside;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spisok li {
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p{
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
h3{
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
h2{
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
Binary file not shown.
Reference in New Issue
Block a user