lab

2025-11-29 04:18:20 +04:00
parent 3960c0d557
commit 91de0ee0c0
37 changed files with 663 additions and 284 deletions
--- a/LabWork4Report.docx
+++ b/LabWork4Report.docx
--- a/demo/Configure
+++ b/demo/Configure
--- a/demo/Frontend
+++ b/demo/Frontend
--- a/demo/Get
+++ b/demo/Get
@@ -0,0 +1 @@
+<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>⨬<EFBFBD><EFBFBD> <20><>ࠬ<EFBFBD><E0A0AC><EFBFBD>: //help.gradle.org.
--- a/demo/Run
+++ b/demo/Run
--- a/demo/build.front.gradle
+++ b/demo/build.front.gradle
@@ -3,7 +3,7 @@ apply plugin: "com.github.node-gradle.node"
 logger.quiet("Configure front builder")

 ext {
-    frontDir = file("${project.projectDir}/punkrock-react")
+    frontDir = file("${project.projectDir}/../punkrock-react")
    staticDir = file("${project.projectDir}/src/main/resources/static")
    if (!frontDir.exists()) {
        throw new GradleException("Frontend app directory is not exists")
--- a/demo/data.mv.db
+++ b/demo/data.mv.db
--- a/demo/gradlew
+++ b/demo/gradlew
@@ -1,251 +0,0 @@
-#!/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/src/main/resources/static/asset-manifest.json
+++ b/demo/src/main/resources/static/asset-manifest.json
@@ -0,0 +1,15 @@
+{
+  "files": {
+    "main.css": "/punkrock/static/css/main.87b4f72f.css",
+    "main.js": "/punkrock/static/js/main.e5d90428.js",
+    "static/media/bootstrap-icons.woff?": "/punkrock/static/media/bootstrap-icons.1295669cd4e305c97f2c.woff",
+    "static/media/bootstrap-icons.woff2?": "/punkrock/static/media/bootstrap-icons.92ea18a81d737146ff04.woff2",
+    "index.html": "/punkrock/index.html",
+    "main.87b4f72f.css.map": "/punkrock/static/css/main.87b4f72f.css.map",
+    "main.e5d90428.js.map": "/punkrock/static/js/main.e5d90428.js.map"
+  },
+  "entrypoints": [
+    "static/css/main.87b4f72f.css",
+    "static/js/main.e5d90428.js"
+  ]
+}
--- a/demo/src/main/resources/static/catalog.html
+++ b/demo/src/main/resources/static/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/demo/src/main/resources/static/favicon.ico
+++ b/demo/src/main/resources/static/favicon.ico
--- a/demo/src/main/resources/static/grob.html
+++ b/demo/src/main/resources/static/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/demo/src/main/resources/static/grobKaifIliBolshe.html
+++ b/demo/src/main/resources/static/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/demo/src/main/resources/static/index.html
+++ b/demo/src/main/resources/static/index.html
@@ -1,16 +1 @@
-<!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>
-
+<!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><script defer="defer" src="/punkrock/static/js/main.e5d90428.js"></script><link href="/punkrock/static/css/main.87b4f72f.css" rel="stylesheet"></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/demo/src/main/resources/static/logo192.png
+++ b/demo/src/main/resources/static/logo192.png
--- a/demo/src/main/resources/static/logo512.png
+++ b/demo/src/main/resources/static/logo512.png
--- a/demo/src/main/resources/static/manifest.json
+++ b/demo/src/main/resources/static/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/demo/src/main/resources/static/res/garajnipunk.jpg
+++ b/demo/src/main/resources/static/res/garajnipunk.jpg
--- a/demo/src/main/resources/static/res/grob.jpg
+++ b/demo/src/main/resources/static/res/grob.jpg
--- a/demo/src/main/resources/static/res/logo.png
+++ b/demo/src/main/resources/static/res/logo.png
--- a/demo/src/main/resources/static/res/nekrofilia.jpg
+++ b/demo/src/main/resources/static/res/nekrofilia.jpg
--- a/demo/src/main/resources/static/res/pankrock.jpg
+++ b/demo/src/main/resources/static/res/pankrock.jpg
--- a/demo/src/main/resources/static/res/psy.png
+++ b/demo/src/main/resources/static/res/psy.png
--- a/demo/src/main/resources/static/res/vk.png
+++ b/demo/src/main/resources/static/res/vk.png
--- a/demo/src/main/resources/static/robots.txt
+++ b/demo/src/main/resources/static/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/demo/src/main/resources/static/static/css/main.87b4f72f.css
+++ b/demo/src/main/resources/static/static/css/main.87b4f72f.css
--- a/demo/src/main/resources/static/static/css/main.87b4f72f.css.map
+++ b/demo/src/main/resources/static/static/css/main.87b4f72f.css.map
--- a/demo/src/main/resources/static/static/js/main.e5d90428.js
+++ b/demo/src/main/resources/static/static/js/main.e5d90428.js
--- a/demo/src/main/resources/static/static/js/main.e5d90428.js.LICENSE.txt
+++ b/demo/src/main/resources/static/static/js/main.e5d90428.js.LICENSE.txt
@@ -0,0 +1,56 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * react-router v7.6.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
--- a/demo/src/main/resources/static/static/js/main.e5d90428.js.map
+++ b/demo/src/main/resources/static/static/js/main.e5d90428.js.map
--- a/demo/src/main/resources/static/static/media/bootstrap-icons.1295669cd4e305c97f2c.woff
+++ b/demo/src/main/resources/static/static/media/bootstrap-icons.1295669cd4e305c97f2c.woff
--- a/demo/src/main/resources/static/static/media/bootstrap-icons.92ea18a81d737146ff04.woff2
+++ b/demo/src/main/resources/static/static/media/bootstrap-icons.92ea18a81d737146ff04.woff2
--- a/demo/src/main/resources/static/styles.css
+++ b/demo/src/main/resources/static/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/src/components/Pagination.css
+++ b/punkrock-react/src/components/Pagination.css
@@ -21,6 +21,9 @@
  border-color: var(--punk-primary) !important;
  color: var(--punk-primary) !important;
  transition: all 0.3s ease !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  border-radius: 0.375rem !important;
 }

 .punk-pagination-item:hover:not(.active) {
@@ -31,11 +34,29 @@
  box-shadow: 0 4px 12px rgba(138, 43, 226, 0.4);
 }

+.punk-pagination-item:hover:not(.active) .page-link {
+  background-color: var(--punk-primary) !important;
+  color: white !important;
+  border-color: var(--punk-primary) !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
 .punk-pagination-item.active {
  background-color: var(--punk-primary) !important;
  color: white !important;
  border-color: var(--punk-primary) !important;
  box-shadow: 0 0 10px rgba(138, 43, 226, 0.6);
+  border-radius: 0.375rem !important;
+}
+
+.punk-pagination-item.active .page-link {
+  background-color: var(--punk-primary) !important;
+  color: white !important;
+  border-color: var(--punk-primary) !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  border-radius: 0.375rem !important;
 }

 .punk-pagination-nav {
@@ -59,14 +80,41 @@
 }

 .punk-pagination .page-link {
-  background-color: transparent;
-  border-color: var(--punk-primary);
-  color: var(--punk-primary);
+  background-color: transparent !important;
+  border-color: var(--punk-primary) !important;
+  color: var(--punk-primary) !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  text-decoration: none !important;
+  border-radius: 0.375rem !important;
+}
+
+.punk-pagination-item .page-link {
+  color: var(--punk-primary) !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  background-color: transparent !important;
+  border-radius: 0.375rem !important;
+}
+
+.punk-pagination-item:not(.active) .page-link {
+  color: var(--punk-primary) !important;
+  background-color: transparent !important;
 }

 .punk-pagination .page-link:hover {
-  background-color: var(--punk-primary);
-  color: white;
-  border-color: var(--punk-primary);
+  background-color: var(--punk-primary) !important;
+  color: white !important;
+  border-color: var(--punk-primary) !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+.punk-pagination-item:not(.active) .page-link:hover {
+  background-color: var(--punk-primary) !important;
+  color: white !important;
+  border-color: var(--punk-primary) !important;
+  opacity: 1 !important;
+  visibility: visible !important;
 }

--- a/punkrock-react/src/components/Pagination.jsx
+++ b/punkrock-react/src/components/Pagination.jsx
@@ -21,17 +21,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange }) => {

  return (
    <BSPagination className="justify-content-center punk-pagination">
-      <BSPagination.Prev 
-        onClick={() => onPageChange(currentPage - 1)} 
-        disabled={currentPage === 1}
-        className="punk-pagination-nav"
-      />
      {items}
-      <BSPagination.Next 
-        onClick={() => onPageChange(currentPage + 1)} 
-        disabled={currentPage === totalPages}
-        className="punk-pagination-nav"
-      />
    </BSPagination>
  );
 };
--- a/~$bWork4Report.docx
+++ b/~$bWork4Report.docx
--- a/~WRL0005.tmp
+++ b/~WRL0005.tmp
				`@@ -0,0 +1 @@`
				`<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>⨬<EFBFBD><EFBFBD> <20><>ࠬ<EFBFBD><E0A0AC><EFBFBD>: //help.gradle.org.`