alexander.lyall/computing-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

Binary Page Beta 1

Browse Source 
Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
Alexander Lyall
2025-12-16 17:18:03 +00:00
parent 91a07e49ae
commit f68aea4e33
3 changed files with 493 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

581
src/styles/binary.css
View File

@@ -1,219 +1,218 @@
:root{
--bg: #1f2027;
--panel2: rgba(255,255,255,.04);
--text: #e8e8ee;
--muted: #a9acb8;
--accent: #33ff7a;
--accent-dim: rgba(51,255,122,.15);
--line: rgba(255,255,255,.12);
--bg:#1f2027;
--panel2:rgba(255,255,255,.04);
--text:#e8e8ee;
--muted:#a9acb8;
--accent:#33ff7a;
--accent-dim:rgba(51,255,122,.15);
--line:rgba(255,255,255,.12);
/* right column sizing */
--sideW: 720px;
--sidePad: 24px;
/* header offset (tweak if your header is taller/shorter) */
--sideTop: 92px;
/* Toolbox sizing */
--toolboxW: 320px; /* default width */
--toolboxGap: 20px; /* gap from right edge */
--toolboxTop: 92px; /* below header area */
}
/* ---------- Fonts ---------- */
/* Numbers */
@font-face{
font-family: "DSEG7ClassicRegular";
font-family:"DSEG7ClassicRegular";
src:
url("/fonts/DSEG7Classic-Regular.woff") format("woff"),
url("/fonts/DSEG7Classic-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
font-weight:400;
font-style:normal;
font-display:swap;
}
/* Text */
@font-face{
font-family: "SevenSegment";
font-family:"SevenSegment";
src:
url("/fonts/Seven-Segment.woff2") format("woff2"),
url("/fonts/Seven-Segment.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
font-weight:400;
font-style:normal;
font-display:swap;
}
*{ box-sizing:border-box; }
body{
margin:0;
font-family: "SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--text);
background:var(--bg);
color:var(--text);
font-family:"SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
/* Leave enough room for the fixed right panel */
/* When toolbox is collapsed, we remove the reserved padding */
body.toolbox-collapsed{
--toolboxW: 0px;
}
/* ---------- Main layout ---------- */
.wrap{
max-width: 1200px;
margin: 0 auto;
padding: 32px 20px 60px;
padding-right: calc(var(--sideW) + (var(--sidePad) * 2));
/* reserve room for the fixed toolbox so it NEVER overlaps */
padding-right: calc(20px + var(--toolboxW) + var(--toolboxGap));
transition: padding-right .2s ease;
}
body.toolbox-collapsed .wrap{
padding-right: 20px;
}
.topGrid{
display:grid;
grid-template-columns: 1fr;
gap: 28px;
gap:28px;
align-items:start;
}
.readout{
text-align:center;
padding: 10px 10px 0;
padding:10px 10px 0;
}
.label{
letter-spacing: .18em;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
font-size: 14px;
margin-top: 10px;
letter-spacing:.18em;
font-weight:700;
color:var(--muted);
text-transform:uppercase;
font-size:14px;
margin-top:10px;
}
/* All numbers */
.num,
.bitVal,
.bitInput{
font-family:"DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight:400;
}
/* Denary/Binary display (25% smaller than before) */
.num{
font-family: "DSEG7ClassicRegular", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight: 400;
color: var(--accent);
text-shadow: 0 0 18px var(--accent-dim);
color:var(--accent);
text-shadow:0 0 18px var(--accent-dim);
letter-spacing: 0.03em; /* + a pixel-ish feel */
}
/* 25% smaller */
.denaryValue{
font-size: 53px;
line-height: 1.0;
margin: 6px 0 10px;
font-size: 52px; /* was ~70 */
line-height:1.0;
margin:6px 0 10px;
}
/* 25% smaller + slightly wider spacing */
.binaryValue{
font-size: 39px;
letter-spacing: calc(.12em + 2px);
line-height: 1.0;
margin: 6px 0 14px;
white-space: pre; /* preserve spaces */
font-size: 39px; /* was ~52 */
line-height:1.05;
margin:6px 0 14px;
white-space: pre-wrap;
word-break: normal;
overflow-wrap: normal;
letter-spacing: 0.06em; /* widen characters slightly */
}
/* Buttons */
.controlsStack{
margin-top: 10px;
margin-top:10px;
display:flex;
flex-direction:column;
gap: 10px;
gap:10px;
align-items:center;
}
.controlsRow{
display:flex;
gap: 12px;
gap:12px;
justify-content:center;
flex-wrap:wrap;
}
.btn{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
padding: 12px 14px;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
min-width: 170px;
font-family: "SevenSegment", system-ui, sans-serif;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
color:#fff;
padding:12px 14px;
border-radius:12px;
font-weight:700;
cursor:pointer;
min-width:170px;
font-family:"SevenSegment", system-ui, sans-serif;
letter-spacing: .06em;
}
.btn:active{ transform: translateY(1px); }
.btnAccent{
background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45);
background:rgba(51,255,122,.18);
border-color:rgba(51,255,122,.45);
}
.divider{
margin-top: 26px;
border-top: 1px solid var(--line);
margin-top:26px;
border-top:1px solid var(--line);
}
/* -------------------------
RIGHT COLUMN: pinned + collapsible
------------------------- */
.panelCol{
position: fixed;
right: var(--sidePad);
top: var(--sideTop);
width: var(--sideW);
/* ---------- Bits grid ---------- */
.bitsWrap{ margin-top:22px; }
/* auto-fit prevents overlap at large values without shrinking the digits */
.bitsGrid{
display:grid;
gap:18px;
justify-content:center;
padding-top:18px;
/* each tile has a safe min width so large labels don't collide */
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
max-width: 100%;
}
.bit{
display:flex;
flex-direction:column;
gap: 14px;
z-index: 50;
transition: transform .2s ease;
}
/* collapse leaves a small handle visible */
.panelCol.isCollapsed{
transform: translateX(calc(100% - 52px));
}
.panelToggle{
position: absolute;
left: -52px;
top: 0;
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: #fff;
cursor: pointer;
font-weight: 900;
display:flex;
align-items:center;
justify-content:center;
font-family: "SevenSegment", system-ui, sans-serif;
gap:10px;
padding:8px 4px;
text-align:center;
min-width:120px;
}
/* cards */
.card{
background: var(--panel2);
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
padding: 14px;
.bulb{
/* NO circle/ring. Just the emoji. 25% bigger than prior ~26px -> ~33px */
font-size: 33px;
line-height:1;
background:transparent;
border:none;
width:auto;
height:auto;
opacity:.45;
filter: grayscale(1);
text-shadow:none;
user-select:none;
}
.cardTitle{
letter-spacing: .18em;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
font-size: 12px;
margin: 0 0 10px;
.bitVal{
font-size:28px;
color:var(--text);
opacity:.95;
line-height:1;
min-height:32px;
white-space: nowrap; /* stop wrapping into each other */
letter-spacing: 0.02em;
}
.hint{
color: var(--muted);
font-size: 12px;
margin-top: 8px;
line-height: 1.35;
}
.toggleRow{
display:flex;
align-items:center;
justify-content:space-between;
gap: 10px;
}
.toggleLabel{
color: var(--text);
font-weight: 700;
font-size: 14px;
}
/* Shared toggle switch */
/* Shared toggle switch (bit switches + mode) */
.switch{
position: relative;
width: 56px;
height: 34px;
position:relative;
width:56px;
height:34px;
display:inline-block;
flex: 0 0 auto;
flex:0 0 auto;
}
.switch input{
opacity:0;
@@ -223,88 +222,198 @@ body{
.slider{
position:absolute;
inset:0;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.14);
border-radius: 999px;
transition: .18s ease;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
border-radius:999px;
transition:.18s ease;
}
.slider::before{
content:"";
position:absolute;
height: 28px;
width: 28px;
left: 3px;
top: 2px;
background: rgba(255,255,255,.92);
border-radius: 50%;
transition: .18s ease;
height:28px;
width:28px;
left:3px;
top:2px;
background:rgba(255,255,255,.92);
border-radius:50%;
transition:.18s ease;
}
.switch input:checked + .slider{
background: rgba(51,255,122,.20);
border-color: rgba(51,255,122,.55);
background:rgba(51,255,122,.20);
border-color:rgba(51,255,122,.55);
}
.switch input:checked + .slider::before{
transform: translateX(22px);
background: var(--accent);
background:var(--accent);
}
/* Tools + Bit Width side-by-side */
.sideRow{
display:flex;
gap: 14px;
}
.sideRow .card{
flex: 1 1 0;
}
/* ---------- Toolbox (fixed, non-overlapping) ---------- */
.toolboxToggle{
position: fixed;
top: 18px;
right: var(--toolboxGap);
z-index: 40;
/* Tools layout: arrows row + reset/random row */
.toolRow, .toolRow2{
display:flex;
gap: 10px;
align-items:center;
}
gap:10px;
/* Reset/Random = 50% current width (explicit) */
.toolBtn{
height: 48px;
border-radius: 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: #fff;
cursor: pointer;
font-weight: 800;
font-family: "SevenSegment", system-ui, sans-serif;
border:1px solid rgba(255,255,255,.14);
color:#fff;
border-radius: 12px;
padding: 10px 12px;
cursor:pointer;
font-family:"SevenSegment", system-ui, sans-serif;
letter-spacing:.06em;
}
/* Reset/Random smaller */
.toolBtn.toolHalf{
width: 120px;
.toolboxIcon{ font-size: 16px; line-height:1; }
.toolboxText{ font-weight:800; font-size: 14px; }
.toolboxFixed{
position: fixed;
top: var(--toolboxTop);
right: var(--toolboxGap);
width: var(--toolboxW);
z-index: 35;
transition: transform .2s ease, opacity .2s ease;
}
/* Arrows half of that */
.toolBtn.toolQuarter{
width: 60px;
font-size: 22px;
padding: 0;
body.toolbox-collapsed .toolboxFixed{
transform: translateX(calc(100% + var(--toolboxGap)));
opacity: 0;
pointer-events: none;
}
/* colour arrows */
.toolBtn.toolUp{
background: rgba(51,255,122,.18);
border-color: rgba(51,255,122,.45);
}
.toolBtn.toolDown{
background: rgba(255,80,80,.18);
border-color: rgba(255,80,80,.45);
/* cards inside toolbox */
.panelCol{
display:flex;
flex-direction:column;
gap:14px;
}
/* Bit width control */
.bitWidthRow{
.card{
background: var(--panel2);
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
padding:14px;
backdrop-filter: blur(6px);
}
.cardTitle{
letter-spacing:.18em;
font-weight:800;
color:var(--muted);
text-transform:uppercase;
font-size:12px;
margin:0 0 10px;
}
.hint{
color:var(--muted);
font-size:12px;
margin-top:8px;
line-height:1.35;
}
.toggleRow{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.toggleLabel{
color:var(--text);
font-weight:700;
font-size:14px;
}
/* ---------- Tools merged layout ---------- */
.toolsTopRow{
display:grid;
grid-template-columns: 1fr 1fr;
gap:10px;
align-items:center;
margin-bottom: 10px;
}
.spinGroup{
display:grid;
grid-template-columns: 1fr 1fr;
gap:10px;
}
.toolsBottomRow{
display:grid;
grid-template-columns: 1.25fr 0.75fr; /* bit width gets more space than random */
gap:10px;
align-items:end;
}
.toolBtn{
height:48px;
border-radius:12px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
color:#fff;
cursor:pointer;
font-weight:800;
font-family:"SevenSegment", system-ui, sans-serif;
letter-spacing:.06em;
}
.toolSpin{
font-size:22px;
width: 100%; /* kept narrow via grid allocation */
}
.toolDown{
background: rgba(255, 70, 70, .20);
border-color: rgba(255, 70, 70, .45);
}
.toolUp{
background: rgba(51,255,122,.20);
border-color: rgba(51,255,122,.55);
}
.toolReset{
width: 100%;
}
.toolRandom{
width: 100%;
/* make random ~5% narrower by padding reduction (without breaking grid) */
padding-left: 10px;
padding-right: 10px;
}
/* bit width mini block */
.bitWidthMini{
display:flex;
flex-direction:column;
gap:6px;
}
.bitWidthMiniLabel{
color:var(--muted);
font-size:12px;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
}
.bitWidthMiniRow{
display:grid;
grid-template-columns: 44px 1fr 44px;
gap: 10px;
gap:10px;
align-items:center;
}
.miniBtn{
height:44px;
width:44px;
@@ -315,107 +424,39 @@ body{
cursor:pointer;
font-weight:900;
font-size:18px;
font-family: "SevenSegment", system-ui, sans-serif;
font-family:"SevenSegment", system-ui, sans-serif;
}
.bitInputWrap{
.bitInput{
width: 100%;
min-width: 64px; /* MUST fit 2 digits comfortably */
text-align:center;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);
border-radius:12px;
padding:10px 12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.bitInputLabel{
color:var(--muted);
font-size:12px;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
}
.bitInput{
width:86px;
text-align:right;
background:transparent;
border:none;
padding:10px 8px;
outline:none;
color:var(--accent);
font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size:28px;
}
.bitInput::-webkit-outer-spin-button,
.bitInput::-webkit-inner-spin-button{
-webkit-appearance:none;
margin:0;
}
/* Bits: wrap every 8, centred */
.bitsWrap{
margin-top: 22px;
}
.bitsGrid{
display:grid;
gap: 18px;
justify-content:center;
grid-template-columns: repeat(8, minmax(90px, 1fr));
padding-top: 18px;
}
.bitsGrid.bitsFew{
grid-template-columns: repeat(var(--cols, 4), minmax(90px, 1fr));
}
.bit{
display:flex;
flex-direction:column;
align-items:center;
gap: 10px;
padding: 8px 4px;
text-align:center;
}
/* Bulb: no circle here (JS controls the emoji), but keep sizing if used */
.bulb{
border: none;
background: transparent;
width: auto;
height: auto;
border-radius: 0;
box-shadow: none;
display:flex;
align-items:center;
justify-content:center;
line-height: 1;
opacity: .55;
font-size: 33px; /* 25% larger from 26px */
}
.bitVal{
font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
font-size: 28px;
color: var(--text);
opacity: .95;
line-height: 1;
min-height: 32px;
}
/* responsive: stop pinning on small screens */
/* ---------- Responsive ---------- */
@media (max-width: 980px){
.panelCol{
position: static;
width: auto;
transform: none !important;
}
.panelToggle{ display:none; }
.wrap{
/* On small screens, don’t reserve fixed sidebar space; toolbox floats */
padding-right: 20px;
}
.toolboxFixed{
width: min(320px, calc(100vw - 40px));
}
}
@media (max-width: 520px){
.btn{ min-width: 150px; }
.bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
.toolBtn.toolHalf{ width: 100px; }
.toolBtn.toolQuarter{ width: 52px; }
.btn{ min-width:150px; }
}