Advanced-Code-Visualizer-Chrome-Extension/sidebar.html at main · vaibhavibaware/Advanced-Code-Visualizer-Chrome-Extension · 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div class="cv-sidebar" id="cv-sidebar">
    <div class="cv-header" id="cv-header">
      <div class="cv-title">
        <span class="cv-icon">📊</span>
        Code Visualizer
      </div>
      <div class="cv-controls">
        <button class="cv-btn-icon" id="cv-theme-toggle" title="Toggle Theme">🌓</button>
        <button class="cv-btn-icon" id="cv-minimize" title="Minimize">−</button>
        <button class="cv-btn-icon" id="cv-close" title="Close">×</button>
      </div>
    </div>

    <div class="cv-tabs">
      <button class="cv-tab active" data-tab="diagram">Block Diagram</button>
      <button class="cv-tab" data-tab="dryrun">Dry Run</button>
      <button class="cv-tab" data-tab="memory">Memory</button>
      <button class="cv-tab" data-tab="execution">Execution</button>
      <button class="cv-tab" data-tab="ai">AI Explain</button>
      <button class="cv-tab" data-tab="settings">Settings</button>
    </div>

    <div class="cv-content">
      <!-- Diagram Tab -->
      <div class="cv-tab-content active" data-content="diagram">
        <div class="cv-toolbar">
          <button class="cv-btn" id="cv-detect-code">🔍 Detect Code</button>
          <button class="cv-btn cv-btn-primary" id="cv-parse-code">⚡ Parse & Visualize</button>
          <button class="cv-btn" id="cv-clear">🗑️ Clear</button>
        </div>
        <div class="cv-canvas-container">
          <canvas id="cv-diagram-canvas" width="800" height="600"></canvas>
        </div>
        <div class="cv-code-preview" id="cv-code-preview">
          <div class="cv-preview-label">Detected Code:</div>
          <pre id="cv-detected-code">No code detected yet. Click "Detect Code" to scan the page.</pre>
        </div>
      </div>

      <!-- Dry Run Tab -->
      <div class="cv-tab-content" data-content="dryrun">
        <div class="cv-dryrun-panel">
          <div class="cv-toolbar">
            <button class="cv-btn cv-btn-primary" id="cv-generate-dryrun">📋 Generate Dry Run Table</button>
            <button class="cv-btn" id="cv-export-dryrun">💾 Export CSV</button>
          </div>

          <div class="cv-info-box">
            <h4>🎓 What is Dry Run?</h4>
            <p>A dry run is a step-by-step manual execution of code on paper. It helps you understand:</p>
            <ul>
              <li>How variables change at each step</li>
              <li>The flow of program execution</li>
              <li>What output is generated and when</li>
              <li>How loops and conditions work</li>
            </ul>
            <p><strong>Perfect for exam preparation and interview practice!</strong></p>
          </div>

          <div id="cv-dryrun-table" class="cv-dryrun-container">
            <div class="cv-empty-state">
              Click "Generate Dry Run Table" to create a step-by-step execution table.
              <br><br>
              Make sure you've parsed the code first!
            </div>
          </div>
        </div>
      </div>

      <!-- Memory Tab -->
      <div class="cv-tab-content" data-content="memory">
        <div class="cv-memory-panel">
          <div class="cv-memory-section">
            <h3>📚 Stack Memory</h3>
            <div id="cv-stack-memory" class="cv-stack-container">
              <div class="cv-empty-state">No execution yet</div>
            </div>
          </div>
          <div class="cv-memory-section">
            <h3>🗄️ Heap Memory</h3>
            <div id="cv-heap-memory" class="cv-heap-container">
              <div class="cv-empty-state">No objects allocated</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Execution Tab -->
      <div class="cv-tab-content" data-content="execution">
        <div class="cv-execution-controls">
          <button class="cv-btn" id="cv-step-prev">⏮ Previous</button>
          <button class="cv-btn cv-btn-primary" id="cv-step-next">Next Step ⏭</button>
          <button class="cv-btn" id="cv-play">▶ Play</button>
          <button class="cv-btn" id="cv-pause">⏸ Pause</button>
          <button class="cv-btn" id="cv-reset">↻ Reset</button>
        </div>
        <div class="cv-execution-info">
          <div class="cv-info-item">
            <strong>Current Line:</strong> <span id="cv-current-line">-</span>
          </div>
          <div class="cv-info-item">
            <strong>Step:</strong> <span id="cv-current-step">0</span> / <span id="cv-total-steps">0</span>
          </div>
        </div>
        <div class="cv-execution-code" id="cv-execution-code">
          <pre id="cv-highlighted-code">Start execution to see code highlighting</pre>
        </div>
      </div>

      <!-- AI Explain Tab -->
      <div class="cv-tab-content" data-content="ai">
        <div class="cv-ai-panel">
          <div class="cv-toolbar">
            <button class="cv-btn cv-btn-primary" id="cv-ai-explain">🤖 Explain Code</button>
            <input type="text" id="cv-ai-endpoint" placeholder="AI API Endpoint (optional)" class="cv-input">
          </div>
          <div class="cv-ai-response" id="cv-ai-response">
            <div class="cv-empty-state">
              Click "Explain Code" to get AI-powered explanation of the detected code.
              <br><br>
              <small>Note: Configure AI API endpoint above for real-time explanations. Demo mode available without endpoint.</small>
            </div>
          </div>
          <div class="cv-ai-history">
            <h4>📜 History</h4>
            <div id="cv-ai-history-list" class="cv-history-list">
              <div class="cv-empty-state">No explanations yet</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Settings Tab -->
      <div class="cv-tab-content" data-content="settings">
        <div class="cv-settings-panel">
          <div class="cv-setting-item">
            <label>
              <input type="checkbox" id="cv-auto-detect" checked>
              Auto-detect code on page load
            </label>
          </div>
          <div class="cv-setting-item">
            <label>
              <input type="checkbox" id="cv-animate-execution" checked>
              Animate execution steps
            </label>
          </div>
          <div class="cv-setting-item">
            <label>
              Animation Speed:
              <input type="range" id="cv-animation-speed" min="100" max="2000" value="800" step="100">
              <span id="cv-speed-value">800ms</span>
            </label>
          </div>
          <div class="cv-setting-item">
            <label>
              Diagram Layout:
              <select id="cv-layout-type" class="cv-select">
                <option value="vertical">Vertical</option>
                <option value="horizontal">Horizontal</option>
                <option value="hierarchical">Hierarchical</option>
              </select>
            </label>
          </div>
          <div class="cv-setting-item">
            <button class="cv-btn" id="cv-reset-settings">Reset to Defaults</button>
          </div>
          <div class="cv-setting-item">
            <hr style="margin: 10px 0; border: none; border-top: 1px solid #ddd;">
            <small style="color: #666;">
              <strong>About:</strong> Advanced Code Visualizer v1.0.0<br>
              Visualizes code execution with animated diagrams, memory tracking, and step-by-step simulation.
            </small>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>