Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!doctype html>
<html lang="en">
<head>
<title>madTester</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" media="all" href="./css/fontawesome.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="./css/style.css" />
</head>
<body>
<div id="wrapper" class="default">
<div id="sidebar" class="sidehide err" >
<div id="clsbox">
<div id="closebtn"></div>
</div>
<div class="part">
<form id="search" name="formular" accept-charset="UTF-8">
<div class="form-group">
<label for="siteID">Site ID</label>
<input placeholder="Site ID" id="siteInput" class="idinput" type="tel">
<label for="pageID">Page ID</label>
<input placeholder="Page ID" id="pageInput" class="idinput" type="tel">
<label for="formatID">Format ID</label>
<input placeholder="Format ID" id="formatInput" class="idinput" type="tel">
<label for="target">Keyword</label>
<input placeholder="Keyword" id="targetInput" class="idinput" type="text" style="display:block;">
</div>
</form>
<span id="submit" class="btn" title="load preview">
<span class="ico">
<i class="fas fa-rocket"></i>
</span>
<span class="btntxt">
load preview
</span>
</span>
<span id="clearbtn"><i class="fas fa-eraser"></i> clear form</span>
</div>
<div id="tools" class="part">
<span id="qrbtn" class="btn" title="show qr code">
<span class="ico">
<i class="fas fa-qrcode"></i>
</span>
</span>
<div id="qr"></div>
<span id="copyurl" class="btn" title="copy link to clipboard">
<span class="ico">
<i class="fas fa-copy"></i>
</span>
<span class="btntxt">copy link</span>
</span>
</div>
<div id="viewoptions" class=part>
<span id="barbtn" class="btn btnsmall" title="show browserbars">
<span class="ico">
<i class="fas fa-crop-alt"></i>
</span>
</span>
</div>
<span id="error" class="part"></span>
</div><!-- ende sidebar -->
<div id="content">
<img id="phonebg" src="./assets/img/phonebg.png" />
<div id="demo">
<div id="bartop" class="bar"><div id="adressbar"></div><div id="menu"></div></div>
<div id="demowrapper"><iframe id="demoframe" src="./demo_content.php"></iframe></div>
<div id="bardown" class="bar"></div>
</div>
</div>
<div id="themes">
<i id="frog" class="fas fa-frog"></i><br />
<i id="dark" class="fas fa-moon"></i><br />
<i id="default" class="fas fa-sun"></i>
</div>
</div><!-- ende wrapper -->
<script>
var domain = window.location.pathname;
var inputs = document.getElementsByClassName('idinput');
var submitbtn = document.getElementById('submit');
var sidebar = document.getElementById('sidebar');
var content = document.getElementById('content');
var copybtn = document.getElementById('copyurl');
var errorDiv = document.getElementById('error');
// get Input values as array
function getInputs()
{
var data = []
for (i=0;i<inputs.length;i++)
{ data.push(inputs[i].value); }
//console.log(data);
return checkData(data); // run CheckData function to validate the data from input field
}
//get URL Parameter as array
function getParas()
{
var data = []; //new array
var url = window.location.href; //url
var a = url.split('?'); //split url into two parts (url and parameter)
if (a.length == 2) //if split has two parts --> parameter found
{
var b = a[1].split('&'); //split parameter into parts --> get array (parameter=value)
if ( b.length == 3 )
{ b.push('t='); } //if split array (b) only has three elements --> no target given --> add it (empty) to array anyway
if ( b.length == 4
&& (b[0].split('=')[0] == 's'
&& b[1].split('=')[0] == 'p'
&& b[2].split('=')[0] == 'f'
&& b[3].split('=')[0] == 't')) //if split array (b) has four elements and if they are in the right order -->
{
for (i=0;i < b.length;i++) //loop through parameter
{
var c = b[i].split('=')[1]; //get value of parameter
data.push(c); //put value into data array
}
return checkData(data); // run CheckData function to validate the data from the url
}
else
{
//console.log('not enough url parameter, or wrong keys/order');
error('not enough url parameter, or wrong parameter names');
return false;
}
}
else
{
console.log('no url parameter found');
if(sidebar.classList.contains('err'))
{ sidebar.classList.remove('err'); }
return false;
}
}
// validate the data from input fields or url parameter
function checkData(data)
{
var regInt = /^\d+$/; //regEx for numbers
var regSpec = /^[a-zA-Z0-9ÄÖÜäöüß_-]*$/; //regEx for letter and numbers --> no special chars allowed
for (i=0;i<data.length;i++) //loop through data
{
if(i < 3 && (data[i].length == 0 || !data[i].match(regInt)) ) //if one of the first three array elements is no integer --> error
{
//console.log('data.'+[i]+' ERROR');
error('Missing or incorrect ID - only numbers are allowed');
return false;
}
else if(i == 3 && !regSpec.test(data[i]) ) //if fourth element (target) exist and is NOT letter or number --> error
{
//console.log('data.'+[i]+' ERROR');
error('Keyword Error - only numbers, letters, "_" and "-" are allowed');
return false;
}
}
//console.log(data)
return data;
}
function submit(data)
{
//console.log(data);
if (data != false)
{
var paras = '?s='+data[0]+'&p='+data[1]+'&f='+data[2]+'&t='+data[3];
//console.log(paras);
//clear demo div
demowrapper.innerHTML = '';
//create iframe and insert into demo div
var iframe = document.createElement('iframe');
iframe.id = 'demoframe';
iframe.src = domain+'demo_content.php'+paras;
demowrapper.appendChild(iframe);
//create qr code
qrGen(data);
//change URL in adressbar --> usefull for copy&paste
window.history.pushState(domain+'demo_content.php'+paras, 'blub', (domain+paras));
}
}
function qrGen(paras)
{
var qrimgName = paras[0]+'.'+paras[1]+'.'+paras[2]+'.'+paras[3];
var path = '?s='+paras[0]+'&p='+paras[1]+'&f='+paras[2]+'&t='+paras[3];
//generate qr code
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//create image object and add to sidebar
var qrimg = document.createElement('img');
qrimg.src = './assets/qrcodes/'+this.responseText;
qr.innerHTML = ''; //delete old qr code
qr.appendChild(qrimg);
//hide tools
if(sidebar.classList.contains('err'))
{ sidebar.classList.remove('err'); }
}
};
xhttp.open("GET", './qrgen.php/'+path, true);
xhttp.send();
//workaround to cover old links without t=
window.history.pushState(domain, 'blub', (domain+path));
}
//getInputs();
submitbtn.addEventListener('click',function() {
console.clear();
submit(getInputs());
} );
//this function runs on pageload and if the getParas function returns some validated data
function init(data)
{
//console.log(data);
if ( data != false ) //if data is given and validated -->
{
for(i=0;i<data.length;i++) //loop through data
{
inputs[i].value = data[i];
}
//build URL with parameter
var paras = '?s='+data[0]+'&p='+data[1]+'&f='+data[2]+'&t='+data[3];
//console.log(paras);
//clear demo div
demowrapper.innerHTML = '';
//create iframe and insert into demo div
var iframe = document.createElement('iframe');
iframe.id = 'demoframe';
iframe.src = domain+'demo_content.php'+paras;
demowrapper.appendChild(iframe);
//create qr code
qrGen(data);
//hide sidebar
if (sidebar.classList.contains('sideshow')) {
sidebar.classList.remove('sideshow');
sidebar.classList.add('sidehide');
}
}
else
{
sidelaps();
}
}
document.addEventListener('DOMContentLoaded',function() { init(getParas()); });
// error handling function
function error(msg)
{
console.log(msg);
if (tools.classList.contains('hide')) {
tools.classList.remove('hide');
tools.classList.add('show');}
if(!sidebar.classList.contains('err'))
{ sidebar.classList.add('err'); }
errorDiv.innerHTML = '<b>ERROR</b><br />';
errorDiv.innerHTML += msg;
//reset demo div
demowrapper.innerHTML = '<iframe id="demoframe" src="./demo_content.php"></iframe>';
//show sidebar (error msg)
if (sidebar.classList.contains('sidehide')) {
sidebar.classList.remove('sidehide');
sidebar.classList.add('sideshow');
}
//sidelaps();
}
//TOOLS
//the following functions are some additional tools
//copy2clipboard
function copyStringToClipboard (str) {
// Create new element
var el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style = {position: 'absolute', left: '-9999px'};
document.body.appendChild(el);
el.select();
// Copy text to clipboard
document.execCommand('copy');
// Remove temporary element
document.body.removeChild(el);
}
document.getElementById('copyurl').addEventListener('click', function() {
copyStringToClipboard(window.location.href);
copybtn.classList.add('active');
setTimeout(function(){ copybtn.classList.remove('active'); }, 750);
});
//claer input field with button
function clear()
{
var f = document.getElementsByTagName('input');
for (i = 0; i<f.length;i++)
{ f[i].value = ''; }
qr.innerHTML = '';
if(!sidebar.classList.contains('err'))
{ sidebar.classList.add('err'); }
window.history.pushState(domain, 'blub', (domain));
if(sidebar.classList.contains('err'))
{ sidebar.classList.remove('err'); }
}
clearbtn.addEventListener('click', function() { clear(); } );
//browserbars
barbtn.addEventListener('click',function() {
var bars = document.getElementsByClassName('browserbars');
if (bars.length > 0)
{
demo.classList.remove('browserbars');
barbtn.classList.remove('active');
}
else
{ demo.classList.add('browserbars');
barbtn.classList.add('active');
}
});
//show/hide sidebar
function sidelaps()
{
if (sidebar.classList.contains('sideshow'))
{
sidebar.classList.remove('sideshow');
sidebar.classList.add('sidehide');
//content.style.width = 'calc(100% - 42px)';
}
else
{
sidebar.classList.remove('sidehide');
sidebar.classList.add('sideshow');
//content.style.width = 'calc(100% - 180px)';
}
}
closebtn.addEventListener('click',sidelaps);
qrbtn.addEventListener('click',sidelaps);
//iframe switch
//on mobile its impossible to reload the page, because of the fullscreen iframe
document.addEventListener('DOMContentLoaded', function() {
var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
isMobile = true;
var path = window.location.href.split('?')[1];
if ( path.length > 1)
{
console.log(path);
window.location.href = './demo_content.php?'+path;
}
}
});
</script>
<script src="cookies.js" type="text/javascript"></script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
Loading...
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...