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/buildings.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/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="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">
</head>

<body class="toggle-bottom-name toggle-top-name toggle-scale">
  <div id="help">
    <h1>Navigation</h1>
    <p>
      <ul>
        <li>Drag to move entities</li>
        <li>Alt-drag to ignore snapping and bounds</li>
      </ul>
    </p>
    <p>
      <ul>
        <li>Scroll to zoom.</li>
        <li>Alt-scroll to zoom preserve positions on the screen.</li>
        <li>Shift-scroll with an entity selected to scale it.</li>
        <li>Shift-scroll without a selection to move horizontally.</li>
      </ul>
    </p>
    <h1>Adding/removing entities</h1>
    <p>
      <ul>
        <li>Add new entities with the selection boxes at the top</li> 
        <li>Remove the selected entity with the Delete key</li>
        <li>Alternatively, drag them off the top of the screen</li>
      </ul>
    </p>
    <h1>Sharing</h1>
    <p>
      <ul>
        <li>You can copy a screenshot to your clipboard or save an image to your device in the topbar</li>
        <li>To share a scene with others, you can get a link with the Permalink button</li>
        <li>Alternatively, you can export the scene as text, or import one from your clipboard</li>
        <li>You can also save one scene to your browser and load it later</li>
        <li>The current scene is autosaved when closing the tool. You can reload it from the menu.</li>
      </ul>
    </p>
    <button id="close-help">Close</button>
  </div>
  <div id="popout-menu">
    
  </div>
  <div id="menubar">
    <button id="toggle-menu">
      <i class="fas fa-bars"></i>
    </button>
    <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>
    </span>
    <span class="menubar-group" id="spawners">

    </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="">
      <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>
      <h3 class="options-header">World Info</h3>
      <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">
          <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-autofit">
            <label for="options-world-autofit">Auto-size world</label>
          </div>
          <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-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>
      </span>
      <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">
          <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 Options</h3>
      <div class="options-category" id="entity-category">
        <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">Toward back</button>
          <div id="options-order-display"></div>
          <button id="options-order-forward">Toward front</button>
        </div>
        <div class="options-label">
          Sizes
        </div>
        <div class="options-block" id="options-entity-defaults">
        </div>
        <span id="options-entity">
        </span>
      </div>
      <h3 class="options-header" id="view-category-header">View Options</h3>
      <div class="options-category" id="view-category">
        <span id="options-view">
        </span>
      </div>
      <h3 class="options-header" id="attribution-category-header" >Source</h3>
      <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>
      <h3 class="options-header" id="scenes-category-header">Preset Scenes</h3>
      <span id="options-scenes">
        <div class="options-row">
          <select class="options-field-picker" id="scene-choices">

          </select>
        </div>
        <div class="options-row">
          <button id="load-scene">
            <i class="fas fa-play-circle symbol-button"></i>
              <span class="sr-only">Load Scene</span>
          </button>
        </div>
      </span>
    </div>
    <div id="world">
      <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" disabled="true" id="shrink">
        <i class="fas fa-compress-arrows-alt"></i>
      </button>
      <button class="scroll-button" disabled="true" id="grow">
        <i class="fas fa-expand-arrows-alt"></i>
      </button>
      <button class="scroll-button" disabled="true" id="fit">
        <i class="fas fa-search"></i>
      </button>
      <div id="entities">

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

</html>