24 items •
Download ./*
24 items •
Download ./*
firefoxtemplate.html
4 years ago• 4 808
{}
<!DOCTYPE html>
<!--
Author: Twily 2015 - 2020
Website: http://twily.info/
-->
<html>
<head>
<title>>_</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) {
try {
return decodeURIComponent(Array.prototype.map.call(atob(str),function(c) {
return '%'+('00'+c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
} catch(e) {
return str;
}
}
// -- 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(" "," ").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="<Thank you for using <a href=\"https://twily.info/firefox/template.html#view\" target=\"_blank\">Twily's</a> template! />";
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.info 2013 - 2024
2 176 127 visits