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/buildings.js"></script>
  <script src="presets/landmarks.js"></script>
  <script src="presets/characters.js"></script>
  <script src="presets/objects.js"></script>
  <script src="presets/food.js"></script>
  <script src="presets/naturals.js"></script>
  <script src="presets/vehicles.js"></script>
  <script src="presets/cities.js"></script>
  <script src="presets/pokemon.js"></script>
  <script src="presets/scenes.js"></script>
  <script src="media/attribution.js"></script>
  <script src="macrovision.js"></script>
  <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">
</head>

<body class="toggle-bottom-name toggle-top-name toggle-scale">
  <div id="help">
    <h1>Discord</h1>
    <p>
      <ul>
        <li><a href="https://discord.gg/vqcKVV6">Join the Discord server!</a></li>
      </ul>
    </p>
    <h1>Navigation</h1>
    <p>
      <ul>
        <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>

        <li>Alt-scroll to zoom in/out and preserve positions on the screen.</li>
        
        <li>Shift-scroll with an entity selected to scale it.</li>
      </ul>
    </p>
    <h1>Adding/removing entities</h1>
    <p>
      <ul>
        <li>Drag something to the top of the screen to delete it, or press the delete key</li>
      </ul>
    </p>
    <h1>Adding your own character</h1>
    <p>
      <a href="https://docs.google.com/forms/d/1esagCHSNd1kvCFoTGfCacaHXe2L8dKalqgKEHqHgGuM/edit">Submit your stuff here!</a>
    </p>
    <button id="close-help">Close</button>
  </div>
  <div id="menubar">
    <span class="menubar-group">
      <button id="menu-toggle-sidebar">
        <i class="fas fa-chevron-circle-down rotate-backward transitions"></i>
        <span class="sr-only">Toggle Sidebar</span>
      </button>
      <button id="menu-fullscreen">
        <i class="fas fa-compress" ></i>
        <span class="sr-only">Fullscreen</span>
      </button>
    </span>
    <span class="menubar-group">
      <button id="menu-clear">
        <i class="fas fa-trash-alt"></i>
        <span class="sr-only">Clear</span>
      </button>
    </span>
    <span class="menubar-group">
      <button id="menu-order-height">
        <i class="fas fa-sort-numeric-up"></i>
        <span class="sr-only">Sort</span>
      </button>
    </span>
    <span class="menubar-group">
      <button id="menu-permalink">
        <i class="fas fa-link"></i>
        <span class="sr-only">Permalink</span>
      </button>
      <button id="menu-export">
        <i class="fas fa-share"></i>
        <span class="sr-only">Export</span>
      </button>
      <button id="menu-save">
        <i class="fas fa-download"></i>
        <span class="sr-only">Save</span>
      </button>
      <button id="menu-load">
        <i class="fas fa-upload"></i>
        <span class="sr-only">Load</span>
      </button>
    </span>
    <span class="menubar-group" id="spawners">

    </span>
  </span>
  <span class="menubar-group" id="scenes">
    <button id="load-scene">
      <i class="fas fa-cloud-upload-alt"></i>
        <span class="sr-only">Load Scene</span>
    </button>
    <select id="scene-choices">

    </select>
  </span>
    <span class="menubar-group">
      <button id="open-help">
        <i class="far fa-question-circle"></i>
        <span class="sr-only">Help</span>
      </button>
    </span>
  </div>
  <div id="main-area">
    <div id="options" class="">
      <div class="options-header">World options</div>
      <span id="options-world">
        <div class="options-label">
          World height
        </div>
        <div class="options-row">
          <input class="options-field-numeric" type="number" id="options-height-value" min="1" 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-row">
          <label class="switch">
            <input type="checkbox" id="options-world-autofit">
            <span class="switch-label">Auto-size world</span>
          </label>          
        </div>
        <div class="options-row">
          <input type="checkbox" id="options-show-extra">
          <label for="options-show-extra">Show extra options</label>
        </div>
        <div class="options-block options-block-optional">
          <div class="options-row">
            <input type="checkbox" id="options-world-show-names">
            <label for="options-world-show-names">Names over entities</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-bottom-names" checked="true">
            <label for="options-world-show-bottom-names">Names at bottom</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-top-names" checked="true">
            <label for="options-world-show-top-names">Arrows for very large entities</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-height-bars">
            <label for="options-world-show-height-bars">Height bars</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-entity-glow">
            <label for="options-world-show-entity-glow">Glowing edges</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-scale-sliders">
            <label for="options-world-show-scale-sliders">Scale sliders</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-bottom-cover">
            <label for="options-world-show-bottom-cover">Opaque ground</label>
          </div>
          <div class="options-row">
            <input type="checkbox" id="options-world-show-scale" checked="true">
            <label for="options-world-show-scale">Scale</label>
          </div>
        </div>

        <div class="options-label">
          Auto-sizing mode
        </div>
        <div class="options-row">
          <select class="options-selector" id="options-world-autofit-mode">
            <option value="max">Max</option>
            <option value="arithmetic mean">Arithmetic mean</option>
            <option value="geometric mean">Geometric mean</option>
          </select>
        </div>
      </span>
      <div class="options-header">Entity options</div>
      <div class="options-label">
        Ordering
      </div>
      <div class="options-two-buttons" id="options-ordering">
        <button id="options-order-back">Toward back</button>
        <div id="options-order-display"></div>
        <button id="options-order-forward">Toward front</button>
      </div>
      <div class="options-label">
        Active view
      </div>
      <select class="options-selector" id="entity-view"></select>
      <div class="options-label">
        Sizes
      </div>
      <div class="options-block" id="options-entity-defaults">
      </div>
      <span id="options-entity">
      </span>
      <div class="options-header">View options</div>
      <span id="options-view">
      </span>
      <div class="options-header">Attribution</div>
      <span id="options-attribution">
        <div class="options-label">
          Authors
        </div>
        <span id="options-attribution-authors">
        </span>
        <div class="options-label">
          Owners
        </div>
        <span id="options-attribution-owners">
        </span>
        <div class="options-label">
          Source
        </div>
        <span id="options-attribution-source">
        </span>
      </span>
      <a href="https://docs.google.com/forms/d/e/1FAIpQLScRC-okDZ3FtzDTkbqSrpj5_OGD-1Vl-VYizOK3QM6quus11g/viewform?usp=sf_link" class="options-banner">Submit your<br>character!</a>
    </div>
    <div id="world">
      <input type="range" step="0.001" min="0" max="2" value="1" class="floating-slider" id="slider-scale"/>
      <input type="range" step="0.001" min="0" max="2" value="1" class="floating-slider" id="slider-entity-scale"/>
      <div id="entities">

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

</html>