index.html 7.5 KB
Newer Older
J
Jason Park 已提交
1 2
<!DOCTYPE html>
<html lang="en">
N
nem035 已提交
3

J
Jason Park 已提交
4 5
<head>
    <meta charset="UTF-8">
J
Jason Park 已提交
6 7 8 9 10
    <meta name="description" content="Tool for visualizing algorithms."/>
    <meta property="og:title" content="Algorithm Visualizer"/>
    <meta property="og:description" content="Tool for visualizing algorithms."/>
    <meta property="og:image" content="img/image.png"/>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>
J
Jason Park 已提交
11 12
    <title>Algorithm Visualizer</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
N
nem035 已提交
13
    <link rel="stylesheet" href="public/algorithm_visualizer.min.css">
J
Jason Park 已提交
14
</head>
N
nem035 已提交
15

J
Jason Park 已提交
16
<body>
J
Jason Park 已提交
17 18 19 20 21 22 23 24
<div id="loading-slider">
    <div class="line"></div>
    <div class="break dot1"></div>
    <div class="break dot2"></div>
    <div class="break dot3"></div>
</div>
<nav>
    <button id="navigation">
J
Jason Park 已提交
25 26 27 28
        <h3>
            <span id="category"></span>
            <i class="fa fa-angle-right nav-arrow" aria-hidden="true"></i>
            <span id="algorithm"></span>
29
            <i class="fa fa-caret-down nav-dropdown" aria-hidden="true"></i>
J
Jason Park 已提交
30 31
        </h3>
    </button>
J
Jason Park 已提交
32 33 34 35
    <div class="top-menu-buttons">
        <div class="btn" id="btn_share">
            <div class="wrapper">
                <i class="fa fa-share" aria-hidden="true"></i> Share <input type="text" class="collapse" id="shared">
J
Jason Park 已提交
36 37
            </div>
        </div>
J
Jason Park 已提交
38 39
        <button id="btn_run">
            <i class="fa fa-play" aria-hidden="true"></i>
J
Jason Park 已提交
40
            <span class="btn-text"></span>
J
Jason Park 已提交
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
        </button>
        <button id="btn_prev">
            <i class="fa fa-chevron-left" aria-hidden="true"></i>
            <span class="btn-text">Prev</span>
        </button>
        <button id="btn_pause">
            <i class="fa fa-pause" aria-hidden="true"></i>
            <span class="btn-text"></span>
        </button>
        <button id="btn_next">
            <span class="btn-text">Next</span>
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </button>
        <div class="btn">
            <div class="wrapper">
                Interval: <input type="number" value="" id="interval"> sec
            </div>
N
nem035 已提交
58
        </div>
59 60 61 62 63 64
        <div class="btn" id="btn_fullscreen">
            <div class="wrapper">
                <i class="fa fa-arrows-alt"></i>
                <span class="btn-text">Fullscreen</span>
            </div>
        </div>
J
Jason Park 已提交
65 66 67
    </div>
</nav>
<section class="sidemenu active">
J
Jason Park 已提交
68 69 70 71
    <div class="search_bar_container">
        <i class="fa fa-search" aria-hidden="true"></i>
        <input type="text" id="search-bar" autofocus/>
    </div>
J
Jason Park 已提交
72 73 74
    <div id="list">
    </div>
    <div id="footer">
N
nem035 已提交
75 76
        <button id="scratch-paper"><i class="fa fa-fw fa-code"></i> Scratch Paper</button>
        <button id="documentation"><i class="fa fa-fw fa-book"></i> Tracer API</button>
N
nem035 已提交
77
        <button class="category open" id="powered-by">
J
Jason Park 已提交
78
            <i class="fa fa-fw fa-github"></i> Powered by ...
N
nem035 已提交
79
        </button>
J
Jason Park 已提交
80 81
        <div id="powered-by-list">
            <a href="https://github.com/jquery/jquery">
N
nem035 已提交
82
                <button class="indent">jquery/jquery</button>
J
Jason Park 已提交
83 84
            </a>
            <a href="https://github.com/ajaxorg/ace">
N
nem035 已提交
85
                <button class="indent">ajaxorg/ace</button>
J
Jason Park 已提交
86 87
            </a>
            <a href="https://github.com/jacomyal/sigma.js">
N
nem035 已提交
88
                <button class="indent">jacomyal/sigma.js</button>
J
Jason Park 已提交
89
            </a>
J
Jason Park 已提交
90
            <a href="https://github.com/chartjs/Chart.js">
N
nem035 已提交
91
                <button class="indent">chartjs/Chart.js</button>
J
Jason Park 已提交
92
            </a>
93 94 95
            <a href="https://github.com/Daniel15/babel-standalone">
                <button class="indent">Daniel15/babel-standalone</button>
            </a>
J
Jason Park 已提交
96
            <a href="https://github.com/showdownjs/showdown">
