<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RetroArch Web Player</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="webplayer.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-static-top navbar-light bg-faded">
<div class="container">
<a class="navbar-brand" href="#">RetroArch</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Gambatte <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="bg-inverse webplayer-container">
<div class="container">
<div class="webplayer_border text-xs-center" id="canvas_div" style="display: none">
<canvas class="webplayer col-xs-12" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 form-group btn-group text-xs-center p-t-2" id="openrom">
<button class="btn btn-secondary" id="btnLoad" onclick="document.getElementById('rom').click()">Upload Content</button>
<input class="btn btn-secondary" style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" onchange="selectFiles(event.target.files)" multiple />
<button class="btn btn-primary" id="btnStart" onclick="startRetroArch()">Start RetroArch</button>
<button class="btn btn-secondary" id="btnAuth" onclick="dropboxInit()">Use DropBox</button>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="resize"> Resize canvas
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="pointerLock" checked> Lock/hide mouse pointer
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="vsync"> Enable V-sync (can only be done before loading game)
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="sdl2"> Enable SDL2
</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="latency" id="latency-label" placeholder="Audio Latency (ms)">Audio Latency (ms)</label>
<input class="form-control" type="number" value="96" id="latency">
<small class="form-text text-muted">Increase if you hear pops at fullspeed, can only be done before loading game</small>
</div>
<div class="form-group">
<input class="btn btn-info" type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, document.getElementById('resize').checked)">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<textarea class="webplayer form-control" id="output" rows="15"></textarea>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js"></script>
<script src="browserfs.js"></script>
<script src="webplayer.js"></script>
<script src="gambatte.js"></script>
</body>
</html>