Rebase

.gitattributes

+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

+
+###> symfony/framework-bundle ###
+/.env.local
+/.env.local.php
+/.env.*.local
+/.env
+/.env.test
+/config/secrets/prod/prod.decrypt.private.php
+/public/bundles/
+/var/
+/vendor/
+###< symfony/framework-bundle ###
+
+###> symfony/phpunit-bridge ###
+.phpunit
+.phpunit.result.cache
+/phpunit.xml
+###< symfony/phpunit-bridge ###
+
+###> customspeens-server ###
+/public/uploads/temp/
+/public/uploads/audio/
+/public/uploads/cover/
+/public/uploads/srtb/
+/public/uploads/promo/
+/public/uploads/avatar/
+###< customspeens-server ###
\ No newline at end of file

README.md

+# SpinSha.re Server
+**This repo is a mirror of our internal server repository. Please do not create pull requests or issues, as we can't answer them here**
+
+## Installation instructions
+1. Clone the repository
+2. Run ```composer install```
+3. Go to /public/index.php/
\ No newline at end of file

bin/console

+#!/usr/bin/env php
+<?php
+
+use App\Kernel;
+use Symfony\Bundle\FrameworkBundle\Console\Application;
+use Symfony\Component\Console\Input\ArgvInput;
+use Symfony\Component\ErrorHandler\Debug;
+
+if (!in_array(PHP_SAPI, ['cli', 'phpdbg', 'embed'], true)) {
+    echo 'Warning: The console should be invoked via the CLI version of PHP, not the '.PHP_SAPI.' SAPI'.PHP_EOL;
+}
+
+set_time_limit(0);
+
+require dirname(__DIR__).'/vendor/autoload.php';
+
+if (!class_exists(Application::class)) {
+    throw new LogicException('You need to add "symfony/framework-bundle" as a Composer dependency.');
+}
+
+$input = new ArgvInput();
+if (null !== $env = $input->getParameterOption(['--env', '-e'], null, true)) {
+    putenv('APP_ENV='.$_SERVER['APP_ENV'] = $_ENV['APP_ENV'] = $env);
+}
+
+if ($input->hasParameterOption('--no-debug', true)) {
+    putenv('APP_DEBUG='.$_SERVER['APP_DEBUG'] = $_ENV['APP_DEBUG'] = '0');
+}
+
+require dirname(__DIR__).'/config/bootstrap.php';
+
+if ($_SERVER['APP_DEBUG']) {
+    umask(0000);
+
+    if (class_exists(Debug::class)) {
+        Debug::enable();
+    }
+}
+
+$kernel = new Kernel($_SERVER['APP_ENV'], (bool) $_SERVER['APP_DEBUG']);
+$application = new Application($kernel);
+$application->run($input);

bin/phpunit

+#!/usr/bin/env php
+<?php
+
+if (!file_exists(dirname(__DIR__).'/vendor/symfony/phpunit-bridge/bin/simple-phpunit.php')) {
+    echo "Unable to find the `simple-phpunit.php` script in `vendor/symfony/phpunit-bridge/bin/`.\n";
+    exit(1);
+}
+
+if (false === getenv('SYMFONY_PHPUNIT_DIR')) {
+    putenv('SYMFONY_PHPUNIT_DIR='.__DIR__.'/.phpunit');
+}
+
+require dirname(__DIR__).'/vendor/symfony/phpunit-bridge/bin/simple-phpunit.php';

composer.json

+{
+    "type": "project",
+    "license": "proprietary",
+    "require": {
+        "php": "^7.1.3",
+        "ext-ctype": "*",
+        "ext-iconv": "*",
+        "friendsofsymfony/user-bundle": "~2.0",
+        "sensio/framework-extra-bundle": "^5.5",
+        "symfony/asset": "4.4.*",
+        "symfony/console": "4.4.*",
+        "symfony/dotenv": "4.4.*",
+        "symfony/expression-language": "4.4.*",
+        "symfony/flex": "^1.3.1",
+        "symfony/form": "4.4.*",
+        "symfony/framework-bundle": "4.4.*",
+        "symfony/http-client": "4.4.*",
+        "symfony/http-foundation": "4.4.*",
+        "symfony/intl": "4.4.*",
+        "symfony/mailer": "4.4.*",
+        "symfony/monolog-bundle": "^3.1",
+        "symfony/orm-pack": "*",
+        "symfony/process": "4.4.*",
+        "symfony/security-bundle": "4.4.*",
+        "symfony/serializer-pack": "*",
+        "symfony/swiftmailer-bundle": "^3.4",
+        "symfony/translation": "4.4.*",
+        "symfony/twig-pack": "*",
+        "symfony/validator": "4.4.*",
+        "symfony/web-link": "4.4.*",
+        "symfony/yaml": "4.4.*"
+    },
+    "require-dev": {
+        "symfony/debug-pack": "*",
+        "symfony/maker-bundle": "^1.14",
+        "symfony/profiler-pack": "*",
+        "symfony/test-pack": "*"
+    },
+    "config": {
+        "preferred-install": {
+            "*": "dist"
+        },
+        "sort-packages": true
+    },
+    "autoload": {
+        "psr-4": {
+            "App\\": "src/"
+        }
+    },
+    "autoload-dev": {
+        "psr-4": {
+            "App\\Tests\\": "tests/"
+        }
+    },
+    "replace": {
+        "paragonie/random_compat": "2.*",
+        "symfony/polyfill-ctype": "*",
+        "symfony/polyfill-iconv": "*",
+        "symfony/polyfill-php71": "*",
+        "symfony/polyfill-php70": "*",
+        "symfony/polyfill-php56": "*"
+    },
+    "scripts": {
+        "auto-scripts": {
+            "cache:clear": "symfony-cmd",
+            "assets:install %PUBLIC_DIR%": "symfony-cmd"
+        },
+        "post-install-cmd": [
+            "@auto-scripts"
+        ],
+        "post-update-cmd": [
+            "@auto-scripts"
+        ]
+    },
+    "conflict": {
+        "symfony/symfony": "*"
+    },
+    "extra": {
+        "symfony": {
+            "allow-contrib": false,
+            "require": "4.4.*"
+        }
+    }
+}

config/bootstrap.php

+<?php
+
+use Symfony\Component\Dotenv\Dotenv;
+
+require dirname(__DIR__).'/vendor/autoload.php';
+
+// Load cached env vars if the .env.local.php file exists
+// Run "composer dump-env prod" to create it (requires symfony/flex >=1.2)
+if (is_array($env = @include dirname(__DIR__).'/.env.local.php') && (!isset($env['APP_ENV']) || ($_SERVER['APP_ENV'] ?? $_ENV['APP_ENV'] ?? $env['APP_ENV']) === $env['APP_ENV'])) {
+    foreach ($env as $k => $v) {
+        $_ENV[$k] = $_ENV[$k] ?? (isset($_SERVER[$k]) && 0 !== strpos($k, 'HTTP_') ? $_SERVER[$k] : $v);
+    }
+} elseif (!class_exists(Dotenv::class)) {
+    throw new RuntimeException('Please run "composer require symfony/dotenv" to load the ".env" files configuring the application.');
+} else {
+    // load all the .env files
+    (new Dotenv(false))->loadEnv(dirname(__DIR__).'/.env');
+}
+
+$_SERVER += $_ENV;
+$_SERVER['APP_ENV'] = $_ENV['APP_ENV'] = ($_SERVER['APP_ENV'] ?? $_ENV['APP_ENV'] ?? null) ?: 'dev';
+$_SERVER['APP_DEBUG'] = $_SERVER['APP_DEBUG'] ?? $_ENV['APP_DEBUG'] ?? 'prod' !== $_SERVER['APP_ENV'];
+$_SERVER['APP_DEBUG'] = $_ENV['APP_DEBUG'] = (int) $_SERVER['APP_DEBUG'] || filter_var($_SERVER['APP_DEBUG'], FILTER_VALIDATE_BOOLEAN) ? '1' : '0';

config/bundles.php

+<?php
+
+return [
+    Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
+    Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
+    Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
+    Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle::class => ['all' => true],
+    Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true],
+    Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle::class => ['all' => true],
+    Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true],
+    Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
+    Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
+    Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true, 'test' => true],
+    Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
+    FOS\UserBundle\FOSUserBundle::class => ['all' => true],
+    Symfony\Bundle\SwiftmailerBundle\SwiftmailerBundle::class => ['all' => true],
+];

config/packages/cache.yaml

+framework:
+    cache:
+        # Unique name of your app: used to compute stable namespaces for cache keys.
+        #prefix_seed: your_vendor_name/app_name
+
+        # The "app" cache stores to the filesystem by default.
+        # The data in this cache should persist between deploys.
+        # Other options include:
+
+        # Redis
+        #app: cache.adapter.redis
+        #default_redis_provider: redis://localhost
+
+        # APCu (not recommended with heavy random-write workloads as memory fragmentation can cause perf issues)
+        #app: cache.adapter.apcu
+
+        # Namespaced pools use the above "app" backend by default
+        #pools:
+            #my.dedicated.cache: null

config/packages/config.yaml

+fos_user:
+    db_driver: orm # other valid values are 'mongodb', 'couchdb' and 'propel'
+    firewall_name: main
+    user_class: App\Entity\User
+    from_email:
+        address: "noreply@spinsha.re"
+        sender_name: "SpinShare"
+    registration:
+        confirmation:
+            enabled: false

config/packages/dev/debug.yaml

+debug:
+    # Forwards VarDumper Data clones to a centralized server allowing to inspect dumps on CLI or in your browser.
+    # See the "server:dump" command to start a new server.
+    dump_destination: "tcp://%env(VAR_DUMPER_SERVER)%"

config/packages/dev/easy_log_handler.yaml

+services:
+    EasyCorp\EasyLog\EasyLogHandler:
+        public: false
+        arguments: ['%kernel.logs_dir%/%kernel.environment%.log']
+
+#// FIXME: How to add this configuration automatically without messing up with the monolog configuration?
+#monolog:
+#    handlers:
+#        buffered:
+#            type:     buffer
+#            handler:  easylog
+#            channels: ['!event']
+#            level:    debug
+#        easylog:
+#            type: service
+#            id:   EasyCorp\EasyLog\EasyLogHandler

config/packages/dev/monolog.yaml

+monolog:
+    handlers:
+        main:
+            type: stream
+            path: "%kernel.logs_dir%/%kernel.environment%.log"
+            level: debug
+            channels: ["!event"]
+        # uncomment to get logging in your browser
+        # you may have to allow bigger header sizes in your Web server configuration
+        #firephp:
+        #    type: firephp
+        #    level: info
+        #chromephp:
+        #    type: chromephp
+        #    level: info
+        console:
+            type: console
+            process_psr_3_messages: false
+            channels: ["!event", "!doctrine", "!console"]

config/packages/dev/swiftmailer.yaml

+swiftmailer:
+    disable_delivery: true
\ No newline at end of file

config/packages/dev/web_profiler.yaml

+web_profiler:
+    toolbar: true
+    intercept_redirects: false
+
+framework:
+    profiler: { only_exceptions: false }

config/packages/doctrine.yaml

+doctrine:
+    dbal:
+        url: '%env(resolve:DATABASE_URL)%'
+
+        # IMPORTANT: You MUST configure your server version,
+        # either here or in the DATABASE_URL env var (see .env file)
+        #server_version: '5.7'
+    orm:
+        auto_generate_proxy_classes: true
+        naming_strategy: doctrine.orm.naming_strategy.underscore_number_aware
+        auto_mapping: true
+        mappings:
+            App:
+                is_bundle: false
+                type: annotation
+                dir: '%kernel.project_dir%/src/Entity'
+                prefix: 'App\Entity'
+                alias: App

config/packages/doctrine_migrations.yaml

+doctrine_migrations:
+    dir_name: '%kernel.project_dir%/src/Migrations'
+    # namespace is arbitrary but should be different from App\Migrations
+    # as migrations classes should NOT be autoloaded
+    namespace: DoctrineMigrations

config/packages/framework.yaml

+framework:
+    secret: '%env(APP_SECRET)%'
+    #csrf_protection: true
+    #http_method_override: true
+
+    # Enables session support. Note that the session will ONLY be started if you read or write from it.
+    # Remove or comment this section to explicitly disable session support.
+    session:
+        handler_id: null
+        cookie_secure: auto
+        cookie_samesite: lax
+
+    #esi: true
+    #fragments: true
+    php_errors:
+        log: true
+
+    csrf_protection: { enabled: true }
+
+    templating:
+        engines: ['twig']

config/packages/mailer.yaml

+framework:
+    mailer:
+        dsn: '%env(MAILER_DSN)%'

config/packages/prod/doctrine.yaml

+doctrine:
+    orm:
+        auto_generate_proxy_classes: false
+        metadata_cache_driver:
+            type: pool
+            pool: doctrine.system_cache_pool
+        query_cache_driver:
+            type: pool
+            pool: doctrine.system_cache_pool
+        result_cache_driver:
+            type: pool
+            pool: doctrine.result_cache_pool
+
+framework:
+    cache:
+        pools:
+            doctrine.result_cache_pool:
+                adapter: cache.app
+            doctrine.system_cache_pool:
+                adapter: cache.system

config/packages/prod/monolog.yaml

+monolog:
+    handlers:
+        main:
+            type: fingers_crossed
+            action_level: error
+            handler: nested
+            excluded_http_codes: [404, 405]
+            buffer_size: 50 # How many messages should be saved? Prevent memory leaks
+        nested:
+            type: stream
+            path: "%kernel.logs_dir%/%kernel.environment%.log"
+            level: debug
+        console:
+            type: console
+            process_psr_3_messages: false
+            channels: ["!event", "!doctrine"]
+        deprecation:
+            type: stream
+            path: "%kernel.logs_dir%/%kernel.environment%.deprecations.log"
+        deprecation_filter:
+            type: filter
+            handler: deprecation
+            max_level: info
+            channels: ["php"]

config/packages/prod/routing.yaml

+framework:
+    router:
+        strict_requirements: null

config/packages/routing.yaml

+framework:
+    router:
+        utf8: true
\ No newline at end of file

config/packages/security.yaml

+security:
+    encoders:
+        FOS\UserBundle\Model\UserInterface: bcrypt
+
+    role_hierarchy:
+        ROLE_MODERATOR: ROLE_USER
+        ROLE_ADMIN:     ROLE_MODERATOR
+
+    providers:
+        fos_userbundle:
+            id: fos_user.user_provider.username
+
+    firewalls:
+        main:
+            pattern: ^/
+            user_checker: security.user_checker
+            form_login:
+                provider: fos_userbundle
+                csrf_token_generator: security.csrf.token_manager
+
+            logout:       true
+            anonymous:    true
+
+    access_control:
+        - { path: ^/login$, role: IS_AUTHENTICATED_ANONYMOUSLY }
+        - { path: ^/register, role: IS_AUTHENTICATED_ANONYMOUSLY }
+        - { path: ^/resetting, role: IS_AUTHENTICATED_ANONYMOUSLY }
+        - { path: ^/upload$, role: ROLE_USER }
+        - { path: ^/settings$, role: ROLE_USER }
+        - { path: ^/moderation$, role: ROLE_MODERATOR }
\ No newline at end of file

config/packages/sensio_framework_extra.yaml

+sensio_framework_extra:
+    router:
+        annotations: false

config/packages/swiftmailer.yaml

+swiftmailer:
+    url: '%env(MAILER_URL)%'
+    spool: { type: 'memory' }

config/packages/test/framework.yaml

+framework:
+    test: true
+    session:
+        storage_id: session.storage.mock_file

config/packages/test/monolog.yaml

+monolog:
+    handlers:
+        main:
+            type: fingers_crossed
+            action_level: error
+            handler: nested
+            excluded_http_codes: [404, 405]
+            channels: ["!event"]
+        nested:
+            type: stream
+            path: "%kernel.logs_dir%/%kernel.environment%.log"
+            level: debug

config/packages/test/swiftmailer.yaml

+swiftmailer:
+    disable_delivery: true

config/packages/test/twig.yaml

+twig:
+    strict_variables: true

config/packages/test/validator.yaml

+framework:
+    validation:
+        not_compromised_password: false

config/packages/test/web_profiler.yaml

+web_profiler:
+    toolbar: false
+    intercept_redirects: false
+
+framework:
+    profiler: { collect: false }

config/packages/translation.yaml

