chemicalcrux
/
macrovision


			
				
					
						
						
							
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Macrovision</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="macrovision.css">
  <script src="https://kit.fontawesome.com/10a16c6083.js" crossorigin="anonymous"></script>
  <script src="math.min.js"></script>
  <script src="presets/characters.js"></script>
  <script src="presets/real-buildings.js"></script>
  <script src="presets/real-terrain.js"></script>
  <script src="presets/landmarks.js"></script>
  <script src="presets/species.js"></script>
  <script src="presets/objects.js"></script>
  <script src="presets/fiction.js"></script>
  <script src="presets/food.js"></script>
  <script src="presets/naturals.js"></script>
  <script src="presets/vehicles.js"></script>
  <script src="presets/buildings.js"></script>
  <script src="presets/clothing.js"></script>
  <script src="presets/pokemon.js"></script>
  <script src="presets/scenes.js"></script>
  <script src="presets/creatures.js"></script>
  <script src="presets/furniture.js"></script>
  <script src="media/attribution.js"></script>
  <script src="macrovision.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=0.75, user-scalable=0" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="How big are they anyway?" />
  <meta property="og:title" content="Macrovision" />
  <meta property="og:description" content="How big are they anyway?" />
  <meta property="og:image" content="https://crux.sexy/images/macrovision.png" />
  <link rel="icon" href="https://crux.sexy/images/macrovision.ico">
  <script async defer data-website-id="88057238-3ad6-483f-9c3e-8d1440450bcc" src="https://umami.crux.best/umami.js" data-domains="macrovision.crux.sexy,www.macrovision.crux.sexy"></script>
</head>

