jnvm · July 7, 2016 02:46
diff --git a/fiddle.html b/fiddle.html
 <html>

 <head>
    <script src="https://wzrd.in/standalone/nipplejs"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.14/peer.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 </head>
 <body>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        body,
        * {
            padding: 0;
            border: 0;
            margin: 0;
        }
        
        *,
        :before,
        :after {
            outline: solid rgba(255, 0, 0, .5) 1px;
        }
        
        body {
            background-color: #000;
            overflow: hidden;
        }
        
        * {
            -webkit-user-select: none;
            box-sizing: border-box;
        }
        
        #gamepad {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }
        
        #gamepad>* {
            height: 100%;
            width: 50%;
            padding: 10%;
            position: relative;
        }
        
        .pad8 button {
            width: 33%;
            height: 33%;
            font-size: 10vmin;
            vertical-align: middle;
            font-weight: bold;
        }
        
        .hid {
            visibility: hidden;
        }
    </style>
    <div id="gamepad">
        <div class="pad8" id="left"><button class="hid">↖</button><button key="up">↑</button><button class="hid">↗</button><button key="left">←</button><button>◯</button><button key="right">→</button><button class="hid">↙</button><button key="down">↓</button><button class="hid">↘</button></div>
        <div class="pad8" id="right"><button class="hid">x</button><button key="Y">Y</button><button class="hid">x</button><button key="X">X</button><button>◯</button><button key="B">B</button><button class="hid">x</button><button key="A">A</button><button class="hid">x</button></div>
    </div>
 </body>

 </html>
	<html>

	<head>
	<script src="https://wzrd.in/standalone/nipplejs"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.14/peer.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	</head>
	<body>
	<style>
	body {
	display: flex;
	align-items: center;
	justify-content: center;
	}

	body,
	* {
	padding: 0;
	border: 0;
	margin: 0;
	}

	*,
	:before,
	:after {
	outline: solid rgba(255, 0, 0, .5) 1px;
	}

	body {
	background-color: #000;
	overflow: hidden;
	}

	* {
	-webkit-user-select: none;
	box-sizing: border-box;
	}

	#gamepad {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	}

	#gamepad>* {
	height: 100%;
	width: 50%;
	padding: 10%;
	position: relative;
	}

	.pad8 button {
	width: 33%;
	height: 33%;
	font-size: 10vmin;
	vertical-align: middle;
	font-weight: bold;
	}

	.hid {
	visibility: hidden;
	}
	</style>
	<div id="gamepad">
	<div class="pad8" id="left"><button class="hid">↖</button><button key="up">↑</button><button class="hid">↗</button><button key="left">←</button><button>◯</button><button key="right">→</button><button class="hid">↙</button><button key="down">↓</button><button class="hid">↘</button></div>
	<div class="pad8" id="right"><button class="hid">x</button><button key="Y">Y</button><button class="hid">x</button><button key="X">X</button><button>◯</button><button key="B">B</button><button class="hid">x</button><button key="A">A</button><button class="hid">x</button></div>
	</div>
	</body>

	</html>