+framework:
+    default_locale: en
+    translator:
+        default_path: '%kernel.project_dir%/translations'
+        fallbacks:
+            - en

config/packages/twig.yaml

+twig:
+    default_path: '%kernel.project_dir%/templates'
+    debug: '%kernel.debug%'
+    strict_variables: '%kernel.debug%'
+    exception_controller: null

config/packages/validator.yaml

+framework:
+    validation:
+        email_validation_mode: html5
+
+        # Enables validator auto-mapping support.
+        # For instance, basic validation constraints will be inferred from Doctrine's metadata.
+        #auto_mapping:
+        #    App\Entity\: []

config/routes/annotations.yaml

+controllers:
+    resource: ../../src/Controller/
+    type: annotation
+
+kernel:
+    resource: ../../src/Kernel.php
+    type: annotation
+
+fos_user:
+    resource: "@FOSUserBundle/Resources/config/routing/all.xml"
\ No newline at end of file

config/routes/dev/framework.yaml

+_errors:
+    resource: '@FrameworkBundle/Resources/config/routing/errors.xml'
+    prefix: /_error

config/routes/dev/web_profiler.yaml

+web_profiler_wdt:
+    resource: '@WebProfilerBundle/Resources/config/routing/wdt.xml'
+    prefix: /_wdt
+
+web_profiler_profiler:
+    resource: '@WebProfilerBundle/Resources/config/routing/profiler.xml'
+    prefix: /_profiler

config/services.yaml

+# This file is the entry point to configure your own services.
+# Files in the packages/ subdirectory configure your dependencies.
+
+# Put parameters here that don't need to change on each machine where the app is deployed
+# https://symfony.com/doc/current/best_practices/configuration.html#application-related-configuration
+parameters:
+    srtb_path: "%kernel.project_dir%/public/uploads/srtb"
+    cover_path: "%kernel.project_dir%/public/uploads/cover"
+    audio_path: "%kernel.project_dir%/public/uploads/audio"
+    avatar_path: "%kernel.project_dir%/public/uploads/avatar"
+    promo_path: "%kernel.project_dir%/public/uploads/promo"
+    client_path: "%kernel.project_dir%/public/uploads/client"
+    temp_path: "%kernel.project_dir%/public/uploads/temp"
+
+services:
+    # default configuration for services in *this* file
+    _defaults:
+        autowire: true      # Automatically injects dependencies in your services.
+        autoconfigure: true # Automatically registers your services as commands, event subscribers, etc.
+
+    # makes classes in src/ available to be used as services
+    # this creates a service per class whose id is the fully-qualified class name
+    App\:
+        resource: '../src/*'
+        exclude: '../src/{DependencyInjection,Entity,Migrations,Tests,Kernel.php}'
+
+    # controllers are imported separately to make sure services can be injected
+    # as action arguments even if you don't extend any base controller class
+    App\Controller\:
+        resource: '../src/Controller'
+        tags: ['controller.service_arguments']
+
+    # add more service definitions when explicit configuration is needed
+    # please note that last definitions always *replace* previous ones

phpunit.xml.dist

+<?xml version="1.0" encoding="UTF-8"?>
+
+<!-- https://phpunit.readthedocs.io/en/latest/configuration.html -->
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="bin/.phpunit/phpunit.xsd"
+         backupGlobals="false"
+         colors="true"
+         bootstrap="tests/bootstrap.php"
+>
+    <php>
+        <ini name="error_reporting" value="-1" />
+        <server name="APP_ENV" value="test" force="true" />
+        <server name="SHELL_VERBOSITY" value="-1" />
+        <server name="SYMFONY_PHPUNIT_REMOVE" value="" />
+        <server name="SYMFONY_PHPUNIT_VERSION" value="7.5" />
+    </php>
+
+    <testsuites>
+        <testsuite name="Project Test Suite">
+            <directory>tests</directory>
+        </testsuite>
+    </testsuites>
+
+    <filter>
+        <whitelist processUncoveredFilesFromWhitelist="true">
+            <directory suffix=".php">src</directory>
+        </whitelist>
+    </filter>
+
+    <listeners>
+        <listener class="Symfony\Bridge\PhpUnit\SymfonyTestsListener" />
+    </listeners>
+</phpunit>

public/assets/css/client.css

