index.html 3.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <html>
  2. <head>
  3. <link rel="shortcut icon" href="src/assets/favicon.ico" type="image/x-icon">
  4. <link rel="icon" href="src/assets/favicon.ico" type="image/x-icon">
  5. <meta charset="utf-8">
  6. <meta name="og:site_name" content="Girls und Panzer Character Sorting">
  7. <meta name="og:description" content="A simple website for sorting GuP characters in a formatted list.">
  8. <meta name="og:image" content="src/assets/banner.jpg">
  9. <title>Girls und Panzer Character Sorting</title>
  10. <link rel="stylesheet" type="text/css" href="src/css/styles.css?v=3">
  11. <script src="src/js/data.js"></script>
  12. <script src="src/js/data/12012021.js?v=2"></script>
  13. <script src="src/js/html2canvas.min.js"></script>
  14. <script src="src/js/lz-string.min.js"></script>
  15. <script src="src/js/seedrandom.min.js"></script>
  16. <script src="src/js/main.js"></script>
  17. </head>
  18. <body>
  19. <div class="container">
  20. <div class="progress">
  21. <div class="battleWrapper">
  22. <span class="progressbattle"></span>
  23. </div>
  24. <div class="progressbar">
  25. <div class="progressfill"><span class="progresstext"></span></div>
  26. </div>
  27. </div>
  28. <div class="sorter">
  29. <img src="src/assets/defaultL.webp" class="left sort image">
  30. <div class="starting start button">Girls Und Panzer Project Character Sorter<br><br>Click to Start!</div>
  31. <div class="starting load button">Load&nbsp;<span></span></div>
  32. <div class="loading button"><br/><br/><br/><div></div></div>
  33. <div class="sorting tie button">Tie</div>
  34. <div class="sorting undo button">Undo</div>
  35. <div class="sorting save button">Save Progress</div>
  36. <div class="finished save button">Generate Result URL</div>
  37. <div class="finished getimg button">Generate Image</div>
  38. <div class="finished list button">Generate Text List</div>
  39. <img src="src/assets/defaultR.webp" class="right sort image">
  40. <div class="left sort text"><p></p></div>
  41. <div class="right sort text"><p></p></div>
  42. </div>
  43. <div class="options"></div>
  44. <div class="image selector">Display Images on Result: </div>
  45. <div class="time taken"></div>
  46. <div id="twitter" class="finished">
  47. </div>
  48. <div class="results"></div>
  49. <div class="info">
  50. <a class="clearsave">Clear Save Data</a>
  51. <p>Sorter for Girls und Panzer characters. Pick your sources, and hit the Start button.</p>
  52. <p>Click on the character you like better from the two, or tie them if you like them equally or don't know them.</p>
  53. <br>
  54. <p>Keyboard controls during sorting:<br/><br/><kbd>H</kbd> / <kbd>←</kbd> (select left)<br/><br/><kbd>J</kbd> / <kbd>↓</kbd> (undo)<br/><br/><kbd>K</kbd> / <kbd>↑</kbd> (tie)<br/><br/><kbd>L</kbd> / <kbd>→</kbd> (pick right)<br/><br/><kbd>S</kbd> (save progress)</p>
  55. <br>
  56. <p>Before sorting:<br/><br/><kbd>S</kbd> / <kbd>Enter</kbd> (start sorting)<br/><br/><kbd>L</kbd> (load progress)</p><br/>
  57. <p><kbd>1</kbd> / <kbd>2</kbd> / <kbd>3</kbd> always correspond to the first/second/third buttons</p>
  58. <br>
  59. <p>Inspired by <a href="http://mainyan.sakura.ne.jp/thsort.html">Mainyan's Touhou sorter</a>, originally using <a href="https://github.com/execfera/charasort/">Execfera's Touhou sorter</a> and modified from <a href="https://github.com/masterdalk/charasort/">mastedalk's Girls und Panzer sorter</a>.</p>
  60. <p>Character Art from <a href="https://gup.fandom.com/wiki/List_of_Characters">the GuP Wiki</a>.</p>
  61. <p><a href="https://notabug.org/jyushimatsu/garupan-sorter">See the source code</a></p>
  62. </div>
  63. </div>
  64. </body>
  65. </html>