<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<script data-main="main" src="/bower_components/requirejs/require.js"></script>
<style>
html, body {
margin: 0px;
padding: 0px;
}
#pad-iframe {
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
width:100%;
height:100%;
border:none;
margin:0;
padding:0;
overflow:hidden;
}
#feedback {
display: none;
position: fixed;
top: 0px;
right: 0px;
border: 0px;
height: 100vh;
width: 30vw;
background-color: #222;
color: #ccc;
}
#debug {
height: 20px;
position: absolute;
right: 0px;
top: 70px;
}
#debug button {
visibility: hidden;
}
#debug:hover button {
visibility: visible;
}
</style>
</head>
<body>
<iframe id="pad-iframe" src="inner.html"></iframe>
<div id="debug"><button>DEBUG</button></div>
<textarea id="feedback"></textarea>
<script>
require(['/bower_components/jquery/dist/jquery.min.js'], function() {
var $ = window.$;
$('#debug').on('click', function() {
if($('#feedback').is(':visible')) {
$('#pad-iframe').css({
'width' : '100%'
});
$('#debug').css({
'right' : '0%'
});
}
else {
$('#pad-iframe').css({
'width' : '70%'
});
$('#debug').css({
'right' : '30%'
});
}
$('#feedback').toggle();
});
});
</script>
</body>
</html>