~firefox
14 itemsDownload ./*


..
stylish
hidecaption.ahk
homepage-centered-iframe.html
homepage-centered-slideshow.html
homepage-masonry.html
homepage-panels.html
homepage-sidebar.html
homepage-slide3d.html
homepage-stars.html
mailorder.html
remoteButter.html
slideshow.html
template.html
template.min.html


firefoxtemplate.html
3 2502 months agoDownloadRawClose


<!DOCTYPE html>
<!--

    Author:        Twily  2015 - 2020
    Website:       http://twily.info/

-->
<html>
<head>
<title>&gt;_</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<!--<link id="favicon" rel="shortcut icon" href="http://twily.info/favicon.ico" />-->
<!--<link rel="stylesheet" type="text/css" href="./css/style.css?v=1" />-->
<style type="text/css">
html,body {
    overflow: auto; font-size: 12pt;
    font-family: "Droid Sans", "Liberation Sans", "DejaVu Sans", "Segoe UI", Sans;
    background: #17181A; color: #AAABAD;
    width: 100%; height: 100%; margin: 0; padding: 0;
}
* { box-sizing: border-box; }
*:focus { outline: none !important; }

a:link, a:visited { color: #606163; text-decoration: none; }
a:hover, a:active { color: #EA75BC; }

.tbl { display: table; width: 100%; height: 100%; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: top; border: 1px solid #606163; box-shadow: inset 0 0 2px 2px #000; }

.twrap {
    width: 100%; height: 100%;
    overflow: auto;
    word-wrap: break-word;
    word-break: break-all;
    font-family: Monospace;
}
.sidebar { width: 256px; min-width: 100px; }
.rel { position: relative; overflow: hidden; }
.bottom { position: absolute; bottom: 0; height: auto !important; }


#wrap {
    display: flex; align-items: center;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(rgba(17,17,19,1), rgba(17,17,19,1) 1px, rgba(17,17,19,.3) 1px, rgba(17,17,19,.3) 2px);
    z-index: 9;
}
#frame {
    display: flex; justify-content: center;
    position: relative;
    width: 100%;
    background: #111113;
    box-shadow: 0 0 2px #111;
}
#box {
    display: inline-block;
    width: 590px;
    position: relative;
    text-align: center;
    background: #17181A;
}
#box #output { height: 100%; line-height: 100px; }
/*
#wrap { width: 100%; height: 100%; display: flex; position: absolute; z-index: 9; }
#wrap #box { padding: 128px; background: #111113; margin: auto; display: inline-block; position: relative; }*/


.menu {
    display: inline-block; cursor: default; position: relative;
    color: #606163; background: #27282B;
}
.menu span { display: inline-block; padding: 8px; }
.menu ul {
    display: block; list-style: none; margin: 0; padding: 0;
    visibility: hidden; opacity: 0; position: absolute;
    z-index: 10; background: #17181A; text-align: left;
    transition: .2s ease;
}
.menu ul li { white-space: nowrap; }
.menu:hover ul { visibility: visible; opacity: 1; }

