<!DOCTYPE html>
<html>
<head>
<title>File Explorer</title>
<style>
:root {
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-weight: 300;
--min-width: 700px;
}
body {
font-family: var(--font);
margin: 0;
padding: 0;
}
#explorer {
box-sizing: border-box;
border-collapse: collapse;
font-family: var(--font);
font-weight: var(--font-weight);
margin: 0;
max-height: calc(100vh - 2rem);
min-width: var(--min-width);
overflow-y: auto;
padding: 0;
padding-bottom: 2rem;
width: 100%;
}
#explorer .hrow {
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
position: -webkit-sticky;
position: sticky;
top: 0;
}
#explorer .hrow .hcol {
border-right: 1px solid #DDDDDD;
box-sizing: border-box;
padding: .3rem .35rem;
}
#explorer .brow, .bcol {
box-sizing: border-box;
padding: .15rem 0;
}
#explorer .hrow .hcol:first-child,
#explorer .hrow .hcol:last-child {
border-right: none;
}
#explorer .hcol, #explorer .bcol { display: inline-block; }
#explorer .hcol:nth-child(1), #explorer .bcol:nth-child(1) {
/* Icon Column */
width: 1.5rem;
}
#explorer .hcol:nth-child(2), #explorer .bcol:nth-child(2) {
/* Name Column */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 300px;
}
#explorer .hcol:nth-child(3), #explorer .bcol:nth-child(3) {
/* Size Column */
max-width: 20%;
min-width: 150px;
}
#explorer .hcol:nth-child(4), #explorer .bcol:nth-child(4) {
/* Date created Column */
max-width: 20%;
min-width: 200px;
}
#explorer .hcol:nth-child(5), #explorer .bcol:nth-child(5) {
/* Date modified Column */
max-width: 20%;
min-width: 200px;
}
#explorer .icon-col { width: 1rem; }
#explorer .entry-link {
color: #000000;
display: inline-block;
text-decoration: none;
width: 100%;
}
#explorer .brow { cursor: pointer; }
#explorer .brow:nth-child(even) { background-color: #FAFAFA; }
#explorer .brow:hover { background-color: #EEEEEE; }
#explorer .hcol { font-weight: var(--font-weight); }
#explorer .hcol, #explorer .bcol {
box-sizing: border-box;
padding-left: .5rem;
}
#status-bar {
align-items: center;
background-color: #FFFFFF;
bottom: 0;
border-top: 1px solid #DDDDDD;
display: flex;
justify-content: flex-end;
height: 1.5rem;
position: fixed;
min-width: var(--min-width);
width: 100%;
}
#support {
border-right: 1px solid #DDDDDD;
box-sizing: border-box;
display: flex;
height: 100%;
padding: 0 1rem;
margin: 0;
list-style-type: none;
}
#support li {
align-items: center;
border-right: 1px solid #DDDDDD;
display: flex;
justify-content: center;
width: 2rem;
}
#support li:last-child { border-right: none; }
</style>
</head>
<body>
<main>
<ul id="explorer">
<li class="hrow">
<span class="hcol icon-col"> </span>
<span class="hcol">Name</span>
<span class="hcol">Size</span>
<span class="hcol">Date created</span>
<span class="hcol">Date modified</span>
</li>
{{#each entries}}
<li class="brow">
<a class="entry-link" href={{entry_path}}>
<span class="bcol icon-col">
{{#if is_dir}}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z"></path></svg>
{{else}}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V6H9.75A1.75 1.75 0 018 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0112.25 15h-8.5A1.75 1.75 0 012 13.25V1.75z"></path></svg>
{{/if}}
</span>
<span class="bcol">{{display_name}}</span>
<span class="bcol">{{size}}</span>
<span class="bcol">{{created_at}}</span>
<span class="bcol">{{updated_at}}</span>
</a>
</li>
{{/each}}
</ul>
<div id="status-bar">
<ul id="support">
<li>
<a href="https://github.com/EstebanBorai/http-server/issues/new" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>
</a>
</li>
<li>
<a href="https://github.com/EstebanBorai/http-server/compare" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
</a>
</li>
</ul>
</div>
</main>
</body>
</html>
