algorithm-visualizer/index.html at master · iamhimateja/algorithm-visualizer · 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en" class="h-100">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
  <link rel="stylesheet" href="styles/dashboard.css" />
  <title>Algorithm Visualizer</title>
</head>

<body class="d-flex flex-column h-100">
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand" href="javascript:void(0)" onclick="location.reload();">Algorithm Visualizer</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navBarCollapse"
      aria-controls="navBarCollapse" aria-expanded="false">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navBarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link algorithm_link" data-alg-type="Search" data-strategy="Linear" href="#">Linear Search</a>
        </li>
        <li class="nav-item">
          <a class="nav-link algorithm_link" data-alg-type="Search" data-strategy="Binary" href="#">Binary Search</a>
        </li>
        <li class="nav-item">
          <a class="nav-link algorithm_link" data-alg-type="Sort" data-strategy="Selection" href="#">Selection Sort</a>
        </li>
        <li class="nav-item">
          <a class="nav-link algorithm_link" data-alg-type="Sort" data-strategy="Bubble" href="#">Bubble Sort</a>
        </li>
      </ul>
      <div class="form-inline my-2 my-md-0">
        <span id="speed" data-seconds="1000" title="speed">1×</span>
        <div class="form-group mx-sm-3">
          <input type="number" name="dataset_size" id="dataset_size" placeholder="Enter size of dataset" value="20"
            class="form-control" min="2" max="100">
        </div>
        <button type="button" id="generate" class="btn btn-primary">Generate</button>
      </div>
    </div>
  </nav>
  <div class="container-fluid">
    <div class="row justify-content-md-center">
      <main role="main" class="col" id="visualizer_container">
        <div
          class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
          <h1 class="h2 algorithm_name"></h1>
        </div>
        <div class="container-fluid">
          <div class="row search_form">
            <div class="col">
              <div class="input-group mb-3 mt-3">
                <input type="number" class="form-control" id="elToFind" placeholder="Enter search element"
                  aria-label="Enter search element">
                <div class="input-group-append">
                  <button class="btn btn-primary" type="button" id="search_button">Search</button>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div id="code_wrap" class="minimized">
                <h6 class="m-0 ml-3 text-white program_heading"><span class="algorithm_name"></span>'s program.</h6>
                <span class="resizer">
                  <span class="plus"></span>
                </span>
                <div id="code_block"></div>
              </div>
            </div>
          </div>
          <div class="row visual_area">
            <div class="col-md-12">
              <div class="bars hide"></div>
              <div class="array_wrap"></div>
            </div>
            <div class="col text-right">
              <button type="button" id="sort" class="btn btn-primary btn-sm">Sort</button>
            </div>
          </div>

          <div class="row result_area">
            <div class="col">
              <div id="result"></div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>

  <script src="scripts/app.js"></script>
</body>

</html>