Show Posts
31
HTML & templates / Some mixed ideas - Almost new template....rsrsrsr
« on: July 03, 2006, 06:28:43 PM »
well, since there is no big new on the hfs update, i guess that the people are a little slow on template creation, but im here again to post another one, no big news too, but i take the idea of the layout of the HFS-Clean Template, and the floating menu of the A'la damn.to HFS Template and also i got the color of the css of traxxus mod of the clean template, inserted the status and server information of the server copied and translated os the section [not found] on the template of the Internetgnm 2006, and fixed the upload+progress looks more cool now 
, also update the links inside upload and reinserted the lines to separate the folders and files, and inserted a pop-up server info window.
well, hope you like.
UPDATED july-17-2006 22:54
, also update the links inside upload and reinserted the lines to separate the folders and files, and inserted a pop-up server info window.well, hope you like.
UPDATED july-17-2006 22:54
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="robots" content="noindex,nofollow" />
<meta name="generator" content="HFS%version% (+ HFS-Clean[EN] template by Chionsas)" />
<meta name="uptime" content="%uptime%" />
<link rel="shortcut icon" href="/~img_folder" />
<!-- code for popHTMLwith_embed_player from some scratches of a friend of mine Thanks Leandro Cavalheiro!!! -->
<script language="javascript">
function popUp(){
window.open("http://%host%/~progress",null,
"height=400,width=280,status=no,toolbar=no,menubar=no,location=no");
}
</script>
<title>%folder%</title>
<style type="text/css">
%style%
</style>
</head>
<body>
<a name="top">
</a>
<div id="divStayTopLeft">
<table id="menu">
<tbody>
<tr>
<td align="center">
<div id="menu">
<ul>
<li><label title="Go To Root"><a href="http://%host%" class=button><img border=0 align=absbottom src="/~img1"> Home</a></label></li>
<li><label title="Go Up one Folder"><a href="%parent-folder%" id="title" class=button><img border=0 align=absbottom src="/~img8"> %folder%</a></label></li>
<li><label title="▲Top of This Dir▲"><a href="#top" class=button><img border=0 align=absbottom src="/~img32"> Top</a></label></li>
<li><label title="▼Bottom of This Dir▼"><a href="#bottom" class=button><img border=0 align=absbottom src="/~img33"> Bottom</a></label></li>
<li><label title="User Logged Now">%loggedin%</label></li>
<li><label title="Please Login Here">%login-link%</label></li>
<li><label title="Click Here To Upload a File">%upload-link%</label></li>
<li>
<label title="SERVER INFO">
<a href="javascript:popUp();" id="info" class=button><img border=0 align=absbottom src="/~img3"></a></label>
<img src="/~img_graph200x20" style="border:white outset 2px;"></li>
<script type="text/javascript">
if ("%folder%" == "/") {
document.getElementById('title').innerHTML = "%host%";
document.title = "%host%";
}
</script>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- *** END - the floating layer, make is as fancy as you like *** --->
<script type="text/javascript">
function JSFX_FloatTopLeft()
{
var startX = 0, startY = 9;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
var px = document.layers ? "" : "px";
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
el.x = startX; el.y = startY;
return el;
}
window.stayTopLeft=function()
{
var pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
var dY = (pY > startY) ? pY : startY;
ftlObj.y += (dY - ftlObj.y)/8;
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 20);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopLeft();
</script>
<!-- ********************************************************* -->
<br>
<br>
<br>
<br>
<div id="heading">
<h1>
<a href="%parent-folder%" id="title">
<img src="/~img14">
%folder%
</a>
</h1>
<script type="text/javascript">
if ("%folder%" == "/") {
document.getElementById('title').innerHTML = "%host%";
document.title = "%host%";
}
</script>
</div>
<div class="grid">
%folder-comment%
%files%
</div>
<!-- generated in %build-time%s -->
<!-- ********************************************************* -->
<a name="bottom">.
</a>
</body>
</html>
[style]
body {font-size: 70%;font-family: Verdana, Arial, Tahoma, sans;margin:0px;background-color: White;color: black;padding: 0px;}
div#divStayTopLeft {position: absolute; left: 0; right: 0px; top: 9px; width: 100%;}
table#menu {background-color:#336699;border:2px;width:100%}
#menu ul {padding:0px;margin:0px;float: left;width: 100%;background-color:#EDEDED;list-style:none;font:80% Tahoma;}
#menu ul li { display: inline; }
#menu ul li a {background-color:#EDEDED;color: #333;text-decoration: none;border-bottom:3px solid #EDEDED;padding: 2px 10px;float:left;}
#menu ul li a:hover {background-color:#D6D6D6;color: #6D6D6D;border-bottom:3px solid #EA0000;}
#filelist {border-collapse: collapse;table-layout: fixed;width:60em; font: bold;}
#filelist td, #filelist th {vertical-align: middle;border-bottom: 1px solid Teal;overflow: hidden;white-space: nowrap; font: bold;}
#filelist th {padding-bottom: 0.2em;padding-top:0.2em;font-size: 1.1em;}#filelist th a {color: black;height:16px; font: bold;}
#filelist th a:hover {text-decoration: underline;color: black; font: bold;}
#filelist { border-collapse: collapse; table-layout: fixed; width:60em; }
#filelist td, #filelist th { vertical-align: middle; border-bottom: 1px solid #EFEFEF; overflow: hidden; white-space: nowrap;}
#filelist th { padding-bottom: 0.2em; padding-top:0.2em; font-size: 1.1em;}
#filelist th { color: #436976; height:1.5em;}
#up { display: block; text-align: left; padding-left: 7px; padding-top: 0.2em; padding-bottom: 0.2em;}
.file { font-weight: bold; padding: 0.3em; font-size: medium; text-indent: 22px; background-repeat: no-repeat; background-position: 1% 50%;}
.filestatus { text-align: center; padding-right: 0.5em; font: bold;}
.filename { font-weight: bold; font-size:1.1em; color:black;}
.bytes { font-size:7pt; }
.perc { font-size:0.8em; }
.out_bar { width:100px; height:10px; margin-right:5px; float:left; }
.in_bar { height:10px; background:white; color:white; }
div.body { margin-left:0; margin-right:0; }
#up {display: block;text-align: left;padding-left: 7px;padding-top: 0.2em;padding-bottom: 0.2em;}
#upbtn { font-family: Verdana, Arial, sans; }
.file a, .folder a, .link a {display: block;width: 100%;height: 100%;padding: 0.3em 0.3em;background-repeat: no-repeat;background-position: 1% 50%;text-indent: 22px;font-weight: normal;font-size: medium;}
.file_input { display: block; margin-bottom: 0.4em; font-family: Arial, sans; font-size: 1em; }
.new {color: red;}
.folder a {background-position: 1% 60%; font: bold;}
.file a span, .folder a span, .link a span {display: block; font: normal bold;}
.filehits {text-align: right;padding-right: 0.5em;}
#heading {padding:1em;background-color: #3366CC}
h1 {font-size:2em;font-weight:bold;font-family: "Trebuchet MS";color: white;padding: 0px;text-align: center}
h1 a {color: white;text-decoration: none;}
a {color: black;text-decoration:none;}
a:hover {color: #FFCC33}
img {border:none;}
.little {font-size: 0.8em;}
.right {text-align: right;}
.center {text-align: center;}
.grid {padding:15px;margin:15px;text-align: center; font: bold;}
.button {float:right;padding:1px;font-weight:bold;background-repeat: no-repeat;background-position: 0% 50%;margin-right: 0.5em;color: grey;}
.error {margin: 2em;text-align: center}
.error_timestamp { float: right; margin-right: 1.5em; margin-top: 0.7em; }
.big {margin: 2em;text-align: center}
.flag{font-weight: bold;font-size:8pt;background: White;color: Red;text-align center;border: 2px double Red;position:absolute;left:10px;}
[login-link]
<div style="float:right; padding:1px;"><a href="%encoded-folder%~login" class=button><img border=0 align=absbottom src="/~img28"> LOGIN</a></div>
[loggedin]
<div style="float:right; padding:1px;"><a><b><class=button><img border=0 align=absbottom src="/~img27"> USER: %user%</a></b></div>
[upload-link]
<div style="float:right; padding:1px;"><a href="%encoded-folder%~upload" class=button><img border=0 align=absbottom src="/~img31"> UPLOAD</a></div>
[up]
<a class=big href="%parent-folder%"><img src="/~img14"> UP</a>
[nofiles]
<div class=big><img src="/~img9"> No Files Here <img src="/~img9"></div>
[files]
<table id="filelist">
<thead>
<tr>
<th style="width:6%; padding:0px;">%up%</th>
<th style="width:51%;"><a href="%encoded-folder%?sort=n">Filename</a></th>
<th style="width:11%"><a href="%encoded-folder%?sort=s">Size</a></th>
<th style="width:23%"><a href="%encoded-folder%?sort=t">Date</a></th>
<th style="9%; text-align:right"><label title="number of times a file has been downloaded">Hits</label></th>
</tr>
</thead>
<tbody>
%list%
</tbody>
</table>
<p class="right" style="width:60em">
<span class="little">%number-folders% folders, <a href="%encoded-folder%~files.lst">%number-files% files</a> – %total-size%</span>
</p>
[file]
<tr><td class="file" colspan="2"><a href="%item-url%"%comment% style="background-image:url('/~img_file')"%new%>%item-name%</a></td><td class="right">%item-size%</td><td class="right">%item-modified%</td><td class="filehits">%item-dl-count%</td></tr>
[folder]
<tr><td class="folder" colspan="2"><a href="%item-url%"%comment% style="background-image:url('/~img_folder')"%new%>%item-name%</a></td><td class="center">–</td><td class="right">%item-modified%</td><td class="filehits">%item-dl-count%</td></tr>
[link]
<tr><td class="link" colspan="2"><a href="%item-url%"%comment% style="background-image:url('/~img_link')"%new%>%item-name%</a></td><td colspan="3" style="padding-left:1em"><i title="%item-url%">%item-url%</i></td></tr>
[comment]
title="%item-comment%"
[newfile]
class="new"
[folder-comment]
<div style='background: #FFFFEF; color: black; width: 100%.5em; margin-bottom: 0.8em; padding:0.6em; border:1px solid orange;'>%item-comment%</div>
[error-page]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="robots" content="noindex,nofollow" />
<link rel="shortcut icon" href="/~img11" />
<title>Error</title>
<style type="text/css">
%style%
</style>
</head>
<body>
<div id="heading">
<div class="error_timestamp">%timestamp%</div>
%content%
</body>
</html>
[not found]
<h1>404 - Not found..</h1>
</div>
<p class="error">
<a href="/" onclick="history.go(-1); return false">« back</a>
</p>
[overload]
<h1>Server overload</h1>
</div>
<p class="error">
Come back later.
</p>
[max contemp downloads]
<h1>No more downloads alowed</h1>
</div>
<p class="error">
You have reached the limit of maximum contemporary downloads.
</p>
<p class="error">
<a href="/" onclick="history.go(-1); return false">« back</a>
</p>
[unauthorized]
<body>
<a name="top"></a>
<div id="divStayTopLeft">
<table id="menu">
<tbody>
<tr>
<td align="center">
<div id="menu">
<ul>
<li><a href="http://%host%" class=button><img border=0 align=absbottom src="/~img1"> Home</a></li>
<li><a href="~login" class=button>
<img border=0 align=absbottom src="/~img28"> LOGIN</a></li>
<li><img src="/~img3"><img src="/~img_graph200x20" style="border:white outset 2px;"></li>
<script type="text/javascript">
if ("%folder%" == "/") {
document.getElementById('title').innerHTML = "%host%";
document.title = "%host%";
}
</script>
</ul>
</div></td></tr>
</tbody></table>
</div>
<!-- *** END - the floating layer, make is as fancy as you like *** --->
<script type="text/javascript">
function JSFX_FloatTopLeft()
{
var startX = 0, startY = 9;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
var px = document.layers ? "" : "px";
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+px;this.style.top=y+px;};
el.x = startX; el.y = startY;
return el;
}
window.stayTopLeft=function()
{
var pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
var dY = (pY > startY) ? pY : startY;
ftlObj.y += (dY - ftlObj.y)/8;
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 20);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopLeft();
</script>
<!-- ********************************************************* -->
<br><br><br><br>
<h1>Unauthorized</h1>
</div>
<p class="error">
<img border=0 align=absbottom src="/~img25"> You have to be logged in to view this section. <img border=0 align=absbottom src="/~img25">
</p>
<p class="error">
<a href="/" onclick="history.go(-1); return false"><img border=0 align=absbottom src="/~img26"> « back</a>
</p>
[deny]
<h1>Forbidden</h1>
</div>
<p class="error">
This section is currently forbidden.
</p>
<p class="error">
<a href="/" onclick="history.go(-1); return false">« back</a>
</p>
[ban]
<h1>Banned</h1>
</div>
<p class="error">
You have been banned.
</p>
<p class="error">
%reason%
</p>
[upload]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="robots" content="noindex,nofollow" />
<link rel="shortcut icon" href="/~img_folder" />
<title>%folder%</title>
<style type="text/css">
%style%
</style>
</head>
<body>
<a name="top"></a>
<div id="divStayTopLeft">
<table id="menu">
<tbody>
<tr>
<td align="center">
<div id="menu">
<ul>
<li><a href="http://%host%" class=button target=_parent><img border=0 align=absbottom src="/~img1"> Home</a></li>
<li><a href="%parent-folder%" id="title" class=button target=_parent><img border=0 align=absbottom src="/~img8"> %folder%</a></li>
<li><a href="" class=button><img border=0 align=absbottom src="/~img31">%diskfree% Free</a></li>
<li><a href="%encoded-folder%" target="_parent" class="button" text-indent: 16px;"><img border=0 align=absbottom src="/~img21">Cancel</a></li>
<li><a href="%encoded-folder%~upload" class="button" onclick="if(document.getElementById('upbtn').disabled) {return false}" id="progress_btn" >Progress bar</a></li>
<li>%loggedin%</li>
<li>%login-link%</li>
<li><img src="/~img3"><img src="/~img_graph200x20" style="border:white outset 2px;"></li>
<script type="text/javascript">
if ("%folder%" == "/") {
document.getElementById('title').innerHTML = "%host%";
document.title = "%host%";
}
</script>
</ul>
</div></td></tr>
</tbody></table>
</div>
<br><br><br><br>
<div id="heading">
<script type="text/javascript">
var progress_btn = document.getElementById('progress_btn');
if (window.parent.progress) {
progress_btn.target = "_parent";
progress_btn.innerHTML = "Hide progress bar"
} else {
progress_btn.href += "+progress";
progress_btn.innerHTML = "Show progress bar"
}
</script>
<h1><a href="%encoded-folder%" target="_parent">%folder%</a></h1>
</div>
<div class="grid">
<form name="frm" action="%encoded-folder%" target="_parent" method="post" enctype="multipart/form-data" onsubmit="document.getElementById('upbtn').disabled=true; document.getElementById('progress_btn').style.color='silver'; window.parent.progress.document.location='/~progress'; return true;">
%upload-files%
<input name="upbtn" id="upbtn" type="submit" value="Upload »" />
</form>
</div>
</body>
</html>
[upload-file]
<input name="fileupload%idx%" size="70" type="file" class="file_input" />
[upload-results]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="robots" content="noindex,nofollow" />
<link rel="shortcut icon" href="/~img_folder" />
<title>%folder%</title>
<style type="text/css">
%style%
</style>
</head>
<body>
<div id="heading">
%loggedin%
<h1><a href="%encoded-folder%">%folder%</a></h1>
</div>
<div class="grid">
<div style='background: #FFFFEF; color: black; width: 59.5em; margin-bottom: 0.8em; padding:0.6em; border:1px solid orange;'>Files uploaded:</div>
<table id="filelist">
<thead>
<tr>
<th style="width:6%; padding:0px;"><a href="%encoded-folder%" id="up"><img src="/~img14" alt="back" title="back" /></a></th>
<th style="width:40%;">Filename</th>
<th style="width:11%">Size</th>
<th style="width:13%">Speed</th>
<th style="30%">Status</th>
</tr>
</thead>
<tbody>
%uploaded-files%
</tbody>
</table>
</div>
</body>
</html>
[upload-success]
<tr><td class="file" colspan="2" style="background-image:url('/~img32'); color:green;">%item-name%</td><td class="right">%item-size%</td><td class="right">%speed% KB/s</td><td class="filestatus" style="color: green; font-weight:bold">OK</td></tr>
[upload-failed]
<tr><td class="file" colspan="2" style="background-image:url('/~img11'); color:red;">%item-name%</td><td class="right">%item-size%</td><td class="right">%speed% KB/s</td><td class="filestatus" style="color: red"><b title="%reason%">%reason%</b></td></tr>
[upload+progress]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-frameset.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="robots" content="noindex,nofollow" />
<link rel="shortcut icon" href="/~img_folder" />
<title>%folder%</title>
</head>
<frameset cols="250,*" frameborder="0">
<frame name="progress" src="/~progress" scrolling="auto" />
<frame src="%encoded-folder%~upload-no-progress" scrolling="auto" />
</frameset>
</html>
[progress]
<html>
<head>
<meta http-equiv="Refresh" content="10;URL=/~progress">
<title>HFS - Progress status</title>
<style>
%style%
.filename { font-weight:bold; font-size:8pt; }
.bytes { font-size:7pt; }
.perc { font-size:14px; vertical-align:middle; }
.out_bar { width:100px; font-size:15px; background:black; border:black 1px solid; margin-right:5px; float:left; }
.in_bar { height:16px; background:white; color:white; }
div.body { margin-left:0; margin-right:0; }
body { padding:2px; }
</style>
</head>
<body>
<div class=big>Progress status</div>
Auto-refresh: 10 seconds
<br><br><img src="/~img_graph190x40" style="border:white outset 2px;">
<div class=body>
%progress-files%
</div>
<div class=little>Uptime: %uptime%</div>
Server Adress: http://%host% <br><img src="/~img32">
Server Output Speed: %speed-out% KB/s
<br>
Total Downloaded Data: %total-out%
<br>
<img src="/~img33"> Server input Speed: %speed-in% KB/s
<br>
Total Uploaded Data: %total-in%<br>
<img src="/~img5"> Actual Nº Conections: %connections%<br>
<img src="/~img35"> User Loged: %user%<br>
<img src="/~img28"> Number of Connections: %number-addresses% users<br>
<img src="/~img27"> Clients: %number-addresses-downloading% users<br>
<img src="/~img10"> Server Date and Time: %timestamp%<br>
<img src="/~img10"> Server UpTime: %uptime% Hours <br>
<img src="/~img23"> <a href="http://www.rejetto.com/hfs">HFS Verssion %version%</a><br>
</body>
</html>
[progress-nofiles]
No files are being uploaded.
[progress-upload-file]
<div class="filename">%filename%</div>
<div class="bytes">%done-bytes% / %total-bytes% b<br/>%speed-kb% KB/s</div>
<div style="margin-top:0.5em; margin-bottom:1em;">
<div class="out_bar" style="background-color:#278DCF; border: 1px solid #278DCF;"><div class="in_bar" style="width:%perc%px"></div></div><div class="perc">%perc%%</div>
</div>
[progress-download-file]
<div class="filename">%filename%</div>
<div class="bytes">%done-bytes% / %total-bytes% b<br/>%speed-kb% KB/s</div>
<div style="margin-top:0.5em; margin-bottom:1em;">
<div class="out_bar" style="background-color: #888888; border: 1px solid #888888;"><div class="in_bar" style="width:%perc%px"></div></div><div class="perc">%perc%%</div>
</div>
[newfile]
<div style="float:left; padding:10px;">
<span class=flag> NEW </span>
</div>
