{"id":5027,"date":"2026-03-24T08:31:48","date_gmt":"2026-03-24T08:31:48","guid":{"rendered":"https:\/\/saiweiglass.com\/?page_id=5027"},"modified":"2026-03-24T08:33:40","modified_gmt":"2026-03-24T08:33:40","slug":"glass-substrate-configurator","status":"publish","type":"page","link":"https:\/\/saiweiglass.com\/pt\/capabilities\/ag-etching\/glass-substrate-configurator\/","title":{"rendered":"Configurador de substrato de vidro"},"content":{"rendered":"\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-63ba690\" data-block-id=\"63ba690\"><style>.stk-63ba690 {margin-bottom:18px !important;}<\/style><div class=\"stk-row stk-inner-blocks has-text-align-center stk-block-content stk-content-align stk-63ba690-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-4011d3e\" data-v=\"4\" data-block-id=\"4011d3e\"><style>.stk-4011d3e-container{margin-top:30px !important;margin-right:30px !important;margin-bottom:30px !important;margin-left:30px !important;}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-4011d3e-container stk--no-background stk--no-padding\"><div class=\"has-text-align-center stk-block-content stk-inner-blocks stk-4011d3e-inner-blocks\">\n<h1>Glass Substrate Configurator<\/h1>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-a0f67ba\" data-block-id=\"a0f67ba\"><style>.stk-a0f67ba {margin-bottom:18px !important;}<\/style><div class=\"stk-row stk-inner-blocks has-text-align-center stk-block-content stk-content-align stk-a0f67ba-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-d033e12\" data-v=\"4\" data-block-id=\"d033e12\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-d033e12-container stk--no-background stk--no-padding\"><div class=\"has-text-align-center stk-block-content stk-inner-blocks stk-d033e12-inner-blocks\"><div class=\"ct-breadcrumbs\" data-source=\"rankmath\" ><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Home<\/span><\/p><\/nav><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns alignfull stk-block-columns stk-block stk-8cbf4f3\" data-block-id=\"8cbf4f3\"><style>.stk-8cbf4f3 {margin-bottom:18px !important;}<\/style><div class=\"stk-row stk-inner-blocks has-text-align-center stk-block-content stk-content-align stk-8cbf4f3-column alignfull\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-2f19bbf\" data-v=\"4\" data-block-id=\"2f19bbf\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-2f19bbf-container stk--no-background stk--no-padding\"><div class=\"has-text-align-center stk-block-content stk-inner-blocks stk-2f19bbf-inner-blocks\">\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Glass Substrate Configurator | SaiweiGlass<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n  --c0: #1a2340;\n  --c1: #FFFFFF;\n  --c2: #304890;\n  --c3: #1860A8;\n  --c4: #1878C0;\n  --c5: #3048A8;\n  --c-bg: #F0F4FA;\n  --c-border: #D0D9EB;\n}\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nbody { font-family: 'Inter', sans-serif; background: var(--c-bg); color: var(--c0); line-height: 1.6; }\n.tool-container { max-width: 780px; margin: 0 auto; padding: 24px 16px; }\n.tool-header { text-align: center; margin-bottom: 32px; }\n.tool-header h1 { font-size: 28px; font-weight: 800; color: var(--c0); margin-bottom: 8px; }\n.tool-header p { font-size: 15px; color: #5a6a8a; max-width: 560px; margin: 0 auto; }\n\n\/* Progress Bar *\/\n.progress-wrap { margin-bottom: 32px; }\n.progress-steps { display: flex; align-items: center; justify-content: space-between; position: relative; }\n.progress-steps::before {\n  content: ''; position: absolute; top: 18px; left: 24px; right: 24px; height: 3px;\n  background: var(--c-border); z-index: 0;\n}\n.progress-line {\n  position: absolute; top: 18px; left: 24px; height: 3px;\n  background: linear-gradient(90deg, var(--c3), var(--c4)); z-index: 1;\n  transition: width 0.4s ease; width: 0%;\n}\n.step-dot {\n  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: default;\n}\n.step-dot .dot {\n  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  font-size: 14px; font-weight: 700; background: var(--c1); border: 3px solid var(--c-border);\n  color: #8a96b0; transition: all 0.3s;\n}\n.step-dot.active .dot { border-color: var(--c3); color: var(--c3); background: var(--c1); }\n.step-dot.completed .dot { border-color: var(--c3); background: var(--c3); color: var(--c1); }\n.step-dot .dot-label { font-size: 11px; font-weight: 600; color: #8a96b0; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }\n.step-dot.active .dot-label, .step-dot.completed .dot-label { color: var(--c3); }\n@media (max-width: 600px) { .step-dot .dot-label { display: none; } }\n\n\/* Card *\/\n.card {\n  background: var(--c1); border: 1px solid var(--c-border); border-radius: 16px;\n  padding: 32px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(26,35,64,0.06);\n}\n.step-panel { display: none; animation: fadeIn 0.35s ease; }\n.step-panel.active { display: block; }\n@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n\n.step-title { font-size: 20px; font-weight: 800; color: var(--c0); margin-bottom: 4px; }\n.step-desc { font-size: 14px; color: #5a6a8a; margin-bottom: 24px; }\n\n\/* Option Grid *\/\n.option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }\n.option-card {\n  padding: 16px; border: 2px solid var(--c-border); border-radius: 12px;\n  cursor: pointer; text-align: center; transition: all 0.2s; background: var(--c1);\n}\n.option-card:hover { border-color: var(--c4); background: rgba(24,120,192,0.03); }\n.option-card.selected { border-color: var(--c3); background: rgba(24,96,168,0.06); box-shadow: 0 0 0 3px rgba(24,96,168,0.1); }\n.option-card .opt-name { font-size: 15px; font-weight: 700; color: var(--c0); }\n.option-card .opt-detail { font-size: 12px; color: #5a6a8a; margin-top: 2px; }\n\n\/* Checkbox grid *\/\n.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }\n.check-item {\n  display: flex; align-items: center; gap: 12px; padding: 14px 16px;\n  border: 2px solid var(--c-border); border-radius: 12px; cursor: pointer; transition: all 0.2s;\n}\n.check-item:hover { border-color: var(--c4); }\n.check-item.checked { border-color: var(--c3); background: rgba(24,96,168,0.06); }\n.check-box {\n  width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--c-border);\n  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s;\n}\n.check-item.checked .check-box { background: var(--c3); border-color: var(--c3); }\n.check-box svg { width: 14px; height: 14px; fill: var(--c1); opacity: 0; transition: opacity 0.2s; }\n.check-item.checked .check-box svg { opacity: 1; }\n.check-label { font-size: 14px; font-weight: 600; color: var(--c0); }\n\n\/* Custom Input *\/\n.custom-input-row { display: none; margin-top: 16px; }\n.custom-input-row.visible { display: flex; align-items: center; gap: 12px; }\n.custom-input-row label { font-size: 13px; font-weight: 600; color: var(--c2); white-space: nowrap; }\n.custom-input-row input {\n  padding: 10px 14px; border: 2px solid var(--c-border); border-radius: 10px;\n  font-family: 'Inter', sans-serif; font-size: 15px; color: var(--c0); width: 160px;\n}\n.custom-input-row input:focus { outline: none; border-color: var(--c3); }\n\n\/* Dimension inputs *\/\n.dim-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }\n@media (max-width: 600px) { .dim-grid { grid-template-columns: 1fr; } }\n.dim-group { display: flex; flex-direction: column; gap: 6px; }\n.dim-group label { font-size: 13px; font-weight: 600; color: var(--c2); text-transform: uppercase; letter-spacing: 0.5px; }\n.dim-group input {\n  padding: 12px 16px; border: 2px solid var(--c-border); border-radius: 10px;\n  font-family: 'Inter', sans-serif; font-size: 15px; color: var(--c0);\n}\n.dim-group input:focus { outline: none; border-color: var(--c3); box-shadow: 0 0 0 3px rgba(24,96,168,0.12); }\n\n\/* Navigation *\/\n.nav-row { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--c-bg); }\n.btn {\n  display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border: none; border-radius: 10px;\n  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s;\n}\n.btn-secondary { background: var(--c-bg); color: var(--c2); border: 2px solid var(--c-border); }\n.btn-secondary:hover { background: var(--c-border); }\n.btn-primary { background: linear-gradient(135deg, var(--c3), var(--c4)); color: var(--c1); box-shadow: 0 2px 12px rgba(24,96,168,0.25); }\n.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(24,96,168,0.35); }\n.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }\n.btn svg { width: 16px; height: 16px; fill: currentColor; }\n\n\/* Summary *\/\n.summary-card {\n  background: var(--c1); border: 2px solid var(--c3); border-radius: 16px;\n  padding: 32px; box-shadow: 0 4px 24px rgba(24,96,168,0.12); display: none; animation: fadeIn 0.5s ease;\n}\n.summary-card.visible { display: block; }\n.summary-card h2 { font-size: 22px; font-weight: 800; color: var(--c0); margin-bottom: 4px; }\n.summary-subtitle { font-size: 14px; color: #5a6a8a; margin-bottom: 24px; }\n.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }\n@media (max-width: 600px) { .summary-grid { grid-template-columns: 1fr; } }\n.summary-row {\n  display: flex; justify-content: space-between; align-items: center;\n  padding: 14px 16px; border-bottom: 1px solid var(--c-bg);\n}\n.summary-row:nth-child(odd) { background: rgba(240,244,250,0.5); }\n.summary-grid .summary-row { border-right: 1px solid var(--c-bg); }\n.summary-label { font-size: 13px; font-weight: 600; color: #5a6a8a; text-transform: uppercase; letter-spacing: 0.4px; }\n.summary-value { font-size: 15px; font-weight: 700; color: var(--c0); text-align: right; }\n\n.summary-cta { text-align: center; margin-top: 28px; }\n.cta-btn {\n  display: inline-flex; align-items: center; gap: 10px;\n  padding: 16px 40px; border: none; border-radius: 12px;\n  background: linear-gradient(135deg, var(--c3), var(--c4)); color: var(--c1);\n  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700;\n  cursor: pointer; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;\n  box-shadow: 0 4px 20px rgba(24,96,168,0.3);\n}\n.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(24,96,168,0.4); }\n.cta-btn svg { width: 18px; height: 18px; fill: currentColor; }\n\n.restart-link {\n  display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600;\n  color: var(--c3); cursor: pointer; text-decoration: underline;\n}\n.restart-link:hover { color: var(--c4); }\n<\/style>\n<\/head>\n<body>\n<div class=\"tool-container\">\n  <div class=\"tool-header\">\n    <h1>Glass Substrate Configurator<\/h1>\n    <p>Build your custom AG glass specification step by step. Configure substrate, thickness, AG grade, treatments, and dimensions.<\/p>\n  <\/div>\n\n  <!-- Progress Bar -->\n  <div class=\"progress-wrap\">\n    <div class=\"progress-steps\" id=\"progressSteps\">\n      <div class=\"progress-line\" id=\"progressLine\"><\/div>\n      <div class=\"step-dot active\" data-step=\"1\"><div class=\"dot\">1<\/div><div class=\"dot-label\">Substrate<\/div><\/div>\n      <div class=\"step-dot\" data-step=\"2\"><div class=\"dot\">2<\/div><div class=\"dot-label\">Thickness<\/div><\/div>\n      <div class=\"step-dot\" data-step=\"3\"><div class=\"dot\">3<\/div><div class=\"dot-label\">AG Grade<\/div><\/div>\n      <div class=\"step-dot\" data-step=\"4\"><div class=\"dot\">4<\/div><div class=\"dot-label\">Treatments<\/div><\/div>\n      <div class=\"step-dot\" data-step=\"5\"><div class=\"dot\">5<\/div><div class=\"dot-label\">Dimensions<\/div><\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Steps -->\n  <div class=\"card\" id=\"stepsCard\">\n    <!-- Step 1: Substrate -->\n    <div class=\"step-panel active\" data-panel=\"1\">\n      <div class=\"step-title\">Select Substrate<\/div>\n      <div class=\"step-desc\">Choose the base glass substrate for your project.<\/div>\n      <div class=\"option-grid\" data-group=\"substrate\">\n        <div class=\"option-card\" data-value=\"Corning Gorilla Glass\">\n          <div class=\"opt-name\">Corning Gorilla Glass<\/div>\n          <div class=\"opt-detail\">Premium cover glass<\/div>\n        <\/div>\n        <div class=\"option-card\" data-value=\"Schott Xensation\">\n          <div class=\"opt-name\">Schott Xensation<\/div>\n          <div class=\"opt-detail\">Aluminosilicate glass<\/div>\n        <\/div>\n        <div class=\"option-card\" data-value=\"AGC Dragontrail\">\n          <div class=\"opt-name\">AGC Dragontrail<\/div>\n          <div class=\"opt-detail\">Chemically strengthened<\/div>\n        <\/div>\n        <div class=\"option-card\" data-value=\"Soda-Lime\">\n          <div class=\"opt-name\">Soda-Lime<\/div>\n          <div class=\"opt-detail\">Standard float glass<\/div>\n        <\/div>\n        <div class=\"option-card\" data-value=\"Borosilicate\">\n          <div class=\"opt-name\">Borosilicate<\/div>\n          <div class=\"opt-detail\">Heat-resistant glass<\/div>\n        <\/div>\n        <div class=\"option-card\" data-value=\"Custom\">\n          <div class=\"opt-name\">Custom<\/div>\n          <div class=\"opt-detail\">Specify your own<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"custom-input-row\" id=\"customSubstrate\">\n        <label>Substrate Name:<\/label>\n        <input type=\"text\" id=\"customSubstrateInput\" placeholder=\"Enter substrate type\">\n      <\/div>\n      <div class=\"nav-row\">\n        <div><\/div>\n        <button class=\"btn btn-primary\" id=\"next1\" disabled>Next <svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Step 2: Thickness -->\n    <div class=\"step-panel\" data-panel=\"2\">\n      <div class=\"step-title\">Select Thickness<\/div>\n      <div class=\"step-desc\">Choose the glass thickness that fits your application requirements.<\/div>\n      <div class=\"option-grid\" data-group=\"thickness\">\n        <div class=\"option-card\" data-value=\"0.4mm\"><div class=\"opt-name\">0.4 mm<\/div><div class=\"opt-detail\">Ultra-thin<\/div><\/div>\n        <div class=\"option-card\" data-value=\"0.55mm\"><div class=\"opt-name\">0.55 mm<\/div><div class=\"opt-detail\">Thin<\/div><\/div>\n        <div class=\"option-card\" data-value=\"0.7mm\"><div class=\"opt-name\">0.7 mm<\/div><div class=\"opt-detail\">Standard thin<\/div><\/div>\n        <div class=\"option-card\" data-value=\"1.1mm\"><div class=\"opt-name\">1.1 mm<\/div><div class=\"opt-detail\">Standard<\/div><\/div>\n        <div class=\"option-card\" data-value=\"1.5mm\"><div class=\"opt-name\">1.5 mm<\/div><div class=\"opt-detail\">Medium<\/div><\/div>\n        <div class=\"option-card\" data-value=\"2.0mm\"><div class=\"opt-name\">2.0 mm<\/div><div class=\"opt-detail\">Thick<\/div><\/div>\n        <div class=\"option-card\" data-value=\"3.0mm\"><div class=\"opt-name\">3.0 mm<\/div><div class=\"opt-detail\">Heavy duty<\/div><\/div>\n        <div class=\"option-card\" data-value=\"Custom\"><div class=\"opt-name\">Custom<\/div><div class=\"opt-detail\">Specify your own<\/div><\/div>\n      <\/div>\n      <div class=\"custom-input-row\" id=\"customThickness\">\n        <label>Thickness (mm):<\/label>\n        <input type=\"number\" id=\"customThicknessInput\" placeholder=\"e.g. 1.8\" step=\"0.01\" min=\"0.1\" max=\"25\">\n      <\/div>\n      <div class=\"nav-row\">\n        <button class=\"btn btn-secondary\" id=\"back2\"><svg viewBox=\"0 0 24 24\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg> Back<\/button>\n        <button class=\"btn btn-primary\" id=\"next2\" disabled>Next <svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Step 3: AG Grade -->\n    <div class=\"step-panel\" data-panel=\"3\">\n      <div class=\"step-title\">Select AG Grade<\/div>\n      <div class=\"step-desc\">Choose the anti-glare etching intensity level.<\/div>\n      <div class=\"option-grid\" data-group=\"aggrade\">\n        <div class=\"option-card\" data-value=\"Ultra Light\">\n          <div class=\"opt-name\">Ultra Light<\/div>\n          <div class=\"opt-detail\">Haze 2-8%, Gloss 100-120 GU<\/div>\n        <\/div>\n        <div class=\"option-card\" data-value=\"Light\">\n          <div class=\"opt-name\">Light<\/div>\n          <div class=\"opt-detail\">Haze 8-18%, Gloss 80-100 GU<\/div>\n        <\/div>\n        <div class=\"option-card\" data-value=\"Medium\">\n          <div class=\"opt-name\">Medium<\/div>\n          <div class=\"opt-detail\">Haze 18-30%, Gloss 60-80 GU<\/div>\n        <\/div>\n        <div class=\"option-card\" data-value=\"Heavy\">\n          <div class=\"opt-name\">Heavy<\/div>\n          <div class=\"opt-detail\">Haze 30-50%, Gloss 40-60 GU<\/div>\n        <\/div>\n        <div class=\"option-card\" data-value=\"Custom\">\n          <div class=\"opt-name\">Custom<\/div>\n          <div class=\"opt-detail\">Specify target haze\/gloss<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"custom-input-row\" id=\"customGrade\">\n        <label>Target Haze (%):<\/label>\n        <input type=\"number\" id=\"customGradeInput\" placeholder=\"e.g. 25\" step=\"0.1\" min=\"0\" max=\"100\">\n      <\/div>\n      <div class=\"nav-row\">\n        <button class=\"btn btn-secondary\" id=\"back3\"><svg viewBox=\"0 0 24 24\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg> Back<\/button>\n        <button class=\"btn btn-primary\" id=\"next3\" disabled>Next <svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Step 4: Treatments -->\n    <div class=\"step-panel\" data-panel=\"4\">\n      <div class=\"step-title\">Additional Treatments<\/div>\n      <div class=\"step-desc\">Select any additional processing treatments you need. You can choose multiple options or skip this step.<\/div>\n      <div class=\"check-grid\" id=\"treatmentsGrid\">\n        <div class=\"check-item\" data-value=\"Chemical Strengthening\">\n          <div class=\"check-box\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg><\/div>\n          <span class=\"check-label\">Chemical Strengthening<\/span>\n        <\/div>\n        <div class=\"check-item\" data-value=\"AR Coating\">\n          <div class=\"check-box\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg><\/div>\n          <span class=\"check-label\">AR Coating<\/span>\n        <\/div>\n        <div class=\"check-item\" data-value=\"AF Coating\">\n          <div class=\"check-box\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg><\/div>\n          <span class=\"check-label\">AF Coating<\/span>\n        <\/div>\n        <div class=\"check-item\" data-value=\"Silk-Screen Printing\">\n          <div class=\"check-box\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg><\/div>\n          <span class=\"check-label\">Silk-Screen Printing<\/span>\n        <\/div>\n        <div class=\"check-item\" data-value=\"Edge Polishing\">\n          <div class=\"check-box\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg><\/div>\n          <span class=\"check-label\">Edge Polishing<\/span>\n        <\/div>\n      <\/div>\n      <div class=\"nav-row\">\n        <button class=\"btn btn-secondary\" id=\"back4\"><svg viewBox=\"0 0 24 24\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg> Back<\/button>\n        <button class=\"btn btn-primary\" id=\"next4\">Next <svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg><\/button>\n      <\/div>\n    <\/div>\n\n    <!-- Step 5: Dimensions -->\n    <div class=\"step-panel\" data-panel=\"5\">\n      <div class=\"step-title\">Dimensions &amp; Quantity<\/div>\n      <div class=\"step-desc\">Enter the size and quantity for your order.<\/div>\n      <div class=\"dim-grid\">\n        <div class=\"dim-group\">\n          <label>Width (mm)<\/label>\n          <input type=\"number\" id=\"dimWidth\" placeholder=\"e.g. 300\" min=\"1\" max=\"5000\">\n        <\/div>\n        <div class=\"dim-group\">\n          <label>Height (mm)<\/label>\n          <input type=\"number\" id=\"dimHeight\" placeholder=\"e.g. 200\" min=\"1\" max=\"5000\">\n        <\/div>\n        <div class=\"dim-group\">\n          <label>Quantity<\/label>\n          <input type=\"number\" id=\"dimQty\" placeholder=\"e.g. 1000\" min=\"1\" max=\"10000000\">\n        <\/div>\n      <\/div>\n      <div class=\"nav-row\">\n        <button class=\"btn btn-secondary\" id=\"back5\"><svg viewBox=\"0 0 24 24\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg> Back<\/button>\n        <button class=\"btn btn-primary\" id=\"finishBtn\" disabled>View Summary <svg viewBox=\"0 0 24 24\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"\/><\/svg><\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Summary -->\n  <div class=\"summary-card\" id=\"summaryCard\">\n    <h2>Your Custom AG Glass Specification<\/h2>\n    <div class=\"summary-subtitle\">Review your configuration below, then submit for a quote.<\/div>\n    <div class=\"summary-grid\" id=\"summaryGrid\"><\/div>\n    <div class=\"summary-cta\">\n      <a href=\"#ct-popup-787\" class=\"cta-btn\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/><\/svg>\n        Submit This Configuration for a Quote\n      <\/a>\n      <div class=\"restart-link\" id=\"restartBtn\">Start Over<\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\nconst state = { step: 1, substrate: '', thickness: '', aggrade: '', treatments: [], width: '', height: '', qty: '' };\nconst totalSteps = 5;\n\nfunction updateProgress() {\n  const dots = document.querySelectorAll('.step-dot');\n  dots.forEach(dot => {\n    const s = parseInt(dot.dataset.step);\n    dot.classList.remove('active', 'completed');\n    if (s < state.step) dot.classList.add('completed');\n    else if (s === state.step) dot.classList.add('active');\n  });\n  const pct = ((state.step - 1) \/ (totalSteps - 1)) * 100;\n  document.getElementById('progressLine').style.width = pct + '%';\n}\n\nfunction showStep(n) {\n  state.step = n;\n  document.querySelectorAll('.step-panel').forEach(p => p.classList.remove('active'));\n  const target = document.querySelector(`.step-panel[data-panel=\"${n}\"]`);\n  if (target) target.classList.add('active');\n  document.getElementById('stepsCard').style.display = n <= totalSteps ? 'block' : 'none';\n  updateProgress();\n}\n\n\/\/ Option card selection (single select)\ndocument.querySelectorAll('.option-grid').forEach(grid => {\n  const group = grid.dataset.group;\n  grid.addEventListener('click', e => {\n    const card = e.target.closest('.option-card');\n    if (!card) return;\n    grid.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n    card.classList.add('selected');\n    const val = card.dataset.value;\n\n    if (group === 'substrate') {\n      state.substrate = val;\n      const custom = document.getElementById('customSubstrate');\n      if (val === 'Custom') { custom.classList.add('visible'); } else { custom.classList.remove('visible'); }\n      document.getElementById('next1').disabled = false;\n    } else if (group === 'thickness') {\n      state.thickness = val;\n      const custom = document.getElementById('customThickness');\n      if (val === 'Custom') { custom.classList.add('visible'); } else { custom.classList.remove('visible'); }\n      document.getElementById('next2').disabled = false;\n    } else if (group === 'aggrade') {\n      state.aggrade = val;\n      const custom = document.getElementById('customGrade');\n      if (val === 'Custom') { custom.classList.add('visible'); } else { custom.classList.remove('visible'); }\n      document.getElementById('next3').disabled = false;\n    }\n  });\n});\n\n\/\/ Checkbox treatments\ndocument.querySelectorAll('.check-item').forEach(item => {\n  item.addEventListener('click', () => {\n    item.classList.toggle('checked');\n    const val = item.dataset.value;\n    if (item.classList.contains('checked')) {\n      if (!state.treatments.includes(val)) state.treatments.push(val);\n    } else {\n      state.treatments = state.treatments.filter(t => t !== val);\n    }\n  });\n});\n\n\/\/ Dimension validation\nfunction checkDimensions() {\n  const w = document.getElementById('dimWidth').value;\n  const h = document.getElementById('dimHeight').value;\n  const q = document.getElementById('dimQty').value;\n  document.getElementById('finishBtn').disabled = !(w && h && q);\n  state.width = w;\n  state.height = h;\n  state.qty = q;\n}\ndocument.getElementById('dimWidth').addEventListener('input', checkDimensions);\ndocument.getElementById('dimHeight').addEventListener('input', checkDimensions);\ndocument.getElementById('dimQty').addEventListener('input', checkDimensions);\n\n\/\/ Navigation\ndocument.getElementById('next1').addEventListener('click', () => {\n  if (state.substrate === 'Custom') {\n    const v = document.getElementById('customSubstrateInput').value.trim();\n    if (v) state.substrate = v;\n  }\n  showStep(2);\n});\ndocument.getElementById('next2').addEventListener('click', () => {\n  if (state.thickness === 'Custom') {\n    const v = document.getElementById('customThicknessInput').value.trim();\n    if (v) state.thickness = v + 'mm';\n  }\n  showStep(3);\n});\ndocument.getElementById('next3').addEventListener('click', () => {\n  if (state.aggrade === 'Custom') {\n    const v = document.getElementById('customGradeInput').value.trim();\n    if (v) state.aggrade = 'Custom (' + v + '% haze)';\n  }\n  showStep(4);\n});\ndocument.getElementById('next4').addEventListener('click', () => showStep(5));\n\ndocument.getElementById('back2').addEventListener('click', () => showStep(1));\ndocument.getElementById('back3').addEventListener('click', () => showStep(2));\ndocument.getElementById('back4').addEventListener('click', () => showStep(3));\ndocument.getElementById('back5').addEventListener('click', () => showStep(4));\n\n\/\/ Finish\ndocument.getElementById('finishBtn').addEventListener('click', () => {\n  checkDimensions();\n  showSummary();\n});\n\nfunction showSummary() {\n  document.getElementById('stepsCard').style.display = 'none';\n  const grid = document.getElementById('summaryGrid');\n  const rows = [\n    ['Substrate', state.substrate],\n    ['Thickness', state.thickness],\n    ['AG Grade', state.aggrade],\n    ['Treatments', state.treatments.length > 0 ? state.treatments.join(', ') : 'None'],\n    ['Width', state.width + ' mm'],\n    ['Height', state.height + ' mm'],\n    ['Quantity', parseInt(state.qty).toLocaleString() + ' pcs']\n  ];\n  grid.innerHTML = rows.map(([label, value]) =>\n    `<div class=\"summary-row\"><span class=\"summary-label\">${label}<\/span><span class=\"summary-value\">${value}<\/span><\/div>`\n  ).join('');\n  document.getElementById('summaryCard').classList.add('visible');\n\n  \/\/ Update progress to completed\n  document.querySelectorAll('.step-dot').forEach(dot => dot.classList.add('completed'));\n  document.getElementById('progressLine').style.width = '100%';\n}\n\n\/\/ Restart\ndocument.getElementById('restartBtn').addEventListener('click', () => {\n  state.substrate = ''; state.thickness = ''; state.aggrade = ''; state.treatments = [];\n  state.width = ''; state.height = ''; state.qty = '';\n  document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));\n  document.querySelectorAll('.check-item').forEach(c => c.classList.remove('checked'));\n  document.querySelectorAll('.custom-input-row').forEach(c => c.classList.remove('visible'));\n  document.querySelectorAll('input').forEach(i => i.value = '');\n  ['next1','next2','next3','finishBtn'].forEach(id => { const el = document.getElementById(id); if (el) el.disabled = true; });\n  document.getElementById('summaryCard').classList.remove('visible');\n  document.getElementById('stepsCard').style.display = 'block';\n  showStep(1);\n});\n<\/script>\n<\/body>\n<\/html>\n\n<\/div><\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Glass Substrate Configurator | SaiweiGlass Glass Substrate Configurator Build your custom AG glass specification step by step. Configure substrate, thickness, AG grade, treatments, and dimensions. 1 Substrate 2 Thickness 3 AG Grade 4 Treatments 5 Dimensions Select Substrate Choose the base glass substrate for your project. Corning Gorilla Glass Premium cover glass Schott Xensation Aluminosilicate [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":4784,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_gspb_post_css":"","footnotes":""},"class_list":["post-5027","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/saiweiglass.com\/pt\/wp-json\/wp\/v2\/pages\/5027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saiweiglass.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saiweiglass.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saiweiglass.com\/pt\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/saiweiglass.com\/pt\/wp-json\/wp\/v2\/comments?post=5027"}],"version-history":[{"count":0,"href":"https:\/\/saiweiglass.com\/pt\/wp-json\/wp\/v2\/pages\/5027\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/saiweiglass.com\/pt\/wp-json\/wp\/v2\/pages\/4784"}],"wp:attachment":[{"href":"https:\/\/saiweiglass.com\/pt\/wp-json\/wp\/v2\/media?parent=5027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}