sort/index.html at master · MathisBullinger/sort · 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
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sort</title>
    <link rel="stylesheet" href="style/master.css" />
    <script async defer src="src/index.ts"></script>
  </head>
  <body>
    <canvas></canvas>
    <form id="menu">
      <div class="line">
        <label for="algorithm">Algorithm: </label>
        <select id="algorithm"></select>
      </div>
      <div class="line">
        <label for="size">Length of list: </label>
        <input type="number" id="size" value="50" />
      </div>
      <div class="line">
        <label for="reads">reads&thinsp;/&thinsp;sec: </label>
        <input type="number" id="reads" value="20" />
      </div>
      <div class="line">
        <label for="list">List: </label>
        <select id="list">
          <option>linear</option>
          <option>random</option>
          <option>reversed</option>
        </select>
      </div>
      <button type="submit">Go</button>
    </form>
    <div class="social">
      <a
        href="https://github.com/MathisBullinger/sort"
        target="_blank"
        rel="noopener noreferrer"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 1024 1024"
          fill="none"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
            transform="scale(64)"
            fill="#fff"
          />
        </svg>
      </a>
    </div>
    <figure>
      <q
        cite="https://www.reddit.com/user/sparkysparks666"
        >I didn't understand Quicksort before I watched this animation.
        <br />
        After watching I still don't understand it.</q
      >
      <figcaption>
        <a
          rel="noreferrer noopener"
          target="__blank"
          href="https://www.reddit.com/r/InternetIsBeautiful/comments/s7ow82/watch_and_listen_to_sorting_algorithms_working/htc49h1/"
          >sparkysparks666</a
        >
      </figcaption>
    </figure>
  </body>
</html>