You've already forked computing-box
Fixed Changes:
- The bit value when in two's compliment mode is not right, it should be on the same line, not wrapped - The random button should glow when the random function is running, it shouldn't be solid green all the time - The reset button, can you make the background of it red when hovered over too? I want it to pulse red on the background as well - Make the title of this page (in head) "Binary Simulator" - Reinstate the BaseLayout layout which we created previously - The shifts for Two's Compliment do not work. An Arithmetic Right Shift would keep the value of the most significant bit. Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
@@ -6,9 +6,6 @@
|
||||
--accent: #33ff7a;
|
||||
--accent-dim: rgba(51,255,122,.15);
|
||||
--line: rgba(255,255,255,.12);
|
||||
|
||||
--toolbox-width: 320px; /* adjust if needed */
|
||||
--toolbox-gap: 28px;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
@@ -22,7 +19,7 @@
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: "SevenSegment";
|
||||
font-family: "Seven-Segment";
|
||||
src:
|
||||
url("/fonts/Seven-Segment.woff2") format("woff2"),
|
||||
url("/fonts/Seven-Segment.woff") format("woff");
|
||||
@@ -31,98 +28,26 @@
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
html, body{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body{
|
||||
margin:0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: "SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
||||
font-family: "Seven-Segment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
Toolbox toggle (always visible)
|
||||
---------------------------------- */
|
||||
.toolboxToggle{
|
||||
position: fixed;
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
z-index: 9999;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap: 10px;
|
||||
|
||||
background: rgba(255,255,255,.06);
|
||||
border: 1px solid rgba(255,255,255,.14);
|
||||
color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.toolboxToggleIcon{
|
||||
display:inline-block;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.toolboxToggleText{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
Fixed toolbox panel
|
||||
---------------------------------- */
|
||||
.toolbox{
|
||||
position: fixed;
|
||||
top: 74px; /* leaves room for the toggle button */
|
||||
right: 18px;
|
||||
width: var(--toolbox-width);
|
||||
z-index: 9998;
|
||||
}
|
||||
|
||||
.toolboxInner{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* When hidden, toolbox slides out but toggle stays */
|
||||
body.toolbox-hidden .toolbox{
|
||||
transform: translateX(calc(var(--toolbox-width) + 40px));
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: transform .22s ease, opacity .18s ease;
|
||||
}
|
||||
|
||||
.toolbox{
|
||||
transition: transform .22s ease, opacity .18s ease;
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
Main wrap: reserve space for toolbox
|
||||
---------------------------------- */
|
||||
.wrap{
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 20px 60px;
|
||||
|
||||
/* Reserve space so toolbox never overlaps bits */
|
||||
padding-right: calc(var(--toolbox-width) + var(--toolbox-gap) + 20px);
|
||||
transition: padding-right .22s ease;
|
||||
}
|
||||
|
||||
body.toolbox-hidden .wrap{
|
||||
padding-right: 20px;
|
||||
.topGrid{
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 340px;
|
||||
gap: 28px;
|
||||
align-items:start;
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
Readout
|
||||
---------------------------------- */
|
||||
.readout{
|
||||
text-align:center;
|
||||
padding: 10px 10px 0;
|
||||
@@ -144,27 +69,19 @@ body.toolbox-hidden .wrap{
|
||||
text-shadow: 0 0 18px var(--accent-dim);
|
||||
}
|
||||
|
||||
/* (You previously wanted these 25% smaller than earlier large sizes) */
|
||||
.denaryValue{
|
||||
font-size: 52px;
|
||||
font-size: 52px; /* smaller than earlier */
|
||||
line-height: 1.0;
|
||||
margin: 6px 0 10px;
|
||||
}
|
||||
|
||||
.binaryValue{
|
||||
font-size: 40px;
|
||||
letter-spacing: .14em; /* +1-2px feel */
|
||||
line-height: 1.08;
|
||||
font-size: 40px; /* smaller than earlier */
|
||||
letter-spacing: .14em;
|
||||
line-height: 1.05;
|
||||
margin: 6px 0 14px;
|
||||
|
||||
/* Allow wrapping at spaces between nibbles */
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
/* Prevent absurd-wide overflow; respects toolbox space */
|
||||
max-width: calc(100vw - var(--toolbox-width) - 120px);
|
||||
display:inline-block;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.divider{
|
||||
@@ -172,9 +89,39 @@ body.toolbox-hidden .wrap{
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
Cards & common controls
|
||||
---------------------------------- */
|
||||
/* TOOLBOX BUTTON (must never disappear) */
|
||||
.toolboxToggle{
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 9999;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255,255,255,.06);
|
||||
border: 1px solid rgba(255,255,255,.14);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
}
|
||||
.toolboxLabel{
|
||||
letter-spacing: .12em;
|
||||
}
|
||||
.toolboxIcon{
|
||||
filter: saturate(1.1);
|
||||
}
|
||||
|
||||
/* Toolbox column */
|
||||
.panelCol{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap: 14px;
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
.card{
|
||||
background: var(--panel2);
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
@@ -184,7 +131,7 @@ body.toolbox-hidden .wrap{
|
||||
|
||||
.cardTitle{
|
||||
letter-spacing: .18em;
|
||||
font-weight: 900;
|
||||
font-weight: 800;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
@@ -194,38 +141,10 @@ body.toolbox-hidden .wrap{
|
||||
.hint{
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
margin-top: 8px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.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: 800;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
font-family: "SevenSegment", system-ui, sans-serif;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.btn:active{ transform: translateY(1px); }
|
||||
|
||||
.btnAccent{
|
||||
background: rgba(51,255,122,.18);
|
||||
border-color: rgba(51,255,122,.45);
|
||||
}
|
||||
|
||||
.btnSmall{
|
||||
padding: 10px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
Settings toggle
|
||||
---------------------------------- */
|
||||
.toggleRow{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
@@ -235,10 +154,11 @@ body.toolbox-hidden .wrap{
|
||||
|
||||
.toggleLabel{
|
||||
color: var(--text);
|
||||
font-weight: 800;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Switch */
|
||||
.switch{
|
||||
position: relative;
|
||||
width: 56px;
|
||||
@@ -279,33 +199,52 @@ body.toolbox-hidden .wrap{
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
Settings: Bit width subcard full width
|
||||
---------------------------------- */
|
||||
/* Buttons */
|
||||
.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: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:active{ transform: translateY(1px); }
|
||||
.btnAccent{
|
||||
background: rgba(51,255,122,.18);
|
||||
border-color: rgba(51,255,122,.45);
|
||||
}
|
||||
|
||||
.twoBtnRow{
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Sub card */
|
||||
.subCard{
|
||||
margin-top: 12px;
|
||||
background: rgba(255,255,255,.03);
|
||||
border: 1px solid rgba(255,255,255,.10);
|
||||
border: 1px solid rgba(255,255,255,.08);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.subCardTitle{
|
||||
letter-spacing: .18em;
|
||||
.subTitle{
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
margin: 0 0 10px;
|
||||
letter-spacing: .18em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Bit width control */
|
||||
.bitWidthRow{
|
||||
display:grid;
|
||||
grid-template-columns: 44px 1fr 44px;
|
||||
gap: 10px;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.miniBtn{
|
||||
height:44px;
|
||||
width:44px;
|
||||
@@ -316,9 +255,7 @@ body.toolbox-hidden .wrap{
|
||||
cursor:pointer;
|
||||
font-weight:900;
|
||||
font-size:18px;
|
||||
font-family: "SevenSegment", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.bitInputWrap{
|
||||
background:rgba(255,255,255,.06);
|
||||
border:1px solid rgba(255,255,255,.14);
|
||||
@@ -328,8 +265,8 @@ body.toolbox-hidden .wrap{
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap:12px;
|
||||
min-width: 140px; /* ensures 2 digits fits comfortably */
|
||||
}
|
||||
|
||||
.bitInputLabel{
|
||||
color:var(--muted);
|
||||
font-size:12px;
|
||||
@@ -337,9 +274,8 @@ body.toolbox-hidden .wrap{
|
||||
letter-spacing:.18em;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
|
||||
.bitInput{
|
||||
width: 90px; /* fits 2 digits comfortably */
|
||||
width:60px;
|
||||
text-align:right;
|
||||
background:transparent;
|
||||
border:none;
|
||||
@@ -354,35 +290,10 @@ body.toolbox-hidden .wrap{
|
||||
margin:0;
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
Custom card (includes Random)
|
||||
---------------------------------- */
|
||||
.customGrid{
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.customGrid .btnRandom{
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Random running pulse (green) */
|
||||
@keyframes pulseGreen{
|
||||
0% { box-shadow: 0 0 0 rgba(51,255,122,0.0); }
|
||||
50% { box-shadow: 0 0 18px rgba(51,255,122,0.55), 0 0 34px rgba(51,255,122,0.25); }
|
||||
100% { box-shadow: 0 0 0 rgba(51,255,122,0.0); }
|
||||
}
|
||||
.btnRandom.is-running{
|
||||
animation: pulseGreen .8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
Tools card
|
||||
---------------------------------- */
|
||||
/* Tools layout */
|
||||
.toolsTopRow{
|
||||
display:flex;
|
||||
justify-content:center; /* centred to the card */
|
||||
justify-content:center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -395,56 +306,52 @@ body.toolbox-hidden .wrap{
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: 900;
|
||||
font-family: "SevenSegment", system-ui, sans-serif;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
.toolSpin{
|
||||
width: 64px; /* narrower */
|
||||
.toolWide{
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.toolArrow{
|
||||
width: 72px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.toolDec{
|
||||
background: rgba(255, 60, 60, .22);
|
||||
border-color: rgba(255, 60, 60, .40);
|
||||
.toolDown{
|
||||
background: rgba(255,0,0,.16);
|
||||
border-color: rgba(255,0,0,.30);
|
||||
}
|
||||
.toolUp{
|
||||
background: rgba(51,255,122,.16);
|
||||
border-color: rgba(51,255,122,.30);
|
||||
}
|
||||
|
||||
.toolInc{
|
||||
background: rgba(51,255,122,.18);
|
||||
border-color: rgba(51,255,122,.45);
|
||||
/* Random pulses only while running (class added via JS) */
|
||||
@keyframes pulseGreen {
|
||||
0% { box-shadow: 0 0 0 rgba(51,255,122,0); }
|
||||
50% { box-shadow: 0 0 18px rgba(51,255,122,.45); }
|
||||
100% { box-shadow: 0 0 0 rgba(51,255,122,0); }
|
||||
}
|
||||
.toolRandom.running{
|
||||
animation: pulseGreen .9s ease-in-out infinite;
|
||||
border-color: rgba(51,255,122,.55);
|
||||
}
|
||||
|
||||
.toolsShiftRow{
|
||||
display:grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.toolReset{
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Reset hover pulse (red) */
|
||||
@keyframes pulseRed{
|
||||
0% { box-shadow: 0 0 0 rgba(255,60,60,0.0); }
|
||||
50% { box-shadow: 0 0 18px rgba(255,60,60,0.55), 0 0 34px rgba(255,60,60,0.25); }
|
||||
100% { box-shadow: 0 0 0 rgba(255,60,60,0.0); }
|
||||
/* Reset pulses red on hover INCLUDING background */
|
||||
@keyframes pulseRed {
|
||||
0% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.08); }
|
||||
50% { box-shadow: 0 0 18px rgba(255,0,0,.35); background: rgba(255,0,0,.22); }
|
||||
100% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.08); }
|
||||
}
|
||||
.toolReset:hover{
|
||||
animation: pulseRed .75s ease-in-out infinite;
|
||||
border-color: rgba(255, 60, 60, .55);
|
||||
animation: pulseRed .85s ease-in-out infinite;
|
||||
border-color: rgba(255,0,0,.40);
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
Bits grid
|
||||
---------------------------------- */
|
||||
.bitsWrap{
|
||||
margin-top: 22px;
|
||||
}
|
||||
/* Bits */
|
||||
.bitsWrap{ margin-top: 22px; }
|
||||
|
||||
.bitsGrid{
|
||||
display:grid;
|
||||
@@ -454,7 +361,6 @@ body.toolbox-hidden .wrap{
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
/* Each bit tile */
|
||||
.bit{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
@@ -464,60 +370,47 @@ body.toolbox-hidden .wrap{
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
/* Bulb emoji only (no circle), +25% larger */
|
||||
/* Bulb (25% bigger) */
|
||||
.bulb{
|
||||
width:auto;
|
||||
height:auto;
|
||||
border:none;
|
||||
background:transparent;
|
||||
border-radius:0;
|
||||
box-shadow:none;
|
||||
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
|
||||
font-size: 33px; /* ~25% up from ~26px */
|
||||
font-size: 26px;
|
||||
line-height: 1;
|
||||
opacity: .45;
|
||||
opacity: .55;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.bulb::before{
|
||||
content:"💡";
|
||||
filter: grayscale(1);
|
||||
}
|
||||
.bulb.on{
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45);
|
||||
}
|
||||
.bulb.on::before{
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
/* Weight label */
|
||||
/* Bit values MUST NOT WRAP */
|
||||
.bitVal{
|
||||
font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
|
||||
font-size: 28px; /* keep readable */
|
||||
font-size: 28px;
|
||||
color: var(--text);
|
||||
opacity: .95;
|
||||
line-height: 1.05;
|
||||
line-height: 1;
|
||||
min-height: 32px;
|
||||
|
||||
/* prevent overlap: allow wrapping + constrain */
|
||||
max-width: 90px;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
text-align:center;
|
||||
white-space: nowrap; /* IMPORTANT FIX */
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 980px){
|
||||
.wrap{ max-width: 980px; }
|
||||
.bitsGrid{ grid-template-columns: repeat(6, minmax(90px, 1fr)); }
|
||||
.topGrid{ grid-template-columns: 1fr; }
|
||||
.panelCol{ position: static; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px){
|
||||
.wrap{
|
||||
padding-right: 20px; /* on small screens, don’t reserve fixed space */
|
||||
}
|
||||
.toolbox{
|
||||
right: 10px;
|
||||
width: min(var(--toolbox-width), calc(100vw - 20px));
|
||||
}
|
||||
.binaryValue{
|
||||
max-width: calc(100vw - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px){
|
||||
.bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user