feat: add Examples dropdown with pre-built circuits
Add 4 example circuits accessible from a new toolbar dropdown: - SR Flip-Flop (NOR) — basic set-reset latch - SR Flip-Flop (NAND) — active-low variant - D Latch (1-bit Memory) — gated latch with enable - D Flip-Flop (Master-Slave) — edge-triggered with CLK Each example shows name + description in the dropdown and loads the full circuit with proper gate placement and wiring. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -217,6 +217,47 @@ body {
|
||||
background: #252540;
|
||||
}
|
||||
|
||||
/* Example buttons */
|
||||
.example-btn {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.example-btn:hover {
|
||||
background: #1a1a3a;
|
||||
border-color: #00e599;
|
||||
}
|
||||
|
||||
.example-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #00e599;
|
||||
}
|
||||
|
||||
.example-btn:hover .example-name {
|
||||
color: #00ff99;
|
||||
}
|
||||
|
||||
.example-desc {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
#examples-menu {
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
/* ==================== Canvas ==================== */
|
||||
#canvas {
|
||||
position: fixed;
|
||||
|
||||
Reference in New Issue
Block a user