Compare commits
5 Commits
main
...
lab5-branc
| Author | SHA1 | Date | |
|---|---|---|---|
|
743b7c1c6a | ||
|
|
499b51d2e1 | ||
|
|
51875bcc5e | ||
|
|
51545137be | ||
|
|
0dd5c03d7d |
14
.gitignore
vendored
14
.gitignore
vendored
@@ -1,14 +0,0 @@
|
||||
# ---> VisualStudioCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
!.vscode/*.code-snippets
|
||||
|
||||
# Local History for Visual Studio Code
|
||||
.history/
|
||||
|
||||
# Built Visual Studio Code Extensions
|
||||
*.vsix
|
||||
|
||||
Binary file not shown.
BIN
LabWork5Report.docx
Normal file
BIN
LabWork5Report.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>
|
||||
23
punkrock-react/.gitignore
vendored
Normal file
23
punkrock-react/.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
70
punkrock-react/README.md
Normal file
70
punkrock-react/README.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
58
punkrock-react/db.json
Normal file
58
punkrock-react/db.json
Normal file
@@ -0,0 +1,58 @@
|
||||
{
|
||||
"artists": [
|
||||
{
|
||||
"id": "9daa",
|
||||
"name": "testlabуцк",
|
||||
"description": "sadууу",
|
||||
"epochId": 2,
|
||||
"countryId": 3
|
||||
},
|
||||
{
|
||||
"id": "98ad",
|
||||
"name": "ыфвфы",
|
||||
"description": "выфв",
|
||||
"epochId": 1,
|
||||
"countryId": 1
|
||||
},
|
||||
{
|
||||
"id": "dd28",
|
||||
"name": "аааа",
|
||||
"description": "ааа",
|
||||
"epochId": 2,
|
||||
"countryId": 3
|
||||
},
|
||||
{
|
||||
"id": "b499",
|
||||
"name": "бб",
|
||||
"description": "уафв",
|
||||
"epochId": 1,
|
||||
"countryId": 3
|
||||
}
|
||||
],
|
||||
"countries": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Россия"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "США"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"name": "Тайга"
|
||||
}
|
||||
],
|
||||
"epochs": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "1980-е"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "1990-е"
|
||||
}
|
||||
],
|
||||
"albums": [],
|
||||
"songs": []
|
||||
}
|
||||
17647
punkrock-react/package-lock.json
generated
Normal file
17647
punkrock-react/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
45
punkrock-react/package.json
Normal file
45
punkrock-react/package.json
Normal file
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"name": "punkrock-react",
|
||||
"version": "0.1.0",
|
||||
"homepage": "/punkrock",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@testing-library/dom": "^10.4.0",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"bootstrap": "^5.3.6",
|
||||
"bootstrap-icons": "^1.13.1",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap-icons": "^1.11.6",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^7.6.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
78
punkrock-react/public/catalog.html
Normal file
78
punkrock-react/public/catalog.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="src/styles.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<title>Панкуха</title>
|
||||
</head>
|
||||
<body class="bg-dark text-light">
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<a href="/" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="/res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-punk fw-bold dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end bg-dark">
|
||||
<li><a class="dropdown-item text-punk" href="/">Главная</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/grob">Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/grobKaifIliBolshe">Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/catalog">Каталог</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/punkrock">Список исполнителей</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container-fluid my-5 flex-grow-1">
|
||||
<div class="container">
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-0"><a class="text-punk" href="/punkrock">Панк-Рок</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-0">Психоделика</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-0">Гаражный панк</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
59
punkrock-react/public/db.json
Normal file
59
punkrock-react/public/db.json
Normal file
@@ -0,0 +1,59 @@
|
||||
{
|
||||
"artists": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Гражданская Оборона",
|
||||
"description": "Советская и российская рок-группа, основанная Егором Летовым.",
|
||||
"year": 1984,
|
||||
"country": "Россия"
|
||||
},
|
||||
{
|
||||
"id": "f28f",
|
||||
"name": "что-то",
|
||||
"description": "sdad",
|
||||
"year": 1998,
|
||||
"country": "Россия"
|
||||
},
|
||||
{
|
||||
"id": "2134",
|
||||
"name": "бб",
|
||||
"description": "ццвыф",
|
||||
"year": 1999,
|
||||
"country": "Россия"
|
||||
}
|
||||
],
|
||||
"albums": [
|
||||
{
|
||||
"id": "1",
|
||||
"artistId": 1,
|
||||
"title": "Поганая молодёжь",
|
||||
"year": 1985
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"artistId": 1,
|
||||
"title": "Оптимизм",
|
||||
"year": 1985
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"artistId": 2,
|
||||
"title": "Камнем по голове",
|
||||
"year": 1996
|
||||
}
|
||||
],
|
||||
"songs": [
|
||||
{
|
||||
"id": "1",
|
||||
"albumId": 1,
|
||||
"title": "Я бесполезен",
|
||||
"duration": "2:30"
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"albumId": 3,
|
||||
"title": "Кукла колдуна",
|
||||
"duration": "3:15"
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
punkrock-react/public/favicon.ico
Normal file
BIN
punkrock-react/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
110
punkrock-react/public/grob.html
Normal file
110
punkrock-react/public/grob.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="/styles.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<title>Панкуха</title>
|
||||
</head>
|
||||
<body class="bg-dark text-light">
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<a href="/" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="/res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-punk fw-bold dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end bg-dark">
|
||||
<li><a class="dropdown-item text-punk" href="/">Главная</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/grob">Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/grobKaifIliBolshe">Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/catalog">Каталог</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/punkrock">Список исполнителей</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container-fluid my-5 flex-grow-1">
|
||||
<div class="container">
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h1 class="text-punk mb-4">Гражданская Оборона</h1>
|
||||
<div style="text-align: center;">
|
||||
<img src="/res/grob.jpg" alt="uGrob" class="me-2">
|
||||
</div>
|
||||
<p class="lead text-light">
|
||||
Здесь можно почитать инфу про исполнителя и перейти на песню
|
||||
</p>
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item bg-dark text-light border-punk">
|
||||
«Гражданская Оборона» — культовая советская и российская рок-группа, основанная в 1984 году в Омске Егором Летовым.
|
||||
Коллектив стал одним из самых влиятельных в андеграундной среде.
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-light border-punk">
|
||||
Музыка «Гражданской Обороны» сочетает в себе элементы панк-рока, гаражного рока и лоу-фая.
|
||||
Несмотря на минималистичный подход к звучанию, группа смогла создать уникальный стиль.
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-light border-punk">
|
||||
Среди самых известных альбомов группы — «Тоталитаризм», «Мышеловка», «Здорово и вечно»,
|
||||
«Русское поле экспериментов» и «Инструкция по выживанию». Творчество «Гражданской Обороны»
|
||||
остается актуальным и по сей день, а Егор Летов считается одной из ключевых фигур в истории
|
||||
русской рок-музыки.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-3">Популярные песни:</h3>
|
||||
<div class="list-group">
|
||||
<a class="list-group-item list-group-item-action bg-dark text-punk border-punk" href="/grobKaifIliBolshe">
|
||||
Кайф или больше
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action bg-dark text-punk border-punk" href="#">
|
||||
Зоопарк
|
||||
</a>
|
||||
<a class="list-group-item list-group-item-action bg-dark text-punk border-punk" href="#">
|
||||
Новая патриотическая
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
123
punkrock-react/public/grobKaifIliBolshe.html
Normal file
123
punkrock-react/public/grobKaifIliBolshe.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="/styles.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<title>Панкуха</title>
|
||||
</head>
|
||||
<body class="bg-dark text-light">
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<a href="/" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="/res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link text-punk fw-bold dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end bg-dark">
|
||||
<li><a class="dropdown-item text-punk" href="/">Главная</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/grob">Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/grobKaifIliBolshe">Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/catalog">Каталог</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="/punkrock">Список исполнителей</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container-fluid my-5 flex-grow-1">
|
||||
<div class="container">
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<h1 class="text-punk mb-4">Кайф или больше</h1>
|
||||
<h3 class="text-light mb-3">
|
||||
<div style="text-align: center;">
|
||||
|
||||
<img src="/res/nekrofilia.jpg" alt="uGrob" class="me-2">
|
||||
|
||||
</div>
|
||||
<div style="text-align: center;">
|
||||
<a class="text-punk" href="/grob">Гражданская оборона</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<h5 class="text-punk mb-3">Описание</h5>
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item bg-dark text-light border-punk">
|
||||
Была выпущена в 1987 году
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-light border-punk">
|
||||
Входит в альбом "Некрофилия"
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h5 class="text-punk mb-3">Текст песни:</h5>
|
||||
<pre class="text-light" style="white-space: pre-wrap;">
|
||||
[Куплет 1]
|
||||
Рука повисла в небе, полном до краёв
|
||||
Мои ошибки устилают мой позор
|
||||
Я сочно благодарен, словно кошкин блёв
|
||||
И смачно богомолен, словно приговор
|
||||
|
||||
[Припев]
|
||||
Но мне придётся выбирать
|
||||
Кайф или больше
|
||||
Рай или больше
|
||||
Свет или больше... Хей-йо
|
||||
|
||||
[Куплет 2]
|
||||
Я буду ласковым, как тёплый банный лист
|
||||
Я буду вежливым, как битое окно
|
||||
Я буду благотворен, словно онанист
|
||||
Я буду зазеркален, словно всё равно
|
||||
|
||||
[Припев]
|
||||
Но мне придётся выбирать
|
||||
Кайф или больше
|
||||
Рай или больше
|
||||
Свет или больше...хей-йо
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
15
punkrock-react/public/index.html
Normal file
15
punkrock-react/public/index.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="/styles.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<title>Панкуха</title>
|
||||
</head>
|
||||
<body class="bg-dark text-light">
|
||||
<div id="root"></div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
punkrock-react/public/logo192.png
Normal file
BIN
punkrock-react/public/logo192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
punkrock-react/public/logo512.png
Normal file
BIN
punkrock-react/public/logo512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
15
punkrock-react/public/manifest.json
Normal file
15
punkrock-react/public/manifest.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"short_name": "PunkRock",
|
||||
"name": "PunkRock SPA",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
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 |
3
punkrock-react/public/robots.txt
Normal file
3
punkrock-react/public/robots.txt
Normal file
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
189
punkrock-react/public/styles.css
Normal file
189
punkrock-react/public/styles.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;
|
||||
|
||||
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background-color: var(--punk-dark);
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
}
|
||||
.lyrics {
|
||||
text-align: center;
|
||||
line-height: 1.8;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.chorus {
|
||||
font-weight: bold;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vanilla:hover {
|
||||
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||
}
|
||||
/* Анимация карточек */
|
||||
.catalog-item {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.catalog-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
|
||||
}
|
||||
.btn-punk {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-punk:hover {
|
||||
background-color: #9d4edd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.artist-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.bg-punk {
|
||||
background-color: blueviolet !important;
|
||||
}
|
||||
/* Стиль кнопок */
|
||||
.btn-outline-punk {
|
||||
color: blueviolet;
|
||||
border-color: blueviolet;
|
||||
}
|
||||
.btn-outline-punk:hover {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
color: blueviolet;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
.bg-punk {
|
||||
background-color: var(--punk-primary) !important;
|
||||
}
|
||||
|
||||
.text-punk {
|
||||
color: var(--punk-primary) !important;
|
||||
}
|
||||
.border-punk {
|
||||
border-color: var(--punk-primary) !important;
|
||||
}
|
||||
.nav-link:hover, .dropdown-item:hover {
|
||||
color: white !important;
|
||||
background-color: var(--punk-primary) !important;
|
||||
}
|
||||
.list-group-item-action:hover {
|
||||
transform: translateX(5px);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.lead{
|
||||
color: blueviolet;
|
||||
text-align: center;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:focus {
|
||||
text-shadow: 0 0 8px blueviolet;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
186
punkrock-react/punkrock.html
Normal file
186
punkrock-react/punkrock.html
Normal file
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Панк-рок | Панкуха</title>
|
||||
|
||||
<!-- Подключаем стили в HEAD -->
|
||||
<!-- 1. Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- 2. Иконки Bootstrap -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<!-- 3. Кастомные стили -->
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body class="d-flex flex-column min-vh-100">
|
||||
|
||||
<header class="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div class="container-fluid">
|
||||
<!-- Логотип и название -->
|
||||
<a href="index.html" class="navbar-brand d-flex align-items-center ms-3">
|
||||
<img src="res/logo.png" alt="Панкуха" height="60" class="me-2">
|
||||
<span class="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
|
||||
<!-- Кнопка для мобильных -->
|
||||
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- Навигация -->
|
||||
<div class="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul class="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle text-punk fw-bold" href="#" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-list-check me-1"></i>Страницы
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark border-punk">
|
||||
<li><a class="dropdown-item text-punk" href="index.html"><i class="bi bi-house-door me-2"></i>Главная</a></li>
|
||||
<li><hr class="dropdown-divider border-punk"></li>
|
||||
<li><a class="dropdown-item text-punk" href="grob.html"><i class="bi bi-person-badge me-2"></i>Исполнитель</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="grobKaifIliBolshe.html"><i class="bi bi-music-note-beamed me-2"></i>Песня</a></li>
|
||||
<li><a class="dropdown-item text-punk" href="catalog.html"><i class="bi bi-collection me-2"></i>Каталог</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i class="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container my-5 flex-grow-1">
|
||||
<div class="container py-4">
|
||||
<div class="card bg-dark border-punk mb-4">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-3">
|
||||
<i class="bi bi-people-fill"></i> Перечень исполнителей панк-рока
|
||||
</h3>
|
||||
<p class="lead text-light">
|
||||
Список культовых групп жанра
|
||||
</p>
|
||||
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="grob.html" class="text-punk text-decoration-none d-flex align-items-center">
|
||||
<i class="bi bi-person-badge me-2"></i> Гражданская Оборона
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="#" class="text-punk text-decoration-none d-flex align-items-center">
|
||||
<i class="bi bi-person-badge me-2"></i> Король и Шут
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-group-item bg-dark text-punk border-punk">
|
||||
<a href="#" class="text-punk text-decoration-none d-flex align-items-center">
|
||||
<i class="bi bi-person-badge me-2"></i> Наив
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Форма добавления исполнителя -->
|
||||
<div class="container my-5">
|
||||
<div class="card bg-dark border-punk">
|
||||
<div class="card-body">
|
||||
<h3 class="text-punk mb-4"><i class="bi bi-person-plus"></i> Добавить исполнителя</h3>
|
||||
|
||||
<form id="artistForm">
|
||||
<!-- Название группы -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Название группы</label>
|
||||
<input type="text" class="form-control bg-dark text-light border-punk" id="artistName" required>
|
||||
</div>
|
||||
<!-- Описание -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Описание</label>
|
||||
<textarea class="form-control bg-dark text-light border-punk" id="description" required></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Год основания -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Год основания</label>
|
||||
<input type="number" class="form-control bg-dark text-light border-punk" id="artistYear" min="1700" max="2025">
|
||||
</div>
|
||||
|
||||
<!-- Страна -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Страна</label>
|
||||
<input type="text" class="form-control bg-dark text-light border-punk" id="artistCountry">
|
||||
</div>
|
||||
|
||||
<!-- Кнопка добавления -->
|
||||
<button type="submit" class="btn btn-punk mt-3">
|
||||
<i class="bi bi-plus-circle"></i> Добавить исполнителя
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Контейнер для карточек исполнителей -->
|
||||
<div id="artistsContainer" class="row row-cols-1 row-cols-md-3 g-4 mt-4"></div>
|
||||
|
||||
<!-- Модальное окно для редактирования исполнителя -->
|
||||
<div class="modal fade" id="editArtistModal" tabindex="-1" aria-labelledby="editArtistModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content bg-dark border-punk">
|
||||
<div class="modal-header border-punk">
|
||||
<h5 class="modal-title text-punk" id="editArtistModalLabel"><i class="bi bi-pencil-square me-2"></i>Редактировать исполнителя</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="editArtistForm">
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Название группы</label>
|
||||
<input type="text" class="form-control bg-dark text-light border-punk" id="editArtistName" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Описание</label>
|
||||
<textarea class="form-control bg-dark text-light border-punk" id="editDescription" required></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Год основания</label>
|
||||
<input type="number" class="form-control bg-dark text-light border-punk" id="editArtistYear" min="1700" max="2025">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label text-light">Страна</label>
|
||||
<input type="text" class="form-control bg-dark text-light border-punk" id="editArtistCountry">
|
||||
</div>
|
||||
<input type="hidden" id="editArtistId">
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer border-punk">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
|
||||
<button type="button" class="btn btn-punk" id="saveEditArtist"><i class="bi bi-save"></i> Сохранить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Подвал -->
|
||||
<footer class="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div class="container">
|
||||
<div class="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p class="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav class="d-flex align-items-center">
|
||||
<a href="#" class="text-punk me-3">Политика конфиденциальности</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Основной скрипт -->
|
||||
<script type="module" src="src/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
38
punkrock-react/src/App.css
Normal file
38
punkrock-react/src/App.css
Normal file
@@ -0,0 +1,38 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
13
punkrock-react/src/App.js
Normal file
13
punkrock-react/src/App.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import PunkRockPage from './pages/PunkRockPage';
|
||||
import './styles.css';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="d-flex flex-column min-vh-100" style={{ width: '100%' }}>
|
||||
<PunkRockPage />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
8
punkrock-react/src/App.test.js
Normal file
8
punkrock-react/src/App.test.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
15
punkrock-react/src/StaticPage.jsx
Normal file
15
punkrock-react/src/StaticPage.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
const StaticPage = ({ src }) => {
|
||||
return (
|
||||
<div style={{ height: '100vh', width: '100vw', margin: 0, padding: 0 }}>
|
||||
<iframe
|
||||
src={src}
|
||||
title="Static Page"
|
||||
style={{ width: '100%', height: '100%', border: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StaticPage;
|
||||
34
punkrock-react/src/components/ArtistCard.jsx
Normal file
34
punkrock-react/src/components/ArtistCard.jsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
|
||||
const ArtistCard = ({ artist, onEdit, onDelete }) => {
|
||||
return (
|
||||
<div className="col-md-4 mb-4">
|
||||
<div className="card bg-dark border-punk">
|
||||
<div className="card-body">
|
||||
<h5 className="card-title text-punk">{artist.name}</h5>
|
||||
<p className="card-text text-light">{artist.description || 'Нет описания'}</p>
|
||||
<p className="card-text text-light"><small>Эпоха: {artist.epoch?.name || 'Не указана'}</small></p>
|
||||
<p className="card-text text-light"><small>Страна: {artist.country?.name || 'Не указана'}</small></p>
|
||||
<button
|
||||
className="btn btn-outline-primary edit-btn me-2"
|
||||
onClick={() => onEdit(artist)}
|
||||
>
|
||||
<i className="bi bi-pencil-square"></i> Изменить
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-outline-danger delete-btn"
|
||||
onClick={() => {
|
||||
if (window.confirm('Удалить исполнителя?')) {
|
||||
onDelete(artist.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-trash"></i> Удалить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArtistCard;
|
||||
145
punkrock-react/src/components/ArtistForm.jsx
Normal file
145
punkrock-react/src/components/ArtistForm.jsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const ArtistForm = ({ countries = [], epochs = [], onSubmit, artist }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
description: '',
|
||||
epochId: '',
|
||||
countryId: ''
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
console.log('Received countries:', countries);
|
||||
console.log('Received epochs:', epochs);
|
||||
if (artist) {
|
||||
setFormData({
|
||||
name: artist.name,
|
||||
description: artist.description,
|
||||
epochId: artist.epoch?.id || artist.epochId || '',
|
||||
countryId: artist.country?.id || artist.countryId || ''
|
||||
});
|
||||
} else {
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
epochId: '',
|
||||
countryId: ''
|
||||
});
|
||||
}
|
||||
}, [artist, countries, epochs]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (!formData.name || !formData.description || !formData.epochId || !formData.countryId) {
|
||||
alert('Все поля обязательны!');
|
||||
return;
|
||||
}
|
||||
onSubmit({
|
||||
name: formData.name.trim(),
|
||||
description: formData.description.trim(),
|
||||
epochId: parseInt(formData.epochId),
|
||||
countryId: parseInt(formData.countryId)
|
||||
});
|
||||
if (!artist) {
|
||||
setFormData({
|
||||
name: '',
|
||||
description: '',
|
||||
epochId: '',
|
||||
countryId: ''
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card bg-dark border-punk">
|
||||
<div className="card-body">
|
||||
<h3 className="text-punk mb-4">
|
||||
<i className={`bi ${artist ? 'bi-pencil-square' : 'bi-person-plus'}`}></i>
|
||||
{artist ? 'Редактировать исполнителя' : 'Добавить исполнителя'}
|
||||
</h3>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Название группы</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control bg-dark text-light border-punk"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Описание</label>
|
||||
<textarea
|
||||
className="form-control bg-dark text-light border-punk"
|
||||
name="description"
|
||||
value={formData.description}
|
||||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Эпоха</label>
|
||||
<select
|
||||
className="form-select bg-dark text-light border-punk"
|
||||
name="epochId"
|
||||
value={formData.epochId}
|
||||
onChange={handleChange}
|
||||
required
|
||||
>
|
||||
<option value="">Выберите эпоху</option>
|
||||
{epochs.length > 0 ? (
|
||||
epochs.map(epoch => (
|
||||
<option key={epoch.id} value={epoch.id}>{epoch.name}</option>
|
||||
))
|
||||
) : (
|
||||
<option disabled>Нет данных</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label text-light">Страна</label>
|
||||
<select
|
||||
className="form-select bg-dark text-light border-punk"
|
||||
name="countryId"
|
||||
value={formData.countryId}
|
||||
onChange={handleChange}
|
||||
required
|
||||
>
|
||||
<option value="">Выберите страну</option>
|
||||
{countries.length > 0 ? (
|
||||
countries.map(country => (
|
||||
<option key={country.id} value={country.id}>{country.name}</option>
|
||||
))
|
||||
) : (
|
||||
<option disabled>Нет данных</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-punk mt-3">
|
||||
<i className={`bi ${artist ? 'bi-save' : 'bi-plus-circle'}`}></i>
|
||||
{artist ? 'Сохранить изменения' : 'Добавить исполнителя'}
|
||||
</button>
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArtistForm;
|
||||
19
punkrock-react/src/components/ArtistList.jsx
Normal file
19
punkrock-react/src/components/ArtistList.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import ArtistCard from './ArtistCard';
|
||||
|
||||
const ArtistList = ({ artists, onEdit, onDelete }) => {
|
||||
return (
|
||||
<div className="row row-cols-1 row-cols-md-3 g-4 mt-4">
|
||||
{artists.map(artist => (
|
||||
<ArtistCard
|
||||
key={artist.id}
|
||||
artist={artist}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArtistList;
|
||||
19
punkrock-react/src/components/Footer.jsx
Normal file
19
punkrock-react/src/components/Footer.jsx
Normal file
@@ -0,0 +1,19 @@
|
||||
// Footer.jsx
|
||||
import React from 'react';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-black py-3 border-top border-punk mt-auto">
|
||||
<div className="container">
|
||||
<div className="d-flex flex-wrap justify-content-between align-items-center">
|
||||
<p className="mb-0 text-punk">© 2025. Все права защищены.</p>
|
||||
<nav className="d-flex align-items-center">
|
||||
<a href="#" className="text-punk me-3">Политика конфиденциальности</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
31
punkrock-react/src/components/Header.jsx
Normal file
31
punkrock-react/src/components/Header.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
// Header.jsx
|
||||
import React from 'react';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="sticky-top navbar navbar-expand-lg navbar-dark bg-black border-bottom border-punk px-0">
|
||||
<div className="container-fluid">
|
||||
<a href="/" className="navbar-brand d-flex align-items-center ms-3">
|
||||
|
||||
<span className="text-punk fs-4 fw-bold">Панкуха</span>
|
||||
</a>
|
||||
|
||||
<button className="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div className="collapse navbar-collapse bg-black" id="navbarContent">
|
||||
<ul className="navbar-nav w-100 justify-content-end pe-4">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link text-punk fw-bold" href="https://vk.com/kadyshevever">
|
||||
<i className="bi bi-people-fill me-1"></i>Контакты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
189
punkrock-react/src/css/styles.css
Normal file
189
punkrock-react/src/css/styles.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 {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vanilla:hover {
|
||||
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||
}
|
||||
/* Анимация карточек */
|
||||
.catalog-item {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.catalog-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
|
||||
}
|
||||
.btn-punk {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-punk:hover {
|
||||
background-color: #9d4edd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.artist-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.bg-punk {
|
||||
background-color: blueviolet !important;
|
||||
}
|
||||
/* Стиль кнопок */
|
||||
.btn-outline-punk {
|
||||
color: blueviolet;
|
||||
border-color: blueviolet;
|
||||
}
|
||||
.btn-outline-punk:hover {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
color: blueviolet;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
.bg-punk {
|
||||
background-color: var(--punk-primary) !important;
|
||||
}
|
||||
|
||||
.text-punk {
|
||||
color: var(--punk-primary) !important;
|
||||
}
|
||||
.border-punk {
|
||||
border-color: var(--punk-primary) !important;
|
||||
}
|
||||
.nav-link:hover, .dropdown-item:hover {
|
||||
color: white !important;
|
||||
background-color: var(--punk-primary) !important;
|
||||
}
|
||||
.list-group-item-action:hover {
|
||||
transform: translateX(5px);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.lead{
|
||||
color: blueviolet;
|
||||
text-align: center;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:focus {
|
||||
text-shadow: 0 0 8px blueviolet;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
13
punkrock-react/src/index.css
Normal file
13
punkrock-react/src/index.css
Normal file
@@ -0,0 +1,13 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
51
punkrock-react/src/index.js
Normal file
51
punkrock-react/src/index.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import 'bootstrap-icons/font/bootstrap-icons.css';
|
||||
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
|
||||
import App from './App';
|
||||
|
||||
// Компонент для редиректа на статические страницы
|
||||
const RedirectToStatic = () => {
|
||||
const location = useLocation();
|
||||
const hasRedirected = React.useRef(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
// Редирект только если маршрут не заканчивается на .html и редирект ещё не выполнен
|
||||
if (!hasRedirected.current && !location.pathname.endsWith('.html')) {
|
||||
let targetPath = location.pathname === '/' ? '/index.html' : `${location.pathname}.html`;
|
||||
hasRedirected.current = true; // Устанавливаем флаг, чтобы избежать повторного редиректа
|
||||
window.location.replace(targetPath); // Прямой редирект на статический файл
|
||||
}
|
||||
}, [location.pathname]);
|
||||
|
||||
// Ничего не рендерим
|
||||
return null;
|
||||
};
|
||||
|
||||
// Компонент для рендеринга React-логики
|
||||
const RootComponent = () => {
|
||||
return (
|
||||
<div className="d-flex flex-column min-vh-100" style={{ width: '100%' }}>
|
||||
<App />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Рендеринг React только для маршрута /punkrock
|
||||
const rootElement = document.getElementById('root');
|
||||
if (rootElement) {
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/punkrock" element={<RootComponent />} />
|
||||
<Route path="/*" element={<RedirectToStatic />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
} else {
|
||||
console.error('Root element not found. Ensure public/index.html contains <div id="root">');
|
||||
}
|
||||
1
punkrock-react/src/logo.svg
Normal file
1
punkrock-react/src/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
174
punkrock-react/src/pages/PunkRockPage.jsx
Normal file
174
punkrock-react/src/pages/PunkRockPage.jsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Header from '../components/Header';
|
||||
import Footer from '../components/Footer';
|
||||
import ArtistList from '../components/ArtistList';
|
||||
import ArtistForm from '../components/ArtistForm';
|
||||
import { getArtists, getCountries, getEpochs, createArtist, updateArtist, deleteArtist } from '../services/api';
|
||||
|
||||
const PunkRockPage = () => {
|
||||
const [artists, setArtists] = useState([]);
|
||||
const [countries, setCountries] = useState([]);
|
||||
const [epochs, setEpochs] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [editingArtist, setEditingArtist] = useState(null);
|
||||
const [sortDirection, setSortDirection] = useState('asc'); // 'asc' для А-Я, 'desc' для Я-А
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [artistsData, countriesData, epochsData] = await Promise.all([
|
||||
getArtists(),
|
||||
getCountries(),
|
||||
getEpochs()
|
||||
]);
|
||||
console.log('Fetched Artists:', artistsData);
|
||||
console.log('Fetched Countries:', countriesData);
|
||||
console.log('Fetched Epochs:', epochsData);
|
||||
setArtists(artistsData);
|
||||
setCountries(countriesData.map(country => ({
|
||||
...country,
|
||||
id: parseInt(country.id)
|
||||
})));
|
||||
setEpochs(epochsData.map(epoch => ({
|
||||
...epoch,
|
||||
id: parseInt(epoch.id)
|
||||
})));
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const handleAddArtist = async (artistData) => {
|
||||
try {
|
||||
// Проверка уникальности имени
|
||||
const isDuplicate = artists.some(artist => artist.name.toLowerCase() === artistData.name.toLowerCase());
|
||||
if (isDuplicate) {
|
||||
alert('Исполнитель с таким именем уже существует!');
|
||||
return;
|
||||
}
|
||||
|
||||
const newArtist = await createArtist(artistData);
|
||||
console.log('Added Artist:', newArtist);
|
||||
setArtists(prevArtists => {
|
||||
const enrichedArtist = {
|
||||
...newArtist,
|
||||
epoch: epochs.find(epoch => epoch.id === parseInt(newArtist.epochId)),
|
||||
country: countries.find(country => country.id === parseInt(newArtist.countryId))
|
||||
};
|
||||
return [...prevArtists, enrichedArtist].sort((a, b) =>
|
||||
sortDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
|
||||
);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error adding artist:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateArtist = async (artistData) => {
|
||||
try {
|
||||
// Проверка уникальности имени (кроме текущего исполнителя)
|
||||
const isDuplicate = artists.some(artist =>
|
||||
artist.name.toLowerCase() === artistData.name.toLowerCase() && artist.id !== editingArtist.id
|
||||
);
|
||||
if (isDuplicate) {
|
||||
alert('Исполнитель с таким именем уже существует!');
|
||||
return;
|
||||
}
|
||||
|
||||
const updatedArtist = await updateArtist(editingArtist.id, artistData);
|
||||
console.log('Updated Artist:', updatedArtist);
|
||||
setArtists(prevArtists => {
|
||||
const enrichedArtist = {
|
||||
...updatedArtist,
|
||||
epoch: epochs.find(epoch => epoch.id === parseInt(updatedArtist.epochId)),
|
||||
country: countries.find(country => country.id === parseInt(updatedArtist.countryId))
|
||||
};
|
||||
return prevArtists.map(a => (a.id === updatedArtist.id ? enrichedArtist : a))
|
||||
.sort((a, b) =>
|
||||
sortDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
|
||||
);
|
||||
});
|
||||
setEditingArtist(null);
|
||||
} catch (error) {
|
||||
console.error('Error updating artist:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteArtist = async (id) => {
|
||||
try {
|
||||
await deleteArtist(id);
|
||||
setArtists(artists.filter(artist => artist.id !== id)
|
||||
.sort((a, b) =>
|
||||
sortDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
|
||||
));
|
||||
} catch (error) {
|
||||
console.error('Error deleting artist:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSortDirection = () => {
|
||||
setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-center text-punk my-5">Загрузка...</div>;
|
||||
}
|
||||
|
||||
const enrichedArtists = artists.map(artist => ({
|
||||
...artist,
|
||||
epoch: epochs.find(epoch => epoch.id === parseInt(artist.epochId)),
|
||||
country: countries.find(country => country.id === parseInt(artist.countryId))
|
||||
})).sort((a, b) =>
|
||||
sortDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main className="container-fluid my-5 flex-grow-1">
|
||||
<div className="container py-4">
|
||||
<div className="card bg-dark border-punk mb-4">
|
||||
<div className="card-body">
|
||||
<h3 className="text-punk mb-3">
|
||||
<i className="bi bi-people-fill"></i> Перечень исполнителей панк-рока
|
||||
</h3>
|
||||
<p className="lead text-light">
|
||||
Список культовых групп жанра
|
||||
</p>
|
||||
<button
|
||||
className="btn btn-outline-secondary mb-3"
|
||||
onClick={toggleSortDirection}
|
||||
>
|
||||
Сортировать {sortDirection === 'asc' ? 'А-Я' : 'Я-А'}
|
||||
</button>
|
||||
<ArtistList
|
||||
artists={enrichedArtists}
|
||||
onEdit={setEditingArtist}
|
||||
onDelete={handleDeleteArtist}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container my-5">
|
||||
<ArtistForm
|
||||
countries={countries}
|
||||
epochs={epochs}
|
||||
onSubmit={editingArtist ? handleUpdateArtist : handleAddArtist}
|
||||
artist={editingArtist}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PunkRockPage;
|
||||
13
punkrock-react/src/reportWebVitals.js
Normal file
13
punkrock-react/src/reportWebVitals.js
Normal file
@@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
47
punkrock-react/src/services/api.js
Normal file
47
punkrock-react/src/services/api.js
Normal file
@@ -0,0 +1,47 @@
|
||||
const API_URL = 'http://localhost:3000';
|
||||
|
||||
export const getArtists = async () => {
|
||||
const response = await fetch(`${API_URL}/artists`);
|
||||
if (!response.ok) throw new Error('Ошибка загрузки исполнителей');
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const getCountries = async () => {
|
||||
const response = await fetch(`${API_URL}/countries`);
|
||||
if (!response.ok) throw new Error('Ошибка загрузки стран');
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const getEpochs = async () => {
|
||||
const response = await fetch(`${API_URL}/epochs`);
|
||||
if (!response.ok) throw new Error('Ошибка загрузки эпох');
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const createArtist = async (artist) => {
|
||||
const response = await fetch(`${API_URL}/artists`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(artist)
|
||||
});
|
||||
if (!response.ok) throw new Error('Ошибка создания исполнителя');
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const updateArtist = async (id, artist) => {
|
||||
const response = await fetch(`${API_URL}/artists/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(artist)
|
||||
});
|
||||
if (!response.ok) throw new Error('Ошибка обновления исполнителя');
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
export const deleteArtist = async (id) => {
|
||||
const response = await fetch(`${API_URL}/artists/${id}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
if (!response.ok) throw new Error('Ошибка удаления исполнителя');
|
||||
return true;
|
||||
};
|
||||
5
punkrock-react/src/setupTests.js
Normal file
5
punkrock-react/src/setupTests.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
192
punkrock-react/src/styles.css
Normal file
192
punkrock-react/src/styles.css
Normal file
@@ -0,0 +1,192 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
--punk-primary: blueviolet;
|
||||
--punk-dark: #121212;
|
||||
}
|
||||
.btn-outline-secondary{
|
||||
--bs-btn-color: blueviolet;
|
||||
--bs-btn-border-color: blueviolet;
|
||||
}
|
||||
a {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: blueviolet;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background-color: var(--punk-dark);
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
}
|
||||
.lyrics {
|
||||
text-align: center;
|
||||
line-height: 1.8;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.chorus {
|
||||
font-weight: bold;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vanilla:hover {
|
||||
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||
}
|
||||
/* Анимация карточек */
|
||||
.catalog-item {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.catalog-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
|
||||
}
|
||||
.btn-punk {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-punk:hover {
|
||||
background-color: #9d4edd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.artist-card {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.artist-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.bg-punk {
|
||||
background-color: blueviolet !important;
|
||||
}
|
||||
/* Стиль кнопок */
|
||||
.btn-outline-punk {
|
||||
color: blueviolet;
|
||||
border-color: blueviolet;
|
||||
}
|
||||
.btn-outline-punk:hover {
|
||||
background-color: blueviolet;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
color: blueviolet;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
.bg-punk {
|
||||
background-color: var(--punk-primary) !important;
|
||||
}
|
||||
|
||||
.text-punk {
|
||||
color: var(--punk-primary) !important;
|
||||
}
|
||||
.border-punk {
|
||||
border-color: var(--punk-primary) !important;
|
||||
}
|
||||
.nav-link:hover, .dropdown-item:hover {
|
||||
color: white !important;
|
||||
background-color: var(--punk-primary) !important;
|
||||
}
|
||||
.list-group-item-action:hover {
|
||||
transform: translateX(5px);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.lead{
|
||||
color: blueviolet;
|
||||
text-align: center;
|
||||
font-size: 20pt;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:focus {
|
||||
text-shadow: 0 0 8px blueviolet;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@@ -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.
Reference in New Issue
Block a user