| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Index of</title> |
| <style> |
| h1 { |
| border-bottom: 1px solid black; |
| } |
| |
| .listing { |
| margin: 0.5em; |
| display: table; |
| } |
| |
| .listing .header, |
| .listing .entry { |
| display: table-row; |
| } |
| |
| .listing .header { |
| font-weight: bold; |
| } |
| |
| .listing .header span, |
| .listing .entry span { |
| display: table-cell; |
| padding-right: 1em; |
| } |
| |
| .entry span:nth-child(1) { |
| min-width: 20em; |
| } |
| |
| .entry span.size, |
| .entry span.last-modified { |
| white-space: nowrap; |
| } |
| |
| .parent_link > a:before { |
| content: "📁 "; |
| } |
| |
| .parent_link { |
| display: none; |
| } |
| |
| .entry.directory > .name:before { |
| content: "📁 "; |
| } |
| |
| .entry.file > .name:before { |
| content: "📄 "; |
| } |
| |
| .entry.symlink > .name:before { |
| content: "🔗 "; |
| } |
| </style> |
| <script> |
| function setData(directoryName, parentLink, rows) { |
| document.title += " " + directoryName; |
| document.querySelector("h1").innerHTML += " " + directoryName; |
| |
| if (parentLink != "") { |
| document.querySelector(".parent_link > a").href = parentLink; |
| document.querySelector(".parent_link").style.display = "initial"; |
| } |
| |
| rows.sort((rowA, rowB) => rowA[1].localeCompare(rowB[1])); |
| |
| let listing = document.querySelector(".listing"); |
| let rowTemplate = document.getElementById("rowTemplate"); |
| for (row of rows) { |
| let rowElement = rowTemplate.content.cloneNode(true); |
| rowElement.querySelector(".entry").classList.add(row[0]); |
| rowElement.querySelector(".name > .link").innerText = row[1]; |
| rowElement.querySelector(".name > .link").href = row[2]; |
| rowElement.querySelector(".size").innerText = row[3]; |
| rowElement.querySelector(".last-modified").innerText = row[4]; |
| listing.appendChild(rowElement); |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <h1>Index of</h1> |
| <div class="parent_link"><a href="">Up to parent directory</a></div> |
| <div class="listing"> |
| <div class="header"> |
| <span class="name">Name</span> |
| <span class="size">Size</span> |
| <span class="last-modified">Last Modified</span> |
| </div> |
| </div> |
| <template id="rowTemplate"> |
| <div class="entry"> |
| <span class="name"><a class="link"></a></span> |
| <span class="size"></span> |
| <span class="last-modified"></span> |
| </div> |
| </template> |
| </body> |
| </html> |