<body class="toggle-bottom-name toggle-top-name highlight-color">
  <script type="text/javascript">
    window.onerror = function(msg, url, line, col, error) {
      if (firsterror) {
        firsterror = false;
        alert("An error occured. If you're on a computer, hit F12 to open the developer tools, click the Console tab, and send the red text to chemicalcrux. If you're on mobile, screenshot this instead:\n\n" + msg + "\n" + url + "\n" + "line: " + line + "\n" + "col: " + col + "\nerror: " + error);
      }
    }
    window.onunhandledrejection = function(e) {
      if (firsterror) {
        firsterror = false;
        alert("An error occured. If you're on a computer, hit F12 to open the developer tools, click the Console tab, and send the red text to chemicalcrux. If you're on mobile, screenshot this instead:\n\n" + e.reason);
      }
    }
  </script>
  <input hidden id="file-upload-picker" type='file' multiple>
  <div class="popout-menu" id="sidebar-menu">

  </div>
  <div class="popout-menu" id="settings-menu">
    
  </div>
  <div class="popout-menu" id="filters-menu">
    <span class="menubar-group" id="search">
      <input id="search-box" type="text" placeholder="Search by name">
    </span>
  </div>
  <div class="popout-menu" id="info-menu">
    <a class="info-holder" target="_blank" href="https://www.notion.so/Macrovision-5c7f9377424743358ddf6db5671f439e">
      <i class="fas fa-question-circle"></i>
      <div>Help</div>
    </a>
    <a class="info-holder" target="_blank" href="https://www.notion.so/Submission-Process-311ca662c3d04776b16d4b8fb6ccce61">
      <i class="fas fa-paper-plane"></i>
      <div>Submit Your Character</div>
    </a>
    <a class="info-holder" target="_blank" href="https://ko-fi.com/P5P5ACDA">
      <i class="fas fa-donate"></i>
      <div>Donate</div>
    </a>
  </div>
  <div id="menubar">
    <span class="menubar-group">
      <button id="toggle-menu">
        <i class="fas fa-bars"></i>
      </button>
      <button id="toggle-settings">
        <i class="fas fa-cogs"></i>
      </button>
      <button id="toggle-filters">
        <i class="fas fa-search"></i>
      </button>
      <button id="toggle-info">
        <i class="fas fa-info-circle"></i>
      </button>
    </span>
    <span class="menubar-group" id="spawners">
    </span>
    <span class="menubar-group">
      <button id="copy-screenshot">
        <i class="fas fa-camera"></i>
      </button>
      <button id="save-screenshot">
        <i class="fas fa-download"></i>
      </button>
      <button id="open-screenshot">
        <i class="fas fa-external-link-alt"></i>
      </button>
    </span>
  </div>
  <div id="main-area">
    <div id="options" class="">
      <a class="submit-button" target="_blank" href="https://www.notion.so/Submission-Process-311ca662c3d04776b16d4b8fb6ccce61">
        <div>Submit Your Character!</div>
      </a>
      <h3 class="options-header">World Info</h3>
      <div id="options-world">
        <div class="options-label">
          World height
        </div>
        <div class="options-row">
          <input class="options-field-numeric" id="options-height-value" value="10">
          <select class="options-field-unit" id="options-height-unit">
          </select>
        </div>
        <div class="options-row">
          <button class="options-button" id="options-world-fit">Fit to entities</button>
        </div>
        <div class="options-label">
          Center
        </div>
        <div class="options-two-buttons" id="options-reset-pos">
          <button id="options-reset-pos-x"><i class="fas fa-arrows-alt-h"></i></button>
          <button id="options-reset-pos-y"><i class="fas fa-arrows-alt-v"></i></button>
        </div>
      </div>
      <div class="options-label">
        Selection:
      </div>
      <div class="options-row">
        <select id="options-selected-entity" class="options-selector">
          <option id="options-selected-entity-none">None</option>
        </select>
      </div>
      <div class="options-row">
        <button id="delete-entity" style="display: none">
          <i class="fas fa-trash-alt symbol-button"></i>
          <span class="sr-only">Delete Entity</span>
        </button>
      </div>
      <h3 class="options-header" id="entity-category-header">Entity</h3>
      <div class="options-category" id="entity-category">
        <span id="options-entity">
        </span>
        <div class="options-label" id="options-label-form">
          Form
        </div>
        <select class="options-selector" id="entity-form"></select>
        <div class="options-label">
          View
        </div>
        <select class="options-selector" id="entity-view"></select>
        <div class="options-label">
          Ordering
        </div>
        <div class="options-two-buttons" id="options-ordering">
          <button id="options-order-back"><i class="fas fa-sort-down"></i></button>
          <div id="options-order-display"></div>
          <button id="options-order-forward"><i class="fas fa-sort-up"></i></button>
        </div>
        <div class="options-row">
          <button class="options-button" id="options-flip">Flip</button>
        </div>
        <div class="options-label">
          Rotation
        </div>
        <div class="options-two-buttons" id="options-rotation">
          <button id="options-rotate-left"><i class="fas fa-undo"></i></button>
          <button id="options-rotate-right"><i class="fas fa-redo"></i></button>
        </div>
        <div class="options-label">
          Brightness
        </div>
        <div class="options-two-buttons" id="options-brightness">
          <button id="options-brightness-down"><i class="fas fa-moon"></i></button>
          <div id="options-brightness-display"></div>
          <button id="options-brightness-up"><i class="fas fa-sun"></i></button>
        </div>
        <div class="options-label">
          Sizes
        </div>
        <div class="options-block" id="options-entity-defaults">
        </div>
      </div>
      <h3 class="options-header" id="view-category-header">View</h3>
      <div class="options-category" id="view-category">
        <span id="options-view">
        </span>
      </div>
      <h3 class="options-header" id="attribution-category-header">Attribution</h3>
      <div id="options-attribution">
        <div class="options-label">
          Authors
        </div>
        <div id="options-attribution-authors">
        </div>
        <div class="options-label">
          Owners
        </div>
        <div id="options-attribution-owners">
        </div>
        <div class="options-label">
          Citations
        </div>
        <div id="options-attribution-citations">
        </div>
        <div class="options-label">
          Source
        </div>
        <div id="options-attribution-source">
        </div>
      </div>
    </div>
    <div id="world">
      <div class="extra-info">
      </div>
      <button class="scroll-button" id="zoom-in">
        <i class="fas fa-search-plus"></i>
      </button>
      <button class="scroll-button" id="zoom-out">
        <i class="fas fa-search-minus"></i>
      </button>
      <button class="scroll-button" id="scroll-left">
        <i class="fas fa-arrow-left"></i>
      </button>
      <button class="scroll-button" id="scroll-right">
        <i class="fas fa-arrow-right"></i>
      </button>
      <button class="scroll-button" id="scroll-up">
        <i class="fas fa-arrow-up"></i>
      </button>
      <button class="scroll-button" id="scroll-down">
        <i class="fas fa-arrow-down"></i>
      </button>
      <button class="scroll-button" disabled id="shrink">
        <i class="fas fa-compress-arrows-alt"></i>
      </button>
      <button class="scroll-button" disabled id="grow">
        <i class="fas fa-expand-arrows-alt"></i>
      </button>
      <button class="scroll-button" id="ruler">
        <i class="fas fa-ruler"></i>
      </button>
      <button class="scroll-button" disabled id="fit">
        <i class="fas fa-search"></i>
      </button>
      <canvas id="rulers">
      </canvas>
      <div id="entities">

      </div>
      <canvas id="display">
      </canvas>
      <div id="ground" class="bottom-cover"></div>
    </div>
  </div>

  <img id="webkitBugTest" src="./media/test-circle.svg" style="position:absolute; top: -1000px; width: 500px; height: 500px" />

</body>

</html>