index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Particles</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script nomodule src="js/nomodule.js"></script>
</head>
<body>
    <div id="browser-not-supported">
        <h1>Oh dear!</h1>
        <p>This browser is too old-fashioned to view this page properly! Try Firefox 60+, Chrome 61+, Edge 16+, Opera 48+ or Safari 11+.</p>
    </div>

    <canvas id="view"
            width="800"
            height="450"
            >
    </canvas>

    <div id="constant-force-panel" class="panel panel-closed hide">
        <div class="panel-header">
            <h2>Constant force</h2>
            <button type="button" class="delete">Delete</button>
        </div>
        <div class="panel-settings">
            <label>
                <span class="label-text">Strength <span id="constant-force-strength-value">0</span></span>
                <input id="constant-force-strength" type="range" min="0" max="10000" step="100" value="0">
            </label>
            <label>
                <span class="label-text">Angle <span id="constant-force-angle-value">0</span></span>
                <input id="constant-force-angle" type="range" min="0" max="6.283" step="0.01" value="0">
            </label>
        </div>
        <button class="close" type="button">Close</button>
    </div>

    <div id="radial-force-panel" class="panel panel-closed hide">
        <div class="panel-header">
            <h2>Radial force</h2>
            <button type="button" class="delete">Delete</button>
        </div>
        <div class="panel-settings">
            <label>
                <span class="label-text">Mass <span id="radial-force-mass-value">0</span></span>
                <input id="radial-force-mass" type="range" min="-500" max="500" step="1" value="0">
            </label>
        </div>
        <button class="close" type="button">Close</button>
    </div>

    <div id="emitter-panel" class="panel panel-closed hide">
        <div class="panel-header">
            <h2>Emitter</h2>
            <button type="button" class="delete">Delete</button>
        </div>
        <div class="panel-settings">
            <label>
                <span class="label-text">Frequency <span id="emitter-frequency-value">60</span></span>
                <input id="emitter-frequency" type="range" min="0" max="500" step="1" value="60">
            </label>
            <label>
                <span class="label-text">Speed <span id="emitter-speed-value">100</span></span>
                <input id="emitter-speed" type="range" min="0" max="500" step="1" value="100">
            </label>
            <label>
                <span class="label-text">Angle <span id="emitter-angle-value">0</span></span>
                <input id="emitter-angle" type="range" min="0" max="6.283" step="0.01" value="0">
            </label>
            <label>
                <span class="label-text">Spread <span id="emitter-spread-value">1</span></span>
                <input id="emitter-spread" type="range" min="0" max="6.283" step="0.01" value="1">
            </label>
        </div>
        <button class="close" type="button">Close</button>
    </div>

    <div class="help">
        <h2>What is this?</h2>
        <p>A fun little particle emitter demo, with radial and constant forces.</p>
        <p>
            Click on emitters, radial or constant forces to select them, and have
            a play with their properties. Move them around by clicking and dragging.
        </p>
        <h2>Keyboard controls</h2>
        <dl>
            <dt><kbd>?</kbd> or <kbd>h</kbd></dt>
            <dd>Toggle this help</dd>
            <dt><kbd>e</kbd></dt>
            <dd>Add an emitter</dd>
            <dt><kbd>r</kbd></dt>
            <dd>Add a radial force</dd>
            <dt><kbd>c</kbd></dt>
            <dd>Add a constant force</dd>
            <dt><kbd>d</kbd> / <kbd>Delete</kbd></dt>
            <dd>Delete selected emitter or force</dd>
            <dt><kbd>-</kbd> / <kbd>+</kbd> (or <kbd>=</kbd>)</dt>
            <dd>Decrease/increase simulation speed</dd>
            <dt><kbd>↑</kbd>, <kbd>↓</kbd>, <kbd>←</kbd>, <kbd>→</kbd></dt>
            <dd>Move selected item</dd>
        </dl>
    </div>

    <script src="js/main.js" type="module"></script>
</body>
</html>