observer effect content
This commit is contained in:
Ellie
parent
625a847a81
commit
e4ee25295c
23 changed files with 2982 additions and 0 deletions
260
services/observer-effect/site/control.css
Normal file
260
services/observer-effect/site/control.css
Normal file
|
|
@ -0,0 +1,260 @@
|
|||
/* Array Control — the Handler's cockpit. Same steel as the chronometer,
|
||||
but laid out as a dense bank of switches and push-buttons. */
|
||||
|
||||
:root {
|
||||
--bg: #0a0b0c;
|
||||
--steel-hi: #4c5054;
|
||||
--steel: #2c2f32;
|
||||
--steel-lo: #16181a;
|
||||
--label: #c9cdd1;
|
||||
--amber: #ffb347;
|
||||
--red: #ff3b30;
|
||||
--green: #46e06a;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body.panel {
|
||||
min-height: 100vh;
|
||||
padding: clamp(0.6rem, 2.5vw, 2rem);
|
||||
background: radial-gradient(120% 120% at 50% 0%, #15171a, var(--bg) 70%);
|
||||
color: var(--label);
|
||||
font-family: "Helvetica Neue", Arial, system-ui, sans-serif;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.rig {
|
||||
width: min(96vw, 760px);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
/* engraved header */
|
||||
.plate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.16em;
|
||||
font-size: clamp(0.7rem, 2vw, 0.95rem);
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
.link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4em;
|
||||
color: #9aa0a4;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.lamp {
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
border-radius: 50%;
|
||||
background: #2a2a2a;
|
||||
box-shadow: inset 0 0 3px #000;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.lamp--on {
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 8px var(--green);
|
||||
}
|
||||
|
||||
/* --- mirror --------------------------------------------------------------- */
|
||||
.mirror {
|
||||
padding: clamp(0.7rem, 2.5vw, 1.2rem);
|
||||
border-radius: 12px;
|
||||
background: radial-gradient(120% 160% at 50% 0%, #141312, #070605);
|
||||
border: 1px solid #000;
|
||||
box-shadow: inset 0 5px 16px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
.mirror-time {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.big {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: clamp(2.4rem, 12vw, 4.5rem);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.04em;
|
||||
color: #ffe2bc;
|
||||
text-shadow: 0 0 6px #ff7a1e, 0 0 22px #ff6a00, 0 0 50px rgba(255, 90, 0, 0.5);
|
||||
}
|
||||
.run {
|
||||
letter-spacing: 0.2em;
|
||||
font-size: 0.75rem;
|
||||
color: #7d8286;
|
||||
}
|
||||
.run.live {
|
||||
color: var(--green);
|
||||
text-shadow: 0 0 8px rgba(70, 224, 106, 0.6);
|
||||
}
|
||||
.mirror-meta {
|
||||
margin-top: 0.6rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.6rem 1.4rem;
|
||||
font-size: clamp(0.6rem, 1.6vw, 0.8rem);
|
||||
letter-spacing: 0.12em;
|
||||
color: #8b9094;
|
||||
}
|
||||
.mirror-meta b {
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
/* --- banks ---------------------------------------------------------------- */
|
||||
.bank {
|
||||
padding: 0.8rem clamp(0.7rem, 2.5vw, 1.1rem) 1rem;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, var(--steel-hi) -40%, var(--steel) 50%, var(--steel-lo));
|
||||
border: 1px solid #0d0e0f;
|
||||
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), inset 0 -3px 8px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.bank-label,
|
||||
.sub {
|
||||
display: block;
|
||||
letter-spacing: 0.18em;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 700;
|
||||
color: #8b9094;
|
||||
margin-bottom: 0.6rem;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.sub {
|
||||
display: inline;
|
||||
margin: 0 0.4rem 0 0;
|
||||
align-self: center;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.row + .row {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
/* --- buttons -------------------------------------------------------------- */
|
||||
.btn {
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.8rem;
|
||||
color: #e7eaed;
|
||||
padding: 0.55rem 0.9rem;
|
||||
border-radius: 7px;
|
||||
border: 1px solid #000;
|
||||
background: linear-gradient(180deg, #3c4044, #23262a);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
transition: transform 0.05s, filter 0.1s;
|
||||
}
|
||||
.btn:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
.btn:active {
|
||||
transform: translateY(1px);
|
||||
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.btn--wide {
|
||||
flex: 1;
|
||||
}
|
||||
.btn.active {
|
||||
color: #0a0b0c;
|
||||
background: linear-gradient(180deg, #ffd98a, var(--amber));
|
||||
box-shadow: 0 0 10px rgba(255, 179, 71, 0.6);
|
||||
}
|
||||
.btn--amber {
|
||||
color: #2a1c00;
|
||||
background: linear-gradient(180deg, #ffd98a, var(--amber));
|
||||
}
|
||||
.btn--red {
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, #ff6a60, var(--red));
|
||||
}
|
||||
.btn--big {
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
padding: 0.9rem;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
.jump {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
padding: 0.5rem 0.7rem;
|
||||
}
|
||||
.jump b {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.jump span {
|
||||
font-weight: 400;
|
||||
font-size: 0.62rem;
|
||||
letter-spacing: 0.06em;
|
||||
color: #aeb3b7;
|
||||
}
|
||||
.jump.btn--amber span,
|
||||
.jump.btn--red span {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.iters .iter {
|
||||
flex: 1;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
/* --- inputs --------------------------------------------------------------- */
|
||||
input {
|
||||
font: inherit;
|
||||
font-size: 0.85rem;
|
||||
color: #e7eaed;
|
||||
background: #101214;
|
||||
border: 1px solid #000;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem 0.6rem;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
input:focus {
|
||||
outline: 1px solid var(--amber);
|
||||
}
|
||||
#token,
|
||||
#msg {
|
||||
flex: 1;
|
||||
min-width: 8rem;
|
||||
}
|
||||
.hint {
|
||||
font-size: 0.7rem;
|
||||
color: var(--amber);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.foot {
|
||||
text-align: center;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.1em;
|
||||
color: #7d8286;
|
||||
}
|
||||
.foot a {
|
||||
color: var(--amber);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue