algoscape/index.html at main · mohosy/algoscape · 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
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
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Algoscape | Sorting & Pathfinding Visualizer</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="shell">
    <header class="hero">
      <div class="hero-copy">
        <p class="eyebrow">Daily GitHub build · 2026-01-24</p>
        <h1>Algoscape</h1>
        <p class="lede">A compact, dependency-free lab to see how classic sorting and pathfinding algorithms behave in real time.</p>
        <div class="hero-actions">
          <button class="pill" data-scroll="#sorting">Jump to Sorting Lab</button>
          <button class="pill ghost" data-scroll="#pathfinding">Jump to Pathfinding Lab</button>
        </div>
        <div class="hero-meta">
          <span class="pill small">Vanilla JS</span>
          <span class="pill small">No build step</span>
          <span class="pill small">Works offline</span>
        </div>
      </div>
      <div class="hero-card">
        <div class="card-title">What’s inside</div>
        <ul class="card-list">
          <li><strong>Sorting:</strong> Bubble, Insertion, Merge, Quick</li>
          <li><strong>Pathfinding:</strong> BFS, Dijkstra, A*</li>
          <li><strong>Controls:</strong> size, speed, presets, random mazes</li>
          <li><strong>Visual cues:</strong> comparisons, frontier, shortest path</li>
        </ul>
      </div>
    </header>

    <main class="layout">
      <section id="sorting" class="panel">
        <div class="panel-head">
          <div>
            <p class="eyebrow">Module 01</p>
            <h2>Sorting Lab</h2>
            <p class="sub">Tune array size, choose an algorithm, and watch the bars dance.</p>
          </div>
          <div class="badge-row">
            <span class="pill tiny accent">Stable? sometimes</span>
            <span class="pill tiny accent">Time: O(n log n) best</span>
          </div>
        </div>

        <div class="controls">
          <div class="control">
            <label for="sort-select">Algorithm</label>
            <select id="sort-select">
              <option value="bubble">Bubble Sort</option>
              <option value="insertion">Insertion Sort</option>
              <option value="merge">Merge Sort</option>
              <option value="quick">Quick Sort</option>
            </select>
          </div>
          <div class="control">
            <label for="array-size">Array Size <span id="array-size-value"></span></label>
            <input type="range" id="array-size" min="10" max="120" value="50">
          </div>
          <div class="control">
            <label for="sort-speed">Speed (ms) <span id="sort-speed-value"></span></label>
            <input type="range" id="sort-speed" min="2" max="120" value="22">
          </div>
          <div class="control buttons">
            <button id="shuffle-array">Shuffle</button>
            <button id="nearly-sorted">Nearly Sorted</button>
            <button id="reverse-sorted">Reverse</button>
            <button id="run-sort" class="primary">Run</button>
          </div>
        </div>

        <div class="bar-wrapper">
          <div id="bar-container" class="bars"></div>
        </div>
        <div class="status-row">
          <span id="sort-status" class="muted">Ready. Shuffle the array and run.</span>
        </div>
      </section>

      <section id="pathfinding" class="panel">
        <div class="panel-head">
          <div>
            <p class="eyebrow">Module 02</p>
            <h2>Pathfinding Lab</h2>
            <p class="sub">Draw walls, pick an algorithm, and trace the route from start to goal.</p>
          </div>
          <div class="badge-row">
            <span class="pill tiny accent">Grid: 18 × 28</span>
            <span class="pill tiny accent">4-dir neighbors</span>
          </div>
        </div>

        <div class="controls grid-controls">
          <div class="control">
            <label for="path-select">Algorithm</label>
            <select id="path-select">
              <option value="bfs">Breadth-First Search (unweighted)</option>
              <option value="dijkstra">Dijkstra (uniform weight)</option>
              <option value="astar">A* (Manhattan)</option>
            </select>
          </div>
          <div class="control">
            <label for="path-speed">Speed (ms) <span id="path-speed-value"></span></label>
            <input type="range" id="path-speed" min="5" max="120" value="35">
          </div>
          <div class="control buttons">
            <button id="paint-walls">Paint Walls</button>
            <button id="set-start">Set Start</button>
            <button id="set-goal">Set Goal</button>
            <button id="random-maze">Random Walls</button>
            <button id="clear-grid">Clear Grid</button>
            <button id="run-path" class="primary">Run</button>
          </div>
        </div>

        <div class="grid-wrapper">
          <div id="grid" class="grid"></div>
          <div class="legend">
            <span class="dot start"></span>Start
            <span class="dot goal"></span>Goal
            <span class="dot wall"></span>Wall
            <span class="dot visit"></span>Visited
            <span class="dot path"></span>Shortest Path
          </div>
        </div>
        <div class="status-row">
          <span id="path-status" class="muted">Click cells to paint walls or reposition start/goal.</span>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div>
        Built in a day with vanilla web tech. No dependencies, no API keys, just algorithms on display.
      </div>
      <div class="footer-links">
        <a href="#sorting">Sorting</a>
        <a href="#pathfinding">Pathfinding</a>
      </div>
    </footer>
  </div>

  <script src="main.js"></script>
</body>
</html>