homepage: icon swaps, clickable tiles, down pulse, header nav, compaction callout
- Icons: Copyparty -> improvised amber folder, Marreta -> crumbling wall (bricks + red crack), Calibre-Web -> book, OpenWebUI -> official logo.png from openwebui.com, Seerr -> official seerr.dev os_logo_filled.svg. - Tiles with an open link are clickable whole (.panel.clickable: hover lift + glow; inner link clicks pass through). - Any DOWN panel (app tile or model card) gets a red gradient wash and a slow pulsing glow (.panel.down, .mi-card:has(.badge.down)). - docs / admin / account-settings buttons moved from the footer to the header (nav.top-links); footer keeps the deployment stamp. - Zealot compaction advice promoted from the Use paragraph to a bordered glowing model.compaction callout (.mi-comp); component seam pinned to the new field.
This commit is contained in:
Frank
@@ -90,7 +90,7 @@ function miCard(svc, state) {
|
||||
if (m.spec) parts.push('<div class="mi-spec">' + esc(m.spec) + '</div>');
|
||||
if (m.inputs && m.inputs.length) parts.push('<div class="mi-inputs">Inputs: ' + esc(m.inputs.join(' · ')) + '</div>');
|
||||
if (m.use) parts.push('<div class="mi-use">Use: ' + esc(m.use) + '</div>');
|
||||
if (m.voice) parts.push(voiceBtn(m.voice.text, m.voice.sfx));
|
||||
if (m.compaction) parts.push('<div class="mi-comp">⚡ ' + esc(m.compaction) + '</div>');
|
||||
if (m.supervision) parts.push('<div class="mi-super">' + esc(m.supervision) + '</div>');
|
||||
if (m.permission) parts.push('<div class="mi-perm" title="' + esc(m.permission) + '">⚠ ' + esc(m.permission) + '</div>');
|
||||
if (m.warn) parts.push('<div class="mi-warn" title="' + esc(m.warn) + '">' +
|
||||
@@ -137,6 +137,12 @@ function renderPanel(svc, state) {
|
||||
'</div>' +
|
||||
'<div class="desc">' + descHTML(svc) + '</div>' + warn +
|
||||
'<div class="links">' + links.join('') + '</div>';
|
||||
if (svc.showLink && svc.url) {
|
||||
panel.classList.add('clickable');
|
||||
panel.addEventListener('click', function (ev) {
|
||||
if (!ev.target.closest('a')) window.location.href = svc.url;
|
||||
});
|
||||
}
|
||||
return panel;
|
||||
}
|
||||
|
||||
@@ -220,6 +226,7 @@ function main() {
|
||||
applyBare();
|
||||
fillDeployed();
|
||||
gateAdminLink();
|
||||
|
||||
Promise.all([load('services.json'), load('status.json')])
|
||||
.then(function (pair) { renderPanels(pair[0], pair[1]); })
|
||||
.catch(function (e) {
|
||||
|
||||
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><polygon points="48,6 86,27 86,69 48,90 10,69 10,27" fill="#1c1300" stroke="#ffb000" stroke-width="3"/><text x="48" y="60" font-family="monospace" font-size="30" font-weight="bold" fill="#ffb000" text-anchor="middle">CP</text></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><polygon points="48,6 86,27 86,69 48,90 10,69 10,27" fill="#1c1300" stroke="#ffb000" stroke-width="3"/><path d="M26 36 h16 l5 6 h23 v26 H26 z" fill="none" stroke="#ffb000" stroke-width="4" stroke-linejoin="round"/></svg>
|
||||
|
Before Width: | Height: | Size: 292 B After Width: | Height: | Size: 280 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><polygon points="48,6 86,27 86,69 48,90 10,69 10,27" fill="#1c1300" stroke="#ffb000" stroke-width="3"/><text x="48" y="60" font-family="monospace" font-size="30" font-weight="bold" fill="#ffb000" text-anchor="middle">CW</text></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><polygon points="48,6 86,27 86,69 48,90 10,69 10,27" fill="#1c1300" stroke="#ffb000" stroke-width="3"/><path d="M30 28 h24 a8 8 0 0 1 12 0 h0 v40 H30 z M30 28 v40 M42 34 h14 M42 42 h14" fill="none" stroke="#ffb000" stroke-width="4" stroke-linejoin="round"/></svg>
|
||||
|
Before Width: | Height: | Size: 292 B After Width: | Height: | Size: 323 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><polygon points="48,6 86,27 86,69 48,90 10,69 10,27" fill="#1c1300" stroke="#ffb000" stroke-width="3"/><text x="48" y="60" font-family="monospace" font-size="30" font-weight="bold" fill="#ffb000" text-anchor="middle">MR</text></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><polygon points="48,6 86,27 86,69 48,90 10,69 10,27" fill="#1c1300" stroke="#ffb000" stroke-width="3"/><rect x="18" y="30" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="38" y="30" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="58" y="30" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="78" y="30" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="18" y="40" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="28" y="40" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="48" y="40" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="68" y="40" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="88" y="40" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="18" y="50" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="38" y="50" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="58" y="50" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="78" y="50" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="18" y="60" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="28" y="60" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="48" y="60" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="68" y="60" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><rect x="88" y="60" width="18" height="8" fill="none" stroke="#ffb000" stroke-width="2"/><path d="M52 28 l-6 12 8 8 -8 10 6 12" fill="none" stroke="#ff4040" stroke-width="4" stroke-linejoin="round"/></svg>
|
||||
|
Before Width: | Height: | Size: 292 B After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -0,0 +1,16 @@
|
||||
<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="52" cy="52" r="28" fill="#131928"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M48 96C74.5097 96 96 74.5097 96 48C96 21.4903 74.5097 0 48 0C21.4903 0 0 21.4903 0 48C0 74.5097 21.4903 96 48 96ZM80.0001 52C80.0001 67.464 67.4641 80 52.0001 80C36.5361 80 24.0001 67.464 24.0001 52C24.0001 49.1303 24.4318 46.3615 25.2338 43.7548C27.4288 48.6165 32.3194 52 38.0001 52C45.7321 52 52.0001 45.732 52.0001 38C52.0001 32.3192 48.6166 27.4287 43.755 25.2337C46.3616 24.4317 49.1304 24 52.0001 24C67.4641 24 80.0001 36.536 80.0001 52Z" fill="url(#paint0_linear)"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M80.0002 52C80.0002 67.464 67.4642 80 52.0002 80C36.864 80 24.5329 67.9897 24.017 52.9791C24.0057 53.318 24 53.6583 24 54C24 70.5685 37.4315 84 54 84C70.5685 84 84 70.5685 84 54C84 37.4315 70.5685 24 54 24C53.6597 24 53.3207 24.0057 52.9831 24.0169C67.9919 24.5347 80.0002 36.865 80.0002 52Z" fill="#131928"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M48 12C28.1177 12 12 28.1177 12 48C12 50.2091 10.2091 52 8 52C5.79086 52 4 50.2091 4 48C4 23.6995 23.6995 4 48 4C50.2091 4 52 5.79086 52 8C52 10.2091 50.2091 12 48 12Z" fill="url(#paint1_linear)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="48" y1="-2.07126e-06" x2="117.5" y2="69.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C395FC"/>
|
||||
<stop offset="1" stop-color="#4F65F5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="28" y1="8" x2="28" y2="48" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.4"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -13,17 +13,17 @@
|
||||
<body>
|
||||
<header class="top">
|
||||
<span class="title">frank@home:~$ services</span>
|
||||
<a id="bare-toggle" class="toggle" href="?bare=1">bare</a>
|
||||
<nav class="top-links">
|
||||
<a class="foot-btn" href="/docs">docs</a>
|
||||
<a class="foot-btn" id="admin-link" href="/admin/" hidden>admin</a>
|
||||
<a class="foot-btn" href="https://auth.franksdank.cloud/if/flow/default-user-settings-flow/" target="_blank" rel="noopener">account settings</a>
|
||||
<a id="bare-toggle" class="toggle" href="?bare=1">bare</a>
|
||||
</nav>
|
||||
</header>
|
||||
<div id="summary" class="summary"></div>
|
||||
<main id="grid" class="sections"></main>
|
||||
<footer class="foot">
|
||||
<span>last master deployment: <span id="deployed-at"></span></span>
|
||||
<span class="foot-links">
|
||||
<a class="foot-btn" href="/docs">docs</a>
|
||||
<a class="foot-btn" id="admin-link" href="/admin/" hidden>admin</a>
|
||||
<a class="foot-btn" href="https://auth.franksdank.cloud/if/flow/default-user-settings-flow/" target="_blank" rel="noopener">account settings</a>
|
||||
</span>
|
||||
</footer>
|
||||
<script src="deployed.js"></script>
|
||||
<script src="app.js"></script>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
"method": "http",
|
||||
"wip": false,
|
||||
"showLink": true,
|
||||
"art": "/img/apps/mono-ow.svg"
|
||||
"art": "/img/apps/openwebui.png"
|
||||
},
|
||||
{
|
||||
"name": "Gitea",
|
||||
@@ -115,7 +115,7 @@
|
||||
"method": "http",
|
||||
"wip": "down",
|
||||
"showLink": false,
|
||||
"art": "/img/apps/mono-sr.svg"
|
||||
"art": "/img/apps/seerr.svg"
|
||||
},
|
||||
{
|
||||
"name": "Marreta",
|
||||
@@ -303,7 +303,7 @@
|
||||
"text",
|
||||
"image"
|
||||
],
|
||||
"use": "Code editor autocomplete, agentic search, RAG, research subagents, translation, roleplay, and summarization. If your agent harness lets you set a compaction model, set this one: a compaction job on the bigger models blocks them for far longer.",
|
||||
"use": "Code editor autocomplete, agentic search, RAG, research subagents, translation, roleplay, and summarization.",
|
||||
"voice": {
|
||||
"text": "I LONG FOR COMBAT!",
|
||||
"sfx": [
|
||||
@@ -311,7 +311,8 @@
|
||||
]
|
||||
},
|
||||
"supervision": "Requires tight human supervision.",
|
||||
"warn": "Uncensored model: output can include adult content, content that describes harmful, hateful, or illegal acts, content concerning “sensitive offensive cybersecurity topics”, and other output that may carry severe legal risk. Take this warning seriously — don’t ruin this server for everybody."
|
||||
"warn": "Uncensored model: output can include adult content, content that describes harmful, hateful, or illegal acts, content concerning “sensitive offensive cybersecurity topics”, and other output that may carry severe legal risk. Take this warning seriously — don’t ruin this server for everybody.",
|
||||
"compaction": "If your agent harness lets you set a compaction model, set this one: a compaction job on the bigger models blocks them for far longer."
|
||||
},
|
||||
"url": "",
|
||||
"docs": "/docs#models",
|
||||
|
||||
@@ -71,6 +71,26 @@ body::before {
|
||||
}
|
||||
|
||||
.panel { border: 1px solid var(--border); background: var(--panel); padding: 12px 14px; border-radius: 2px; }
|
||||
.panel.clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
|
||||
.panel.clickable:hover {
|
||||
border-color: var(--link);
|
||||
box-shadow: 0 0 14px color-mix(in srgb, var(--link) 35%, transparent);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.panel.down {
|
||||
background: linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--down) 12%, var(--panel)), var(--panel));
|
||||
animation: down-pulse 3.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes down-pulse {
|
||||
50% { border-color: color-mix(in srgb, var(--down) 70%, var(--border));
|
||||
box-shadow: 0 0 16px color-mix(in srgb, var(--down) 40%, transparent); }
|
||||
}
|
||||
.mi-card:has(.badge.down) {
|
||||
background: linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--down) 12%, var(--panel)), var(--panel));
|
||||
animation: down-pulse 3.2s ease-in-out infinite;
|
||||
}
|
||||
.panel-head { display: flex; align-items: center; gap: 8px; }
|
||||
.panel-head .name { flex: 1; }
|
||||
.app-art {
|
||||
@@ -108,6 +128,8 @@ body::before {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.foot a { color: var(--link); text-decoration: none; }
|
||||
.top-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||||
.top .foot-btn { color: var(--link); text-decoration: none; }
|
||||
.foot-links { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.foot-btn {
|
||||
border: 1px solid var(--link);
|
||||
@@ -235,9 +257,9 @@ html[data-bare="1"] .mi-card { border-color: #000; box-shadow: none; background:
|
||||
html[data-bare="1"] .mi-art { display: none; }
|
||||
html[data-bare="1"] .mi-name { color: #000; text-shadow: none; }
|
||||
html[data-bare="1"] .mi-voice { color: #000; text-decoration: underline; }
|
||||
html[data-bare="1"] .mi-role, html[data-bare="1"] .mi-spec, html[data-bare="1"] .mi-use,
|
||||
html[data-bare="1"] .mi-role, html[data-bare="1"] .mi-spec, html[data-bare="1"] .mi-use, html[data-bare="1"] .mi-comp,
|
||||
html[data-bare="1"] .mi-inputs, html[data-bare="1"] .mi-equiv, html[data-bare="1"] .mi-super,
|
||||
html[data-bare="1"] .mi-warn { color: #000; }
|
||||
html[data-bare="1"] .app-art { display: none; }
|
||||
html[data-bare="1"] .svc-warn, html[data-bare="1"] .mi-perm { color: #000; border: none; text-shadow: none; padding: 0; }
|
||||
html[data-bare="1"] .mi-perm { border: 1px solid #000; }
|
||||
html[data-bare="1"] .svc-warn, html[data-bare="1"] .mi-perm, html[data-bare="1"] .mi-comp { color: #000; border: none; text-shadow: none; padding: 0; }
|
||||
html[data-bare="1"] .mi-perm, html[data-bare="1"] .mi-comp { border: 1px solid #000; }
|
||||
|
||||
Reference in New Issue
Block a user