Software > HTML & templates

The really fast Throwback (retro) template. Large folders and phones? No problem

(1/26) > >>

danny:
Classic elegance, some new features, and a lot more speed. . .
The speed shows well in high-load and large-folder conditions.

Features:
Phone and Tablet screen-support, including good tap targets and easily readable fonts. 
Tested with iPhone, Android, and PC too, from pocket size to wall size displays.
Photo Thumbnails via load-on-scroll bandwidth saver, Slideshow, and, mp3 shuffle player.

Much faster file listings in lengthy folders because there's no slow checkboxes.
Find files fast with the File Search Box, and sort-by newest, etc...
Efficient and colorful unicode icons display twice as fast.

Automated error correction for users.  When needed, it displays very polite messages briefly, and then quickly sends the user back to what they wanted to do, thereby providing the appearance of good working order.  So, you're free to use optional limits such as 'max connections to single address', to manage your server load.  Auto-queue function provided.  Quickly disconnects hack scans, automatically.

Easy for users, with simplified interface, column layout, and readable fonts.  Classic! 
At each version, the UI is further refined for even easier/faster to use.
So easy to use that it is Cat-operable on a tablet, apparently.

Install: Use the same folder as hfs.exe, then: Menu, HTML-template, Change-file, and choose the tpl file.
Kudos:  DJ for the delete script, slideshow and music player; and, Leo for the phone browser login.
Versions:  Photo version's full features, mp sans thumbnails, or basic version for bandwidth conservation.

LeoNeeson:
Nice, an old-school template! (and it loads very fast!) :)


A little bit off-topic...

Since you seem to know about template stuff, I have this question for you: 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%">&nbsp;<font color="white">&#9671;</font>&nbsp;%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%">&nbsp;<font color="#ADE8F9">&#9836;</font>&nbsp;%item-name%</a>%comment%</td>
<td class=rw align=center>%item-size%</td>
<td class=rw align=center>&nbsp;<a href="mms://%host%%encoded-folder%%item-url%">MediaPlayer</a>&nbsp;</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%">&nbsp;<font color="white">&#8663;</font>&nbsp;%item-name%</a>%comment%</td>
<td colspan=3 class=rw><i>&nbsp;Hyperlink</i></td>
</tr>

[folder]
<tr>
<td class=rw>%new%<a href="%item-url%">&nbsp;<font color="#FFFDA8" size="3">&#128193;</font>&nbsp;<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]
&nbsp;<span class=flg>&nbsp;NEW&nbsp;</span>

--- End code ---

Any idea on how to make this work?... ???

danny:

--- Quote from: LeoNeeson on May 10, 2018, 12:18:24 PM ---Nice, an old-school template! (and it loads very fast!) :)
--- End quote ---

Thanks! 
It has been an adventure!  I had wanted to make HFS look and run like I remembered from long ago.  A friend had it on his server, and it was fast back then. 

To regain the speed, I've been using my stopwatch, and the pingdom test (which has per-element timings).  Currently, the point is twofold--reduce micro-pauses that occur per each file in a listing (so they won't add up to a large pause), and make the template as small and clean as possible.

After that, it is a good head start to add features and still run fast too.

--- Quote from: LeoNeeson on May 10, 2018, 12:18:24 PM ---Since you seem to know about template stuff, I have this question for you: 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?...
--- End quote ---
That's a server-side script, possibly ajax?  I don't know how to do that.  But, if I find out, first thing on the list is a real login Form, due to diminishing support of browser-provided login box for basic auth. 
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.  For better security, avoid commonly scanned ports (there's usually a published list), so not 5900.  Screen resolution plays an important role in bandwidth consumption and usability--at the server, 1024x600 is fastest or 1280x720 will work to vnc a server from a phone. At the phone, in bvnc, you can change the color mode to 256, so that the bandwidth consumption is minimal. 

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

danny:
Revised to double the speed.  Updates at post#1

Now, it goes maximum speed by default.  The pingdom test reports: Faster than 99% of websites. 

P.S.
This got put to work on my own server. 

Navigation

[0] Message Index

[#] Next page

Go to full version