Software > HTML & templates
The Throwback (retro) template. With large folder and mobile support.
danny:
The files (here at post#1) are open source; built for speed and quality. Feel free to make a comment.
There is no limit on folder size (any size folder is fine); so, it can be used for an effective music player and file finder (tested up to half million file list). There is no minimum connection speed (it has streaming file list). Any kind of connection works fine. It does caching too!
It has a clean layout that works on any size screen, and automated error recovery so it is super-easy for users (they are not confused).
The photo Thumbnail & Slideshow features are ondemand and adaptive for data savings.
The music shuffle player does many file types, and for direct-play just click on filename.
Template Install: HFS menu, HTML Template, change file
Do see: watchdog & WatchCat keepalive monitor accessories.
HFS2.3K for high capacity, if ethernet port force-set to 100mbit
Kudos to DJ for login, music shuffle player, delete and slideshow
See also: The simpler Stripes template on its own thread
LeoNeeson:
This is a nice thread to talk/discuss/share any old stuff and retro style template. It would be nice to have a speed oriented template (efficient HTML, bandwidth saver), which could work fast with any speed internet connection. :)
» Idea: How about adding 'Remote upload'...
A question to any experienced user on editing templates: do you know how to add a 'remote upload' box? For example, you have this URL: http://linux.com/distro.iso and want to download this ISO file directly to the server, in the current shared folder. So, you write that URL in a input box and press a 'Save' submit button, and then the HFS server starts downloading the file, and when it ends, it puts the file in the current shared folder. How handy this may come in? Imagine you are on a mobile connection and want to leave the server downloading a file, so when you come home, you have the file ready (and it's automatically shared on that folder). Is this doable?...
> Update: I was thinking in something like this: (click on image to enlarge)
I've only added this to your template:
--- Code: --- <div class=lil><b>Remote upload URL:</b>
<input type='text' name='search' value=''>
<input type='submit' name='submit' value='Transload'></div>
--- End code ---
Full code on how it looks like (it's currently a mock-up):
(This is only a preview code, it needs the actual functions)
--- Code: ---<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HFS %folder%</title>
<style type="text/css">%style%</style>
<script type="text/javascript" language="javascript">
//browseAbleFolderTree
function browseAbleFolderTree(folder) {
var infoFolder=folder;
var path=folder.split("/");
var pathTree="/";
var pathTreeResult="";
for(pta=1;pta<path.length;pta++) {
pathTree=pathTree+path[pta]+"/";
pathTreeResult=pathTreeResult +'/<a href="'+pathTree+'" class=\"swapDir\">'+path[pta]+'</a>';
}
document.getElementById('swapDir').innerHTML = pathTreeResult;
}
</script>
</head>
<body>
<div>
%upload-link%
%login-link%%loggedin%
<div class=lil><b>Remote upload URL:</b>
<input type='text' name='search' value=''>
<input type='submit' name='submit' value='Transload'></div>
<div class=lil><b>Current Directory:</b></div>
<div class=big><a href="/">Home</a><span id=swapDir>%folder%</span><script type="text/javascript" language="javascript">browseAbleFolderTree("%folder%")</script></div>
<div class=body>%folder-comment%%files%</div>
</div>
</body>
</html>
[login-link]
<div class=btn><a href="%encoded-folder%~login" class=inbtn><img align=top src="/~img27"><font color="yellow"> CLICK HERE TO LOG IN</font></a></div>
[loggedin]
<div class=btn><span class=inbtn><img align=top src="/~img27" alt=""> %user%</span></div>
[style]
body{padding:10px;font-weight:normal;font-family:"geneva",arial,"helvetica",sans-serif;background:black;margin:3}
.rw,.body,.inpt,.flg,.cmnt,th,comment,.flg,.inbtn,.col{background:#000}
.col,body,.rw,.body,#hm{color:#AAA}
body,.big,.lil,th,comment{font-size:9pt}
.inbtn{font-size:12pt}
.inpt,.flg,.cmnt,a,body,.inbtn,th,comment,.flg,.lil{color:#8D8}
.big{font-size:14pt}
.flg,.inbtn,.col,.rw,a,.big{font-weight:normal}
a{font-size:14pt}
.flg,.lil{font-size:8pt}
.inbtn,.body{border:3px solid #222}
.btn,.body{padding:15px}
.body{margin:15px}a{text-decoration:none}
a:visited{color:#CCC}
a:hover{color:yellow}
img{border:0}
.rw{font-size:11pt;border:2px solid #222}
.cmnt{font-size:7pt;padding:3px;margin-top:2px}
.inpt,.cmnt{border:1px inset #000}
.col{font-size:13pt}
.inbtn{padding:5px}
.btn{float:right}
.flg{text-align:center;border:1px solid;}
[upload-link]
<div class=btn><a href="%encoded-folder%~upload" class=inbtn><img align=top src="/~img32" alt=""><b><font color="yellow"> CLICK HERE TO UPLOAD FILES</font></b></a></div>
[up]
[nofiles]
[files]
<table class=lil width=100%>
<tr>
<td><b>%number-folders% Folders, %number-files% Files - Total Size: %total-size%</td>
<td align=right><b>At %timestamp% %speed-out%/%number-addresses-downloading%KB</b></td>
</tr>
</table>
<table width="100%">
<tr>
<th class=col><a href="%encoded-folder%?sort=n" style="color:#AAA;font-size:14px;">FileName</a></th>
<th class=col><a href="%encoded-folder%?sort=s" style="color:#AAA;font-size:14px;">Size</a></th>
<th class=col><a href="%encoded-folder%?sort=t" style="color:#AAA;font-size:14px;">Date</a></th>
<th></th>
</tr>
%list%
</table>
[file]
<tr>
<td class=rw>%new% <a href="%item-url%"> <font color="white">◇</font> %item-name%</a>%comment%</td>
<td class=rw align=center>%item-size%</td>
<td class=rw align=center>%item-modified%</td>
{.if|{.get|can delete.}|<td class=rw align=center><form method='post' id='filelist'><input type='hidden' name='selection' value='%item-url%'><input type='submit' name='action' value='delete' onclick='return confirm("Sure?")' ></form></td>.}
</tr>
[file.mp3 = file.m4a = file.wma]
<tr>
<td class=rw>%new% <a href="%item-url%"> <font color="#ADE8F9">♬</font> %item-name%</a>%comment%</td>
<td class=rw align=center>%item-size%</td>
<td class=rw align=center> <a href="mms://%host%%encoded-folder%%item-url%">MediaPlayer</a> </td>
{.if|{.get|can delete.}|<td class=rw align=center><form method='post' id='filelist'><input type='hidden' name='selection' value='%item-url%'><input type='submit' name='action' value='delete' onclick='return confirm("Sure?")' ></form></td>.}
</tr>
[link]
<tr>
<td class=rw>%new%<a href="%item-url%"> <font color="white">⇗</font> %item-name%</a>%comment%</td>
<td colspan=3 class=rw><i> Hyperlink</i></td>
</tr>
[folder]
<tr>
<td class=rw>%new%<a href="%item-url%"> <font color="#FFFDA8" size="3">📁</font> <b>%item-name%</b></a></td>
<td class=rw align=center><i>Folder</i></td>
<td class=rw align=center>%item-modified%</td>
<td></td>
</tr>
[comment]
<div class=cmnt>%item-comment%</div>
[folder-comment]
<div class=cmnt>%item-comment%</div>
[error-page]
{.if|{.match|*.php*;*.js|%url%.}|{:{.disconnect.}:}.}{.add header|Cache-Control: no-cache, max-age=0.}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">%content%</html>
[not found]
<META HTTP-EQUIV="Refresh" CONTENT="2;URL=./"><TITLE>404</TITLE><body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<center><h2><br>You have found the 404 page.</h2>Returning to previous page.</center></body>
[overload]
<META HTTP-EQUIV="Refresh" CONTENT="3;URL=./"><TITLE>Overload</TITLE><body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<center><h2><br>High traffic mode engaged.</h2>Returning to previous page after overload has cleared.</center></body>
[max contemp downloads]
<META HTTP-EQUIV="Refresh" CONTENT="2;URL=./"><TITLE>Downloads</TITLE><body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<center><h2><br>There are ongoing downloads.</h2>More available <i>after</i> current downloads finish.</center></body>
[unauthorized]
<META HTTP-EQUIV="Refresh" CONTENT="3;URL=./"><TITLE>Login</TITLE><body bgcolor="black" text="white" alink="white" link="white" vlink="white">
<center><h2><br>You're not logged in.</h2>Name and password do not match.<br><br>If there's no login, try a different<br>browser for your phone.</center></body>
{.if|%user%|{:{.set|n|{.from table|#tries|%ip%.}.}{.inc|n.}{.if|{.{.^n.} > 20.}|{:{.set ini|{.no pipe|ban-list={.from table|#ini|ban-list.}%ip%#attack? {.time.}|.}.}{.set table|#tries|%ip%=0.}:}|{:{.set table|#tries|%ip%={.^n.}.}:}/if.}:}.}
[deny]
{.redirect|/.}
[ban]
{.disconnect.}
[upload]
<html>
<head>
<title>Upload to: %folder%</title>
<style type="text/css">%style%</style>
<script type="text/javascript" language="javascript">
//add upload input
var counter = 0;
function addUpload() {
counter++;
if (counter < 7)
document.getElementById("addupload").innerHTML += "<br><input name=\"fileupload"+counter+"\" size=\"50\" type=\"file\">";
if (counter == 6) {
document.getElementById("addUploadLink").innerHTML = "<a style=\"cursor:text;color:yellow;\">- PLEASE PUT MULTIPLE FILES INTO A ZIP FILE -</a>";
}
}
</script>
</head>
<body>
<div class=btn><span class=inbtn><img align=top src="/~img27" alt=""> %user%</span></div>
<div class=lil><b>Upload to:</b></div>
<div class=big><a href="/" target=_parent class=swapDir>Home</a>%folder%</div>
<div class=body>
<center>
<b>Free Space Available For Upload: %diskfree%</b><br><br>
<form action="%encoded-folder%" target=_parent method=post enctype="multipart/form-data" onSubmit="frm.upbtn.disabled=true; return true;"><div id=addupload><input name="fileupload1" size=50 type=file></div><a id=addUploadLink style="cursor:pointer;" onclick="addUpload();">- Add Upload -</a><br><br><input name=upbtn type=submit value="Upload Selected File(s)"></form>
</center>
</div>
</body>
</html>
[upload-results]
<html>
<head>
<title>Upload results for: %folder%</title>
<style type="text/css">%style%</style>
</head>
<body>
%loggedin%
<div class=lil>Upload results for:</div>
<div class=big>%folder%</div><div class=body>%uploaded-files%<br><br><a href="%encoded-folder%" target=_parent class=big><img align=bottom src="/~img14" alt=""> Go Back</a></div>
</body>
</html>
[upload-success]
<li><b>SUCCESS!</b> Uploaded: %item-name% --- %item-size% (Speed: %speed% KB/s)
[upload-failed]
<li><b>FAILED!</b> Error while uploading: %item-name%: --- %reason%
[newfile]
<span class=flg> NEW </span>
--- End code ---
Any idea on how to make this work?... ???
» Update: February 10, 2020, 09:00 AM
About adding a 'Remote upload' feature on HFS, I've opened a new thread to discuss about it, HERE. If you have any improvements or enhancements (or any other thing related to this), please leave your comments there. Thanks!... ;)
bmartino1:
Love the simplicty, and ease / look
( if eel like i can finaly use standard html coding to hfs again :)
On another not,
I think the CSS and HTML code (JavaScript could active the login box, here is what w3 schools has about it.0
https://www.w3schools.com/howto/howto_css_login_form.asp
looking into this
I only know of a php soulion to the web form, w3 scholls claims thaetre is a jhavascript (ajax/arco/etc)
way to acomplis a login form
thanks fr your help/support and work danny
LeoNeeson:
--- Quote from: danny on May 11, 2018, 11:06:52 AM ---P.S. My other project is startfetch.com Picture this, you're at your pc, your phone messenger goes off (facebook, hangouts, whatsapp), and do you go get it to type on the little screen if the battery permits, or do you go to startfetch.com, click once and enjoy the full size keyboard? Peek under the hood (view source) and check the code. That another case of "looks simple, after it is done" and that all fits in just 24k.
--- End quote ---
That was fast! opening StartFetch.com was blazing fast (I see you've encoded icons in Base64 to speed things up, nice trick). I really miss those good old days where every website was almost as fast as that. But on these days, only checking emails via webmail, could take 1.5MB at best (and all thanks to WebFonts and JavaScript libraries). Thanks God there is still POP3/IMAP to check emails, but for all the rest, I get used to overload my browser to view just a simple website. And the same happens with software and games, everything it's made to make our PCs slow without sense. That's why I love HFS, because it's small enough to be a full featured-packed program.
--- Quote from: danny on May 11, 2018, 11:06:52 AM ---Anyway, I do that remoting task myself, not with a web server, but with tightvnc (or realvnc) on the server and bvnc on the phone.
--- End quote ---
Thanks, I'll have a look to bVNC (it looks good).
--- Quote from: danny on May 11, 2018, 11:06:52 AM ---That's a server-side script, possibly ajax? I don't know how to do that.
--- End quote ---
Don't worry. I'll leave the question open if someone else knows what server-side script (macro) use.
--- Quote from: danny on May 12, 2018, 09:35:56 AM ---Revised to double the speed. Updates at post#1 and 2.
--- End quote ---
Good work! :)
LeoNeeson:
I didn't have the chance to test 'Throwback4.tpl' (perhaps you could attach it on this message if you want), but 'TB5.tpl' works great and fast. :)
Navigation
[0] Message Index
[#] Next page
Go to full version