N
nem035 已提交
97
                <button class="indent">showdownjs/showdown</button>
J
Jason Park 已提交
98
            </a>
J
Jason Park 已提交
99
            <a href="https://github.com/FortAwesome/Font-Awesome">
N
nem035 已提交
100
                <button class="indent">FortAwesome/Font-Awesome</button>
J
Jason Park 已提交
101 102
            </a>
            <a href="https://github.com/simonwhitaker/github-fork-ribbon-css">
N
nem035 已提交
103
                <button class="indent">simonwhitaker/github-fork-ribbon-css</button>
104 105
            </a>
        </div>
J
Jason Park 已提交
106 107 108 109 110 111 112
    </div>
    <a class="github-fork-ribbon left-bottom" href="http://github.com/parkjs814/AlgorithmVisualizer"
       title="Fork me on GitHub">Fork me on GitHub</a>
</section>
<div class="workspace">
    <div class="viewer_container">
        <section class="tab_bar">
J
Jason Park 已提交
113
            <button id="btn_doc" data-target="#tab_doc">Tracer API</button>
J
Jason Park 已提交
114 115 116 117 118 119
            <button class="active" id="btn_desc" data-target="#tab_desc">Description</button>
            <button id="btn_trace" data-target="#tab_module">Trace</button>
        </section>
        <section class="tab_container">
            <div class="tab" id="tab_doc">
                <div class="wrapper">
J
Jason Park 已提交
120
                </div>
J
Jason Park 已提交
121 122 123
            </div>
            <div class="tab active" id="tab_desc">
                <div class="wrapper">
N
nem035 已提交
124
                </div>
J
Jason Park 已提交
125 126 127 128
            </div>
            <div class="tab module_container" id="tab_module">
            </div>
        </section>
J
Jason Park 已提交
129
    </div>
K
sandbox  
Kevin Nadro 已提交
130 131
    <div class="sandbox_container">
        <div>
K
Kevin Nadro 已提交
132 133 134 135 136
            <div class="inputContainer">
                <div>
                # of Rows:
                <input class="inputs"id="numRows" type="number" value="5">
                </div>
K
sandbox  
Kevin Nadro 已提交
137

K
Kevin Nadro 已提交
138 139 140 141
                <div>
                # of Columns:
                <input class="inputs"id="numColumns" type="number" value="5">
                </div>
K
more!  
Kevin Nadro 已提交
142

K
Kevin Nadro 已提交
143 144 145 146
                <div>
                Tracer Name:
                <input class="inputs"id="tracerName" type="text" value="default">
                </div>
147 148
            </div>

K
more!  
Kevin Nadro 已提交
149
            <div>
K
Kevin Nadro 已提交
150 151
                <button class='sb-button' id="button-2DMatrix">Create 2DMatrix</button>
                <button class='sb-button' id="button-generateJS">Generate Javascript</button>
K
sandbox  
Kevin Nadro 已提交
152 153 154
            </div>
        </div>
    </div>
J
Jason Park 已提交
155 156 157 158
    <div class="editor_container">
        <section class="files_bar">
            <button class="btn-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
            <button class="btn-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
N
nem035 已提交
159
            <div class="wrapper"></div>
J
Jason Park 已提交
160 161 162 163 164 165 166 167 168 169
        </section>
        <section class="explanation_container">
            <span id="explanation"></span>
        </section>
        <section class="data_container">
            <pre id="data"></pre>
        </section>
        <section class="code_container">
            <pre id="code"></pre>
        </section>
J
Jason Park 已提交
170
    </div>
J
Jason Park 已提交
171 172 173 174
</div>
<div class="toast_container">
</div>
<script src="public/lib/jquery-2.2.3.min.js"></script>
J
show md  
Jason Park 已提交
175
<script src="public/lib/showdown.min.js"></script>
J
Jason Park 已提交
176 177
<script src="public/lib/ace/ace.js"></script>
<script src="public/lib/ace/ext-language_tools.js"></script>
178
<script src="public/lib/babel.min.js"></script>
J
show md  
Jason Park 已提交
179 180
<script src="public/lib/sigma/sigma.min.js"></script>
<script src="public/lib/sigma/plugins/sigma.plugins.dragNodes.min.js"></script>
J
Jason Park 已提交
181 182 183 184 185 186 187 188 189
<script src="public/lib/Chart-2.1.3.min.js"></script>
<script src="public/algorithm_visualizer.min.js"></script>
<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
        a = s.createElement(o),
J
Jason Park 已提交
190
                m = s.getElementsByTagName(o)[0];
J
Jason Park 已提交
191 192 193 194 195 196 197
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
    ga('create', 'UA-78128848-1', 'auto');
    ga('send', 'pageview');
</script>
J
Jason Park 已提交
198
</body>
N
nem035 已提交
199

200
</html>