-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
141 lines (138 loc) · 5.11 KB
/
index.html
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
---
layout: default
---
{% include header.html %}
<section class="container" id="base-section">
<div class="page-header">
<h4>
Audio Data
<small>
modify the data set you will be sorting.
preview how the data sounds and set playback options.
</small>
<span data-midi-export="base" class="btn btn-mini btn-info pull-right">Export As Midi <i class="icon-white icon-download-alt"></i></span>
<div class="clearfix"></div>
</h4>
</div>
<div class="row">
<div class="span4">
<ul id="settings" class="nav nav-tabs">
<li class="active"><a href="#audio" data-toggle="tab">Audio</a></li>
<li data-audio-type="waveform"><a href="#waveform" data-toggle="tab">Waveform</a></li>
<li data-audio-type="soundfont" class="hidden"><a href="#soundfont" data-toggle="tab">SoundFont</a></li>
<li><a href="#scale" data-toggle="tab">Scale</a></li>
<li class="hide"><a href="#save" data-toggle="tab">Save</a></li>
</ul>
<div id="settings-content" class="tab-content">
{% include pane-audio.html %}
{% include pane-waveform.html %}
{% include pane-soundfont.html %}
{% include pane-scale.html %}
{% include pane-save.html %}
</div>
</div>
<div class="span8">
<div id="base-player" class="player-buttons">
{% include player-buttons.html %}
<div class="mobile-break"> </div>
<span data-action="loop" class="btn btn-mini active"><i class="icon-repeat"></i> Loop?</span>
<div class="mobile-break"> </div>
<div class="pull-right">
<span class="position-current"></span>
/
<span class="position-max"></span>
</div>
</div>
<div id="base-chart"><svg id="base-svg"></svg></div>
<div class="position-container"></div>
<div id="base-buttons">
<span class="btn btn-mini btn-primary" data-action="sorted">Sorted</span>
<span class="btn btn-mini btn-primary" data-action="reverse">Reverse</span>
<span class="btn btn-mini btn-primary" data-action="randomUnique">Random (Unique)</span>
<span class="btn btn-mini btn-primary" data-action="randomDupes">Random (Dupes)</span>
<span class="btn btn-mini btn-primary" data-action="almostSorted">Almost Sorted</span>
<span class="btn btn-mini btn-primary" data-action="fewUnique">Few Unique</span>
</div>
</div>
</div>
</section>
<section class="container" id="sort-section">
<div class="page-header">
<h4>
Sorting
<small>
choose a sorting algorithm to visualize and
audibilize how the algorithm works.
</small>
<span data-midi-export="sort" class="btn btn-mini btn-info pull-right">Export As Midi <i class="icon-white icon-download-alt"></i></span>
<div class="clearfix"></div>
</h4>
</div>
<div class="row">
<div class="span3">
<div id="sort-options-header" class="clearfix">
<strong>Sort:</strong>
<div id="modal-sort-open" class="pull-right btn btn-info btn-mini pull-right">
<em id="sort-display"> </em>
<i class="icon-white icon-info-sign"></i>
</div>
<div class="clearfix" style="height:1px;overflow:hidden;float:none;"> </div>
</div>
<ul id="sort-options" class="nav nav-pills nav-stacked"></ul>
<div>
<div id="sort-autoplay" data-toggle="button" class="btn btn-mini">AutoPlay?</div>
<div id="add-algorithm-btn" class="pull-right btn btn-mini btn-info">
Add Algorithm
<i class="icon-white icon-plus-sign"></i>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="span1 text-center">
<div class="btn-group" data-toggle="buttons-radio" style="margin-bottom:10px;">
<button type="button" class="btn btn-mini sort-visualization active" data-visualization="bar"><i class="icon-signal"></i></button>
<button type="button" class="btn btn-mini sort-visualization" data-visualization="flat"><i class="icon-list"></i></button>
</div>
<div><strong>Position:</strong></div>
<span class="position-current"> </span>
<br />
<span class="position-max max-divider"> </span>
<div><strong>Compares:</strong></div>
<span class="compare-current"> </span>
<br />
<span class="compare-max max-divider"> </span>
<div><strong>Swaps:</strong></div>
<span class="swap-current"> </span>
<br />
<span class="swap-max max-divider"> </span>
</div>
<div class="span8">
<div id="sort-player" class="player-buttons">
<div class="pull-left">
c:
<span class="compare-current"></span>
/
s:
<span class="swap-current"></span>
</div>
<div class="mobile-break"> </div>
{% include player-buttons.html %}
<div class="mobile-break"> </div>
<span data-action="loop" class="btn btn-mini active"><i class="icon-repeat"></i> Loop?</span>
<div class="mobile-break"> </div>
<div class="pull-right">
<span class="position-current"></span>
/
<span class="position-max"></span>
</div>
</div>
<div id="sort-chart"><svg id="sort-svg"></svg></div>
<div class="position-container"></div>
</div>
</div>
</section>
{% include modal-add-algorithm.html %}
{% include modal-midi-export.html %}
{% include modal-sort.html %}
{% assign init_audio_sort = true %}
{% include footer.html %}