+.section-client {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 50px;
+}
+.box {
+  width: 800px;
+  height: 400px;
+  display: grid;
+  grid-template-columns: 4fr 6fr;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.box .text {
+  padding: 25px;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-gap: 15px;
+}
+.box .text .title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.box .text p {
+  margin: 0px;
+  line-height: 1.5em;
+}
+.box .text .actions .notice {
+  opacity: 0.6;
+  margin-top: 15px;
+  font-size: 10px;
+}
+.box .illustration {
+  background: linear-gradient(135deg, #fd2f85, #7a34ec);
+  display: flex;
+  padding: 25px;
+  justify-content: center;
+  align-items: center;
+}
+.box .illustration img {
+  max-width: 80%;
+}

public/assets/css/client.less

+.section-client {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 50px;
+}
+.box {
+    width: 800px;
+    height: 400px;
+    display: grid;
+    grid-template-columns: 4fr 6fr;
+    background: rgba(255,255,255,0.1);
+    border-radius: 6px;
+    overflow: hidden;
+
+    & .text {
+        padding: 25px;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        grid-gap: 15px;
+
+        & .title {
+            letter-spacing: 0.25em;
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+        & p {
+            margin: 0px;
+            line-height: 1.5em;
+        }
+        & .actions {
+            & .notice {
+                opacity: 0.6;
+                margin-top: 15px;
+                font-size: 10px;
+            }
+        }
+    }
+    & .illustration {
+        background: linear-gradient(135deg, #fd2f85, #7a34ec);
+        display: flex;
+        padding: 25px;
+        justify-content: center;
+        align-items: center;
+
+        & img {
+            max-width: 80%;
+        }
+    }
+}
\ No newline at end of file

public/assets/css/comingsoon.css

+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+html {
+  width: 100%;
+  height: 100%;
+}
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: #212629;
+  color: #fff;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+}
+body .comingsoon-video {
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+}
+body .comingsoon-video video {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin: auto;
+  min-height: 50%;
+  min-width: 50%;
+}
+body footer {
+  position: absolute;
+  bottom: 5vh;
+  left: 0px;
+  right: 0px;
+  text-align: center;
+}
+body footer a {
+  background: #ffffff;
+  padding: 14px 50px;
+  border-radius: 6px;
+  text-decoration: none;
+  color: #212629;
+  transition: 0.2s ease opacity;
+}
+body footer a:hover {
+  opacity: 0.75;
+}
+::-webkit-scrollbar {
+  background: #212529;
+  width: 5px;
+}
+::-webkit-scrollbar-thumb {
+  background: #fff;
+}

public/assets/css/comingsoon.less

+html {
+    box-sizing: border-box;
+  }
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+html {
+    width: 100%;
+    height: 100%;
+}
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    background: #212629;
+    color: #fff;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+
+    .comingsoon-video {
+        position: absolute;
+        top: -50%;
+        left: -50%;
+        width: 200%;
+        height: 200%;
+
+        & video {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            left: 0;
+            margin: auto;
+            min-height: 50%;
+            min-width: 50%;
+        }
+    }
+
+    & footer {
+        position: absolute;
+        bottom: 5vh;
+        left: 0px;
+        right: 0px;
+        text-align: center;
+
+        & a {
+            background: rgba(255,255,255,1);
+            padding: 14px 50px;
+            border-radius: 6px;
+            text-decoration: none;
+            color: #212629;
+            transition: 0.2s ease opacity;
+
+            &:hover {
+                opacity: 0.75;
+            }
+        }
+    }
+}
+::-webkit-scrollbar {
+    background: #212529;
+    width: 5px;
+}
+::-webkit-scrollbar-thumb {
+    background: #fff;
+}
\ No newline at end of file

public/assets/css/connectionerror.css

+.section-connectionerror {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  padding: 50px;
+}
+.section-connectionerror .connectionerror-box {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 20px;
+  width: 300px;
+}
+.section-connectionerror .connectionerror-box .icon {
+  font-size: 64px;
+  padding: 40px 0px;
+  text-align: center;
+}
+.section-connectionerror .connectionerror-box .title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  text-align: center;
+}
+.section-connectionerror .connectionerror-box .text {
+  line-height: 1.5em;
+  text-align: center;
+  opacity: 0.6;
+}

public/assets/css/connectionerror.less

+.section-connectionerror {
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    padding: 50px;
+
+    & .connectionerror-box {
+        background: rgba(255,255,255,0.1);
+        border-radius: 6px;
+        padding: 20px;
+        width: 300px;
+
+        & .icon {
+            font-size: 64px;
+            padding: 40px 0px;
+            text-align: center;
+        }
+
+        & .title {
+            font-size: 24px;
+            font-weight: bold;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+        & .text {
+            line-height: 1.5em;
+            text-align: center;
+            opacity: 0.6;
+        }
+    }
+}
\ No newline at end of file

public/assets/css/legal.css

+.section-legal {
+  padding: 50px;
+  display: grid;
+  grid-template-columns: 400px 1fr;
+  grid-gap: 25px;
+}
+.section-legal .box {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  overflow: hidden;
+  padding: 25px;
+  margin-bottom: 25px;
+}
+.section-legal .box .title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.section-legal .box p {
+  margin: 0px;
+  margin-top: 15px;
+  line-height: 1.5em;
+}
+.section-legal .box a {
+  color: #00bcda;
+}

public/assets/css/legal.less

+.section-legal {
+    padding: 50px;
+    display: grid;
+    grid-template-columns: 400px 1fr;
+    grid-gap: 25px;
+
+    & .box {
+        background: rgba(255,255,255,0.1);
+        border-radius: 6px;
+        overflow: hidden;
+        padding: 25px;
+        margin-bottom: 25px;
+    
+        & .title {
+            letter-spacing: 0.25em;
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+        & p {
+            margin: 0px;
+            margin-top: 15px;
+            line-height: 1.5em;
+        }
+        & a {
+            color: #00bcda;
+        }
+    }
+}
\ No newline at end of file

public/assets/css/login.css

+.section-login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 50px;
+}
+.box {
+  width: 800px;
+  min-height: 400px;
+  background: rgba(255, 255, 255, 0.1);
+  display: grid;
+  grid-template-columns: 4fr 6fr;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.box .text {
+  padding: 25px;
+}
+.box .text .title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+  margin-bottom: 15px;
+}
+.box .text .flashbang {
+  padding: 10px;
+  margin-bottom: 25px;
+  border: 2px solid #fff;
+  width: 100%;
+  border-radius: 6px;
+}
+.box .text .flashbang.flashbang-success {
+  background: rgba(121, 223, 90, 0.1);
+  border-color: #79df5a;
+  color: #79df5a;
+}
+.box .text .flashbang.flashbang-error {
+  background: rgba(197, 65, 76, 0.1);
+  border-color: #c5414c;
+  color: #c5414c;
+}
+.box .text ul {
+  padding: 10px;
+  margin: 0;
+  margin-bottom: 25px;
+  list-style-type: none;
+  border: 2px solid #fff;
+  width: 100%;
+  border-radius: 6px;
+  background: rgba(197, 65, 76, 0.1);
+  border-color: #c5414c;
+  color: #c5414c;
+}
+.box .text input[type="text"],
+.box .text input[type="password"],
+.box .text input[type="email"] {
+  width: 100%;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  text-transform: uppercase;
+  font-weight: 700;
+  border-radius: 4px;
+  padding: 7px 14px;
+  margin-bottom: 15px;
+  border: 0px;
+  transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
+  text-transform: initial;
+  font-weight: normal;
+}
+.box .text input[type="text"]:hover,
+.box .text input[type="password"]:hover,
+.box .text input[type="email"]:hover {
+  background: rgba(255, 255, 255, 0.4);
+  color: #fff;
+  cursor: text;
+}
+.box .text input[type="text"]:focus,
+.box .text input[type="password"]:focus,
+.box .text input[type="email"]:focus {
+  outline: 0;
+}
+.box .text input[type="text"]::placeholder,
+.box .text input[type="password"]::placeholder,
+.box .text input[type="email"]::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.box .text input[type="text"] option,
+.box .text input[type="password"] option,
+.box .text input[type="email"] option {
+  background: #222;
+  text-transform: initial;
+}
+.box .text input[type="text"]:disabled,
+.box .text input[type="password"]:disabled,
+.box .text input[type="email"]:disabled {
+  opacity: 0.4;
+}
+.box .text .actions {
+  display: flex;
+  justify-content: flex-end;
+}
+.box .text .actions .button {
+  margin-left: 5px;
+}
+.box .text p {
+  line-height: 1.5em;
+}
+.box .illustration {
+  background: linear-gradient(135deg, #fd2f85, #7a34ec);
+  display: flex;
+  padding: 25px;
+  justify-content: center;
+  align-items: center;
+}
+.box .illustration img {
+  width: 80%;
+  max-height: 80%;
+}

public/assets/css/login.less

+.section-login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 50px;
+}
+.box {
+    width: 800px;
+    min-height: 400px;
+    background: rgba(255,255,255,0.1);
+    display: grid;
+    grid-template-columns: 4fr 6fr;
+    border-radius: 6px;
+    overflow: hidden;
+
+    & .text {
+        padding: 25px;
+
+        & .title {
+            letter-spacing: 0.25em;
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+            margin-bottom: 15px;
+        }
+        & .flashbang {
+            padding: 10px;
+            margin-bottom: 25px;
+            border: 2px solid #fff;
+            width: 100%;
+            border-radius: 6px;
+
+            &.flashbang-success {
+                background: rgba(121, 223, 90, 0.1);
+                border-color: #79df5a;
+                color: #79df5a;
+            }
+            &.flashbang-error {
+                background: rgba(197, 65, 76, 0.1);
+                border-color: #c5414c;
+                color: #c5414c;
+            }
+        }
+        & ul {
+            padding: 10px;
+            margin: 0;
+            margin-bottom: 25px;
+            list-style-type: none;
+            border: 2px solid #fff;
+            width: 100%;
+            border-radius: 6px;
+            background: rgba(197, 65, 76, 0.1);
+            border-color: #c5414c;
+            color: #c5414c;
+        }
+        & input[type="text"], & input[type="password"], & input[type="email"] {
+            width: 100%;
+            font-family: 'Open Sans', sans-serif;
+            font-size: 12px;
+            color: #fff;
+            background: rgba(255,255,255,0.2);
+            text-transform: uppercase;
+            font-weight: 700;
+            border-radius: 4px;
+            padding: 7px 14px;
+            margin-bottom: 15px;
+            border: 0px;
+            transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
+            text-transform: initial;
+            font-weight: normal;
+        
+            &:hover {
+                background: rgba(255,255,255,0.4);
+                color: #fff;
+                cursor: text;
+            }
+            &:focus {
+                outline: 0;
+            }
+            &::placeholder {
+                color: rgba(255,255,255,0.6);
+            }
+            & option {
+                background: #222;
+                text-transform: initial;
+            }
+            &:disabled {
+                opacity: 0.4;
+            }
+        }
+        & .actions {
+            display: flex;
+            justify-content: flex-end;
+
+            & .button {
+                margin-left: 5px;
+            }
+        }
+        & p {
+            line-height: 1.5em;
+        }
+    }
+    & .illustration {
+        background: linear-gradient(135deg, #fd2f85, #7a34ec);
+        display: flex;
+        padding: 25px;
+        justify-content: center;
+        align-items: center;
+
+        & img {
+            width: 80%;
+            max-height: 80%;
+        }
+    }
+}
\ No newline at end of file

public/assets/css/main.css

+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+html {
+  width: 100%;
+  height: 100%;
+}
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background: #212629;
+  color: #fff;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+}
+::-webkit-scrollbar {
+  background: #212529;
+  width: 5px;
+}
+::-webkit-scrollbar-thumb {
+  background: #fff;
+}
+main {
+  display: grid;
+  margin-left: 60px;
+  min-height: 100vh;
+  overflow-y: scroll;
+}
+main aside {
+  background: rgba(255, 255, 255, 0.1);
+  display: grid;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  grid-template-rows: 1fr auto;
+}
+main aside .item {
+  width: 60px;
+  height: 60px;
+  opacity: 0.4;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+  color: #fff;
+  transition: 0.2s ease opacity, 0.2s ease background;
+}
+main aside .item:hover {
+  opacity: 1;
+  cursor: pointer;
+}
+main aside .item.active {
+  opacity: 1;
+  background: linear-gradient(135deg, #fd2f85, #7a34ec);
+}
+main aside .item .mdi {
+  font-size: 22px;
+}
+section.section-startup {
+  padding: 50px;
+}
+section.section-library {
+  padding: 50px;
+}
+button,
+.button {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  text-transform: uppercase;
+  font-weight: 700;
+  border-radius: 4px;
+  padding: 7px 14px;
+  border: 0px;
+  text-decoration: none;
+  text-align: center;
+  user-select: none;
+  transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
+}
+button:hover,
+.button:hover {
+  background: #fff;
+  color: #222;
+  cursor: pointer;
+}
+button:focus,
+.button:focus {
+  outline: 0;
+}
+button.button-label,
+.button.button-label {
+  background: transparent;
+}
+button.button-label:hover,
+.button.button-label:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+button.button-label:active,
+.button.button-label:active {
+  background: #fff;
+  color: #222;
+  cursor: pointer;
+}
+.song-row {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-gap: 5px;
+}
+.song-row .song-header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+.song-row .song-header .row-title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.song-row .song-header .row-title.row-title-noactions {
+  margin: 10px 0px;
+}
+.song-row .song-header .row-controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 15px;
+}
+.song-row .song-header .row-controls .item {
+  width: 28px;
+  height: 28px;
+  font-size: 22px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+}
+.song-row .song-header .row-controls .item.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.song-row .song-header .row-controls .item:not(.disabled):hover {
+  background: rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+}
+.song-row .song-list {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-gap: 15px;
+}
+.song-row .song-list-noresults {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 25px;
+  opacity: 0.6;
+  text-align: center;
+}
+.song-item {
+  background: rgba(255, 255, 255, 0.1);
+  transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
+  overflow: hidden;
+  border-radius: 6px;
+  color: #fff;
+  text-decoration: none;
+}
+.song-item .song-cover {
+  background: url("../img/defaultAlbumArt.jpg");
+  background-size: cover;
+  width: 100%;
+  padding-top: 100%;
+  position: relative;
+  background-position: center;
+}
+.song-item .song-cover .song-charter {
+  position: absolute;
+  z-index: 2;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
+  opacity: 0;
+  padding: 15px;
+  overflow: hidden;
+  display: grid;
+  transition: 0.2s ease-in-out opacity;
+  grid-template-columns: auto 1fr;
+  grid-gap: 10px;
+  align-items: flex-end;
+}
+.song-item .song-cover .song-charter .song-charter-info {
+  display: grid;
+  align-items: center;
+}
+.song-item .song-cover .song-charter .song-charter-info .mdi {
+  font-size: 18px;
+}
+.song-item .song-cover .song-charter .song-charter-info span {
+  font-size: 12px;
+  color: transparent;
+  transition: 0.2s ease-in-out color;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.song-item .song-metadata {
+  padding: 15px;
+  display: grid;
+  grid-template-rows: 1fr auto auto;
+}
+.song-item .song-metadata .song-title {
+  font-weight: bold;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.song-item .song-metadata .song-artist {
+  margin-top: 5px;
+  opacity: 0.6;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.song-item .song-metadata .song-difficulties {
+  margin-top: 10px;
+  height: 20px;
+  display: flex;
+}
+.song-item .song-metadata .song-difficulties img {
+  height: 18px;
+  margin-right: 10px;
+  opacity: 0.3;
+}
+.song-item .song-metadata .song-difficulties img.active {
+  opacity: 1;
+}
+.song-item:not(.inactive):hover {
+  transform: scale(1.1);
+  cursor: pointer;
+  box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
+}
+.song-item:not(.inactive):hover .song-cover .song-charter {
+  opacity: 1;
+}
+.song-item.inactive {
+  box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, 0.2);
+}
+.user-row {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-gap: 5px;
+}
+.user-row .user-header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+.user-row .user-header .row-title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.user-row .user-header .row-title.row-title-noactions {
+  margin: 10px 0px;
+}
+.user-row .user-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 15px;
+}
+.user-item {
+  background: #383c3f;
+  transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
+  overflow: hidden;
+  border-radius: 6px;
+  display: grid;
+  padding: 10px;
+  color: #fff;
+  text-decoration: none;
+  grid-gap: 15px;
+  grid-template-columns: 32px 1fr;
+}
+.user-item .user-avatar {
+  background: rgba(255, 255, 255, 0.1);
+  background-size: cover;
+  background-position: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 32px;
+}
+.user-item .user-metadata {
+  display: flex;
+  align-items: center;
+}
+.user-item .user-metadata .user-name {
+  font-weight: bold;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.user-item .user-metadata .user-badge {
+  font-size: 18px;
+  margin-left: 10px;
+}
+.user-item:not(.inactive):hover {
+  transform: scale(1.1);
+  cursor: pointer;
+  box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
+}
+.user-item.inactive {
+  box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, 0.2);
+}

public/assets/css/main.less

+html {
+    box-sizing: border-box;
+  }
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+html {
+    width: 100%;
+    height: 100%;
+}
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    background: #212629;
+    color: #fff;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+}
+::-webkit-scrollbar {
+    background: #212529;
+    width: 5px;
+}
+::-webkit-scrollbar-thumb {
+    background: #fff;
+}
+main {
+    display: grid;
+    margin-left: 60px;
+    min-height: 100vh;
+    overflow-y: scroll;
+
+    & aside {
+        background: rgba(255,255,255,0.1);
+        display: grid;
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        bottom: 0px;
+        grid-template-rows: 1fr auto;
+
+        & .item {
+            width: 60px;
+            height: 60px;
+            opacity: 0.4;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: transparent;
+            color :#fff;
+            transition: 0.2s ease opacity, 0.2s ease background;
+
+            &:hover {
+                opacity: 1;
+                cursor: pointer;
+            }
+            &.active {
+                opacity: 1;
+                background: linear-gradient(135deg, #fd2f85, #7a34ec);
+            }
+
+            & .mdi {
+                font-size: 22px;
+            }
+        }
+    }
+}
+section {
+    &.section-startup {
+        padding: 50px;
+    }
+
+    &.section-library {
+        padding: 50px;
+    }
+}
+button, .button {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 12px;
+    color: #fff;
+    background: rgba(255,255,255,0.2);
+    text-transform: uppercase;
+    font-weight: 700;
+    border-radius: 4px;
+    padding: 7px 14px;
+    border: 0px;
+    text-decoration: none;
+    text-align: center;
+    user-select: none;
+    transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
+
+    &:hover {
+        background: #fff;
+        color: #222;
+        cursor: pointer;
+    }
+    &:focus {
+        outline: 0;
+    }
+
+    &.button-label {
+        background: transparent;
+
+        &:hover {
+            background: rgba(255,255,255,0.2);
+            color: #fff;
+        }
+        &:active {
+            background: #fff;
+            color: #222;
+            cursor: pointer;
+        }
+    }
+}
+.song-row {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-gap: 5px;
+
+    & .song-header {
+        display: grid;
+        grid-template-columns: 1fr auto;
+
+        & .row-title {
+            letter-spacing: 0.25em;
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+
+            &.row-title-noactions {
+                margin: 10px 0px;
+            }
+        }
+        & .row-controls {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-gap: 15px;
+
+            & .item {
+                width: 28px;
+                height: 28px;
+                font-size: 22px;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #fff;
+
+                &.disabled {
+                    opacity: 0.4;
+                    pointer-events: none;
+                }
+
+                &:not(.disabled):hover {
+                    background: rgba(255,255,255,0.2);
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+    & .song-list {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        grid-gap: 15px;
+    }
+    & .song-list-noresults {
+        background: rgba(255,255,255,0.1);
+        border-radius: 6px;
+        padding: 25px;
+        opacity: 0.6;
+        text-align: center;
+    }
+}
+
+
+& .song-item {
+    background: rgba(255,255,255,0.1);
+    transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
+    overflow: hidden;
+    border-radius: 6px;
+    color: #fff;
+    text-decoration: none;
+
+    & .song-cover {
+        background: url("../img/defaultAlbumArt.jpg");
+        background-size: cover;
+        width: 100%;
+        padding-top: 100%;
+        position: relative;
+        background-position: center;
+
+        & .song-charter {
+            position: absolute;
+            z-index: 2;
+            top: 0px;
+            left: 0px;
+            right: 0px;
+            bottom: 0px;
+            background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
+            opacity: 0;
+            padding: 15px;
+            overflow: hidden;
+            display: grid;
+            transition: 0.2s ease-in-out opacity;
+            grid-template-columns: auto 1fr;
+            grid-gap: 10px;
+            align-items: flex-end;
+
+            & .song-charter-info {
+                display: grid;
+                align-items: center;
+
+                & .mdi {
+                    font-size: 18px;
+                }
+                & span {
+                    font-size: 12px;
+                    color: transparent;
+                    transition: 0.2s ease-in-out color;
+                    overflow: hidden;
+                    white-space: nowrap;
+                }
+            }
+        }
+    }
+
+    & .song-metadata {
+        padding: 15px;
+        display: grid;
+        grid-template-rows: 1fr auto auto;
+
+        & .song-title {
+            font-weight: bold;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        & .song-artist {
+            margin-top: 5px;
+            opacity: 0.6;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        & .song-difficulties {
+            margin-top: 10px;
+            height: 20px;
+            display: flex;
+
+            & img {
+                height: 18px;
+                margin-right: 10px;
+                opacity: 0.3;
+
+                &.active {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+    &:not(.inactive):hover {
+        transform: scale(1.1);
+        cursor: pointer;
+        box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
+
+        & .song-cover {
+            & .song-charter {
+                opacity: 1;
+            }
+        }
+    }
+    &.inactive {
+        box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, 0.2);
+    }
+}
+.user-row {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-gap: 5px;
+
+    & .user-header {
+        display: grid;
+        grid-template-columns: 1fr auto;
+
+        & .row-title {
+            letter-spacing: 0.25em;
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+
+            &.row-title-noactions {
+                margin: 10px 0px;
+            }
+        }
+    }
+    & .user-list {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-gap: 15px;
+    }
+}
+.user-item {
+    background: #383c3f;
+    transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
+    overflow: hidden;
+    border-radius: 6px;
+    display: grid;
+    padding: 10px;
+    color: #fff;
+    text-decoration: none;
+    grid-gap: 15px;
+    grid-template-columns: 32px 1fr;
+
+    & .user-avatar {
+        background: rgba(255,255,255,0.1);
+        background-size: cover;
+        background-position: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 32px;
+    }
+
+    & .user-metadata {
+        display: flex;
+        align-items: center;
+
+        & .user-name {
+            font-weight: bold;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        & .user-badge {
+            font-size: 18px;
+            margin-left: 10px;
+        }
+    }
+
+    &:not(.inactive):hover {
+        transform: scale(1.1);
+        cursor: pointer;
+        box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
+    }
+    &.inactive {
+        box-shadow: 0px 2px 10px 5px rgba(0, 0, 0, 0.2);
+    }
+}
\ No newline at end of file

public/assets/css/moderation.css

+.section-moderator-dashboard {
+  padding: 50px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 25px;
+}
+.section-moderator-dashboard .box {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 25px;
+  margin-bottom: 25px;
+}
+.section-moderator-dashboard .box .title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.section-moderator-dashboard .box p {
+  margin: 0px;
+  line-height: 1.5em;
+}
+.section-moderator-dashboard .box table {
+  width: 100%;
+  margin-top: 10px;
+  border: 1px solid #000;
+  border-collapse: collapse;
+}
+.section-moderator-dashboard .box table tr {
+  border: 1px solid #000;
+}
+.section-moderator-dashboard .box table tr.active {
+  background: rgba(71, 194, 126, 0.2);
+}
+.section-moderator-dashboard .box table tr.inactive {
+  opacity: 0.2;
+}
+.section-moderator-dashboard .box table th {
+  padding: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid #000;
+}
+.section-moderator-dashboard .box table td {
+  padding: 10px;
+  border: 1px solid #000;
+}
+.section-moderator-add {
+  padding: 50px;
+}
+.section-moderator-add .box {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 25px;
+}
+.section-moderator-add .box .title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.section-moderator-add .box form {
+  margin-top: 15px;
+  width: 550px;
+}
+.section-moderator-add .box form > div {
+  display: grid;
+  grid-template-rows: auto;
+  grid-gap: 15px;
+}
+.section-moderator-add .box form > div > div {
+  display: grid;
+  grid-template-columns: 150px 1fr;
+  grid-gap: 15px;
+}
+.section-moderator-add .box form > div > div select,
+.section-moderator-add .box form > div > div input[type="text"],
+.section-moderator-add .box form > div > div input[type="password"],
+.section-moderator-add .box form > div > div input[type="email"] {
+  width: 100%;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  text-transform: uppercase;
+  font-weight: 700;
+  border-radius: 4px;
+  padding: 7px 14px;
+  border: 0px;
+  transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
+}
+.section-moderator-add .box form > div > div select:hover,
+.section-moderator-add .box form > div > div input[type="text"]:hover,
+.section-moderator-add .box form > div > div input[type="password"]:hover,
+.section-moderator-add .box form > div > div input[type="email"]:hover {
+  background: rgba(255, 255, 255, 0.4);
+  color: #fff;
+}
+.section-moderator-add .box form > div > div select:focus,
+.section-moderator-add .box form > div > div input[type="text"]:focus,
+.section-moderator-add .box form > div > div input[type="password"]:focus,
+.section-moderator-add .box form > div > div input[type="email"]:focus {
+  outline: 0;
+}
+.section-moderator-add .box form > div > div select::placeholder,
+.section-moderator-add .box form > div > div input[type="text"]::placeholder,
+.section-moderator-add .box form > div > div input[type="password"]::placeholder,
+.section-moderator-add .box form > div > div input[type="email"]::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.section-moderator-add .box form > div > div select option,
+.section-moderator-add .box form > div > div input[type="text"] option,
+.section-moderator-add .box form > div > div input[type="password"] option,
+.section-moderator-add .box form > div > div input[type="email"] option {
+  background: #222;
+  text-transform: initial;
+}
+.section-moderator-add .box form > div > div select:disabled,
+.section-moderator-add .box form > div > div input[type="text"]:disabled,
+.section-moderator-add .box form > div > div input[type="password"]:disabled,
+.section-moderator-add .box form > div > div input[type="email"]:disabled {
+  opacity: 0.4;
+}
+.section-moderator-add .box form > div > div input[type="text"],
+.section-moderator-add .box form > div > div input[type="password"],
+.section-moderator-add .box form > div > div input[type="email"] {
+  text-transform: initial;
+  font-weight: normal;
+}
+.section-moderator-add .box form > div > div input[type="text"]:hover,
+.section-moderator-add .box form > div > div input[type="password"]:hover,
+.section-moderator-add .box form > div > div input[type="email"]:hover {
+  cursor: text;
+}
+.section-moderator-report {
+  padding: 50px;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  align-items: flex-start;
+  grid-gap: 25px;
+}
+.section-moderator-report .box {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 25px;
+  margin-bottom: 25px;
+}
+.section-moderator-report .box .title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.section-moderator-report .box .report-data {
+  display: grid;
+  grid-template-columns: auto;
+  grid-gap: 15px;
+  margin-top: 15px;
+}
+.section-moderator-report .box .report-data img {
+  width: 120px;
+  justify-self: center;
+  height: 120px;
+}
+.section-moderator-report .box .report-data img.avatar-icon {
+  border-radius: 50%;
+}
+.section-moderator-report .box .report-data img.song-cover {
+  border-radius: 6px;
+}
+.section-moderator-report .box .report-data .report-item {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  grid-gap: 15px;
+  padding: 10px 0px;
+}
+.section-moderator-report .box .report-data .report-item .column {
+  opacity: 0.4;
+}

public/assets/css/moderation.less

+.section-moderator-dashboard {
+    padding: 50px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 25px;
+
+    & .box {
+        background: rgba(255,255,255,0.1);
+        border-radius: 6px;
+        padding: 25px;
+        margin-bottom: 25px;
+    
+        & .title {
+            letter-spacing: 0.25em;
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+        & p {
+            margin: 0px;
+            line-height: 1.5em;
+        }
+        & table {
+            width: 100%;
+            margin-top: 10px;
+            border: 1px solid #000;
+            border-collapse: collapse;
+
+            & tr {
+                border: 1px solid #000;
+
+                &.active {
+                    background: rgba(71, 194, 126, 0.2);
+                }
+                &.inactive {
+                    opacity: 0.2;
+                }
+            }
+            & th {
+                padding: 10px;
+                background: rgba(255,255,255,0.1);
+                border: 1px solid #000;
+            }
+            & td {
+                padding: 10px;
+                border: 1px solid #000;
+            }
+        }
+    }
+}
+.section-moderator-add {
+    padding: 50px;
+
+    & .box {
+        background: rgba(255,255,255,0.1);
+        border-radius: 6px;
+        padding: 25px;
+    
+        & .title {
+            letter-spacing: 0.25em;
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+        & form {
+            margin-top: 15px;
+            width: 550px;
+
+            & > div {
+                display: grid;
+                grid-template-rows: auto;
+                grid-gap: 15px;
+
+                & > div {
+                    display: grid;
+                    grid-template-columns: 150px 1fr;
+                    grid-gap: 15px;
+
+                    & select, & input[type="text"], & input[type="password"], & input[type="email"] {
+                        width: 100%;
+                        font-family: 'Open Sans', sans-serif;
+                        font-size: 12px;
+                        color: #fff;
+                        background: rgba(255,255,255,0.2);
+                        text-transform: uppercase;
+                        font-weight: 700;
+                        border-radius: 4px;
+                        padding: 7px 14px;
+                        border: 0px;
+                        transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
+                    
+                        &:hover {
+                            background: rgba(255,255,255,0.4);
+                            color: #fff;
+                        }
+                        &:focus {
+                            outline: 0;
+                        }
+                        &::placeholder {
+                            color: rgba(255,255,255,0.6);
+                        }
+                        & option {
+                            background: #222;
+                            text-transform: initial;
+                        }
+                        &:disabled {
+                            opacity: 0.4;
+                        }
+                    }
+                    & input[type="text"], input[type="password"], input[type="email"] {
+                        text-transform: initial;
+                        font-weight: normal;
+                        
+                        &:hover {
+                            cursor: text;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+.section-moderator-report {
+    padding: 50px;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    align-items: flex-start;
+    grid-gap: 25px;
+
+    & .box {
+        background: rgba(255,255,255,0.1);
+        border-radius: 6px;
+        padding: 25px;
+        margin-bottom: 25px;
+    
+        & .title {
+            letter-spacing: 0.25em;
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+        & .report-data {
+            display: grid;
+            grid-template-columns: auto;
+            grid-gap: 15px;
+            margin-top: 15px;
+
+            & img {
+                width: 120px;
+                justify-self: center;
+                height: 120px;
+
+                &.avatar-icon {
+                    border-radius: 50%;
+                }
+                &.song-cover {
+                    border-radius: 6px;
+                }
+            }
+
+            & .report-item {
+                display: grid;
+                grid-template-columns: 200px 1fr;
+                grid-gap: 15px;
+                padding: 10px 0px;
+
+                & .column {
+                    opacity: 0.4;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

public/assets/css/search.css

+.section-search {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-gap: 25px;
+  padding: 50px;
+}
+.section-search .search-bar form {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+}
+.section-search .search-bar form .show-all {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: 10px;
+}
+.section-search .search-bar form input {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  color: #fff;
+  background: transparent;
+  padding: 14px 28px;
+  border: 0px;
+  transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
+}
+.section-search .search-bar form input:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+.section-search .search-bar form input:focus {
+  outline: 0;
+}
+.section-search .search-bar form input::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.section-search .search-bar form .multi-select {
+  position: relative;
+  z-index: 99;
+}
+.section-search .search-bar form .multi-select .label {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px 10px;
+}
+.section-search .search-bar form .multi-select .box {
+  position: absolute;
+  z-index: 99;
+  background: #000000;
+  border-radius: 6px;
+  width: 250px;
+  left: 0px;
+  user-select: none;
+  display: none;
+}
+.section-search .search-bar form .multi-select .box .item {
+  display: grid;
+  grid-template-columns: 25px 1fr;
+  grid-gap: 25px;
+  padding: 10px;
+}
+.section-search .search-bar form .multi-select .box.active {
+  display: block;
+}
+.section-search .search-results {
+  display: grid;
+  grid-template-rows: auto auto auto 1fr;
+  grid-gap: 25px;
+}
+.section-search .search-results .search-results-users {
+  display: grid;
+}
+.section-search .search-results .search-results-songs {
+  display: grid;
+}
+.section-search .search-results .search-results-noresults {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  padding: 25px;
+}
+.section-search .search-results .search-results-noresults .noresults-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.section-search .search-results .search-results-noresults .noresults-text {
+  opacity: 0.6;
+}

public/assets/css/search.less

+.section-search {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-gap: 25px;
+    padding: 50px;
+
+    & .search-bar {
+
+        & form {
+            background: rgba(255,255,255,0.2);
+            border-radius: 4px;
+            display: grid;
+            grid-template-columns: auto auto 1fr;
+            
+            & .show-all {
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding-left: 10px;
+            }
+
+            & input {
+                font-family: 'Open Sans', sans-serif;
+                font-size: 14px;
+                color: #fff;
+                background: transparent;
+                padding: 14px 28px;
+                border: 0px;
+                transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
+            
+                &:hover {
+                    background: rgba(255,255,255,0.2);
+                    color: #fff;
+                }
+                &:focus {
+                    outline: 0;
+                }
+                &::placeholder {
+                    color: rgba(255,255,255,0.6);
+                }
+            }
+            & .multi-select {
+                position: relative;
+                z-index: 99;
+
+                & .label {
+                    height: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 0px 10px;
+                }
+                & .box {
+                    position: absolute;
+                    z-index: 99;
+                    background: rgba(0,0,0,1);
+                    border-radius: 6px;
+                    width: 250px;
+                    left: 0px;
+                    user-select: none;
+                    display: none;
+
+                    & .item {
+                        display: grid;
+                        grid-template-columns: 25px 1fr;
+                        grid-gap: 25px;
+                        padding: 10px;
+                    }
+                    &.active {
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+    & .search-results {
+        display: grid;
+        grid-template-rows: auto auto auto 1fr;
+        grid-gap: 25px;
+
+        & .search-results-users {
+            display: grid;
+        }
+
+        & .search-results-songs {
+            display: grid;
+        }
+
+        & .search-results-noresults {
+            background: rgba(255,255,255,0.1);
+            border-radius: 6px;
+            padding: 25px;
+
+            & .noresults-title {
+                font-size: 24px;
+                font-weight: bold;
+                margin-bottom: 10px;
+            }
+            & .noresults-text {
+                opacity: 0.6;
+            }
+        }
+    }
+}
\ No newline at end of file

public/assets/css/settings.css

+.section-settings {
+  padding: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.section-settings .settings-title {
+  font-size: 14px;
+  letter-spacing: 0.25em;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.section-settings .settings-box {
+  width: 600px;
+  padding: 25px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  margin-bottom: 25px;
+}
+.section-settings .settings-box .settings-item {
+  display: grid;
+  grid-template-columns: 170px 1fr;
+  grid-gap: 15px;
+  margin-top: 15px;
+}
+.section-settings .settings-box .settings-item .settings-label {
+  align-self: center;
+  opacity: 0.6;
+}
+.section-settings .settings-box .settings-item .settings-input {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 5px;
+}
+.section-settings .settings-box .settings-item .settings-input.settings-input-twobuttons {
+  grid-template-columns: 1fr auto auto;
+}
+.section-settings .settings-box .settings-item .settings-input select,
+.section-settings .settings-box .settings-item .settings-input input[type="text"],
+.section-settings .settings-box .settings-item .settings-input input[type="password"],
+.section-settings .settings-box .settings-item .settings-input input[type="email"] {
+  width: 100%;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  text-transform: uppercase;
+  font-weight: 700;
+  border-radius: 4px;
+  padding: 7px 14px;
+  border: 0px;
+  transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
+}
+.section-settings .settings-box .settings-item .settings-input select:hover,
+.section-settings .settings-box .settings-item .settings-input input[type="text"]:hover,
+.section-settings .settings-box .settings-item .settings-input input[type="password"]:hover,
+.section-settings .settings-box .settings-item .settings-input input[type="email"]:hover {
+  background: rgba(255, 255, 255, 0.4);
+  color: #fff;
+}
+.section-settings .settings-box .settings-item .settings-input select:focus,
+.section-settings .settings-box .settings-item .settings-input input[type="text"]:focus,
+.section-settings .settings-box .settings-item .settings-input input[type="password"]:focus,
+.section-settings .settings-box .settings-item .settings-input input[type="email"]:focus {
+  outline: 0;
+}
+.section-settings .settings-box .settings-item .settings-input select::placeholder,
+.section-settings .settings-box .settings-item .settings-input input[type="text"]::placeholder,
+.section-settings .settings-box .settings-item .settings-input input[type="password"]::placeholder,
+.section-settings .settings-box .settings-item .settings-input input[type="email"]::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.section-settings .settings-box .settings-item .settings-input select option,
+.section-settings .settings-box .settings-item .settings-input input[type="text"] option,
+.section-settings .settings-box .settings-item .settings-input input[type="password"] option,
+.section-settings .settings-box .settings-item .settings-input input[type="email"] option {
+  background: #222;
+  text-transform: initial;
+}
+.section-settings .settings-box .settings-item .settings-input select:disabled,
+.section-settings .settings-box .settings-item .settings-input input[type="text"]:disabled,
+.section-settings .settings-box .settings-item .settings-input input[type="password"]:disabled,
+.section-settings .settings-box .settings-item .settings-input input[type="email"]:disabled {
+  opacity: 0.4;
+}
+.section-settings .settings-box .settings-item .settings-input input[type="text"],
+.section-settings .settings-box .settings-item .settings-input input[type="password"],
+.section-settings .settings-box .settings-item .settings-input input[type="email"] {
+  text-transform: initial;
+  font-weight: normal;
+}
+.section-settings .settings-box .settings-item .settings-input input[type="text"]:hover,
+.section-settings .settings-box .settings-item .settings-input input[type="password"]:hover,
+.section-settings .settings-box .settings-item .settings-input input[type="email"]:hover {
+  cursor: text;
+}
+.section-settings .settings-box .settings-item .settings-input select:hover {
+  cursor: pointer;
+}
+.section-settings .settings-box .settings-save {
+  margin-top: 15px;
+  display: flex;
+  justify-content: flex-end;
+}
+.section-settings .settings-box .settings-save button {
+  padding: 7px 24px;
+}
+.section-settings .flashbang {
+  padding: 20px;
+  margin-bottom: 25px;
+  border: 2px solid #fff;
+  width: 600px;
+  border-radius: 6px;
+}
+.section-settings .flashbang.flashbang-success {
+  background: rgba(121, 223, 90, 0.1);
+  border-color: #79df5a;
+  color: #79df5a;
+}
+.section-settings .flashbang.flashbang-error {
+  background: rgba(197, 65, 76, 0.1);
+  border-color: #c5414c;
+  color: #c5414c;
+}

public/assets/css/settings.less

+.section-settings {
+    padding: 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    & .settings-title {
+        font-size: 14px;
+        letter-spacing: 0.25em;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+    & .settings-box {
+        width: 600px;
+        padding: 25px;
+        background: rgba(255,255,255,0.1);
+        border-radius: 6px;
+        margin-bottom: 25px;
+
+        & .settings-item {
+            display: grid;
+            grid-template-columns: 170px 1fr;
+            grid-gap: 15px;
+            margin-top: 15px;
+
+            & .settings-label {
+                align-self: center;
+                opacity: 0.6;
+            }
+            & .settings-input {
+                display: grid;
+                grid-template-columns: 1fr;
+                grid-gap: 5px;
+
+                &.settings-input-twobuttons {
+                    grid-template-columns: 1fr auto auto;
+                }
+
+                & select, & input[type="text"], & input[type="password"], & input[type="email"] {
+                    width: 100%;
+                    font-family: 'Open Sans', sans-serif;
+                    font-size: 12px;
+                    color: #fff;
+                    background: rgba(255,255,255,0.2);
+                    text-transform: uppercase;
+                    font-weight: 700;
+                    border-radius: 4px;
+                    padding: 7px 14px;
+                    border: 0px;
+                    transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
+                
+                    &:hover {
+                        background: rgba(255,255,255,0.4);
+                        color: #fff;
+                    }
+                    &:focus {
+                        outline: 0;
+                    }
+                    &::placeholder {
+                        color: rgba(255,255,255,0.6);
+                    }
+                    & option {
+                        background: #222;
+                        text-transform: initial;
+                    }
+                    &:disabled {
+                        opacity: 0.4;
+                    }
+                }
+                & input[type="text"], input[type="password"], input[type="email"] {
+                    text-transform: initial;
+                    font-weight: normal;
+                    
+                    &:hover {
+                        cursor: text;
+                    }
+                }
+                & select:hover {
+                    cursor: pointer;
+                }
+            }
+        }
+        & .settings-save {
+            margin-top: 15px;
+            display: flex;
+            justify-content: flex-end;
+
+            & button {
+                padding: 7px 24px;
+            }
+        }
+    }
+    & .flashbang {
+        padding: 20px;
+        margin-bottom: 25px;
+        border: 2px solid #fff;
+        width: 600px;
+        border-radius: 6px;
+
+        &.flashbang-success {
+            background: rgba(121, 223, 90, 0.1);
+            border-color: #79df5a;
+            color: #79df5a;
+        }
+        &.flashbang-error {
+            background: rgba(197, 65, 76, 0.1);
+            border-color: #c5414c;
+            color: #c5414c;
+        }
+    }
+}
\ No newline at end of file

public/assets/css/songdelete.css

+.section-song-delete {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 50px;
+}
+.box {
+  width: 600px;
+  background: rgba(255, 255, 255, 0.1);
+  display: grid;
+  grid-template-rows: 1fr auto;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.box .text {
+  padding: 25px;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-gap: 15px;
+}
+.box .text .title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.box .text p {
+  margin: 0px;
+  line-height: 1.5em;
+}
+.box .song-item {
+  width: 173px;
+  margin: 0 auto;
+  margin-bottom: 25px;
+}
+.box .actions {
+  padding: 25px;
+  background: rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: flex-end;
+}
+.box .actions .button {
+  margin-left: 15px;
+}
+.box .actions .button.button-primary {
+  background: #fff;
+  color: #222;
+}
+.box .actions .button.button-primary:hover {
+  opacity: 0.75;
+}

public/assets/css/songdelete.less

+.section-song-delete {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 50px;
+}
+.box {
+    width: 600px;
+    background: rgba(255,255,255,0.1);
+    display: grid;
+    grid-template-rows: 1fr auto;
+    border-radius: 6px;
+    overflow: hidden;
+
+    & .text {
+        padding: 25px;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        grid-gap: 15px;
+
+        & .title {
+            letter-spacing: 0.25em;
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+        & p {
+            margin: 0px;
+            line-height: 1.5em;
+        }
+    }
+    & .song-item {
+        width: 173px;
+        margin: 0 auto;
+        margin-bottom: 25px;
+    }
+    & .actions {
+        padding: 25px;
+        background: rgba(0,0,0,0.1);
+        display: flex;
+        justify-content: flex-end;
+
+        & .button {
+            margin-left: 15px;
+
+            &.button-primary {
+                background: #fff;
+                color: #222;
+
+                &:hover {
+                    opacity: 0.75;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

public/assets/css/songdetail.css

+.section-song-detail .song-detail-background {
+  background-size: cover;
+  background-position: center;
+}
+.section-song-detail .song-detail-background .song-detail-dim {
+  backdrop-filter: blur(10px);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #212629);
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail {
+  padding: 50px;
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  grid-gap: 25px;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-cover {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  align-self: center;
+  background: #eee;
+  border-radius: 6px;
+  background-size: cover;
+  background-position: center;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-title {
+  font-weight: bold;
+  font-size: 48px;
+  word-break: break-all;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-subtitle {
+  font-size: 20px;
+  word-break: break-all;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-artist {
+  margin-top: 5px;
+  font-size: 18px;
+  word-break: break-all;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-charter {
+  margin-top: 10px;
+  font-size: 14px;
+  opacity: 0.6;
+  word-break: break-all;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags {
+  margin-top: 10px;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags .tag {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: bold;
+  color: #222;
+  background: #fff;
+  padding: 5px 20px;
+  border-radius: 50px;
+  margin-right: 10px;
+  margin-top: 5px;
+  word-break: break-all;
+  text-decoration: none;
+  transition: 0.2s ease-in-out opacity;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags .tag:hover {
+  opacity: 0.6;
+  cursor: pointer;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-difficulties {
+  margin-top: 15px;
+  height: 20px;
+  display: flex;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-difficulties img {
+  height: 20px;
+  margin-right: 10px;
+  opacity: 0.3;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-difficulties img.active {
+  opacity: 1;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-uploader {
+  margin-top: 15px;
+  display: flex;
+}
+.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-uploader .user-item {
+  width: auto;
+  color: #fff;
+  text-decoration: none;
+  padding-right: 15px;
+}
+.section-song-detail .song-detail-actions,
+.section-song-detail .song-detail-actions-owner,
+.section-song-detail .song-detail-actions-moderator {
+  padding: 50px;
+  padding-top: 0px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-gap: 25px;
+}
+.section-song-detail .song-detail-actions.song-detail-actions-owner,
+.section-song-detail .song-detail-actions-owner.song-detail-actions-owner,
+.section-song-detail .song-detail-actions-moderator.song-detail-actions-owner {
+  grid-template-columns: 1fr 1fr 1fr 1fr 60px 60px;
+}
+.section-song-detail .song-detail-actions.song-detail-actions-moderator,
+.section-song-detail .song-detail-actions-owner.song-detail-actions-moderator,
+.section-song-detail .song-detail-actions-moderator.song-detail-actions-moderator {
+  grid-template-columns: 1fr 1fr 1fr 1fr 60px;
+}
+.section-song-detail .song-detail-actions .button,
+.section-song-detail .song-detail-actions-owner .button,
+.section-song-detail .song-detail-actions-moderator .button {
+  padding: 15px 0px;
+  font-size: 16px;
+  transition: 0.2s ease-in-out background, 0.2s ease-in-out color, 0.1s ease-in-out transform;
+}
+.section-song-detail .song-detail-actions .button.button-primary,
+.section-song-detail .song-detail-actions-owner .button.button-primary,
+.section-song-detail .song-detail-actions-moderator .button.button-primary {
+  background: #fff;
+  color: #222;
+}
+.section-song-detail .song-detail-actions .button.button-primary:hover,
+.section-song-detail .song-detail-actions-owner .button.button-primary:hover,
+.section-song-detail .song-detail-actions-moderator .button.button-primary:hover {
+  background: #fff;
+  color: #222;
+}
+.section-song-detail .song-detail-actions .button.button-icon,
+.section-song-detail .song-detail-actions-owner .button.button-icon,
+.section-song-detail .song-detail-actions-moderator .button.button-icon {
+  padding: 11px 0px;
+}
+.section-song-detail .song-detail-actions .button.button-icon i,
+.section-song-detail .song-detail-actions-owner .button.button-icon i,
+.section-song-detail .song-detail-actions-moderator .button.button-icon i {
+  font-size: 20px;
+}
+.section-song-detail .song-detail-actions .button:hover,
+.section-song-detail .song-detail-actions-owner .button:hover,
+.section-song-detail .song-detail-actions-moderator .button:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+  opacity: 0.6;
+  transform: translateY(-4px);
+}
+.section-song-detail .song-detail-actions .button:active,
+.section-song-detail .song-detail-actions-owner .button:active,
+.section-song-detail .song-detail-actions-moderator .button:active {
+  transform: translateY(-2px);
+}

public/assets/css/songdetail.less

+.section-song-detail {
+    & .song-detail-background {
+        background-size: cover;
+        background-position: center;
+
+        & .song-detail-dim {
+            backdrop-filter: blur(10px);
+            background: linear-gradient(180deg, rgba(0,0,0,0.4), #212629);
+
+            & .song-detail {
+                padding: 50px;
+                display: grid;
+                grid-template-columns: 200px 1fr;
+                grid-gap: 25px;
+
+                & .song-cover {
+                    width: 200px;
+                    height: 200px;
+                    position: relative;
+                    align-self: center;
+                    background: #eee;
+                    border-radius: 6px;
+                    background-size: cover;
+                    background-position: center;
+                }
+                & .song-meta-data {
+                    & .song-title {
+                        font-weight: bold;
+                        font-size: 48px;
+                        word-break: break-all;
+                    }
+                    & .song-subtitle {
+                        font-size: 20px;
+                        word-break: break-all;
+                    }
+                    & .song-artist {
+                        margin-top: 5px;
+                        font-size: 18px;
+                        word-break: break-all;
+                    }
+                    & .song-charter {
+                        margin-top: 10px;
+                        font-size: 14px;
+                        opacity: 0.6;
+                        word-break: break-all;
+                    }
+                    & .song-tags {
+                        margin-top: 10px;
+
+                        & .tag {
+                            display: inline-block;
+                            font-size: 12px;
+                            font-weight: bold;
+                            color: #222;
+                            background: #fff;
+                            padding: 5px 20px;
+                            border-radius: 50px;
+                            margin-right: 10px;
+                            margin-top: 5px;
+                            word-break: break-all;
+                            text-decoration: none;
+                            transition: 0.2s ease-in-out opacity;
+
+                            &:hover {
+                                opacity: 0.6;
+                                cursor: pointer;
+                            }
+                        }
+                    }
+                    & .song-difficulties {
+                        margin-top: 15px;
+                        height: 20px;
+                        display: flex;
+            
+                        & img {
+                            height: 20px;
+                            margin-right: 10px;
+                            opacity: 0.3;
+            
+                            &.active {
+                                opacity: 1;
+                            }
+                        }
+                    }
+                    & .song-uploader {
+                        margin-top: 15px;
+                        display: flex;
+
+                        & .user-item {
+                            width: auto;
+                            color: #fff;
+                            text-decoration: none;
+                            padding-right: 15px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    & .song-detail-actions, & .song-detail-actions-owner, & .song-detail-actions-moderator {
+        padding: 50px;
+        padding-top: 0px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-gap: 25px;
+
+        &.song-detail-actions-owner {
+            grid-template-columns: 1fr 1fr 1fr 1fr 60px 60px;
+        }
+
+        &.song-detail-actions-moderator {
+            grid-template-columns: 1fr 1fr 1fr 1fr 60px;
+        }
+
+        & .button {
+            padding: 15px 0px;
+            font-size: 16px;
+            transition: 0.2s ease-in-out background, 0.2s ease-in-out color, 0.1s ease-in-out transform;
+
+            &.button-primary {
+                background: #fff;
+                color: #222;
+
+                &:hover {
+                    background: #fff;
+                    color: #222;
+                }
+            }
+
+            &.button-icon {
+                padding: 11px 0px;
+
+                & i {
+                    font-size: 20px;
+                }
+            }
+
+            &:hover {
+                background: rgba(255,255,255,0.2);
+                color: #fff;
+                opacity: 0.6;
+                transform: translateY(-4px);
+            }
+            &:active {
+                transform: translateY(-2px);
+            }
+        }
+    }
+}
\ No newline at end of file

public/assets/css/startup.css

+.staff-promos {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 25px;
+  width: 1114px;
+  margin: 0 auto;
+  margin-bottom: 25px;
+}
+.staff-promos:empty {
+  display: none;
+}
+.staff-promos .staff-promo {
+  background: #fff;
+  border-radius: 6px;
+  padding: 50px;
+  height: 256px;
+  display: grid;
+  grid-template-rows: auto 100px auto;
+}
+.staff-promos .staff-promo .promo-type {
+  color: #aaa;
+  justify-self: left;
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 0.3em;
+}
+.staff-promos .staff-promo .promo-title {
+  font-weight: bold;
+  font-size: 34px;
+  justify-self: left;
+  align-self: flex-start;
+  letter-spacing: -0.025em;
+  color: #222;
+}
+.staff-promos .staff-promo .promo-button {
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+  padding: 10px 25px;
+  color: #fff;
+  background: #aaa;
+  justify-self: left;
+  border-radius: 6px;
+  transition: 0.2s ease-in-out opacity;
+  text-decoration: none;
+}
+.staff-promos .staff-promo .promo-button:hover {
+  cursor: pointer;
+  opacity: 0.6;
+}
+.song-row-new {
+  margin-bottom: 25px;
+}

public/assets/css/startup.less

+.staff-promos {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 25px;
+    width: 1114px;
+    margin: 0 auto;
+    margin-bottom: 25px;
+
+    &:empty {
+        display: none;
+    }
+
+    & .staff-promo {
+        background: #fff;
+        border-radius: 6px;
+        padding: 50px;
+        height: 256px;
+        display: grid;
+        grid-template-rows: auto 100px auto;
+
+        & .promo-type {
+            color: #aaa;
+            justify-self: left;
+            font-size: 12px;
+            font-weight: bold;
+            letter-spacing: 0.3em;
+        }
+        & .promo-title {
+            font-weight: bold;
+            font-size: 34px;
+            justify-self: left;
+            align-self: flex-start;
+            letter-spacing: -0.025em;
+            color: #222;
+        }
+        & .promo-button {
+            font-size: 14px;
+            font-weight: bold;
+            text-transform: uppercase;
+            padding: 10px 25px;
+            color: #fff;
+            background: #aaa;
+            justify-self: left;
+            border-radius: 6px;
+            transition: 0.2s ease-in-out opacity;
+            text-decoration: none;
+
+            &:hover {
+                cursor: pointer;
+                opacity: 0.6;
+            }
+        }
+    }
+}
+.song-row-new {
+    margin-bottom: 25px;
+}
\ No newline at end of file

public/assets/css/upload.css

+.section-upload {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 50px;
+}
+.box {
+  width: 700px;
+  display: grid;
+  padding: 25px;
+  grid-template-rows: auto;
+  grid-gap: 25px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+}
+.box .title {
+  letter-spacing: 0.25em;
+  font-size: 14px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.box .upload-input {
+  border: 2px dashed #fff;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  transition: 0.2s ease-in-out background;
+  position: relative;
+  width: 100%;
+  height: 160px;
+}
+.box .upload-input .upload-field {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+}
+.box .upload-input .upload-field label {
+  display: none;
+}
+.box .upload-input .upload-field input {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.box .upload-input .upload-field input:focus {
+  outline: 0;
+}
+.box .upload-input .upload-input-select,
+.box .upload-input .upload-input-selected {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  padding: 40px 0px;
+  pointer-events: none;
+  font-size: 12px;
+  text-align: center;
+  display: none;
+}
+.box .upload-input .upload-input-select .mdi,
+.box .upload-input .upload-input-selected .mdi {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 24px;
+}
+.box .upload-input .upload-input-select.active,
+.box .upload-input .upload-input-selected.active {
+  display: block;
+}
+.box .upload-input .upload-input-selected {
+  color: #79df5a;
+  padding: 50px 0px;
+}
+.box .upload-input:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+.box .upload-input.selected {
+  background: rgba(121, 223, 90, 0.1);
+  border-color: #79df5a;
+}
+.box .upload-input.selected:hover {
+  background: rgba(121, 223, 90, 0.3);
+}
+.box .tags-input .tags-field,
+.box .input .tags-field {
+  display: grid;
+  grid-template-columns: 2fr 7fr;
+  grid-gap: 25px;
+}
+.box .tags-input .tags-field label,
+.box .input .tags-field label {
+  align-self: center;
+}
+.box .tags-input .tags-field select,
+.box .input .tags-field select,
+.box .tags-input .tags-field input[type="text"],
+.box .input .tags-field input[type="text"],
+.box .tags-input .tags-field textarea,
+.box .input .tags-field textarea {
+  width: 100%;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  text-transform: uppercase;
+  font-weight: 700;
+  border-radius: 4px;
+  padding: 7px 14px;
+  border: 0px;
+  transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
+}
+.box .tags-input .tags-field select:not(:disabled):hover,
+.box .input .tags-field select:not(:disabled):hover,
+.box .tags-input .tags-field input[type="text"]:not(:disabled):hover,
+.box .input .tags-field input[type="text"]:not(:disabled):hover,
+.box .tags-input .tags-field textarea:not(:disabled):hover,
+.box .input .tags-field textarea:not(:disabled):hover {
+  background: rgba(255, 255, 255, 0.4);
+  color: #fff;
+  cursor: text;
+}
+.box .tags-input .tags-field select:focus,
+.box .input .tags-field select:focus,
+.box .tags-input .tags-field input[type="text"]:focus,
+.box .input .tags-field input[type="text"]:focus,
+.box .tags-input .tags-field textarea:focus,
+.box .input .tags-field textarea:focus {
+  outline: 0;
+}
+.box .tags-input .tags-field select::placeholder,
+.box .input .tags-field select::placeholder,
+.box .tags-input .tags-field input[type="text"]::placeholder,
+.box .input .tags-field input[type="text"]::placeholder,
+.box .tags-input .tags-field textarea::placeholder,
+.box .input .tags-field textarea::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.box .tags-input .tags-field select option,
+.box .input .tags-field select option,
+.box .tags-input .tags-field input[type="text"] option,
+.box .input .tags-field input[type="text"] option,
+.box .tags-input .tags-field textarea option,
+.box .input .tags-field textarea option {
+  background: #222;
+  text-transform: initial;
+}
+.box .tags-input .tags-field select:disabled,
+.box .input .tags-field select:disabled,
+.box .tags-input .tags-field input[type="text"]:disabled,
+.box .input .tags-field input[type="text"]:disabled,
+.box .tags-input .tags-field textarea:disabled,
+.box .input .tags-field textarea:disabled {
+  opacity: 0.4;
+}
+.box .tags-input .tags-field input[type="text"],
+.box .input .tags-field input[type="text"],
+.box .tags-input .tags-field textarea,
+.box .input .tags-field textarea {
+  text-transform: initial;
+  font-weight: normal;
+}
+.box .tags-input .input-notice,
+.box .input .input-notice {
+  margin-top: 10px;
+  text-align: right;
+  opacity: 0.6;
+  font-size: 12px;
+}
+.box .user-item {
+  margin-bottom: 15px;
+}
+.box .song-report {
+  margin-bottom: 15px;
+  display: flex;
+  justify-content: center;
+}
+.box .song-report .song-item {
+  width: 173px;
+}
+.box .actions {
+  display: flex;
+  justify-content: flex-end;
+}
+.flashbang {
+  padding: 20px;
+  margin-bottom: 25px;
+  border: 2px solid #fff;
+  border-radius: 6px;
+}
+.flashbang.flashbang-success {
+  background: rgba(121, 223, 90, 0.1);
+  border-color: #79df5a;
+  color: #79df5a;
+}
+.flashbang.flashbang-error {
+  background: rgba(197, 65, 76, 0.1);
+  border-color: #c5414c;
+  color: #c5414c;
+}

public/assets/css/upload.less

+.section-upload {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 50px;
+}
+.box {
+    width: 700px;
+    display: grid;
+    padding: 25px;
+    grid-template-rows: auto;
+    grid-gap: 25px;
+    background: rgba(255,255,255,0.1);
+    border-radius: 6px;
+
+    & .title {
+        letter-spacing: 0.25em;
+        font-size: 14px;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    & .upload-input {
+        border: 2px dashed #fff;
+        border-radius: 6px;
+        background: rgba(255,255,255,0.1);
+        transition: 0.2s ease-in-out background;
+        position: relative;
+        width: 100%;
+        height: 160px;
+
+        & .upload-field {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            right: 0px;
+            bottom: 0px;
+            & label {
+                display: none;
+            }
+            & input {
+                width: 100%;
+                height: 100%;
+                opacity: 0;
+                cursor: pointer;
+
+                &:focus {
+                    outline: 0;
+                }
+            }
+        }
+        & .upload-input-select, & .upload-input-selected {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            right: 0px;
+            bottom: 0px;
+            padding: 40px 0px;
+            pointer-events: none;
+            font-size: 12px;
+            text-align: center;
+            display: none;
+
+            & .mdi {
+                display: block;
+                margin-bottom: 10px;
+                font-size: 24px;
+            }
+
+            &.active {
+                display: block;
+            }
+        }
+        & .upload-input-selected {
+            color: #79df5a;
+            padding: 50px 0px;
+        }
+        &:hover {
+            background: rgba(255,255,255,0.3);
+        }
+
+        &.selected {
+            background: rgba(121, 223, 90, 0.1);
+            border-color: #79df5a;
+
+            &:hover {
+                background: rgba(121, 223, 90, 0.3);
+            }
+        }
+    }
+    & .tags-input, & .input {
+        & .tags-field {
+            display: grid;
+            grid-template-columns: 2fr 7fr;
+            grid-gap: 25px;
+
+            & label {
+                align-self: center;
+            }
+            & select, & input[type="text"], & textarea {
+                width: 100%;
+                font-family: 'Open Sans', sans-serif;
+                font-size: 12px;
+                color: #fff;
+                background: rgba(255,255,255,0.2);
+                text-transform: uppercase;
+                font-weight: 700;
+                border-radius: 4px;
+                padding: 7px 14px;
+                border: 0px;
+                transition: 0.2s ease-in-out background, 0.2s ease-in-out color;
+            
+                &:not(:disabled):hover {
+                    background: rgba(255,255,255,0.4);
+                    color: #fff;
+                    cursor: text;
+                }
+                &:focus {
+                    outline: 0;
+                }
+                &::placeholder {
+                    color: rgba(255,255,255,0.6);
+                }
+                & option {
+                    background: #222;
+                    text-transform: initial;
+                }
+                &:disabled {
+                    opacity: 0.4;
+                }
+            }
+            & input[type="text"], & textarea {
+                text-transform: initial;
+                font-weight: normal;
+            }
+        }
+        & .input-notice {
+            margin-top: 10px;
+            text-align: right;
+            opacity: 0.6;
+            font-size: 12px;
+        }
+    }
+    & .user-item {
+        margin-bottom: 15px;
+    }
+    & .song-report {
+        margin-bottom: 15px;
+        display: flex;
+        justify-content: center;
+
+        & .song-item {
+            width: 173px;
+        }
+    }
+    & .actions {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+.flashbang {
+    padding: 20px;
+    margin-bottom: 25px;
+    border: 2px solid #fff;
+    border-radius: 6px;
+
+    &.flashbang-success {
+        background: rgba(121, 223, 90, 0.1);
+        border-color: #79df5a;
+        color: #79df5a;
+    }
+    &.flashbang-error {
+        background: rgba(197, 65, 76, 0.1);
+        border-color: #c5414c;
+        color: #c5414c;
+    }
+}
\ No newline at end of file

public/assets/css/userdetail.css

+.section-user-detail .user-detail-background {
+  background-size: cover;
+  background-position: center;
+}
+.section-user-detail .user-detail-background .user-detail-dim {
+  backdrop-filter: blur(10px);
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #212629);
+}
+.section-user-detail .user-detail-background .user-detail-dim .user-detail {
+  padding: 50px;
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  grid-gap: 25px;
+}
+.section-user-detail .user-detail-background .user-detail-dim .user-detail .user-avatar {
+  width: 200px;
+  height: 200px;
+  align-self: center;
+  background: #eee;
+  border-radius: 50%;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  overflow: hidden;
+}
+.section-user-detail .user-detail-background .user-detail-dim .user-detail .user-avatar .user-avatar-change {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  right: 0px;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  transition: 0.2s ease opacity;
+  cursor: pointer;
+}
+.section-user-detail .user-detail-background .user-detail-dim .user-detail .user-avatar .user-avatar-change .mdi {
+  font-size: 48px;
+}
+.section-user-detail .user-detail-background .user-detail-dim .user-detail .user-avatar .user-avatar-change input {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  bottom: 0px;
+  right: 0px;
+  cursor: pointer;
+  opacity: 0;
+}
+.section-user-detail .user-detail-background .user-detail-dim .user-detail .user-avatar:hover .user-avatar-change {
+  opacity: 1;
+}
+.section-user-detail .user-detail-background .user-detail-dim .user-detail .user-meta-data {
+  display: flex;
+  height: 48px;
+  align-items: center;
+}
+.section-user-detail .user-detail-background .user-detail-dim .user-detail .user-meta-data .user-name {
+  font-weight: bold;
+  font-size: 48px;
+}
+.section-user-detail .user-detail-background .user-detail-dim .user-detail .user-meta-data .user-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  margin-left: 20px;
+}
+.section-user-detail .user-detail-actions,
+.section-user-detail .user-detail-actions-moderation {
+  padding: 50px;
+  padding-top: 0px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-gap: 25px;
+}
+.section-user-detail .user-detail-actions.user-detail-actions-moderation,
+.section-user-detail .user-detail-actions-moderation.user-detail-actions-moderation {
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+}
+.section-user-detail .user-detail-actions .button,
+.section-user-detail .user-detail-actions-moderation .button {
+  padding: 15px 0px;
+  font-size: 16px;
+  transition: 0.2s ease-in-out background, 0.2s ease-in-out color, 0.1s ease-in-out transform;
+}
+.section-user-detail .user-detail-actions .button.button-primary,
+.section-user-detail .user-detail-actions-moderation .button.button-primary {
+  background: #fff;
+  color: #222;
+}
+.section-user-detail .user-detail-actions .button.button-primary:hover,
+.section-user-detail .user-detail-actions-moderation .button.button-primary:hover {
+  background: #fff;
+  color: #222;
+}
+.section-user-detail .user-detail-actions .button:hover,
+.section-user-detail .user-detail-actions-moderation .button:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+  opacity: 0.6;
+  transform: translateY(-4px);
+}
+.section-user-detail .user-detail-actions .button:active,
+.section-user-detail .user-detail-actions-moderation .button:active {
+  transform: translateY(-2px);
+}
+.section-user-detail .song-row-user {
+  padding: 0px 50px;
+  margin-bottom: 50px;
+  display: grid;
+}

public/assets/css/userdetail.less

+.section-user-detail {
+    & .user-detail-background {
+        background-size: cover;
+        background-position: center;
+
+        & .user-detail-dim {
+            backdrop-filter: blur(10px);
+            background: linear-gradient(180deg, rgba(0,0,0,0.4), #212629);
+
+            & .user-detail {
+                padding: 50px;
+                display: grid;
+                grid-template-columns: 200px 1fr;
+                grid-gap: 25px;
+
+                & .user-avatar {
+                    width: 200px;
+                    height: 200px;
+                    align-self: center;
+                    background: #eee;
+                    border-radius: 50%;
+                    background-size: cover;
+                    background-position: center;
+                    position: relative;
+                    overflow: hidden;
+
+                    & .user-avatar-change {
+                        position: absolute;
+                        top: 0px;
+                        left: 0px;
+                        bottom: 0px;
+                        right: 0px;
+                        background: rgba(0,0,0,0.6);
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        opacity: 0;
+                        transition: 0.2s ease opacity;
+                        cursor: pointer;
+
+                        & .mdi {
+                            font-size: 48px;
+                        }
+                        & input {
+                            position: absolute;
+                            top: 0px;
+                            left: 0px;
+                            bottom: 0px;
+                            right: 0px;
+                            cursor: pointer;
+                            opacity: 0;
+                        }
+                    }
+                    &:hover {
+                        & .user-avatar-change {
+                            opacity: 1;
+                        }
+                    }
+                }
+                & .user-meta-data {
+                    display: flex;
+                    height: 48px;
+                    align-items: center;
+                    
+                    & .user-name {
+                        font-weight: bold;
+                        font-size: 48px;
+                    }
+                    & .user-badge {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 32px;
+                        margin-left: 20px;
+                    }
+                }
+            }
+        }
+    }
+    & .user-detail-actions, & .user-detail-actions-moderation {
+        padding: 50px;
+        padding-top: 0px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-gap: 25px;
+
+        &.user-detail-actions-moderation {
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        }
+        & .button {
+            padding: 15px 0px;
+            font-size: 16px;
+            transition: 0.2s ease-in-out background, 0.2s ease-in-out color, 0.1s ease-in-out transform;
+
+            &.button-primary {
+                background: #fff;
+                color: #222;
+
+                &:hover {
+                    background: #fff;
+                    color: #222;
+                }
+            }
+
+            &:hover {
+                background: rgba(255,255,255,0.2);
+                color: #fff;
+                opacity: 0.6;
+                transform: translateY(-4px);
+            }
+            &:active {
+                transform: translateY(-2px);
+            }
+        }
+    }
+
+    & .song-row-user {
+        padding: 0px 50px;
+        margin-bottom: 50px;
+        display: grid;
+    }
+}
\ No newline at end of file

public/assets/img/difficultyEasy.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M122.89,100l-48.5-84c-4.62-8-16.17-8-20.78,0l-48.5,84c-4.62,8,1.15,18,10.39,18h96.99
+		C121.74,118,127.51,108,122.89,100z M77.62,59.2H58.48v9.96H75.7v7.68H58.48v9.96h19.14v7.68H50.38V51.52h27.24V59.2z"/>
+</g>
+</svg>

public/assets/img/difficultyExtreme.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M120.95,43.09L71.05,6.84c-4.21-3.06-9.9-3.06-14.11,0L7.05,43.09c-4.21,3.06-5.97,8.47-4.36,13.42
+		l19.06,58.65c1.61,4.94,6.21,8.29,11.41,8.29h61.67c5.2,0,9.81-3.35,11.41-8.29l19.06-58.65
+		C126.91,51.56,125.15,46.15,120.95,43.09z M56.9,56.51H37.76v9.96h17.22v7.68H37.76v9.96H56.9v7.68H29.66V48.83H56.9V56.51z
+		 M90.26,91.79L80.9,76.31h-0.48l-9.36,15.48H60.98l14.1-22.44L62.06,48.83h10.02l8.34,14.04h0.48l8.34-14.04h10.02L86.24,69.35
+		l14.1,22.44H90.26z"/>
+</g>
+</svg>

public/assets/img/difficultyHard.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M120.95,43.09L71.05,6.84c-4.21-3.06-9.9-3.06-14.11,0L7.05,43.09c-4.21,3.06-5.97,8.47-4.36,13.42
+		l19.06,58.65c1.61,4.94,6.21,8.29,11.41,8.29h61.67c5.2,0,9.81-3.35,11.41-8.29l19.06-58.65
+		C126.91,51.56,125.15,46.15,120.95,43.09z M81.13,92.48h-8.1V74.36H54.97v18.12h-8.1V49.52h8.1v17.16h18.06V49.52h8.1V92.48z"/>
+</g>
+</svg>

public/assets/img/difficultyNormal.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M119.51,55.51L72.49,8.49C67.8,3.8,60.2,3.8,55.51,8.49L8.49,55.51C3.8,60.2,3.8,67.8,8.49,72.49l47.03,47.03
+		c4.69,4.69,12.28,4.69,16.97,0l47.03-47.03C124.2,67.8,124.2,60.2,119.51,55.51z M81.37,85.48h-8.52L54.61,55.06h-0.48l0.48,8.28
+		v22.14h-7.98V42.52h9.42l17.28,28.8h0.48l-0.48-8.28V42.52h8.04V85.48z"/>
+</g>
+</svg>

public/assets/img/difficultyXD.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M113.43,28.35L70,3.27c-3.71-2.14-8.29-2.14-12,0L14.57,28.35c-3.71,2.14-6,6.11-6,10.39v50.14
+			c0,4.29,2.29,8.25,6,10.39L58,124.35c3.71,2.14,8.29,2.14,12,0l43.43-25.07c3.71-2.14,6-6.11,6-10.39V38.74
+			C119.43,34.45,117.14,30.49,113.43,28.35z M52.66,85.29L43.3,69.81h-0.48l-9.36,15.48H23.38l14.1-22.44L24.46,42.33h10.02
+			l8.34,14.04h0.48l8.34-14.04h10.02L48.64,62.85l14.1,22.44H52.66z M103.09,72.57c-1.02,2.64-2.49,4.9-4.41,6.78
+			c-1.92,1.88-4.24,3.34-6.96,4.38s-5.78,1.56-9.18,1.56H68.02V42.33h14.52c3.4,0,6.46,0.52,9.18,1.56s5.04,2.51,6.96,4.41
+			s3.39,4.17,4.41,6.81c1.02,2.64,1.53,5.54,1.53,8.7C104.62,67.01,104.11,69.93,103.09,72.57z"/>
+	</g>
+	<g>
+		<path class="st0" d="M92.92,53.79c-1.2-1.2-2.7-2.13-4.5-2.79s-3.88-0.99-6.24-0.99h-6.06v27.6h6.06c2.36,0,4.44-0.33,6.24-0.99
+			s3.3-1.59,4.5-2.79s2.1-2.65,2.7-4.35s0.9-3.59,0.9-5.67s-0.3-3.97-0.9-5.67S94.12,54.99,92.92,53.79z"/>
+	</g>
+</g>
+</svg>

public/assets/img/illustration-confirm.svg

+<svg id="b9950e65-c983-427f-969f-411e60d4718f" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="733.51" height="728.97" viewBox="0 0 733.51 728.97"><defs><linearGradient id="1e50e1f7-79f5-452b-a40c-a2d98084d9bb" x1="383.47" y1="728.97" x2="383.47" y2="400.92" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="065ea879-0bf6-43b6-9672-9e36e849f5ca" x1="238.26" y1="361.82" x2="838.21" y2="361.82" xlink:href="#1e50e1f7-79f5-452b-a40c-a2d98084d9bb"/><linearGradient id="459818a5-69c2-4f7f-8bb2-5507c3d29640" x1="465.73" y1="249.13" x2="465.73" y2="125.75" xlink:href="#1e50e1f7-79f5-452b-a40c-a2d98084d9bb"/><linearGradient id="2f211934-bfe1-48dc-bf69-4a6889a77622" x1="264.33" y1="382.43" x2="264.33" y2="305.75" gradientTransform="matrix(0, -1, -1, 0, 760.81, 597.66)" xlink:href="#1e50e1f7-79f5-452b-a40c-a2d98084d9bb"/><linearGradient id="fdaec826-1474-477a-aab7-79681abb65ed" x1="212.21" y1="392.96" x2="212.21" y2="316.28" gradientTransform="matrix(0, -1, -1, 0, 821.81, 562.29)" xlink:href="#1e50e1f7-79f5-452b-a40c-a2d98084d9bb"/><linearGradient id="230aae4a-4ba3-43a0-a33b-500e3dc2a25d" x1="295.6" y1="440.27" x2="295.6" y2="336.33" gradientTransform="matrix(0, -1, -1, 0, 768.63, 669.04)" xlink:href="#1e50e1f7-79f5-452b-a40c-a2d98084d9bb"/><linearGradient id="598da11b-697d-4f9c-9fd7-d6849a884081" x1="224.95" y1="454.54" x2="224.95" y2="350.6" gradientTransform="matrix(0, -1, -1, 0, 851.31, 621.1)" xlink:href="#1e50e1f7-79f5-452b-a40c-a2d98084d9bb"/><linearGradient id="1b1d52ac-2d33-4d8b-a499-27df2fc326e7" x1="627.39" y1="372.38" x2="627.39" y2="313.03" gradientTransform="matrix(-0.65, 0.76, 0.76, 0.65, 837.43, -649.66)" xlink:href="#1e50e1f7-79f5-452b-a40c-a2d98084d9bb"/><linearGradient id="72adf1b2-6031-4d64-80db-157af34e8b1b" x1="303.02" y1="618.34" x2="303.02" y2="531.38" gradientTransform="translate(117.27 -574.84) rotate(32.36)" xlink:href="#1e50e1f7-79f5-452b-a40c-a2d98084d9bb"/></defs><title>mail box</title><rect x="346.26" y="400.92" width="74.42" height="328.05" fill="url(#1e50e1f7-79f5-452b-a40c-a2d98084d9bb)"/><rect x="353.11" y="400.92" width="62.67" height="322.18" fill="#eceff1"/><path d="M779.59,228.64H444.43A88.94,88.94,0,0,0,411,236.09c-34.07,15.1-53.9,38.8-59.5,91.36V448.88l-88.81-.94c-17.86,0-24.39,28.08-24.39,47.06H838.21V290.93C838.21,256.53,812,228.64,779.59,228.64Z" transform="translate(-185.78 -83.31)" fill="url(#065ea879-0bf6-43b6-9672-9e36e849f5ca)"/><path d="M270.85,158.06H602.93a40.68,40.68,0,0,1,40.68,40.68V400.92a0,0,0,0,1,0,0H270.85a0,0,0,0,1,0,0V158.06A0,0,0,0,1,270.85,158.06Z" fill="#ffffff"/><path d="M263,158.06h0a90.09,90.09,0,0,1,90.09,90.09V356.83A44.09,44.09,0,0,1,309,400.92H217a44.09,44.09,0,0,1-44.09-44.09V248.15A90.09,90.09,0,0,1,263,158.06Z" fill="#ffffff"/><path d="M263,158.06h0a90.09,90.09,0,0,1,90.09,90.09V356.83A44.09,44.09,0,0,1,309,400.92H217a44.09,44.09,0,0,1-44.09-44.09V248.15A90.09,90.09,0,0,1,263,158.06Z" opacity="0.2"/><polygon points="502.94 125.75 456.43 125.75 428.52 125.75 428.52 181.06 428.52 249.13 462.3 249.13 462.3 181.06 502.94 181.06 502.94 125.75" fill="url(#459818a5-69c2-4f7f-8bb2-5507c3d29640)"/><polygon points="497.06 125.75 457.89 125.75 434.39 125.75 434.39 176.67 434.39 239.34 457.89 239.34 457.89 176.67 497.06 176.67 497.06 125.75" fill="#ffcc80"/><rect x="378.38" y="270.95" width="76.68" height="124.77" transform="translate(-150.31 623.41) rotate(-83.06)" fill="url(#2f211934-bfe1-48dc-bf69-4a6889a77622)"/><rect x="380.44" y="272.35" width="71.56" height="120.54" transform="translate(-150.04 622.28) rotate(-83.06)" fill="#faf8e4"/><g opacity="0.6"><rect x="364.5" y="296.74" width="15.34" height="11.35" transform="translate(519.27 564.29) rotate(-173.06)" fill="#ffffff"/><rect x="373.69" y="330.46" width="58.89" height="3.68" transform="translate(577.37 627.57) rotate(-173.06)" fill="#ffffff"/><rect x="388.54" y="340.56" width="42.94" height="2.45" transform="translate(589.93 647.31) rotate(-173.06)" fill="#ffffff"/></g><rect x="428.85" y="287.7" width="76.68" height="124.77" transform="translate(-122.57 688.23) rotate(-83.06)" fill="url(#fdaec826-1474-477a-aab7-79681abb65ed)"/><rect x="430.91" y="289.1" width="71.56" height="120.54" transform="translate(-122.3 687.11) rotate(-83.06)" fill="#faf8e4"/><g opacity="0.6"><rect x="414.96" y="313.49" width="15.34" height="11.35" transform="translate(617.81 603.77) rotate(-173.06)" fill="#ffffff"/><rect x="424.15" y="347.21" width="58.89" height="3.68" transform="translate(675.91 667.05) rotate(-173.06)" fill="#ffffff"/><rect x="439.01" y="357.31" width="42.94" height="2.45" transform="translate(688.46 686.79) rotate(-173.06)" fill="#ffffff"/></g><rect x="328.36" y="288.88" width="103.94" height="169.12" transform="translate(-222.12 622.55) rotate(-83.06)" fill="url(#230aae4a-4ba3-43a0-a33b-500e3dc2a25d)"/><rect x="331.16" y="290.78" width="97.01" height="163.39" transform="translate(-221.75 621.02) rotate(-83.06)" fill="#fff"/><g opacity="0.6"><rect x="309.54" y="323.84" width="20.79" height="15.38" transform="translate(411.67 616) rotate(-173.06)" fill="#ffffff"/><rect x="322" y="369.54" width="79.83" height="4.99" transform="translate(490.42 701.78) rotate(-173.06)" fill="#ffffff"/><rect x="342.13" y="383.24" width="58.21" height="3.33" transform="translate(507.45 728.54) rotate(-173.06)" fill="#ffffff"/></g><rect x="396.77" y="311.59" width="103.94" height="169.12" transform="translate(-184.52 710.41) rotate(-83.06)" fill="url(#598da11b-697d-4f9c-9fd7-d6849a884081)"/><rect x="399.56" y="313.48" width="97.01" height="163.39" transform="translate(-184.15 708.89) rotate(-83.06)" fill="#fff"/><g opacity="0.6"><rect x="377.95" y="346.55" width="20.79" height="15.38" transform="translate(545.24 669.52) rotate(-173.06)" fill="#ffffff"/><rect x="390.41" y="392.25" width="79.83" height="4.99" transform="translate(623.99 755.3) rotate(-173.06)" fill="#ffffff"/><rect x="410.54" y="405.94" width="58.21" height="3.33" transform="translate(641.02 782.05) rotate(-173.06)" fill="#ffffff"/></g><path d="M447.82,242.35h0a89.8,89.8,0,0,0-34.35,6.8,90.77,90.77,0,0,1,12.81-.92h0a90.09,90.09,0,0,1,90.09,90.09v143h21.54V332.44A90.09,90.09,0,0,0,447.82,242.35Z" transform="translate(-185.78 -83.31)" opacity="0.2"/><path d="M94.59,369.58H353.11a0,0,0,0,1,0,0v31.34a0,0,0,0,1,0,0H63.25a0,0,0,0,1,0,0v0A31.34,31.34,0,0,1,94.59,369.58Z" fill="#ffffff"/><path d="M94.59,369.58H353.11a0,0,0,0,1,0,0v31.34a0,0,0,0,1,0,0H63.25a0,0,0,0,1,0,0v0A31.34,31.34,0,0,1,94.59,369.58Z" fill="#fff" opacity="0.2"/><polygon points="657.37 70.58 654.4 72.03 654.74 71.42 654.48 71.5 654.85 71.23 694.87 0 715.33 17.45 732.89 33.7 727.85 36.16 733.51 46.15 657.37 70.58" fill="url(#1b1d52ac-2d33-4d8b-a499-27df2fc326e7)"/><polygon points="713.31 19.31 729.35 34.19 656.63 70.34 695.33 20.74 713.31 19.31" fill="#ffffff"/><polygon points="713.31 19.31 729.35 34.19 656.63 70.34 695.33 20.74 713.31 19.31" opacity="0.2"/><polygon points="694.59 3.35 656.63 70.34 713.31 19.31 694.59 3.35" fill="#ffffff"/><polygon points="729.82 45.7 656.71 69.85 717.82 24.23 729.82 45.7" fill="#ffffff"/><polygon points="121.67 86.97 126.45 87.71 125.71 87.01 126.12 87.01 125.48 86.79 38.62 4.42 17.54 37.69 0 68.04 8.12 69.3 4.52 85.74 121.67 86.97" fill="url(#72adf1b2-6031-4d64-80db-157af34e8b1b)"/><polygon points="21.18 39.42 5.16 67.19 122.6 86.31 46.96 33.64 21.18 39.42" fill="#ffffff"/><polygon points="21.18 39.42 5.16 67.19 122.6 86.31 46.96 33.64 21.18 39.42" opacity="0.2"/><polygon points="40.47 8.99 122.6 86.31 21.18 39.42 40.47 8.99" fill="#ffffff"/><polygon points="9.49 83.51 122.28 85.67 16.99 48.27 9.49 83.51" fill="#ffffff"/></svg>
\ No newline at end of file

public/assets/img/illustration-login.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="aee07f99-5223-45c5-8204-b56b0229636c"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 705.6 714.2"
+	 style="enable-background:new 0 0 705.6 714.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;}
+	.st1{fill:#E6E6E6;}
+	.st2{fill:#FFFFFF;}
+	.st3{opacity:0.2;enable-background:new    ;}
+	.st4{fill:#575A89;}
+	.st5{fill:#FFB9B9;}
+	.st6{fill:#2F2E41;}
+	.st7{opacity:0.1;enable-background:new    ;}
+</style>
+<ellipse class="st0" cx="153.8" cy="699.2" rx="92.3" ry="15"/>
+<polygon class="st1" points="705.6,632.3 334,554.9 334,193.9 705.6,0 "/>
+<polygon class="st2" points="704.7,37.9 333.1,215.8 333.1,194.8 704.7,1.2 "/>
+<path class="st1" d="M350.3,197.6c0,4.8-1.6,9.5-3.6,10.5c-2,0.9-3.6-2.1-3.6-6.9s1.6-9.4,3.6-10.4
+	C348.6,189.7,350.3,192.7,350.3,197.6z"/>
+<path class="st1" d="M364.7,190.3c0,4.7-1.6,9.3-3.6,10.2c-2,0.9-3.6-2-3.6-6.7s1.6-9.2,3.6-10.2
+	C363.1,182.7,364.7,185.7,364.7,190.3z"/>
+<path class="st1" d="M379.1,183.1c0,4.7-1.6,9.3-3.6,10.2c-2,0.9-3.6-2-3.6-6.7s1.6-9.2,3.6-10.2
+	C377.5,175.5,379.1,178.5,379.1,183.1z"/>
+<polygon class="st3" points="609.1,281.5 380.1,333.9 380.1,267 609.1,186 "/>
+<polygon class="st2" points="604.6,276.9 375.5,329.3 375.5,262.5 604.6,181.5 "/>
+<path class="st3" d="M417.9,287.9c0,10.8-4.1,20.5-9,21.8c-4.9,1.2-8.7-6.2-8.7-16.7s3.9-20.2,8.7-21.7
+	C413.8,269.7,417.9,277.1,417.9,287.9z"/>
+<path class="st2" d="M415.2,285.1c0,10.8-4.1,20.5-9,21.8c-4.9,1.2-8.7-6.2-8.7-16.7s3.9-20.2,8.7-21.7
+	C411.1,266.9,415.2,274.4,415.2,285.1z"/>
+<polygon class="st1" points="549.6,246.9 439.5,278.7 439.5,267.5 549.6,233.6 "/>
+<polygon class="st1" points="524.3,279.1 459.4,295.5 459.4,283.9 524.3,266.3 "/>
+<polygon class="st3" points="609.2,520.5 380.1,501.3 380.1,367.1 609.2,328.9 "/>
+<polygon class="st2" points="603.7,515.9 374.6,496.7 374.6,362.6 603.7,324.4 "/>
+<polygon class="st3" points="412.5,400.5 401.8,401.5 401.8,389.8 412.5,388.5 "/>
+<polygon class="st2" points="410.7,398.7 400,399.7 400,388 410.7,386.7 "/>
+<polygon class="st1" points="549.6,385.5 421.5,397.4 421.5,386.5 549.6,372.1 "/>
+<polygon class="st1" points="549.6,428.9 421.5,433.1 421.5,422.2 549.6,415.6 "/>
+<polygon class="st1" points="549.6,473.5 421.5,469.6 421.5,458.7 549.6,460.2 "/>
+<polygon class="st4" points="143.4,329.2 118.9,329.2 118.9,317.2 139.4,317.2 143.9,319.7 "/>
+<polygon class="st5" points="100.8,659.9 101.8,677.9 116.9,674.9 114.3,656.9 "/>
+<path class="st5" d="M171.9,650.4c0,0,0.5,15-1,19s4,6,4,6h12l7,1v-7.5c0,0-8-12.5-8-19.5S171.9,650.4,171.9,650.4z"/>
+<path class="st6" d="M103.3,674.9c0,0,10-4.7,13.5-1.9s16.5,27.4,11.5,28.9c0,0-3.5,6-15.5,2s-12-8.5-12-8.5s-3.5-3-3.5-4
+	s1.5-10,1.5-10s1.1-7.5,2.8-7L103.3,674.9z"/>
+<path class="st6" d="M172.9,667.4c0,0-1.5-1.5-2.5,0s-6.5,20.5-1.5,21.5s12.5,4.5,13.5,3.5c0.8-1.1,1.5-2.2,2-3.5
+	c0,0,8,3.5,10.5,6.5s32.5,9.5,31.5,0s-16-17.5-16-17.5l-16.5-11c0,0-6.5,0.5-8,3.5S173.9,672.9,172.9,667.4z"/>
+<path class="st4" d="M26.3,473.8c0,0-5.5,7-4.5,7.5s23,5.5,35,2.5s37-2.5,38.5-6s20-47,20-47l-6-33l-6.5-8.5l-15-13l-30,56
+	L26.3,473.8z"/>
+<path class="st7" d="M26.3,473.8c0,0-5.5,7-4.5,7.5s23,5.5,35,2.5s37-2.5,38.5-6s20-47,20-47l-6-33l-6.5-8.5l-15-13l-30,56
+	L26.3,473.8z"/>
+<path class="st6" d="M89.8,461.8c0,0-7,25,0,59.5s0.5,42,2,43.5s2,1,2,2.5s1.5,8.5,0,11s-1.5,82,3,84s17.5,7,20,0s0.5-57.5,1.5-60
+	s1-8.5,1-10s3-18.5,3.5-23s2-13.5,2-13.5s-1-35.5,2-46c3-10.5,4-11.5,4-11.5l24,62.5c0,0-2,6.5,0,8.5s-0.5,1.5,1.5,5s4,4.5,4,6.5
+	s-2,2-1,3.5s2.5,7,2.5,7l-2.5,6c0,0,1.5,12.5,3.5,20s2,38,4.5,38.5s22,6,22-5.5s-1.5-61.5-1.5-61.5s-3-7.5-3-9.5s-0.5-3,0.5-4
+	s2-3,0.5-4.5s-1-3.5-1-5.5c-0.1-2.7-0.4-5.4-1-8c-0.5-2-10-64.5-10-64.5s2-7.5,0-8s-2-4.5-2-6.5s5-27-1-27S89.8,461.8,89.8,461.8z"
+	/>
+<path class="st5" d="M23.8,431.8l-7,3.5c0,0-25,13.5-14,21s22-10.5,22-10.5l10.5-8L23.8,431.8z"/>
+<path class="st5" d="M121.4,294.7c0,0-2,23-12.5,28s-3.5,42.5-3.5,42.5l14.5,14l25.5-7.5l3-17l2.5-17.5l-6-9c0,0-7.5-2-4.5-22
+	S121.4,294.7,121.4,294.7z"/>
+<path class="st2" d="M106.3,330.7c0,0,11.5,38,19.5,38s12.5-9,13.5-20s7.5-23,7.5-23l15.5,14c0,0,12.5,110.6,11.5,113.6
+	s-40,6.5-55.5,11s-31,1-31-1.5c0-2.2,7.9-21.5,1.9-35.6c-2.2-5-3.7-10.3-4.4-15.8c-0.9-7.4-1.8-16.4-1-19.2c1.5-5,9.5-58,9.5-58
+	L106.3,330.7z"/>
+<path class="st4" d="M114.8,316.9c0,0-9,4.8-13,6.8s-28.5,8-29,11s3.5,45,1.5,49.5s-22,44.5-22,44.5l-1,8.5c0,0-33,39.5-29,44
+	s19-14,19-14s33.5-53.5,34.5-55.5s21.5-39,24.5-40s10-43,11-45S116.3,316.2,114.8,316.9z"/>
+<path class="st4" d="M75.3,334.3h-3c0,0-11,42-14,47.5s-3.5,14.5-4,16s-2.5,1-3,4.5s-5.5,8-9.5,10s-22,19-21.5,19.5s6,18,9.5,18
+	s17.5-17,19-17s8-6,9-6.5s26.5-47.5,25.5-59S75.3,334.3,75.3,334.3z"/>
+<path class="st5" d="M200.1,463.8l6.2,4.8c0,0,21.8,18.2,9.5,23.4s-19.5-14.7-19.5-14.7l-8.7-9.9L200.1,463.8z"/>
+<path class="st4" d="M139.8,317.5c0,0,6.6,3.2,9.6,5.7s26,9,26,11s-2.5,33-2.5,33l3.5,55c0,0,5,62,6,63.5s2.5,9.5,0,9.5
+	s-15-14-14.5-21s4-23,0.5-27s-20-71-20-75s-7-44-6.5-45S139.8,317.5,139.8,317.5z"/>
+<path class="st4" d="M167.9,333.8l7.5,0.5l18.5,75.5c0,0,1.5,9.5,2,10.5s8,44.5,5,46s-13,7-13.5,3.5s-5.5-23-10.5-27.5s-10-82-10-82
+	L167.9,333.8z"/>
+<circle class="st5" cx="137.9" cy="287.7" r="20.5"/>
+<path class="st6" d="M123.5,289.2c1.3-0.7,3,0,4.2,1.4c2.3-10.8,12.9-17.8,23.7-15.5c1.9,0.4,3.7,1.1,5.4,2V275
+	c0-9.6-7.8-17.3-17.3-17.3h-4.2c-18,0-32.5,14.6-32.5,32.5c0,0,0,0,0,0v5.8c0,11,6.2,21,16,26l18.7-9.9c-5.5-3.1-9.2-8.6-10-14.9
+	c-1.6,0.7-3.7-0.4-4.8-2.6C121.6,292.5,122,290,123.5,289.2z"/>
+</svg>

public/assets/js/search.js

+let DOMSearchDifficultiesSelect = document.querySelector(".multi-select-difficulties");
+
+function ToggleDifficultiesBox() {
+    if(DOMSearchDifficultiesSelect.querySelector(".box").classList.contains("active")) {
+        DOMSearchDifficultiesSelect.querySelector(".box").classList.remove("active");
+    } else {
+        DOMSearchDifficultiesSelect.querySelector(".box").classList.add("active");
+    }
+}
\ No newline at end of file

public/assets/js/tooltip.js

+let DOMtooltipElements = document.querySelectorAll("*[data-tooltip]");
+let DOMtooltip = document.querySelector(".tooltip");
+
+DOMtooltipElements.forEach(function(item) {
+    item.addEventListener('mouseover', function(event) {
+        ShowTooltip(item);
+    });
+    item.addEventListener('mouseout', function(event) {
+        HideTooltip(item);
+    });
+});
+
+function ShowTooltip(_tooltipItem) {
+    let tooltipPosition = _tooltipItem.dataset.tooltipposition;
+
+    DOMtooltip.innerHTML = _tooltipItem.dataset.tooltip;
+    DOMtooltip.classList.add("active");
+
+    switch(tooltipPosition) {
+        default:
+        case "top":
+            DOMtooltip.classList.add("tooltip-top");
+            DOMtooltip.style.top = (_tooltipItem.clientY - (_tooltipItem.getBoundingClientRect().height - 15)) + "px";
+            DOMtooltip.style.left = (_tooltipItem.clientX + (_tooltipItem.getBoundingClientRect().width / 2) - (DOMtooltip.getBoundingClientRect().width / 2)) + "px";
+            break;
+        case "right":
+            DOMtooltip.classList.add("tooltip-right");
+            DOMtooltip.style.top = (_tooltipItem.getBoundingClientRect().y + (_tooltipItem.getBoundingClientRect().height / 2) - (DOMtooltip.getBoundingClientRect().height / 2)) + "px";
+            DOMtooltip.style.left = (_tooltipItem.getBoundingClientRect().x + _tooltipItem.getBoundingClientRect().width - 5) + "px";
+            break;
+    }
+}
+function HideTooltip(_tooltipItem) {
+    DOMtooltip.classList.remove("active");
+    DOMtooltip.classList.remove("tooltip-top");
+    DOMtooltip.classList.remove("tooltip-right");
+}
\ No newline at end of file

public/assets/js/upload.js

+let DOMUploadInput = document.querySelector("input[type=file");
+let DOMUploadInputHolder = document.querySelector(".upload-input");
+let DOMUploadInputSelect = document.querySelector(".upload-input-select");
+let DOMUploadInputSelected = document.querySelector(".upload-input-selected");
+let DOMUploadInputSelectedFilename = DOMUploadInputSelected.querySelector("div");
+
+DOMUploadInput.addEventListener('change', function() {
+    if(DOMUploadInput.value != "") {
+        DOMUploadInputHolder.classList.add("selected");
+        DOMUploadInputSelect.classList.remove("active");
+        DOMUploadInputSelected.classList.add("active");
+        DOMUploadInputSelectedFilename.innerText = DOMUploadInput.value.split("\\")[2];
+    } else {
+        DOMUploadInputHolder.classList.remove("selected");
+        DOMUploadInputSelect.classList.add("active");
+        DOMUploadInputSelected.classList.remove("active");
+    }
+});
\ No newline at end of file

public/index.php

+<?php
+
+use App\Kernel;
+use Symfony\Component\ErrorHandler\Debug;
+use Symfony\Component\HttpFoundation\Request;
+
+require dirname(__DIR__).'/config/bootstrap.php';
+
+if ($_SERVER['APP_DEBUG']) {
+    umask(0000);
+
+    Debug::enable();
+}
+
+if ($trustedProxies = $_SERVER['TRUSTED_PROXIES'] ?? $_ENV['TRUSTED_PROXIES'] ?? false) {
+    Request::setTrustedProxies(explode(',', $trustedProxies), Request::HEADER_X_FORWARDED_ALL ^ Request::HEADER_X_FORWARDED_HOST);
+}
+
+if ($trustedHosts = $_SERVER['TRUSTED_HOSTS'] ?? $_ENV['TRUSTED_HOSTS'] ?? false) {
+    Request::setTrustedHosts([$trustedHosts]);
+}
+
+$kernel = new Kernel($_SERVER['APP_ENV'], (bool) $_SERVER['APP_DEBUG']);
+$request = Request::createFromGlobals();
+$response = $kernel->handle($request);
+$response->send();
+$kernel->terminate($request, $response);

src/Controller/IndexController.php

+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\RedirectResponse;
+
+use App\Entity\ClientRelease;
+use App\Entity\Song;
+use App\Entity\User;
+use App\Entity\Promo;
+
+class IndexController extends AbstractController
+{
+
+    /**
+     * @Route("/", name="index.index")
+     */
+    public function index(Request $request)
+    {
+        $em = $this->getDoctrine()->getManager();
+        $data = [];
+
+        $activePromos = $em->getRepository(Promo::class)->findBy(array('isVisible' => true), array('id' => 'DESC'), 2);
+        
+        $newOffset = $request->query->get('newOffset');
+        $popularOffset = $request->query->get('popularOffset');
+
+        $resultsNewSongs = $em->getRepository(Song::class)->findBy(array(), array('id' => 'DESC'), 6, $newOffset * 6);
+        $resultsPopularSongs = $em->getRepository(Song::class)->findBy(array(), array('downloads' => 'DESC', 'views' => 'DESC'), 6, $popularOffset * 6);
+
+        $data['promos'] = $activePromos;
+        $data['newSongs'] = $resultsNewSongs;
+        $data['newOffset'] = $newOffset;
+        $data['popularSongs'] = $resultsPopularSongs;
+        $data['popularOffset'] = $popularOffset;
+
+        return $this->render('index/index.html.twig', $data);
+    }
+
+    /**
+     * @Route("/discord", name="index.discord")
+     */
+    public function discord(Request $request)
+    {
+        return $this->redirect('https://discord.gg/j8g2gkF');
+    }
+
+    /**
+     * @Route("/client", name="index.client")
+     */
+    public function client(Request $request)
+    {
+        $em = $this->getDoctrine()->getManager();
+        $data = [];
+
+        $getLatestWindows = $em->getRepository(ClientRelease::class)->findOneBy(array('platform' => 'win32'), array('majorVersion' => 'DESC', 'minorVersion' => 'DESC', 'patchVersion' => 'DESC'));
+        // $getLatestMac = $em->getRepository(ClientRelease::class)->findOneBy(array('platform' => 'mac'), array('majorVersion' => 'DESC', 'minorVersion' => 'DESC', 'patchVersion' => 'DESC'));
+
+        $data['latestWindows'] = $getLatestWindows->getFileReference();
+        // $data['latestMac'] = $getLatestMac->getFileReference();
+
+        return $this->render('index/client.html.twig', $data);
+    }
+
+    /**
+     * @Route("/legal", name="index.legal")
+     */
+    public function legal(Request $request)
+    {
+        $em = $this->getDoctrine()->getManager();
+        $data = [];
+
+        return $this->render('index/legal.html.twig', $data);
+    }
+}

src/Controller/ReportController.php

+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\RedirectResponse;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
+use Symfony\Component\Form\Extension\Core\Type\FileType;
+use Symfony\Component\Form\Extension\Core\Type\SubmitType;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
+
+use App\Entity\ClientRelease;
+use App\Entity\Song;
+use App\Entity\SongReport;
+use App\Entity\User;
+use App\Entity\UserReport;
+use App\Entity\Promo;
+
+class ReportController extends AbstractController
+{
+    /**
+     * @Route("/report/user/{userId}", name="report.user")
+     */
+    public function reportUser(Request $request, int $userId)
+    {
+        $em = $this->getDoctrine()->getManager();
+        $tempVars = [];
+
+        $userToReport = $em->getRepository(User::class)->findOneBy(array('id' => $userId));
+        if(!$userToReport) { throw new NotFoundHttpException(); }
+
+        $tempVars['userToReport'] = $userToReport;
+
+        $form = $this->createFormBuilder()
+                        ->add('reportReason', ChoiceType::class, ['label' => 'Reason', 'row_attr' => array('class' => 'tags-field'), 'choices'  => [
+                            'This user posts personal and/or confidential information' => 'personal',
+                            'This user posts sexual or suggestive content involving minors' => 'sexualcontent',
+                            'This user posts spam' => 'spam',
+                            'This user evades a ban' => 'banevasion',
+                            'This user impersonates another person' => 'impersonation',
+                            'Other reason' => 'other',
+                        ]])
+                        ->add('reportText', TextareaType::class, ['label' => 'Explain the situation', 'row_attr' => array('class' => "tags-field"), 'attr' => array('rows' => 5)])
+                        ->add('reportName', TextType::class, ['label' => 'Your name', 'row_attr' => array('class' => "tags-field")])
+                        ->add('reportEmail', TextType::class, ['label' => 'Your email', 'row_attr' => array('class' => "tags-field")])
+                        ->add('reportProof', TextType::class, ['label' => 'Additional documents', 'row_attr' => array('class' => "tags-field"), 'required' => false])
+                        ->add('save', SubmitType::class, ['label' => 'Report'])
+                        ->getForm();
+        $form->handleRequest($request);
+
+        $tempVars['reportForm'] = $form->createView();
+
+        if($form->isSubmitted() && $form->isValid()) {
+            $data = $form->getData();
+
+            $newReport = new UserReport();
+            $newReport->setUserId($userToReport->getId());
+            $newReport->setReason($data['reportReason']);
+            $newReport->setText($data['reportText']);
+            $newReport->setName($data['reportName']);
+            $newReport->setEmail($data['reportEmail']);
+            $newReport->setProof($data['reportProof']);
+            $newReport->setStatus(0);
+            $newReport->setReportDate(new \DateTime());
+
+            $em->persist($newReport);
+            $em->flush();
+
+            return $this->render('report/confirmed.html.twig');
+        }
+
+        return $this->render('report/user.html.twig', $tempVars);
+    }
+
+    /**
+     * @Route("/report/song/{songId}", name="report.song")
+     */
+    public function reportSong(Request $request, int $songId)
+    {
+        $em = $this->getDoctrine()->getManager();
+        $tempVars = [];
+
+        $songToReport = $em->getRepository(Song::class)->findOneBy(array('id' => $songId));
+        if(!$songToReport) { throw new NotFoundHttpException(); }
+
+        $tempVars['songToReport'] = $songToReport;
+
+        $form = $this->createFormBuilder()
+                        ->add('reportReason', ChoiceType::class, ['label' => 'Reason', 'row_attr' => array('class' => 'tags-field'), 'choices'  => [
+                            'This song contains my intellectual property (DMCA Takedown)' => 'dmca',
+                            'This song is broken' => 'broken',
+                            'This song is spam' => 'spam',
+                            'This song has wrong meta data' => 'metadata',
+                            'Other reason' => 'other',
+                        ]])
+                        ->add('reportText', TextareaType::class, ['label' => 'Explain the situation', 'row_attr' => array('class' => "tags-field"), 'attr' => array('rows' => 5)])
+                        ->add('reportName', TextType::class, ['label' => 'Your name', 'row_attr' => array('class' => "tags-field")])
+                        ->add('reportEmail', TextType::class, ['label' => 'Your email', 'row_attr' => array('class' => "tags-field")])
+                        ->add('reportProof', TextType::class, ['label' => 'Additional documents', 'row_attr' => array('class' => "tags-field"), 'required' => false])
+                        ->add('save', SubmitType::class, ['label' => 'Report'])
+                        ->getForm();
+        $form->handleRequest($request);
+
+        $tempVars['reportForm'] = $form->createView();
+
+        if($form->isSubmitted() && $form->isValid()) {
+            $data = $form->getData();
+
+            $newReport = new SongReport();
+            $newReport->setSongId($songToReport->getId());
+            $newReport->setReason($data['reportReason']);
+            $newReport->setText($data['reportText']);
+            $newReport->setName($data['reportName']);
+            $newReport->setEmail($data['reportEmail']);
+            $newReport->setProof($data['reportProof']);
+            $newReport->setStatus(0);
+            $newReport->setReportDate(new \DateTime());
+
+            $em->persist($newReport);
+            $em->flush();
+
+            return $this->render('report/confirmed.html.twig');
+        }
+
+        return $this->render('report/song.html.twig', $tempVars);
+    }
+}

src/Controller/SearchController.php

+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\HttpFoundation\Request;
+use App\Utils\HelperFunctions;
+
+use App\Entity\Song;
+use App\Entity\User;
+
+class SearchController extends AbstractController
+{
+    /**
+     * @Route("/search", name="search.index")
+     */
+    public function searchIndex(Request $request)
+    {
+        $em = $this->getDoctrine()->getManager();
+        $data = [];
+
+        $searchQuery = $request->query->get('q');
+
+        $resultsUsers = [];
+        $resultsSongs = [];
+
+        if($request->query->get('showAll') == "1") {
+            $resultsSongs = $em->getRepository(Song::class)->findAll();
+
+            $data['results']['users'] = $resultsUsers;
+            $data['results']['songs'] = $resultsSongs;
+        } else {
+            if($searchQuery != null) {
+                $resultsUsers = $em->getRepository(User::class)->createQueryBuilder('o')
+                                                                ->where('o.username LIKE :query')
+                                                                ->setParameter('query', '%'.$searchQuery.'%')
+                                                                ->getQuery()
+                                                                ->getResult();
+
+                
+                $resultsSongs = $em->getRepository(Song::class)->createQueryBuilder('o')
+                                                                ->where('o.title LIKE :query')
+                                                                ->orWhere('o.subtitle LIKE :query')
+                                                                ->orWhere('o.tags LIKE :query')
+                                                                ->orWhere('o.artist LIKE :query')
+                                                                ->orWhere('o.charter LIKE :query')
+                                                                ->setParameter('query', '%'.$searchQuery.'%')
+                                                                ->getQuery()
+                                                                ->getResult();
+
+                $data['results']['users'] = $resultsUsers;
+                $data['results']['songs'] = $resultsSongs;
+            }
+        }
+        $data['searchQuery'] = $searchQuery;
+
+        return $this->render('search/index.html.twig', $data);
+    }
+}

src/Controller/UserController.php

+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
+
+use App\Entity\User;
+use App\Entity\Song;
+
+class UserController extends AbstractController
+{
+    /**
+     * @Route("/user/{userId}", name="user.detail")
+     */
+    public function userDetail(Request $request, int $userId)
+    {
+        $user = $this->getUser();
+        $em = $this->getDoctrine()->getManager();
+        $data = [];
+
+        if($user) {
+            if($user->getId() == $userId) {
+                if($request->request->get('save') == "changeAvatar") {
+                    if($request->files->get('newAvatar')) {
+                        $allowedMimeTypes = array("image/jpeg", "image/png");
+
+                        if(in_array($request->files->get('newAvatar')->getMimeType(), $allowedMimeTypes)) {
+                            @unlink($this->getParameter('avatar_path').DIRECTORY_SEPARATOR.$user->getCoverReference());
+
+                            $user->setCoverReference(uniqid().".png");
+                            rename($request->files->get('newAvatar'), $this->getParameter('avatar_path').DIRECTORY_SEPARATOR.$user->getCoverReference());
+
+                            $em->persist($user);
+                            $em->flush();
+                        }
+                    }
+                }
+            }
+    }
+
+        $resultUser = $em->getRepository(User::class)->findOneBy(array('id' => $userId));
+        if(!$resultUser) throw new NotFoundHttpException();
+
+        $resultUploads = $em->getRepository(Song::class)->findBy(array('uploader' => $resultUser->getId()));
+
+        $data['user'] = $resultUser;
+        $data['uploads'] = $resultUploads;
+
+        return $this->render('user/detail.html.twig', $data);
+    }
+}