сдал

с отчетами
слава богу она сделалась
2025-11-15 09:29:01 +04:00 · 2025-11-15 00:53:15 +04:00 · 2025-11-12 18:29:47 +04:00 · 2025-09-19 18:00:01 +04:00 · 2025-09-05 22:29:19 +04:00 · 2025-09-05 21:46:02 +04:00
161 changed files with 24330 additions and 316 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -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
-
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
--- a/.idea/internetDev.iml
+++ b/.idea/internetDev.iml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="21" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/internetDev.iml" filepath="$PROJECT_DIR$/.idea/internetDev.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
--- a/LabWork1Report.docx
+++ b/LabWork1Report.docx
--- a/LabWork2Report.docx
+++ b/LabWork2Report.docx
--- a/README.md
+++ b/README.md
@@ -1,2 +0,0 @@
-# InternetDev
-
--- a/catalog.html
+++ b/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>
--- a/demo/.gitattributes
+++ b/demo/.gitattributes
@@ -0,0 +1,3 @@
+/gradlew text eol=lf
+*.bat text eol=crlf
+*.jar binary
--- a/demo/.gitignore
+++ b/demo/.gitignore
@@ -0,0 +1,37 @@
+HELP.md
+.gradle
+build/
+!gradle/wrapper/gradle-wrapper.jar
+!**/src/main/**/build/
+!**/src/test/**/build/
+
+### STS ###
+.apt_generated
+.classpath
+.factorypath
+.project
+.settings
+.springBeans
+.sts4-cache
+bin/
+!**/src/main/**/bin/
+!**/src/test/**/bin/
+
+### IntelliJ IDEA ###
+.idea
+*.iws
+*.iml
+*.ipr
+out/
+!**/src/main/**/out/
+!**/src/test/**/out/
+
+### NetBeans ###
+/nbproject/private/
+/nbbuild/
+/dist/
+/nbdist/
+/.nb-gradle/
+
+### VS Code ###
+.vscode/
--- a/demo/build.gradle
+++ b/demo/build.gradle
@@ -0,0 +1,31 @@
+plugins {
+	id 'java'
+	id 'org.springframework.boot' version '3.2.5'
+	id 'io.spring.dependency-management' version '1.1.5'
+}
+
+group = 'com.example'
+version = '0.0.1-SNAPSHOT'
+description = 'Demo project for Spring Boot'
+
+java {
+	toolchain {
+		languageVersion = JavaLanguageVersion.of(21)
+	}
+}
+
+repositories {
+	mavenCentral()
+}
+
+dependencies {
+	implementation 'org.springframework.boot:spring-boot-starter-web'
+	implementation 'org.springframework.boot:spring-boot-starter-validation'
+	implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.2.0'
+	testImplementation 'org.springframework.boot:spring-boot-starter-test'
+	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
+}
+
+tasks.named('test') {
+	useJUnitPlatform()
+}
--- a/demo/gradle/wrapper/gradle-wrapper.jar
+++ b/demo/gradle/wrapper/gradle-wrapper.jar
--- a/demo/gradle/wrapper/gradle-wrapper.properties
+++ b/demo/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
--- a/demo/gradlew
+++ b/demo/gradlew
@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH="\\\"\\\""
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"
--- a/demo/gradlew.bat
+++ b/demo/gradlew.bat
@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
--- a/demo/settings.gradle
+++ b/demo/settings.gradle
@@ -0,0 +1 @@
+rootProject.name = 'demo'
--- a/demo/src/main/java/com/example/demo/DemoApplication.java
+++ b/demo/src/main/java/com/example/demo/DemoApplication.java
@@ -0,0 +1,13 @@
+package com.example.demo;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication
+public class DemoApplication {
+
+	public static void main(String[] args) {
+		SpringApplication.run(DemoApplication.class, args);
+	}
+
+}
--- a/demo/src/main/java/com/example/demo/config/OpenApiConfig.java
+++ b/demo/src/main/java/com/example/demo/config/OpenApiConfig.java
@@ -0,0 +1,23 @@
+package com.example.demo.config;
+
+import io.swagger.v3.oas.models.OpenAPI;
+import io.swagger.v3.oas.models.info.Info;
+import io.swagger.v3.oas.models.info.Contact;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+@Configuration
+public class OpenApiConfig {
+
+    @Bean
+    public OpenAPI customOpenAPI() {
+        return new OpenAPI()
+                .info(new Info()
+                        .title("Punk Rock API")
+                        .version("1.0.0")
+                        .description("REST API для управления данными о панк-рок исполнителях")
+                        .contact(new Contact()
+                                .name("Developer")
+                                .email("developer@example.com")));
+    }
+}
--- a/demo/src/main/java/com/example/demo/configuration/Constants.java
+++ b/demo/src/main/java/com/example/demo/configuration/Constants.java
@@ -0,0 +1,10 @@
+package com.example.demo.configuration;
+
+public class Constants {
+    public static final String DEV_ORIGIN = "http://localhost:5173";
+    public static final String API_URL = "/api";
+
+    private Constants() {
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/configuration/WebConfiguration.java
+++ b/demo/src/main/java/com/example/demo/configuration/WebConfiguration.java
@@ -0,0 +1,20 @@
+package com.example.demo.configuration;
+
+import org.springframework.context.annotation.Configuration;
+import org.springframework.lang.NonNull;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+public class WebConfiguration implements WebMvcConfigurer {
+    @Override
+    public void addCorsMappings(@NonNull CorsRegistry registry) {
+        registry
+                .addMapping(Constants.API_URL + "/**")
+                .allowedMethods("GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS")
+                .allowedOrigins("http://localhost:3000", "http://localhost:5173", "http://localhost:5174", Constants.DEV_ORIGIN)
+                .allowedHeaders("*")
+                .allowCredentials(true);
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/controller/ArtistController.java
+++ b/demo/src/main/java/com/example/demo/controller/ArtistController.java
@@ -0,0 +1,54 @@
+package com.example.demo.controller;
+
+import java.util.List;
+
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import jakarta.validation.Valid;
+import com.example.demo.configuration.Constants;
+import com.example.demo.dto.ArtistRq;
+import com.example.demo.dto.ArtistRs;
+import com.example.demo.service.ArtistService;
+
+@RestController
+@RequestMapping(Constants.API_URL + ArtistController.URL)
+public class ArtistController {
+    public static final String URL = "/artists";
+    private final ArtistService artistService;
+
+    public ArtistController(ArtistService artistService) {
+        this.artistService = artistService;
+    }
+
+    @GetMapping
+    public List<ArtistRs> getAll() {
+        return artistService.getAll();
+    }
+
+    @GetMapping("/{id}")
+    public ArtistRs get(@PathVariable Long id) {
+        return artistService.get(id);
+    }
+
+    @PostMapping
+    public ArtistRs create(@RequestBody @Valid ArtistRq dto) {
+        return artistService.create(dto);
+    }
+
+    @PutMapping("/{id}")
+    public ArtistRs update(@PathVariable Long id, @RequestBody @Valid ArtistRq dto) {
+        return artistService.update(id, dto);
+    }
+
+    @DeleteMapping("/{id}")
+    public ArtistRs delete(@PathVariable Long id) {
+        return artistService.delete(id);
+    }
+}
--- a/demo/src/main/java/com/example/demo/controller/CountryController.java
+++ b/demo/src/main/java/com/example/demo/controller/CountryController.java
@@ -0,0 +1,54 @@
+package com.example.demo.controller;
+
+import java.util.List;
+
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import jakarta.validation.Valid;
+import com.example.demo.configuration.Constants;
+import com.example.demo.dto.CountryRq;
+import com.example.demo.dto.CountryRs;
+import com.example.demo.service.CountryService;
+
+@RestController
+@RequestMapping(Constants.API_URL + CountryController.URL)
+public class CountryController {
+    public static final String URL = "/countries";
+    private final CountryService countryService;
+
+    public CountryController(CountryService countryService) {
+        this.countryService = countryService;
+    }
+
+    @GetMapping
+    public List<CountryRs> getAll() {
+        return countryService.getAll();
+    }
+
+    @GetMapping("/{id}")
+    public CountryRs get(@PathVariable Long id) {
+        return countryService.get(id);
+    }
+
+    @PostMapping
+    public CountryRs create(@RequestBody @Valid CountryRq dto) {
+        return countryService.create(dto);
+    }
+
+    @PutMapping("/{id}")
+    public CountryRs update(@PathVariable Long id, @RequestBody @Valid CountryRq dto) {
+        return countryService.update(id, dto);
+    }
+
+    @DeleteMapping("/{id}")
+    public CountryRs delete(@PathVariable Long id) {
+        return countryService.delete(id);
+    }
+}
--- a/demo/src/main/java/com/example/demo/controller/EpochController.java
+++ b/demo/src/main/java/com/example/demo/controller/EpochController.java
@@ -0,0 +1,54 @@
+package com.example.demo.controller;
+
+import java.util.List;
+
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import jakarta.validation.Valid;
+import com.example.demo.configuration.Constants;
+import com.example.demo.dto.EpochRq;
+import com.example.demo.dto.EpochRs;
+import com.example.demo.service.EpochService;
+
+@RestController
+@RequestMapping(Constants.API_URL + EpochController.URL)
+public class EpochController {
+    public static final String URL = "/epochs";
+    private final EpochService epochService;
+
+    public EpochController(EpochService epochService) {
+        this.epochService = epochService;
+    }
+
+    @GetMapping
+    public List<EpochRs> getAll() {
+        return epochService.getAll();
+    }
+
+    @GetMapping("/{id}")
+    public EpochRs get(@PathVariable Long id) {
+        return epochService.get(id);
+    }
+
+    @PostMapping
+    public EpochRs create(@RequestBody @Valid EpochRq dto) {
+        return epochService.create(dto);
+    }
+
+    @PutMapping("/{id}")
+    public EpochRs update(@PathVariable Long id, @RequestBody @Valid EpochRq dto) {
+        return epochService.update(id, dto);
+    }
+
+    @DeleteMapping("/{id}")
+    public EpochRs delete(@PathVariable Long id) {
+        return epochService.delete(id);
+    }
+}
--- a/demo/src/main/java/com/example/demo/dto/ArtistDto.java
+++ b/demo/src/main/java/com/example/demo/dto/ArtistDto.java
@@ -0,0 +1,59 @@
+package com.example.demo.dto;
+
+public class ArtistDto {
+    private Integer id;
+    private String name;
+    private String description;
+    private Integer epochId;
+    private Integer countryId;
+
+    public ArtistDto() {}
+
+    public ArtistDto(Integer id, String name, String description, Integer epochId, Integer countryId) {
+        this.id = id;
+        this.name = name;
+        this.description = description;
+        this.epochId = epochId;
+        this.countryId = countryId;
+    }
+
+    public Integer getId() {
+        return id;
+    }
+
+    public void setId(Integer id) {
+        this.id = id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getDescription() {
+        return description;
+    }
+
+    public void setDescription(String description) {
+        this.description = description;
+    }
+
+    public Integer getEpochId() {
+        return epochId;
+    }
+
+    public void setEpochId(Integer epochId) {
+        this.epochId = epochId;
+    }
+
+    public Integer getCountryId() {
+        return countryId;
+    }
+
+    public void setCountryId(Integer countryId) {
+        this.countryId = countryId;
+    }
+}
--- a/demo/src/main/java/com/example/demo/dto/ArtistRq.java
+++ b/demo/src/main/java/com/example/demo/dto/ArtistRq.java
@@ -0,0 +1,48 @@
+package com.example.demo.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.NotNull;
+import jakarta.validation.constraints.Size;
+
+public class ArtistRq {
+    @Size(min = 0, max = 500)
+    private String name;
+    private String description;
+    @NotNull
+    private Long epochId;
+    @NotNull
+    private Long countryId;
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getDescription() {
+        return description;
+    }
+
+    public void setDescription(String description) {
+        this.description = description;
+    }
+
+    public Long getEpochId() {
+        return epochId;
+    }
+
+    public void setEpochId(Long epochId) {
+        this.epochId = epochId;
+    }
+
+    public Long getCountryId() {
+        return countryId;
+    }
+
+    public void setCountryId(Long countryId) {
+        this.countryId = countryId;
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/dto/ArtistRs.java
+++ b/demo/src/main/java/com/example/demo/dto/ArtistRs.java
@@ -0,0 +1,50 @@
+package com.example.demo.dto;
+
+public class ArtistRs {
+    private Long id;
+    private String name;
+    private String description;
+    private EpochRs epoch;
+    private CountryRs country;
+
+    public Long getId() {
+        return id;
+    }
+
+    public void setId(Long id) {
+        this.id = id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getDescription() {
+        return description;
+    }
+
+    public void setDescription(String description) {
+        this.description = description;
+    }
+
+    public EpochRs getEpoch() {
+        return epoch;
+    }
+
+    public void setEpoch(EpochRs epoch) {
+        this.epoch = epoch;
+    }
+
+    public CountryRs getCountry() {
+        return country;
+    }
+
+    public void setCountry(CountryRs country) {
+        this.country = country;
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/dto/CountryDto.java
+++ b/demo/src/main/java/com/example/demo/dto/CountryDto.java
@@ -0,0 +1,29 @@
+package com.example.demo.dto;
+
+public class CountryDto {
+    private Integer id;
+    private String name;
+
+    public CountryDto() {}
+
+    public CountryDto(Integer id, String name) {
+        this.id = id;
+        this.name = name;
+    }
+
+    public Integer getId() {
+        return id;
+    }
+
+    public void setId(Integer id) {
+        this.id = id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+}
--- a/demo/src/main/java/com/example/demo/dto/CountryRq.java
+++ b/demo/src/main/java/com/example/demo/dto/CountryRq.java
@@ -0,0 +1,19 @@
+package com.example.demo.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.Size;
+
+public class CountryRq {
+    @NotBlank
+    @Size(min = 0, max = 50)
+    private String name;
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/dto/CountryRs.java
+++ b/demo/src/main/java/com/example/demo/dto/CountryRs.java
@@ -0,0 +1,23 @@
+package com.example.demo.dto;
+
+public class CountryRs {
+    private Long id;
+    private String name;
+
+    public Long getId() {
+        return id;
+    }
+
+    public void setId(Long id) {
+        this.id = id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/dto/EpochDto.java
+++ b/demo/src/main/java/com/example/demo/dto/EpochDto.java
@@ -0,0 +1,29 @@
+package com.example.demo.dto;
+
+public class EpochDto {
+    private Integer id;
+    private String name;
+
+    public EpochDto() {}
+
+    public EpochDto(Integer id, String name) {
+        this.id = id;
+        this.name = name;
+    }
+
+    public Integer getId() {
+        return id;
+    }
+
+    public void setId(Integer id) {
+        this.id = id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+}
--- a/demo/src/main/java/com/example/demo/dto/EpochRq.java
+++ b/demo/src/main/java/com/example/demo/dto/EpochRq.java
@@ -0,0 +1,19 @@
+package com.example.demo.dto;
+
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.Size;
+
+public class EpochRq {
+    @NotBlank
+    @Size(min = 0, max = 7)
+    private String name;
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/dto/EpochRs.java
+++ b/demo/src/main/java/com/example/demo/dto/EpochRs.java
@@ -0,0 +1,23 @@
+package com.example.demo.dto;
+
+public class EpochRs {
+    private Long id;
+    private String name;
+
+    public Long getId() {
+        return id;
+    }
+
+    public void setId(Long id) {
+        this.id = id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/entity/ArtistEntity.java
+++ b/demo/src/main/java/com/example/demo/entity/ArtistEntity.java
@@ -0,0 +1,53 @@
+package com.example.demo.entity;
+
+public class ArtistEntity extends BaseEntity {
+    private String name;
+    private String description;
+    private EpochEntity epoch;
+    private CountryEntity country;
+
+    public ArtistEntity() {
+        super();
+    }
+
+    public ArtistEntity(String name, String description, EpochEntity epoch, CountryEntity country) {
+        this();
+        this.name = name;
+        this.description = description;
+        this.epoch = epoch;
+        this.country = country;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getDescription() {
+        return description;
+    }
+
+    public void setDescription(String description) {
+        this.description = description;
+    }
+
+    public EpochEntity getEpoch() {
+        return epoch;
+    }
+
+    public void setEpoch(EpochEntity epoch) {
+        this.epoch = epoch;
+    }
+
+    public CountryEntity getCountry() {
+        return country;
+    }
+
+    public void setCountry(CountryEntity country) {
+        this.country = country;
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/entity/BaseEntity.java
+++ b/demo/src/main/java/com/example/demo/entity/BaseEntity.java
@@ -0,0 +1,17 @@
+package com.example.demo.entity;
+
+public abstract class BaseEntity {
+    protected Long id;
+
+    protected BaseEntity() {
+    }
+
+    public Long getId() {
+        return id;
+    }
+
+    public void setId(Long id) {
+        this.id = id;
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/entity/CountryEntity.java
+++ b/demo/src/main/java/com/example/demo/entity/CountryEntity.java
@@ -0,0 +1,23 @@
+package com.example.demo.entity;
+
+public class CountryEntity extends BaseEntity {
+    private String name;
+
+    public CountryEntity() {
+        super();
+    }
+
+    public CountryEntity(String name) {
+        this();
+        this.name = name;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/entity/EpochEntity.java
+++ b/demo/src/main/java/com/example/demo/entity/EpochEntity.java
@@ -0,0 +1,23 @@
+package com.example.demo.entity;
+
+public class EpochEntity extends BaseEntity {
+    private String name;
+
+    public EpochEntity() {
+        super();
+    }
+
+    public EpochEntity(String name) {
+        this();
+        this.name = name;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/error/NotFoundException.java
+++ b/demo/src/main/java/com/example/demo/error/NotFoundException.java
@@ -0,0 +1,8 @@
+package com.example.demo.error;
+
+public class NotFoundException extends RuntimeException {
+    public <T> NotFoundException(Class<T> entClass, Long id) {
+        super(String.format("%s with id %s is not found", entClass.getSimpleName(), id));
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/mapper/ArtistMapper.java
+++ b/demo/src/main/java/com/example/demo/mapper/ArtistMapper.java
@@ -0,0 +1,51 @@
+package com.example.demo.mapper;
+
+import java.util.List;
+import java.util.stream.StreamSupport;
+
+import org.springframework.stereotype.Component;
+
+import com.example.demo.dto.ArtistRq;
+import com.example.demo.dto.ArtistRs;
+import com.example.demo.entity.ArtistEntity;
+
+@Component
+public class ArtistMapper {
+    private final EpochMapper epochMapper;
+    private final CountryMapper countryMapper;
+
+    public ArtistMapper(EpochMapper epochMapper, CountryMapper countryMapper) {
+        this.epochMapper = epochMapper;
+        this.countryMapper = countryMapper;
+    }
+
+    public ArtistRq toRqDto(String name, String description, Long epochId, Long countryId) {
+        final ArtistRq dto = new ArtistRq();
+        dto.setName(name);
+        dto.setDescription(description);
+        dto.setEpochId(epochId);
+        dto.setCountryId(countryId);
+        return dto;
+    }
+
+    public ArtistRs toRsDto(ArtistEntity entity) {
+        final ArtistRs dto = new ArtistRs();
+        dto.setId(entity.getId());
+        dto.setName(entity.getName());
+        dto.setDescription(entity.getDescription());
+        if (entity.getEpoch() != null) {
+            dto.setEpoch(epochMapper.toRsDto(entity.getEpoch()));
+        }
+        if (entity.getCountry() != null) {
+            dto.setCountry(countryMapper.toRsDto(entity.getCountry()));
+        }
+        return dto;
+    }
+
+    public List<ArtistRs> toRsDtoList(Iterable<ArtistEntity> entities) {
+        return StreamSupport.stream(entities.spliterator(), false)
+                .map(this::toRsDto)
+                .toList();
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/mapper/CountryMapper.java
+++ b/demo/src/main/java/com/example/demo/mapper/CountryMapper.java
@@ -0,0 +1,33 @@
+package com.example.demo.mapper;
+
+import java.util.List;
+import java.util.stream.StreamSupport;
+
+import org.springframework.stereotype.Component;
+
+import com.example.demo.dto.CountryRq;
+import com.example.demo.dto.CountryRs;
+import com.example.demo.entity.CountryEntity;
+
+@Component
+public class CountryMapper {
+    public CountryRq toRqDto(String name) {
+        final CountryRq dto = new CountryRq();
+        dto.setName(name);
+        return dto;
+    }
+
+    public CountryRs toRsDto(CountryEntity entity) {
+        final CountryRs dto = new CountryRs();
+        dto.setId(entity.getId());
+        dto.setName(entity.getName());
+        return dto;
+    }
+
+    public List<CountryRs> toRsDtoList(Iterable<CountryEntity> entities) {
+        return StreamSupport.stream(entities.spliterator(), false)
+                .map(this::toRsDto)
+                .toList();
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/mapper/EpochMapper.java
+++ b/demo/src/main/java/com/example/demo/mapper/EpochMapper.java
@@ -0,0 +1,33 @@
+package com.example.demo.mapper;
+
+import java.util.List;
+import java.util.stream.StreamSupport;
+
+import org.springframework.stereotype.Component;
+
+import com.example.demo.dto.EpochRq;
+import com.example.demo.dto.EpochRs;
+import com.example.demo.entity.EpochEntity;
+
+@Component
+public class EpochMapper {
+    public EpochRq toRqDto(String name) {
+        final EpochRq dto = new EpochRq();
+        dto.setName(name);
+        return dto;
+    }
+
+    public EpochRs toRsDto(EpochEntity entity) {
+        final EpochRs dto = new EpochRs();
+        dto.setId(entity.getId());
+        dto.setName(entity.getName());
+        return dto;
+    }
+
+    public List<EpochRs> toRsDtoList(Iterable<EpochEntity> entities) {
+        return StreamSupport.stream(entities.spliterator(), false)
+                .map(this::toRsDto)
+                .toList();
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/repository/ArtistRepository.java
+++ b/demo/src/main/java/com/example/demo/repository/ArtistRepository.java
@@ -0,0 +1,10 @@
+package com.example.demo.repository;
+
+import org.springframework.stereotype.Repository;
+
+import com.example.demo.entity.ArtistEntity;
+
+@Repository
+public class ArtistRepository extends MapRepository<ArtistEntity> {
+}
+
--- a/demo/src/main/java/com/example/demo/repository/CommonRepository.java
+++ b/demo/src/main/java/com/example/demo/repository/CommonRepository.java
@@ -0,0 +1,16 @@
+package com.example.demo.repository;
+
+import java.util.Optional;
+
+public interface CommonRepository<E, T> {
+    Iterable<E> findAll();
+
+    Optional<E> findById(T id);
+
+    E save(E entity);
+
+    void delete(E entity);
+
+    void deleteAll();
+}
+
--- a/demo/src/main/java/com/example/demo/repository/CountryRepository.java
+++ b/demo/src/main/java/com/example/demo/repository/CountryRepository.java
@@ -0,0 +1,10 @@
+package com.example.demo.repository;
+
+import org.springframework.stereotype.Repository;
+
+import com.example.demo.entity.CountryEntity;
+
+@Repository
+public class CountryRepository extends MapRepository<CountryEntity> {
+}
+
--- a/demo/src/main/java/com/example/demo/repository/EpochRepository.java
+++ b/demo/src/main/java/com/example/demo/repository/EpochRepository.java
@@ -0,0 +1,10 @@
+package com.example.demo.repository;
+
+import org.springframework.stereotype.Repository;
+
+import com.example.demo.entity.EpochEntity;
+
+@Repository
+public class EpochRepository extends MapRepository<EpochEntity> {
+}
+
--- a/demo/src/main/java/com/example/demo/repository/MapRepository.java
+++ b/demo/src/main/java/com/example/demo/repository/MapRepository.java
@@ -0,0 +1,69 @@
+package com.example.demo.repository;
+
+import java.util.Objects;
+import java.util.Optional;
+import java.util.concurrent.ConcurrentNavigableMap;
+import java.util.concurrent.ConcurrentSkipListMap;
+import java.util.concurrent.atomic.AtomicLong;
+
+import com.example.demo.entity.BaseEntity;
+
+public abstract class MapRepository<E extends BaseEntity> implements CommonRepository<E, Long> {
+    private final ConcurrentNavigableMap<Long, E> entities = new ConcurrentSkipListMap<>();
+    private final AtomicLong idGenerator = new AtomicLong(0L);
+
+    protected MapRepository() {
+    }
+
+    private boolean isNew(E entity) {
+        return Objects.isNull(entity.getId());
+    }
+
+    private E create(E entity) {
+        final Long lastId = idGenerator.incrementAndGet();
+        entity.setId(lastId);
+        entities.put(lastId, entity);
+        return entity;
+    }
+
+    private E update(E entity) {
+        if (findById(entity.getId()).isEmpty()) {
+            return null;
+        }
+        entities.put(entity.getId(), entity);
+        return entity;
+    }
+
+    @Override
+    public Iterable<E> findAll() {
+        return entities.values();
+    }
+
+    @Override
+    public Optional<E> findById(Long id) {
+        return Optional.ofNullable(entities.get(id));
+    }
+
+    @Override
+    public E save(E entity) {
+        if (isNew(entity)) {
+            return create(entity);
+        }
+        return update(entity);
+    }
+
+    @Override
+    public void delete(E entity) {
+        if (findById(entity.getId()).isEmpty()) {
+            return;
+        }
+        entities.remove(entity.getId());
+    }
+
+    @Override
+    public void deleteAll() {
+        entities.clear();
+        idGenerator.set(0L);
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/service/ArtistService.java
+++ b/demo/src/main/java/com/example/demo/service/ArtistService.java
@@ -0,0 +1,73 @@
+package com.example.demo.service;
+
+import java.util.List;
+
+import org.springframework.stereotype.Service;
+
+import com.example.demo.dto.ArtistRq;
+import com.example.demo.dto.ArtistRs;
+import com.example.demo.entity.ArtistEntity;
+import com.example.demo.entity.CountryEntity;
+import com.example.demo.entity.EpochEntity;
+import com.example.demo.error.NotFoundException;
+import com.example.demo.mapper.ArtistMapper;
+import com.example.demo.repository.ArtistRepository;
+
+@Service
+public class ArtistService {
+    private final ArtistRepository repository;
+    private final EpochService epochService;
+    private final CountryService countryService;
+    private final ArtistMapper mapper;
+
+    public ArtistService(ArtistRepository repository, EpochService epochService, 
+                        CountryService countryService, ArtistMapper mapper) {
+        this.repository = repository;
+        this.epochService = epochService;
+        this.countryService = countryService;
+        this.mapper = mapper;
+    }
+
+    public ArtistEntity getEntity(Long id) {
+        return repository.findById(id)
+                .orElseThrow(() -> new NotFoundException(ArtistEntity.class, id));
+    }
+
+    public List<ArtistRs> getAll() {
+        return mapper.toRsDtoList(repository.findAll());
+    }
+
+    public ArtistRs get(Long id) {
+        final ArtistEntity entity = getEntity(id);
+        return mapper.toRsDto(entity);
+    }
+
+    public ArtistRs create(ArtistRq dto) {
+        final EpochEntity epoch = epochService.getEntity(dto.getEpochId());
+        final CountryEntity country = countryService.getEntity(dto.getCountryId());
+        ArtistEntity entity = new ArtistEntity(
+                dto.getName(),
+                dto.getDescription(),
+                epoch,
+                country);
+        entity = repository.save(entity);
+        return mapper.toRsDto(entity);
+    }
+
+    public ArtistRs update(Long id, ArtistRq dto) {
+        ArtistEntity entity = getEntity(id);
+        entity.setName(dto.getName());
+        entity.setDescription(dto.getDescription());
+        entity.setEpoch(epochService.getEntity(dto.getEpochId()));
+        entity.setCountry(countryService.getEntity(dto.getCountryId()));
+        entity = repository.save(entity);
+        return mapper.toRsDto(entity);
+    }
+
+    public ArtistRs delete(Long id) {
+        final ArtistEntity entity = getEntity(id);
+        repository.delete(entity);
+        return mapper.toRsDto(entity);
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/service/CountryService.java
+++ b/demo/src/main/java/com/example/demo/service/CountryService.java
@@ -0,0 +1,57 @@
+package com.example.demo.service;
+
+import java.util.List;
+
+import org.springframework.stereotype.Service;
+
+import com.example.demo.dto.CountryRq;
+import com.example.demo.dto.CountryRs;
+import com.example.demo.entity.CountryEntity;
+import com.example.demo.error.NotFoundException;
+import com.example.demo.mapper.CountryMapper;
+import com.example.demo.repository.CountryRepository;
+
+@Service
+public class CountryService {
+    private final CountryRepository repository;
+    private final CountryMapper mapper;
+
+    public CountryService(CountryRepository repository, CountryMapper mapper) {
+        this.repository = repository;
+        this.mapper = mapper;
+    }
+
+    public CountryEntity getEntity(Long id) {
+        return repository.findById(id)
+                .orElseThrow(() -> new NotFoundException(CountryEntity.class, id));
+    }
+
+    public List<CountryRs> getAll() {
+        return mapper.toRsDtoList(repository.findAll());
+    }
+
+    public CountryRs get(Long id) {
+        final CountryEntity entity = getEntity(id);
+        return mapper.toRsDto(entity);
+    }
+
+    public CountryRs create(CountryRq dto) {
+        CountryEntity entity = new CountryEntity(dto.getName());
+        entity = repository.save(entity);
+        return mapper.toRsDto(entity);
+    }
+
+    public CountryRs update(Long id, CountryRq dto) {
+        CountryEntity entity = getEntity(id);
+        entity.setName(dto.getName());
+        entity = repository.save(entity);
+        return mapper.toRsDto(entity);
+    }
+
+    public CountryRs delete(Long id) {
+        final CountryEntity entity = getEntity(id);
+        repository.delete(entity);
+        return mapper.toRsDto(entity);
+    }
+}
+
--- a/demo/src/main/java/com/example/demo/service/EpochService.java
+++ b/demo/src/main/java/com/example/demo/service/EpochService.java
@@ -0,0 +1,57 @@
+package com.example.demo.service;
+
+import java.util.List;
+
+import org.springframework.stereotype.Service;
+
+import com.example.demo.dto.EpochRq;
+import com.example.demo.dto.EpochRs;
+import com.example.demo.entity.EpochEntity;
+import com.example.demo.error.NotFoundException;
+import com.example.demo.mapper.EpochMapper;
+import com.example.demo.repository.EpochRepository;
+
+@Service
+public class EpochService {
+    private final EpochRepository repository;
+    private final EpochMapper mapper;
+
+    public EpochService(EpochRepository repository, EpochMapper mapper) {
+        this.repository = repository;
+        this.mapper = mapper;
+    }
+
+    public EpochEntity getEntity(Long id) {
+        return repository.findById(id)
+                .orElseThrow(() -> new NotFoundException(EpochEntity.class, id));
+    }
+
+    public List<EpochRs> getAll() {
+        return mapper.toRsDtoList(repository.findAll());
+    }
+
+    public EpochRs get(Long id) {
+        final EpochEntity entity = getEntity(id);
+        return mapper.toRsDto(entity);
+    }
+
+    public EpochRs create(EpochRq dto) {
+        EpochEntity entity = new EpochEntity(dto.getName());
+        entity = repository.save(entity);
+        return mapper.toRsDto(entity);
+    }
+
+    public EpochRs update(Long id, EpochRq dto) {
+        EpochEntity entity = getEntity(id);
+        entity.setName(dto.getName());
+        entity = repository.save(entity);
+        return mapper.toRsDto(entity);
+    }
+
+    public EpochRs delete(Long id) {
+        final EpochEntity entity = getEntity(id);
+        repository.delete(entity);
+        return mapper.toRsDto(entity);
+    }
+}
+
--- a/demo/src/main/resources/application.properties
+++ b/demo/src/main/resources/application.properties
@@ -0,0 +1,4 @@
+spring.application.name=demo
+server.port=8080
+springdoc.api-docs.path=/api-docs
+springdoc.swagger-ui.path=/swagger-ui.html
--- a/demo/src/test/java/com/example/demo/DemoApplicationTests.java
+++ b/demo/src/test/java/com/example/demo/DemoApplicationTests.java
@@ -0,0 +1,13 @@
+package com.example.demo;
+
+import org.junit.jupiter.api.Test;
+import org.springframework.boot.test.context.SpringBootTest;
+
+@SpringBootTest
+class DemoApplicationTests {
+
+	@Test
+	void contextLoads() {
+	}
+
+}
--- a/demo/src/test/java/com/example/demo/service/ArtistServiceTests.java
+++ b/demo/src/test/java/com/example/demo/service/ArtistServiceTests.java
@@ -0,0 +1,100 @@
+package com.example.demo.service;
+
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.MethodOrderer.OrderAnnotation;
+import org.junit.jupiter.api.Order;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.TestMethodOrder;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+
+import com.example.demo.dto.ArtistRs;
+import com.example.demo.error.NotFoundException;
+import com.example.demo.mapper.ArtistMapper;
+
+@SpringBootTest
+@TestMethodOrder(OrderAnnotation.class)
+public class ArtistServiceTests {
+    @Autowired
+    private ArtistService service;
+    @Autowired
+    private EpochService epochService;
+    @Autowired
+    private CountryService countryService;
+    @Autowired
+    private ArtistMapper mapper;
+
+    @Test
+    void getTest() {
+        Assertions.assertThrows(NotFoundException.class, () -> service.get(0L));
+    }
+
+    @Test
+    @Order(1)
+    void createTest() {
+        // Создаем необходимые зависимости
+        final var epochRq1 = new com.example.demo.dto.EpochRq();
+        epochRq1.setName("1980-е");
+        final var epoch1 = epochService.create(epochRq1);
+        
+        final var epochRq2 = new com.example.demo.dto.EpochRq();
+        epochRq2.setName("1990-е");
+        final var epoch2 = epochService.create(epochRq2);
+        
+        final var countryRq1 = new com.example.demo.dto.CountryRq();
+        countryRq1.setName("Россия");
+        final var country1 = countryService.create(countryRq1);
+        
+        final var countryRq2 = new com.example.demo.dto.CountryRq();
+        countryRq2.setName("США");
+        final var country2 = countryService.create(countryRq2);
+
+        service.create(mapper.toRqDto("Artist 1", "Description 1", epoch1.getId(), country1.getId()));
+        service.create(mapper.toRqDto("Artist 2", "Description 2", epoch2.getId(), country2.getId()));
+        final ArtistRs last = service.create(mapper.toRqDto("Artist 3", "Description 3", epoch1.getId(), country1.getId()));
+
+        Assertions.assertEquals(3, service.getAll().size());
+
+        final ArtistRs cmpEntity = service.get(3L);
+        Assertions.assertEquals(last.getId(), cmpEntity.getId());
+        Assertions.assertEquals(last.getName(), cmpEntity.getName());
+    }
+
+    @Test
+    @Order(2)
+    void updateTest() {
+        final String test = "TEST ARTIST";
+        final ArtistRs entity = service.get(3L);
+        final String oldName = entity.getName();
+        // Используем эпоху и страну из созданных в createTest
+        final var epoch = entity.getEpoch();
+        final var country = entity.getCountry();
+        final ArtistRs newEntity = service.update(3L, mapper.toRqDto(test, "New Description", epoch.getId(), country.getId()));
+
+        Assertions.assertEquals(3, service.getAll().size());
+        Assertions.assertEquals(test, newEntity.getName());
+        Assertions.assertNotEquals(oldName, newEntity.getName());
+
+        final ArtistRs cmpEntity = service.get(3L);
+        Assertions.assertEquals(newEntity.getId(), cmpEntity.getId());
+        Assertions.assertEquals(newEntity.getName(), cmpEntity.getName());
+    }
+
+    @Test
+    @Order(3)
+    void deleteTest() {
+        service.delete(3L);
+        Assertions.assertEquals(2, service.getAll().size());
+
+        final ArtistRs last = service.get(2L);
+        Assertions.assertEquals(2L, last.getId());
+
+        // Используем эпоху и страну из существующего артиста
+        final var epoch = last.getEpoch();
+        final var country = last.getCountry();
+        final ArtistRs newEntity = service.create(mapper.toRqDto("Artist 4", "Description 4", epoch.getId(), country.getId()));
+        Assertions.assertEquals(3, service.getAll().size());
+        Assertions.assertEquals(4L, newEntity.getId());
+    }
+}
+
--- a/demo/src/test/java/com/example/demo/service/CountryServiceTests.java
+++ b/demo/src/test/java/com/example/demo/service/CountryServiceTests.java
@@ -0,0 +1,72 @@
+package com.example.demo.service;
+
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.MethodOrderer.OrderAnnotation;
+import org.junit.jupiter.api.Order;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.TestMethodOrder;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+
+import com.example.demo.dto.CountryRs;
+import com.example.demo.error.NotFoundException;
+import com.example.demo.mapper.CountryMapper;
+
+@SpringBootTest
+@TestMethodOrder(OrderAnnotation.class)
+public class CountryServiceTests {
+    @Autowired
+    private CountryService service;
+    @Autowired
+    private CountryMapper mapper;
+
+    @Test
+    void getTest() {
+        Assertions.assertThrows(NotFoundException.class, () -> service.get(0L));
+    }
+
+    @Test
+    @Order(1)
+    void createTest() {
+        service.create(mapper.toRqDto("Россия"));
+        service.create(mapper.toRqDto("США"));
+        final CountryRs last = service.create(mapper.toRqDto("Тайга"));
+
+        Assertions.assertEquals(3, service.getAll().size());
+
+        final CountryRs cmpEntity = service.get(3L);
+        Assertions.assertEquals(last.getId(), cmpEntity.getId());
+        Assertions.assertEquals(last.getName(), cmpEntity.getName());
+    }
+
+    @Test
+    @Order(2)
+    void updateTest() {
+        final String test = "TEST";
+        final CountryRs entity = service.get(3L);
+        final String oldName = entity.getName();
+        final CountryRs newEntity = service.update(3L, mapper.toRqDto(test));
+
+        Assertions.assertEquals(3, service.getAll().size());
+        Assertions.assertEquals(test, newEntity.getName());
+        Assertions.assertNotEquals(oldName, newEntity.getName());
+
+        final CountryRs cmpEntity = service.get(3L);
+        Assertions.assertEquals(newEntity.getId(), cmpEntity.getId());
+        Assertions.assertEquals(newEntity.getName(), cmpEntity.getName());
+    }
+
+    @Test
+    @Order(3)
+    void deleteTest() {
+        service.delete(3L);
+        Assertions.assertEquals(2, service.getAll().size());
+
+        final CountryRs last = service.get(2L);
+        Assertions.assertEquals(2L, last.getId());
+
+        final CountryRs newEntity = service.create(mapper.toRqDto("Германия"));
+        Assertions.assertEquals(3, service.getAll().size());
+        Assertions.assertEquals(4L, newEntity.getId());
+    }
+}
--- a/demo/src/test/java/com/example/demo/service/EpochServiceTests.java
+++ b/demo/src/test/java/com/example/demo/service/EpochServiceTests.java
@@ -0,0 +1,73 @@
+package com.example.demo.service;
+
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.MethodOrderer.OrderAnnotation;
+import org.junit.jupiter.api.Order;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.TestMethodOrder;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+
+import com.example.demo.dto.EpochRs;
+import com.example.demo.error.NotFoundException;
+import com.example.demo.mapper.EpochMapper;
+
+@SpringBootTest
+@TestMethodOrder(OrderAnnotation.class)
+public class EpochServiceTests {
+    @Autowired
+    private EpochService service;
+    @Autowired
+    private EpochMapper mapper;
+
+    @Test
+    void getTest() {
+        Assertions.assertThrows(NotFoundException.class, () -> service.get(0L));
+    }
+
+    @Test
+    @Order(1)
+    void createTest() {
+        service.create(mapper.toRqDto("1980-е"));
+        service.create(mapper.toRqDto("1990-е"));
+        final EpochRs last = service.create(mapper.toRqDto("2000-е"));
+
+        Assertions.assertEquals(3, service.getAll().size());
+
+        final EpochRs cmpEntity = service.get(3L);
+        Assertions.assertEquals(last.getId(), cmpEntity.getId());
+        Assertions.assertEquals(last.getName(), cmpEntity.getName());
+    }
+
+    @Test
+    @Order(2)
+    void updateTest() {
+        final String test = "TEST";
+        final EpochRs entity = service.get(3L);
+        final String oldName = entity.getName();
+        final EpochRs newEntity = service.update(3L, mapper.toRqDto(test));
+
+        Assertions.assertEquals(3, service.getAll().size());
+        Assertions.assertEquals(test, newEntity.getName());
+        Assertions.assertNotEquals(oldName, newEntity.getName());
+
+        final EpochRs cmpEntity = service.get(3L);
+        Assertions.assertEquals(newEntity.getId(), cmpEntity.getId());
+        Assertions.assertEquals(newEntity.getName(), cmpEntity.getName());
+    }
+
+    @Test
+    @Order(3)
+    void deleteTest() {
+        service.delete(3L);
+        Assertions.assertEquals(2, service.getAll().size());
+
+        final EpochRs last = service.get(2L);
+        Assertions.assertEquals(2L, last.getId());
+
+        final EpochRs newEntity = service.create(mapper.toRqDto("2010-е"));
+        Assertions.assertEquals(3, service.getAll().size());
+        Assertions.assertEquals(4L, newEntity.getId());
+    }
+}
+
--- a/grob.html
+++ b/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>
--- a/grobKaifIliBolshe.html
+++ b/grobKaifIliBolshe.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>
--- a/index.html
+++ b/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>
--- a/punkrock-react/.gitignore
+++ b/punkrock-react/.gitignore
@@ -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*
--- a/punkrock-react/README.md
+++ b/punkrock-react/README.md
@@ -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)
--- a/punkrock-react/package-lock.json
+++ b/punkrock-react/package-lock.json
--- a/punkrock-react/package.json
+++ b/punkrock-react/package.json
@@ -0,0 +1,46 @@
+{
+  "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"
+    ]
+  },
+  "devDependencies": {}
+}
--- a/punkrock-react/public/catalog.html
+++ b/punkrock-react/public/catalog.html
@@ -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>
--- a/punkrock-react/public/favicon.ico
+++ b/punkrock-react/public/favicon.ico
--- a/punkrock-react/public/grob.html
+++ b/punkrock-react/public/grob.html
@@ -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>
--- a/punkrock-react/public/grobKaifIliBolshe.html
+++ b/punkrock-react/public/grobKaifIliBolshe.html
@@ -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>
--- a/punkrock-react/public/index.html
+++ b/punkrock-react/public/index.html
@@ -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>
--- a/punkrock-react/public/logo192.png
+++ b/punkrock-react/public/logo192.png
--- a/punkrock-react/public/logo512.png
+++ b/punkrock-react/public/logo512.png
--- a/punkrock-react/public/manifest.json
+++ b/punkrock-react/public/manifest.json
@@ -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"
+}
--- a/punkrock-react/public/res/garajnipunk.jpg
+++ b/punkrock-react/public/res/garajnipunk.jpg
--- a/punkrock-react/public/res/grob.jpg
+++ b/punkrock-react/public/res/grob.jpg
--- a/punkrock-react/public/res/logo.png
+++ b/punkrock-react/public/res/logo.png
--- a/punkrock-react/public/res/nekrofilia.jpg
+++ b/punkrock-react/public/res/nekrofilia.jpg
--- a/punkrock-react/public/res/pankrock.jpg
+++ b/punkrock-react/public/res/pankrock.jpg
--- a/punkrock-react/public/res/psy.png
+++ b/punkrock-react/public/res/psy.png
--- a/punkrock-react/public/res/vk.png
+++ b/punkrock-react/public/res/vk.png
--- a/punkrock-react/public/robots.txt
+++ b/punkrock-react/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/punkrock-react/public/styles.css
+++ b/punkrock-react/public/styles.css
@@ -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;
+  }
+}
--- a/punkrock-react/punkrock.html
+++ b/punkrock-react/punkrock.html
@@ -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" onsubmit="addArtist(); return false;">
+                    <!-- Название группы -->
+                    <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="number" id="editArtistId" style="display: none;">
+            </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" onclick="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>
--- a/punkrock-react/src/App.css
+++ b/punkrock-react/src/App.css
@@ -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);
+  }
+}
--- a/punkrock-react/src/App.js
+++ b/punkrock-react/src/App.js
@@ -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;
--- a/punkrock-react/src/App.test.js
+++ b/punkrock-react/src/App.test.js
@@ -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();
+});
--- a/punkrock-react/src/StaticPage.jsx
+++ b/punkrock-react/src/StaticPage.jsx
@@ -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;
--- a/punkrock-react/src/components/ArtistCard.jsx
+++ b/punkrock-react/src/components/ArtistCard.jsx
@@ -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;
--- a/punkrock-react/src/components/ArtistForm.jsx
+++ b/punkrock-react/src/components/ArtistForm.jsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+
+const ArtistForm = ({ countries = [], epochs = [], onSubmit, artist }) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    epochId: '',
+    countryId: ''
+  });
+
+  useEffect(() => {
+    console.log('ArtistForm - Received countries:', countries);
+    console.log('ArtistForm - Received epochs:', epochs);
+    console.log('ArtistForm - Countries array length:', countries?.length);
+    console.log('ArtistForm - Epochs array length:', epochs?.length);
+    if (artist) {
+      setFormData({
+        name: artist.name,
+        description: artist.description,
+        epochId: artist.epoch?.id ? String(artist.epoch.id) : '',
+        countryId: artist.country?.id ? String(artist.country.id) : ''
+      });
+    } 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: formData.epochId ? Number(formData.epochId) : null,
+      countryId: formData.countryId ? Number(formData.countryId) : null
+    });
+    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 && epochs.length > 0 ? (
+                epochs.map(epoch => (
+                  <option key={epoch.id} value={String(epoch.id)}>{epoch.name}</option>
+                ))
+              ) : (
+                <option disabled>Загрузка эпох... ({epochs?.length || 0} загружено)</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 && countries.length > 0 ? (
+                countries.map(country => (
+                  <option key={country.id} value={String(country.id)}>{country.name}</option>
+                ))
+              ) : (
+                <option disabled>Загрузка стран... ({countries?.length || 0} загружено)</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;
--- a/punkrock-react/src/components/ArtistList.jsx
+++ b/punkrock-react/src/components/ArtistList.jsx
@@ -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;
--- a/punkrock-react/src/components/Footer.jsx
+++ b/punkrock-react/src/components/Footer.jsx
@@ -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;
--- a/punkrock-react/src/components/Header.jsx
+++ b/punkrock-react/src/components/Header.jsx
@@ -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;
--- a/punkrock-react/src/css/styles.css
+++ b/punkrock-react/src/css/styles.css
@@ -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;
+  }
+}
--- a/punkrock-react/src/index.css
+++ b/punkrock-react/src/index.css
@@ -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;
+}
--- a/punkrock-react/src/index.js
+++ b/punkrock-react/src/index.js
@@ -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">');
+}
--- a/punkrock-react/src/js/main.js
+++ b/punkrock-react/src/js/main.js
@@ -0,0 +1,208 @@
+// Основной JavaScript код для работы с исполнителями
+const API_URL = 'http://localhost:8080/api';
+
+// Загрузка данных при загрузке страницы
+document.addEventListener('DOMContentLoaded', function() {
+    loadArtists();
+    loadCountries();
+    loadEpochs();
+});
+
+// Загрузка исполнителей
+async function loadArtists() {
+    try {
+        const response = await fetch(`${API_URL}/artists`);
+        const artists = await response.json();
+        displayArtists(artists);
+    } catch (error) {
+        console.error('Ошибка загрузки исполнителей:', error);
+    }
+}
+
+// Загрузка стран
+async function loadCountries() {
+    try {
+        const response = await fetch(`${API_URL}/countries`);
+        const countries = await response.json();
+        console.log('Загружены страны:', countries);
+    } catch (error) {
+        console.error('Ошибка загрузки стран:', error);
+    }
+}
+
+// Загрузка эпох
+async function loadEpochs() {
+    try {
+        const response = await fetch(`${API_URL}/epochs`);
+        const epochs = await response.json();
+        console.log('Загружены эпохи:', epochs);
+    } catch (error) {
+        console.error('Ошибка загрузки эпох:', error);
+    }
+}
+
+// Отображение исполнителей
+function displayArtists(artists) {
+    const container = document.getElementById('artistsContainer');
+    container.innerHTML = '';
+    
+    artists.forEach(artist => {
+        const artistCard = createArtistCard(artist);
+        container.appendChild(artistCard);
+    });
+}
+
+// Создание карточки исполнителя
+function createArtistCard(artist) {
+    const col = document.createElement('div');
+    col.className = 'col-md-4 mb-4';
+    
+    col.innerHTML = `
+        <div class="card bg-dark border-punk">
+            <div class="card-body">
+                <h5 class="card-title text-punk">${artist.name}</h5>
+                <p class="card-text text-light">${artist.description || 'Нет описания'}</p>
+                <p class="card-text text-light"><small>Эпоха ID: ${artist.epochId || 'Не указана'}</small></p>
+                <p class="card-text text-light"><small>Страна ID: ${artist.countryId || 'Не указана'}</small></p>
+                <button class="btn btn-outline-primary edit-btn me-2" onclick="editArtist(${artist.id})">
+                    <i class="bi bi-pencil-square"></i> Изменить
+                </button>
+                <button class="btn btn-outline-danger delete-btn" onclick="deleteArtist(${artist.id})">
+                    <i class="bi bi-trash"></i> Удалить
+                </button>
+            </div>
+        </div>
+    `;
+    
+    return col;
+}
+
+// Редактирование исполнителя
+function editArtist(id) {
+    // ID теперь числовой
+    console.log('Редактирование исполнителя с ID:', id, 'тип:', typeof id);
+    
+    // Заполняем форму данными исполнителя
+    document.getElementById('editArtistId').value = id;
+    
+    // Здесь можно загрузить данные исполнителя и заполнить форму
+    // Пока что просто открываем модальное окно
+    const modal = new bootstrap.Modal(document.getElementById('editArtistModal'));
+    modal.show();
+}
+
+// Удаление исполнителя
+async function deleteArtist(id) {
+    // ID теперь числовой
+    console.log('Удаление исполнителя с ID:', id, 'тип:', typeof id);
+    
+    if (confirm('Удалить исполнителя?')) {
+        try {
+            const response = await fetch(`${API_URL}/artists/${id}`, {
+                method: 'DELETE'
+            });
+            
+            if (response.ok) {
+                loadArtists(); // Перезагружаем список
+            } else {
+                alert('Ошибка удаления исполнителя');
+            }
+        } catch (error) {
+            console.error('Ошибка удаления:', error);
+            alert('Ошибка удаления исполнителя');
+        }
+    }
+}
+
+// Сохранение изменений исполнителя
+async function saveEditArtist() {
+    const id = parseInt(document.getElementById('editArtistId').value);
+    const name = document.getElementById('editArtistName').value;
+    const description = document.getElementById('editDescription').value;
+    const year = document.getElementById('editArtistYear').value;
+    const country = document.getElementById('editArtistCountry').value;
+    
+    console.log('Сохранение исполнителя с ID:', id, 'тип:', typeof id);
+    
+    if (!name || !description) {
+        alert('Все поля обязательны!');
+        return;
+    }
+    
+    try {
+        const response = await fetch(`${API_URL}/artists/${id}`, {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                name: name,
+                description: description,
+                epochId: 1, // Пока что статическое значение
+                countryId: 1 // Пока что статическое значение
+            })
+        });
+        
+        if (response.ok) {
+            const modal = bootstrap.Modal.getInstance(document.getElementById('editArtistModal'));
+            modal.hide();
+            loadArtists(); // Перезагружаем список
+        } else {
+            alert('Ошибка сохранения исполнителя');
+        }
+    } catch (error) {
+        console.error('Ошибка сохранения:', error);
+        alert('Ошибка сохранения исполнителя');
+    }
+}
+
+// Добавление нового исполнителя
+async function addArtist() {
+    const name = document.getElementById('artistName').value;
+    const description = document.getElementById('description').value;
+    const year = document.getElementById('artistYear').value;
+    const country = document.getElementById('artistCountry').value;
+    
+    if (!name || !description) {
+        alert('Все поля обязательны!');
+        return;
+    }
+    
+    try {
+        const response = await fetch(`${API_URL}/artists`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                name: name,
+                description: description,
+                epochId: 1, // Пока что статическое значение
+                countryId: 1 // Пока что статическое значение
+            })
+        });
+        
+        if (response.ok) {
+            document.getElementById('artistForm').reset();
+            loadArtists(); // Перезагружаем список
+        } else {
+            alert('Ошибка добавления исполнителя');
+        }
+    } catch (error) {
+        console.error('Ошибка добавления:', error);
+        alert('Ошибка добавления исполнителя');
+    }
+}
+
+// Привязка событий
+document.addEventListener('DOMContentLoaded', function() {
+    // Кнопка сохранения редактирования
+    document.getElementById('saveEditArtist').addEventListener('click', saveEditArtist);
+    
+    // Кнопка добавления исполнителя
+    document.getElementById('artistForm').addEventListener('submit', function(e) {
+        e.preventDefault();
+        addArtist();
+    });
+});
+
--- a/punkrock-react/src/logo.svg
+++ b/punkrock-react/src/logo.svg
@@ -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>
--- a/punkrock-react/src/pages/PunkRockPage.jsx
+++ b/punkrock-react/src/pages/PunkRockPage.jsx
@@ -0,0 +1,156 @@
+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);
+        console.log('Countries length:', countriesData?.length);
+        console.log('Epochs length:', epochsData?.length);
+        setArtists(artistsData || []);
+        setCountries(countriesData || []);
+        setEpochs(epochsData || []);
+        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 => {
+        return [...prevArtists, newArtist].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 => {
+        return prevArtists.map(a => (a.id === updatedArtist.id ? updatedArtist : 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 sortedArtists = artists.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={sortedArtists} 
+                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;
--- a/punkrock-react/src/reportWebVitals.js
+++ b/punkrock-react/src/reportWebVitals.js
@@ -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;
--- a/punkrock-react/src/services/api.js
+++ b/punkrock-react/src/services/api.js
@@ -0,0 +1,47 @@
+const API_URL = 'http://localhost:8080/api';
+
+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: 'PUT',
+    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;
+};
--- a/punkrock-react/src/setupTests.js
+++ b/punkrock-react/src/setupTests.js
@@ -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';
--- a/punkrock-react/src/styles.css
+++ b/punkrock-react/src/styles.css
@@ -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;
+  }
+}
--- a/punkrock.html
+++ b/punkrock.html
@@ -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>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
maxim	ab929504e1	сдал	2025-11-15 09:29:01 +04:00
nezui1	8ccd325ba9	с отчетами	2025-11-15 00:53:15 +04:00
maxim	c7dc979193	слава богу она сделалась	2025-11-12 18:29:47 +04:00
maxim	17014bcb67	первая лаба	2025-09-19 18:00:01 +04:00
maxim	4a409b63d7	первая лаба(2)	2025-09-05 22:29:19 +04:00
nezui1	12007bd3ea	первая лаба	2025-09-05 21:46:02 +04:00
maxim	743b7c1c6a	отчет	2025-05-28 22:01:52 +04:00
maxim	499b51d2e1	лаба + отчет	2025-05-28 20:58:31 +04:00
maxim	51875bcc5e	лаба + отчет	2025-05-28 20:22:51 +04:00
maxim	51545137be	лаба + отчет	2025-05-28 19:45:47 +04:00
maxim	0dd5c03d7d	вторая лаба + отчет	2025-05-28 19:30:55 +04:00
				`@@ -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>