Вот html:
```html
<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>LitMusic</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Стили -->
    <link rel="stylesheet" href="../static/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto+Slab:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>

<!-- Верхняя панель -->
<header>
    <h1>LitMusic</h1>
    <button id="add-track-button">Добавить Трек</button>
</header>

<!-- Поисковая панель -->
<div id="search-container">
    <form id="search-form">
        <input type="text" id="search-name" placeholder="Поиск" name="name" autocomplete="off">
        <button type="submit" class="small-button"><img src="../static/icons/finder.webp"></button>
        <button type="button" class="small-button" id="clear-search"><img src="../static/icons/text.webp"></button>
    </form>
</div>

<!-- Список треков -->
<main id="tracks-container"></main>

<!-- Контейнер для пагинации -->
<div id="pagination-controls"></div>

<!-- Проигрыватель -->
<div id="audio-player" class="minimized">
    <div id="player-header">
        <span id="now-playing">Сейчас играет: <span id="track-title"></span></span>
        <button class="small-button" id="toggle-player-button">▼</button>
    </div>
    <audio id="audio-control" controls></audio>
</div>

<!-- Диалоговое окно добавления трека -->
<div id="add-track-dialog" class="modal">
    <div class="modal-content">
        <span class="close-button" id="close-add-dialog">&times;</span>
        <h2>Добавить Новый Трек</h2>
        <form id="add-track-form">
            <label for="track-name">Название Трека:</label>
            <input type="text" id="track-name" name="name" required>

            <label for="track-description">Описание:</label>
            <textarea id="track-description" name="description"></textarea>

            <label>Теги:</label>
            <div id="tags-container">
                <!-- Контейнер тегов -->
            </div>
            <button type="button" class="small-button" id="add-tag-button">+</button>

            <label for="track-url">Ссылка на Трек:</label>
            <input type="url" id="track-url" name="url" required>

            <button class="submit-btn" type="submit">Добавить</button>
        </form>
    </div>
</div>

<!-- Диалоговое окно описания -->
<div id="description-dialog" class="modal">
    <div class="modal-content">
        <span class="close-button" id="close-description-dialog">&times;</span>
        <h2 id="description-title"></h2>
        <p id="description-text"></p>
    </div>
</div>

<!-- Скрипты -->
<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>
<script src="../static/app.js"></script>

</body>
</html>
```
Вот js:
```js
// static/app.js

$(document).ready(function () {
    const $tracksContainer = $('#tracks-container');
    const $addTrackButton = $('#add-track-button');
    const $addTrackDialog = $('#add-track-dialog');
    const $closeAddDialog = $('#close-add-dialog');
    const $addTrackForm = $('#add-track-form');
    const $tagsContainer = $('#tags-container');
    const $addTagButton = $('#add-tag-button');
    const $audioPlayer = $('#audio-player');
    const $audioControl = $('#audio-control');
    const $trackTitle = $('#track-title');
    const $togglePlayerButton = $('#toggle-player-button');
    const $descriptionDialog = $('#description-dialog');
    const $closeDescriptionDialog = $('#close-description-dialog');
    const $descriptionTitle = $('#description-title');
    const $descriptionText = $('#description-text');
    const $copyLinkButton = $('#copy-link-button');
    const $searchForm = $('#search-form');
    const $clearSearchButton = $('#clear-search');
    const $paginationControls = $('#pagination-controls');

    let currentPage = 1;
    const perPage = 10;
    let totalTracks = 0;
    let currentSearch = {
        name: '',
        description: '',
        tags: []
    };
    const animationSpeed = 300; // миллисекунд

    // Переменные для отслеживания текущего трека
    let currentTrackId = null;
    let $currentPlayButton = null;

    // --- Функции ---
    function loadTracks(page = 1, search = {}) {
        currentPage = page;
        let url = `/tracks?page=${page}`;
        if (search.name) {
            url += `&name=${encodeURIComponent(search.name)}`;
        }
        if (search.description) {
            url += `&description=${encodeURIComponent(search.description)}`;
        }
        if (search.tags && search.tags.length > 0) {
            search.tags.forEach(tag => {
                url += `&tags=${encodeURIComponent(tag)}`;
            });
        }

        $.getJSON(url, function (data) {
            $tracksContainer.empty();
            totalTracks = data.total;
            if (data.tracks.length === 0) {
                $tracksContainer.append('<p>Треки не найдены.</p>');
            } else {
                $.each(data.tracks, function (index, track) {
                    const $trackTile = $('<div class="track-tile"></div>');
                    const $topDiv = $('<div class="top-div"></div>');
                    const $buttons = $('<div class="buttons"></div>');
                    const $title = $('<h3>' + track.name + '</h3>');

                    // Создаем кнопку Play/Pause с data-track-id
                    const $playPauseButton = $(`
                        <button class="play-pause-button" data-track-id="${track.id}">
                            <img src="../static/icons/play.webp" alt="Play">
                        </button>
                    `).click(function () {
                        togglePlayPause(track, $(this));
                    });

                    const $copyButton = $('<button><img src="../static/icons/copy.webp" alt="Copy"></button>').click(function () {
                        copyToClipboard(track.original_url);
                    });
                    const $descriptionButton = $('<button><img src="../static/icons/description.webp" alt="Description"></button>').click(function () {
                        showDescription(track);
                    });
                    const $deleteButton = $('<button><img src="../static/icons/close.webp" alt="Delete"></button>').click(function () {
                        deleteTrack(track.id, track.name);
                    });

                    $topDiv.append($playPauseButton).append($title);
                    $buttons.append($copyButton).append($descriptionButton).append($deleteButton);
                    $trackTile.append($topDiv).append($buttons);
                    $tracksContainer.append($trackTile);
                });
            }
            renderPagination();
        }).fail(function (jqxhr, textStatus, error) {
            console.error('Ошибка при загрузке треков:', error);
            alert('Не удалось загрузить треки.');
        });
    }

    function togglePlayPause(track, $button) {
        if (currentTrackId === track.id) {
            // Если тот же трек, переключаем воспроизведение/пауза
            if ($audioControl[0].paused) {
                $audioControl[0].play();
                $button.find('img').attr('src', '../static/icons/pause.webp');
            } else {
                $audioControl[0].pause();
                $button.find('img').attr('src', '../static/icons/play.webp');
            }
        } else {
            // Если другой трек
            // Останавливаем текущий трек, если есть
            if (currentTrackId !== null && $currentPlayButton !== null) {
                $currentPlayButton.find('img').attr('src', '../static/icons/play.webp');
            }

            // Устанавливаем новый трек
            currentTrackId = track.id;
            $currentPlayButton = $button;
            $audioControl.attr('src', track.url);
            $trackTitle.text(track.name);
            $audioControl[0].play();  // Воспроизведение

            // Меняем иконку кнопки
            $button.find('img').attr('src', '../static/icons/pause.webp');
        }
        maximizePlayer();
    }

    function maximizePlayer() {
        $audioPlayer.removeClass('minimized').addClass('maximized');
        $togglePlayerButton.addClass('rotated');
    }

    function minimizePlayer() {
        $audioPlayer.addClass('minimized').removeClass('maximized');
        $togglePlayerButton.removeClass('rotated');
    }

    function showDescription(track) {
        $descriptionTitle.text(track.name);
        $descriptionText.text(track.description || 'Нет описания.');
        $descriptionDialog.fadeIn(animationSpeed);
    }

    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            alert('Ссылка скопирована в буфер обмена!');
        }, function (err) {
            console.error('Не удалось скопировать текст: ', err);
        });
    }

    function deleteTrack(trackId, trackName) {
        if (confirm(`Вы уверены, что хотите удалить трек "${trackName}"?`)) {
            $.ajax({
                url: `/tracks/${trackId}`,
                type: 'DELETE',
                success: function (data) {
                    if (data.error) {
                        alert('Ошибка: ' + data.error);
                    } else {
                        alert(data.message);
                        // Если удаляется текущий воспроизводимый трек, сбрасываем аудио
                        if (currentTrackId === trackId) {
                            $audioControl[0].pause();
                            $audioControl.attr('src', '');
                            $trackTitle.text('');
                            if ($currentPlayButton !== null) {
                                $currentPlayButton.find('img').attr('src', '../static/icons/play.webp');
                                $currentPlayButton = null;
                            }
                            currentTrackId = null;
                        }
                        loadTracks(currentPage, currentSearch);
                    }
                },
                error: function (jqxhr, textStatus, error) {
                    console.error('Ошибка при удалении трека:', error);
                    alert('Что-то пошло не так.');
                }
            });
        }
    }

    // Рендеринг элементов пагинации
    function renderPagination() {
        const totalPages = Math.ceil(totalTracks / perPage);
        $paginationControls.empty();

        if (totalPages <= 1) return;

        // Кнопка "Предыдущая"
        const $prevButton = $('<button>').text('<< Предыдущая').prop('disabled', currentPage === 1).click(function () {
            if (currentPage > 1) {
                loadTracks(currentPage - 1, currentSearch);
            }
        });
        $paginationControls.append($prevButton);

        // Номера страниц (отображать максимум 5)
        const maxPagesToShow = 5;
        let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
        let endPage = startPage + maxPagesToShow - 1;
        if (endPage > totalPages) {
            endPage = totalPages;
            startPage = Math.max(1, endPage - maxPagesToShow + 1);
        }

        for (let i = startPage; i <= endPage; i++) {
            const $pageButton = $('<button>').text(i).addClass(i === currentPage ? 'active' : '').click(function () {
                loadTracks(i, currentSearch);
            });
            $paginationControls.append($pageButton);
        }

        // Кнопка "Следующая"
        const $nextButton = $('<button>').text('Следующая >>').prop('disabled', currentPage === totalPages).click(function () {
            if (currentPage < totalPages) {
                loadTracks(currentPage + 1, currentSearch);
            }
        });
        $paginationControls.append($nextButton);
    }

    // --- Обработчики Событий ---

    // Открытие диалога добавления трека
    $addTrackButton.click(function () {
        $addTrackDialog.fadeIn(animationSpeed);
    });
    $closeAddDialog.click(function () {
        $addTrackDialog.fadeOut(animationSpeed);
    });

    // Закрытие диалога описания
    $closeDescriptionDialog.click(function () {
        $descriptionDialog.fadeOut(animationSpeed);
    });

    // Закрытие модальных окон при клике вне их
    $(window).click(function(event) {
        if (event.target == $addTrackDialog[0]) { $addTrackDialog.fadeOut(animationSpeed); }
        if (event.target == $descriptionDialog[0]) { $descriptionDialog.fadeOut(animationSpeed); }
    });

    // Добавление нового тега
    $addTagButton.click(function () {
        const $tagItem = $('<div class="tag-item"></div>');
        const $tagInput = $('<input type="text">');
        const $removeButton = $('<button><img src="../static/icons/close.webp"></button>').click(function () {
            $tagItem.remove();
        });
        $tagItem.append($tagInput).append($removeButton);
        $tagsContainer.append($tagItem);
    });

    // Отправка формы добавления трека
    $addTrackForm.submit(function (event) {
        event.preventDefault();

        const name = $('#track-name').val().trim();
        const description = $('#track-description').val().trim();
        const original_url = $('#track-url').val().trim();
        const tags = [];
        $tagsContainer.find('input').each(function () {
            const tag = $(this).val().trim();
            if (tag) {
                tags.push(tag);
            }
        });

        if (!name || !original_url) {
            alert('Название и ссылка на трек обязательны.');
            return;
        }

        $.ajax({
            url: '/tracks',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({name, description, url: original_url, tags}),
            success: function(data) {
                if (data.error) {
                    alert('Ошибка: ' + data.error);
                } else {
                    alert('Трек успешно добавлен!');
                    $addTrackDialog.fadeOut(animationSpeed);
                    $addTrackForm[0].reset();
                    $tagsContainer.empty();
                    loadTracks(1, {}); // Перезагрузка первой страницы без поиска
                }
            },
            error: function (jqxhr, textStatus, error) {
                console.error('Ошибка при добавлении трека:', error);
                alert('Что-то пошло не так.');
            }
        });

    });

    // Переключение состояния проигрывателя
    $togglePlayerButton.click(function () {
        $audioPlayer.toggleClass('minimized maximized');
        $togglePlayerButton.toggleClass('rotated');
    });

    // Копирование ссылки в проигрывателе
    $copyLinkButton.click(function () {
        const originalUrl = $audioControl.attr('src');
        if (originalUrl) {
            copyToClipboard(originalUrl);
        } else {
            alert('Нет ссылки для копирования.');
        }
    });

    // Отправка формы поиска
    $searchForm.submit(function (event) {
        event.preventDefault();
        const name = $('#search-name').val().trim();

        currentSearch = { name };
        loadTracks(1, currentSearch);
    });

    // Очистка поиска
    $clearSearchButton.click(function () {
        $searchForm[0].reset();
        currentSearch = { name: '', description: '', tags: [] };
        loadTracks(1, currentSearch);
    });

    // Обработчик ввода в поисковой строке
    $('#search-name').on('input', function () {
        const name = $(this).val().trim();
        currentSearch = { name };
        loadTracks(1, currentSearch);
    });

    // Обработчик окончания воспроизведения трека
    $audioControl.on('ended', function() {
        if (currentTrackId !== null && $currentPlayButton !== null) {
            $currentPlayButton.find('img').attr('src', '../static/icons/play.webp');
            currentTrackId = null;
            $currentPlayButton = null;
        }
        minimizePlayer();
    });

    // Обработчик события воспроизведения трека
    $audioControl.on('play', function() {
        if (currentTrackId !== null && $currentPlayButton !== null) {
            $currentPlayButton.find('img').attr('src', '../static/icons/pause.webp');
        }
    });

    // Обработчик события паузы трека
    $audioControl.on('pause', function() {
        if (currentTrackId !== null && $currentPlayButton !== null) {
            $currentPlayButton.find('img').attr('src', '../static/icons/play.webp');
        }
    });

    // Первоначальная загрузка треков
    loadTracks();
});
```
Сделай отдельный контейнер по верх всех остальных, который бы содержал tile-ы с текстом, а конкретно - "Ссылка скопирована в буфер обмена!".
Она должна появляться через отдельный метод на 1.5 секунды