mirror of
https://github.com/libretro/RetroArch.git
synced 2026-11-11 03:11:33 -10:00
BinBashBanana
a650525e6e
* Emscripten core switching * Update changelog * Add comments (#18174) * Better core switching for HTML dropdown
114 lines
4.8 KiB
HTML
114 lines
4.8 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">
|
|
<link href="libretro.css" rel="stylesheet" type="text/css">
|
|
<link rel="shortcut icon" href="media/retroarch.ico">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
</head>
|
|
<body>
|
|
<!--Navbar-->
|
|
<div id="navbar">
|
|
<input type="checkbox" id="menuhider">
|
|
<label for="menuhider" class="menuhiderlabel" aria-label="Hide/Show Top Navigation" id="btnHideMenu" title="Hide/Show Top Navigation">
|
|
<span class="fa fa-chevron-up"></span>
|
|
</label>
|
|
<ul id="menu">
|
|
<li class="dropdown-parent">
|
|
<input type="checkbox" id="dropdown-box">
|
|
<label for="dropdown-box">
|
|
<span id="current-core">Core Selection</span>
|
|
<span class="fa fa-caret-down"></span>
|
|
</label>
|
|
<div class="dropdown-child ozone-list" id="core-selector"></div>
|
|
</li>
|
|
<li id="btnRun" class="disabled">
|
|
<span class="fa fa-spinner fa-spin" id="icnRun"></span> Run
|
|
</li>
|
|
<li id="btnAdd" class="disabled">
|
|
<span class="fa fa-plus" id="icnAdd"></span> Add Content
|
|
</li>
|
|
<li id="btnFiles" title="Manage files" aria-label="Manage files">
|
|
<span class="fa fa-file"></span>
|
|
</li>
|
|
<li id="btnMenu" title="Menu toggle" aria-label="Menu" class="disabled">
|
|
<span class="fa fa-bars"></span>
|
|
</li>
|
|
<li id="btnFullscreen" title="Fullscreen" aria-label="Fullscreen" class="disabled">
|
|
<span class="fa fa-expand"></span>
|
|
</li>
|
|
<li id="btnHelp">Help</li>
|
|
</ul>
|
|
<div class="progressContainer">
|
|
<div class="progressBar" id="progressBarMain"></div>
|
|
<div class="progressText" id="progressTextMain"></div>
|
|
</div>
|
|
</div>
|
|
<div id="modals">
|
|
<div id="modal-window">
|
|
<div class="modal-header">
|
|
<h2 id="modal-title">Sample title</h2>
|
|
<div id="modal-close"><span class="fa fa-times"></span></div>
|
|
<div class="progressContainer">
|
|
<div class="progressBar" id="progressBarModal"></div>
|
|
<div class="progressText" id="progressTextModal"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Basic steps modal for Web Libretro -->
|
|
<div class="modal-body" role="dialog" id="helpModal">
|
|
<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>
|
|
<ul>
|
|
<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>
|
|
<ul>
|
|
<li>Nestopia > <i>YourGame.nes</i></li>
|
|
<li>Gambatte > <i>YourGame.gb(c)</i></li>
|
|
</ul>
|
|
<p>etc.</p>
|
|
<p></p>
|
|
<h3><b><span class="fa fa-file"></span> File Management</b></h3>
|
|
<p>Download/upload/erase save data</p>
|
|
<p>If the Web Player doesn't start, you should click "Delete all" and refresh the cache in your browser (usually F5 or Shift+F5).</p>
|
|
<p>If this happens, please also report an issue on <a target="_blank" href="https://github.com/libretro/RetroArch/issues">GitHub</a> with logs from the browser's developer tools console.</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 in RetroArch.</p>
|
|
</div>
|
|
<!-- File management -->
|
|
<div class="modal-body" role="dialog" id="filesModal">
|
|
<div class="ozone-list" id="fileManagerPanel">
|
|
<span data-action="upload_saves">Upload saves</span>
|
|
<span data-action="upload_states">Upload states</span>
|
|
<span data-action="upload_system">Upload system files</span>
|
|
<span data-action="download_sss">Download saves/states/screenshots</span>
|
|
<span data-action="download_all">Download all (slow)</span>
|
|
<span data-action="delete_sss" class="danger">Delete saves/states/screenshots</span>
|
|
<span data-action="delete_content" class="danger">Delete content</span>
|
|
<span data-action="delete_config" class="danger">Delete config</span>
|
|
<span data-action="delete_assets" class="danger">Delete assets</span>
|
|
<span data-action="delete_all" class="danger">Delete all</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="webplayer-container">
|
|
<canvas class="webplayer" id="canvas"></canvas>
|
|
<div id="webplayer-preview"></div>
|
|
</div>
|
|
<script src="core_list.js"></script>
|
|
<script src="libretro.js"></script>
|
|
</body>
|
|
</html>
|