Made of little things.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="dark light" />
    <title>Powder Tool V600Billion</title>
  </head>
  <body class="starting">
    <header id="topbar">
      <div class="brand">
        <span class="brand-mark" data-icon="atom"></span>
        <span class="brand-name">Powder Tool</span>
        <span class="brand-edition">V600Billion</span>
      </div>
      <div class="group scene-group">
        <button type="button" id="scenes-open" class="btn accent" data-icon="scenes" data-game><span class="label-text">Scenes</span></button>
        <span id="scene-name" class="scene-name" title="The scene on screen">Sandbox</span>
        <button type="button" id="scene-restart" class="icon-btn" data-icon="restart" title="Start the scene again" aria-label="Start the scene again" data-game hidden></button>
      </div>
      <div class="group transport">
        <button type="button" id="pause" class="icon-btn" data-icon="pause" title="Pause (Space)" aria-label="Pause" data-game></button>
        <button type="button" id="step" class="icon-btn" data-icon="step" title="Next frame (F)" aria-label="Next frame" data-game></button>
        <button type="button" id="undo" class="icon-btn" data-icon="undo" title="Undo (Ctrl+Z)" aria-label="Undo" data-game></button>
        <button type="button" id="redo" class="icon-btn" data-icon="redo" title="Redo (Ctrl+Y)" aria-label="Redo" data-game></button>
        <button type="button" id="clear" class="icon-btn" data-icon="trash" title="Erase everything" aria-label="Erase everything" data-game></button>
      </div>
      <div class="group online">
        <button type="button" id="open" class="btn" data-icon="open" title="Find and open saves" aria-label="Open" data-game><span class="label-text">Open</span></button>
        <button type="button" id="save" class="btn" data-icon="save" title="Save this simulation" aria-label="Save" data-game><span class="label-text">Save</span></button>
        <button type="button" id="account" class="icon-btn" data-icon="user" title="Sign in to share saves" aria-label="Sign in" data-game></button>
        <button type="button" id="settings" class="icon-btn" data-icon="settings" title="The game's settings" aria-label="Settings" data-game></button>
        <div class="menu-wrap">
          <button type="button" id="more" class="icon-btn" data-icon="more" title="More" aria-label="More" aria-haspopup="true" aria-expanded="false" data-game></button>
          <div id="more-menu" class="menu" role="menu" hidden>
            <button type="button" role="menuitem" data-action="quick-save" data-icon="save">Update this save</button>
            <button type="button" role="menuitem" data-action="reload" data-icon="restart">Reload the save</button>
            <button type="button" role="menuitem" data-action="vote-up" data-icon="up">Vote up</button>
            <button type="button" role="menuitem" data-action="vote-down" data-icon="down">Vote down</button>
            <button type="button" role="menuitem" data-action="tags" data-icon="tag">Tags</button>
            <button type="button" role="menuitem" data-action="render" data-icon="view">Renderer options</button>
            <button type="button" role="menuitem" data-action="element-search" data-icon="elements">Element search</button>
            <button type="button" role="menuitem" data-action="console" data-icon="console">Lua console</button>
            <button type="button" role="menuitem" data-action="keys" data-icon="keys">Keyboard shortcuts</button>
            <button type="button" role="menuitem" data-action="about" data-icon="info">About, license and source</button>
          </div>
        </div>
      </div>
    </header>

    <aside id="palette" aria-label="Elements and tools">
      <div class="picked">
        <button type="button" class="slot" id="slot-0" title="Drawn with the left mouse button" data-game>
          <span class="swatch"></span><span class="slot-text"><small>Left</small><b>…</b></span>
        </button>
        <button type="button" id="swap" class="icon-btn" data-icon="swap" title="Swap left and right" aria-label="Swap left and right" data-game></button>
        <button type="button" class="slot" id="slot-1" title="Drawn with the right mouse button" data-game>
          <span class="swatch"></span><span class="slot-text"><small>Right</small><b>…</b></span>
        </button>
      </div>
      <label class="search">
        <span data-icon="search"></span>
        <input id="tool-search" type="search" placeholder="Search elements" autocomplete="off" spellcheck="false" aria-label="Search elements" />
      </label>
      <nav id="sections" aria-label="Categories"></nav>
      <div id="tools" class="tools" aria-label="Elements"></div>
      <div id="paint" class="paint" hidden>
        <label>Colour <input id="paint-colour" type="color" value="#ff5a36" /></label>
        <label>Opacity <input id="paint-alpha" type="range" min="0" max="255" value="255" /></label>
      </div>
      <p class="palette-hint">Click: left button · Right click: right button</p>
    </aside>

    <main id="stage">
      <div id="caption" class="caption"><b id="caption-title">Sandbox</b><span id="caption-hint"></span></div>
      <div id="room">
        <div id="viewport">
          <canvas id="canvas" tabindex="-1" aria-label="The Powder Toy"></canvas>
        </div>
      </div>
      <p id="status" role="status">Loading The Powder Toy…</p>
    </main>

    <footer id="bottombar">
      <div class="group brush">
        <span class="label">Brush</span>
        <div class="seg" role="group" aria-label="Brush shape">
          <button type="button" data-brush="0" data-icon="circle" title="Round brush" aria-label="Round brush" data-game></button>
          <button type="button" data-brush="1" data-icon="square" title="Square brush" aria-label="Square brush" data-game></button>
          <button type="button" data-brush="2" data-icon="triangle" title="Triangle brush" aria-label="Triangle brush" data-game></button>
        </div>
        <input id="brush-size" type="range" min="0" max="60" value="4" aria-label="Brush size" data-game />
        <output id="brush-size-value" for="brush-size">4</output>
      </div>
      <label class="group"><span class="label">View</span>
        <select id="view" title="Display mode" data-game>
          <option value="4">Fire</option>
          <option value="7">Fancy</option>
          <option value="6">Heat</option>
          <option value="11">Dynamic heat</option>
          <option value="9">Heat gradient</option>
          <option value="2">Pressure</option>
          <option value="1">Velocity</option>
          <option value="0">Air flow</option>
          <option value="12">Vorticity</option>
          <option value="3">Persistent</option>
          <option value="5">Blob</option>
          <option value="10">Life gradient</option>
          <option value="8">Nothing</option>
        </select>
      </label>
      <label class="group"><span class="label">Gravity</span>
        <select id="gravity" title="Gravity" data-game>
          <option value="0">Down</option>
          <option value="1">Off</option>
          <option value="2">Radial</option>
        </select>
      </label>
      <label class="group"><span class="label">Air</span>
        <select id="air" title="Air" data-game>
          <option value="0">On</option>
          <option value="1">No pressure</option>
          <option value="2">No velocity</option>
          <option value="3">Off</option>
          <option value="4">Frozen</option>
        </select>
      </label>
      <label class="group"><span class="label">Edges</span>
        <select id="edges" title="What happens at the edges" data-game>
          <option value="0">Open</option>
          <option value="1">Walls</option>
          <option value="2">Wrap</option>
        </select>
      </label>
      <div class="group toggles">
        <button type="button" class="chip" id="ambient" aria-pressed="false" title="Heat spreads through the air" data-game>Ambient heat</button>
        <button type="button" class="chip" id="newtonian" aria-pressed="false" title="Matter attracts matter" data-game>Newtonian gravity</button>
        <button type="button" class="chip" id="decorations" aria-pressed="true" title="Show painted colours" data-game>Paint</button>
      </div>
      <div class="group stats"><span id="parts">0</span>&nbsp;particles</div>
    </footer>

    <dialog id="scenes" aria-labelledby="scenes-title">
      <div class="dialog-head">
        <div>
          <h2 id="scenes-title">Scenes</h2>
          <p>Ready-made experiments to start from. Loading one replaces what is on screen; Undo brings it back.</p>
        </div>
        <button type="button" class="icon-btn" data-close data-icon="close" aria-label="Close"></button>
      </div>
      <div id="scene-grid" class="scene-grid"></div>
    </dialog>

    <dialog id="about" aria-labelledby="about-title">
      <div class="dialog-head">
        <div>
          <h2 id="about-title">Powder Tool V600Billion</h2>
          <p>The Powder Toy 100.1.400, by The Powder Toy contributors, built for the web without threads and given this page of its own.</p>
        </div>
        <button type="button" class="icon-btn" data-close data-icon="close" aria-label="Close"></button>
      </div>
      <div class="about">
        <p>This is free software under the GNU General Public License, version 3 (GPL-3.0): you may run it, study it, share it and change it under that license. It comes with no warranty, to the extent permitted by law.</p>
        <p>Its complete source, with the changes to The Powder Toy, how the page is built and the licenses of the libraries inside (Lua, FFTW, JsonCpp, SDL2, zlib, bzip2, libpng), is public on napplet.soy: every release there is a Git repository whose <code>source/</code> builds exactly its page.</p>
        <p class="about-source"><code>https://git.napplet.soy/npub1fllw8kw0thjj55wds0uugcnp5kej2nfxd36eruq39d56wwz8r44q5q78wj/powder-toy.git</code></p>
        <div class="about-links">
          <button type="button" class="btn" data-link="https://git.napplet.soy/npub1fllw8kw0thjj55wds0uugcnp5kej2nfxd36eruq39d56wwz8r44q5q78wj/powder-toy.git" data-icon="open">Source code</button>
          <button type="button" class="btn" data-link="https://www.gnu.org/licenses/gpl-3.0.html" data-icon="info">The GPL-3.0</button>
          <button type="button" class="btn" data-link="https://github.com/The-Powder-Toy/The-Powder-Toy" data-icon="atom">The Powder Toy</button>
        </div>
      </div>
    </dialog>

    <dialog id="keys" aria-labelledby="keys-title">
      <div class="dialog-head">
        <div>
          <h2 id="keys-title">Keyboard shortcuts</h2>
          <p>The game's own keys, with the mouse over the simulation.</p>
        </div>
        <button type="button" class="icon-btn" data-close data-icon="close" aria-label="Close"></button>
      </div>
      <dl class="keys">
        <dt>Space</dt><dd>Pause and resume</dd>
        <dt>F</dt><dd>Next frame while paused</dd>
        <dt>Mouse wheel, [ ]</dt><dd>Brush size</dd>
        <dt>Tab</dt><dd>Brush shape</dd>
        <dt>Shift + drag</dt><dd>Draw a line</dd>
        <dt>Ctrl + drag</dt><dd>Draw a box</dd>
        <dt>Ctrl + Shift + click</dt><dd>Flood fill</dd>
        <dt>Alt + click</dt><dd>Pick the element under the mouse</dd>
        <dt>Z</dt><dd>Zoom window (click to place it)</dd>
        <dt>C / X / V</dt><dd>Copy, cut, paste an area (Ctrl)</dd>
        <dt>S, K, L</dt><dd>Save a stamp, the stamp library, the last stamp</dd>
        <dt>1 … 0</dt><dd>Display modes</dd>
        <dt>Ctrl + Z, Ctrl + Y</dt><dd>Undo, redo</dd>
        <dt>E</dt><dd>Element search</dd>
        <dt>U, N, Y</dt><dd>Ambient heat, Newtonian gravity, air mode</dd>
        <dt>G</dt><dd>Grid</dd>
        <dt>`</dt><dd>Lua console</dd>
        <dt>H, D</dt><dd>Information on screen, debug information</dd>
      </dl>
    </dialog>

    <div id="toasts" aria-live="polite"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>