Primitive Flip Board;

dabblet.css

/**
 * Primitive Flip Board;
*/
html{
	min-height: 100%;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;}
body{
	background: #f06;
	background: linear-gradient(135deg, yellow, #f06);
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	user-select: none;
}
#holder{
	position: absolute;
	margin: auto;
	height: 100%;
	width: 100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
	overflow-x: hidden;
}
.halfPage{
	position: absolute;
	margin: auto;
	height: 50%;
	width: 80%;

	left:0;
	right:0;	
	background: lightgray;
	text-align: center;
}
#top{
	top: 0;
}
#bottom{
	bottom: 0;
}
#mover{
	bottom:0;
	background: gray;
	transform-origin: top;
	transform: rotateX(60deg);
	font-size: 5rem;
}

dabblet.html

<div id="holder">
	<div id="app">
		<div id="top" class="halfPage">...</div>
		<div id="bottom" class="halfPage">...</div>
		<div id="mover" class="halfPage"><span id="msg">(msg)</span></div>
	</div>
</div>

dabblet.js

//==============================//
//==========| STARTUP |=========//
//==============================//
window.onload = function(){
 c.initialize();
 [
 	'touchstart',
 	'touchend',
  	'touchmove',
	'mousedown',
 	'mouseup',
 	'mousemove',
 	'click'	 	
  ].forEach(eventType=>{
  	window.addEventListener(eventType, eventObject=>{
  		eventObject.stopPropagation();
;
  	}, true);
  });
 };
//==============================//
//=========| MODEL |============//
//==============================//
let m = {};
m.direction = null;
m.pressed = true;
m.movePercent = 0;


//==============================//
//=========| VIEW |=============//
//==============================//
let v = {};

//==============================//
//=======| CONTROLLER |=========//
//==============================//
let c = {};

//-----| INITIALIZE |------//
c.initialize = function (){
	L.attachAllElementsById(v);
}

//-----| UPDATE MODEL |------//
c.updateModel = function updateModel(eventObject, updateView){

	updateView(eventObject);
};

//-----| UPDATE VIEW |------//
c.updateView = function updateView(eventObject){
 	L.showEvent(eventObject, v.msg)
};

//==============================//
//=======| END of app |==========//
//==============================//
//-------| a small helper library |--------//
let L = {};
L.attachAllElementsById = function(attachHere){
	let allElements = document.getElementsByTagName('*');
	[].forEach.call(allElements, function(element){
		if(element.id){
			attachHere[element.id] = element;
		}
	});
}
//----------------------//
L.showEvent = function showEvent(eventObject, here){
	here.innerHTML = "foobar";
}

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}