index.html


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="stylesheets/main.css">
    <title>Chromatic</title>
  </head>
  <body>
    <div id="modal">
      <h1>Chromatic</h1>
      <p>Created By: Travis Nguyen</p>
    </div>

    <div id="options">
      <h2>Number of Particles</h2>
      <form id="particle-form">
        <input type="range" name="particlesInput" id="particle-input" value="300" min="100" max="500" oninput="particlesOutput.value = particlesInput.value"></input>
        <output name="particlesOutput" id="particle-output">300</output>
      </form>

      <label>Effects:
        <input type='checkbox' id="bubble" checked>Bubble</input>
        <input type='checkbox' id="repulse">Repulse</input>
        <input type='checkbox' id="edges">Edges</input>
      </label>
    </div>

    <canvas id='canvas-container'>
    </canvas>
  </body>
  <script src="./js/bundle.js"></script>
</html>