TRMCompare/index.html at main · lbruton/TRMCompare · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TRMCompare — Switch Migration Audit Tool</title>
  <meta name="description" content="Client-side Cisco switch migration audit tool. Paste old and new switch output, see every MAC, VLAN, and mismatch instantly.">
  <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&family=Outfit:wght@400;600;700;800;900&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/syntax-highlight.css">
</head>
<body>
  <header>
    <div class="header-left">
      <svg class="header-logo" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true">
        <rect x="1" y="2" width="26" height="9" rx="1.5" stroke="var(--old-switch)" stroke-width="1.8"/>
        <rect x="4" y="4.5" width="3" height="4.5" rx="0.4" fill="var(--old-switch)" opacity="0.25"/>
        <rect x="8.5" y="4.5" width="3" height="4.5" rx="0.4" fill="var(--old-switch)" opacity="0.25"/>
        <rect x="13" y="4.5" width="3" height="4.5" rx="0.4" fill="var(--old-switch)" opacity="0.25"/>
        <rect x="17.5" y="4.5" width="3" height="4.5" rx="0.4" fill="var(--old-switch)" opacity="0.25"/>
        <rect x="22" y="4.5" width="3" height="4.5" rx="0.4" fill="var(--old-switch)" opacity="0.25"/>
        <rect x="10.5" y="13" width="7" height="2" rx="1" fill="var(--migration-arrow)"/>
        <path d="M14 15v3m-2-1.2l2 1.5 2-1.5" stroke="var(--migration-arrow)" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
        <rect x="1" y="21" width="26" height="9" rx="1.5" stroke="var(--accent)" stroke-width="1.8"/>
        <rect x="4" y="23.5" width="3" height="4.5" rx="0.4" fill="var(--accent)" opacity="0.4"/>
        <rect x="8.5" y="23.5" width="3" height="4.5" rx="0.4" fill="var(--accent)" opacity="0.4"/>
        <rect x="13" y="23.5" width="3" height="4.5" rx="0.4" fill="var(--accent)" opacity="0.4"/>
        <rect x="17.5" y="23.5" width="3" height="4.5" rx="0.4" fill="var(--accent)" opacity="0.4"/>
        <rect x="22" y="23.5" width="3" height="4.5" rx="0.4" fill="var(--accent)" opacity="0.4"/>
        <circle cx="26" cy="22.5" r="1.2" fill="var(--status-ok)"/>
      </svg>
      <div class="header-brand">
        <h1>TRM<span class="brand-accent">COMPARE</span></h1>
        <span class="header-tagline">Migration Audit</span>
      </div>
    </div>
    <div class="header-right">
      <button id="theme-toggle" class="theme-toggle" type="button" title="Toggle light/dark theme" aria-label="Toggle theme">
        <svg class="icon-sun" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="10" cy="10" r="4"/><path d="M10 2v2m0 12v2M2 10h2m12 0h2m-3.5-5.5L13 6m-6 8l-1.5 1.5M16.5 15.5L15 14M5 6L3.5 4.5"/></svg>
        <svg class="icon-moon" viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M17.3 13.3A7 7 0 016.7 2.7 7 7 0 1017.3 13.3z"/></svg>
      </button>
    </div>
  </header>

  <main>
    <div class="how-it-works">
      <div class="step-card">
        <span class="step-number">1</span>
        <div>
          <strong>Capture</strong>
          <p>Run these on each switch — save the output before and after the swap:</p>
          <code>show mac address-table</code>
          <code class="optional">show interfaces description</code>
          <code class="optional">show cdp neighbors</code>
          <code class="optional">show vlan</code>
          <span class="optional-note">* optional — adds enrichment data</span>
        </div>
      </div>
      <div class="step-card">
        <span class="step-number">2</span>
        <div>
          <strong>Paste</strong>
          <p>Paste your saved terminal output into each panel below. Multi-command paste supported.</p>
        </div>
      </div>
      <div class="step-card">
        <span class="step-number">3</span>
        <div>
          <strong>Compare</strong>
          <p>One row per MAC. Old switch on the left, new switch on the right. Mismatches highlighted, sortable, filterable, exportable.</p>
        </div>
      </div>
    </div>

    <div class="input-grid">
      <div class="input-panel">
        <label for="before-input">Old Switch</label>
        <textarea id="before-input" rows="12" placeholder="Paste your saved capture from the old switch here...

