2016-09-07 00:41:13 -05:00
<!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 -->
2016-09-11 02:36:25 -04:00
< link href = "//cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css" rel = "stylesheet" >
2016-12-03 11:44:26 -05:00
2016-09-15 18:18:06 -05:00
< link href = "libretro.css" rel = "stylesheet" type = "text/css" >
2017-08-09 12:50:29 -05:00
< link rel = "shortcut icon" href = "media/retroarch.ico" / >
2016-12-03 11:44:26 -05:00
2016-09-07 00:41:13 -05:00
< / head >
2016-12-03 11:44:26 -05:00
< body >
2016-09-07 00:41:13 -05:00
<!-- Navbar -->
< nav class = "navbar navbar-dark bg-primary" >
2016-09-17 16:58:28 -05:00
< div class = "container" >
2018-01-18 22:56:46 -06:00
<!-- navbar content -->
< div class = "navbar-toggleable-xs" >
2016-09-07 00:41:13 -05:00
<!-- Links -->
< ul class = "nav navbar-nav" >
2016-09-07 01:44:34 -05:00
< div class = "dropdown" >
2016-09-17 12:22:46 -05:00
< 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 >
2018-09-14 09:39:20 -04:00
< a class = "dropdown-item" href = "." data-core = "chailove" > ChaiLove< / a >
2016-09-17 12:22:46 -05:00
< 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" > Gambatte< / a >
< a class = "dropdown-item" href = "." data-core = "gme" > Game Music Emu< / a >
2016-09-24 16:52:48 -06:00
< a class = "dropdown-item" href = "." data-core = "genesis_plus_gx" > Genesis Plus GX< / a >
< a class = "dropdown-item" href = "." data-core = "glupen64" > GLupeN64< / a >
2016-09-17 12:22:46 -05:00
< 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 = "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 >
2018-11-10 07:10:01 -08:00
< a class = "dropdown-item" href = "." data-core = "mu" > Mu< / a >
2016-09-17 12:22:46 -05:00
< a class = "dropdown-item" href = "." data-core = "mupen64plus" > Mupen64 Plus< / 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 >
2019-06-08 16:01:39 +02:00
< a class = "dropdown-item" href = "." data-core = "flycast" > Flycast< / a >
2016-09-17 12:22:46 -05:00
< 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 >
2019-06-29 12:25:41 -04:00
< a class = "dropdown-item" href = "." data-core = "squirreljme" > SquirrelJME< / a >
2016-09-17 12:22:46 -05:00
< a class = "dropdown-item" href = "." data-core = "stella" > Stella< / a >
< a class = "dropdown-item" href = "." data-core = "tgbdual" > TGB Dual< / a >
2018-11-10 14:45:20 +01:00
< a class = "dropdown-item" href = "." data-core = "theodore" > Theodore (Thomson TO8/TO9)< / a >
2016-09-17 12:22:46 -05:00
< 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 >
2016-12-03 11:44:26 -05:00
< button class = "btn btn-primary tooltip-enable" id = "btnClean" onclick = "cleanupStorage();" title = "Cleanup storage" >
2016-09-17 12:37:35 -05:00
< span class = "fa fa-trash-o" id = "icnClean" > < / span > < span class = "sr-only" > Cleanup< / span >
2016-09-17 12:22:46 -05:00
< / 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 / >
2018-01-14 21:02:59 -06:00
< button class = "btn btn-primary disabled tooltip-enable" id = "btnMenu" onclick = "keyPress('F1');" title = "Menu toggle" disabled >
2016-09-17 12:22:46 -05:00
< span class = "fa fa-bars" id = "btnMenu" > < / span > < span class = "sr-only" > Menu< / span >
< / button >
2016-12-03 11:44:26 -05:00
< button class = "btn btn-primary disabled tooltip-enable" id = "btnFullscreen" onclick = "Module.requestFullScreen()" title = "Fullscreen" disabled >
2016-09-17 12:22:46 -05:00
< span class = "fa fa-desktop" id = "icnAdd" > < / span > < span class = "sr-only" > Fullscreen< / span >
< / button >
2019-08-19 01:23:59 +03:00
< / button >
< button type = "button" class = "btn btn-primary tooltip-enable" data-toggle = "modal" data-target = "#helpModal" > Help< / button >
2016-09-07 00:41:13 -05:00
< / li >
2016-09-07 01:44:34 -05:00
< / div >
2016-09-07 00:41:13 -05:00
< / ul >
2018-01-14 23:57:53 -05:00
< 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 >
2016-09-07 00:41:13 -05:00
< / div >
2019-08-19 01:23:59 +03:00
<!-- 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 >
2019-08-19 17:28:22 +03:00
< 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 >
2019-08-19 01:23:59 +03:00
< 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 >
2019-08-19 17:28:22 +03:00
< li > Nestopia > < i > YourGame.nes< / i > < / li >
< li > Gambatte > < i > YourGame.gbc< / i > < / li >
2019-08-19 01:23:59 +03:00
< / ul >
< p > etc.< / p >
< p > < / p >
< h3 > < b > < span class = "fa fa-trash-o" > < / span > Cleanup Storage< / b > < / h3 >
2019-08-19 17:28:22 +03:00
< 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 >
2019-08-19 01:23:59 +03:00
< 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 >
2018-01-18 22:56:46 -06:00
<!-- /.navbar content -->
2016-09-07 00:41:13 -05:00
< / div >
< / nav >
< div class = "bg-inverse webplayer-container" >
2018-01-14 23:45:54 -06:00
< div class = "webplayer_border text-xs-center" id = "canvas_div" >
2018-01-15 04:09:26 -06:00
< 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" >
2016-09-07 00:41:13 -05:00
< / div >
< / div >
2019-08-18 22:53:55 +03:00
2016-09-07 00:41:13 -05:00
< script src = "//code.jquery.com/jquery-3.1.0.min.js" > < / script >
2016-09-08 23:37:05 -05:00
< script src = "//rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js" > < / script >
2016-09-07 00:41:13 -05:00
< 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 >
2016-09-08 23:37:05 -05:00
< script src = "analytics.js" > < / script >
2016-09-29 08:49:31 -05:00
<!-- script src="//wzrd.in/standalone/browserfs@0.6.1"></script -->
2019-12-14 20:24:41 -06:00
< script src = "browserfs.min.js" > < / script >
2016-09-15 18:18:06 -05:00
< script src = "libretro.js" > < / script >
2016-12-10 22:01:28 +01:00
< div align = "center" >
< a href = "https://www.patreon.com/libretro" >
2018-01-14 22:31:30 -05:00
< img src = "https://patreon_public_assets.s3.amazonaws.com/sized/becomeAPatronBanner.png" width = "350" height = "116" > < / a >
2016-12-10 22:01:28 +01:00
< / div >
2016-09-07 00:41:13 -05:00
< / body >
< / html >
