Smoothing surfaces.
đĻ BAMU LAB
⨠The Prompt Phrase
How to smooth a service using bamboo 3D printer.
đģ Code Preview
đĻ All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bambu Studio - Ironing Tutorial</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Fredoka+One&family=Segoe+UI:wght@400;500;600&display=swap"
rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
min-height: 100vh;
overflow-x: hidden;
}
.tutorial-container {
display: flex;
min-height: 100vh;
}
/* ============ LEFT SIDE - Demo Panel ============ */
.demo-panel {
width: 360px;
min-width: 360px;
background: #1e1e1e;
position: relative;
display: flex;
flex-direction: column;
}
.demo-header {
background: linear-gradient(135deg, #00ae42 0%, #00d26a 100%);
padding: 12px 15px;
text-align: center;
}
.demo-header h2 {
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
}
.demo-content {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
overflow-y: auto;
background: #1e1e1e;
padding: 10px;
}
/* Image instruction text */
.image-instruction {
color: #a0aec0;
font-size: 11px;
text-align: center;
padding: 10px;
background: rgba(0, 174, 66, 0.1);
border-top: 1px solid rgba(0, 174, 66, 0.3);
}
.image-instruction strong {
color: #00d26a;
}
/* ========== BAMBU STUDIO INTERFACE STYLES ========== */
.app-container {
width: 320px;
background: #f0f0f0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 12px;
color: #333;
border-radius: 4px;
overflow: hidden;
}
.menu-bar {
background: #3a3a3a;
padding: 4px 8px;
display: flex;
align-items: center;
gap: 2px;
}
.menu-item {
color: #fff;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
background: transparent;
border: none;
}
.menu-icons {
display: flex;
gap: 4px;
margin-left: 8px;
}
.menu-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #888;
}
.main-tabs {
display: flex;
background: #3a3a3a;
}
.main-tab {
padding: 10px 20px;
color: #fff;
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
border: none;
background: transparent;
}
.main-tab.active {
background: #00ae42;
}
.tab-icon {
font-size: 14px;
}
.bambu-content {
background: #f0f0f0;
padding: 0;
}
.section {
border-bottom: 1px solid #d0d0d0;
padding: 10px 12px;
}
.section-header {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #666;
margin-bottom: 10px;
}
.printer-cards {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.printer-card {
text-align: center;
}
.printer-card-image {
width: 70px;
height: 70px;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
position: relative;
}
.printer-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
border-radius: 4px;
}
.texture-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #c4a000 0%, #a08000 100%);
border-radius: 4px;
}
.sync-icon {
font-size: 30px;
color: #888;
}
.printer-card-label {
font-size: 11px;
color: #333;
}
.checkmark-badge {
position: absolute;
top: 2px;
left: 2px;
color: #00ae42;
font-size: 14px;
}
.nozzle-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.nozzle-column {
font-size: 11px;
}
.nozzle-title {
color: #666;
margin-bottom: 6px;
border-bottom: 1px solid #ccc;
padding-bottom: 4px;
}
.nozzle-setting {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.nozzle-label {
color: #333;
}
.nozzle-value {
color: #333;
}
.nozzle-select {
background: #fff;
border: 1px solid #ccc;
padding: 2px 4px;
font-size: 11px;
min-width: 70px;
}
.filaments-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.filaments-badge {
background: #ffd700;
color: #333;
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 500;
}
.filaments-actions {
margin-left: auto;
display: flex;
gap: 4px;
}
.filament-action-btn {
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.filament-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.filament-item {
display: flex;
align-items: center;
gap: 4px;
}
.filament-number {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
color: #fff;
border-radius: 2px;
}
.filament-number.green {
background: #00ae42;
}
.filament-number.yellow {
background: #c4a000;
}
.filament-number.blue {
background: #4a90d9;
}
.filament-select {
display: flex;
align-items: center;
gap: 2px;
background: #fff;
border: 1px solid #ccc;
padding: 2px 6px;
font-size: 11px;
}
.filament-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid #888;
}
.filament-dot.green {
background: #00ae42;
}
.filament-dot.yellow {
background: #c4a000;
}
.process-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.process-badge {
background: #00ae42;
color: #fff;
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
}
.process-badge.gray {
background: #888;
}
.process-toggle {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
}
.toggle-label {
font-size: 11px;
color: #333;
}
.toggle-switch {
width: 36px;
height: 18px;
background: #00ae42;
border-radius: 9px;
position: relative;
}
.toggle-switch::after {
content: '';
position: absolute;
right: 2px;
top: 2px;
width: 14px;
height: 14px;
background: #fff;
border-radius: 50%;
}
.process-actions {
display: flex;
gap: 4px;
}
.process-action-btn {
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: #666;
}
.process-select {
background: #fff;
border: 1px solid #ccc;
padding: 4px 8px;
font-size: 11px;
width: 100%;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.quality-tabs {
display: flex;
border-bottom: 2px solid #00ae42;
margin-bottom: 10px;
}
.quality-tab {
padding: 6px 12px;
font-size: 11px;
color: #333;
cursor: pointer;
border: none;
background: transparent;
}
.quality-tab.active {
border-bottom: 2px solid #00ae42;
margin-bottom: -2px;
font-weight: 600;
}
.settings-table {
font-size: 11px;
}
.settings-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
border-bottom: 1px solid #e0e0e0;
}
.settings-row:last-child {
border-bottom: none;
}
.settings-label {
color: #333;
flex: 1;
}
.settings-value {
display: flex;
align-items: center;
gap: 4px;
}
.settings-input {
width: 50px;
padding: 2px 4px;
border: 1px solid #ccc;
background: #fff;
font-size: 11px;
text-align: center;
}
.settings-unit {
color: #888;
font-size: 10px;
}
.settings-checkbox {
width: 14px;
height: 14px;
}
.collapsible-section {
border-bottom: 1px solid #d0d0d0;
}
.collapsible-header {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
font-size: 12px;
color: #333;
}
.collapsible-icon {
color: #888;
font-size: 10px;
}
.collapsible-content {
padding: 0 12px 10px 24px;
}
/* Ironing Section Highlight */
.ironing-section {
border: 3px solid #ff6b6b !important;
border-radius: 8px;
background: #fff8f8 !important;
animation: highlight-pulse 2s ease-in-out infinite;
}
@keyframes highlight-pulse {
0%,
100% {
box-shadow: 0 0 15px rgba(255, 107, 107, 0.4);
}
50% {
box-shadow: 0 0 25px rgba(255, 107, 107, 0.7);
}
}
.dropdown-container {
position: relative;
}
.dropdown-select {
background: #fff;
border: 1px solid #ccc;
padding: 4px 8px;
font-size: 11px;
width: 120px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.dropdown-arrow {
font-size: 8px;
color: #666;
}
.dropdown-menu {
background: #fff;
border: 2px solid #00ae42 !important;
width: 120px;
z-index: 10;
box-shadow: 0 4px 15px rgba(0, 174, 66, 0.3) !important;
}
.dropdown-item {
padding: 6px 10px;
font-size: 11px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
}
.dropdown-item:hover {
background: linear-gradient(90deg, #00ae42, #00d26a) !important;
color: #fff !important;
transform: translateX(3px);
}
.dropdown-item.active {
background: linear-gradient(90deg, #00ae42, #00d26a) !important;
color: #fff !important;
box-shadow: 0 0 10px rgba(0, 174, 66, 0.5);
}
.dropdown-check {
color: #00ae42;
font-size: 12px;
}
.dropdown-item.active .dropdown-check {
color: #fff;
}
/* ============ RIGHT SIDE - Learning Panel ============ */
.learning-panel {
flex: 1;
padding: 25px;
display: flex;
flex-direction: column;
position: relative;
overflow-y: auto;
}
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.particle {
position: absolute;
width: 10px;
height: 10px;
background: rgba(0, 174, 66, 0.3);
border-radius: 50%;
animation: float-particle 15s infinite;
}
@keyframes float-particle {
0%,
100% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) rotate(720deg);
opacity: 0;
}
}
.learning-header {
text-align: center;
margin-bottom: 20px;
position: relative;
z-index: 10;
}
.learning-title {
font-family: 'Fredoka One', cursive;
font-size: 34px;
background: linear-gradient(135deg, #00d26a 0%, #4ecdc4 50%, #45b7d1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: title-glow 3s ease-in-out infinite;
}
@keyframes title-glow {
0%,
100% {
filter: drop-shadow(0 0 20px rgba(0, 210, 106, 0.5));
}
50% {
filter: drop-shadow(0 0 40px rgba(0, 210, 106, 0.8));
}
}
.learning-subtitle {
color: #a0aec0;
font-size: 13px;
margin-top: 6px;
}
.step-indicator {
background: rgba(0, 174, 66, 0.2);
border: 1px solid rgba(0, 174, 66, 0.4);
padding: 6px 16px;
border-radius: 20px;
display: inline-block;
margin-top: 8px;
color: #00d26a;
font-size: 12px;
font-weight: 500;
}
.speaker-section {
display: flex;
gap: 20px;
margin-bottom: 20px;
position: relative;
z-index: 10;
}
.speaker-container {
width: 140px;
text-align: center;
flex-shrink: 0;
}
.speaker-avatar {
width: 110px;
height: 110px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
}
.speaker-face {
font-size: 60px;
animation: speaker-idle 2s ease-in-out infinite;
}
.speaker-face.speaking {
animation: speaker-talk 0.3s ease-in-out infinite;
}
@keyframes speaker-idle {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
@keyframes speaker-talk {
0%,
100% {
transform: scale(1) translateY(0);
}
25% {
transform: scale(1.05) translateY(-2px);
}
75% {
transform: scale(0.98) translateY(2px);
}
}
.sound-waves {
position: absolute;
right: -25px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 3px;
opacity: 0;
transition: opacity 0.3s ease;
}
.sound-waves.active {
opacity: 1;
}
.wave {
width: 3px;
height: 15px;
background: #00d26a;
border-radius: 2px;
animation: wave-pulse 0.5s ease-in-out infinite;
}
.wave:nth-child(2) {
animation-delay: 0.1s;
height: 22px;
}
.wave:nth-child(3) {
animation-delay: 0.2s;
height: 18px;
}
@keyframes wave-pulse {
0%,
100% {
transform: scaleY(0.5);
}
50% {
transform: scaleY(1);
}
}
.speaker-name {
color: #fff;
font-weight: 600;
font-size: 14px;
}
.speaker-title {
color: #a0aec0;
font-size: 10px;
}
.speech-bubble {
flex: 1;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 18px;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.speech-bubble::before {
content: '';
position: absolute;
left: -15px;
top: 35px;
border: 8px solid transparent;
border-right-color: rgba(255, 255, 255, 0.1);
}
.speech-text {
color: #fff;
font-size: 14px;
line-height: 1.6;
min-height: 70px;
}
.highlight-word {
background: linear-gradient(90deg, #00d26a, #4ecdc4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}
.options-section {
position: relative;
z-index: 10;
}
.options-title {
color: #fff;
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.options-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.option-card {
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 12px;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
}
.option-card:hover {
transform: translateY(-4px);
border-color: rgba(0, 210, 106, 0.5);
box-shadow: 0 8px 25px rgba(0, 210, 106, 0.2);
}
.option-card.active {
border-color: #00d26a;
background: rgba(0, 210, 106, 0.1);
transform: scale(1.02);
}
.option-card.completed {
border-color: #4ecdc4;
}
.option-card.completed::after {
content: 'â';
position: absolute;
top: 6px;
right: 6px;
color: #4ecdc4;
font-size: 14px;
}
.option-number {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #00ae42 0%, #00d26a 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 14px;
margin-bottom: 8px;
}
.option-name {
color: #fff;
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
}
.option-description {
color: #a0aec0;
font-size: 10px;
line-height: 1.4;
}
.option-effect {
margin-top: 8px;
padding: 6px;
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.effect-icon {
font-size: 18px;
}
.effect-label {
color: #a0aec0;
font-size: 9px;
}
.effect-value {
color: #fff;
font-size: 11px;
font-weight: 600;
}
.surface-preview {
margin-top: 15px;
background: rgba(0, 0, 0, 0.3);
border-radius: 12px;
padding: 12px;
position: relative;
z-index: 10;
}
.preview-title {
color: #fff;
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.surface-animation {
height: 80px;
background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
border-radius: 8px;
position: relative;
overflow: hidden;
}
.surface-layer {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 8px;
background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb);
border-radius: 2px;
transition: all 0.5s ease;
}
.surface-layer.rough {
background: repeating-linear-gradient(90deg, #ff6b6b 0px, #ff6b6b 5px, #cc5555 5px, #cc5555 10px);
height: 12px;
}
.surface-layer.smooth {
background: linear-gradient(90deg, #4ecdc4 0%, #45b7d1 50%, #4ecdc4 100%);
height: 6px;
box-shadow: 0 0 15px rgba(78, 205, 196, 0.5);
}
.surface-layer.super-smooth {
background: linear-gradient(90deg, #00d26a 0%, #4ecdc4 50%, #00d26a 100%);
height: 4px;
box-shadow: 0 0 25px rgba(0, 210, 106, 0.7);
}
.surface-label {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.controls {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 15px;
position: relative;
z-index: 10;
flex-wrap: wrap;
}
.control-btn {
padding: 10px 24px;
border: none;
border-radius: 50px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
}
.btn-primary {
background: linear-gradient(135deg, #00ae42 0%, #00d26a 100%);
color: #fff;
box-shadow: 0 8px 25px rgba(0, 174, 66, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
}
.btn-intro {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}
.btn-stop {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
color: #fff;
}
.progress-container {
margin-top: 15px;
position: relative;
z-index: 10;
}
.progress-bar {
height: 5px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #00d26a, #4ecdc4);
border-radius: 3px;
transition: width 0.5s ease;
width: 0%;
}
.progress-text {
color: #a0aec0;
font-size: 10px;
margin-top: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="tutorial-container">
<!-- LEFT SIDE - Full Bambu Studio Interface -->
<div class="demo-panel">
<div class="demo-header">
<h2>đ BAMBU STUDIO INTERFACE</h2>
</div>
<div class="demo-content">
<!-- ========== FULL BAMBU STUDIO APP ========== -->
<div class="app-container">
<!-- Menu Bar -->
<div class="menu-bar">
<button class="menu-item">⥠File</button>
<div class="menu-icons">
<span class="menu-icon">â</span>
<span class="menu-icon">âļ</span>
</div>
</div>
<!-- Main Tabs -->
<div class="main-tabs">
<button class="main-tab">đ </button>
<button class="main-tab active">
<span class="tab-icon">đ</span> Prepare
</button>
<button class="main-tab">
<span class="tab-icon">đ</span> Preview
</button>
<button class="main-tab">
<span class="tab-icon">đą</span> Device
</button>
</div>
<!-- Content -->
<div class="bambu-content">
<!-- Printer Section -->
<div class="section">
<div class="section-header">
<span>đ¨</span> Printer
</div>
<div class="printer-cards">
<div class="printer-card">
<div class="printer-card-image">
<span class="checkmark-badge">â</span>
<div class="printer-icon"></div>
</div>
<div class="printer-card-label">Bambu Lab H2D</div>
</div>
<div class="printer-card">
<div class="printer-card-image">
<div class="texture-icon"></div>
</div>
<div class="printer-card-label">Texture...</div>
</div>
<div class="printer-card">
<div class="printer-card-image">
<span class="sync-icon">âģ</span>
</div>
<div class="printer-card-label">Sync info</div>
</div>
</div>
<!-- Nozzle Settings -->
<div class="nozzle-row">
<div class="nozzle-column">
<div class="nozzle-title">Left Nozzle</div>
<div class="nozzle-setting">
<span class="nozzle-label">AMS</span>
<span class="nozzle-value">Not installed</span>
</div>
<div class="nozzle-setting">
<span class="nozzle-label">Diameter</span>
<select class="nozzle-select">
<option>0.4</option>
</select>
</div>
<div class="nozzle-setting">
<span class="nozzle-label">Flow</span>
<select class="nozzle-select">
<option>Standard</option>
</select>
</div>
</div>
<div class="nozzle-column">
<div class="nozzle-title">Right Nozzle</div>
<div class="nozzle-setting">
<span class="nozzle-label">AMS</span>
<span class="nozzle-value">Not installed</span>
</div>
<div class="nozzle-setting">
<span class="nozzle-label">Diameter</span>
<select class="nozzle-select">
<option>0.4</option>
</select>
</div>
<div class="nozzle-setting">
<span class="nozzle-label">Flow</span>
<select class="nozzle-select">
<option>Standard</option>
</select>
</div>
</div>
</div>
</div>
<!-- Project Filaments Section -->
<div class="section">
<div class="filaments-header">
<span>đ¨</span> Project Filaments
<span class="filaments-badge">Flushing volumes</span>
<div class="filaments-actions">
<button class="filament-action-btn">+</button>
<button class="filament-action-btn">â</button>
<button class="filament-action-btn">â</button>
</div>
</div>
<div class="filament-list">
<div class="filament-item">
<span class="filament-number green">1</span>
<div class="filament-select"><span>âŧ</span> PLA Basic</div>
<span class="filament-dot"></span>
</div>
<div class="filament-item">
<span class="filament-number yellow">2</span>
<div class="filament-select"><span>âŧ</span> PLA Glow</div>
<span class="filament-dot green"></span>
</div>
<div class="filament-item">
<span class="filament-number green">3</span>
<div class="filament-select"><span>âŧ</span> PLA Glow</div>
<span class="filament-dot"></span>
</div>
<div class="filament-item">
<span class="filament-number blue">4</span>
<div class="filament-select"><span>âŧ</span> PLA Basic</div>
<span class="filament-dot"></span>
</div>
<div class="filament-item">
<span class="filament-number green">5</span>
<div class="filament-select"><span>âŧ</span> PLA Basic</div>
<span class="filament-dot"></span>
</div>
</div>
</div>
<!-- Process Section -->
<div class="section">
<div class="process-header">
<span>â</span> Process
<span class="process-badge">Global</span>
<span class="process-badge gray">Objects</span>
<div class="process-toggle">
<span class="toggle-label">Advanced</span>
<div class="toggle-switch"></div>
</div>
<div class="process-actions">
<button class="process-action-btn">âĄ</button>
<button class="process-action-btn">â</button>
</div>
</div>
<div class="process-select">
<span>âŧ 0.16mm Standard @BBL H2D</span>
<span>đ</span>
</div>
<!-- Quality Tabs -->
<div class="quality-tabs">
<button class="quality-tab active">Quality</button>
<button class="quality-tab">Strength</button>
<button class="quality-tab">Speed</button>
<button class="quality-tab">Support</button>
<button class="quality-tab">Others</button>
</div>
<!-- Settings -->
<div class="settings-table">
<div class="settings-row">
<span class="settings-label">X-Y hole compensation</span>
<div class="settings-value">
<input type="text" class="settings-input" value="0">
<span class="settings-unit">mm</span>
</div>
</div>
<div class="settings-row">
<span class="settings-label">X-Y contour compensation</span>
<div class="settings-value">
<input type="text" class="settings-input" value="0">
<span class="settings-unit">mm</span>
</div>
</div>
<div class="settings-row">
<span class="settings-label">Elephant foot compensation</span>
<div class="settings-value">
<input type="text" class="settings-input" value="0.15">
<span class="settings-unit">mm</span>
</div>
</div>
</div>
</div>
<!-- IRONING SECTION - Main Focus -->
<div class="collapsible-section ironing-section">
<div class="collapsible-header">
<span class="collapsible-icon">âŧ</span>
<span>đĨ <strong>Ironing</strong></span>
</div>
<div class="collapsible-content">
<div class="settings-row">
<span class="settings-label">Ironing Type</span>
<div class="dropdown-container">
<div class="dropdown-select" id="dropdownSelect">
<span id="selectedText">No ironing</span>
<span class="dropdown-arrow">âŧ</span>
</div>
<div class="dropdown-menu" id="dropdownMenu">
<div class="dropdown-item" data-option="0"
onclick="selectDropdownOption(0)">
<span class="dropdown-check">â</span> No ironing
</div>
<div class="dropdown-item" data-option="1"
onclick="selectDropdownOption(1)">
Top surfaces
</div>
<div class="dropdown-item" data-option="2"
onclick="selectDropdownOption(2)">
Topmost surface
</div>
<div class="dropdown-item" data-option="3"
onclick="selectDropdownOption(3)">
All solid layer
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Wall Generator Section -->
<div class="collapsible-section">
<div class="collapsible-header">
<span class="collapsible-icon">âļ</span>
<span>â Wall generator</span>
</div>
</div>
<!-- Advanced Section -->
<div class="collapsible-section">
<div class="collapsible-header">
<span class="collapsible-icon">âļ</span>
<span>â Advanced</span>
</div>
</div>
</div>
</div>
<div class="image-instruction">
<strong>đ Click on any dropdown option</strong> above to learn about it!
</div>
</div>
</div>
<!-- RIGHT SIDE - Learning Panel -->
<div class="learning-panel">
<div class="particles" id="particles"></div>
<div class="learning-header">
<h1 class="learning-title">đĨ Ironing Type Settings</h1>
<p class="learning-subtitle">Bambu Studio Configuration Tutorial</p>
<div class="step-indicator" id="stepIndicator">đ Select an option to learn</div>
</div>
<div class="speaker-section">
<div class="speaker-container">
<div class="speaker-avatar">
<span class="speaker-face" id="speakerFace">đ§âđĢ</span>
<div class="sound-waves" id="soundWaves">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
<div class="speaker-name">Professor Print</div>
<div class="speaker-title">3D Printing Expert âĸ British</div>
</div>
<div class="speech-bubble">
<p class="speech-text" id="speechText">
Welcome! I'm <span class="highlight-word">Professor Print</span>. Click on any ironing option in
the dropdown menu on the left, or click one of the cards below to learn. Click <span
class="highlight-word">Introduction</span> for an overview!
</p>
</div>
</div>
<div class="options-section">
<h3 class="options-title">đ Ironing Type Options</h3>
<div class="options-grid">
<div class="option-card" id="card0" onclick="explainOption(0)">
<div class="option-number">1</div>
<div class="option-name">No Ironing</div>
<div class="option-description">Standard printing without surface smoothing.</div>
<div class="option-effect">
<span class="effect-icon">âĄ</span>
<div>
<div class="effect-label">Print Time</div>
<div class="effect-value">Fastest</div>
</div>
</div>
</div>
<div class="option-card" id="card1" onclick="explainOption(1)">
<div class="option-number">2</div>
<div class="option-name">Top Surfaces</div>
<div class="option-description">Smooths all visible top surfaces.</div>
<div class="option-effect">
<span class="effect-icon">â¨</span>
<div>
<div class="effect-label">Surface Quality</div>
<div class="effect-value">Very Good</div>
</div>
</div>
</div>
<div class="option-card" id="card2" onclick="explainOption(2)">
<div class="option-number">3</div>
<div class="option-name">Topmost Surface</div>
<div class="option-description">Only smooths the very top layer.</div>
<div class="option-effect">
<span class="effect-icon">đ¯</span>
<div>
<div class="effect-label">Balance</div>
<div class="effect-value">Time & Quality</div>
</div>
</div>
</div>
<div class="option-card" id="card3" onclick="explainOption(3)">
<div class="option-number">4</div>
<div class="option-name">All Solid Layer</div>
<div class="option-description">Irons every solid layer for perfection.</div>
<div class="option-effect">
<span class="effect-icon">đ</span>
<div>
<div class="effect-label">Surface Quality</div>
<div class="effect-value">Perfect</div>
</div>
</div>
</div>
</div>
</div>
<div class="surface-preview">
<h3 class="preview-title">đ Surface Effect Preview</h3>
<div class="surface-animation">
<div class="surface-label" id="surfaceLabel">Click an option to see the effect</div>
<div class="surface-layer" id="surfaceLayer"></div>
</div>
</div>
<div class="progress-container">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="progress-text" id="progressText">0 of 4 options explored</div>
</div>
<div class="controls">
<button class="control-btn btn-stop" onclick="stopSpeaking()">âšī¸ Stop</button>
<button class="control-btn btn-intro" onclick="playIntroduction()">đ Introduction</button>
<button class="control-btn btn-primary" onclick="playAllOptions()">âļī¸ Play All</button>
</div>
</div>
</div>
<script>
const introductionSpeech = `Good day, and welcome to this tutorial on the Ironing Type setting in Bambu Studio! I'm Professor Print, your guide for today. On the left side, you can see the Bambu Studio interface showing the Process settings, under the Quality tab. The Ironing section is highlighted with a red border. Ironing is a technique where the hot nozzle makes an extra pass over the top surface, creating a smooth glass-like finish. The dropdown offers four options. Click on any option to learn about it!`;
const options = [
{
name: "No Ironing",
speech: "Right then! 'No Ironing' is the default setting. The printer completes the print without any additional surface treatment. Top surfaces will show the typical layer pattern with visible lines. It's the quickest option, splendid for prototypes or functional parts where surface finish isn't critical!",
surfaceClass: "rough",
surfaceLabel: "Standard - Visible Layer Lines"
},
{
name: "Top Surfaces",
speech: "Marvellous! 'Top Surfaces' is rather brilliant. The hot nozzle makes an extra pass over ALL flat horizontal surfaces, gently melting and redistributing the plastic. It's like ironing a shirt! This gives you a lovely smooth, almost glossy finish. Absolutely smashing for display pieces!",
surfaceClass: "smooth",
surfaceLabel: "Smooth - All Top Surfaces Ironed"
},
{
name: "Topmost Surface",
speech: "Ah, 'Topmost Surface' - a jolly good compromise! This setting only irons the very top layer of your entire print. It's perfect when you want a beautiful finish on top but don't want to add too much printing time. Rather clever for box lids or nameplates!",
surfaceClass: "smooth",
surfaceLabel: "Smooth - Only Top Layer Ironed"
},
{
name: "All Solid Layer",
speech: "And finally, 'All Solid Layer' - the crème de la crème! This setting irons every single solid layer throughout your print. It takes the longest, but the results are absolutely magnificent! Surfaces as smooth as polished glass. Perfect for professional showcase pieces!",
surfaceClass: "super-smooth",
surfaceLabel: "Ultra Smooth - All Layers Ironed"
}
];
let exploredOptions = new Set();
let synth = window.speechSynthesis;
function createParticles() {
const container = document.getElementById('particles');
for (let i = 0; i < 12; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 15 + 's';
particle.style.width = (Math.random() * 8 + 4) + 'px';
particle.style.height = particle.style.width;
container.appendChild(particle);
}
}
function selectDropdownOption(index) {
explainOption(index);
}
function playIntroduction() {
document.getElementById('stepIndicator').textContent = 'đ Introduction';
document.getElementById('speechText').innerHTML = introductionSpeech;
document.querySelectorAll('.option-card').forEach(card => card.classList.remove('active'));
document.querySelectorAll('.dropdown-item').forEach(item => item.classList.remove('active'));
speak(introductionSpeech);
}
function stopSpeaking() {
synth.cancel();
document.getElementById('speakerFace').classList.remove('speaking');
document.getElementById('soundWaves').classList.remove('active');
}
function speak(text) {
synth.cancel();
const utterance = new SpeechSynthesisUtterance(text);
const voices = synth.getVoices();
const britishVoice = voices.find(v => v.lang === 'en-GB' || v.name.includes('British'));
if (britishVoice) utterance.voice = britishVoice;
utterance.rate = 0.95;
utterance.onstart = () => {
document.getElementById('speakerFace').classList.add('speaking');
document.getElementById('soundWaves').classList.add('active');
};
utterance.onend = () => {
document.getElementById('speakerFace').classList.remove('speaking');
document.getElementById('soundWaves').classList.remove('active');
};
synth.speak(utterance);
}
function explainOption(index) {
const option = options[index];
const optionNames = ['No ironing', 'Top surfaces', 'Topmost surface', 'All solid layer'];
document.getElementById('speechText').innerHTML = option.speech;
document.getElementById('stepIndicator').textContent = `đ Option ${index + 1}: ${option.name}`;
document.getElementById('surfaceLayer').className = 'surface-layer ' + option.surfaceClass;
document.getElementById('surfaceLabel').textContent = option.surfaceLabel;
document.getElementById('selectedText').textContent = optionNames[index];
document.querySelectorAll('.option-card').forEach((card, i) => {
card.classList.remove('active');
if (i === index) card.classList.add('active');
});
document.querySelectorAll('.dropdown-item').forEach((item, i) => {
item.classList.remove('active');
if (i === index) item.classList.add('active');
});
exploredOptions.add(index);
document.getElementById('card' + index).classList.add('completed');
const progress = (exploredOptions.size / 4) * 100;
document.getElementById('progressFill').style.width = progress + '%';
document.getElementById('progressText').textContent = `${exploredOptions.size} of 4 options explored`;
speak(option.speech);
}
async function playAllOptions() {
playIntroduction();
await new Promise(r => { const c = setInterval(() => { if (!synth.speaking) { clearInterval(c); setTimeout(r, 800); } }, 100); });
for (let i = 0; i < 4; i++) {
explainOption(i);
await new Promise(r => { const c = setInterval(() => { if (!synth.speaking) { clearInterval(c); setTimeout(r, 600); } }, 100); });
}
document.getElementById('stepIndicator').textContent = 'â
Tutorial Complete!';
speak("Brilliant! Tutorial complete! Happy printing!");
}
window.onload = () => {
createParticles();
if (speechSynthesis.onvoiceschanged !== undefined) speechSynthesis.onvoiceschanged = () => { };
};
</script>
</body>
</html>
Live Preview