<!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">×</span> <h2 id="modalTitle"></h2> <p id="modalInfo"></p> </div> </div> <div id="copyModal" class="modal"> <div class="modal-content"> <span class="close">×</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>