enhance: updated theme for web file browser

This commit is contained in:
2024-12-02 10:45:18 -07:00
parent f7d49fa066
commit 331766bd3a
11 changed files with 480 additions and 91 deletions

View File

@@ -526,7 +526,7 @@ Then navigate to the newly mounted folder and add your `📄 cert.crt` and `🔑
<br /> <br />
> [!NOTE] > [!NOTE]
> If is recommended if you are generating your own SSL certificate and keys, you use a minimum of: > If you are generating your own certificate and key, we recommend a minimum of:
> - RSA: `2048 bits` > - RSA: `2048 bits`
> - ECC: `256 bits` > - ECC: `256 bits`
> - ECDSA: `P-384 or P-521` > - ECDSA: `P-384 or P-521`

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

@@ -29,18 +29,22 @@ server
location / location /
{ {
# enable for basic auth # enable for basic auth
#auth_basic "Restricted"; # auth_basic "Restricted";
#auth_basic_user_file /config/nginx/.htpasswd; # auth_basic_user_file /config/nginx/.htpasswd;
# index > fancy # index > fancy
fancyindex on; fancyindex on;
fancyindex_header "/theme/header.html"; fancyindex_header "/theme/header.html";
fancyindex_footer "/theme/footer.html"; fancyindex_footer "/theme/footer.html";
fancyindex_ignore "theme"; fancyindex_ignore "theme";
fancyindex_time_format "%m-%d-%Y %T"; fancyindex_time_format "%m-%d-%Y %l:%M:%S %P";
fancyindex_directories_first on;
fancyindex_localtime on;
fancyindex_name_length 255; fancyindex_name_length 255;
fancyindex_show_path off;
fancyindex_show_dotfiles off; fancyindex_show_dotfiles off;
fancyindex_hide_symlinks on; fancyindex_hide_symlinks on;
fancyindex_hide_parent_dir on;
fancyindex_default_sort name; fancyindex_default_sort name;
# index > auto # index > auto

File diff suppressed because one or more lines are too long

View File

@@ -4,19 +4,17 @@
<footer class="footer navbar"> <footer class="footer navbar">
<div class="container"> <div class="container">
<div class="col text-right text-muted text-small text-nowrap"> <div class="col text-center text-muted text-small text-nowrap">
<small> <small>Developed by Aetherinox - <a href="https://github.com/Aetherinox/thetvapp-docker">TheTVApp Grabber</a></small>
<a href="https://github.com/dtankdempse/thetvapp-m3u">thetvapp hoster</a>.
</small>
</div> </div>
</div> </div>
</footer> </footer>
<script type="text/javascript"> <script type="text/javascript">
generateBreadcrumbs(); CreateBreadcrumbs();
generateList(); GenerateFileIcons();
</script> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox-plus-jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox-plus-jquery.min.js"></script>
</body> </body>
</html> </html>

View File

@@ -5,23 +5,25 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>File Browser</title> <title>TheTvApp for Docker</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css">
<link rel="stylesheet" href="/theme/css/ui.min.css">
<link rel="stylesheet" href="/theme/theme.css"> <link rel="stylesheet" href="/theme/theme.css">
<script type="text/javascript" src="/theme/js/interface.min.js"></script>
<script type="text/javascript" src="/theme/js/breadcrumbs.js"></script> <script type="text/javascript" src="/theme/js/breadcrumbs.js"></script>
<script type="text/javascript" src="/theme/js/list.js"></script> <script type="text/javascript" src="/theme/js/fileicons.js"></script>
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<nav class="navbar sticky-top container"> <nav class="navbar sticky-top container">
<div class="navbar-brand"> <div class="navbar-brand">
<i class="fa fa-fw fa-files-o" aria-hidden="true"></i> <i class="fa-sharp-duotone fa-regular fa-tv" style="--fa-primary-color: rgb(255, 255, 255); --fa-secondary-color: rgb(255, 255, 255);" aria-hidden="true"></i>
File Browser <a href="https://github.com/Aetherinox/thetvapp-docker">TheTvApp for Docker</a>
</div> </div>
</nav> </nav>
</div> </div>
@@ -33,3 +35,4 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="about">This page displays your most recent copies of TheTvApp's <code>.m3u8</code> playlist and <code>.xml</code> EPG guide data. Right-click each file, select <span class="text-accent">Copy Link</span> and paste the URLs within your IPTV apps such as Jellyfin. The <code>.m3u8</code> and <code>.m3u8.gz</code> are identical guide lists, but the <code>.xml.gz</code> is compressed and will import into your IPTV application much faster.</div>

View File

@@ -1,9 +1,10 @@
/*! /*
* @app thetvapp grabber
* This file is part of the nginx-fancyindex-flat-theme, licensed under the GNU @author Aetherinox
* General Public License. See the LICENSE file for details. @url https://github.com/Aetherinox/thetvapp-docker
* https://hub.docker.com/repository/docker/aetherinox/thetvapp
* Copyright (C)
* 2018-2024 Alexander Haase <ahaase@alexhaase.de> Generate breadcrumbs for header
*/ */
function generateBreadcrumbs(){for(var e,a,n,r=window.location.pathname.replace(/\/$/,"").split("/"),t="",c="",o=0;o<r.length;o++)c+=r[o]+"/",t+=(e=0==o?"Home":decodeURIComponent(r[o]),a=c,'<li class="breadcrumb-item'+((n=o==r.length-1)?' active aria-current="page':"")+'">'+(n?"":'<a href="'+a+'">')+e+(n?"":"</a>"));document.getElementById("breadcrumbs").innerHTML=t}
function CreateBreadcrumbs(){for(var e,a,n,r=window.location.pathname.replace(/\/$/,"").split("/"),t="",c="",o=0;o<r.length;o++)c+=r[o]+"/",t+=(e=0==o?"Home":decodeURIComponent(r[o]),a=c,'<li class="breadcrumb-item'+((n=o==r.length-1)?' active aria-current="page':"")+'">'+(n?"":'<a href="'+a+'">')+e+(n?"":"</a>"));document.getElementById("breadcrumbs").innerHTML=t}

View File

@@ -0,0 +1,203 @@
/*
@app thetvapp grabber
@author Aetherinox
@url https://github.com/Aetherinox/thetvapp-docker
https://hub.docker.com/repository/docker/aetherinox/thetvapp
Generate icons for each file shown in list
*/
function GenerateFileIcons()
{
function e(e)
{
return '<i class="fa fa-fw ' + e + '" aria-hidden="true"></i>'
}
var a = document.getElementById("list");
a.removeAttribute("cellpadding"), a.removeAttribute("cellspacing"), a.classList.add("table", "table-sm", "table-hover", "text-nowrap"), a.tHead.children[0].classList.add("d-none", "d-md-table-row"), "/" != window.location.pathname && a.deleteRow(1);
for (var s, c = 0; s = a.rows[c]; c++) filetype = function(e)
{
if (e.endsWith("/"))
return "fa-duotone fa-solid fa-folder";
switch (e.split(".").pop().toLowerCase())
{
case "txt":
return "fa-solid fa-file-lines";
case "pdf":
return "fa-solid fa-file-pdf";
case "bmp":
return "fa-solid fa-file-image";
case "gif":
return "fa-solid fa-file-gif";
case "jpeg":
return "fa-solid fa-file-jpg";
case "jpg":
return "fa-solid fa-file-jpg";
case "png":
return "fa-solid fa-file-png";
case "tif":
return "fa-solid fa-file-image";
case "tiff":
return "fa-solid fa-file-image";
case "aac":
return "fa-solid fa-file-music";
case "aiff":
return "fa-solid fa-file-audio";
case "m4a":
return "fa-solid fa-file-audio";
case "mp3":
return "fa-solid fa-file-mp3";
case "ogg":
return "fa-solid fa-file-music";
case "opus":
return "fa-solid fa-file-music";
case "m3u":
return "fa-solid fa-file-lines";
case "m3u8":
return "fa-solid fa-file-lines";
case "wav":
return "fa-solid fa-file-audio";
case "amv":
return "fa-solid fa-file-video";
case "avi":
return "fa-solid fa-file-video";
case "flv":
return "fa-solid fa-file-video";
case "m4v":
return "fa-solid fa-file-video";
case "mkv":
return "fa-solid fa-file-video";
case "mov":
return "fa-solid fa-file-mov";
case "mp4":
return "fa-solid fa-file-mp4";
case "m4p":
return "fa-solid fa-file-audio";
case "mpeg":
return "fa-solid fa-file-mp4"
case "mpg":
return "fa-solid fa-file-video";
case "ogv":
return "fa-solid fa-file-video";
case "vob":
return "fa-duotone fa-solid fa-photo-film";
case "webm":
return "fa-solid fa-file-video";
case "wmv":
return "fa-solid fa-file-video";
case "7z":
return "fa-solid fa-file-zipper";
case "a":
return "fa-solid fa-file-binary";
case "apk":
return "fa-solid fa-box-archive";
case "ar":
return "fa-solid fa-file-binary";
case "bin":
return "fa-solid fa-file-binary";
case "bz2":
return "fa-solid fa-file-zipper";
case "cab":
return "fa-solid fa-cabinet-filing";
case "dmg":
return "fa-solid fa-tablet-button";
case "gz":
return "fa-solid fa-file-zipper"
case "xml":
return "fa-solid fa-file-xml"
case "iso":
return "fa-duotone fa-regular fa-compact-disc";
case "jar":
return "fa-solid fa-jar";
case "lz":
return "fa-solid fa-file-zipper"
case "lzma":
return "fa-solid fa-file-zipper"
case "lzo":
return "fa-solid fa-file-zipper"
case "pak":
return "fa-solid fa-file-zipper"
case "partimg":
return "fa-solid fa-file-zipper"
case "rar":
return "fa-solid fa-file-zipper"
case "s7z":
return "fa-solid fa-file-zipper"
case "tar":
return "fa-solid fa-file-zipper"
case "tbz2":
return "fa-solid fa-file-zipper"
case "tgz":
return "fa-solid fa-file-zipper"
case "tlz":
return "fa-solid fa-file-zipper"
case "txz":
return "fa-solid fa-file-zipper"
case "xz":
return "fa-solid fa-file-zipper"
case "zip":
return "fa-solid fa-file-zip";
case "doc":
return "fa-solid fa-file-doc";
case "docx":
return "fa-solid fa-file-doc";
case "odt":
return "fa-solid fa-file-lines";
case "rtf":
return "fa-solid fa-file-word";
case "csv":
return "fa-solid fa-file-csv";
case "ods":
return "fa-solid fa-file-spreadsheet";
case "xls":
return "fa-solid fa-file-xls";
case "xlsx":
return "fa-solid fa-file-xls";
case "odp":
return "fa-solid fa-file-powerpoint";
case "ppt":
return "fa-solid fa-file-ppt";
case "pptx":
return "fa-solid fa-file-powerpoint";
case "c":
return "fa-solid fa-file-binary";
case "class":
return "fa-solid fa-file-binary";
case "cpp":
return "fa-solid fa-file-binary";
case "cs":
return "fa-solid fa-file-binary";
case "h":
return "fa-solid fa-file-binary";
case "hpp":
return "fa-solid fa-file-binary";
case "hxx":
return "fa-solid fa-file-binary";
case "java":
return "fa-solid fa-file-binary";
case "py":
return "fa-solid fa-file-code";
case "sh":
return "fa-solid fa-file-code";
case "swift":
return "fa-solid fa-file-code";
case "vb":
return "fa-solid fa-file-code";
case "svg":
return "fa-solid fa-file-svg";
case "pem":
return "fa-solid fa-file-lock";
case "key":
return "fa-solid fa-file-lock";
case "eps":
return "fa-solid fa-file-eps";
case "cad":
return "fa-solid fa-file-cad";
default:
return "fa-solid fa-file"
}
}(s.cells[0].children[0].innerHTML), s.insertCell(0).innerHTML = 0 < c ? e(filetype) : "", s.cells[0].classList.add("col-auto"), s.cells[1].classList.add("col", "filename"), s.cells[2].classList.add("col-auto", "d-none", "d-md-table-cell"), s.cells[3].classList.add("col-auto", "d-none", "d-md-table-cell"), "image" == filetype && s.cells[1].children[0].setAttribute("data-lightbox", "roadtrip")
}

File diff suppressed because one or more lines are too long

View File

@@ -1,9 +0,0 @@
/*!
*
* This file is part of the nginx-fancyindex-flat-theme, licensed under the GNU
* General Public License. See the LICENSE file for details.
*
* Copyright (C)
* 2018-2024 Alexander Haase <ahaase@alexhaase.de>
*/
function generateList(){function e(e){return'<i class="fa fa-fw '+function(e){switch(e){case"folder":return"fa-folder";case"archive":case"audio":case"code":case"excel":case"image":case"pdf":case"powerpoint":case"text":case"video":case"word":return"fa-file-"+e+"-o";default:return"fa-file-o"}}(e)+'" aria-hidden="true"></i>'}var a=document.getElementById("list");a.removeAttribute("cellpadding"),a.removeAttribute("cellspacing"),a.classList.add("table","table-sm","table-hover","text-nowrap"),a.tHead.children[0].classList.add("d-none","d-md-table-row"),"/"!=window.location.pathname&&a.deleteRow(1);for(var s,c=0;s=a.rows[c];c++)filetype=function(e){if(e.endsWith("/"))return"folder";switch(e.split(".").pop().toLowerCase()){case"txt":return"text";case"pdf":return"pdf";case"bmp":case"gif":case"jpeg":case"jpg":case"png":case"tif":case"tiff":return"image";case"aac":case"aiff":case"m4a":case"mp3":case"ogg":case"opus":case"wav":return"audio";case"amv":case"avi":case"flv":case"m4v":case"mkv":case"mov":case"mp4":case"m4p":case"mpeg":case"mpg":case"ogv":case"vob":case"webm":case"wmv":return"video";case"7z":case"a":case"apk":case"ar":case"bin":case"bz2":case"cab":case"dmg":case"gz":case"iso":case"jar":case"lz":case"lzma":case"lzo":case"pak":case"partimg":case"rar":case"s7z":case"tar":case"tbz2":case"tgz":case"tlz":case"txz":case"xz":case"zip":return"archive";case"doc":case"docx":case"odt":case"rtf":return"word";case"csv":case"ods":case"xls":case"xlsx":return"excel";case"odp":case"ppt":case"pptx":return"powerpoint";case"c":case"class":case"cpp":case"cs":case"h":case"hpp":case"hxx":case"java":case"py":case"sh":case"swift":case"vb":return"code"}}(s.cells[0].children[0].innerHTML),s.insertCell(0).innerHTML=0<c?e(filetype):"",s.cells[0].classList.add("col-auto"),s.cells[1].classList.add("col","filename"),s.cells[2].classList.add("col-auto","d-none","d-md-table-cell"),s.cells[3].classList.add("col-auto","d-none","d-md-table-cell"),"image"==filetype&&s.cells[1].children[0].setAttribute("data-lightbox","roadtrip")}

View File

@@ -1,9 +1,196 @@
/*! /*!
* This file is part of the nginx-fancyindex-flat-theme (licensed under the GPL * This file is part of the nginx-fancyindex-flat-theme (licensed under the GPL
* license) and uses Twitter Bootstrap (v4) (licensed under the MIT license). * license) and uses Twitter Bootstrap (v4) (licensed under the MIT license).
* *
* Copyright (C) * Copyright (C) 2018-2024 Alexander Haase <ahaase@alexhaase.de>
* 2018-2024 Alexander Haase <ahaase@alexhaase.de> * Copyright (C) 2025 Aetherinox
* *
* See the LICENSE file for details. * See the LICENSE file for details.
*/body{background-color:#f8f9fa;padding-bottom:20px}@media (prefers-color-scheme:dark){body{background-color:#343a40;color:#fff}}.breadcrumb{background-color:transparent;padding-left:35px}.breadcrumb .breadcrumb-item a{color:#4caf50}html{position:relative;min-height:100%}.footer{position:absolute;bottom:0;width:100%;margin-bottom:0}.footer a,.footer a:focus,.footer a:hover{color:#4caf50}.header{background-color:#4caf50;color:#fff;min-height:24px}.header .navbar-brand{padding:0 8px;font-size:16px;line-height:24px;height:24px}#list a,#list a:focus,#list a:hover{color:#000}#list colgroup{display:none}#list .filename{word-break:break-all;white-space:normal}@media (prefers-color-scheme:dark){#list a,#list a:focus,#list a:hover{color:#fff}} */
body
{
background-color: #f8f9fa;
padding-bottom: 20px;
}
@media (prefers-color-scheme: dark)
{
body
{
background-color: #262626;
color: #fff;
}
}
.container nav
{
margin-left: -8px;
}
.container .about
{
padding-left: 8px;
padding-bottom: 40px;
font-size: 9.3pt;
}
.breadcrumb
{
background-color: transparent;
padding: 0rem 1rem;
}
.breadcrumb .breadcrumb-item a
{
color: #4caf50;
}
html
{
position: relative;
min-height: 100%;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0;
padding-bottom: 20px;
padding-top: 20px;
background-color: #151515;
}
.footer a,
.footer a:focus,
.footer a:hover
{
color: #FFFFFF;
}
.footer a
{
color: #f7296c;
}
.navbar
{
padding: 15px 1rem;
}
.header
{
background-color: #a82147;
color: #fff;
height: 55px;
}
.header .navbar-brand
{
padding: 0 8px;
font-size: 16px;
line-height: 24px;
height: 24px;
}
.header a
{
color: #FFF;
text-decoration: none;
padding-left: 7px;
}
#breadcrumbs::before
{
margin-top: 4px;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='white' width='19px' height='19px'%3E%3Cdefs%3E%3Cstyle%3E.fa-secondary%7Bopacity:.4%7D%3C/style%3E%3C/defs%3E%3Cpath class='fa-primary' d='M160 384H512c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H394.5c-17 0-33.3-6.7-45.3-18.7L322.7 50.7c-12-12-28.3-18.7-45.3-18.7H160c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64z'%3E%3C/path%3E%3Cpath class='fa-secondary' d='M24 96c13.3 0 24 10.7 24 24V344c0 48.6 39.4 88 88 88H456c13.3 0 24 10.7 24 24s-10.7 24-24 24H136C60.9 480 0 419.1 0 344V120c0-13.3 10.7-24 24-24z'%3E%3C/path%3E%3C/svg%3E");
}
.breadcrumb-item.active
{
color: #6c757d;
padding-left: 10px;
}
.breadcrumb
{
padding-top: 30px;
}
#list a,
#list a:focus
{
color: #FFF !important;
}
#list a:hover
{
color: #ff275d !important;
}
#list colgroup
{
display: none;
}
#list .filename
{
word-break: break-all;
white-space: normal;
}
.table thead th a
{
color: #9b9b9b !important;
font-weight: normal;
}
.table td, .table th
{
padding: .75rem;
vertical-align: top;
border-top: 0px solid #dee2e6;
}
.table thead tr
{
border-bottom: 2px solid #575757;
background-color: #181818;
}
.table thead th
{
vertical-align: bottom;
border-bottom: 0px solid #575757;
}
.table-hover tbody tr:hover
{
background-color: rgba(155, 155, 155, 0.075);
}
.text-accent
{
font-weight: bold;
color: #d0c273;
}
code
{
font-size: 96%;
color: #ff4985;
word-break: break-word;
padding-right: 5px;
padding-left: 4px;
}
@media (prefers-color-scheme: dark)
{
#list a,
#list a:focus,
#list a:hover {
color: #fff;
}
}