Directory Listing Formatting

<!-- ----------.htaccess---------- -->
#ENABLE DIR.LIST BUT HIDE PARENT DIR. AND PHP
Options +Indexes
IndexIgnore .. *php

#SET INDEX OPTIONS
IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* SuppressHTMLPreamble HTMLTable

#SPECIFY HEADER AND FOOTER FILE
HeaderName /path/header.html
ReadmeName /path/footer.html

<!-- ----------header.html---------- -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

table{
border:1.5px solid black;
border-collapse: collapse;
width: 96%;
margin: 10px 2% 0 2%;
font: 12px Arial;
table-layout: fixed;
}

a{
text-decoration: none;
}

a:visited{
color: blue;
}

th{
background: yellow;
text-align: center;
border: 1px solid black;
}

th:nth-child(1){
width: 30px;
}

th:nth-child(2){
text-align: left;
width: auto;
}

th:nth-child(3){
width: 70px;
}

th:nth-child(4){
width: 40px;
}

td{
padding: 2px;
border:1px solid black;
height: 1em;
text-align: left;
vertical-align: center;
overflow: auto;
}

td:nth-child(3){
text-align: center;
font-style: italic;
}

td:nth-child(1),
td:nth-child(4){
text-align: center;
}

th[colspan="5"],
th:nth-child(5),
td:nth-child(5){
display: none;
}

h3{
font: bold 12px Arial;
color: green;
margin: 0 0 0 2%;
}

#home{
width: 96%;
margin: 20px 2%;
font: bold 12px "Courier New";
animation: skale 2.5s linear infinite alternate;
}

@keyframes skale{
0%{transform: scale(1,1)}
100%{transform: scale(0.9,0.9)}
}
</style>
</head>
<body>


<!-- ----------footer.html---------- -->
<div id="home">
In the table above, you can see the files and subdirectories present in this directory. PHP files are hidden, since they can't be viewed in the browser. Click <a href="/">HERE</a> to go back to the home page! &#9734; Kawiesh &#9734;
</div>
<script>
let create= (x)=> document.createElement(x),
select= (x,y=document)=> y.querySelector(x),
selectAll= (x,y=document)=> y.querySelectorAll(x);

addH3();
renameMod();
removeTime();

function addH3(){
let a= `List of files in ${location.hostname}`;
let b= `List of files in ${location.hostname}${location.pathname}`;


let h3= create("h3");
document.body.prepend(h3);

h3.innerHTML= (location.pathname=="/") ? a : b;
document.title= location.hostname + " - File list";
}

function renameMod(){
let a= select("th:nth-child(3)>a");
a.text= "Modified";
}

function removeTime(){
let a= selectAll("td:nth-child(3)");
let b= /\d{4}-\d{2}-\d{2}/;

a.forEach(i=>{
let a= i.innerHTML.match(b);
a= a.toString().split("-");
let d= a[2], m= a[1], y= a[0];
i.innerHTML= `${d}-${m}-${y}`;
});
}

//Add custom icons

function addIcon(a,b,c){
if(a.text.endsWith(b)){
a.closest("td").previousElementSibling.innerHTML= c;
}
}
let name= selectAll("td:nth-child(2)>a");
name.forEach(i=>{
addIcon(i,"",file);
addIcon(i,".svg",pic);
addIcon(i,".jpg",pic);
addIcon(i,".png",pic);
addIcon(i,".gif",pic);
addIcon(i,".mp3",mp3);
addIcon(i,".pdf",pdf);
addIcon(i,".zip",zip);
addIcon(i,"/",folder);
});

//Make variables for file,pic,mp3,pdf,zip,folder,etc.
//Inline svg or img

</script>
</body>
</html>