sorting-visualizer/shell_sort.html at main · Sanil-Sth/sorting-visualizer · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ShellSort Visualizer</title>
  <meta name="description" content="Interactive step-by-step Shell Sort algorithm visualizer with color-coded bar states, playback controls, and operation display." />
  <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=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="css/tokens.css" />
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/layout.css" />
  <link rel="stylesheet" href="css/components.css" />
  <link rel="stylesheet" href="css/bars.css" />
  <link rel="stylesheet" href="css/animations.css" />
</head>
<body>
  <div class="app-wrapper">
    <header id="app-header" role="banner">
      <div class="header-brand">
        <a href="index.html" class="header-link" aria-label="Back to home" style="margin-right:8px">← Back</a>
        <h1 class="header-title"><span>Shell</span>Sort Visualizer</h1>
        <span class="header-badge">Comparison</span>
      </div>
      <a href="https://github.com/Sanil-Sth" class="header-link" aria-label="View source on GitHub" target="_blank" rel="noopener noreferrer">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0 1 12 6.836a9.59 9.59 0 0 1 2.504.337c1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.202 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.741 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
        </svg>
        GitHub
      </a>
    </header>
    <div class="body-split">
      <section id="controls" aria-label="Algorithm controls">
        <div class="controls-group">
          <span class="controls-group-label">Preset</span>
          <div class="preset-grid">
            <button class="btn-preset" data-preset="random"  aria-label="Random array preset">Random</button>
            <button class="btn-preset" data-preset="sorted"  aria-label="Already sorted preset">Sorted</button>
            <button class="btn-preset" data-preset="reverse" aria-label="Reverse sorted preset">Reverse</button>
            <button class="btn-preset" data-preset="nearly"  aria-label="Nearly sorted preset">Nearly Sorted</button>
          </div>
        </div>
        <div class="controls-sep" aria-hidden="true"></div>
        <div class="controls-group">
          <span class="controls-group-label">Array Size</span>
          <div class="slider-track">
            <input type="range" id="size-slider" min="5" max="20" value="12" aria-label="Array size" aria-valuemin="5" aria-valuemax="20" />
            <span class="slider-value" id="size-value" aria-live="polite">12</span>
          </div>
        </div>
        <div class="controls-group">
          <span class="controls-group-label">Speed</span>
          <div class="slider-track">
            <input type="range" id="speed-slider" min="80" max="1500" value="980" aria-label="Playback speed" aria-valuemin="80" aria-valuemax="1500" />
            <span class="slider-value" id="speed-value" aria-live="polite">600ms</span>
          </div>
        </div>
        <div class="controls-sep" aria-hidden="true"></div>
        <div class="controls-group">
          <span class="controls-group-label">Custom Array</span>
          <div class="custom-input-row">
            <input type="text" id="custom-input" class="custom-input" placeholder="e.g. 42, 7, 18, 91, 3" aria-label="Custom array input — comma separated integers 1 to 100" maxlength="120" autocomplete="off" spellcheck="false" />
            <button class="btn-secondary" id="btn-apply-custom" aria-label="Apply custom array">Apply</button>
          </div>
          <span class="error-message" id="custom-error" role="alert" aria-live="assertive"></span>
        </div>
        <div class="controls-sep" aria-hidden="true"></div>
        <div class="controls-group">
          <span class="controls-group-label">Playback</span>
          <div class="playback-row">
            <button class="btn-primary" id="btn-play-pause" aria-label="Play or pause animation" aria-pressed="false">▶ Play</button>
            <button class="btn-secondary" id="btn-prev" aria-label="Previous step">← Prev</button>
            <button class="btn-secondary" id="btn-next" aria-label="Next step">Next →</button>
            <button class="btn-reset" id="btn-reset" aria-label="Reset to beginning">↺</button>
          </div>
        </div>
        <div class="controls-sep" aria-hidden="true"></div>
        <section id="info" aria-label="Step information">
          <p id="step-description" class="step-description" aria-live="polite" aria-atomic="true">Press Play or Next Step to begin</p>
          <p id="step-counter" class="step-counter" aria-live="polite">Step <strong>—</strong> of <strong>—</strong></p>
          <div class="callstack-panel" role="complementary" aria-label="Call stack">
            <div class="callstack-title">Call Stack</div>
            <div id="callstack-frames" class="callstack-frames">
              <span class="callstack-empty">No active frames</span>
            </div>
          </div>
        </section>
        <footer id="legend" role="contentinfo" aria-label="Color legend">
          <div class="controls-sep" aria-hidden="true"></div>
          <span class="legend-label">Legend</span>
          <div class="legend-chips">
            <span class="legend-chip"><span class="legend-chip-dot" style="background:var(--bar-idle)"></span>Idle</span>
            <span class="legend-chip"><span class="legend-chip-dot" style="background:var(--bar-active)"></span>Active Window</span>
            <span class="legend-chip"><span class="legend-chip-dot" style="background:var(--bar-pivot)"></span>Pivot / Key</span>
            <span class="legend-chip"><span class="legend-chip-dot" style="background:var(--bar-comparing)"></span>Comparing</span>
            <span class="legend-chip"><span class="legend-chip-dot" style="background:var(--bar-swapping)"></span>Swapping</span>
            <span class="legend-chip"><span class="legend-chip-dot" style="background:var(--bar-sorted)"></span>Sorted</span>
          </div>
        </footer>
      </section>
      <div id="resizer" role="separator" aria-label="Drag to resize panels. Double-click to reset." aria-orientation="vertical" title="Drag to resize · Double-click to reset" tabindex="0"></div>
      <section id="canvas" aria-label="Sort visualization">
        <div id="bar-chart" role="img" aria-label="Bar chart visualization of the array being sorted"></div>
      </section>
    </div>
  </div>
  <script src="js/state.js"></script>
  <script src="js/algorithm_shell.js"></script>
  <script src="js/renderer.js"></script>
  <script src="js/controls.js"></script>
  <script src="js/main.js"></script>
  <script src="js/resizer.js"></script>
</body>
</html>