<link rel="stylesheet" href="templates/ds4/template.css">
<script async src="templates/ds4/template.js"></script>
<div class="triggers">
	<span class="trigger left" data-button="6"></span>
	<span class="trigger right" data-button="7"></span>
	<span class="clear"></span>
</div>
<div class="bumpers">
	<span class="bumper left" data-button="4"></span>
	<span class="bumper right" data-button="5"></span>
	<span class="clear"></span>
</div>
<div class="touchpad" data-button="17"></div>
<div class="meta" data-button="16"></div>
<div class="arrows">
	<span class="select" data-button="8"></span>
	<span class="start" data-button="9"></span>
	<span class="clear"></span>
</div>
<div class="buttons">
	<span class="button a" data-button="0"></span>
	<span class="button b" data-button="1"></span>
	<span class="button x" data-button="2"></span>
	<span class="button y" data-button="3"></span>
</div>
<div class="sticks">
	<span class="stick left" data-button="10" data-axis-x="0" data-axis-y="1"></span>
	<span class="stick right" data-button="11" data-axis-x="2" data-axis-y="3"></span>
</div>
<div class="dpad">
	<span class="face up" data-button="12"></span>
	<span class="face down" data-button="13"></span>
	<span class="face left" data-button="14"></span>
	<span class="face right" data-button="15"></span>
</div>
