<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        h1 {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 0;
            border-bottom: 2px solid #388E3C;
        }
        button[type="submit"] {
            color: white;
            background-color: #4CAF50;
            border: none;
            cursor: pointer;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 5px;
            margin-top: 20px;
        }
        button[type="submit"]:hover {
            background-color: #388E3C;
        }
        #mediaContainer {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            max-width: 100%;
            height: auto;
        }
        #mediaContainer img, #mediaContainer video {
            max-width: 100%;
            height: auto;
            object-fit: contain;
        }
        #imageUrl {
            margin-top: 20px;
            font-size: 16px;
            color: #333;
            cursor: pointer;
            text-decoration: underline;
        }
        #progressBarContainer {
            width: 80%;
            margin: 20px auto;
            background-color: #ddd;
            border-radius: 13px;
            padding: 3px;
        }
        #progressBar {
            width: 0%;
            height: 20px;
            background-color: #4CAF50;
            border-radius: 10px;
            text-align: center;
            line-height: 20px;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Отправка сообщения (текст + файл) с рандомизацией</h1>
    <div id="mediaContainer">
        <!-- Media content will be displayed here -->
    </div>
    <div id="progressBarContainer">
        <div id="progressBar">0%</div>
    </div>
    <div id="imageUrl" onclick="copyToClipboard(this)">Кликните после загрузки, если нужна ссылка на сохранённый файл.</div>
    <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
        <input type="file" name="file">
        <button type="submit">Загрузить</button>
    </form>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script>
        document.getElementById('uploadForm').addEventListener('submit', function(event) {
            event.preventDefault();
            var formData = new FormData(this);
            var request = new XMLHttpRequest();
            request.open('POST', '/upload');
            request.upload.addEventListener('progress', function(event) {
                if (event.lengthComputable) {
                    var percentComplete = (event.loaded / event.total) * 100;
                    document.getElementById('progressBar').style.width = percentComplete + '%';
                    document.getElementById('progressBar').innerText = Math.round(percentComplete) + '%';
                }
            }, false);
            request.addEventListener('load', function(event) {
                var response = event.target.responseText;
                var fullUrl = response.split('saved to ')[1];
                var filename = fullUrl.split('/').pop();
                document.getElementById('imageUrl').innerText = fullUrl;
                displayMedia(fullUrl);
                document.getElementById('progressBar').style.width = '0%';
                document.getElementById('progressBar').innerText = '0%';
                // Сохранение имени файла и ссылки в локальное хранилище
                localStorage.setItem('filename', filename);
                localStorage.setItem('fileUrl', fullUrl);
            }, false);
            request.send(formData);
        });
        function displayMedia(url) {
            var mediaContainer = document.getElementById('mediaContainer');
            mediaContainer.innerHTML = '';
            var extension = url.split('.').pop().toLowerCase();
            if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
                var img = document.createElement('img');
                img.src = url;
                mediaContainer.appendChild(img);
            } else if (['mp4', 'webm', 'ogg'].includes(extension)) {
                var video = document.createElement('video');
                video.src = url;
                video.controls = true;
                mediaContainer.appendChild(video);
            } else if (['mp3', 'wav', 'ogg'].includes(extension)) {
                var audio = document.createElement('audio');
                audio.src = url;
                audio.controls = true;
                mediaContainer.appendChild(audio);
            } else {
                mediaContainer.innerText = 'Unsupported file type';
            }
        }
        function copyToClipboard(element) {
            var tempInput = document.createElement("input");
            tempInput.value = element.innerText;
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand("copy");
            document.body.removeChild(tempInput);
            Toastify({
                text: "URL copied to clipboard",
                duration: 3000,
                gravity: "top",
                position: "center",
                backgroundColor: "#4CAF50",
            }).showToast();
        }
    </script>
</body>
</html>