modcore-source/viewer.html at main · modcoretech/modcore-source · 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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>modcore Source</title>
<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=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<script>
  tailwind.config = {
    theme: {
      extend: {
        fontFamily: {
          sans: ['Geist', 'sans-serif'],
          mono: ['Geist Mono', 'monospace'],
        }
      }
    }
  }
</script>
<style>
  * { font-family: 'Geist', sans-serif; }
  code, pre, .mono { font-family: 'Geist Mono', monospace; }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: #000; }
  ::-webkit-scrollbar-thumb { background: #222; border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: #333; }
  .gutter { background: #111; cursor: col-resize; transition: background 0.15s; }
  .gutter:hover { background: #3b82f6; }
  #tabsContainer { scrollbar-width: none; }
  #tabsContainer::-webkit-scrollbar { display: none; }
  /* Monaco host */
  #monacoHost { width: 100%; height: 100%; }
</style>
</head>
<body class="flex flex-col h-screen bg-black text-zinc-300 overflow-hidden select-none">

<!-- Drop Overlay -->
<div id="dropOverlay" class="fixed inset-0 bg-black/80 z-50 hidden flex-col items-center justify-center border-2 border-blue-500 border-dashed m-4 rounded-xl pointer-events-none">
  <i class="fa-solid fa-cloud-arrow-up text-5xl text-blue-400 mb-3"></i>
  <p class="text-lg font-semibold text-white">Drop CRX file to inspect</p>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" class="fixed inset-0 bg-black/70 z-[60] hidden flex-col items-center justify-center backdrop-blur-sm">
  <div class="flex flex-col items-center gap-3">
    <div class="w-8 h-8 border-2 border-zinc-700 border-t-blue-500 rounded-full animate-spin"></div>
    <p id="loadingMsg" class="text-sm text-zinc-400 font-mono">Loading...</p>
  </div>
</div>

<!-- Context Menu -->
<div id="contextMenu" class="fixed bg-zinc-900 border border-zinc-800 shadow-2xl rounded-lg py-1 z-50 hidden min-w-[180px] text-sm">
  <div id="ctxOpen" class="px-3 py-2 hover:bg-zinc-800 cursor-pointer flex items-center gap-2 text-zinc-300"><i class="fa-regular fa-folder-open w-4 text-center text-zinc-500"></i> Open</div>
  <div id="ctxCopyPath" class="px-3 py-2 hover:bg-zinc-800 cursor-pointer flex items-center gap-2 text-zinc-300"><i class="fa-regular fa-copy w-4 text-center text-zinc-500"></i> Copy Path</div>
  <div id="ctxCopyName" class="px-3 py-2 hover:bg-zinc-800 cursor-pointer flex items-center gap-2 text-zinc-300"><i class="fa-solid fa-tag w-4 text-center text-zinc-500"></i> Copy Name</div>
  <div class="border-t border-zinc-800 my-1"></div>
  <div id="ctxDownload" class="px-3 py-2 hover:bg-zinc-800 cursor-pointer flex items-center gap-2 text-zinc-300"><i class="fa-solid fa-download w-4 text-center text-zinc-500"></i> Download File</div>
</div>

<!-- Toast -->
<div id="toast" class="fixed bottom-5 right-5 px-4 py-2.5 rounded-lg bg-zinc-900 border border-zinc-700 shadow-xl text-sm font-medium text-white transform transition-all duration-300 translate-y-16 opacity-0 z-[100] flex items-center gap-2.5 max-w-xs">
  <i id="toastIcon" class="fa-solid fa-check text-green-400 text-xs"></i>
  <span id="toastMsg">OK</span>
</div>

<!-- HEADER -->
<header class="flex items-center justify-between bg-black border-b border-zinc-900 px-4 h-12 flex-shrink-0 z-20">
  <div class="flex items-center gap-2.5">
    <div class="w-6 h-6 bg-blue-600 rounded flex items-center justify-center">
      <i class="fa-solid fa-puzzle-piece text-[10px] text-white"></i>
    </div>
    <span class="text-sm font-semibold text-white tracking-tight">modcore Source</span>
    <span id="loadedFileName" class="hidden text-xs text-zinc-600 font-mono ml-1"></span>
  </div>
  <div class="flex items-center gap-2">
    <button id="statsBtn" class="hidden items-center gap-1.5 px-2.5 py-1.5 rounded text-xs text-zinc-400 hover:text-white hover:bg-zinc-900 transition border border-transparent hover:border-zinc-800">
      <i class="fa-solid fa-chart-bar"></i> Stats
    </button>
    <button id="manifestBtn" class="hidden items-center gap-1.5 px-2.5 py-1.5 rounded text-xs text-zinc-400 hover:text-white hover:bg-zinc-900 transition border border-transparent hover:border-zinc-800">
      <i class="fa-solid fa-info-circle"></i> Manifest
    </button>
    <button id="exportBtn" class="hidden items-center gap-1.5 px-2.5 py-1.5 rounded text-xs text-zinc-400 hover:text-white hover:bg-zinc-900 transition border border-zinc-800">
      <i class="fa-solid fa-file-zipper"></i> Export ZIP
    </button>
    <label class="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-semibold bg-blue-600 hover:bg-blue-500 text-white transition cursor-pointer">
      <i class="fa-solid fa-upload text-[10px]"></i> Open CRX
      <input type="file" id="crxInput" accept=".crx" class="hidden">
    </label>
  </div>
</header>

<!-- MAIN -->
<div class="flex-1 flex overflow-hidden relative">

  <!-- SIDEBAR -->
  <div id="sidebar" class="bg-black flex flex-col border-r border-zinc-900 min-w-[200px]">

    <!-- Search -->
    <div class="p-2 border-b border-zinc-900">
      <div class="relative">
        <i class="fa-solid fa-magnifying-glass absolute left-2.5 top-2 text-zinc-600 text-[11px]"></i>
        <input type="text" id="searchBox" placeholder="Search files…" autocomplete="off"
          class="w-full bg-zinc-950 border border-zinc-900 text-zinc-300 text-xs rounded pl-7 pr-2 py-1.5 focus:outline-none focus:border-zinc-700 placeholder-zinc-700 font-mono transition">
      </div>
    </div>

    <!-- File Count + Collapse All -->
    <div id="sidebarMeta" class="hidden px-3 py-1.5 flex items-center justify-between border-b border-zinc-900">
      <span id="fileCountLabel" class="text-[10px] text-zinc-600 font-mono"></span>
      <button id="collapseAllBtn" class="text-[10px] text-zinc-600 hover:text-zinc-400 transition">collapse all</button>
    </div>

    <!-- Tree -->
    <div id="fileTree" class="flex-1 overflow-auto py-1 px-1 focus:outline-none" tabindex="0">
      <div id="treePlaceholder" class="flex flex-col items-center justify-center h-full text-zinc-700 pt-16 pb-8">
        <i class="fa-solid fa-puzzle-piece text-3xl mb-3 text-zinc-800"></i>
        <p class="text-xs text-center leading-relaxed">Open a <span class="font-mono text-zinc-600">.crx</span> file<br>to inspect its contents</p>
      </div>
    </div>

    <!-- File Info -->
    <div id="fileInfoPanel" class="hidden px-3 py-2 bg-zinc-950 border-t border-zinc-900 text-[10px] font-mono text-zinc-600 space-y-1">
      <div class="flex justify-between"><span class="text-zinc-700">SIZE</span><span id="infoSize" class="text-zinc-400"></span></div>
      <div class="flex justify-between"><span class="text-zinc-700">TYPE</span><span id="infoType" class="text-zinc-400 uppercase"></span></div>
      <div class="flex justify-between"><span class="text-zinc-700">PATH</span><span id="infoPath" class="text-zinc-500 truncate max-w-[120px]"></span></div>
    </div>
  </div>

  <!-- EDITOR AREA -->
  <div id="mainContent" class="bg-black flex flex-col flex-1 overflow-hidden min-w-[300px]">

    <!-- Tabs -->
    <div id="tabsWrapper" class="hidden bg-black border-b border-zinc-900 h-9 flex">
      <div id="tabsContainer" class="flex-1 flex overflow-x-auto items-stretch">
      </div>
      <button id="closeAllTabsBtn" class="px-3 text-zinc-700 hover:text-zinc-400 border-l border-zinc-900 hover:bg-zinc-950 transition text-[10px]" title="Close all tabs">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>

    <!-- Toolbar -->
    <div id="editorToolbar" class="hidden h-8 border-b border-zinc-900 bg-black flex items-center justify-between px-3 text-[11px]">
      <div class="flex items-center gap-1.5 overflow-hidden text-zinc-600 min-w-0">
        <i class="fa-regular fa-file text-[10px] flex-shrink-0"></i>
        <span id="filePathDisplay" class="font-mono truncate text-zinc-500"></span>
      </div>
      <div class="flex items-center gap-1 flex-shrink-0">
        <button id="markdownPreviewBtn" class="hidden items-center gap-1 px-2 py-1 rounded text-zinc-500 hover:text-white hover:bg-zinc-900 transition">
          <i class="fa-solid fa-book-open text-[10px]"></i> Preview
        </button>
        <button id="wrapBtn" class="hidden items-center gap-1 px-2 py-1 rounded text-zinc-500 hover:text-white hover:bg-zinc-900 transition" title="Toggle word wrap">
          <i class="fa-solid fa-text-width text-[10px]"></i> Wrap
        </button>
        <button id="unminifyBtn" class="hidden items-center gap-1 px-2 py-1 rounded text-yellow-700 hover:text-yellow-400 hover:bg-zinc-900 transition">
          <i class="fa-solid fa-wand-magic-sparkles text-[10px]"></i> Format
        </button>
        <button id="copyFileBtn" class="flex items-center gap-1 px-2 py-1 rounded text-zinc-500 hover:text-white hover:bg-zinc-900 transition">
          <i class="fa-regular fa-copy text-[10px]"></i> Copy
        </button>
        <button id="downloadFileBtn" class="flex items-center gap-1 px-2 py-1 rounded text-zinc-500 hover:text-white hover:bg-zinc-900 transition">
          <i class="fa-solid fa-download text-[10px]"></i>
        </button>
      </div>
    </div>

    <!-- Viewers -->
    <div id="viewerContainer" class="flex-1 relative overflow-hidden bg-black">

      <!-- Welcome -->
      <div id="welcomeScreen" class="absolute inset-0 flex flex-col items-center justify-center z-10 bg-black">
        <div class="flex flex-col items-center text-center max-w-xs">
          <div class="w-16 h-16 bg-zinc-950 border border-zinc-900 rounded-2xl flex items-center justify-center mb-5">
            <i class="fa-solid fa-puzzle-piece text-3xl text-blue-500"></i>
          </div>
          <h2 class="text-base font-semibold text-white mb-1.5">modcore Source</h2>
          <p class="text-xs text-zinc-600 leading-relaxed mb-5">Inspect Chrome Extension files.<br>Drag & drop or open a <span class="font-mono">.crx</span> to get started.</p>
          <button id="heroUploadBtn" class="px-5 py-2 bg-blue-600 hover:bg-blue-500 text-white text-sm font-medium rounded-lg transition">
            Open CRX File
          </button>
          <p class="text-[10px] text-zinc-800 mt-4">Supports all CRX2 and CRX3 formats</p>
        </div>
      </div>

      <!-- No file selected -->
      <div id="noFileSelected" class="hidden absolute inset-0 flex flex-col items-center justify-center z-10 bg-black">
        <i class="fa-regular fa-file-code text-4xl text-zinc-800 mb-3"></i>
        <p class="text-sm text-zinc-600">Select a file from the sidebar</p>
        <p class="text-xs text-zinc-800 mt-1 font-mono">← pick something</p>
      </div>

      <!-- Monaco -->
      <div id="editorWrapper" class="h-full hidden"></div>
      <div id="monacoHost" class="hidden h-full"></div>

      <!-- Markdown Preview -->
      <div id="markdownViewer" class="hidden h-full overflow-auto bg-black px-10 py-8">
        <div id="markdownContent" class="prose prose-invert prose-sm max-w-3xl mx-auto font-sans"></div>
      </div>

      <!-- Media Viewer -->
      <div id="mediaViewer" class="hidden h-full flex flex-col items-center justify-center bg-black relative overflow-hidden">
        <div id="mediaContainer" class="origin-center transition-transform duration-100 ease-out"></div>
        <!-- Zoom controls -->
        <div class="absolute bottom-4 flex items-center gap-1 bg-zinc-950 border border-zinc-900 rounded-full px-2 py-1">
          <button id="zoomOut" class="w-6 h-6 rounded-full hover:bg-zinc-800 text-zinc-400 flex items-center justify-center text-xs"><i class="fa-solid fa-minus"></i></button>
          <span id="zoomLevelDisplay" class="text-[10px] font-mono text-zinc-500 w-10 text-center">100%</span>
          <button id="zoomIn" class="w-6 h-6 rounded-full hover:bg-zinc-800 text-zinc-400 flex items-center justify-center text-xs"><i class="fa-solid fa-plus"></i></button>
          <div class="w-px h-3 bg-zinc-800 mx-1"></div>
          <button id="resetZoom" class="w-6 h-6 rounded-full hover:bg-zinc-800 text-zinc-400 flex items-center justify-center text-xs" title="Reset"><i class="fa-solid fa-compress"></i></button>
        </div>
      </div>

      <!-- Audio Viewer -->
      <div id="audioViewer" class="hidden h-full flex flex-col items-center justify-center bg-black gap-4">
        <div class="w-20 h-20 bg-zinc-950 border border-zinc-900 rounded-2xl flex items-center justify-center">
          <i id="audioIcon" class="fa-solid fa-music text-3xl text-blue-400"></i>
        </div>
        <p id="audioFileName" class="text-xs font-mono text-zinc-500"></p>
        <audio id="audioPlayer" controls class="rounded-lg" style="filter: invert(1) hue-rotate(180deg); width: 300px;"></audio>
      </div>

      <!-- Video Viewer -->
      <div id="videoViewer" class="hidden h-full flex items-center justify-center bg-black p-6">
        <video id="videoPlayer" controls class="max-w-full max-h-full rounded-lg shadow-2xl" style="max-height: calc(100% - 40px);"></video>
      </div>

      <!-- Binary Viewer -->
      <div id="binaryViewer" class="hidden h-full flex flex-col items-center justify-center bg-black gap-3">
        <div class="w-16 h-16 bg-zinc-950 border border-zinc-900 rounded-xl flex items-center justify-center">
          <i id="binaryIcon" class="fa-solid fa-file-binary text-2xl text-zinc-600"></i>
        </div>
        <p id="binaryLabel" class="text-sm text-zinc-500"></p>
        <p id="binarySize" class="text-xs font-mono text-zinc-700"></p>
        <button id="binaryDownloadBtn" class="mt-2 px-4 py-2 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 text-zinc-300 text-xs rounded-lg transition flex items-center gap-2">
          <i class="fa-solid fa-download"></i> Download File
        </button>
      </div>

      <!-- Stats Panel -->
      <div id="statsPanel" class="hidden h-full overflow-auto bg-black p-6">
        <h2 class="text-sm font-semibold text-white mb-4">Extension Statistics</h2>
        <div id="statsContent" class="space-y-4 text-xs text-zinc-400 font-mono"></div>
      </div>

      <!-- Manifest Panel -->
      <div id="manifestPanel" class="hidden h-full overflow-auto bg-black"></div>

    </div>

    <!-- Status Bar -->
    <div id="statusBar" class="h-6 bg-black border-t border-zinc-900 flex justify-between items-center px-3 text-[10px] text-zinc-700 flex-shrink-0 font-mono">
      <div class="flex items-center gap-2">
        <div id="statusDot" class="w-1.5 h-1.5 rounded-full bg-zinc-700"></div>
        <span id="statusMsg">Ready</span>
      </div>
      <div class="flex items-center gap-4">
        <span id="langDisplay"></span>
        <span>Ln <span id="cursorLine">1</span>, Col <span id="cursorCol">1</span></span>
        <span id="selectionInfo" class="hidden"></span>
      </div>
    </div>
  </div>
</div>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.15.1/beautify-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.5/split.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs/loader.js"></script>
<script src="viewer.js"></script>
</body>
</html>