<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Manager Overview</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <style>
        body {
            padding: 20px;
        }
        .breadcrumb {
            margin-bottom: 20px;
            font-size: 0.9em;
        }
        .breadcrumb a {
            color: #007bff;
            text-decoration: none;
        }
        .breadcrumb a:hover {
            text-decoration: underline;
        }
        .file-list {
            list-style-type: none;
            padding: 0;
        }
        .file-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 10px;
            border-bottom: 1px solid #e0e0e0;
            cursor: pointer;
        }
        .file-item:hover {
            background-color: #f5f5f5;
        }
        .file-name {
            flex-grow: 1;
        }
        .folder-item {
            font-weight: bold;
            background-color: #e6f2ff;
        }
        .folder-item:hover {
            background-color: #d9e9ff;
        }
        .context-menu, .modal {
            display: none;
            position: fixed;
            z-index: 1000;
        }
        .context-menu {
            background-color: #ffffff;
            border: 1px solid #ccc;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            padding: 5px 0;
        }
        .context-menu button {
            display: block;
            width: 100%;
            padding: 5px 20px;
            text-align: left;
            border: none;
            background: none;
            cursor: pointer;
            color: #333;
        }
        .context-menu button:hover {
            background-color: #f0f0f0;
        }
        .modal {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        #fileSystem {
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
            font-size: 0.9em;
        }
        #fileSystem .file-item {
            font-size: 0.9em;
        }
        #fileSystem .breadcrumb {
            font-size: 0.8em;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <main class="container">
        <div class="breadcrumb">
            <a href="#">Home</a> / <a href="#">Documents</a> / Current Folder
        </div>
        <h1>File Manager</h1>
        <ul class="file-list">
            <li class="file-item folder-item" data-type="folder" data-items="5" data-modified="2023-05-12">
                <span class="file-name">Documents</span>
                <span class="file-size">5 items</span>
            </li>
            <li class="file-item" data-type="file" data-size="10 KB" data-modified="2023-05-15">
                <span class="file-name">document.txt</span>
                <span class="file-size">10 KB</span>
            </li>
            <li class="file-item" data-type="file" data-size="2 MB" data-modified="2023-05-14">
                <span class="file-name">image.jpg</span>
                <span class="file-size">2 MB</span>
            </li>
            <li class="file-item" data-type="file" data-size="500 KB" data-modified="2023-05-13">
                <span class="file-name">spreadsheet.xlsx</span>
                <span class="file-size">500 KB</span>
            </li>
        </ul>
    </main>

    <div id="contextMenu" class="context-menu">
        <button id="moveBtn">Move</button>
        <button id="copyBtn">Copy</button>
        <button id="deleteBtn">Delete</button>
    </div>

    <div id="infoModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2 id="modalTitle"></h2>
            <p id="modalInfo"></p>
        </div>
    </div>

    <div id="copyModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Copy to:</h2>
            <div id="fileSystem">
                <div class="breadcrumb">
                    <a href="#">Home</a> / <a href="#">Documents</a>
                </div>
                <ul class="file-list">
                    <li class="file-item folder-item" data-type="folder" data-items="3">
                        <span class="file-name">Pictures</span>
                        <span class="file-size">3 items</span>
                    </li>
                    <li class="file-item folder-item" data-type="folder" data-items="2">
                        <span class="file-name">Music</span>
                        <span class="file-size">2 items</span>
                    </li>
                    <li class="file-item" data-type="file" data-size="15 KB">
                        <span class="file-name">notes.txt</span>
                        <span class="file-size">15 KB</span>
                    </li>
                    <li class="file-item" data-type="file" data-size="1.2 MB">
                        <span class="file-name">report.pdf</span>
                        <span class="file-size">1.2 MB</span>
                    </li>
                </ul>
            </div>
            <button id="confirmCopy">Copy Here</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const fileItems = document.querySelectorAll('.file-item');
            const contextMenu = document.getElementById('contextMenu');
            const moveBtn = document.getElementById('moveBtn');
            const copyBtn = document.getElementById('copyBtn');
            const deleteBtn = document.getElementById('deleteBtn');
            const infoModal = document.getElementById('infoModal');
            const copyModal = document.getElementById('copyModal');
            const modalTitle = document.getElementById('modalTitle');
            const modalInfo = document.getElementById('modalInfo');
            const closeBtns = document.getElementsByClassName('close');
            const confirmCopyBtn = document.getElementById('confirmCopy');

            let selectedFile = null;

            fileItems.forEach(item => {
                item.addEventListener('click', () => {
                    showModal(item);
                });

                item.addEventListener('contextmenu', (e) => {
                    e.preventDefault();
                    selectedFile = item.querySelector('.file-name').textContent;
                    showContextMenu(e.clientX, e.clientY);
                });
            });

            document.addEventListener('click', (e) => {
                if (!contextMenu.contains(e.target)) {
                    hideContextMenu();
                }
            });

            function showContextMenu(x, y) {
                contextMenu.style.display = 'block';
                contextMenu.style.left = `${x}px`;
                contextMenu.style.top = `${y}px`;
            }

            function hideContextMenu() {
                contextMenu.style.display = 'none';
            }

            function showModal(item) {
                const name = item.querySelector('.file-name').textContent;
                const type = item.dataset.type;
                const size = item.dataset.size;
                const modified = item.dataset.modified;
                const items = item.dataset.items;

                modalTitle.textContent = name;
                modalInfo.innerHTML = `
                    <p>Type: ${type}</p>
                    ${type === 'file' ? `<p>Size: ${size}</p>` : `<p>Items: ${items}</p>`}
                    <p>Last Modified: ${modified}</p>
                `;

                infoModal.style.display = 'block';
            }

            Array.from(closeBtns).forEach(btn => {
                btn.onclick = function() {
                    infoModal.style.display = 'none';
                    copyModal.style.display = 'none';
                }
            });

            window.onclick = function(event) {
                if (event.target == infoModal) {
                    infoModal.style.display = 'none';
                }
                if (event.target == copyModal) {
                    copyModal.style.display = 'none';
                }
            }

            moveBtn.addEventListener('click', () => {
                alert(`Moving ${selectedFile}`);
                hideContextMenu();
            });

            copyBtn.addEventListener('click', () => {
                copyModal.style.display = 'block';
                hideContextMenu();
            });

            confirmCopyBtn.addEventListener('click', () => {
                alert(`Copying ${selectedFile} to selected location`);
                copyModal.style.display = 'none';
            });

            deleteBtn.addEventListener('click', () => {
                alert(`Deleting ${selectedFile}`);
                hideContextMenu();
            });
        });
    </script>
</body>
</html>