index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Many-body physics</title>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <style type="text/css">
    body { font: 17px/140% Arial, sans-serif; background: rgb(73, 73, 73); color: white; overflow: hidden; }
    ul { padding: 0 0 0 20px; }
    h1 { font: bold italic 30px/30px Georgia; text-align: center; }
    h2 { font: bold italic 20px/20px Georgia; padding-top: 10px; }
    canvas { position: absolute; top: 0; left: 0; }
    #help { position: absolute; top: 0; right: 0; bottom: 0; width: 25%; padding-right: 20px; overflow: auto; }
    html {user-select: none;}  
    </style>
    
    <body>
        <div id="help">
            <h1>Many-body physics</h1>
            <h2>Взаимодействие:</h2>
            <ul>
              <li>SPACE - добавляет много объектов</li>
              <li>Кнопка мыши - добавляет один новый объект</li>
              <li>WASD - управление скоростью объектов</li>
              <li>G - включает/выключает гравитацию</li>
              <li>F - "замораживает" объекты</li>
              <li>R - инвертирует скорости</li>
              <li>Q/E - замедляет/ускоряет объекты</li>
              <li>C/X - удаляет все/половину объектов</li>
              <li>T - добавляет поток объектов</li>
              <li>P - приостанавливает анимацию</li>
            </ul>
        </div>
    </body>
</html>