Replacement for Apache DirectoryIndex
<!doctype html> | |
<!-- - - - - - - - - --> | |
<!-- Folder Listing --> | |
<!-- - - - - - - - - --> | |
<!-- Example page: https://centerkey.com/files --> | |
<html lang=en> | |
<head> | |
<meta charset=utf-8> | |
<meta name=viewport content="width=device-width, initial-scale=1"> | |
<meta name=apple-mobile-web-app-title content="Folder"> | |
<title>Folder Listing • <?=basename(__DIR__)?></title> | |
<link rel=icon href=https://centerkey.com/graphics/bookmark.png> | |
<link rel=apple-touch-icon href=https://centerkey.com/graphics/mobile-home-screen.png> | |
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11/css/all.min.css> | |
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/dna.js@1.5/dist/dna.css> | |
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/web-ignition@1.1/dist/reset.min.css> | |
<style> | |
body { margin: 0px 20px; } | |
body >main { min-height: auto; } | |
body >main h1 { color: cadetblue; } | |
body >main a { border-color: cadetblue; } | |
body >main a { outline-color: white; } /* workaround for ghost line on hover in safari */ | |
body >main a:hover { background-color: cadetblue; outline-color: cadetblue; } | |
body >main ul.simple-text { margin: 0px 0px 30px 15px; } | |
body >main ul.simple-text li { display: flex; align-items: center; margin-bottom: 10px; } | |
body >main ul.simple-text li i.font-icon { width: 1.8em; text-align: center; color: darkgoldenrod; } | |
body >main p a { margin-right: 8px; } | |
@media (max-width: 667px) { /* selects iPhone 6/6s/7/8 landscape and anything narrower */ | |
body { margin: 0px; } | |
body >main h1 { font-size: 1.7em; } | |
body >main ul.simple-text { margin-left: 0px; } | |
} | |
</style> | |
<?php | |
function showFile($file) { | |
$extension = pathinfo($file, PATHINFO_EXTENSION); | |
return !is_dir($file) && $file[0] !== "." && $extension !== 'php' && $file !== 'error_log'; | |
} | |
function toHtml($file) { | |
$icon = is_dir($file) ? "folder" : "file"; | |
return "<li><a href=$file><i data-icon=$icon></i></a> <a href=$file>$file</a></li>"; | |
} | |
?> | |
</head> | |
<body> | |
<main> | |
<h1>Folder Listing</h1> | |
<h2><?=$_SERVER["REQUEST_URI"]?></h2> | |
<ul class=simple-text> | |
<li><a href=..><i data-icon=arrow-alt-circle-up></i></a> <a href=..>Parent folder</a></li> | |
<?=implode(PHP_EOL, array_map("toHtml", glob("*", GLOB_ONLYDIR)))?> | |
<?=implode(PHP_EOL, array_map("toHtml", array_filter(glob("*"), "showFile")))?> | |
</ul> | |
<p> | |
<a href=# class=home-link><i data-icon=home></i></a> | |
<a href=https://gist.github.com/dpilafian/930e1677d0c08eed3c39f04d32d7bf19><i data-brand=github-alt></i></a> | |
</p> | |
</main> | |
<script src=https://cdn.jsdelivr.net/npm/jquery@3.4/dist/jquery.min.js></script> | |
<script src=https://cdn.jsdelivr.net/npm/dna.js@1.5/dist/dna.min.js></script> | |
<script src=https://cdn.jsdelivr.net/npm/web-ignition@1.1/dist/library.min.js></script> | |
<script>$('.home-link').attr({ href: window.location.origin });</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment