Algorithm/index.html at master · qiawu/Algorithm · 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
<!DOCTYPE html>
<html lang="en" ng-app="Algorithm">

<head>
    <meta charset="UTF-8">
    <title>Algorithm</title>
    <link rel="stylesheet" href="web/main.css">
    <link rel="stylesheet" href="web/css/circle.css">
    <link rel="stylesheet" href="web/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="web/bootstrap/bootstrap-toggle.min.css">
    <link rel="stylesheet" href="web/bootstrap/bootstrap-theme-paper.min.css">
</head>

<body>

    <canvas id="canvas" width=10 height=10></canvas>

    <div class="container-fluid">

        <form class="form-horizontal col-md-12">
            <fieldset>
                <div class="form-group">
                    <label for="input" class="col-md-4 control-label">input</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="input" placeholder="input data">
                    </div>
                </div>
                <div class="form-group">
                    <label for="input" class="col-md-4 control-label">Algorithm</label>
                    <select id="algorithmList" class="col-md-4">
                        <option value="insertionsort">Insertion Sort</option>
                        <option value="mergesort">Merge Sort</option>
                        <option value="quicksort">Quick Sort</option>
                        <option value="heapsort">Heap Sort</option>
                        <option value="bstSort">BST Sort</option>
                        <option value="graphDFS">Graph DFS</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="output" class="col-md-4 control-label">output</label>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="output" placeholder="output data">
                    </div>
                </div>
                <div class="form-group">
                    <label for="animationToggle" class="col-md-4 control-label">animation</label>
                    <div class="col-md-2">
                        <input id="animationToggle" checked type="checkbox">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-2 col-md-offset-4">
                        <button class="btn btn-primary" onclick="runAlgorithm(); return false">run</button>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12" id="animation">
                    </div>
                </div>
            </fieldset>
        </form>

    </div>

    <!-- algorithm files -->
    <script src="sorting/insertionSort.js"></script>
    <script src="sorting/mergeSort.js"></script>
    <script src="sorting/quickSort.js"></script>
    <script src="sorting/heapSort.js"></script>
    <script src="tree/tree.js"></script>
    <script src="graph/graph.js"></script>

    <!-- other files -->
    <script src="web/main.js"></script>
    <script src="visualization/utils.js"></script>
    <script src="visualization/animation.js"></script>
    <script src="web/bootstrap/jquery.min.js"></script>
    <script src="web/bootstrap/bootstrap.min.js"></script>
    <script src="web/bootstrap/bootstrap-toggle.min.js"></script>
    <script>
        $(function() {
            $('#animationToggle').bootstrapToggle();
        })
    </script>

</body>

</html>