Sidebar tabs UI, S×P pack sizing, per-busbar STEP or DXF export
Replace the single stacked config pane with a top tab strip (Pack, Cells, BMS, Busbars) so only one group is visible at a time. Pack sizing defaults to Series × Parallel with a summary chip that shows count and footprint, with a mm-size mode for users who prefer direct dimensions. Cells and Housing are merged under one tab separated by a divider. Exports are now per component: the cellholder is a STEP solid, and each busbar downloads as either STEP (3D stencil) or DXF (flat laser cut pattern) chosen by a dropdown. Mirrored and rotated duplicates are deduplicated by a pairwise-distance signature so only one copy per shape class is emitted. The DXF writer produces just the union outline: pads as CIRCLE or ARC entities restricted to uncovered angular ranges, capsule sides as LINE entities clipped (Liang-Barsky + disc intersection) against every other primitive so no lines remain inside the busbar body. README documents setup, features, and project layout.
This commit is contained in:
Maxim
263
styles/main.css
263
styles/main.css
@@ -14,7 +14,7 @@ body {
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
transition: max-width 0.3s ease, padding 0.3s ease;
|
||||
}
|
||||
@@ -46,8 +46,8 @@ h1:hover {
|
||||
/* Main Layout */
|
||||
.main-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 400px 1fr;
|
||||
gap: 24px;
|
||||
grid-template-columns: 460px 1fr;
|
||||
gap: 28px;
|
||||
transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1), gap 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -63,9 +63,229 @@ h1:hover {
|
||||
}
|
||||
|
||||
.section:nth-child(1) { animation-delay: 0.2s; }
|
||||
.section:nth-child(2) { animation-delay: 0.3s; }
|
||||
.section:nth-child(3) { animation-delay: 0.4s; }
|
||||
.section:nth-child(4) { animation-delay: 0.5s; }
|
||||
.section:nth-child(2) { animation-delay: 0.26s; }
|
||||
.section:nth-child(3) { animation-delay: 0.32s; }
|
||||
.section:nth-child(4) { animation-delay: 0.38s; }
|
||||
.section:nth-child(5) { animation-delay: 0.44s; }
|
||||
.section:nth-child(6) { animation-delay: 0.5s; }
|
||||
|
||||
/* Sidebar tab navigation — each tab shows a stacked icon + label. An animated
|
||||
gradient pill (.tab-indicator) slides to the active tab; panels cross-fade. */
|
||||
.config-sidebar {
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
border: 1px solid rgba(100, 149, 237, 0.1);
|
||||
border-radius: 14px;
|
||||
padding: 20px 20px 24px;
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.config-sidebar:hover {
|
||||
border-color: rgba(100, 149, 237, 0.28);
|
||||
box-shadow: 0 16px 44px rgba(100, 149, 237, 0.14);
|
||||
}
|
||||
|
||||
.sidebar-tabs {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
background: rgba(0, 0, 0, 0.28);
|
||||
border: 1px solid rgba(100, 149, 237, 0.08);
|
||||
border-radius: 14px;
|
||||
padding: 6px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.sidebar-tabs .tab {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
padding: 12px 4px 10px;
|
||||
font-size: 0.78em;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.35px;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
transition: color 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.sidebar-tabs .tab-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
color: inherit;
|
||||
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
|
||||
}
|
||||
|
||||
.sidebar-tabs .tab-label {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sidebar-tabs .tab:hover {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.sidebar-tabs .tab:hover .tab-icon {
|
||||
transform: translateY(-1px) scale(1.05);
|
||||
}
|
||||
|
||||
.sidebar-tabs .tab:focus-visible {
|
||||
outline: 2px solid rgba(100, 149, 237, 0.55);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.sidebar-tabs .tab.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-tabs .tab.active .tab-icon {
|
||||
color: #fff;
|
||||
transform: translateY(-1px) scale(1.08);
|
||||
}
|
||||
|
||||
.sidebar-tabs .tab-indicator {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.9));
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 6px 18px rgba(102, 126, 234, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
transition: left 0.38s cubic-bezier(0.4, 0, 0.2, 1), width 0.38s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tab-panels {
|
||||
position: relative;
|
||||
padding: 4px 4px 4px;
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-panel.active {
|
||||
display: block;
|
||||
animation: tabFadeIn 0.32s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes tabFadeIn {
|
||||
from { opacity: 0; transform: translateY(-6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.tab-panel .form-group:last-child { margin-bottom: 0; }
|
||||
|
||||
.field-hint {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
color: #64748b;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
.pack-summary {
|
||||
margin-top: 18px;
|
||||
padding: 12px 16px;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.08));
|
||||
border: 1px solid rgba(100, 149, 237, 0.25);
|
||||
border-radius: 10px;
|
||||
color: #cbd5e1;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.pack-summary strong {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 1.05em;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.pack-summary .muted {
|
||||
color: #94a3b8;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
.config-sidebar > .btn {
|
||||
margin-top: 20px;
|
||||
padding: 16px 24px;
|
||||
font-size: 1.05em;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* Segmented toggle (SP vs mm). Animated gradient pill slides to the active segment. */
|
||||
.seg-toggle {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
background: rgba(0, 0, 0, 0.28);
|
||||
border: 1px solid rgba(100, 149, 237, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 4px;
|
||||
margin-bottom: 18px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.seg-toggle .seg {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1 1 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
padding: 9px 14px;
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.25px;
|
||||
cursor: pointer;
|
||||
border-radius: 7px;
|
||||
transition: color 0.25s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.seg-toggle .seg:hover {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.seg-toggle .seg.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.seg-toggle .seg-indicator {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.92), rgba(118, 75, 162, 0.88));
|
||||
border-radius: 7px;
|
||||
box-shadow: 0 4px 14px rgba(102, 126, 234, 0.32);
|
||||
transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1), width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Subtle divider between the cells group and the housing group inside the Cells tab. */
|
||||
.panel-divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(100, 149, 237, 0.22), transparent);
|
||||
margin: 18px 0 20px;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.section:hover {
|
||||
border-color: rgba(100, 149, 237, 0.4);
|
||||
@@ -426,9 +646,9 @@ input[type="checkbox"]:focus {
|
||||
|
||||
#preview {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
height: 720px;
|
||||
border: 1px solid rgba(100, 149, 237, 0.2);
|
||||
border-radius: 8px;
|
||||
border-radius: 10px;
|
||||
background: #1e293b;
|
||||
display: block;
|
||||
cursor: grab;
|
||||
@@ -558,10 +778,11 @@ input[type="checkbox"]:focus {
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1400px) {
|
||||
@media (max-width: 1500px) {
|
||||
.main-layout {
|
||||
grid-template-columns: 350px 1fr;
|
||||
grid-template-columns: 420px 1fr;
|
||||
}
|
||||
#preview { height: 640px; }
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@@ -578,7 +799,7 @@ input[type="checkbox"]:focus {
|
||||
}
|
||||
|
||||
#preview {
|
||||
height: 400px;
|
||||
height: 520px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -738,6 +959,26 @@ input[type="checkbox"]:focus {
|
||||
}
|
||||
}
|
||||
|
||||
/* Axis diagram — resolves width/depth confusion by showing which input maps to which
|
||||
on-screen dimension. Mirrors the canvas orientation: X horizontal, Y vertical, Z depth. */
|
||||
.axis-diagram {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8px 12px 4px;
|
||||
margin: -4px -4px 16px;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
border: 1px solid rgba(100, 149, 237, 0.12);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.axis-diagram svg {
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Busbars */
|
||||
#busbarList {
|
||||
margin-bottom: 8px;
|
||||
|
||||
Reference in New Issue
Block a user