первая лаба

первая лаба(2)
первая лаба
2025-09-19 18:00:01 +04:00 · 2025-09-05 22:29:19 +04:00 · 2025-09-05 21:46:02 +04:00 · 2025-05-28 22:01:52 +04:00 · 2025-05-28 20:58:31 +04:00 · 2025-05-28 20:22:51 +04:00
81 changed files with 21271 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/LabWork5Report.docx
+++ b/LabWork5Report.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,30 @@
+plugins {
+	id 'java'
+	id 'org.springframework.boot' version '3.2.0'
+	id 'io.spring.dependency-management' version '1.1.4'
+}
+
+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.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/CorsConfig.java
+++ b/demo/src/main/java/com/example/demo/config/CorsConfig.java
@@ -0,0 +1,26 @@
+package com.example.demo.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.web.cors.CorsConfiguration;
+import org.springframework.web.cors.CorsConfigurationSource;
+import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
+
+import java.util.Arrays;
+
+@Configuration
+public class CorsConfig {
+
+    @Bean
+    public CorsConfigurationSource corsConfigurationSource() {
+        CorsConfiguration configuration = new CorsConfiguration();
+        configuration.setAllowedOriginPatterns(Arrays.asList("*"));
+        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"));
+        configuration.setAllowedHeaders(Arrays.asList("*"));
+        configuration.setAllowCredentials(true);
+        
+        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
+        source.registerCorsConfiguration("/**", configuration);
+        return source;
+    }
+}
--- 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/controller/ArtistController.java
+++ b/demo/src/main/java/com/example/demo/controller/ArtistController.java
@@ -0,0 +1,72 @@
+package com.example.demo.controller;
+
+import com.example.demo.dto.ArtistDto;
+import org.springframework.web.bind.annotation.*;
+import java.util.*;
+import java.util.concurrent.atomic.AtomicInteger;
+
+@RestController
+@RequestMapping("/api")
+@CrossOrigin(origins = "*")
+public class ArtistController {
+    
+    private final Map<Integer, ArtistDto> artists = new LinkedHashMap<>();
+    private final AtomicInteger idCounter = new AtomicInteger(1);
+
+    public ArtistController() {}
+
+    @GetMapping("/artists")
+    public List<ArtistDto> getAllArtists() {
+        return new ArrayList<>(artists.values());
+    }
+
+    @GetMapping("/artists/{id}")
+    public ArtistDto getArtistById(@PathVariable Integer id) {
+        return artists.get(id);
+    }
+
+    @PostMapping("/artists")
+    public ArtistDto createArtist(@RequestBody ArtistDto artist) {
+        Integer newId = idCounter.getAndIncrement();
+        artist.setId(newId);
+        artists.put(newId, artist);
+        return artist;
+    }
+
+    @PutMapping("/artists/{id}")
+    public ArtistDto updateArtist(@PathVariable Integer id, @RequestBody ArtistDto artist) {
+        if (artists.containsKey(id)) {
+            artist.setId(id);
+            artists.put(id, artist);
+            return artist;
+        }
+        return null;
+    }
+
+    @PatchMapping("/artists/{id}")
+    public ArtistDto patchArtist(@PathVariable Integer id, @RequestBody Map<String, Object> updates) {
+        ArtistDto existingArtist = artists.get(id);
+        if (existingArtist != null) {
+            if (updates.containsKey("name")) {
+                existingArtist.setName((String) updates.get("name"));
+            }
+            if (updates.containsKey("description")) {
+                existingArtist.setDescription((String) updates.get("description"));
+            }
+            if (updates.containsKey("epochId")) {
+                existingArtist.setEpochId((Integer) updates.get("epochId"));
+            }
+            if (updates.containsKey("countryId")) {
+                existingArtist.setCountryId((Integer) updates.get("countryId"));
+            }
+            artists.put(id, existingArtist);
+            return existingArtist;
+        }
+        return null;
+    }
+
+    @DeleteMapping("/artists/{id}")
+    public boolean deleteArtist(@PathVariable Integer id) {
+        return artists.remove(id) != null;
+    }
+}
--- 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,68 @@
+package com.example.demo.controller;
+
+import com.example.demo.dto.CountryDto;
+import org.springframework.web.bind.annotation.*;
+import java.util.*;
+import java.util.concurrent.atomic.AtomicInteger;
+
+@RestController
+@RequestMapping("/api")
+@CrossOrigin(origins = "*")
+public class CountryController {
+    
+    private final Map<Integer, CountryDto> countries = new LinkedHashMap<>();
+    private final AtomicInteger idCounter = new AtomicInteger(1);
+
+    public CountryController() {
+
+        countries.put(1, new CountryDto(1, "Россия"));
+        countries.put(2, new CountryDto(2, "США"));
+        countries.put(3, new CountryDto(3, "Тайга"));
+    }
+
+    @GetMapping("/countries")
+    public List<CountryDto> getAllCountries() {
+        return new ArrayList<>(countries.values());
+    }
+
+    @GetMapping("/countries/{id}")
+    public CountryDto getCountryById(@PathVariable Integer id) {
+        return countries.get(id);
+    }
+
+    @PostMapping("/countries")
+    public CountryDto createCountry(@RequestBody CountryDto country) {
+        Integer newId = idCounter.getAndIncrement();
+        country.setId(newId);
+        countries.put(newId, country);
+        return country;
+    }
+
+    @PutMapping("/countries/{id}")
+    public CountryDto updateCountry(@PathVariable Integer id, @RequestBody CountryDto country) {
+        if (countries.containsKey(id)) {
+            country.setId(id);
+            countries.put(id, country);
+            return country;
+        }
+        return null;
+    }
+
+    @PatchMapping("/countries/{id}")
+    public CountryDto patchCountry(@PathVariable Integer id, @RequestBody Map<String, Object> updates) {
+        CountryDto existingCountry = countries.get(id);
+        if (existingCountry != null) {
+            if (updates.containsKey("name")) {
+                existingCountry.setName((String) updates.get("name"));
+            }
+            countries.put(id, existingCountry);
+            return existingCountry;
+        }
+        return null;
+    }
+
+    @DeleteMapping("/countries/{id}")
+    public boolean deleteCountry(@PathVariable Integer id) {
+        return countries.remove(id) != null;
+    }
+}
--- 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,66 @@
+package com.example.demo.controller;
+
+import com.example.demo.dto.EpochDto;
+import org.springframework.web.bind.annotation.*;
+import java.util.*;
+import java.util.concurrent.atomic.AtomicInteger;
+
+@RestController
+@RequestMapping("/api")
+@CrossOrigin(origins = "*")
+public class EpochController {
+    
+    private final Map<Integer, EpochDto> epochs = new LinkedHashMap<>();
+    private final AtomicInteger idCounter = new AtomicInteger(1);
+
+    public EpochController() {
+        epochs.put(1, new EpochDto(1, "1980-е"));
+        epochs.put(2, new EpochDto(2, "1990-е"));
+    }
+
+    @GetMapping("/epochs")
+    public List<EpochDto> getAllEpochs() {
+        return new ArrayList<>(epochs.values());
+    }
+
+    @GetMapping("/epochs/{id}")
+    public EpochDto getEpochById(@PathVariable Integer id) {
+        return epochs.get(id);
+    }
+
+    @PostMapping("/epochs")
+    public EpochDto createEpoch(@RequestBody EpochDto epoch) {
+        Integer newId = idCounter.getAndIncrement();
+        epoch.setId(newId);
+        epochs.put(newId, epoch);
+        return epoch;
+    }
+
+    @PutMapping("/epochs/{id}")
+    public EpochDto updateEpoch(@PathVariable Integer id, @RequestBody EpochDto epoch) {
+        if (epochs.containsKey(id)) {
+            epoch.setId(id);
+            epochs.put(id, epoch);
+            return epoch;
+        }
+        return null;
+    }
+
+    @PatchMapping("/epochs/{id}")
+    public EpochDto patchEpoch(@PathVariable Integer id, @RequestBody Map<String, Object> updates) {
+        EpochDto existingEpoch = epochs.get(id);
+        if (existingEpoch != null) {
+            if (updates.containsKey("name")) {
+                existingEpoch.setName((String) updates.get("name"));
+            }
+            epochs.put(id, existingEpoch);
+            return existingEpoch;
+        }
+        return null;
+    }
+
+    @DeleteMapping("/epochs/{id}")
+    public boolean deleteEpoch(@PathVariable Integer id) {
+        return epochs.remove(id) != null;
+    }
+}
--- 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/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/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/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/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,145 @@
+import React, { useState, useEffect } from 'react';
+
+const ArtistForm = ({ countries = [], epochs = [], onSubmit, artist }) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    epochId: '',
+    countryId: ''
+  });
+
+  useEffect(() => {
+    console.log('Received countries:', countries);
+    console.log('Received epochs:', epochs);
+    if (artist) {
+      setFormData({
+        name: artist.name,
+        description: artist.description,
+        epochId: artist.epoch?.id || artist.epochId || '',
+        countryId: artist.country?.id || artist.countryId || ''
+      });
+    } else {
+      setFormData({
+        name: '',
+        description: '',
+        epochId: '',
+        countryId: ''
+      });
+    }
+  }, [artist, countries, epochs]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!formData.name || !formData.description || !formData.epochId || !formData.countryId) {
+      alert('Все поля обязательны!');
+      return;
+    }
+    onSubmit({
+      name: formData.name.trim(),
+      description: formData.description.trim(),
+      epochId: parseInt(formData.epochId),
+      countryId: parseInt(formData.countryId)
+    });
+    if (!artist) {
+      setFormData({
+        name: '',
+        description: '',
+        epochId: '',
+        countryId: ''
+      });
+    }
+  };
+
+  return (
+    <div className="card bg-dark border-punk">
+      <div className="card-body">
+        <h3 className="text-punk mb-4">
+          <i className={`bi ${artist ? 'bi-pencil-square' : 'bi-person-plus'}`}></i> 
+          {artist ? 'Редактировать исполнителя' : 'Добавить исполнителя'}
+        </h3>
+        
+        <form onSubmit={handleSubmit}>
+          <div className="mb-3">
+            <label className="form-label text-light">Название группы</label>
+            <input 
+              type="text" 
+              className="form-control bg-dark text-light border-punk" 
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          
+          <div className="mb-3">
+            <label className="form-label text-light">Описание</label>
+            <textarea 
+              className="form-control bg-dark text-light border-punk" 
+              name="description"
+              value={formData.description}
+              onChange={handleChange}
+              required
+            />
+          </div>
+          
+          <div className="mb-3">
+            <label className="form-label text-light">Эпоха</label>
+            <select 
+              className="form-select bg-dark text-light border-punk" 
+              name="epochId"
+              value={formData.epochId}
+              onChange={handleChange}
+              required
+            >
+              <option value="">Выберите эпоху</option>
+              {epochs.length > 0 ? (
+                epochs.map(epoch => (
+                  <option key={epoch.id} value={epoch.id}>{epoch.name}</option>
+                ))
+              ) : (
+                <option disabled>Нет данных</option>
+              )}
+            </select>
+          </div>
+          
+          <div className="mb-3">
+            <label className="form-label text-light">Страна</label>
+            <select 
+              className="form-select bg-dark text-light border-punk" 
+              name="countryId"
+              value={formData.countryId}
+              onChange={handleChange}
+              required
+            >
+              <option value="">Выберите страну</option>
+              {countries.length > 0 ? (
+                countries.map(country => (
+                  <option key={country.id} value={country.id}>{country.name}</option>
+                ))
+              ) : (
+                <option disabled>Нет данных</option>
+              )}
+            </select>
+          </div>
+          
+          <button type="submit" className="btn btn-punk mt-3">
+            <i className={`bi ${artist ? 'bi-save' : 'bi-plus-circle'}`}></i> 
+            {artist ? 'Сохранить изменения' : 'Добавить исполнителя'}
+          </button>
+          
+          
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ArtistForm;
--- 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,174 @@
+import React, { useState, useEffect } from 'react';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import ArtistList from '../components/ArtistList';
+import ArtistForm from '../components/ArtistForm';
+import { getArtists, getCountries, getEpochs, createArtist, updateArtist, deleteArtist } from '../services/api';
+
+const PunkRockPage = () => {
+  const [artists, setArtists] = useState([]);
+  const [countries, setCountries] = useState([]);
+  const [epochs, setEpochs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [editingArtist, setEditingArtist] = useState(null);
+  const [sortDirection, setSortDirection] = useState('asc'); // 'asc' для А-Я, 'desc' для Я-А
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [artistsData, countriesData, epochsData] = await Promise.all([
+          getArtists(),
+          getCountries(),
+          getEpochs()
+        ]);
+        console.log('Fetched Artists:', artistsData);
+        console.log('Fetched Countries:', countriesData);
+        console.log('Fetched Epochs:', epochsData);
+        setArtists(artistsData);
+        setCountries(countriesData.map(country => ({
+          ...country,
+          id: parseInt(country.id)
+        })));
+        setEpochs(epochsData.map(epoch => ({
+          ...epoch,
+          id: parseInt(epoch.id)
+        })));
+        setLoading(false);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  const handleAddArtist = async (artistData) => {
+    try {
+      // Проверка уникальности имени
+      const isDuplicate = artists.some(artist => artist.name.toLowerCase() === artistData.name.toLowerCase());
+      if (isDuplicate) {
+        alert('Исполнитель с таким именем уже существует!');
+        return;
+      }
+
+      const newArtist = await createArtist(artistData);
+      console.log('Added Artist:', newArtist);
+      setArtists(prevArtists => {
+        const enrichedArtist = {
+          ...newArtist,
+          epoch: epochs.find(epoch => epoch.id === parseInt(newArtist.epochId)),
+          country: countries.find(country => country.id === parseInt(newArtist.countryId))
+        };
+        return [...prevArtists, enrichedArtist].sort((a, b) => 
+          sortDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
+        );
+      });
+    } catch (error) {
+      console.error('Error adding artist:', error);
+      throw error;
+    }
+  };
+
+  const handleUpdateArtist = async (artistData) => {
+    try {
+      // Проверка уникальности имени (кроме текущего исполнителя)
+      const isDuplicate = artists.some(artist => 
+        artist.name.toLowerCase() === artistData.name.toLowerCase() && artist.id !== editingArtist.id
+      );
+      if (isDuplicate) {
+        alert('Исполнитель с таким именем уже существует!');
+        return;
+      }
+
+      const updatedArtist = await updateArtist(editingArtist.id, artistData);
+      console.log('Updated Artist:', updatedArtist);
+      setArtists(prevArtists => {
+        const enrichedArtist = {
+          ...updatedArtist,
+          epoch: epochs.find(epoch => epoch.id === parseInt(updatedArtist.epochId)),
+          country: countries.find(country => country.id === parseInt(updatedArtist.countryId))
+        };
+        return prevArtists.map(a => (a.id === updatedArtist.id ? enrichedArtist : a))
+          .sort((a, b) => 
+            sortDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
+          );
+      });
+      setEditingArtist(null);
+    } catch (error) {
+      console.error('Error updating artist:', error);
+      throw error;
+    }
+  };
+
+  const handleDeleteArtist = async (id) => {
+    try {
+      await deleteArtist(id);
+      setArtists(artists.filter(artist => artist.id !== id)
+        .sort((a, b) => 
+          sortDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
+        ));
+    } catch (error) {
+      console.error('Error deleting artist:', error);
+      throw error;
+    }
+  };
+
+  const toggleSortDirection = () => {
+    setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
+  };
+
+  if (loading) {
+    return <div className="text-center text-punk my-5">Загрузка...</div>;
+  }
+
+  const enrichedArtists = artists.map(artist => ({
+    ...artist,
+    epoch: epochs.find(epoch => epoch.id === parseInt(artist.epochId)),
+    country: countries.find(country => country.id === parseInt(artist.countryId))
+  })).sort((a, b) => 
+    sortDirection === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
+  );
+
+  return (
+    <>
+      <Header />
+      <main className="container-fluid my-5 flex-grow-1">
+        <div className="container py-4">
+          <div className="card bg-dark border-punk mb-4">
+            <div className="card-body">
+              <h3 className="text-punk mb-3">
+                <i className="bi bi-people-fill"></i> Перечень исполнителей панк-рока
+              </h3>
+              <p className="lead text-light">
+                Список культовых групп жанра
+              </p>
+              <button 
+                className="btn btn-outline-secondary mb-3" 
+                onClick={toggleSortDirection}
+              >
+                Сортировать {sortDirection === 'asc' ? 'А-Я' : 'Я-А'}
+              </button>
+              <ArtistList 
+                artists={enrichedArtists} 
+                onEdit={setEditingArtist} 
+                onDelete={handleDeleteArtist} 
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="container my-5">
+          <ArtistForm 
+            countries={countries} 
+            epochs={epochs} 
+            onSubmit={editingArtist ? handleUpdateArtist : handleAddArtist} 
+            artist={editingArtist} 
+          />
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default PunkRockPage;
--- 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: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(artist)
+  });
+  if (!response.ok) throw new Error('Ошибка обновления исполнителя');
+  return await response.json();
+};
+
+export const deleteArtist = async (id) => {
+  const response = await fetch(`${API_URL}/artists/${id}`, {
+    method: 'DELETE'
+  });
+  if (!response.ok) throw new Error('Ошибка удаления исполнителя');
+  return true;
+};
--- 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/res/garajnipunk.jpg
+++ b/res/garajnipunk.jpg
--- a/res/grob.jpg
+++ b/res/grob.jpg
--- a/res/nekrofilia.jpg
+++ b/res/nekrofilia.jpg
--- a/res/pankrock.jpg
+++ b/res/pankrock.jpg
--- a/res/psy.png
+++ b/res/psy.png
--- a/styles.css
+++ b/styles.css
@@ -1,121 +0,0 @@
-body{
-    background-color: #474444;
-    color: white;
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    font-size: medium;
-}
-a{
-    color: aliceblue;
-    text-decoration: none;
-    font-size: 15pt;
-}
-a:hover{
-    color:lightblue;
-}
-img{
-    display: block;
-    margin: 0 auto;
-}
-.description{
-    font-size: 20pt;
-}
-.reviews{
-    background-color: rgb(96, 89, 89);
-    margin: 15pt;
-    font-size: 20pt;
-}
-
-.catalog{
-    margin: 10pt;
-}
-.text{
-    text-align: center;
-}
-.text li{
-    list-style: none; 
-}
-.descriptionForSong{
-    font-size: 20pt;
-    background-color: beige;
-    color: black;
-}
-.punk-list {
-    list-style: none; 
-    padding: 0;
-    margin: 0;
-    display: flex; 
-    gap: 20px; 
-}
-
-.punk-list li {
-    display: inline-block; 
-}
-
-.item {
-    display: flex;
-    flex-direction: column;
-    align-items: center; 
-    text-align: center; 
-}
-
-.item img {
-    margin-bottom: 10px;
-}
-
-.list {
-    font-size: 17pt;
-    color: black;
-}
-.autors {
-    list-style: none;
-}
-.main{
-    text-align: center;
-    
-}
-.main li{
-    list-style: none;
-    margin: 15pt;
-    border-width: 5pt;
-    padding-bottom: 1pt;
-    border-color: aliceblue;
-    border: 1pt solid white;
-}
-
-
-footer{
-    text-align: center;
-    background-color: grey;
-}
-.header {
-    display: flex;
-    justify-content: space-between; /* Логотип и навигация по краям */
-    align-items: center;           /* Выравнивание по вертикали */
-    background-color: #333;        /* Цвет фона */
-    padding: 10px 20px;            /* Отступы внутри шапки */
-    color: white;                  /* Цвет текста */
-}
-
-
-.logo img {
-    height: 50px; 
-}
-
-
-.nav ul {
-    list-style: none; 
-    margin: 0;
-    padding: 0;
-    display: flex;
-    gap: 20px; 
-}
-
-.nav a {
-    color: white; 
-    text-decoration: none;
-    font-size: 18px;
-}
-
-.nav a:hover {
-    text-decoration: underline;
-}
--- a/~$bWork1Report.docx
+++ b/~$bWork1Report.docx
Author	SHA1	Message	Date
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>