rejetto forum

The Throwback (retro) template. With large folder and mobile support.

danny · 129 · 191844

0 Members and 1 Guest are viewing this topic.

Offline danny

  • Tireless poster
  • ****
    • Posts: 281
    • View Profile
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
« Last Edit: April 29, 2021, 06:37:26 PM by danny »


Offline LeoNeeson

  • Tireless poster
  • ****
    • Posts: 858
  • Status: On hiatus       (sporadically here)
    • View Profile
    • twitter.com/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: [Select]
<div class=lil><b>Remote upload URL:</b>
<input type='text' name='search' value=''>
<input type='submit' name='submit' value='Transload'></div>

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: [Select]
<!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>

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!... ;)

 
« Last Edit: February 11, 2020, 11:08:12 AM by LeoNeeson »
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
» Currently taking a break, until HFS v2.4 get his stable version.


Offline bmartino1

  • Tireless poster
  • ****
    • Posts: 911
  • I'm only trying to help i mean no offense.
    • View Profile
    • My HFS Google Drive Shared Link
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
« Last Edit: May 16, 2018, 02:47:28 AM by bmartino1 »
Files I have snagged and share can be found on my google drive:

https://drive.google.com/drive/folders/1qb4INX2pzsjmMT06YEIQk9Nv5jMu33tC?usp=sharing


Offline LeoNeeson

  • Tireless poster
  • ****
    • Posts: 858
  • Status: On hiatus       (sporadically here)
    • View Profile
    • twitter.com/LeoNeeson
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.
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.

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.
Thanks, I'll have a look to bVNC (it looks good).

That's a server-side script, possibly ajax? I don't know how to do that.
Don't worry. I'll leave the question open if someone else knows what server-side script (macro) use.

Revised to double the speed.  Updates at post#1 and 2. 
Good work! :)
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
» Currently taking a break, until HFS v2.4 get his stable version.


Offline LeoNeeson

  • Tireless poster
  • ****
    • Posts: 858
  • Status: On hiatus       (sporadically here)
    • View Profile
    • twitter.com/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. :)
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
» Currently taking a break, until HFS v2.4 get his stable version.


Offline LeoNeeson

  • Tireless poster
  • ****
    • Posts: 858
  • Status: On hiatus       (sporadically here)
    • View Profile
    • twitter.com/LeoNeeson
Small enhancements:

Throwback6x.tpl - Change log:
- Font smoothing
- One line per file
- New background color

Throwback6y.tpl - Change log:
- New transparent delete button.
- Now displays only the file date
- Small tweaks on column width
 
Still missing:

- Hides columns if screen is small
- Use divs instead of tables? (info)
- "Parent Directory" like apache has.

(Feel free to fix/enhance it, if you find something wrong)

Cheers,
Leo.-
« Last Edit: May 25, 2018, 01:24:30 AM by LeoNeeson »
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
» Currently taking a break, until HFS v2.4 get his stable version.


Offline bmartino1

  • Tireless poster
  • ****
    • Posts: 911
  • I'm only trying to help i mean no offense.
    • View Profile
    • My HFS Google Drive Shared Link
Small enhancements:

- Font smoothing
- One line per file
- New background color

Still missing:
- "Parent Directory" like apache has.

(Feel free to fix/enhance it, if you find something wrong)

Cheers,
Leo.-

I thought hfs bind to folder was the appacbr equilevent to parent folder.

So path c:/webroot/hfs.exe
Has a folder (parent directory of site)
C:/webroot/hfs

Right click on the house k. The hfs and bind folders, chose the path. ???

Does this not accomplish that?
Files I have snagged and share can be found on my google drive:

https://drive.google.com/drive/folders/1qb4INX2pzsjmMT06YEIQk9Nv5jMu33tC?usp=sharing


Offline LeoNeeson

  • Tireless poster
  • ****
    • Posts: 858
  • Status: On hiatus       (sporadically here)
    • View Profile
    • twitter.com/LeoNeeson
The table can't have every col as a % because then the delete button won't appear.  On the phone, it is intentionally expanded off the right side, when the phone is held vertical; and that's because it is more important to see the filenames than to have the table stay within the bounds of the screen (especially 5cm screen).
@Danny: I agree, my mistake, sorry, I didn't have enabled the delete button when doing edits (take all this like my customized and very experimental version, you don't have to incorporate my changes to your version, which is already working great).

I choose to cut file names, because I usually have very long file names and they look like a mess on small screens. With JavaScript, I was also planning to use the tag 'title' to show the complete filename on mouse over, but on phones I guess that won't work).

To show %item-modified% as MM/DD/YYYY, change this:
%item-modified%

...to this:
{.cut|1|10|%item-added%.}

(Source)



@BMartino1: I was thinking in adding a "Parent Directory" item (like another item on the file list), at the top of the file list (except on root), like Apache usually does. See how this works, on this live example: https://unicode.org/Public/emoji/



