Rewild Your Web
me.webbeef.org
web
browser
dweb
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Index of</title>
5 <style>
6 h1 {
7 border-bottom: 1px solid black;
8 }
9
10 .listing {
11 margin: 0.5em;
12 display: table;
13 }
14
15 .listing .header,
16 .listing .entry {
17 display: table-row;
18 }
19
20 .listing .header {
21 font-weight: bold;
22 }
23
24 .listing .header span,
25 .listing .entry span {
26 display: table-cell;
27 padding-right: 1em;
28 }
29
30 .entry span:nth-child(1) {
31 min-width: 20em;
32 }
33
34 .entry span.size,
35 .entry span.last-modified {
36 white-space: nowrap;
37 }
38
39 .parent_link > a:before {
40 content: "📁 ";
41 }
42
43 .parent_link {
44 display: none;
45 }
46
47 .entry.directory > .name:before {
48 content: "📁 ";
49 }
50
51 .entry.file > .name:before {
52 content: "📄 ";
53 }
54
55 .entry.symlink > .name:before {
56 content: "🔗 ";
57 }
58 </style>
59 <script>
60 function setData(directoryName, parentLink, rows) {
61 document.title += " " + directoryName;
62 document.querySelector("h1").innerHTML += " " + directoryName;
63
64 if (parentLink != "") {
65 document.querySelector(".parent_link > a").href = parentLink;
66 document.querySelector(".parent_link").style.display = "initial";
67 }
68
69 rows.sort((rowA, rowB) => rowA[1].localeCompare(rowB[1]));
70
71 let listing = document.querySelector(".listing");
72 let rowTemplate = document.getElementById("rowTemplate");
73 for (row of rows) {
74 let rowElement = rowTemplate.content.cloneNode(true);
75 rowElement.querySelector(".entry").classList.add(row[0]);
76 rowElement.querySelector(".name > .link").innerText = row[1];
77 rowElement.querySelector(".name > .link").href = row[2];
78 rowElement.querySelector(".size").innerText = row[3];
79 rowElement.querySelector(".last-modified").innerText = row[4];
80 listing.appendChild(rowElement);
81 }
82 }
83 </script>
84 </head>
85 <body>
86 <h1>Index of</h1>
87 <div class="parent_link"><a href="">Up to parent directory</a></div>
88 <div class="listing">
89 <div class="header">
90 <span class="name">Name</span>
91 <span class="size">Size</span>
92 <span class="last-modified">Last Modified</span>
93 </div>
94 </div>
95 <template id="rowTemplate">
96 <div class="entry">
97 <span class="name"><a class="link"></a></span>
98 <span class="size"></span>
99 <span class="last-modified"></span>
100 </div>
101 </template>
102 </body>
103</html>