Home Esplora Aiuto
Accedi
yunoadmin
/
bambuddy
mirror da https://github.com/maziggy/bambuddy
1
0
Forka 0
File Problemi 0 Wiki
Albero (Tree): f6cae89ee0
Rami (Branch) Tag
bambuddy
/
mockup
/
control-page-v6-multi-ams.html

control-page-v6-multi-ams.html 28 KB
Cronologia Originale

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.   <meta charset="UTF-8">
    5. 

  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6.   <title>BambuTrack Control - v6 Multi-AMS</title>
    7. 

  7.   <style>
    8. 

  8.     * { margin: 0; padding: 0; box-sizing: border-box; }
    9. 

  9. 

  10.     :root {
    11. 

  11.       --bg-main: #f5f5f5;
    12. 

  12.       --bg-white: #ffffff;
    13. 

  13.       --bg-light: #fafafa;
    14. 

  14.       --bg-panel: #f0f0f0;
    15. 

  15.       --bg-hover: #e8e8e8;
    16. 

  16.       --text-primary: #333333;
    17. 

  17.       --text-secondary: #666666;
    18. 

  18.       --text-muted: #999999;
    19. 

  19.       --border: #e0e0e0;
    20. 

  20.       --border-light: #eeeeee;
    21. 

  21.       --accent: #00ae42;
    22. 

  22.     }
    23. 

  23. 

  24.     body {
    25. 

  25.       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    26. 

  26.       background: var(--bg-main);
    27. 

  27.       color: var(--text-primary);
    28. 

  28.       font-size: 13px;
    29. 

  29.     }
    30. 

  30. 

  31.     .main-layout {
    32. 

  32.       display: grid;
    33. 

  33.       grid-template-columns: 1fr 400px;
    34. 

  34.       height: 100vh;
    35. 

  35.     }
    36. 

  36. 

  37.     /* Left Panel */
    38. 

  38.     .left-panel {
    39. 

  39.       display: flex;
    40. 

  40.       flex-direction: column;
    41. 

  41.       background: var(--bg-main);
    42. 

  42.     }
    43. 

  43. 

  44.     .camera-header {
    45. 

  45.       display: flex;
    46. 

  46.       align-items: center;
    47. 

  47.       padding: 8px 12px;
    48. 

  48.       background: var(--bg-white);
    49. 

  49.       border-bottom: 1px solid var(--border);
    50. 

  50.       gap: 8px;
    51. 

  51.     }
    52. 

  52. 

  53.     .camera-title {
    54. 

  54.       font-size: 13px;
    55. 

  55.       color: var(--text-primary);
    56. 

  56.       margin-right: auto;
    57. 

  57.     }
    58. 

  58. 

  59.     .icon-btn {
    60. 

  60.       width: 28px;
    61. 

  61.       height: 28px;
    62. 

  62.       border: none;
    63. 

  63.       background: none;
    64. 

  64.       cursor: pointer;
    65. 

  65.       border-radius: 4px;
    66. 

  66.       display: flex;
    67. 

  67.       align-items: center;
    68. 

  68.       justify-content: center;
    69. 

  69.     }
    70. 

  70. 

  71.     .icon-btn:hover { background: var(--bg-hover); }
    72. 

  72.     .icon-btn img { width: 18px; height: 18px; opacity: 0.6; }
    73. 

  73. 

  74.     .camera-feed {
    75. 

  75.       flex: 1;
    76. 

  76.       background: #1a1a1a;
    77. 

  77.       display: flex;
    78. 

  78.       align-items: center;
    79. 

  79.       justify-content: center;
    80. 

  80.       color: #555;
    81. 

  81.     }
    82. 

  82. 

  83.     /* Print Progress */
    84. 

  84.     .print-progress {
    85. 

  85.       background: var(--bg-white);
    86. 

  86.       border-top: 1px solid var(--border);
    87. 

  87.       padding: 16px 20px;
    88. 

  88.     }
    89. 

  89. 

  90.     .progress-label { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
    91. 

  91.     .progress-row { display: flex; gap: 14px; align-items: center; }
    92. 

  92.     .progress-thumb {
    93. 

  93.       width: 54px; height: 54px;
    94. 

  94.       background: var(--bg-light);
    95. 

  95.       border: 1px solid var(--border);
    96. 

  96.       border-radius: 6px;
    97. 

  97.       display: flex; align-items: center; justify-content: center;
    98. 

  98.     }
    99. 

  99.     .progress-thumb img { width: 32px; opacity: 0.4; }
    100. 

  100.     .progress-info { flex: 1; }
    101. 

  101.     .progress-name { font-weight: 500; font-size: 13px; margin-bottom: 2px; }
    102. 

  102.     .progress-status { color: var(--accent); font-size: 12px; margin-bottom: 8px; }
    103. 

  103.     .progress-bar-bg { height: 4px; background: var(--border-light); border-radius: 2px; margin-bottom: 8px; }
    104. 

  104.     .progress-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; }
    105. 

  105.     .progress-meta { display: flex; gap: 20px; font-size: 11px; color: var(--text-muted); }
    106. 

  106.     .progress-btns { display: flex; gap: 6px; }
    107. 

  107.     .progress-btn {
    108. 

  108.       width: 32px; height: 32px;
    109. 

  109.       border: 1px solid var(--border);
    110. 

  110.       background: var(--bg-white);
    111. 

  111.       border-radius: 6px;
    112. 

  112.       cursor: pointer;
    113. 

  113.       font-size: 14px;
    114. 

  114.       color: var(--text-muted);
    115. 

  115.     }
    116. 

  116.     .progress-btn:hover { background: var(--bg-hover); }
    117. 

  117. 

  118.     /* Right Panel */
    119. 

  119.     .right-panel {
    120. 

  120.       background: var(--bg-white);
    121. 

  121.       border-left: 1px solid var(--border);
    122. 

  122.       overflow-y: auto;
    123. 

  123.     }
    124. 

  124. 

  125.     .control-header {
    126. 

  126.       display: flex;
    127. 

  127.       align-items: center;
    128. 

  128.       padding: 10px 14px;
    129. 

  129.       border-bottom: 1px solid var(--border);
    130. 

  130.       gap: 8px;
    131. 

  131.     }
    132. 

  132. 

  133.     .control-title { font-size: 13px; margin-right: auto; }
    134. 

  134.     .header-btn {
    135. 

  135.       padding: 6px 14px;
    136. 

  136.       font-size: 12px;
    137. 

  137.       border: none;
    138. 

  138.       border-radius: 6px;
    139. 

  139.       cursor: pointer;
    140. 

  140.       background: var(--accent);
    141. 

  141.       color: white;
    142. 

  142.     }
    143. 

  143. 

  144.     .control-body { padding: 14px; }
    145. 

  145. 

  146.     /* Temperature */
    147. 

  147.     .temp-section { margin-bottom: 14px; }
    148. 

  148.     .temp-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
    149. 

  149.     .temp-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
    150. 

  150.     .temp-icon img { width: 18px; opacity: 0.6; }
    151. 

  151.     .temp-badge {
    152. 

  152.       font-size: 10px; font-weight: 700; color: var(--accent);
    153. 

  153.       background: #e8f5e9; padding: 2px 6px; border-radius: 4px;
    154. 

  154.     }
    155. 

  155.     .temp-value { font-size: 15px; font-weight: 500; }
    156. 

  156.     .temp-target { font-size: 14px; color: var(--text-muted); }
    157. 

  157. 

  158.     /* Air Condition */
    159. 

  159.     .air-section {
    160. 

  160.       display: flex; align-items: center; gap: 12px;
    161. 

  161.       padding: 10px 0;
    162. 

  162.       border-top: 1px solid var(--border-light);
    163. 

  163.       border-bottom: 1px solid var(--border-light);
    164. 

  164.       margin-bottom: 14px;
    165. 

  165.     }
    166. 

  166.     .air-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
    167. 

  167.     .air-label img { width: 16px; opacity: 0.5; }
    168. 

  168.     .air-item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-light); border-radius: 6px; font-size: 12px; }
    169. 

  169.     .air-item img { width: 16px; opacity: 0.5; }
    170. 

  170.     .lamp-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
    171. 

  171. 

  172.     /* Movement */
    173. 

  173.     .movement-section { display: flex; gap: 16px; margin-bottom: 16px; }
    174. 

  174.     .jog-pad { position: relative; width: 100px; height: 100px; }
    175. 

  175.     .jog-ring {
    176. 

  176.       width: 100%; height: 100%; border-radius: 50%;
    177. 

  177.       background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
    178. 

  178.       border: 1px solid var(--border); position: relative;
    179. 

  179.     }
    180. 

  180.     .jog-label { position: absolute; font-size: 10px; color: var(--text-muted); }
    181. 

  181.     .jog-label.top { top: 6px; left: 50%; transform: translateX(-50%); }
    182. 

  182.     .jog-label.bottom { bottom: 6px; left: 50%; transform: translateX(-50%); }
    183. 

  183.     .jog-label.left { left: 6px; top: 50%; transform: translateY(-50%); }
    184. 

  184.     .jog-label.right { right: 6px; top: 50%; transform: translateY(-50%); }
    185. 

  185.     .jog-btn {
    186. 

  186.       position: absolute; width: 22px; height: 22px;
    187. 

  187.       background: var(--bg-light); border: 1px solid var(--border);
    188. 

  188.       border-radius: 4px; cursor: pointer; font-size: 9px; color: var(--text-muted);
    189. 

  189.     }
    190. 

  190.     .jog-btn:hover { background: var(--bg-hover); }
    191. 

  191.     .jog-btn.up { top: 18px; left: 50%; transform: translateX(-50%); }
    192. 

  192.     .jog-btn.down { bottom: 18px; left: 50%; transform: translateX(-50%); }
    193. 

  193.     .jog-btn.left { left: 18px; top: 50%; transform: translateY(-50%); }
    194. 

  194.     .jog-btn.right { right: 18px; top: 50%; transform: translateY(-50%); }
    195. 

  195.     .jog-home {
    196. 

  196.       position: absolute; top: 50%; left: 50%;
    197. 

  197.       transform: translate(-50%, -50%);
    198. 

  198.       width: 32px; height: 32px; border-radius: 50%;
    199. 

  199.       background: var(--accent); border: none; cursor: pointer;
    200. 

  200.     }
    201. 

  201.     .jog-home img { width: 16px; filter: brightness(0) invert(1); }
    202. 

  202. 

  203.     .step-section { display: flex; flex-direction: column; gap: 4px; }
    204. 

  204.     .step-row { display: flex; gap: 6px; }
    205. 

  205.     .step-btn {
    206. 

  206.       padding: 5px 8px; background: var(--bg-light);
    207. 

  207.       border: 1px solid var(--border); border-radius: 6px;
    208. 

  208.       cursor: pointer; font-size: 10px; color: var(--text-secondary);
    209. 

  209.     }
    210. 

  210.     .step-btn.active { background: var(--bg-hover); border-color: var(--text-muted); }
    211. 

  211.     .step-label { font-size: 10px; color: var(--text-muted); text-align: center; padding: 3px 0; }
    212. 

  212. 

  213.     .extruder-section { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    214. 

  214.     .nozzle-toggle { display: flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
    215. 

  215.     .nozzle-toggle button {
    216. 

  216.       padding: 5px 14px; border: none; background: var(--bg-white);
    217. 

  217.       font-size: 10px; cursor: pointer; color: var(--text-secondary);
    218. 

  218.     }
    219. 

  219.     .nozzle-toggle button:first-child { border-right: 1px solid var(--border); }
    220. 

  220.     .nozzle-toggle button.active { background: var(--accent); color: white; }
    221. 

  221.     .extruder-graphic { height: 70px; }
    222. 

  222.     .extruder-graphic img { height: 100%; }
    223. 

  223.     .extruder-label { font-size: 10px; color: var(--text-muted); }
    224. 

  224.     .ext-controls { display: flex; flex-direction: column; gap: 3px; }
    225. 

  225.     .ext-btn {
    226. 

  226.       width: 26px; height: 26px; background: var(--bg-light);
    227. 

  227.       border: 1px solid var(--border); border-radius: 6px;
    228. 

  228.       cursor: pointer; font-size: 11px; color: var(--text-muted);
    229. 

  229.     }
    230. 

  230. 

  231.     /* ========== AMS SECTION ========== */
    232. 

  232.     .ams-section { border-top: 1px solid var(--border-light); padding-top: 14px; }
    233. 

  233. 

  234.     /* Nozzle Filament Boxes */
    235. 

  235.     .nozzle-filament-row { display: flex; gap: 8px; margin-bottom: 10px; }
    236. 

  236.     .nozzle-filament-box {
    237. 

  237.       display: flex; align-items: center; gap: 6px;
    238. 

  238.       padding: 8px 10px; background: var(--bg-white);
    239. 

  239.       border: 2px solid var(--border); border-radius: 8px; cursor: pointer;
    240. 

  240.     }
    241. 

  241.     .nozzle-filament-box:hover { border-color: #ccc; }
    242. 

  242.     .nozzle-filament-box.active { border-color: var(--accent); }
    243. 

  243.     .filament-dots { display: flex; gap: 3px; }
    244. 

  244.     .f-dot { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
    245. 

  245.     .f-dot.empty { background: #eee !important; border: 1px dashed #ccc; }
    246. 

  246.     .f-dot-separator { width: 1px; height: 16px; background: #ccc; margin: 0 2px; }
    247. 

  247.     .filament-count { font-size: 11px; color: var(--text-muted); padding: 2px 6px; background: var(--bg-light); border-radius: 4px; margin-left: auto; }
    248. 

  248.     .filament-count.active { background: var(--accent); color: white; }
    249. 

  249. 

  250.     /* AMS Tabs */
    251. 

  251.     .ams-tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
    252. 

  252.     .ams-tab {
    253. 

  253.       display: flex; align-items: center; gap: 4px;
    254. 

  254.       padding: 5px 8px; background: var(--bg-light);
    255. 

  255.       border: 2px solid transparent; border-radius: 6px;
    256. 

  256.       cursor: pointer; font-size: 10px; color: var(--text-secondary);
    257. 

  257.     }
    258. 

  258.     .ams-tab:hover { background: var(--bg-hover); }
    259. 

  259.     .ams-tab.active { border-color: var(--accent); }
    260. 

  260.     .ams-tab-dots { display: flex; gap: 2px; }
    261. 

  261.     .ams-tab-dot { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.08); }
    262. 

  262.     .ams-tab-label { font-size: 9px; color: var(--text-muted); margin-left: 2px; }
    263. 

  263. 

  264.     /* AMS-HT Tab (single slot indicator) */
    265. 

  265.     .ams-tab.ams-ht .ams-tab-dots { gap: 0; }
    266. 

  266.     .ams-tab.ams-ht .ams-tab-dot { width: 14px; height: 14px; border-radius: 3px; }
    267. 

  267. 

  268.     /* AMS Content Panel */
    269. 

  269.     .ams-content { background: var(--bg-panel); border-radius: 12px; padding: 12px; }
    270. 

  270. 

  271.     /* AMS Info Row */
    272. 

  272.     .ams-info-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    273. 

  273.     .ams-humidity { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary); }
    274. 

  274.     .ams-humidity img { width: 14px; opacity: 0.5; }
    275. 

  275.     .ams-humidity .sun { font-size: 14px; color: #f5a623; }
    276. 

  276. 

  277.     /* AMS Main Area */
    278. 

  278.     .ams-main { display: flex; gap: 16px; }
    279. 

  279. 

  280.     /* AMS Slots Container */
    281. 

  281.     .ams-slots-container { flex: 1; }
    282. 

  282. 

  283.     /* Slot Labels Row */
    284. 

  284.     .slot-labels-row { display: flex; gap: 6px; margin-bottom: 4px; padding-left: 2px; }
    285. 

  285.     .slot-label-item { width: 50px; display: flex; align-items: center; justify-content: center; }
    286. 

  286.     .slot-label-badge {
    287. 

  287.       display: flex; align-items: center; gap: 2px;
    288. 

  288.       padding: 2px 5px; background: var(--bg-white);
    289. 

  289.       border: 1px solid var(--border); border-radius: 10px;
    290. 

  290.       font-size: 9px; color: var(--text-muted);
    291. 

  291.     }
    292. 

  292.     .slot-label-badge .arrow { font-size: 7px; }
    293. 

  293. 

  294.     /* AMS Slots */
    295. 

  295.     .ams-slots { display: flex; gap: 6px; }
    296. 

  296.     .ams-slot {
    297. 

  297.       width: 50px; height: 72px;
    298. 

  298.       border-radius: 8px; overflow: hidden;
    299. 

  299.       cursor: pointer; border: 2px solid var(--border);
    300. 

  300.     }
    301. 

  301.     .ams-slot:hover { border-color: #bbb; }
    302. 

  302.     .ams-slot.active { border-color: #d4a84b; }
    303. 

  303.     .ams-slot.selected { border-color: var(--accent); }
    304. 

  304.     .ams-slot-fill {
    305. 

  305.       width: 100%; height: 100%;
    306. 

  306.       display: flex; flex-direction: column;
    307. 

  307.       align-items: center; justify-content: flex-end;
    308. 

  308.       padding-bottom: 6px;
    309. 

  309.     }
    310. 

  310.     .ams-slot-type { font-size: 11px; font-weight: 600; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.3); margin-bottom: 2px; }
    311. 

  311.     .ams-slot-type.dark { color: #333; text-shadow: none; }
    312. 

  312.     .ams-slot-eye { width: 18px; height: 18px; }
    313. 

  313.     .ams-slot-eye img { width: 14px; height: 14px; opacity: 0.8; }
    314. 

  314.     .ams-slot-eye.invert img { filter: invert(1); }
    315. 

  315.     .ams-slot-empty {
    316. 

  316.       width: 100%; height: 100%;
    317. 

  317.       background: var(--bg-white);
    318. 

  318.       display: flex; flex-direction: column;
    319. 

  319.       align-items: center; justify-content: center;
    320. 

  320.       color: var(--text-muted);
    321. 

  321.     }
    322. 

  322.     .ams-slot-empty .question { font-size: 16px; }
    323. 

  323.     .ams-slot-empty .angle { font-size: 12px; margin-top: 2px; }
    324. 

  324. 

  325.     /* Connector Lines */
    326. 

  326.     .ams-connectors { display: flex; padding-left: 2px; margin-top: 4px; }
    327. 

  327.     .connector-lines { display: flex; gap: 6px; position: relative; }
    328. 

  328.     .connector-line { width: 50px; display: flex; justify-content: center; }
    329. 

  329.     .connector-line .vline { width: 2px; height: 12px; background: #c0c0c0; }
    330. 

  330.     .connector-hbar { position: absolute; bottom: 0; left: 25px; right: 25px; height: 2px; background: #c0c0c0; }
    331. 

  331. 

  332.     /* Hub Row */
    333. 

  333.     .hub-row { display: flex; align-items: center; padding-left: 2px; margin-top: -1px; }
    334. 

  334.     .hub-line-left { width: calc(100px + 3px); height: 2px; background: #c0c0c0; }
    335. 

  335.     .hub-graphic { display: flex; padding: 3px 5px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 3px; }
    336. 

  336.     .hub-port { width: 8px; height: 12px; background: var(--accent); border-radius: 2px; margin: 0 1px; }
    337. 

  337.     .hub-line-right { width: 30px; height: 2px; background: #c0c0c0; }
    338. 

  338. 

  339.     /* External Spool Section */
    340. 

  340.     .ext-spool-section { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
    341. 

  341.     .ext-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
    342. 

  342.     .ext-content { display: flex; gap: 6px; align-items: flex-start; }
    343. 

  343.     .ext-slot {
    344. 

  344.       width: 50px; height: 72px;
    345. 

  345.       background: var(--bg-white); border: 2px solid var(--border);
    346. 

  346.       border-radius: 8px; display: flex; flex-direction: column;
    347. 

  347.       align-items: center; justify-content: center;
    348. 

  348.       cursor: pointer; color: var(--text-muted);
    349. 

  349.     }
    350. 

  350.     .ext-slot:hover { border-color: #bbb; }
    351. 

  351.     .ext-slot .question { font-size: 18px; }
    352. 

  352.     .ext-slot .angle { font-size: 12px; margin-top: 2px; }
    353. 

  353.     .ext-connector { width: 2px; height: 16px; background: #c0c0c0; margin-top: 4px; }
    354. 

  354.     .spool-holder-graphic { width: 70px; height: 90px; }
    355. 

  355.     .spool-holder-graphic img { width: 100%; height: 100%; object-fit: contain; }
    356. 

  356. 

  357.     /* AMS Actions */
    358. 

  358.     .ams-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
    359. 

  359.     .auto-refill-btn {
    360. 

  360.       display: flex; align-items: center; gap: 5px;
    361. 

  361.       padding: 8px 12px; background: var(--bg-white);
    362. 

  362.       border: 1px solid var(--border); border-radius: 6px;
    363. 

  363.       cursor: pointer; font-size: 12px; color: var(--text-secondary);
    364. 

  364.     }
    365. 

  365.     .auto-refill-btn:hover { background: var(--bg-hover); }
    366. 

  366.     .ams-settings-btn {
    367. 

  367.       width: 32px; height: 32px;
    368. 

  368.       background: var(--bg-white); border: 1px solid var(--border);
    369. 

  369.       border-radius: 6px; cursor: pointer;
    370. 

  370.       display: flex; align-items: center; justify-content: center;
    371. 

  371.     }
    372. 

  372.     .ams-settings-btn:hover { background: var(--bg-hover); }
    373. 

  373.     .ams-settings-btn img { width: 18px; opacity: 0.5; }
    374. 

  374.     .ams-spacer { flex: 1; }
    375. 

  375.     .ams-action-btn {
    376. 

  376.       padding: 8px 20px; border-radius: 6px;
    377. 

  377.       font-size: 12px; cursor: pointer; border: none;
    378. 

  378.       background: #e0e0e0; color: var(--text-secondary);
    379. 

  379.     }
    380. 

  380.     .ams-action-btn:hover { background: #d5d5d5; }
    381. 

  381. 

  382.     /* AMS-HT Specific Styles */
    383. 

  383.     .ams-ht-content { padding: 10px; }
    384. 

  384.     .ams-ht-slot {
    385. 

  385.       width: 60px; height: 80px;
    386. 

  386.       border-radius: 10px; overflow: hidden;
    387. 

  387.       cursor: pointer; border: 2px solid var(--border);
    388. 

  388.       margin: 0 auto;
    389. 

  389.     }
    390. 

  390.     .ams-ht-label { font-size: 10px; color: var(--text-muted); text-align: center; margin-top: 4px; }
    391. 

  391.   </style>
    392. 

  392. </head>
    393. 

  393. <body>
    394. 

  394.   <div class="main-layout">
    395. 

  395.     <!-- Left Panel -->
    396. 

  396.     <div class="left-panel">
    397. 

  397.       <div class="camera-header">
    398. 

  398.         <span class="camera-title">Camera</span>
    399. 

  399.         <button class="icon-btn"><img src="icons/video-camera.svg"></button>
    400. 

  400.         <button class="icon-btn"><img src="icons/webcam.svg"></button>
    401. 

  401.         <button class="icon-btn"><img src="icons/settings.svg"></button>
    402. 

  402.         <button class="icon-btn"><img src="icons/reload.svg"></button>
    403. 

  403.       </div>
    404. 

  404.       <div class="camera-feed">Camera Feed</div>
    405. 

  405.       <div class="print-progress">
    406. 

  406.         <div class="progress-label">Printing Progress</div>
    407. 

  407.         <div class="progress-row">
    408. 

  408.           <div class="progress-thumb"><img src="icons/micro-sd.svg"></div>
    409. 

  409.           <div class="progress-info">
    410. 

  410.             <div class="progress-name">N/A</div>
    411. 

  411.             <div class="progress-status">N/A</div>
    412. 

  412.             <div class="progress-bar-bg"><div class="progress-bar-fill"></div></div>
    413. 

  413.             <div class="progress-meta"><span>Layer: N/A</span><span>N/A</span></div>
    414. 

  414.             <div class="progress-meta">Estimated finish time: N/A</div>
    415. 

  415.           </div>
    416. 

  416.           <div class="progress-btns">
    417. 

  417.             <button class="progress-btn">&#8962;</button>
    418. 

  418.             <button class="progress-btn">&#9208;</button>
    419. 

  419.             <button class="progress-btn">&#9632;</button>
    420. 

  420.           </div>
    421. 

  421.         </div>
    422. 

  422.       </div>
    423. 

  423.     </div>
    424. 

  424. 

  425.     <!-- Right Panel -->
    426. 

  426.     <div class="right-panel">
    427. 

  427.       <div class="control-header">
    428. 

  428.         <span class="control-title">Control</span>
    429. 

  429.         <button class="header-btn">Printer Parts</button>
    430. 

  430.         <button class="header-btn">Print Options</button>
    431. 

  431.         <button class="header-btn">Calibration</button>
    432. 

  432.       </div>
    433. 

  433. 

  434.       <div class="control-body">
    435. 

  435.         <!-- Temperature -->
    436. 

  436.         <div class="temp-section">
    437. 

  437.           <div class="temp-row">
    438. 

  438.             <div class="temp-icon"><img src="icons/hotend.svg"></div>
    439. 

  439.             <span class="temp-badge">L</span>
    440. 

  440.             <span class="temp-value">22</span>
    441. 

  441.             <span class="temp-target">/0 °C</span>
    442. 

  442.           </div>
    443. 

  443.           <div class="temp-row">
    444. 

  444.             <div class="temp-icon"><img src="icons/hotend.svg"></div>
    445. 

  445.             <span class="temp-badge">R</span>
    446. 

  446.             <span class="temp-value">21</span>
    447. 

  447.             <span class="temp-target">/0 °C</span>
    448. 

  448.           </div>
    449. 

  449.           <div class="temp-row">
    450. 

  450.             <div class="temp-icon"><img src="icons/heatbed.svg"></div>
    451. 

  451.             <span class="temp-value">21</span>
    452. 

  452.             <span class="temp-target">/0 °C</span>
    453. 

  453.           </div>
    454. 

  454.           <div class="temp-row">
    455. 

  455.             <div class="temp-icon"><img src="icons/chamber.svg"></div>
    456. 

  456.             <span class="temp-value">21</span>
    457. 

  457.             <span class="temp-target">/0 °C</span>
    458. 

  458.           </div>
    459. 

  459.         </div>
    460. 

  460. 

  461.         <!-- Air Condition -->
    462. 

  462.         <div class="air-section">
    463. 

  463.           <div class="air-label"><img src="icons/ventilation.svg"> Air Condition</div>
    464. 

  464.           <div class="air-item"><img src="icons/ventilation.svg"> 100%</div>
    465. 

  465.           <div class="air-item">Lamp <div class="lamp-dot"></div></div>
    466. 

  466.         </div>
    467. 

  467. 

  468.         <!-- Movement -->
    469. 

  469.         <div class="movement-section">
    470. 

  470.           <div class="jog-pad">
    471. 

  471.             <div class="jog-ring">
    472. 

  472.               <span class="jog-label top">Y</span>
    473. 

  473.               <span class="jog-label bottom">-Y</span>
    474. 

  474.               <span class="jog-label left">-X</span>
    475. 

  475.               <span class="jog-label right">X</span>
    476. 

  476.               <button class="jog-btn up">&#9650;</button>
    477. 

  477.               <button class="jog-btn down">&#9660;</button>
    478. 

  478.               <button class="jog-btn left">&#9664;</button>
    479. 

  479.               <button class="jog-btn right">&#9654;</button>
    480. 

  480.               <button class="jog-home"><img src="icons/home.svg"></button>
    481. 

  481.             </div>
    482. 

  482.           </div>
    483. 

  483. 

  484.           <div class="step-section">
    485. 

  485.             <div class="step-row">
    486. 

  486.               <button class="step-btn">&#8593; 10</button>
    487. 

  487.               <button class="step-btn active">&#8593; 1</button>
    488. 

  488.             </div>
    489. 

  489.             <div class="step-label">Bed</div>
    490. 

  490.             <div class="step-row">
    491. 

  491.               <button class="step-btn">&#8595; 1</button>
    492. 

  492.               <button class="step-btn">&#8595; 10</button>
    493. 

  493.             </div>
    494. 

  494.           </div>
    495. 

  495. 

  496.           <div class="extruder-section">
    497. 

  497.             <div class="nozzle-toggle">
    498. 

  498.               <button class="active">Left</button>
    499. 

  499.               <button>Right</button>
    500. 

  500.             </div>
    501. 

  501.             <div class="extruder-graphic"><img src="icons/dual-extruder.png"></div>
    502. 

  502.             <span class="extruder-label">Extruder</span>
    503. 

  503.             <div class="ext-controls">
    504. 

  504.               <button class="ext-btn">&#9650;</button>
    505. 

  505.               <button class="ext-btn">&#9660;</button>
    506. 

  506.             </div>
    507. 

  507.           </div>
    508. 

  508.         </div>
    509. 

  509. 

  510.         <!-- AMS Section -->
    511. 

  511.         <div class="ams-section">
    512. 

  512.           <!-- Nozzle Filament Assignment Boxes -->
    513. 

  513.           <div class="nozzle-filament-row">
    514. 

  514.             <div class="nozzle-filament-box active">
    515. 

  515.               <div class="filament-dots">
    516. 

  516.                 <div class="f-dot" style="background: #FFD700;"></div>
    517. 

  517.                 <div class="f-dot" style="background: #8B4513;"></div>
    518. 

  518.                 <div class="f-dot" style="background: #1a1a1a;"></div>
    519. 

  519.                 <div class="f-dot" style="background: #222;"></div>
    520. 

  520.               </div>
    521. 

  521.             </div>
    522. 

  522.             <div class="nozzle-filament-box">
    523. 

  523.               <div class="filament-dots">
    524. 

  524.                 <div class="f-dot" style="background: #FF6600;"></div>
    525. 

  525.                 <div class="f-dot" style="background: #00AA00;"></div>
    526. 

  526.                 <div class="f-dot" style="background: #0066FF;"></div>
    527. 

  527.                 <div class="f-dot" style="background: #FF0000;"></div>
    528. 

  528.               </div>
    529. 

  529.             </div>
    530. 

  530.           </div>
    531. 

  531. 

  532.           <!-- AMS Tabs - Shows all connected AMS/AMS-HT units -->
    533. 

  533.           <div class="ams-tabs">
    534. 

  534.             <!-- AMS 1 (Regular AMS - 4 slots) -->
    535. 

  535.             <div class="ams-tab active">
    536. 

  536.               <div class="ams-tab-dots">
    537. 

  537.                 <div class="ams-tab-dot" style="background: #FFD700;"></div>
    538. 

  538.                 <div class="ams-tab-dot" style="background: #1a1a1a;"></div>
    539. 

  539.                 <div class="ams-tab-dot" style="background: #8B4513;"></div>
    540. 

  540.                 <div class="ams-tab-dot" style="background: #222;"></div>
    541. 

  541.               </div>
    542. 

  542.               <span class="ams-tab-label">AMS 1</span>
    543. 

  543.             </div>
    544. 

  544.             <!-- AMS 2 (Regular AMS - 4 slots) -->
    545. 

  545.             <div class="ams-tab">
    546. 

  546.               <div class="ams-tab-dots">
    547. 

  547.                 <div class="ams-tab-dot" style="background: #FF6600;"></div>
    548. 

  548.                 <div class="ams-tab-dot" style="background: #00AA00;"></div>
    549. 

  549.                 <div class="ams-tab-dot" style="background: #0066FF;"></div>
    550. 

  550.                 <div class="ams-tab-dot" style="background: #FF0000;"></div>
    551. 

  551.               </div>
    552. 

  552.               <span class="ams-tab-label">AMS 2</span>
    553. 

  553.             </div>
    554. 

  554.             <!-- AMS 3 (Regular AMS - 4 slots) -->
    555. 

  555.             <div class="ams-tab">
    556. 

  556.               <div class="ams-tab-dots">
    557. 

  557.                 <div class="ams-tab-dot" style="background: #FFFFFF; border-color: #ccc;"></div>
    558. 

  558.                 <div class="ams-tab-dot" style="background: #333;"></div>
    559. 

  559.                 <div class="ams-tab-dot" style="background: #666;"></div>
    560. 

  560.                 <div class="ams-tab-dot" style="background: #999;"></div>
    561. 

  561.               </div>
    562. 

  562.               <span class="ams-tab-label">AMS 3</span>
    563. 

  563.             </div>
    564. 

  564.             <!-- AMS-HT 1 (High Temp - single slot) -->
    565. 

  565.             <div class="ams-tab ams-ht">
    566. 

  566.               <div class="ams-tab-dots">
    567. 

  567.                 <div class="ams-tab-dot" style="background: #8844AA;"></div>
    568. 

  568.               </div>
    569. 

  569.               <span class="ams-tab-label">HT 1</span>
    570. 

  570.             </div>
    571. 

  571.             <!-- AMS-HT 2 (High Temp - single slot) -->
    572. 

  572.             <div class="ams-tab ams-ht">
    573. 

  573.               <div class="ams-tab-dots">
    574. 

  574.                 <div class="ams-tab-dot" style="background: #44AA88;"></div>
    575. 

  575.               </div>
    576. 

  576.               <span class="ams-tab-label">HT 2</span>
    577. 

  577.             </div>
    578. 

  578.           </div>
    579. 

  579. 

  580.           <!-- AMS Content Panel -->
    581. 

  581.           <div class="ams-content">
    582. 

  582.             <!-- Info Row -->
    583. 

  583.             <div class="ams-info-row">
    584. 

  584.               <div class="ams-humidity"><img src="icons/water.svg"> 18 %</div>
    585. 

  585.               <div class="ams-humidity"><span class="sun">&#9788;</span></div>
    586. 

  586.             </div>
    587. 

  587. 

  588.             <!-- Main AMS Area -->
    589. 

  589.             <div class="ams-main">
    590. 

  590.               <!-- AMS Slots Container -->
    591. 

  591.               <div class="ams-slots-container">
    592. 

  592.                 <!-- Slot Labels -->
    593. 

  593.                 <div class="slot-labels-row">
    594. 

  594.                   <div class="slot-label-item">
    595. 

  595.                     <div class="slot-label-badge">A1 <span class="arrow">&#8595;</span></div>
    596. 

  596.                   </div>
    597. 

  597.                   <div class="slot-label-item">
    598. 

  598.                     <div class="slot-label-badge">A2 <span class="arrow">&#8595;</span></div>
    599. 

  599.                   </div>
    600. 

  600.                   <div class="slot-label-item">
    601. 

  601.                     <div class="slot-label-badge">A3 <span class="arrow">&#8595;</span></div>
    602. 

  602.                   </div>
    603. 

  603.                   <div class="slot-label-item">
    604. 

  604.                     <div class="slot-label-badge">A4 <span class="arrow">&#8595;</span></div>
    605. 

  605.                   </div>
    606. 

  606.                 </div>
    607. 

  607. 

  608.                 <!-- Slots -->
    609. 

  609.                 <div class="ams-slots">
    610. 

  610.                   <div class="ams-slot active">
    611. 

  611.                     <div class="ams-slot-fill" style="background: #FFD700;">
    612. 

  612.                       <span class="ams-slot-type dark">PLA</span>
    613. 

  613.                       <div class="ams-slot-eye"><img src="icons/eye.svg"></div>
    614. 

  614.                     </div>
    615. 

  615.                   </div>
    616. 

  616.                   <div class="ams-slot">
    617. 

  617.                     <div class="ams-slot-fill" style="background: #1a1a1a;">
    618. 

  618.                       <span class="ams-slot-type">PETG</span>
    619. 

  619.                       <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
    620. 

  620.                     </div>
    621. 

  621.                   </div>
    622. 

  622.                   <div class="ams-slot">
    623. 

  623.                     <div class="ams-slot-fill" style="background: #8B4513;">
    624. 

  624.                       <span class="ams-slot-type">PETG</span>
    625. 

  625.                       <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
    626. 

  626.                     </div>
    627. 

  627.                   </div>
    628. 

  628.                   <div class="ams-slot">
    629. 

  629.                     <div class="ams-slot-fill" style="background: #222;">
    630. 

  630.                       <span class="ams-slot-type">PLA</span>
    631. 

  631.                       <div class="ams-slot-eye invert"><img src="icons/eye.svg"></div>
    632. 

  632.                     </div>
    633. 

  633.                   </div>
    634. 

  634.                 </div>
    635. 

  635. 

  636.                 <!-- Connectors -->
    637. 

  637.                 <div class="ams-connectors">
    638. 

  638.                   <div class="connector-lines">
    639. 

  639.                     <div class="connector-line"><div class="vline"></div></div>
    640. 

  640.                     <div class="connector-line"><div class="vline"></div></div>
    641. 

  641.                     <div class="connector-line"><div class="vline"></div></div>
    642. 

  642.                     <div class="connector-line"><div class="vline"></div></div>
    643. 

  643.                     <div class="connector-hbar"></div>
    644. 

  644.                   </div>
    645. 

  645.                 </div>
    646. 

  646. 

  647.                 <!-- Hub -->
    648. 

  648.                 <div class="hub-row">
    649. 

  649.                   <div class="hub-line-left"></div>
    650. 

  650.                   <div class="hub-graphic">
    651. 

  651.                     <div class="hub-port"></div>
    652. 

  652.                     <div class="hub-port"></div>
    653. 

  653.                   </div>
    654. 

  654.                   <div class="hub-line-right"></div>
    655. 

  655.                 </div>
    656. 

  656.               </div>
    657. 

  657. 

  658.               <!-- External Spool Section -->
    659. 

  659.               <div class="ext-spool-section">
    660. 

  660.                 <div class="ext-label">Ext</div>
    661. 

  661.                 <div class="ext-content">
    662. 

  662.                   <div style="display: flex; flex-direction: column; align-items: center;">
    663. 

  663.                     <div class="ext-slot">
    664. 

  664.                       <span class="question">?</span>
    665. 

  665.                       <span class="angle">&#8736;</span>
    666. 

  666.                     </div>
    667. 

  667.                     <div class="ext-connector"></div>
    668. 

  668.                   </div>
    669. 

  669.                   <div class="spool-holder-graphic">
    670. 

  670.                     <img src="icons/single-extruder1.png">
    671. 

  671.                   </div>
    672. 

  672.                 </div>
    673. 

  673.               </div>
    674. 

  674.             </div>
    675. 

  675.           </div>
    676. 

  676. 

  677.           <!-- AMS Actions -->
    678. 

  678.           <div class="ams-actions">
    679. 

  679.             <button class="auto-refill-btn">Auto-refill</button>
    680. 

  680.             <button class="ams-settings-btn"><img src="icons/ams-settings.svg"></button>
    681. 

  681.             <div class="ams-spacer"></div>
    682. 

  682.             <button class="ams-action-btn">Unload</button>
    683. 

  683.             <button class="ams-action-btn">Load</button>
    684. 

  684.           </div>
    685. 

  685.         </div>
    686. 

  686.       </div>
    687. 

  687.     </div>
    688. 

  688.   </div>
    689. 

  689. </body>
    690. 

  690. </html>
    691.