tree-traversals/index.html at main · DevDecoder/tree-traversals · 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
151
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tree Traversal Explorer | A-Level CS</title>
    <link rel="stylesheet" href="styles.css?v=1.1.1">
    <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=Outfit:wght@300;400;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
    <link rel="shortcut icon" href="assets/favicon.ico">
</head>
<body>
    <div class="glass-bg"></div>
    <header>
        <div class="logo">
            <img src="assets/logo.svg" alt="DevDecoder Logo" class="logo-img">
            <h1>Tree Traversal Explorer</h1>
        </div>
        <div class="playback-controls">
            <button id="btn-play" class="btn-play">Play</button>
            <button id="btn-step" class="btn-secondary">Step</button>
            <button id="btn-reset" class="btn-secondary">Reset</button>
        </div>
        <div class="header-actions">
            <button id="btn-theme" class="btn-icon" title="Toggle Theme">🌓</button>
            <a href="https://github.com/DevDecoder/tree-traversals" class="btn-secondary">GitHub</a>
            <div class="dropdown">
                <button class="btn-secondary dropdown-toggle" id="btn-show-menu">Show ▾</button>
                <div class="dropdown-menu" id="show-menu">
                    <label class="dropdown-item"><input type="checkbox" id="check-settings" checked> Settings</label>
                    <label class="dropdown-item"><input type="checkbox" id="check-code"> Code</label>
                    <label class="dropdown-item"><input type="checkbox" id="check-stack" checked> Call Stack</label>
                    <label class="dropdown-item"><input type="checkbox" id="check-sequence" checked> Sequence</label>
                </div>
            </div>
        </div>
    </header>

    <main>
        <aside id="controls" class="glass">
            <div class="panel-header controls-header" style="justify-content: flex-end; padding: 10px; border-bottom: none; margin-bottom: -15px;">
                <button id="btn-hide-settings" class="btn-icon" title="Hide Settings">×</button>
            </div>
            <section class="control-group">
                <div class="control-group-header">
                    <h3>Tree Configuration</h3>
                    <button id="btn-regenerate" class="btn-regenerate" title="Regenerate tree">↻</button>
                </div>
                <div class="input-row">
                    <label>Depth</label>
                    <div class="range-controls">
                        <input type="range" id="min-depth-slider" min="1" max="5" value="2" title="Min Depth">
                        <input type="range" id="max-depth-slider" min="1" max="5" value="3" title="Max Depth">
                    </div>
                    <span id="depth-range">2 - 3</span>
                </div>
                <div class="input-row">
                    <label>Children</label>
                    <div class="range-controls">
                        <input type="range" id="min-child-slider" min="1" max="6" value="2" title="Min Children">
                        <input type="range" id="max-child-slider" min="2" max="6" value="2" title="Max Children">
                    </div>
                    <span id="child-range">2 - 2</span>
                </div>
            </section>

            <section class="control-group">
                <h3>Algorithm</h3>
                <select id="traversal-select">
                    <option value="preorder">Pre-order (Root, L, R)</option>
                    <option value="inorder">In-order (L, Root, R)</option>
                    <option value="postorder">Post-order (L, R, Root)</option>
                </select>
                <div class="input-row">
                    <label>Speed</label>
                    <input type="range" id="speed-slider" min="1" max="30" value="10">
                </div>
            </section>

            </section>
        </aside>

        <section id="visualization">
            <svg id="tree-canvas" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
                <!-- SVG Content -->
            </svg>
            <div id="explorer-pulse"></div>
        </section>

        <div id="resizer"></div>

        <aside id="insights" class="glass">
            <div id="code-panel" class="panel">
                <div class="panel-header">
                    <h3>Code</h3>
                    <div class="header-actions">
                        <select id="lang-select">
                            <option value="js">Javascript</option>
                            <option value="python">Python</option>
                            <option value="csharp">C#</option>
                        </select>
                        <button id="btn-copy" class="btn-secondary">Copy</button>
                        <button id="btn-hide-code" class="btn-icon" title="Hide Code">×</button>
                    </div>
                </div>
                <pre id="code-display" class="jetbrains-mono"><code></code></pre>
                <div class="panel-footer">
                    <span id="lang-categories"></span>
                    <div class="footer-controls">
                        <img id="lang-logo" class="lang-logo hidden" alt="Language Logo">
                        <label class="checkbox-label" title="Highlight the executing line of code during traversal">
                            <input type="checkbox" id="check-trace" checked> Trace Line
                        </label>
                        <label class="checkbox-label" title="Only show code for the selected traversal mode">
                            <input type="checkbox" id="check-focus" checked> Focus Mode
                        </label>
                    </div>
                </div>
            </div>

            <div id="v-resizer"></div>

            <div id="stack-panel" class="panel">
                <div class="panel-header">
                    <h3>Call Stack</h3>
                    <button id="btn-hide-stack" class="btn-icon" title="Hide Stack">×</button>
                </div>
                <div id="stack-display">
                    <!-- Stack frames -->
                </div>
            </div>
        </aside>
    </main>

    <footer id="results-bar" class="glass">
        <div class="results-container" style="flex: 1;">
            <span class="label">Sequence:</span>
            <div id="sequence-list"></div>
        </div>
        <button id="btn-hide-sequence" class="btn-icon" title="Hide Sequence" style="margin-left: 10px;">×</button>
    </footer>

    <script type="module" src="src/main.js?v=1.1.1"></script>
</body>
</html>