index.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Rageshake decoder ring</title>
  5. <script crossorigin src="https://unpkg.com/[email protected]/dist/source-map.js"></script>
  6. <script>
  7. sourceMap.SourceMapConsumer.initialize({
  8. "lib/mappings.wasm": "https://unpkg.com/[email protected]/lib/mappings.wasm",
  9. });
  10. </script>
  11. <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  12. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  13. <!--<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  14. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>-->
  15. <script crossorigin src="https://unpkg.com/rxjs/dist/bundles/rxjs.umd.min.js"></script>
  16. <script src="datatypes.js"></script>
  17. <script src="decoder.js"></script>
  18. <style>
  19. @keyframes spin {
  20. from {
  21. transform: rotate(0deg);
  22. }
  23. to {
  24. transform: rotate(359deg);
  25. }
  26. }
  27. body {
  28. font-family: sans-serif;
  29. }
  30. .spinner {
  31. animation: spin 4s infinite linear;
  32. display: inline-block;
  33. text-align: center;
  34. vertical-align: middle;
  35. font-size: larger;
  36. }
  37. .progress {
  38. padding-left: 0.5em;
  39. padding-right: 0.5em;
  40. }
  41. .bundle input {
  42. width: 24ex;
  43. }
  44. .valid::after {
  45. content: "✓";
  46. }
  47. label {
  48. width: 3em;
  49. margin-right: 1em;
  50. display: inline-block;
  51. }
  52. input:valid {
  53. border: 1px solid green;
  54. }
  55. .inputs > div {
  56. margin-bottom: 0.5em;
  57. }
  58. </style>
  59. </head>
  60. <body>
  61. <header><h2>Decoder ring</h2></header>
  62. <content id="main">Waiting for javascript to run...</content>
  63. <script type="text/javascript">
  64. document.addEventListener("DOMContentLoaded", () => {
  65. try {
  66. ReactDOM.render(React.createElement(Decoder.BundlePicker), document.getElementById("main"));
  67. } catch (e) {
  68. const n = document.createElement("div");
  69. n.innerText = `Error starting: ${e.message}`;
  70. document.getElementById("main").appendChild(n);
  71. }
  72. });
  73. </script>
  74. </body>
  75. </html>