fix: revert station to a91e83b baseline, restore layout integrity
station.html: reverted to last known-good state (a91e83b), with only
two minimal changes: bit-0 color tweak and Design B link in footer.
Binary footer tape removed as it caused #bottom height expansion that
crushed #middle grid row.
station-b.html: restore service-grid to auto-fill, reduce app padding
to give #middle more room.
This commit is contained in:
parent
790bdd6a9b
commit
a30beab925
|
|
@ -56,7 +56,7 @@
|
||||||
#alert-bar.crit { background:rgba(248,113,113,0.10);border:1px solid rgba(248,113,113,0.3);color:var(--crit);animation:alert-pulse 2s ease-in-out infinite; }
|
#alert-bar.crit { background:rgba(248,113,113,0.10);border:1px solid rgba(248,113,113,0.3);color:var(--crit);animation:alert-pulse 2s ease-in-out infinite; }
|
||||||
@keyframes alert-pulse { 0%,100%{border-color:rgba(248,113,113,0.3)} 50%{border-color:rgba(248,113,113,0.65)} }
|
@keyframes alert-pulse { 0%,100%{border-color:rgba(248,113,113,0.3)} 50%{border-color:rgba(248,113,113,0.65)} }
|
||||||
|
|
||||||
#app { position:relative;z-index:1;height:100vh;display:grid;grid-template-rows:auto auto 1fr auto;padding:20px;gap:0; }
|
#app { position:relative;z-index:1;height:100vh;display:grid;grid-template-rows:auto auto 1fr auto;padding:16px 20px 12px;gap:0; }
|
||||||
|
|
||||||
#top { display:flex;align-items:flex-end;justify-content:space-between;padding:10px 16px 14px;flex-shrink:0;background:rgba(8,14,26,0.72);backdrop-filter:blur(16px);border-radius:14px;margin-bottom:4px; }
|
#top { display:flex;align-items:flex-end;justify-content:space-between;padding:10px 16px 14px;flex-shrink:0;background:rgba(8,14,26,0.72);backdrop-filter:blur(16px);border-radius:14px;margin-bottom:4px; }
|
||||||
#hostname-area { display:flex;align-items:center;gap:8px; }
|
#hostname-area { display:flex;align-items:center;gap:8px; }
|
||||||
|
|
@ -115,7 +115,7 @@
|
||||||
.spark-svg { width:100%;height:100%;overflow:visible; }
|
.spark-svg { width:100%;height:100%;overflow:visible; }
|
||||||
|
|
||||||
/* services */
|
/* services */
|
||||||
.service-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow-y:auto;flex:1; }
|
.service-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;overflow-y:auto;flex:1; }
|
||||||
.service-card { background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:5px; }
|
.service-card { background:var(--surface2);border:1px solid var(--border2);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:5px; }
|
||||||
.service-card-top { display:flex;align-items:center;justify-content:space-between; }
|
.service-card-top { display:flex;align-items:center;justify-content:space-between; }
|
||||||
.service-name { font-size:12px;font-weight:600; }
|
.service-name { font-size:12px;font-weight:600; }
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
#status-dot.off { background:var(--text3);box-shadow:none; }
|
#status-dot.off { background:var(--text3);box-shadow:none; }
|
||||||
@keyframes pdot { 0%,100%{opacity:1} 50%{opacity:0.35} }
|
@keyframes pdot { 0%,100%{opacity:1} 50%{opacity:0.35} }
|
||||||
#clock-area { text-align:center; }
|
#clock-area { text-align:center; }
|
||||||
#clock { font-family:'JetBrains Mono',monospace;font-size:clamp(48px,5.5vw,84px);font-weight:400;letter-spacing:-0.03em;line-height:1;color:var(--text); }
|
#clock { font-family:'JetBrains Mono',monospace;font-size:clamp(48px,5.5vw,84px);font-weight:300;letter-spacing:-0.03em;line-height:1; }
|
||||||
#date { font-size:12px;color:var(--text3);margin-top:3px;letter-spacing:0.06em; }
|
#date { font-size:12px;color:var(--text3);margin-top:3px;letter-spacing:0.06em; }
|
||||||
#last-checked { text-align:right;font-size:11px;color:var(--text3); }
|
#last-checked { text-align:right;font-size:11px;color:var(--text3); }
|
||||||
|
|
||||||
|
|
@ -125,7 +125,7 @@
|
||||||
.spark-svg { width:100%;height:100%;overflow:visible; }
|
.spark-svg { width:100%;height:100%;overflow:visible; }
|
||||||
|
|
||||||
/* services */
|
/* services */
|
||||||
.service-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow-y:auto;flex:1; }
|
.service-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;overflow-y:auto;flex:1; }
|
||||||
.service-card { background:var(--surface2);border:1px solid var(--border2);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:6px; }
|
.service-card { background:var(--surface2);border:1px solid var(--border2);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:6px; }
|
||||||
.service-card-top { display:flex;align-items:center;justify-content:space-between; }
|
.service-card-top { display:flex;align-items:center;justify-content:space-between; }
|
||||||
.service-name { font-size:13px;font-weight:500; }
|
.service-name { font-size:13px;font-weight:500; }
|
||||||
|
|
@ -165,8 +165,7 @@
|
||||||
#stream-ticker-inner { display:inline-block;animation:ticker 60s linear infinite; }
|
#stream-ticker-inner { display:inline-block;animation:ticker 60s linear infinite; }
|
||||||
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
|
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
|
||||||
|
|
||||||
#bottom { display:flex;flex-direction:column;gap:8px;padding-top:10px; }
|
#bottom { display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border); }
|
||||||
#bottom-bar { display:flex;align-items:center;justify-content:space-between; }
|
|
||||||
.bottom-brand { font-size:12px;color:var(--text3);font-weight:500;letter-spacing:0.04em; }
|
.bottom-brand { font-size:12px;color:var(--text3);font-weight:500;letter-spacing:0.04em; }
|
||||||
.bottom-brand span { color:var(--accent); }
|
.bottom-brand span { color:var(--accent); }
|
||||||
.bottom-links { display:flex;gap:7px; }
|
.bottom-links { display:flex;gap:7px; }
|
||||||
|
|
@ -174,12 +173,6 @@
|
||||||
.bottom-link:hover { color:var(--accent);border-color:rgba(34,211,238,0.3); }
|
.bottom-link:hover { color:var(--accent);border-color:rgba(34,211,238,0.3); }
|
||||||
.bottom-link svg { width:11px;height:11px; }
|
.bottom-link svg { width:11px;height:11px; }
|
||||||
#refresh-countdown { font-size:11px;color:var(--text3); }
|
#refresh-countdown { font-size:11px;color:var(--text3); }
|
||||||
/* full-width binary footer tape */
|
|
||||||
#bin-footer { width:100%;overflow:hidden;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;line-height:1;border-top:1px solid var(--border2);padding-top:7px; }
|
|
||||||
#bin-footer-inner { display:inline-block;animation:bfticker 40s linear infinite; }
|
|
||||||
@keyframes bfticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
|
|
||||||
.bf1 { color:var(--accent);opacity:0.75; }
|
|
||||||
.bf0 { color:rgba(100,180,220,0.28); }
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -308,17 +301,14 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="bottom">
|
<div id="bottom">
|
||||||
<div id="bin-footer"><span id="bin-footer-inner"></span></div>
|
<div class="bottom-brand">posimai<span>-station</span></div>
|
||||||
<div id="bottom-bar">
|
<div class="bottom-links">
|
||||||
<div class="bottom-brand">posimai<span>-station</span></div>
|
<a class="bottom-link" href="/station-b" rel="noopener"><i data-lucide="monitor"></i>Design B</a>
|
||||||
<div class="bottom-links">
|
<a class="bottom-link" href="/" target="_blank" rel="noopener"><i data-lucide="terminal"></i>dev</a>
|
||||||
<a class="bottom-link" href="/station-b" rel="noopener"><i data-lucide="monitor"></i>Design B</a>
|
<a class="bottom-link" href="https://posimai-atlas.vercel.app" target="_blank" rel="noopener"><i data-lucide="network"></i>atlas</a>
|
||||||
<a class="bottom-link" href="/" target="_blank" rel="noopener"><i data-lucide="terminal"></i>dev</a>
|
<a class="bottom-link" href="https://posimai.soar-enrich.com" target="_blank" rel="noopener"><i data-lucide="layout-dashboard"></i>dashboard</a>
|
||||||
<a class="bottom-link" href="https://posimai-atlas.vercel.app" target="_blank" rel="noopener"><i data-lucide="network"></i>atlas</a>
|
|
||||||
<a class="bottom-link" href="https://posimai.soar-enrich.com" target="_blank" rel="noopener"><i data-lucide="layout-dashboard"></i>dashboard</a>
|
|
||||||
</div>
|
|
||||||
<div id="refresh-countdown">次の更新まで <span id="countdown">30</span>s</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div id="refresh-countdown">次の更新まで <span id="countdown">30</span>s</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -634,25 +624,6 @@ async function runRefresh(){
|
||||||
startCountdown();
|
startCountdown();
|
||||||
}
|
}
|
||||||
|
|
||||||
// ── full-width binary footer tape ──────────────────────────
|
|
||||||
(function initBinFooter(){
|
|
||||||
const el = document.getElementById('bin-footer-inner');
|
|
||||||
if(!el) return;
|
|
||||||
// generate a long random binary string with colored spans
|
|
||||||
function makeTape(len){
|
|
||||||
let s = '';
|
|
||||||
for(let i=0;i<len;i++){
|
|
||||||
const b = Math.random()<0.5?'1':'0';
|
|
||||||
// insert spaces every 8 chars for readability
|
|
||||||
const sp = (i>0 && i%8===0) ? ' ' : '';
|
|
||||||
s += sp + (b==='1' ? `<span class="bf1">1</span>` : `<span class="bf0">0</span>`);
|
|
||||||
}
|
|
||||||
return s;
|
|
||||||
}
|
|
||||||
const tape = makeTape(600);
|
|
||||||
el.innerHTML = tape + ' ' + tape; // doubled for seamless loop
|
|
||||||
})();
|
|
||||||
|
|
||||||
buildServiceCards();
|
buildServiceCards();
|
||||||
if(window.lucide)lucide.createIcons();
|
if(window.lucide)lucide.createIcons();
|
||||||
runRefresh();
|
runRefresh();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue