You've already forked computing-box
feat(app): update branding, improve button animations, and complete PC Components simulator
- Replace logo with updated Computing:Box branding assets - Fix animations for Random and Reset buttons for smoother interaction - Implement full first version of the PC Components simulator - Update built output to reflect new assets, layout, and functionality - Remove legacy assets and outdated build files Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
@@ -37,7 +37,7 @@ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--
|
||||
.siteNav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(0,0,0,.10); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); margin-bottom: 25px; }
|
||||
.navInner { height: 90px; max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
|
||||
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
|
||||
.brandLogo { width: 2.5em; height: 2.5em; image-rendering: pixelated; }
|
||||
.brandLogo { width: 75px; height: 75px; image-rendering: pixelated; }
|
||||
.brandName { letter-spacing: .12em; font-weight: 900; font-size: 18px; }
|
||||
.navLinks { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
|
||||
.navLinks a { color: var(--muted); text-decoration: none; font-weight: 800; letter-spacing: .12em; font-size: 16px; }
|
||||
@@ -89,7 +89,7 @@ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--
|
||||
.switch input { display: none; }
|
||||
.slider { position: absolute; inset: 0; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; transition: .2s ease; }
|
||||
.slider::before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 2px; background: rgba(255,255,255,.92); border-radius: 999px; transition: .2s ease; pointer-events: none; }
|
||||
.switch input:checked + .slider { background: rgba(40,240,122,.25); border-color: rgba(40,240,122,.30); }
|
||||
.switch input:checked + .slider { background: rgba(40,240,122,.30); border-color: rgba(40,240,122,.30); }
|
||||
.switch input:checked + .slider::before { transform: translateX(28px); }
|
||||
|
||||
/* --- HEXADECIMAL --- */
|
||||
@@ -225,4 +225,148 @@ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--
|
||||
font-weight: 400;
|
||||
line-height: 150%;
|
||||
margin: 0 0 2em 2em;
|
||||
}
|
||||
|
||||
.btnRandomRunning {
|
||||
background: rgba(40,240,122,.18) !important;
|
||||
border-color: rgba(40,240,122,.35) !important;
|
||||
color: rgba(232,232,238,.95) !important; /* Added this so the text pops like the reset button */
|
||||
animation: randomPulse 750ms ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes randomPulse {
|
||||
0% { box-shadow: 0 0 0 rgba(40,240,122,0); }
|
||||
50% { box-shadow: 0 0 22px rgba(40,240,122,.38); } /* Matched the .38 opacity peak */
|
||||
100% { box-shadow: 0 0 0 rgba(40,240,122,0); }
|
||||
}
|
||||
|
||||
.btnReset { color: rgba(232,232,238,.95); }
|
||||
.btnReset:hover {
|
||||
background: rgba(255,80,80,.18);
|
||||
border-color: rgba(255,80,80,.35);
|
||||
animation: resetPulse 750ms ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes resetPulse {
|
||||
0% { box-shadow: 0 0 0 rgba(255,80,80,0); }
|
||||
50% { box-shadow: 0 0 22px rgba(255,80,80,.38); }
|
||||
100% { box-shadow: 0 0 0 rgba(255,80,80,0); }
|
||||
}
|
||||
|
||||
/* --- ACCORDION ANIMATIONS FOR ALL TOOLBOXES --- */
|
||||
.panelCol .cardTitle,
|
||||
.pb-toolbox .cardTitle,
|
||||
.lg-toolbox .cardTitle {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.panelCol .cardTitle::after,
|
||||
.pb-toolbox .cardTitle::after,
|
||||
.lg-toolbox .cardTitle::after {
|
||||
content: '▼';
|
||||
font-size: 0.7em;
|
||||
opacity: 0.6;
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
.panelCol .card.collapsed .cardTitle::after,
|
||||
.pb-toolbox .card.collapsed .cardTitle::after,
|
||||
.lg-toolbox .card.collapsed .cardTitle::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.panelCol .cardBody,
|
||||
.pb-toolbox .cardBody,
|
||||
.lg-toolbox .cardBody {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
transition: grid-template-rows 350ms cubic-bezier(0.2, 0.9, 0.2, 1);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.panelCol .card.collapsed .cardBody,
|
||||
.pb-toolbox .card.collapsed .cardBody,
|
||||
.lg-toolbox .card.collapsed .cardBody {
|
||||
grid-template-rows: 0fr;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.panelCol .cardBodyInner,
|
||||
.pb-toolbox .cardBodyInner,
|
||||
.lg-toolbox .cardBodyInner {
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
transition: opacity 250ms ease 100ms, visibility 0s 0s;
|
||||
}
|
||||
|
||||
.panelCol .card.collapsed .cardBodyInner,
|
||||
.pb-toolbox .card.collapsed .cardBodyInner,
|
||||
.lg-toolbox .card.collapsed .cardBodyInner {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 200ms ease 0s, visibility 0s 200ms;
|
||||
}
|
||||
|
||||
/* --- BASE STATE: Lock the scale so it never stretches --- */
|
||||
.btnRandom, #btnRandom,
|
||||
.btnReset, #btnReset {
|
||||
transform: scale(1) !important;
|
||||
transition: transform 0.1s ease-out, border-color 0.2s ease-out, color 0.2s ease-out !important;
|
||||
}
|
||||
|
||||
/* --- THE PULSE ANIMATIONS --- */
|
||||
@keyframes neonPulseGreen {
|
||||
0%, 100% {
|
||||
background-color: rgba(40, 240, 122, 0.05);
|
||||
box-shadow: inset 0 0 10px rgba(40, 240, 122, 0.4),
|
||||
0 0 5px rgba(40, 240, 122, 0.2);
|
||||
}
|
||||
50% {
|
||||
background-color: rgba(40, 240, 122, 0.15);
|
||||
box-shadow: inset 0 0 22px rgba(40, 240, 122, 0.8),
|
||||
0 0 12px rgba(40, 240, 122, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes neonPulseRed {
|
||||
0%, 100% {
|
||||
background-color: rgba(255, 85, 85, 0.05);
|
||||
box-shadow: inset 0 0 10px rgba(255, 85, 85, 0.4),
|
||||
0 0 5px rgba(255, 85, 85, 0.2);
|
||||
}
|
||||
50% {
|
||||
background-color: rgba(255, 85, 85, 0.15);
|
||||
box-shadow: inset 0 0 22px rgba(255, 85, 85, 0.8),
|
||||
0 0 12px rgba(255, 85, 85, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- HOVER STATES: Trigger the infinite pulse --- */
|
||||
.btnRandom:hover, .btnRandom:focus, .btnRandom.active,
|
||||
#btnRandom:hover, #btnRandom:focus, #btnRandom.active {
|
||||
border-color: #28f07a !important;
|
||||
color: #28f07a !important;
|
||||
/* 1.5s cycle, infinite loop, smooth easing */
|
||||
animation: neonPulseGreen 1.5s infinite ease-in-out !important;
|
||||
}
|
||||
|
||||
.btnReset:hover, .btnReset:focus, .btnReset.active,
|
||||
#btnReset:hover, #btnReset:focus, #btnReset.active {
|
||||
border-color: #ff5555 !important;
|
||||
color: #ff5555 !important;
|
||||
/* 1.5s cycle, infinite loop, smooth easing */
|
||||
animation: neonPulseRed 1.5s infinite ease-in-out !important;
|
||||
}
|
||||
|
||||
/* --- CLICK STATE: Interrupt the pulse and shrink --- */
|
||||
.btnRandom:active, #btnRandom:active,
|
||||
.btnReset:active, #btnReset:active {
|
||||
transform: scale(0.96) !important;
|
||||
animation: none !important; /* Immediately kill the pulse while clicked */
|
||||
background-color: transparent !important;
|
||||
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8) !important;
|
||||
}
|
||||
@@ -68,32 +68,65 @@ body:has(#logicPage) .pageWrap {
|
||||
}
|
||||
.lg-zoom-btn:hover { background: rgba(255,255,255,0.1); border-color: #28f07a; color: #28f07a; }
|
||||
|
||||
/* Update the SVG layer to sit ON TOP of nodes */
|
||||
/* Move the wire layer behind the nodes */
|
||||
.lg-svg-layer {
|
||||
position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1; /* Lower than nodes */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Wires */
|
||||
/* Wires - allow them to be clickable even behind the 'hit area' of ports */
|
||||
.lg-wire {
|
||||
stroke: rgba(255,255,255,0.25); stroke-width: 6; fill: none; stroke-linecap: round;
|
||||
transition: stroke 0.1s ease, filter 0.1s ease, stroke-width 0.1s ease;
|
||||
pointer-events: stroke; cursor: pointer;
|
||||
stroke: #ffffff40;
|
||||
stroke-width: 6;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
transition: stroke .1s ease,filter .1s ease,stroke-width .1s ease;
|
||||
pointer-events: stroke;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
.lg-wire:hover {
|
||||
stroke: #fff9;
|
||||
stroke-width: 10
|
||||
}
|
||||
.lg-wire.active {
|
||||
stroke: #28f07a;
|
||||
filter: drop-shadow(0 0 6px rgba(40,240,122,.6))
|
||||
}
|
||||
.lg-wire.active:hover {
|
||||
stroke: #5dff9e
|
||||
}
|
||||
.lg-wire:hover { stroke: rgba(255,255,255,0.6); stroke-width: 10; }
|
||||
.lg-wire.active { stroke: #28f07a; filter: drop-shadow(0 0 6px rgba(40,240,122,0.6)); }
|
||||
.lg-wire.active:hover { stroke: #5dff9e; }
|
||||
.lg-wire.selected {
|
||||
stroke: #ff5555 !important; stroke-width: 8 !important; stroke-dasharray: 8 8;
|
||||
filter: drop-shadow(0 0 8px rgba(255,85,85,0.8)) !important; animation: wireDash 1s linear infinite;
|
||||
stroke: #f55!important;
|
||||
stroke-width: 8!important;
|
||||
stroke-dasharray: 8 8;
|
||||
filter: drop-shadow(0 0 8px rgba(255,85,85,.8))!important;
|
||||
animation: wireDash 1s linear infinite
|
||||
}
|
||||
@keyframes wireDash {
|
||||
to {
|
||||
stroke-dashoffset: -16
|
||||
}
|
||||
}
|
||||
.lg-wire-temp {
|
||||
stroke: #fff6;
|
||||
stroke-dasharray: 8 8;
|
||||
pointer-events: none
|
||||
}
|
||||
@keyframes wireDash { to { stroke-dashoffset: -16; } }
|
||||
.lg-wire-temp { stroke: rgba(255,255,255,0.4); stroke-dasharray: 8 8; pointer-events: none; }
|
||||
|
||||
/* Nodes */
|
||||
/* Nodes - move them in front of wires */
|
||||
.lg-node {
|
||||
position: absolute; background: transparent; border: none; border-radius: 0; padding: 4px;
|
||||
display: flex; flex-direction: column; align-items: center; cursor: grab;
|
||||
z-index: 10; user-select: none; transition: filter 0.2s;
|
||||
pointer-events: auto; /* Re-enables interaction inside the viewport */
|
||||
position: absolute;
|
||||
z-index: 10; /* Higher than wires */
|
||||
pointer-events: auto;
|
||||
user-select: none;
|
||||
}
|
||||
.lg-node:active { cursor: grabbing; z-index: 20; }
|
||||
.lg-node.selected { filter: drop-shadow(0 0 10px rgba(255,85,85,0.8)); }
|
||||
@@ -108,13 +141,24 @@ body:has(#logicPage) .pageWrap {
|
||||
.lg-line-svg { width: 30px; height: 50px; display: block; }
|
||||
|
||||
/* Connection Ports */
|
||||
/* Update ports to sit even higher so they stay clickable */
|
||||
/* Ports - Ensure the dots are the top-most layer */
|
||||
.lg-port {
|
||||
width: 16px; height: 16px; background: #a9acb8; border-radius: 50%; cursor: crosshair;
|
||||
border: 3px solid var(--bg); box-shadow: 0 0 0 1px rgba(255,255,255,0.2); transition: all 0.2s;
|
||||
position: absolute; z-index: 5; transform: translate(-50%, -50%);
|
||||
width: 12px; /* Balanced size */
|
||||
height: 12px;
|
||||
background: #a9acb8;
|
||||
border: 2px solid #1f2027; /* Dark border helps it 'pop' over glowing wires */
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
z-index: 100; /* Absolute top */
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: crosshair;
|
||||
}
|
||||
.lg-port:hover { transform: translate(-50%, -50%) scale(1.3); background: #fff; }
|
||||
.lg-port.active { background: #28f07a; box-shadow: 0 0 12px rgba(40,240,122,0.8); border-color: #1f2027; }
|
||||
.lg-port.active {
|
||||
background: #28f07a;
|
||||
box-shadow: 0 0 8px rgba(40,240,122,.45);
|
||||
}
|
||||
|
||||
/* === FLOATING TOOLBOX === */
|
||||
.toolboxToggle {
|
||||
@@ -162,4 +206,15 @@ body:has(#logicPage) .pageWrap {
|
||||
.tt-table { width: 100%; border-collapse: collapse; text-align: center; font-family: var(--num-font); font-size: 14px; color: #e8e8ee; }
|
||||
.tt-table th { position: sticky; top: 0; background: rgba(31,32,39,0.95); padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.15); color: var(--muted); font-family: var(--bit-font); font-weight: normal; }
|
||||
.tt-table td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); }
|
||||
.tt-table .tt-on { color: #28f07a; text-shadow: 0 0 8px rgba(40,240,122,0.5); }
|
||||
.tt-table .tt-on { color: #28f07a; text-shadow: 0 0 8px rgba(40,240,122,0.5); }
|
||||
|
||||
|
||||
/* Ensure the active-sim class actually changes the color */
|
||||
.active-sim .slider {
|
||||
background-color: rgba(40,240,122,.25) !important; /* Bright Green */
|
||||
box-shadow: 0 0 15px rgba(40, 240, 122, 0.5);
|
||||
}
|
||||
|
||||
.active-sim .slider::before {
|
||||
transform: translateX(28px) !important;
|
||||
}
|
||||
@@ -63,7 +63,38 @@
|
||||
.hexColWeight { font-family: var(--bit-font); font-size: 40px; color: rgba(232,232,238,.6); margin-top: 14px; }
|
||||
|
||||
/* --- TOOLBOX COMPONENTS FOR NUMBERS --- */
|
||||
.panelCol { position: fixed; top: var(--toolbox-top); right: 22px; width: var(--toolbox-w); z-index: 80; display: flex; flex-direction: column; gap: 16px; transform: translateX(0); opacity: 1; transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease; }
|
||||
.panelCol {
|
||||
/* Your original layout and animations */
|
||||
position: fixed;
|
||||
top: var(--toolbox-top);
|
||||
right: 22px;
|
||||
width: var(--toolbox-w);
|
||||
z-index: 80;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
|
||||
|
||||
/* THE FIX: Push the bottom edge higher up the screen */
|
||||
/* If your footer is ~140px tall, 170px gives you a perfect 30px safe gap */
|
||||
bottom: 110px;
|
||||
|
||||
/* Let the inside scroll smoothly */
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* Hide the scrollbar in Chrome/Safari */
|
||||
.panelCol::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panelCol .card {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.binaryPage.toolboxCollapsed .panelCol { transform: translateX(calc(var(--toolbox-w) + 32px)); opacity: 0; pointer-events: none; }
|
||||
|
||||
.toggleRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
||||
|
||||
@@ -39,13 +39,15 @@ body:has(#pcPage) .pageWrap {
|
||||
.pb-zoom-btn:hover { background: rgba(255,255,255,0.1); border-color: #55aaff; color: #55aaff; }
|
||||
|
||||
/* Wires sit at the VERY FRONT so they are never hidden in the case */
|
||||
.pb-svg-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; }
|
||||
/* Wire layer - sits above case but below ports */
|
||||
/* Wire layer - Physically on TOP of components */
|
||||
.pb-svg-layer { z-index: 100 !important; pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
|
||||
/* Cables */
|
||||
.pb-wire {
|
||||
stroke: rgba(255,255,255,0.25); stroke-width: 6; fill: none; stroke-linecap: round;
|
||||
transition: stroke 0.1s ease, filter 0.1s ease, stroke-width 0.1s ease; pointer-events: stroke; cursor: pointer;
|
||||
}
|
||||
/* Cables - make sure they have a width and color */
|
||||
/* Cables - Styled for visibility */
|
||||
.pb-wire { stroke: #55aaff; stroke-width: 6; fill: none; pointer-events: stroke; }
|
||||
|
||||
.pb-wire:hover { stroke: rgba(255,255,255,0.6); stroke-width: 10; }
|
||||
.pb-wire.active { stroke: #55aaff; filter: drop-shadow(0 0 6px rgba(85,170,255,0.6)); }
|
||||
.pb-wire.active:hover { stroke: #88ccff; }
|
||||
@@ -58,6 +60,7 @@ body:has(#pcPage) .pageWrap {
|
||||
position: absolute; background: transparent; border: none; border-radius: 0; padding: 0;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: grab;
|
||||
user-select: none; transition: filter 0.2s; pointer-events: auto;
|
||||
z-index: 10;
|
||||
}
|
||||
.pb-node:active { cursor: grabbing; }
|
||||
.pb-node.selected { filter: drop-shadow(0 0 10px rgba(255,85,85,0.8)); }
|
||||
@@ -67,7 +70,7 @@ body:has(#pcPage) .pageWrap {
|
||||
.pb-port {
|
||||
width: 14px; height: 14px; background: #222; border-radius: 50%; cursor: crosshair;
|
||||
border: 2px solid #55aaff; box-shadow: 0 0 0 1px rgba(255,255,255,0.2); transition: all 0.2s;
|
||||
position: absolute; z-index: 200; transform: translate(-50%, -50%); pointer-events: auto;
|
||||
position: absolute; z-index: 200 !important; transform: translate(-50%, -50%); pointer-events: auto;
|
||||
}
|
||||
.pb-port:hover { transform: translate(-50%, -50%) scale(1.4); background: #fff; }
|
||||
.pb-port.active { background: #55aaff; box-shadow: 0 0 12px rgba(85,170,255,0.8); }
|
||||
|
||||
Reference in New Issue
Block a user