jakub/obs-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling fixes and Olden Era mmodule

Browse Source
This commit is contained in:
Jakub Zych
2026-05-21 15:00:12 +02:00
parent 4ceff4015a
commit dd3493921b
136 changed files with 1028 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
webapp/resources/views/home.blade.php Normal file
View File

@@ -0,0 +1,259 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OPHI-118 / control panel</title>
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
<link rel="stylesheet" href="{{ asset('css/hud.css') }}">
<style>
html, body {
color: var(--term-fg);
font-family: var(--mono);
}
body.page-shell {
display: flex;
flex-direction: column;
overflow: hidden;
}
.banner { margin-bottom: 28px; }
/* ---------- Banner / lede ---------- */
.banner h1 {
color: var(--term-fg-bright);
text-shadow: 0 0 12px var(--term-glow);
font-size: 28px;
font-weight: 700;
letter-spacing: 0.22em;
margin-bottom: 6px;
}
.banner .lede {
color: var(--term-fg-dim);
font-size: 13px;
letter-spacing: 0.04em;
}
.banner .lede .caret { color: var(--term-fg-bright); margin-right: 8px; }
/* ---------- Tile grid ---------- */
.tiles {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 22px;
flex: 1 1 auto;
min-height: 0;
}
.tile {
--tile-fg: var(--term-fg);
--tile-fg-hi: var(--term-fg-bright);
--tile-dim: var(--term-fg-dim);
--tile-edge: var(--term-edge);
--tile-glow: var(--term-glow);
position: relative;
background:
linear-gradient(180deg, rgba(80,220,100,0.04) 0%, rgba(0,0,0,0) 60%),
var(--term-bg);
border: 2px solid var(--tile-edge);
border-radius: 6px;
padding: 26px 30px 22px;
color: var(--tile-fg);
text-decoration: none;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 14px;
overflow: hidden;
transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
box-shadow:
0 0 30px rgba(80, 220, 100, 0.04),
inset 0 0 60px rgba(0, 30, 0, 0.55);
}
.tile:hover {
border-color: var(--tile-fg-hi);
box-shadow:
0 0 40px var(--tile-glow),
inset 0 0 60px rgba(0, 30, 0, 0.55);
transform: translateY(-2px);
}
.tile:hover .tile-title { text-shadow: 0 0 14px var(--tile-glow); }
.tile::after {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
to bottom,
rgba(0,0,0,0) 0px,
rgba(0,0,0,0) 2px,
rgba(0,0,0,0.22) 3px,
rgba(0,0,0,0.22) 4px
);
opacity: 0.45;
mix-blend-mode: multiply;
}
/* HUD-cyan variant for the scenes tile */
.tile.cyan {
--tile-fg: var(--hud);
--tile-fg-hi: #c4ecff;
--tile-dim: var(--hud-dim);
--tile-edge: rgba(79, 210, 255, 0.45);
--tile-glow: rgba(79, 210, 255, 0.55);
background:
linear-gradient(180deg, rgba(79,210,255,0.05) 0%, rgba(0,0,0,0) 60%),
var(--term-bg);
color: var(--tile-fg);
}
/* Warn-yellow variant for external links */
.tile.warn {
--tile-fg: var(--warn);
--tile-fg-hi: #ffe580;
--tile-dim: rgba(255, 208, 0, 0.55);
--tile-edge: rgba(255, 208, 0, 0.45);
--tile-glow: rgba(255, 208, 0, 0.55);
background:
linear-gradient(180deg, rgba(255,208,0,0.04) 0%, rgba(0,0,0,0) 60%),
var(--term-bg);
color: var(--tile-fg);
}
.tile-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px;
color: var(--tile-dim);
font-size: 11px; letter-spacing: 0.20em;
}
.tile-slug { color: var(--tile-fg-hi); }
.tile-badge {
border: 1px solid var(--tile-edge);
padding: 2px 8px;
border-radius: 3px;
color: var(--tile-fg);
background: rgba(0, 0, 0, 0.35);
}
.tile-title {
color: var(--tile-fg-hi);
font-size: 38px;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.05;
text-shadow: 0 0 8px var(--tile-glow);
transition: text-shadow 140ms ease;
}
.tile-desc {
color: var(--tile-fg);
opacity: 0.85;
font-size: 13px;
line-height: 1.55;
max-width: 90%;
}
.tile-foot {
display: flex; align-items: center; justify-content: space-between;
color: var(--tile-dim);
font-size: 12px; letter-spacing: 0.08em;
}
.tile-target {
color: var(--tile-fg-hi);
font-weight: 700;
}
.tile-target .caret { color: var(--tile-fg); margin-right: 6px; }
.tile-foot .arrow { font-size: 18px; color: var(--tile-fg-hi); }
/* ---------- CRT overlays (full-viewport) ---------- */
.scanlines, .vignette, .flicker { position: fixed; z-index: 999; }
@media (max-width: 1100px) {
body.page-shell { padding: 20px 28px; }
.tiles { grid-template-columns: 1fr; grid-template-rows: auto; }
.tile-title { font-size: 30px; }
}
</style>
</head>
<body class="page-shell">
@include('partials.topbar', ['crumb' => 'CONTROL PANEL'])
<section class="banner">
<h1>STREAMING CONTROL</h1>
<div class="lede"><span class="caret">▶</span>select an operation</div>
</section>
<main class="tiles">
<a class="tile" href="/onboard">
<div class="tile-head">
<span><span class="tile-slug">[01]</span> &nbsp; PRE-FLIGHT</span>
<span class="tile-badge">INTERNAL</span>
</div>
<div>
<div class="tile-title">ONBOARD</div>
<div class="tile-desc">Compile a Project Loading manifest — game, subtitle, countdown, camera/mic state. Pushes the channel title + category to Twitch.</div>
</div>
<div class="tile-foot">
<span class="tile-target"><span class="caret">▶</span>/onboard</span>
<span class="arrow">→</span>
</div>
</a>
<a class="tile cyan" href="/scenes">
<div class="tile-head">
<span><span class="tile-slug">[02]</span> &nbsp; ROUTES</span>
<span class="tile-badge">INTERNAL</span>
</div>
<div>
<div class="tile-title">SCENES</div>
<div class="tile-desc">Every overlay URL OBS browser-sources point at, plus the data endpoints (playlist, cover, audio stream).</div>
</div>
<div class="tile-foot">
<span class="tile-target"><span class="caret">▶</span>/scenes</span>
<span class="arrow">→</span>
</div>
</a>
<a class="tile warn" href="https://ophi118.com" target="_blank" rel="noopener">
<div class="tile-head">
<span><span class="tile-slug">[03]</span> &nbsp; LANDING</span>
<span class="tile-badge">EXTERNAL ↗</span>
</div>
<div>
<div class="tile-title">OPHI118.COM</div>
<div class="tile-desc">Public landing page for the OPHI-118 broadcast. Bio, schedule, social links.</div>
</div>
<div class="tile-foot">
<span class="tile-target"><span class="caret">▶</span>ophi118.com</span>
<span class="arrow">↗</span>
</div>
</a>
<a class="tile warn" href="https://gamez.ciemnosc.com" target="_blank" rel="noopener">
<div class="tile-head">
<span><span class="tile-slug">[04]</span> &nbsp; SERVERS</span>
<span class="tile-badge">EXTERNAL ↗</span>
</div>
<div>
<div class="tile-title">GAMEZ.CIEMNOSC.COM</div>
<div class="tile-desc">Roster of the self-hosted game servers currently live — connect strings, mod lists, player counts.</div>
</div>
<div class="tile-foot">
<span class="tile-target"><span class="caret">▶</span>gamez.ciemnosc.com</span>
<span class="arrow">↗</span>
</div>
</a>
</main>
<div class="scanlines"></div>
<div class="vignette"></div>
<div class="flicker"></div>
<script>
// UTC clock — same look as the in-scene HUD strip.
const clock = document.getElementById('clock');
function tick() {
const d = new Date();
const pad = n => String(n).padStart(2, '0');
clock.textContent = `${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}`;
}
tick();
setInterval(tick, 1000);
</script>
</body>
</html>