.menu a:link, .menu a:visited { display: inline-block; width: 100%; color: #606163; padding: 8px; }
.menu a:hover, .menu a:active { color: #EA75BC; background: #27282B; }

#mnu1 { position: absolute; left: 0; top: 0; }
#mnu2 { position: absolute; right: 0; bottom: 0; }
#mnu2 ul { right: 0; bottom: 100%; text-align: right; }

</style>

<!--<script type="text/javascript" src="./js/main.js?v=1"></script>-->
<script type="text/javascript">
var $=function(id) { return document.getElementById(id); };
var enableLS=(typeof(Storage)!=="undefined")?true:false;
var rndMinMax=function(min,max) { return Math.floor(Math.random()*(max-min+1)+min); }
var IsJsonString=function(str) { try { JSON.parse(str); } catch(e) { return false; } return true; }
// php: $text=json_encode($array);
// js:  if(IsJsonString(data)) array=JSON.parse(data);
// js:  var text=JSON.stringify(array);


// -- base64 encoding --
function b64Enc(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,function(match,p1) {
        return String.fromCharCode(parseInt(p1,16));
    }));
}
function b64Dec(str) {
    return decodeURIComponent(Array.prototype.map.call(atob(str),function(c) {
        return '%'+('00'+c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}
// -- base64 encoding --


// -- ajax function --
function ajaxThis(x,y,z,cb) {
    var xhr;
    if(window.XMLHttpRequest) xhr=new XMLHttpRequest();
    else                      xhr=new ActiveXObject("Microsoft.XMLHTTP");

    xhr.onreadystatechange=function() {
        if(xhr.readyState==4 && xhr.status==200) {
            if(typeof cb==='function') {
                cb(b64Dec(xhr.responseText));
            }
        }
    }

    xhr.open("POST","./ajax.php");
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send("setting="+x+"&value="+b64Enc(y)+"&key="+b64Enc(z));
    // php: base64_decode($_POST['value']);
}
function exampleAjaxCmd() {
    ajaxThis('something','data','key',function(data) {
        console.log(b64Dec(data));
    });
}
// -- ajax function --


// -- source code printer --
function ajaxSource() {
    var xhr;
    if(window.XMLHttpRequest) xhr=new XMLHttpRequest();
    else                      xhr=new ActiveXObject("Microsoft.XMLHTTP");

    var data;
    xhr.onreadystatechange=function() {
        if(xhr.readyState==4 && xhr.status==200) {
            data=xhr.responseText;

            loop_arr=data.split("");
            loop_stop=loop_arr.length;
        }
    }

    xhr.open("GET","./template.html",true);
    xhr.send(null);
}
var loop_arr="<br />\n\n".split("");
var loop_pos=0;
var loop_stop=loop_arr.length;
var loop_count=0;
var loop_cur="█";
function selfprint() {
    var mchar=loop_arr[loop_pos];
    var mhex=("0"+mchar.charCodeAt(0).toString(16)).slice(-2).toUpperCase();
    var mbin=("000000000"+mchar.charCodeAt(0).toString(2)).slice(-8);

    var maxlen=8192;
    var mainframe=$('mainframe_c');
    if(mainframe.innerHTML.length>maxlen) { mainframe.innerHTML=mainframe.innerHTML.substr(2); }
    mainframe.innerHTML=(mainframe.innerHTML.substr(0,mainframe.innerHTML.length-1))+(mchar.replace(" ","&nbsp;").replace("\n","<br>"))+loop_cur;
    maxlen=2048;
    var hexframe=$('hexframe_c');
    if(hexframe.innerHTML.length>maxlen) { hexframe.innerHTML=hexframe.innerHTML.substr(3); }
    hexframe.innerHTML+=mhex+" ";
    maxlen=2048;
    var binframe=$('binframe_c');
    if(binframe.innerHTML.length>maxlen) { binframe.innerHTML=binframe.innerHTML.substr(9); }
    binframe.innerHTML+=mbin+" ";

    loop_pos++;
    if(loop_pos>=loop_arr.length) loop_pos=0;
    loop_count++;

    $('mainframe').scrollTop=$('mainframe').scrollHeight;
    $('hexframe').scrollTop=$('hexframe').scrollHeight;
    $('binframe').scrollTop=$('binframe').scrollHeight;

    if(loop_count<loop_stop && !paused) setTimeout(function() { selfprint(); },10);
}
var paused=false;
function pauseplay() {
    paused=(paused?false:true);
    selfprint();
}
// -- source code printer --

function closemenu() { $('wrap').style.display="none"; selfprint(); }

function init() {
    if($('output')) $('output').innerHTML="&lt;Thank you for using <a href=\"https://twily.info/firefox/template.html#view\" target=\"_blank\">Twily's</a> template! /&gt;";

    ajaxSource();

    $('mainframe_c').innerHTML=loop_cur;
}

</script>
</head>
<body onload="init();">


<div id="wrap">
<div id="frame">
<div id="box">
    <div class="menu" id="mnu1">
        <span>Menu 1</span>
        <ul>
            <li><a href="#" target="_self">Item 1</a></li>
            <li><a href="#" target="_self">Item 2</a></li>
            <li><a href="javascript:closemenu();" target="_self">Start</a></li>
        </ul>
    </div>
    <div class="menu" id="mnu2">
        <span>Menu 2</span>
        <ul>
            <li><a href="#" target="_self">Item 4</a></li>
            <li><a href="#" target="_self">Item 5</a></li>
            <li><a href="#" target="_self">Item 6</a></li>
        </ul>
    </div>
    <span id="output"></span>
</div>
</div>
</div>

<div class="tbl" onclick="pauseplay();">
    <div class="tr" style="height: 50px;">
        <div class="td" style="text-align: center; vertical-align: middle;">
            ~ Head ~
        </div>
    </div>
    <div class="tr">
        <div class="td">
        
        <div class="tbl">
            <div class="tr">
                <div class="td rel sidebar">
                    <div class="twrap bottom" id="hexframe">
                        <span id="hexframe_c"></span>
                    </div>
                </div>
                <div class="td rel">
                    <div class="twrap bottom" id="mainframe">
                        <span id="mainframe_c"></span>
                    </div>
                </div>
                <div class="td rel sidebar">
                    <div class="twrap bottom" id="binframe">
                        <span id="binframe_c"></span>
                    </div>
                </div>
            </div>
        </div>
        
        </div>
    </div>
    <div class="tr" style="height: 50px;">
        <div class="td" style="text-align: center; vertical-align: middle;">
            ~ Body ~ 
        </div>
    </div>
</div>


</body>
</html>


Top
twily at twily dot info
©twily.info 2013 - 2020



1 445 655 visits
... ^ v