-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
127 lines (115 loc) · 6.83 KB
/
Copy pathindex.html
File metadata and controls
127 lines (115 loc) · 6.83 KB
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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.9.0/highlightjs-line-numbers.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Algorithm Visualizer</title>
</head>
<body>
<div class="navbar">
<div class="sidebar-btn">
<button class="nav-btn open"></button>
</div>
<div class="home-container">
<span class="home-btn">Home</span>
</div>
<div class="controls">
<div class="play-container">
<svg class="play-btn" viewBox="0 0 24.00 24.00" xmlns="http://www.w3.org/2000/svg" stroke="#d2d2d2">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M16.6582 9.28638C18.098 10.1862 18.8178 10.6361 19.0647 11.2122C19.2803 11.7152 19.2803 12.2847 19.0647 12.7878C18.8178 13.3638 18.098 13.8137 16.6582 14.7136L9.896 18.94C8.29805 19.9387 7.49907 20.4381 6.83973 20.385C6.26501 20.3388 5.73818 20.0469 5.3944 19.584C5 19.053 5 18.1108 5 16.2264V7.77357C5 5.88919 5 4.94701 5.3944 4.41598C5.73818 3.9531 6.26501 3.66111 6.83973 3.6149C7.49907 3.5619 8.29805 4.06126 9.896 5.05998L16.6582 9.28638Z" stroke="#d2d2d2" stroke-width="1.8240000000000003" stroke-linejoin="round"></path>
</g>
</svg>
</div>
<div class="step-range">
<div class="step-prev">
<svg class="prev-btn" viewBox="0 0 24.00 24.00" xmlns="http://www.w3.org/2000/svg" stroke="#d2d2d2" stroke-width="0.00024000000000000003" transform="matrix(-1, 0, 0, 1, 0, 0)">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#d2d2d2CCCCCC" stroke-width="0.288"></g>
<g id="SVGRepo_iconCarrier">
<path d="M9.343 18.657a1 1 0 0 1-.707-1.707l4.95-4.95-4.95-4.95a1 1 0 0 1 1.414-1.414l5.657 5.657a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 0 1-.707.293z"></path>
</g>
</svg>
</div>
<div class="steps">
<div class="step active"></div>
</div>
<div class="step-next">
<svg class="next-btn" viewBox="0 0 24.00 24.00" xmlns="http://www.w3.org/2000/svg" stroke="#d2d2d2" stroke-width="0.00024000000000000003">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#d2d2d2CCCCCC" stroke-width="0.288"></g>
<g id="SVGRepo_iconCarrier">
<path d="M9.343 18.657a1 1 0 0 1-.707-1.707l4.95-4.95-4.95-4.95a1 1 0 0 1 1.414-1.414l5.657 5.657a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 0 1-.707.293z"></path>
</g>
</svg>
</div>
<div class="progress">1/1</div>
</div>
<div class="speed-container">
<select class="speed">
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
<option value="1" selected>1</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="code-btn">
<button class="nav-btn open"></button>
</div>
</div>
<div class="app">
<div class="sidebar resizable-right">
<div class="cursor-resize-v cursor-resize-r"></div>
<div class="algorithms">
<p class="alg-name">Breadth-First Search</p>
<p class="alg-name">Depth-First Search</p>
<p class="alg-name">Dijkstra</p>
</div>
</div>
<div class="content resizable-left resizable-right">
<div class="cursor-resize-v cursor-resize-l"></div>
<div class="visualizer resizable-down">
<svg class="visual-container" viewBox="-200 -200 400 400">
<g class="node" transform="translate(-0,-0)">
<circle class="node-circle" r="40"></circle>
<text class="node-text">1</text>
</g>
<line class="edge" x1="0" y1="0" x2="400" y2="400"></line>
</svg>
<div class="cursor-resize-h cursor-resize-b"></div>
</div>
<div class="console-log resizable-up">
<div class="cursor-resize-h cursor-resize-t"></div>
<div class="name-bar">Console</div>
</div>
<div class="cursor-resize-v cursor-resize-r"></div>
</div>
<div class="code resizable-left">
<div class="cursor-resize-v cursor-resize-l"></div>
<pre><code class="language-cpp initial-code">#include <iostream>
using namespace std;
int main() {
cout << "Choose a algorithm on the sidebar and it's code will be displayed here." << endl;
return 0;
}
</code></pre>
</div>
</div>
<script src="script.js"></script>
<script>hljs.highlightAll();hljs.initLineNumbersOnLoad();</script>
</body>
</html>