2026-02-08 10:46:25 -05:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<body style="height:500px;width:300px;padding:10px;margin:0px;box-sizing:border-box">
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
html { font-family: sans-serif; }
|
|
|
|
|
body { margin: 0px; text-align: center; }
|
|
|
|
|
hr { border: none; border-bottom: 1px solid #CCC; }
|
|
|
|
|
.tab-panel { text-align: initial; }
|
|
|
|
|
.tab-bar { display: inline-flex; flex-direction: row; gap: 4px; margin-bottom: 4px; }
|
|
|
|
|
.tab-bar input[type=radio] { display: none; }
|
|
|
|
|
.tab-bar > label { cursor: pointer; padding: 0px 4px; }
|
|
|
|
|
.tab-bar > label:has(input[type=radio]:checked) { font-weight: 900; }
|
|
|
|
|
|
|
|
|
|
body:has(#tab-1:checked) .tab-panel:not(.tab-panel-1) { display: none; }
|
|
|
|
|
body:has(#tab-2:checked) .tab-panel:not(.tab-panel-2) { display: none; }
|
|
|
|
|
body:has(#tab-3:checked) .tab-panel:not(.tab-panel-3) { display: none; }
|
2026-02-21 22:31:48 -05:00
|
|
|
#statuses { display: flex; flex-direction: column; }
|
2026-02-08 10:46:25 -05:00
|
|
|
.status {
|
|
|
|
|
font-size: 0.8em; border: 1px solid black;
|
|
|
|
|
padding: 8px; border-radius: 8px; overflow: hidden;
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
}
|
2026-02-21 22:31:48 -05:00
|
|
|
/* .status .status-title { white-space: nowrap; font-weight: 900; overflow: hidden; } */
|
|
|
|
|
/* .status .status-title span { display: inline-block; } */
|
2026-02-08 10:46:25 -05:00
|
|
|
.status-debug { background: #ff8cff }
|
|
|
|
|
.status-success { background: #8cff8c }
|
|
|
|
|
.status-info { background: #b3d9ff }
|
2026-02-21 22:31:48 -05:00
|
|
|
.status-warning, .status-warn { background: #ffff8c }
|
2026-02-08 10:46:25 -05:00
|
|
|
.status-error { background: #ff8c8c }
|
|
|
|
|
|
2026-02-21 22:31:48 -05:00
|
|
|
.tab-panel-3 { display: flex; gap: 8px; flex-direction: column; }
|
|
|
|
|
progress { width: 100%; margin: 0px; }
|
|
|
|
|
|
2026-02-08 10:46:25 -05:00
|
|
|
fieldset.actionset { display: flex; flex-direction: column; gap: 6px; }
|
|
|
|
|
|
|
|
|
|
pre {
|
|
|
|
|
white-space: no-wrap;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
background: rgba(0, 0, 0, 0.2);
|
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.35);
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<div class="tab-bar">
|
|
|
|
|
<label for="tab-1"><input type="radio" name="tabs" id="tab-1" checked>Actions</label>
|
|
|
|
|
<label for="tab-2"><input type="radio" name="tabs" id="tab-2">Statuses</label>
|
|
|
|
|
<label for="tab-3"><input type="radio" name="tabs" id="tab-3">Settings</label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<hr />
|
|
|
|
|
|
|
|
|
|
<div class="tab-panel tab-panel-1" id="actions">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="tab-panel tab-panel-2">
|
2026-02-21 22:31:48 -05:00
|
|
|
<div style="display: flex; margin-bottom: 8px;">
|
|
|
|
|
<span id="notif-header" style="flex-grow: 1; font-size: 12px; padding-top: 4px;">1 Active | 2 Failed | 3 Completed</span>
|
|
|
|
|
<button id="clear-notifications-button">Clear</button>
|
|
|
|
|
</div>
|
2026-02-08 10:46:25 -05:00
|
|
|
<div id="statuses"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="tab-panel tab-panel-3">
|
|
|
|
|
<div style="display:flex; gap: 6px">
|
|
|
|
|
<input style="flex-grow: 1;" id="host" placeholder="Downloader Domain" />
|
|
|
|
|
<button id="save_domain">Save</button>
|
|
|
|
|
</div>
|
2026-02-21 22:31:48 -05:00
|
|
|
<label for="debug-checkbox">
|
|
|
|
|
<input type="checkbox" id="debug-checkbox"></input>
|
|
|
|
|
Enable Debug Mode
|
|
|
|
|
</label>
|
2026-02-08 10:46:25 -05:00
|
|
|
</div>
|
|
|
|
|
|
2026-02-21 22:31:48 -05:00
|
|
|
<script type="module" src="/js/popup.js"></script>
|
2026-02-08 10:46:25 -05:00
|
|
|
</body>
|
|
|
|
|
</html>
|
