|
4 | 4 | <meta charset="UTF-8"> |
5 | 5 | <title>modcore CRX Viewer</title> |
6 | 6 | <style> |
7 | | -body { |
8 | | - font-family: Arial, sans-serif; |
9 | | - background-color: #f7f9fc; |
10 | | - margin: 0; |
11 | | - padding: 0; |
12 | | -} |
13 | | -header { |
14 | | - background-color: #0d6efd; |
15 | | - color: white; |
16 | | - padding: 1rem; |
17 | | - text-align: center; |
18 | | -} |
19 | | -.container { |
20 | | - display: flex; |
21 | | - flex-direction: column; |
22 | | - max-width: 1200px; |
23 | | - margin: 2rem auto; |
24 | | - padding: 1rem; |
25 | | - gap: 1rem; |
26 | | -} |
27 | | -input[type="file"] { |
28 | | - padding: 0.5rem; |
29 | | - font-size: 1rem; |
30 | | -} |
31 | | -#fileList { |
32 | | - background: #fff; |
33 | | - border: 1px solid #ccc; |
34 | | - padding: 1rem; |
35 | | - max-height: 400px; |
36 | | - overflow-y: auto; |
37 | | -} |
38 | | -.file-item { |
39 | | - cursor: pointer; |
40 | | - padding: 0.3rem 0.5rem; |
41 | | - border-bottom: 1px solid #eee; |
42 | | -} |
43 | | -.file-item:hover { |
44 | | - background-color: #f0f0f0; |
45 | | -} |
46 | | -#fileContent { |
47 | | - background: #1e1e1e; |
48 | | - color: #d4d4d4; |
49 | | - padding: 1rem; |
50 | | - white-space: pre-wrap; |
51 | | - overflow-x: auto; |
52 | | - max-height: 600px; |
53 | | -} |
54 | | -footer { |
55 | | - text-align: center; |
56 | | - margin: 2rem; |
57 | | - color: #666; |
58 | | - font-size: 0.9rem; |
59 | | -} |
| 7 | + body { margin:0; font-family:Arial,sans-serif; } |
| 8 | + header { background:#20232a; color:white; padding:12px 20px; font-size:1.5em; display:flex; justify-content:space-between; align-items:center; } |
| 9 | + header button { background:#61dafb; border:none; padding:6px 12px; cursor:pointer; border-radius:4px; } |
| 10 | + header button:hover { background:#21a1f1; } |
| 11 | + |
| 12 | + #main { display:flex; height:calc(100vh - 50px); } |
| 13 | + #leftPanel { width:320px; background:#fff; border-right:1px solid #ccc; display:flex; flex-direction:column; } |
| 14 | + #fileControls { padding:10px; border-bottom:1px solid #ccc; } |
| 15 | + #fileTree { flex:1; overflow:auto; padding:10px; } |
| 16 | + #fileTree ul { list-style:none; padding-left:15px; } |
| 17 | + #fileTree li { cursor:pointer; padding:2px 4px; border-radius:3px; } |
| 18 | + #fileTree li:hover { background:#e0e0e0; } |
| 19 | + #fileTree li.selected { background:#61dafb; color:#fff; } |
| 20 | + |
| 21 | + #rightPanel { flex:1; display:flex; flex-direction:column; } |
| 22 | + #searchContainer { padding:10px; border-bottom:1px solid #ccc; display:flex; gap:5px; align-items:center; } |
| 23 | + #viewer { flex:1; overflow:auto; padding:10px; font-family:monospace; white-space:pre; background:#1e1e1e; color:#ddd; } |
| 24 | + |
| 25 | + /* Dark/light themes */ |
| 26 | + body.light #viewer { background:#f5f5f5; color:#111; } |
| 27 | + body.light #fileTree li.selected { background:#21a1f1; color:#fff; } |
| 28 | + |
| 29 | + input[type="text"] { flex:1; padding:4px 6px; border-radius:4px; border:1px solid #ccc; } |
| 30 | + button.small { padding:4px 8px; font-size:0.9em; } |
60 | 31 | </style> |
| 32 | +<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.css" rel="stylesheet" /> |
61 | 33 | </head> |
62 | 34 | <body> |
63 | 35 | <header> |
64 | | - <h1>modcore CRX Viewer</h1> |
65 | | - <p>Upload a CRX file and explore its source code</p> |
| 36 | + modcore CRX Viewer |
| 37 | + <button id="themeToggle">Toggle Theme</button> |
66 | 38 | </header> |
67 | | -<div class="container"> |
68 | | - <input type="file" id="crxInput" accept=".crx"/> |
69 | | - <div id="fileList"></div> |
70 | | - <pre id="fileContent">Select a file to view its content...</pre> |
| 39 | +<div id="main"> |
| 40 | + <div id="leftPanel"> |
| 41 | + <div id="fileControls"> |
| 42 | + <input type="file" id="crxInput" accept=".crx"> |
| 43 | + <button id="processBtn" class="small">Process File</button> |
| 44 | + </div> |
| 45 | + <div id="fileTree"><ul id="treeRoot"></ul></div> |
| 46 | + </div> |
| 47 | + <div id="rightPanel"> |
| 48 | + <div id="searchContainer"> |
| 49 | + <input type="text" id="searchBox" placeholder="Search files..."> |
| 50 | + <button id="exportBtn" class="small">Export Selected</button> |
| 51 | + </div> |
| 52 | + <pre id="viewer" class="language-js">Upload a CRX file and press "Process File" to view source.</pre> |
| 53 | + </div> |
71 | 54 | </div> |
72 | | -<footer>modcore Extension Manager | GitHub Pages CRX Viewer</footer> |
| 55 | + |
| 56 | +<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.js"></script> |
| 57 | +<script src="https://cdn.jsdelivr.net/npm/jszip@3.11.0/dist/jszip.min.js"></script> |
73 | 58 | <script src="viewer.js"></script> |
74 | 59 | </body> |
75 | 60 | </html> |
0 commit comments