69 lines
2.1 KiB
HTML
69 lines
2.1 KiB
HTML
<!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; }
|
|
|
|
.status {
|
|
font-size: 0.8em; border: 1px solid black;
|
|
padding: 8px; border-radius: 8px; overflow: hidden;
|
|
margin-bottom: 8px;
|
|
}
|
|
.status .status-title { white-space: nowrap; font-weight: 900; }
|
|
.status-debug { background: #ff8cff }
|
|
.status-success { background: #8cff8c }
|
|
.status-info { background: #b3d9ff }
|
|
.status-warning.status-warn { background: #ffff8c }
|
|
.status-error { background: #ff8c8c }
|
|
|
|
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">
|
|
<pre id="json_dump"></pre>
|
|
<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>
|
|
</div>
|
|
|
|
<script src="popup.js"></script>
|
|
</body>
|
|
</html>
|