----------------------- <!DOCTYPE html> <html> <head> <style> .folder { margin-left: 20px; } .empty-folder { color: gray; } </style> </head> <body> <h1>Drag and Drop Folder Lister</h1> <div> <label for="baseUrl">Base URL: </label> <input type="text" id="baseUrl" placeholder="Enter base URL" value="http://10.10.10.254/data/UsbDisk1/Volume1"> </div> <div> <label for="excludeText">Exclude Text: </label> <input type="text" id="excludeText" placeholder="Enter text to exclude" value="D_drive/"> </div> <div id="folderList" ondragover="allowDrop(event)" ondrop="drop(event)"> <p>Drop a folder here to list its contents:</p> </div> <script> function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); const folder = event.dataTransfer.items[0].webkitGetAsEntry(); const baseUrl = document.getElementById("baseUrl").value; const excludeText = document.getElementById("excludeText").value; listFolderContents(folder, document.getElementById("folderList"), baseUrl, excludeText); } function listFolderContents(folder, parentElement, baseUrl, excludeText) { if (folder.isDirectory) { const details = document.createElement("details"); const summary = document.createElement("summary"); summary.textContent = folder.name; details.appendChild(summary); const subFolderList = document.createElement("ul"); details.appendChild(subFolderList); parentElement.appendChild(details); const directoryReader = folder.createReader(); function readEntries() { directoryReader.readEntries(function (entries) { if (entries.length > 0) { entries.forEach(function (entry) { listFolderContents(entry, subFolderList, baseUrl, excludeText); }); readEntries(); // Continue reading entries in chunks } else if (subFolderList.childElementCount === 0) { details.classList.add("empty-folder"); // Apply the CSS class to the empty folder } }); } readEntries(); } else { const listItem = document.createElement("li"); const link = document.createElement("a"); link.textContent = folder.name; link.target = "_blank"; link.href = baseUrl ? baseUrl + folder.fullPath : "file:///123/" + folder.fullPath; if (excludeText && link.href.includes(excludeText)) { link.href = link.href.replace(excludeText, ""); } listItem.appendChild(link); parentElement.appendChild(listItem); } } </script>  <script> function downloadHTML() { const folderList = document.getElementById("folderList").cloneNode(true); const baseUrl = document.getElementById("baseUrl").value; updateHyperlinks(folderList, baseUrl); const doctype = document.implementation.createDocumentType('html', '', ''); const html = document.implementation.createDocument('', 'html', doctype); html.documentElement.appendChild(folderList); const serializer = new XMLSerializer(); const htmlString = serializer.serializeToString(html); const blob = new Blob([htmlString], { type: 'text/html' }); const url = URL.createObjectURL(blob); const downloadLink = document.createElement('a'); downloadLink.href = url; downloadLink.download = 'folder_list.html'; downloadLink.click(); } function updateHyperlinks(element, baseUrl) { const links = element.getElementsByTagName('a'); for (let i = 0; i < links.length; i++) { const link = links[i]; const href = link.getAttribute('href'); if (baseUrl) { link.href = href; } else { link.href = href; } } } </script> <button onclick="downloadHTML()">Download HTML</button> </plaintext>