less copy protection, more size visualization
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

150 line
4.6 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Macrovision</title>
  6. <link rel="stylesheet" href="reset.css">
  7. <link rel="stylesheet" href="macrovision.css">
  8. <script src="math.min.js"></script>
  9. <script src="presets/buildings.js"></script>
  10. <script src="presets/landmarks.js"></script>
  11. <script src="presets/characters.js"></script>
  12. <script src="presets/objects.js"></script>
  13. <script src="presets/naturals.js"></script>
  14. <script src="presets/vehicles.js"></script>
  15. <script src="presets/cities.js"></script>
  16. <script src="presets/scenes.js"></script>
  17. <script src="media/attribution.js"></script>
  18. <script src="macrovision.js"></script>
  19. <meta name="theme-color" content="#000000" />
  20. <meta name="description" content="How big are they anyway?" />
  21. <meta property="og:title" content="Macrovision" />
  22. <meta property="og:description" content="How big are they anyway?" />
  23. <meta property="og:image" content="https://crux.sexy/images/macrovision.png" />
  24. <link rel="icon" href="https://crux.sexy/images/macrovision.ico">
  25. </head>
  26. <body class="toggle-bottom-name toggle-entity-name">
  27. <div id="help">
  28. <h1>Discord</h1>
  29. <p>
  30. <ul>
  31. <li><a href="https://discord.gg/vqcKVV6">Join the Discord server!</a></li>
  32. </ul>
  33. </p>
  34. <h1>Navigation</h1>
  35. <p>
  36. <ul>
  37. <li>Scroll to zoom in/out. Entities will go off the top of the screen if they're in the air and you zoom in!</li>
  38. <li>Alt-scroll to zoom in/out and preserve positions on the screen.</li>
  39. <li>Shift-scroll with an entity selected to scale it.</li>
  40. </ul>
  41. </p>
  42. <h1>Adding/removing entities</h1>
  43. <p>
  44. <ul>
  45. <li>Drag something to the top of the screen to delete it, or press the delete key</li>
  46. </ul>
  47. </p>
  48. <button id="close-help">Close</button>
  49. </div>
  50. <div id="menubar">
  51. <span class="menubar-group">
  52. <button id="menu-clear">Clear</button>
  53. </span>
  54. <span class="menubar-group">
  55. <button id="menu-order-height">Order by height</button>
  56. </span>
  57. <span class="menubar-group">
  58. <button id="menu-export">Export</button>
  59. <button id="menu-save">Save</button>
  60. <button id="menu-load">Load</button>
  61. </span>
  62. <span class="menubar-group" id="spawners">
  63. </span>
  64. </span>
  65. <span class="menubar-group" id="scenes">
  66. <button id="load-scene">Load</button>
  67. <select id="scene-choices">
  68. </select>
  69. </span>
  70. <span class="menubar-group">
  71. <button id="open-help">Help</button>
  72. </span>
  73. </div>
  74. <div id="main-area">
  75. <div id="options">
  76. <div class="options-header">World options</div>
  77. <span id="options-world">
  78. <div class="options-label">
  79. World height
  80. </div>
  81. <div class="options-row">
  82. <input class="options-field-numeric" type="number" id="options-height-value" min="1" value="10">
  83. <select class="options-field-unit" id="options-height-unit">
  84. </select>
  85. </div>
  86. <div class="options-row">
  87. <button class="options-button" id="options-world-fit">Fit to entities</button>
  88. </div>
  89. <div class="options-row">
  90. <label class="switch">
  91. <input type="checkbox" id="options-world-autofit">
  92. <span class="switch-label">Auto-size world</span>
  93. </label>
  94. </div>
  95. <div class="options-label">
  96. Auto-sizing mode
  97. </div>
  98. <div class="options-row">
  99. <select class="options-selector" id="options-world-autofit-mode">
  100. <option value="max">Max</option>
  101. <option value="arithmetic mean">Arithmetic mean</option>
  102. <option value="geometric mean">Geometric mean</option>
  103. </select>
  104. </div>
  105. </span>
  106. <div class="options-header">Entity options</div>
  107. <div class="options-label">
  108. Active view
  109. </div>
  110. <select class="options-selector" id="entity-view"></select>
  111. <div class="options-block" id="options-entity-defaults">
  112. </div>
  113. <span id="options-entity">
  114. </span>
  115. <div class="options-header">View options</div>
  116. <span id="options-view">
  117. </span>
  118. <div class="options-header">Attribution</div>
  119. <span id="options-attribution">
  120. <div class="options-label">
  121. Authors
  122. </div>
  123. <span id="options-attribution-authors">
  124. </span>
  125. <div class="options-label">
  126. Source
  127. </div>
  128. <span id="options-attribution-source">
  129. </span>
  130. </span>
  131. </div>
  132. <div id="world">
  133. <div id="entities">
  134. </div>
  135. <canvas id="display">
  136. </canvas>
  137. </div>
  138. </div>
  139. </body>
  140. </html>