<!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 >