plot/index.html at main · zackg2/plot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
  <head>
    <title>Benjie's Plotter</title>
    <meta
      name="description"
      content="A simple code playground to plot the result of a function onto a canvas"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>Benjie's Plot</header>
    <div class="main">
      <div class="left">
        <section class="controlPanel">
          <input type="text" id="name" value="-" />
          <span>
            <input
              type="range"
              id="slider"
              value="256"
              min="2"
              max="1024"
              step="2"
            />
            <span id="sliderValue">256</span>
          </span>
          <span>
            <label>
              <input type="checkbox" id="zeroAtCenter" />
              Zero at center
            </label>
          </span>
          <span>
            <label>
              <input type="checkbox" id="animate" />
              Animate
            </label>
          </span>
        </section>
        <section class="canvasContainer">
          <canvas width="1" height="1" id="canvas"></canvas>
        </section>
        <article class="codeContainer">
          <textarea id="code"></textarea>
        </article>
      </div>
      <aside class="sketchesContainer">
        <ul id="builtinSketches"></ul>
        <ul id="sketches"></ul>
        <button id="new">+ new</button>
      </aside>
    </div>
    <footer>
      <div id="errorText"></div>
      <div class="copyright">&copy; @Benjie 2023</div>
    </footer>
    <script src="script.js"></script>
  </body>
</html>