Files
bambuddy/mockup/control-page-v13.html
T

1139 lines
32 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BambuTrack Control - v13</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg-main: #f5f5f5;
--bg-white: #ffffff;
--bg-light: #fafafa;
--bg-panel: #f5f5f5;
--bg-hover: #e8e8e8;
--text-primary: #333333;
--text-secondary: #666666;
--text-muted: #999999;
--border: #e0e0e0;
--border-light: #eeeeee;
--accent: #00ae42;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg-main);
color: var(--text-primary);
font-size: 13px;
}
.main-layout {
display: grid;
grid-template-columns: 1fr 580px;
height: 100vh;
}
/* Left Panel - Camera */
.left-panel {
display: flex;
flex-direction: column;
background: var(--bg-main);
}
.camera-header {
display: flex;
align-items: center;
padding: 8px 12px;
background: var(--bg-white);
border-bottom: 1px solid var(--border);
gap: 8px;
}
.camera-title {
font-size: 13px;
color: var(--text-primary);
margin-right: auto;
}
.icon-btn {
width: 28px;
height: 28px;
border: none;
background: none;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.icon-btn:hover { background: var(--bg-hover); }
.icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
.camera-feed {
flex: 1;
background: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
color: #555;
font-size: 14px;
position: relative;
}
.camera-overlay {
position: absolute;
top: 10px;
left: 10px;
}
.camera-overlay img {
width: 24px;
height: 24px;
opacity: 0.7;
filter: invert(1);
}
/* Status bar */
.status-bar {
background: var(--accent);
padding: 4px 12px;
}
/* Print Progress */
.print-progress {
background: var(--bg-white);
padding: 16px 20px;
}
.progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.progress-row { display: flex; gap: 16px; align-items: center; }
.progress-thumb {
width: 80px; height: 80px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex-direction: column;
font-size: 11px;
color: var(--text-muted);
overflow: hidden;
}
.progress-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.progress-info { flex: 1; }
.progress-name { font-weight: 500; font-size: 14px; margin-bottom: 2px; }
.progress-status { color: var(--accent); font-size: 13px; margin-bottom: 8px; }
.progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
.progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
.progress-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.progress-btns { display: flex; gap: 6px; }
.progress-btn {
width: 32px; height: 32px;
border: 1px solid var(--border);
background: var(--bg-white);
border-radius: 6px;
cursor: pointer;
font-size: 14px;
color: var(--text-muted);
}
.progress-btn:hover { background: var(--bg-hover); }
/* Right Panel - Control */
.right-panel {
background: var(--bg-white);
border-left: 1px solid var(--border);
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.control-header {
display: flex;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--border);
gap: 8px;
}
.control-title { font-size: 13px; margin-right: auto; color: var(--text-secondary); }
.header-btn {
padding: 7px 16px;
font-size: 12px;
border: none;
border-radius: 6px;
cursor: pointer;
background: var(--accent);
color: white;
}
.header-btn:hover { background: #009938; }
.control-body {
padding: 16px 20px;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
/* Top Section: Temp + Movement side by side */
.top-section {
display: flex;
gap: 30px;
margin-bottom: 16px;
}
/* Temperature Column */
.temp-column {
flex: 0 0 auto;
min-width: 160px;
}
.temp-row {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 0;
}
.temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.temp-icon img { width: 18px; opacity: 0.5; }
.temp-badge {
font-size: 11px;
font-weight: 600;
color: var(--accent);
background: #e8f5e9;
padding: 2px 8px;
border-radius: 4px;
min-width: 24px;
text-align: center;
}
.temp-badge-spacer {
min-width: 24px;
padding: 2px 8px;
}
.temp-value { font-size: 18px; font-weight: 500; }
.temp-target { font-size: 15px; color: var(--text-muted); }
/* Air Condition */
.air-section {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
margin-top: 10px;
border-top: 1px solid var(--border-light);
}
.air-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-secondary);
}
.air-label img { width: 18px; opacity: 0.5; }
.air-values {
display: flex;
align-items: center;
gap: 16px;
margin-top: 8px;
}
.air-value {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: var(--text-secondary);
}
.air-value img { width: 16px; opacity: 0.5; }
.lamp-section {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-secondary);
}
.lamp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
/* Movement Column */
.movement-column {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.nozzle-toggle {
display: flex;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border);
margin-bottom: 12px;
}
.nozzle-toggle button {
padding: 7px 20px;
border: none;
background: var(--bg-white);
font-size: 13px;
cursor: pointer;
color: var(--text-secondary);
}
.nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
.nozzle-toggle button.active { background: var(--accent); color: white; }
.movement-row {
display: flex;
gap: 24px;
align-items: flex-start;
}
.jog-section { display: flex; flex-direction: column; align-items: center; }
.jog-pad {
position: relative;
width: 120px;
height: 120px;
margin-bottom: 12px;
}
.jog-ring {
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, #f8f8f8 0%, #ebebeb 100%);
border: 1px solid var(--border);
position: relative;
}
.jog-label {
position: absolute;
font-size: 11px;
color: var(--text-muted);
}
.jog-label.top { top: 8px; left: 50%; transform: translateX(-50%); }
.jog-label.bottom { bottom: 8px; left: 50%; transform: translateX(-50%); }
.jog-label.left { left: 8px; top: 50%; transform: translateY(-50%); }
.jog-label.right { right: 8px; top: 50%; transform: translateY(-50%); }
.jog-btn {
position: absolute;
width: 24px;
height: 24px;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 4px;
cursor: pointer;
font-size: 10px;
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
}
.jog-btn:hover { background: var(--bg-hover); }
.jog-btn.up { top: 20px; left: 50%; transform: translateX(-50%); }
.jog-btn.down { bottom: 20px; left: 50%; transform: translateX(-50%); }
.jog-btn.left { left: 20px; top: 50%; transform: translateY(-50%); }
.jog-btn.right { right: 20px; top: 50%; transform: translateY(-50%); }
.jog-home {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--accent);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.jog-home:hover { background: #009938; }
.jog-home img { width: 20px; filter: brightness(0) invert(1); }
/* Bed Controls */
.bed-controls {
display: flex;
align-items: center;
gap: 8px;
}
.bed-btn {
padding: 8px 14px;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
font-size: 12px;
color: var(--text-secondary);
}
.bed-btn:hover { background: var(--bg-hover); }
.bed-label { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
/* Extruder Section */
.extruder-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.extruder-btn {
width: 36px;
height: 36px;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
font-size: 14px;
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
}
.extruder-btn:hover { background: var(--bg-hover); }
.extruder-graphic {
height: 80px;
margin: 8px 0;
}
.extruder-graphic img { height: 100%; }
.extruder-label { font-size: 12px; color: var(--text-muted); }
/* ========== FILAMENT SELECTOR BOXES ========== */
.filament-selector-row {
display: flex;
gap: 10px;
margin-bottom: 8px;
}
.filament-box {
display: flex;
align-items: center;
gap: 5px;
padding: 10px 12px;
background: var(--bg-white);
border: 2px solid var(--border);
border-radius: 8px;
cursor: pointer;
}
.filament-box:hover { border-color: #ccc; }
.filament-box.active { border-color: var(--accent); }
.filament-dots { display: flex; gap: 4px; }
.f-dot {
width: 18px;
height: 18px;
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.1);
}
.f-dot.empty {
background: #e8e8e8 !important;
border: 1px solid #ccc;
}
.f-dot-sep {
width: 1px;
height: 18px;
background: #ccc;
margin: 0 2px;
}
.filament-count {
font-size: 13px;
color: var(--text-muted);
margin-left: 6px;
}
/* AMS Tab Selector Row */
.ams-tab-row {
display: flex;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.ams-tab {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 6px;
cursor: pointer;
font-size: 11px;
color: var(--text-muted);
}
.ams-tab:hover { background: var(--bg-hover); }
.ams-tab.active { border-color: var(--accent); background: #f0faf3; }
.ams-tab .tab-dots {
display: flex;
gap: 2px;
}
.ams-tab .tab-dot {
width: 10px;
height: 10px;
border-radius: 2px;
border: 1px solid rgba(0,0,0,0.1);
}
.ams-tab .tab-dot.empty {
background: #e0e0e0;
}
.ams-tab-label {
font-size: 11px;
color: var(--text-secondary);
}
/* ========== AMS DISPLAY SECTION ========== */
.ams-display {
display: flex;
gap: 16px;
background: var(--bg-panel);
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
}
/* Left side: AMS unit */
.ams-unit-panel {
flex: 1;
}
/* AMS Header - humidity + sun only */
.ams-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 13px;
color: var(--text-secondary);
}
.ams-stat {
display: flex;
align-items: center;
gap: 4px;
}
.ams-stat img { width: 16px; opacity: 0.5; }
.ams-stat .sun { font-size: 16px; color: #f5a623; }
/* Slot Labels */
.slot-labels {
display: flex;
gap: 6px;
margin-bottom: 8px;
}
.slot-label {
flex: 1;
text-align: center;
font-size: 11px;
color: var(--text-muted);
padding: 4px 0;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 12px;
}
/* AMS Slots */
.ams-slots {
display: flex;
gap: 6px;
margin-bottom: 10px;
}
.ams-slot {
flex: 1;
height: 70px;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
border: 2px solid var(--border);
background: var(--bg-white);
}
.ams-slot:hover { border-color: #bbb; }
.ams-slot.active { border-color: #d4a84b; }
.ams-slot-fill {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 8px;
}
.ams-slot-type {
font-size: 11px;
font-weight: 600;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
margin-bottom: 4px;
}
.ams-slot-type.dark { color: #333; text-shadow: none; }
.ams-slot-eye { width: 16px; height: 16px; }
.ams-slot-eye img { width: 14px; height: 14px; opacity: 0.8; }
.ams-slot-eye.invert img { filter: invert(1); }
/* Connector Lines below slots */
.ams-connectors {
display: flex;
justify-content: center;
padding: 0 12px;
position: relative;
}
.connector-group {
flex: 1;
display: flex;
gap: 6px;
position: relative;
}
.connector-line {
flex: 1;
display: flex;
justify-content: center;
}
.connector-line .vline {
width: 2px;
height: 14px;
background: #c0c0c0;
}
.connector-hbar {
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
height: 2px;
background: #c0c0c0;
}
/* ========== EXTERNAL SPOOL SECTION ========== */
.ext-section {
display: flex;
flex-direction: column;
align-items: center;
min-width: 140px;
}
.ext-label {
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 12px;
}
.ext-content {
display: flex;
gap: 12px;
align-items: flex-start;
}
.ext-slot-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.ext-slot {
width: 60px;
height: 70px;
border-radius: 10px;
border: 2px solid var(--border);
background: var(--bg-white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
margin-bottom: 10px;
}
.ext-slot:hover { border-color: #bbb; }
.ext-slot .question {
font-size: 24px;
color: var(--text-muted);
margin-bottom: 4px;
}
.ext-slot .diagonal {
font-size: 20px;
color: var(--text-muted);
}
.ext-connector {
width: 2px;
height: 14px;
background: #c0c0c0;
}
/* External Spool Holder Illustration */
.ext-spool-holder {
width: 100px;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.ext-spool-holder svg {
width: 100%;
height: 100%;
}
/* ========== HUB CONNECTOR SECTION ========== */
.hub-connector-section {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 0;
}
.hub-line-left {
flex: 1;
height: 2px;
background: #c0c0c0;
margin-right: -4px;
}
.hub-graphic {
display: flex;
gap: 4px;
padding: 8px 12px;
background: #e8e8e8;
border-radius: 4px;
border: 1px solid var(--border);
}
.hub-port {
width: 14px;
height: 20px;
background: var(--accent);
border-radius: 2px;
}
.hub-line-right {
flex: 1;
height: 2px;
background: #c0c0c0;
margin-left: -4px;
}
/* AMS Actions */
.ams-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.auto-refill-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
font-size: 13px;
color: var(--text-secondary);
}
.auto-refill-btn:hover { background: var(--bg-hover); }
.ams-settings-btn {
width: 40px;
height: 40px;
background: var(--bg-white);
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.ams-settings-btn:hover { background: var(--bg-hover); }
.ams-settings-btn img { width: 22px; opacity: 0.5; }
.ams-spacer { flex: 1; }
.ams-action-btn {
padding: 10px 28px;
border-radius: 8px;
font-size: 13px;
cursor: pointer;
border: none;
background: #e8e8e8;
color: var(--text-secondary);
}
.ams-action-btn:hover { background: #ddd; }
</style>
</head>
<body>
<div class="main-layout">
<!-- Left Panel - Camera -->
<div class="left-panel">
<div class="camera-header">
<span class="camera-title">Camera</span>
<button class="icon-btn"><img src="icons/video-camera.svg"></button>
<button class="icon-btn"><img src="icons/webcam.svg"></button>
<button class="icon-btn"><img src="icons/settings.svg"></button>
</div>
<div class="camera-feed">
<div class="camera-overlay">
<img src="icons/micro-sd.svg">
</div>
Camera Feed
</div>
<div class="status-bar"></div>
<div class="print-progress">
<div class="progress-label">Printing Progress</div>
<div class="progress-row">
<div class="progress-thumb">
Bambu<br>Lab
</div>
<div class="progress-info">
<div class="progress-name">N/A</div>
<div class="progress-status">N/A</div>
<div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
<div class="progress-meta">Layer: N/A &nbsp;&nbsp; N/A</div>
<div class="progress-meta">Estimated finish time: N/A</div>
</div>
<div class="progress-btns">
<button class="progress-btn">&#8962;</button>
<button class="progress-btn">&#9208;</button>
<button class="progress-btn">&#9632;</button>
</div>
</div>
</div>
</div>
<!-- Right Panel - Control -->
<div class="right-panel">
<div class="control-header">
<span class="control-title">Control</span>
<button class="header-btn">Printer Parts</button>
<button class="header-btn">Print Options</button>
<button class="header-btn">Calibration</button>
</div>
<div class="control-body">
<!-- Top Section: Temp + Movement side by side -->
<div class="top-section">
<!-- Temperature Column -->
<div class="temp-column">
<div class="temp-row">
<div class="temp-icon"><img src="icons/hotend.svg"></div>
<span class="temp-badge">L</span>
<span class="temp-value">24</span>
<span class="temp-target">/0 °C</span>
</div>
<div class="temp-row">
<div class="temp-icon"><img src="icons/hotend.svg"></div>
<span class="temp-badge">R</span>
<span class="temp-value">23</span>
<span class="temp-target">/0 °C</span>
</div>
<div class="temp-row">
<div class="temp-icon"><img src="icons/heatbed.svg"></div>
<span class="temp-badge-spacer"></span>
<span class="temp-value">23</span>
<span class="temp-target">/0 °C</span>
</div>
<div class="temp-row">
<div class="temp-icon"><img src="icons/chamber.svg"></div>
<span class="temp-badge-spacer"></span>
<span class="temp-value">23</span>
<span class="temp-target">/0 °C</span>
</div>
<!-- Air Condition -->
<div class="air-section">
<div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
</div>
<div class="air-values">
<div class="air-value"><img src="icons/ventilation.svg"> 100%</div>
<div class="lamp-section">Lamp <div class="lamp-dot"></div></div>
</div>
</div>
<!-- Movement Column -->
<div class="movement-column">
<div class="nozzle-toggle">
<button class="active">Left</button>
<button>Right</button>
</div>
<div class="movement-row">
<div class="jog-section">
<div class="jog-pad">
<div class="jog-ring">
<span class="jog-label top">Y</span>
<span class="jog-label bottom">-Y</span>
<span class="jog-label left">-X</span>
<span class="jog-label right">X</span>
<button class="jog-btn up">&#9650;</button>
<button class="jog-btn down">&#9660;</button>
<button class="jog-btn left">&#9664;</button>
<button class="jog-btn right">&#9654;</button>
<button class="jog-home"><img src="icons/home.svg"></button>
</div>
</div>
<div class="bed-controls">
<button class="bed-btn">&#8593;10</button>
<button class="bed-btn">&#8593;1</button>
<span class="bed-label">Bed</span>
<button class="bed-btn">&#8595;1</button>
<button class="bed-btn">&#8595;10</button>
</div>
</div>
<div class="extruder-section">
<button class="extruder-btn">&#9650;</button>
<div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
<button class="extruder-btn">&#9660;</button>
<span class="extruder-label">Extruder</span>
</div>
</div>
</div>
</div>
<!-- Filament Selector Boxes (Top Row - Large) -->
<div class="filament-selector-row">
<div class="filament-box active">
<div class="filament-dots">
<div class="f-dot" style="background: #FFD700;"></div>
<div class="f-dot" style="background: #333;"></div>
<div class="f-dot" style="background: #8B4513;"></div>
<div class="f-dot" style="background: #666;"></div>
</div>
</div>
<div class="filament-box">
<div class="filament-dots">
<div class="f-dot" style="background: #FF6600;"></div>
<div class="f-dot" style="background: #00AA00;"></div>
<div class="f-dot" style="background: #0066FF;"></div>
<div class="f-dot" style="background: #FF0000;"></div>
</div>
</div>
<div class="filament-box">
<div class="filament-dots">
<div class="f-dot empty"></div>
<div class="f-dot empty"></div>
<div class="f-dot empty"></div>
<div class="f-dot empty"></div>
</div>
<span class="filament-count">0</span>
</div>
</div>
<!-- AMS Tab Selector Row -->
<div class="ams-tab-row">
<div class="ams-tab active">
<div class="tab-dots">
<div class="tab-dot" style="background: #FFD700;"></div>
<div class="tab-dot" style="background: #333;"></div>
<div class="tab-dot" style="background: #8B4513;"></div>
<div class="tab-dot" style="background: #666;"></div>
</div>
<span class="ams-tab-label">AMS 1</span>
</div>
<div class="ams-tab">
<div class="tab-dots">
<div class="tab-dot" style="background: #FF6600;"></div>
<div class="tab-dot" style="background: #00AA00;"></div>
<div class="tab-dot" style="background: #0066FF;"></div>
<div class="tab-dot" style="background: #FF0000;"></div>
</div>
<span class="ams-tab-label">AMS 2</span>
</div>
<div class="ams-tab">
<div class="tab-dots">
<div class="tab-dot empty"></div>
<div class="tab-dot empty"></div>
<div class="tab-dot empty"></div>
<div class="tab-dot empty"></div>
</div>
<span class="ams-tab-label">AMS 3</span>
</div>
<div class="ams-tab">
<div class="tab-dots">
<div class="tab-dot" style="background: #8844AA;"></div>
<div class="tab-dot" style="background: #8844AA;"></div>
</div>
<span class="ams-tab-label">HT 1</span>
</div>
<div class="ams-tab">
<div class="tab-dots">
<div class="tab-dot" style="background: #44AA88;"></div>
<div class="tab-dot" style="background: #44AA88;"></div>
</div>
<span class="ams-tab-label">HT 2</span>
</div>
</div>
<!-- AMS Display Panel -->
<div class="ams-display">
<!-- AMS Unit (shows currently selected AMS) -->
<div class="ams-unit-panel">
<!-- AMS Header: Humidity + Sun (NO temperature) -->
<div class="ams-header">
<div class="ams-stat"><img src="icons/water.svg"> 18 %</div>
<div class="ams-stat"><span class="sun">&#9788;</span></div>
</div>
<!-- Slot Labels -->
<div class="slot-labels">
<div class="slot-label">A1↓</div>
<div class="slot-label">A2↓</div>
<div class="slot-label">A3↓</div>
<div class="slot-label">A4↓</div>
</div>
<!-- AMS Slots -->
<div class="ams-slots">
<div class="ams-slot active">
<div class="ams-slot-fill" style="background: #FFD700;">
<span class="ams-slot-type dark">PLA</span>
<div class="ams-slot-eye"><img src="icons/eye.svg"></div>
</div>
</div>
<div class="ams-slot">
<div class="ams-slot-fill" style="background: #333;">
<span class="ams-slot-type">PETG</span>
<div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
</div>
</div>
<div class="ams-slot">
<div class="ams-slot-fill" style="background: #8B4513;">
<span class="ams-slot-type">PETG</span>
<div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
</div>
</div>
<div class="ams-slot">
<div class="ams-slot-fill" style="background: #666;">
<span class="ams-slot-type">PLA</span>
<div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
</div>
</div>
</div>
<!-- Connector Lines -->
<div class="ams-connectors">
<div class="connector-group">
<div class="connector-line"><div class="vline"></div></div>
<div class="connector-line"><div class="vline"></div></div>
<div class="connector-line"><div class="vline"></div></div>
<div class="connector-line"><div class="vline"></div></div>
<div class="connector-hbar"></div>
</div>
</div>
</div>
<!-- External Spool Section -->
<div class="ext-section">
<div class="ext-label">Ext</div>
<div class="ext-content">
<div class="ext-slot-wrapper">
<div class="ext-slot">
<span class="question">?</span>
<span class="diagonal">⁄</span>
</div>
<div class="ext-connector"></div>
</div>
<!-- External Spool Holder Illustration -->
<div class="ext-spool-holder">
<svg viewBox="0 0 100 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Spool holder box -->
<path d="M10 30 L60 15 L90 30 L90 75 L60 90 L10 75 Z" fill="#f0f0f0" stroke="#ccc" stroke-width="1.5"/>
<path d="M10 30 L60 45 L90 30" fill="none" stroke="#ccc" stroke-width="1.5"/>
<path d="M60 45 L60 90" fill="none" stroke="#ccc" stroke-width="1.5"/>
<!-- Vent lines -->
<line x1="70" y1="50" x2="85" y2="45" stroke="#ddd" stroke-width="1"/>
<line x1="70" y1="58" x2="85" y2="53" stroke="#ddd" stroke-width="1"/>
<line x1="70" y1="66" x2="85" y2="61" stroke="#ddd" stroke-width="1"/>
<!-- Spool -->
<ellipse cx="35" cy="35" rx="20" ry="8" fill="#00ae42" stroke="#008833" stroke-width="1.5"/>
<rect x="15" y="35" width="40" height="12" fill="#00ae42"/>
<ellipse cx="35" cy="47" rx="20" ry="8" fill="#009938" stroke="#008833" stroke-width="1.5"/>
<!-- Spool center hole -->
<ellipse cx="35" cy="35" rx="8" ry="3" fill="#e0e0e0"/>
<ellipse cx="35" cy="47" rx="8" ry="3" fill="#ccc"/>
<!-- PTFE tube -->
<path d="M35 55 Q35 65 50 70 L55 68" fill="none" stroke="#00ae42" stroke-width="3"/>
</svg>
</div>
</div>
</div>
</div>
<!-- Hub Connector -->
<div class="hub-connector-section">
<div class="hub-line-left"></div>
<div class="hub-graphic">
<div class="hub-port"></div>
<div class="hub-port"></div>
</div>
<div class="hub-line-right"></div>
</div>
<!-- AMS Actions -->
<div class="ams-actions">
<button class="auto-refill-btn">Auto-refill</button>
<button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
<div class="ams-spacer"></div>
<button class="ams-action-btn">Unload</button>
<button class="ams-action-btn">Load</button>
</div>
</div>
</div>
</div>
</body>
</html>