You've already forked computing-box
Alexander Lyall
50829688e3
- Introduce new Binary Simulator page with adjustable bit width (4–16 bits) - Support unsigned and two’s complement representations with live conversion - Add left/right shift operations and custom binary/denary input - Implement accessible bulb-and-switch UI with MD3-inspired styling - Add seven-segment display font assets for realistic number output - Establish shared base layout, styles, and tooling for future simulators Signed-off-by: Alexander Lyall <alex@adcm.uk>
69 lines
877 B
CSS
69 lines
877 B
CSS
.binary-container {
|
|
max-width: 1100px;
|
|
margin: auto;
|
|
padding: 2rem;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.display {
|
|
text-align: center;
|
|
}
|
|
|
|
.label {
|
|
font-size: 1.2rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.number {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
color: #00ff66;
|
|
}
|
|
|
|
.controls {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.controls button {
|
|
margin: 0.25rem;
|
|
padding: 0.6rem 1rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.bits {
|
|
display: grid;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
gap: 1rem;
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.bit {
|
|
width: 40px;
|
|
height: 80px;
|
|
background: #333;
|
|
border-radius: 20px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.bit::after {
|
|
content: "";
|
|
width: 32px;
|
|
height: 32px;
|
|
background: #555;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
bottom: 6px;
|
|
left: 4px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.bit.on {
|
|
background: #00c853;
|
|
}
|
|
|
|
.bit.on::after {
|
|
bottom: 42px;
|
|
background: #eaffea;
|
|
}
|