index.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <!DOCTYPE html>
  2. <!-- Source Code: https://github.com/BinBashBanana/webretro -->
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
  7. <title>webretro</title>
  8. <meta name="description" content="RetroArch in your browser!">
  9. <link rel="stylesheet" href="assets/base.css?v=6.4">
  10. <link rel="stylesheet" href="assets/jswindow.css">
  11. <link rel="shortcut icon" href="assets/icon204.png">
  12. <link rel="apple-touch-icon" href="assets/icon204.png">
  13. </head>
  14. <body>
  15. <div class="main" id="mainarea">
  16. <ul id="menu">
  17. <div id="menuindicator">
  18. <h1>&uarr;</h1>
  19. <h2>Menu</h2>
  20. </div>
  21. <li>Controls
  22. <ul>
  23. <li>Start: Enter</li>
  24. <li>Select: Space</li>
  25. <li>L/R Triggers: RO</li>
  26. <li>L/R Shoulders: EP</li>
  27. <li>ABXY Buttons: HGYT</li>
  28. <li>DPad: Arrow keys</li>
  29. <li>Left joy/thumb: WASDX</li>
  30. <li>Right joy/thumb: IJKL,</li>
  31. <li>Toggle Menu: F1</li>
  32. <li>Save State: F2</li>
  33. <li>Load State: F3</li>
  34. <li>Take Screenshot: F4</li>
  35. <li><a id="keybindsbutton" href="">Change Controls</a></li>
  36. <li class="menu-long menu-nohover">Please note that these are just the bindings that are set, but actual keybindings may vary.</li>
  37. <li><a href="" title="Opens in new tab" onclick="window.open(window.URL.createObjectURL(new Blob([decodeURIComponent(atob('JTNDIURPQ1RZUEUlMjBodG1sJTNFJTNDaHRtbCUzRSUzQ2hlYWQlM0UlM0NtZXRhJTIwaHR0cC1lcXVpdiUzRCUyMnJlZnJlc2glMjIlMjBjb250ZW50JTNEJTIyMSUzQlVSTCUzRGh0dHBzJTNBJTJGJTJGcmV0cm9waWUub3JnLnVrJTJGZG9jcyUyRlJldHJvQXJjaC1Db25maWd1cmF0aW9uJTJGJTIzZGVmYXVsdC1jb3JlLWNvbnRyb2xzLWZvci1hbGwtZW11bGF0b3JzJTIyJTNFJTNDdGl0bGUlM0VSZWRpcmVjdGluZyUzQyUyRnRpdGxlJTNFJTNDJTJGaGVhZCUzRSUzQ2JvZHklM0UlM0NoMiUzRVJlZGlyZWN0aW5nLi4uJTNDJTJGaDIlM0UlM0MlMkZib2R5JTNFJTNDJTJGaHRtbCUzRQ=='))], {type: 'text/html'})));return false;">System Specifics</a></li>
  38. <li><a target="_blank" title="Opens in new tab" href="assets/controller_layout.png">Default Controller Layout</a></li>
  39. </ul>
  40. </li>
  41. <li>Saves
  42. <ul>
  43. <li class="pointer disabled" id="savegame">Save Game</li>
  44. <li class="pointer disabled" id="exportsave">Export SRAM</li>
  45. <li class="pointer disabled" id="importsave">Import SRAM</li>
  46. <li class="disabled"><input type="checkbox" id="autosave" checked disabled>Autosave (5m)</li>
  47. <li class="menu-long menu-nohover" style="width: 200px;">Please note that in order for the game to be saved, you must use the save feature in-game (unless of course the game itself autosaves), then press the save button here (Or autosave must happen). <b>These saves are only for in-game save files. If you want to be able to save at any time, use save states.</b> Saves and states are saved in your browser's indexedDB and are automatically readied every time you visit the page. You only need to use export and import for backups.</li>
  48. <li><a id="savesbutton" href="">Recover Saves</a></li>
  49. </ul>
  50. </li>
  51. <li>States
  52. <ul>
  53. <li class="pointer disabled" id="savestate">Save State</li>
  54. <li class="pointer disabled" id="loadstate">Load State</li>
  55. <li class="pointer disabled" id="undosavestate">Undo Save State</li>
  56. <li class="pointer disabled" id="undoloadstate">Undo Load State</li>
  57. <li class="pointer disabled" id="exportstate">Export State</li>
  58. <li class="pointer disabled" id="importstate">Import State</li>
  59. <li class="menu-long menu-nohover" style="width: 200px;">You must save state before you export state; exported states are not states at the time of exporting.</li>
  60. <li><a id="statesbutton" href="">Recover States</a></li>
  61. </ul>
  62. </li>
  63. <li>Screenshots
  64. <ul>
  65. <li class="pointer disabled" id="takescreenshot">Take Screenshot</li>
  66. <li class="pointer" id="screenshotsbutton">Screenshots</li>
  67. </ul>
  68. </li>
  69. <li>Graphics
  70. <ul>
  71. <li class="disabled"><input type="checkbox" id="smooth" disabled>Smooth Scaling</li>
  72. <li class="disabled" title="Warning: this will make the cursor position innacurate. You probably won't notice it unless you are using the menu."><input type="checkbox" id="doubleres" disabled>Double Resolution</li>
  73. </ul>
  74. </li>
  75. <li>Cheats
  76. <ul class="xlmenu">
  77. <li>How to apply a cheat code</li>
  78. <li>1. Open the Menu</li>
  79. <li>2. Scroll down</li>
  80. <li>3. Click "Cheats"</li>
  81. <li>4. Click "Add new cheat to bottom/top"</li>
  82. <li>5. Click the new cheat that you just created</li>
  83. <li>6. Click "Code"</li>
  84. <li>7. Enter/paste the cheat code</li>
  85. <li>8. When you are done, press enter</li>
  86. <li>9. Click "Enabled" (Set to ON)</li>
  87. <li>10. Go back to Cheats by clicking the bar on the top</li>
  88. <li>11. Click "Apply Changes"</li>
  89. <li>12. Exit the menu</li>
  90. </ul>
  91. </li>
  92. <li id="consolebutton">
  93. Console
  94. </li>
  95. <li id="menubutton" class="disabled">
  96. Menu
  97. </li>
  98. <li id="pause" class="disabled">
  99. Pause
  100. </li>
  101. </ul>
  102. <div id="ffd" style="display: none;">
  103. <div id="ffdcontent">
  104. <h2><span id="systemname"></span> Emulator</h2>
  105. <input type="button" id="upload" value="Choose ROM File" class="uploadbutton">
  106. <br>
  107. <img id="googledriveupload" class="uploadbutton uploadimage" title="Google Drive Upload" src="assets/googledrive.png">
  108. <img id="dropboxupload" class="uploadbutton uploadimage" title="Dropbox Upload" src="assets/dropbox.png">
  109. <img id="onedriveupload" class="uploadbutton uploadimage" title="OneDrive Upload" src="assets/onedrive.png">
  110. </div>
  111. <div class="source">
  112. <a href="https://github.com/BinBashBanana/webretro" target="_blank">GitHub</a>
  113. <a href="https://github.com/libretro" target="_blank">Libretro GitHub</a>
  114. <a href="https://emscripten.org" target="_blank">Emscripten</a>
  115. <a href="info/" target="_blank">Info</a>
  116. <span id="versionindicator"></span>
  117. </div>
  118. </div>
  119. <p id="updatenotice"></p>
  120. <canvas id="canvas" class="texturePixelated"></canvas>
  121. <input type="button" id="startbutton" value="Start">
  122. <div id="canvasmask">
  123. <div id="resume">
  124. <div>
  125. <h1>Paused</h1>
  126. <h3>Click to resume</h3>
  127. </div>
  128. </div>
  129. <div id="sidealertholder"></div>
  130. </div>
  131. <div id="modals">
  132. <div id="managers">
  133. <div class="modaltop">
  134. <h2 id="managertitle"></h2>
  135. <span id="managerclose">&#10006;</span>
  136. </div>
  137. <div id="keybindmanager">
  138. <h4>Press save when you are finished!</h4>
  139. <table class="managertableparent">
  140. <tbody class="managertable" id="keybindtable"></tbody>
  141. </table>
  142. <input type="button" id="savekeybinds" class="specialblue" value="Save">
  143. <input type="button" id="resetkeybinds" value="Reset to Default">
  144. </div>
  145. <div id="screenshotmanager">
  146. <div id="screenshotsdiv"></div>
  147. <div class="screenshotsbottom">
  148. <h4>Screenshots do not persist through page reloads! Download your screenshots now!</h4>
  149. <input type="button" id="downloadallscreenshots" value="Download All (zip)">
  150. </div>
  151. </div>
  152. <div id="savemanager">
  153. <table class="managertableparent">
  154. <tbody class="managertable" id="savetable"></tbody>
  155. </table>
  156. <h4>Here, you can download all of the webretro saves and states made on <i>this domain</i>.</h4>
  157. <div class="savesbottom">
  158. <span id="quotatext"></span>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. <script type="text/javascript" src="assets/zip-2.2.26.min.js"></script>
  165. <script type="text/javascript" src="assets/md5.min.js"></script>
  166. <script type="text/javascript" src="uauth/uauth.js"></script>
  167. <script type="text/javascript" src="assets/jswindow.js"></script>
  168. <script type="text/javascript" src="assets/charToCodeMap.js?v=6.4"></script>
  169. <script type="text/javascript" src="assets/base.js?v=6.4"></script>
  170. </body>
  171. </html>