You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
177 lines
12 KiB
HTML
177 lines
12 KiB
HTML
<!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">
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
|
|
<!-- Material Design Bootstrap -->
|
|
<link href="//cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css" rel="stylesheet">
|
|
|
|
<link href="libretro.css" rel="stylesheet" type="text/css">
|
|
<link rel="shortcut icon" href="media/retroarch.ico" />
|
|
|
|
</head>
|
|
<body>
|
|
<!--Navbar-->
|
|
<nav class="navbar navbar-dark bg-primary">
|
|
<div class="container">
|
|
<!--navbar content-->
|
|
<div class="navbar-toggleable-xs">
|
|
<!--Links-->
|
|
<ul class="nav navbar-nav">
|
|
<div class="dropdown">
|
|
<li class="nav-item dropdown">
|
|
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Core Selection</button>
|
|
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut" id="core-selector">
|
|
<!-- <a class="dropdown-item" href="." data-core="2048">2048</a>
|
|
<a class="dropdown-item" href="." data-core="4do">4DO</a>
|
|
<a class="dropdown-item" href="." data-core="bluemsx">BlueMSX</a>
|
|
<a class="dropdown-item" href="." data-core="chailove">ChaiLove</a>
|
|
<a class="dropdown-item" href="." data-core="craft">Craft</a>
|
|
<a class="dropdown-item" href="." data-core="desmume">DeSmuME</a>
|
|
<a class="dropdown-item" href="." data-core="dosbox">DOSBox</a>
|
|
<a class="dropdown-item" href="." data-core="easyrpg">EasyRPG</a>
|
|
<a class="dropdown-item" href="." data-core="fbalpha2012">FB Alpha 2012</a>
|
|
<a class="dropdown-item" href="." data-core="fbalpha2012_cps1">FB Alpha 2012 CPS1</a>
|
|
<a class="dropdown-item" href="." data-core="fbalpha2012_cps2">FB Alpha 2012 CPS2</a>
|
|
<a class="dropdown-item" href="." data-core="fbalpha2012_neo">FB Alpha 2012 NeoGeo</a>
|
|
<a class="dropdown-item" href="." data-core="fceumm">FCEUmm</a>
|
|
<a class="dropdown-item" href="." data-core="ffmpeg">FFmpeg</a> -->
|
|
<a class="dropdown-item" href="." data-core="gambatte">GambeBoy</a>
|
|
<!-- <a class="dropdown-item" href="." data-core="gme">Game Music Emu</a> -->
|
|
<a class="dropdown-item" href="." data-core="genesis_plus_gx">Genesis Plus GX</a>
|
|
<a class="dropdown-item" href="." data-core="glupen64">GLupeN64</a>
|
|
<!--<a class="dropdown-item" href="." data-core="gpsp">gPSP</a>-->
|
|
<!-- <a class="dropdown-item" href="." data-core="handy">Handy</a>
|
|
<a class="dropdown-item" href="." data-core="lutro">Lutro</a> -->
|
|
<a class="dropdown-item" href="." data-core="mame2000">MAME 2000</a>
|
|
<!-- <a class="dropdown-item" href="." data-core="mednafen_lynx">Mednafen Lynx</a>
|
|
<a class="dropdown-item" href="." data-core="mednafen_ngp">Mednafen Neo Geo Pocket</a> -->
|
|
<a class="dropdown-item" href="." data-core="mednafen_pce_fast">Mednafen PC Engine Fast</a>
|
|
<!--<a class="dropdown-item" href="." data-core="mednafen_pcfx">Mednafen/Beetle PCFX</a>-->
|
|
<a class="dropdown-item" href="." data-core="mednafen_psx">Mednafen/Beetle PSX</a>
|
|
<!--<a class="dropdown-item" href="." data-core="mednafen_saturn">Mednafen/Beetle Saturn</a>-->
|
|
<!-- <a class="dropdown-item" href="." data-core="mednafen_snes">Mednafen/Beetle SNES</a>
|
|
<a class="dropdown-item" href="." data-core="mednafen_vb">Mednafen/Beetle Virtual Boy</a>
|
|
<a class="dropdown-item" href="." data-core="mednafen_wswan">Mednafen/Beetle WonderSwan</a>
|
|
<a class="dropdown-item" href="." data-core="mu">Mu</a> -->
|
|
<a class="dropdown-item" href="." data-core="mupen64plus">Mupen64 Plus</a>
|
|
<!-- <a class="dropdown-item" href="." data-core="mrboom">MrBoom</a> -->
|
|
<a class="dropdown-item" href="." data-core="nestopia">Nestopia</a>
|
|
<!-- <a class="dropdown-item" href="." data-core="nxengine">NX Engine</a>
|
|
<a class="dropdown-item" href="." data-core="o2em">O2em</a>
|
|
<a class="dropdown-item" href="." data-core="picodrive">PicoDrive</a>
|
|
<a class="dropdown-item" href="." data-core="prboom">PrBoom</a>
|
|
<a class="dropdown-item" href="." data-core="quicknes">QuickNES</a>
|
|
<a class="dropdown-item" href="." data-core="flycast">Flycast</a>
|
|
<a class="dropdown-item" href="." data-core="snes9x2002">Snes9x 2002</a>
|
|
<a class="dropdown-item" href="." data-core="snes9x2005">Snes9x 2005</a> -->
|
|
<a class="dropdown-item" href="." data-core="snes9x2010">Snes9x 2010</a>
|
|
<a class="dropdown-item" href="." data-core="snes9x">Snes9x</a>
|
|
<!-- <a class="dropdown-item" href="." data-core="squirreljme">SquirrelJME</a>
|
|
<a class="dropdown-item" href="." data-core="stella">Stella</a>
|
|
<a class="dropdown-item" href="." data-core="tgbdual">TGB Dual</a>
|
|
<a class="dropdown-item" href="." data-core="theodore">Theodore (Thomson TO8/TO9)</a> -->
|
|
<!-- <a class="dropdown-item" href="." data-core="tyrquake">TyrQuake</a>
|
|
<a class="dropdown-item" href="." data-core="vba_next">VBA Next</a>
|
|
<a class="dropdown-item" href="." data-core="vecx">Vecx</a> -->
|
|
<a class="dropdown-item" href="." data-core="virtualjaguar">Virtual Jaguar</a>
|
|
<a class="dropdown-item" href="." data-core="yabause">Yabause</a>
|
|
</div>
|
|
<button class="btn btn-primary disabled" id="btnRun" onclick="startRetroArch()" disabled>
|
|
<span class="fa fa-spinner fa-spin" id="icnRun"></span> Run
|
|
</button>
|
|
<button class="btn btn-primary disabled" id="btnAdd" onclick="document.getElementById('btnRom').click()" disabled>
|
|
<span class="fa fa-plus" id="icnAdd"></span> Add Content
|
|
</button>
|
|
<button class="btn btn-primary tooltip-enable" id="btnClean" onclick="cleanupStorage();" title="Cleanup storage">
|
|
<span class="fa fa-trash-o" id="icnClean"></span> <span class="sr-only">Cleanup</span>
|
|
</button>
|
|
<input class="btn btn-primary disabled" style="display: none" type="file" id="btnRom" name="upload" onclick="document.getElementById('btnAdd').click();" onchange="selectFiles(event.target.files)" multiple />
|
|
<button class="btn btn-primary disabled tooltip-enable" id="btnMenu" onclick="keyPress('F1');" title="Menu toggle" disabled>
|
|
<span class="fa fa-bars" id="btnMenu"></span> <span class="sr-only">Menu</span>
|
|
</button>
|
|
<button class="btn btn-primary disabled tooltip-enable" id="btnFullscreen" onclick="Module.requestFullscreen(false)" title="Fullscreen" disabled>
|
|
<span class="fa fa-desktop" id="icnAdd"></span> <span class="sr-only">Fullscreen</span>
|
|
</button>
|
|
</button>
|
|
<button type="button" class="btn btn-primary tooltip-enable" data-toggle="modal" data-target="#helpModal">Help</button>
|
|
</li>
|
|
</div>
|
|
</ul>
|
|
<div class="toggleMenu">
|
|
<button class="btn btn-primary" id="btnHideMenu" title="Toggle Menu">
|
|
<span class="fa fa-chevron-up" id="icnHideMenu"></span> <span class="sr-only">Hide Top Navigation</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Basics steps modal for Web Libretro -->
|
|
<div class="modal fade" id="helpModal" role="dialog" style="color:black;">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
<h1 class="modal-title">Basics</h1>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h3><b>Load Core</b></h3>
|
|
<p>Load your core by clicking on the first tab. Scroll down until you reach the desired Core. We will use Nestopia for now. Don't forget - Content must be compatible with the matched Core.</p>
|
|
<li>Nes: <i>NESTOPIA</i></li>
|
|
<li>Game Boy / Color: <i>Gambatte</i></li>
|
|
</ul>
|
|
<p>etc.</p>
|
|
<p></p>
|
|
<h3><b>Load Content</b></h3>
|
|
<p>After selecting Core, click Run. After RetroArch opens, click Add Content and select your compatible ROM.</p>
|
|
<li>Nestopia > <i>YourGame.nes</i></li>
|
|
<li>Gambatte > <i>YourGame.gbc</i></li>
|
|
</ul>
|
|
<p>etc.</p>
|
|
<p></p>
|
|
<h3><b><span class="fa fa-trash-o"></span> Cleanup Storage</b></h3>
|
|
<p>The trashcan erases your existing configuration and presets. If the Web Player doesn't start, you should click the trashcan and refresh the cache in your browser (usually F5 or Shift+F5).</p>
|
|
<p></p>
|
|
<h3><b><span class="fa fa-bars"></span> Quick Menu</b></h3>
|
|
<p>If you click on the three line icons, the Quick Menu will open here as in RetroArch.</p>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.navbar content-->
|
|
</div>
|
|
</nav>
|
|
<div class="bg-inverse webplayer-container">
|
|
<div class="webplayer_border text-xs-center" id="canvas_div">
|
|
<div class="showMenu">
|
|
<button type="button" class="btn btn-link">
|
|
<span class="fa fa-chevron-down" id="icnShowMenu"></span> <span class="sr-only">Show Top Navigation</span>
|
|
</button>
|
|
</div>
|
|
<canvas class="webplayer" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()" style="display: none"></canvas>
|
|
<img class="webplayer-preview img-fluid" src="media/canvas.png" width="960px" height="720px" alt="RetroArch Logo">
|
|
</div>
|
|
</div>
|
|
|
|
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
|
|
<script src="//rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
|
|
<script src="analytics.js"></script>
|
|
<!--script src="//wzrd.in/standalone/browserfs@0.6.1"></script-->
|
|
<script src="browserfs.min.js"></script>
|
|
<script src="libretro.js"></script>
|
|
<!-- <div align="center">
|
|
<a href="https://gregandev.fr">
|
|
<img src="https://gregandev.fr/docs/images/logos/GreganDevLogo3.png" width="350" height="116"></a>
|
|
</div> -->
|
|
</body>
|
|
</html> |