Elegant File Manager

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elegant File Manager</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.9/dist/sweetalert2.min.css">
    <style>
        body {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            background-color: #e2e2e2;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }
        .file-manager {
            width: 80%;
            max-width: 1200px;
            background-color: #fff;
            box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            overflow: hidden;
        }
        .file-manager-header {
            background-color: #1a73e8;
            color: #fff;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .file-manager-header h1 {
            margin: 0;
            font-size: 26px;
        }
        .file-manager-header .controls {
            display: flex;
            gap: 15px;
        }
        .file-manager-header .controls button {
            background-color: #fff;
            color: #1a73e8;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .file-manager-header .controls button:hover {
            background-color: #f1f1f1;
        }
        .file-manager-content {
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .file {
            width: 120px;
            text-align: center;
            transition: transform 0.3s;
            cursor: pointer;
        }
        .file:hover {
            transform: scale(1.1);
        }
        .file .icon {
            font-size: 50px;
            margin-bottom: 10px;
        }
        .file .name {
            font-size: 16px;
            color: #333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .tooltip {
            position: absolute;
            background-color: #333;
            color: #fff;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 14px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        .file-manager:hover .tooltip {
            opacity: 1;
        }
        #file-upload {
            display: none;
        }
    </style>
</head>
<body>
    <div class="file-manager">
        <div class="file-manager-header">
            <h1>Elegant File Manager</h1>
            <div class="controls">
                <button id="add-file">Add File 📂</button>
                <button id="upload-file">Upload File ⬆️</button>
                <input type="file" id="file-upload" multiple>
            </div>
        </div>
        <div class="file-manager-content">
            <div class="file" data-name="Document">
                <div class="icon">📄</div>
                <div class="name">Document</div>
            </div>
            <div class="file" data-name="Music">
                <div class="icon">🎵</div>
                <div class="name">Music</div>
            </div>
            <div class="file" data-name="Picture">
                <div class="icon">🖼️</div>
                <div class="name">Picture</div>
            </div>
        </div>
    </div>
    <div class="tooltip" id="tooltip">Tooltip</div>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.9/dist/sweetalert2.min.js"></script>
    <script>
        document.querySelectorAll('.file').forEach(file => {
            file.addEventListener('mouseenter', (e) => {
                const tooltip = document.getElementById('tooltip');
                tooltip.textContent = e.currentTarget.dataset.name;
                tooltip.style.left = `${e.pageX + 10}px`;
                tooltip.style.top = `${e.pageY + 10}px`;
            });
            file.addEventListener('mousemove', (e) => {
                const tooltip = document.getElementById('tooltip');
                tooltip.style.left = `${e.pageX + 10}px`;
                tooltip.style.top = `${e.pageY + 10}px`;
            });
            file.addEventListener('mouseleave', () => {
                const tooltip = document.getElementById('tooltip');
                tooltip.textContent = '';
            });
        });
        document.getElementById('add-file').addEventListener('click', () => {
            Swal.fire({
                title: 'Enter file name:',
                input: 'text',
                showCancelButton: true,
                confirmButtonText: 'Add',
                cancelButtonText: 'Cancel',
                inputValidator: (value) => {
                    if (!value) {
                        return 'You need to write something!';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const name = result.value;
                    const fileContainer = document.createElement('div');
                    fileContainer.classList.add('file');
                    fileContainer.dataset.name = name;
                    fileContainer.innerHTML = `
                        <div class="icon">📄</div>
                        <div class="name">${name}</div>
                    `;
                    document.querySelector('.file-manager-content').appendChild(fileContainer);
                    fileContainer.addEventListener('mouseenter', (e) => {
                        const tooltip = document.getElementById('tooltip');
                        tooltip.textContent = e.currentTarget.dataset.name;
                        tooltip.style.left = `${e.pageX + 10}px`;
                        tooltip.style.top = `${e.pageY + 10}px`;
                    });
                    fileContainer.addEventListener('mousemove', (e) => {
                        const tooltip = document.getElementById('tooltip');
                        tooltip.style.left = `${e.pageX + 10}px`;
                        tooltip.style.top = `${e.pageY + 10}px`;
                    });
                    fileContainer.addEventListener('mouseleave', () => {
                        const tooltip = document.getElementById('tooltip');
                        tooltip.textContent = '';
                    });
                }
            });
        });
        document.getElementById('upload-file').addEventListener('click', () => {
            document.getElementById('file-upload').click();
        });
        document.getElementById('file-upload').addEventListener('change', (event) => {
            const files = event.target.files;
            for (let file of files) {
                const fileContainer = document.createElement('div');
                fileContainer.classList.add('file');
                fileContainer.dataset.name = file.name;
                fileContainer.innerHTML = `
                    <div class="icon">📄</div>
                    <div class="name">${file.name}</div>
                `;
                document.querySelector('.file-manager-content').appendChild(fileContainer);
                fileContainer.addEventListener('mouseenter', (e) => {
                    const tooltip = document.getElementById('tooltip');
                    tooltip.textContent = e.currentTarget.dataset.name;
                    tooltip.style.left = `${e.pageX + 10}px`;
                    tooltip.style.top = `${e.pageY + 10}px`;
                });
                fileContainer.addEventListener('mousemove', (e) => {
                    const tooltip = document.getElementById('tooltip');
                    tooltip.style.left = `${e.pageX + 10}px`;
                    tooltip.style.top = `${e.pageY + 10}px`;
                });
                fileContainer.addEventListener('mouseleave', () => {
                    const tooltip = document.getElementById('tooltip');
                    tooltip.textContent = '';
                });
            }
        });
    </script>
</body>
</html>

Elegant File Manager - MeggiTools