Captured before the swap. Supports multiple show commands,
or just 'show mac address-table' output on its own."></textarea>
        <pre id="before-overlay" class="syntax-overlay" aria-hidden="true"></pre>
      </div>
      <div class="input-panel">
        <label for="after-input">New Switch</label>
        <textarea id="after-input" rows="12" placeholder="Paste terminal output from the new switch here...

Captured after the swap. The tool auto-detects
IOS, IOS-XE, and NX-OS output formats."></textarea>
        <pre id="after-overlay" class="syntax-overlay" aria-hidden="true"></pre>
      </div>
    </div>

    <div class="compare-row">
      <button id="compare-btn" class="btn-compare">Compare</button>
    </div>

    <div id="messages"></div>

    <div id="results-section" style="display:none">
      <div class="controls-row">
        <input type="text" id="filter-input" class="filter-input" placeholder="Filter by MAC, port, VLAN, description...">
        <div class="export-buttons">
          <button id="export-excel-btn" class="btn-export">Export Excel</button>
          <button id="export-pdf-btn" class="btn-export">Export PDF</button>
        </div>
      </div>

      <div id="audit-view">
        <div id="audit-filter-bar" class="filter-bar">
          <div class="filter-pill filter-pill-all active" data-audit-filter="all">All</div>
          <div class="filter-pill filter-pill-issues" data-audit-filter="issues">Issues Only</div>
          <div class="filter-divider"></div>
          <div class="filter-pill filter-pill-trunk active" data-audit-filter="trunk">Trunk</div>
          <div class="filter-pill filter-pill-multi active" data-audit-filter="multi">Multi</div>
          <div class="filter-pill filter-pill-voice active" data-audit-filter="voice">Voice</div>
          <div class="filter-pill filter-pill-access active" data-audit-filter="access">Access</div>
          <div class="filter-divider"></div>
          <div class="filter-pill filter-pill-new" data-audit-filter="new">New</div>
          <div class="filter-pill filter-pill-missing" data-audit-filter="missing">Missing</div>
        </div>
        <table id="audit-table" class="results-table audit-table">
          <thead>
            <tr>
              <th colspan="5" class="audit-group-header audit-group-old">Old Switch</th>
              <th class="audit-group-header audit-group-mac">MAC</th>
              <th colspan="5" class="audit-group-header audit-group-new">New Switch</th>
              <th class="audit-group-header audit-group-issues">Issues</th>
            </tr>
            <tr>
              <th class="sortable-audit" data-audit-sort="old-port">Port <span class="sort-arrow"></span></th>
              <th class="sortable-audit" data-audit-sort="old-vlan">VLAN <span class="sort-arrow"></span></th>
              <th class="sortable-audit" data-audit-sort="old-type">Type <span class="sort-arrow"></span></th>
              <th class="sortable-audit" data-audit-sort="old-desc">Description <span class="sort-arrow"></span></th>
              <th class="sortable-audit" data-audit-sort="old-cdp">CDP Neighbor <span class="sort-arrow"></span></th>
              <th class="sortable-audit" data-audit-sort="mac">MAC Address <span class="sort-arrow"></span></th>
              <th class="sortable-audit" data-audit-sort="new-port">Port <span class="sort-arrow"></span></th>
              <th class="sortable-audit" data-audit-sort="new-vlan">VLAN <span class="sort-arrow"></span></th>
              <th class="sortable-audit" data-audit-sort="new-type">Type <span class="sort-arrow"></span></th>
              <th class="sortable-audit" data-audit-sort="new-desc">Description <span class="sort-arrow"></span></th>
              <th class="sortable-audit" data-audit-sort="new-cdp">CDP Neighbor <span class="sort-arrow"></span></th>
              <th class="sortable-audit" data-audit-sort="issues">Status <span class="sort-arrow"></span></th>
            </tr>
          </thead>
          <tbody id="audit-body"></tbody>
        </table>
      </div>
    </div>
  </main>

  <footer>
    <p>TRMCompare &mdash; 100% client-side. Your data never leaves your browser.</p>
  </footer>

  <script src="libs/xlsx.full.min.js"></script>
  <script src="libs/jspdf.umd.min.js"></script>
  <script src="libs/jspdf.plugin.autotable.min.js"></script>
  <script type="module" src="js/app.js"></script>
</body>
</html>