mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-09-30 11:12:35 +02:00
1027 lines
24 KiB
HTML
1027 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BambuTrack Control Page Mockup</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg-primary: #1a1a1a;
|
|
--bg-secondary: #2d2d2d;
|
|
--bg-tertiary: #3d3d3d;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #888888;
|
|
--accent: #00ae42;
|
|
--accent-dark: #008c35;
|
|
--orange: #f5a623;
|
|
--red: #e74c3c;
|
|
--blue: #3498db;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* Printer Tabs */
|
|
.printer-tabs {
|
|
display: flex;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--bg-tertiary);
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.printer-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 20px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
border-bottom: 2px solid transparent;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.printer-tab.active {
|
|
color: var(--accent);
|
|
border-bottom-color: var(--accent);
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.printer-tab .status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
}
|
|
|
|
.printer-tab .status-dot.offline {
|
|
background: var(--red);
|
|
}
|
|
|
|
/* Main Layout */
|
|
.main-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 380px;
|
|
height: calc(100vh - 49px);
|
|
gap: 0;
|
|
}
|
|
|
|
/* Left Column */
|
|
.left-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
/* Camera Section */
|
|
.camera-section {
|
|
flex: 1;
|
|
background: #000;
|
|
position: relative;
|
|
min-height: 0;
|
|
}
|
|
|
|
.camera-feed {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
|
|
}
|
|
|
|
.camera-overlay {
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 12px;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.camera-btn {
|
|
padding: 6px 12px;
|
|
background: rgba(0,0,0,0.6);
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.camera-btn:hover {
|
|
background: rgba(0,0,0,0.8);
|
|
}
|
|
|
|
/* Print Progress */
|
|
.print-progress {
|
|
background: var(--bg-secondary);
|
|
padding: 16px;
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
|
|
.print-thumbnail {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.print-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.print-name {
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 6px;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 3px;
|
|
margin-bottom: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: var(--accent);
|
|
width: 45%;
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
.print-stats {
|
|
display: flex;
|
|
gap: 24px;
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.print-stats span {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Print Controls - in progress section */
|
|
.print-controls-inline {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.print-btn-small {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.print-btn-small.pause {
|
|
background: #f39c12;
|
|
color: white;
|
|
}
|
|
|
|
.print-btn-small.stop {
|
|
background: var(--red);
|
|
color: white;
|
|
}
|
|
|
|
.print-btn-small:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.print-btn-small:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Right Column - Control Panel */
|
|
.control-panel {
|
|
background: var(--bg-secondary);
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Section */
|
|
.section {
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--bg-tertiary);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Temperatures */
|
|
.temps-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.temp-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
background: var(--bg-primary);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.temp-item:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.temp-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.temp-values {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
}
|
|
|
|
.temp-current {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.temp-current.hot {
|
|
color: var(--orange);
|
|
}
|
|
|
|
.temp-target {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Quick Controls Row */
|
|
.quick-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.quick-btn {
|
|
flex: 1;
|
|
padding: 8px;
|
|
background: var(--bg-primary);
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.quick-btn:hover {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.quick-btn.active {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
/* Speed Control */
|
|
.speed-control {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.speed-btn {
|
|
flex: 1;
|
|
padding: 10px 8px;
|
|
background: var(--bg-primary);
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
text-align: center;
|
|
}
|
|
|
|
.speed-btn:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.speed-btn.active {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.speed-btn.ludicrous {
|
|
color: var(--red);
|
|
}
|
|
|
|
.speed-btn.ludicrous.active {
|
|
background: var(--red);
|
|
color: white;
|
|
}
|
|
|
|
/* Movement Controls */
|
|
.movement-section {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.jog-pad {
|
|
position: relative;
|
|
width: 140px;
|
|
height: 140px;
|
|
}
|
|
|
|
.jog-ring {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background: var(--bg-primary);
|
|
position: relative;
|
|
}
|
|
|
|
.jog-btn {
|
|
position: absolute;
|
|
width: 36px;
|
|
height: 36px;
|
|
background: var(--bg-tertiary);
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.jog-btn:hover {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.jog-btn.up { top: 8px; left: 50%; transform: translateX(-50%); }
|
|
.jog-btn.down { bottom: 8px; left: 50%; transform: translateX(-50%); }
|
|
.jog-btn.left { left: 8px; top: 50%; transform: translateY(-50%); }
|
|
.jog-btn.right { right: 8px; top: 50%; transform: translateY(-50%); }
|
|
|
|
.jog-home {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 44px;
|
|
height: 44px;
|
|
background: var(--accent);
|
|
border: none;
|
|
border-radius: 50%;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.jog-home:hover {
|
|
background: var(--accent-dark);
|
|
}
|
|
|
|
/* Z Controls */
|
|
.z-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.z-btn {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: var(--bg-primary);
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.z-btn:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.z-label {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Step Size */
|
|
.step-sizes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.step-btn {
|
|
padding: 6px 12px;
|
|
background: var(--bg-primary);
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.step-btn:hover, .step-btn.active {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Extruder */
|
|
.extruder-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.extruder-toggle {
|
|
display: flex;
|
|
background: var(--bg-primary);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.extruder-toggle button {
|
|
padding: 6px 16px;
|
|
border: none;
|
|
background: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.extruder-toggle button.active {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.extruder-graphic {
|
|
width: 60px;
|
|
height: 80px;
|
|
background: var(--bg-primary);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-secondary);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.extruder-btns {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* AMS Section */
|
|
.ams-section {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* AMS Tabs - like Bambu Studio color indicators */
|
|
.ams-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ams-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 6px 10px;
|
|
background: var(--bg-primary);
|
|
border: 2px solid transparent;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ams-tab:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.ams-tab.active {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.ams-tab-colors {
|
|
display: flex;
|
|
gap: 2px;
|
|
}
|
|
|
|
.ams-tab-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.ams-tab-label {
|
|
font-size: 10px;
|
|
color: var(--text-secondary);
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* AMS Unit Content */
|
|
.ams-unit-content {
|
|
background: var(--bg-primary);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.ams-unit-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.ams-slots {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ams-slot {
|
|
width: 56px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.ams-slot:hover {
|
|
border-color: var(--text-secondary);
|
|
}
|
|
|
|
.ams-slot.selected {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px rgba(0, 174, 66, 0.3);
|
|
}
|
|
|
|
.ams-slot.empty {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.ams-slot-color {
|
|
height: 36px;
|
|
position: relative;
|
|
}
|
|
|
|
.ams-slot-color::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 8px;
|
|
background: linear-gradient(transparent, rgba(0,0,0,0.3));
|
|
}
|
|
|
|
.ams-slot-info {
|
|
padding: 6px 4px;
|
|
text-align: center;
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.ams-slot-type {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ams-slot-num {
|
|
font-size: 9px;
|
|
color: var(--text-secondary);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* External Spool */
|
|
.external-spool {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.ext-label {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
width: 30px;
|
|
}
|
|
|
|
.ext-slot {
|
|
width: 56px;
|
|
height: 64px;
|
|
background: var(--bg-primary);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-secondary);
|
|
font-size: 18px;
|
|
border: 2px solid transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ext-slot:hover {
|
|
border-color: var(--text-secondary);
|
|
}
|
|
|
|
.ext-slot-label {
|
|
font-size: 9px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.ext-graphic {
|
|
flex: 1;
|
|
height: 64px;
|
|
background: var(--bg-primary);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* AMS Actions */
|
|
.ams-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.ams-btn {
|
|
flex: 1;
|
|
padding: 10px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ams-btn.secondary {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ams-btn.secondary:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.ams-btn.primary {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.ams-btn.primary:hover {
|
|
background: var(--accent-dark);
|
|
}
|
|
|
|
/* AMS Animation Area - reserved space for filament path animation */
|
|
.ams-animation-area {
|
|
flex: 1;
|
|
min-height: 100px;
|
|
margin-top: 16px;
|
|
background: var(--bg-primary);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.ams-hub-graphic {
|
|
width: 80px;
|
|
height: 24px;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.ams-filament-path {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
width: 2px;
|
|
height: 30px;
|
|
background: var(--accent);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.ams-status-text {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
margin-top: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Printer Tabs -->
|
|
<div class="printer-tabs">
|
|
<button class="printer-tab active">
|
|
<span class="status-dot"></span>
|
|
H2D-1
|
|
<span style="font-size: 11px; padding: 2px 8px; background: var(--bg-tertiary); border-radius: 4px;">IDLE</span>
|
|
</button>
|
|
<button class="printer-tab">
|
|
<span class="status-dot"></span>
|
|
X1C-2
|
|
</button>
|
|
<button class="printer-tab">
|
|
<span class="status-dot offline"></span>
|
|
P1S-3
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<!-- Left Column: Camera + Progress -->
|
|
<div class="left-column">
|
|
<div class="camera-section">
|
|
<div class="camera-feed">
|
|
<!-- Camera placeholder -->
|
|
<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #666;">
|
|
📷 Camera Feed
|
|
</div>
|
|
</div>
|
|
<div class="camera-overlay">
|
|
<button class="camera-btn">▶ Start</button>
|
|
<button class="camera-btn">⛶ Fullscreen</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="print-progress">
|
|
<div class="print-thumbnail">
|
|
No Print
|
|
</div>
|
|
<div class="print-info">
|
|
<div class="print-name">Idle</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 0%"></div>
|
|
</div>
|
|
<div class="print-stats">
|
|
Layer: <span>--/--</span>
|
|
Time: <span>--:--</span>
|
|
Remaining: <span>--:--</span>
|
|
</div>
|
|
</div>
|
|
<div class="print-controls-inline">
|
|
<button class="print-btn-small pause" disabled>⏸</button>
|
|
<button class="print-btn-small stop" disabled>⏹</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Control Panel -->
|
|
<div class="control-panel">
|
|
<!-- Temperatures -->
|
|
<div class="section">
|
|
<div class="section-title">Temperature</div>
|
|
<div class="temps-grid">
|
|
<div class="temp-item">
|
|
<div class="temp-icon">🔥L</div>
|
|
<div class="temp-values">
|
|
<span class="temp-current">22</span>
|
|
<span class="temp-target">/0°C</span>
|
|
</div>
|
|
</div>
|
|
<div class="temp-item">
|
|
<div class="temp-icon">🔥R</div>
|
|
<div class="temp-values">
|
|
<span class="temp-current">21</span>
|
|
<span class="temp-target">/0°C</span>
|
|
</div>
|
|
</div>
|
|
<div class="temp-item">
|
|
<div class="temp-icon">🛏️</div>
|
|
<div class="temp-values">
|
|
<span class="temp-current">21</span>
|
|
<span class="temp-target">/0°C</span>
|
|
</div>
|
|
</div>
|
|
<div class="temp-item">
|
|
<div class="temp-icon">📦</div>
|
|
<div class="temp-values">
|
|
<span class="temp-current">21</span>
|
|
<span class="temp-target">/0°C</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="quick-controls">
|
|
<button class="quick-btn">🌀 Fans</button>
|
|
<button class="quick-btn active">💡 Lamp</button>
|
|
<button class="quick-btn">❄️ Cool</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Speed -->
|
|
<div class="section">
|
|
<div class="section-title">Print Speed</div>
|
|
<div class="speed-control">
|
|
<button class="speed-btn">Silent</button>
|
|
<button class="speed-btn active">Standard</button>
|
|
<button class="speed-btn">Sport</button>
|
|
<button class="speed-btn ludicrous">Ludicrous</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Movement -->
|
|
<div class="section">
|
|
<div class="section-title">Movement</div>
|
|
<div class="movement-section">
|
|
<div class="jog-pad">
|
|
<div class="jog-ring">
|
|
<button class="jog-btn up">▲</button>
|
|
<button class="jog-btn down">▼</button>
|
|
<button class="jog-btn left">◀</button>
|
|
<button class="jog-btn right">▶</button>
|
|
<button class="jog-home">⌂</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="z-controls">
|
|
<button class="z-btn">▲</button>
|
|
<span class="z-label">Z</span>
|
|
<button class="z-btn">▼</button>
|
|
</div>
|
|
|
|
<div class="step-sizes">
|
|
<button class="step-btn">10mm</button>
|
|
<button class="step-btn active">1mm</button>
|
|
<button class="step-btn">0.1mm</button>
|
|
</div>
|
|
|
|
<div class="extruder-section">
|
|
<div class="extruder-toggle">
|
|
<button class="active">Left</button>
|
|
<button>Right</button>
|
|
</div>
|
|
<div class="extruder-graphic">
|
|
🖨️<br>Extruder
|
|
</div>
|
|
<div class="extruder-btns">
|
|
<button class="z-btn" style="width: 36px; height: 28px; font-size: 12px;">▲</button>
|
|
<button class="z-btn" style="width: 36px; height: 28px; font-size: 12px;">▼</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AMS -->
|
|
<div class="section ams-section">
|
|
<div class="section-title">AMS</div>
|
|
|
|
<!-- AMS Tabs - color indicators like Bambu Studio -->
|
|
<div class="ams-tabs">
|
|
<div class="ams-tab active">
|
|
<div class="ams-tab-colors">
|
|
<div class="ams-tab-dot" style="background: #FFD700;"></div>
|
|
<div class="ams-tab-dot" style="background: #1a1a1a;"></div>
|
|
<div class="ams-tab-dot" style="background: #8B4513;"></div>
|
|
<div class="ams-tab-dot" style="background: #2d2d2d;"></div>
|
|
</div>
|
|
<span class="ams-tab-label">1</span>
|
|
</div>
|
|
<div class="ams-tab">
|
|
<div class="ams-tab-colors">
|
|
<div class="ams-tab-dot" style="background: #FF0000;"></div>
|
|
<div class="ams-tab-dot" style="background: #0066FF;"></div>
|
|
<div class="ams-tab-dot" style="background: #3d3d3d;"></div>
|
|
<div class="ams-tab-dot" style="background: #3d3d3d;"></div>
|
|
</div>
|
|
<span class="ams-tab-label">2</span>
|
|
</div>
|
|
<div class="ams-tab">
|
|
<div class="ams-tab-colors">
|
|
<div class="ams-tab-dot" style="background: #00FF00;"></div>
|
|
<div class="ams-tab-dot" style="background: #FFFFFF;"></div>
|
|
<div class="ams-tab-dot" style="background: #FF69B4;"></div>
|
|
<div class="ams-tab-dot" style="background: #9932CC;"></div>
|
|
</div>
|
|
<span class="ams-tab-label">3</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AMS Unit Content (shows selected AMS) -->
|
|
<div class="ams-unit-content">
|
|
<div class="ams-unit-header">
|
|
<span>AMS 1</span>
|
|
<span>💧 18% · 🌡️ 24°C</span>
|
|
</div>
|
|
<div class="ams-slots">
|
|
<div class="ams-slot selected">
|
|
<div class="ams-slot-color" style="background: #FFD700;"></div>
|
|
<div class="ams-slot-info">
|
|
<div class="ams-slot-type">PLA</div>
|
|
<div class="ams-slot-num">A1</div>
|
|
</div>
|
|
</div>
|
|
<div class="ams-slot">
|
|
<div class="ams-slot-color" style="background: #1a1a1a;"></div>
|
|
<div class="ams-slot-info">
|
|
<div class="ams-slot-type">PETG</div>
|
|
<div class="ams-slot-num">A2</div>
|
|
</div>
|
|
</div>
|
|
<div class="ams-slot">
|
|
<div class="ams-slot-color" style="background: #8B4513;"></div>
|
|
<div class="ams-slot-info">
|
|
<div class="ams-slot-type">PETG</div>
|
|
<div class="ams-slot-num">A3</div>
|
|
</div>
|
|
</div>
|
|
<div class="ams-slot">
|
|
<div class="ams-slot-color" style="background: #2d2d2d;"></div>
|
|
<div class="ams-slot-info">
|
|
<div class="ams-slot-type">PLA</div>
|
|
<div class="ams-slot-num">A4</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- External Spool -->
|
|
<div class="external-spool">
|
|
<span class="ext-label">Ext</span>
|
|
<div class="ext-slot">
|
|
?
|
|
<span class="ext-slot-label">Spool</span>
|
|
</div>
|
|
<div class="ext-graphic">🎞️ External Spool Holder</div>
|
|
</div>
|
|
|
|
<!-- AMS Actions -->
|
|
<div class="ams-actions">
|
|
<button class="ams-btn secondary">Unload</button>
|
|
<button class="ams-btn primary">Load</button>
|
|
</div>
|
|
|
|
<!-- AMS Animation Area - reserved for filament path animation -->
|
|
<div class="ams-animation-area">
|
|
<div class="ams-hub-graphic">HUB</div>
|
|
<div class="ams-status-text">Ready - Select a slot to load</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|