I still have to see how to hide columns on small screen sizes (too much work for today, perhaps I'll do it on the next few days)

(I've uploaded a new revision, here. Report any bugs, if you find them)
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
» Currently taking a break, until HFS v2.4 get his stable version.


Offline Mars

  • Operator
  • Tireless poster
  • *****
    • Posts: 2063
    • View Profile

To force a date to specific format , use  the Macro   time | new format | when=date

%item-modified% use by default  the system format, it is necessary to have universal format  by using
%item-modified-dt% or %item-added-dt%

example:
%item-modified% => 05/25/16 15:00:56
%item-modified-dt% => 42515.6256593403


{.time|mm/dd/yy|when=%item-modified-dt%.}


http://rejetto.com/wiki/index.php?title=HFS:_Time_format#Text_formatting

Code: [Select]
[+file]
<td>%item-size%B<td>{.time|mm/dd/yy|when=%item-modified-dt%.}<td>%item-dl-count%

[+folder]
<td class='nosize'>folder<td>{.time|m/d/yy|when=%item-modified-dt%.}<td>%item-dl-count%

it is possible to have the date and time on two lines using separate macros

Code: [Select]
[+file]
<td>%item-size%B<td>{.time|mm/dd/yy|when=%item-modified-dt%.}<p>{.time|hh:nn:ss|when=%item-modified-dt%.}<td>%item-dl-count%

[+folder]
<td class='nosize'>folder<td>{.time|mm/dd/yy|when=%item-modified-dt%.}<p>{.time|hh:nn:ss|when=%item-modified-dt%.}<td>%item-dl-count%

by creating a personal alias this can give more clarity to the template

[+special:alias]
mtime=time|mm/dd/yy|when=%item-modified-dt%
htime=time|hh:nn:ss|when=%item-modified-dt%

Code: [Select]
[+file]
<td>%item-size%B<td>{.mtime.}<p>{.htime.}<td>%item-dl-count%

[+folder]
<td class='nosize'>folder<td>{.mtime.}<p>{.htime.}<td>%item-dl-count%

one to preserve the standardized format using the macro cut proposed by LeoNeeson

[+special:alias]
mtime=cut||10|%item-modified%
htime=cut|12||%item-modified%

there are multiple possibilities  ;)
« Last Edit: May 25, 2018, 07:29:03 AM by Mars »


Offline bmartino1

  • Tireless poster
  • ****
    • Posts: 911
  • I'm only trying to help i mean no offense.
    • View Profile
    • My HFS Google Drive Shared Link
Hey Danny,

thought it was worth a mention
* Required downloading a php exe and set cgi /cli path
http://php.net/manual/en/migration5.cli-cgi.php

https://windows.php.net/download/

Although, php is somewhat aviable, but not officially supported, but is capable:
http://rejetto.com/forum/index.php?action=profile;u=9522;area=showposts;sa=topics;start=30

thx raybob
« Last Edit: May 29, 2018, 02:05:27 AM by bmartino1 »
Files I have snagged and share can be found on my google drive:

https://drive.google.com/drive/folders/1qb4INX2pzsjmMT06YEIQk9Nv5jMu33tC?usp=sharing


Offline LeoNeeson

  • Tireless poster
  • ****
    • Posts: 858
  • Status: On hiatus       (sporadically here)
    • View Profile
    • twitter.com/LeoNeeson
@Mars: thanks for the explanation! (I've found very interesting how '[+special:alias]' work, especially on how we can combine macro code with an alias (an alias that works almost the same as a 'variable'). It surely gives endless possibilities and makes the code more easy to handle.

@Danny: I've tested the new Throwback7.tpl and this is getting better and better (that gradient background looks great). By the way, I don't see any more enhancements available without slowing down the server, so, it's done for me, at least for now.

Cheers,
Leo.-
HFS in Spanish (HFS en Español) / How to compile HFS (Tutorial)
» Currently taking a break, until HFS v2.4 get his stable version.


Offline Chris Harris

  • Occasional poster
  • *
    • Posts: 38
    • View Profile
I just installed this template. It works except for one folder whose name is "1" all the sub folders the folder names and the file names (except one) are NOT shown. The folders and files are there with an icon. If I hover the cursor over the icon, the correct folder/file name is shown and and clicking the icon gives the correct response.

In the lower folders most of the folder/file names are also NOT shown.

What have I done wrong?

Chris


Offline Chris Harris

  • Occasional poster
  • *
    • Posts: 38
    • View Profile
I was using Throwback7.tpl. I tried Throwback6x.tpl with same effect.

I see the problem on Android 7.1 with Google Chrome and Samsung Internet and on Windows 10 with Google Chrome and Microsoft Edge.

I tried adding a{color:#8D8} to the style section of Throwback7.tpl  will same problem.

I am going back to using mobil-light_wo_pic.zip  from http://rejetto.com/forum/index.php?topic=11754. I added the text to the diff template the root directory. This provides a responsive screen and I can turn the menu on and off.

Chris



Offline Chris Harris

  • Occasional poster
  • *
    • Posts: 38
    • View Profile
I tired TB6-phone.tpl. Some problem.

I think the problem starts with a folder called "1". For any reason could this cause a problem?
Chris