Add Filament / Printer window & web based windows improvements (#9431)

* update * update * Update 23.css * update * update * Update 21.css * update
2025-07-06 14:37:36 -06:00 · 2025-04-24 11:23:28 +03:00 · 2025-04-24 11:23:28 +03:00 · 0d3683c3e1
commit 0d3683c3e1
parent 07634d2ba2
22 changed files with 211 additions and 81 deletions
--- a/resources/web/guide/11/earth.png
+++ b/resources/web/guide/11/earth.png
--- a/resources/web/guide/11/tip.png
+++ b/resources/web/guide/11/tip.png
--- a/resources/web/guide/21/21.css
+++ b/resources/web/guide/21/21.css
@ -1,7 +1,7 @@
-
 #Content
 {
 	overflow-y:auto;
+	padding: 32px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
 }

 .BlockBanner
@ -21,7 +21,11 @@
 	align-items: center;
 	height: 40px;
 	text-align: center;
-	margin-right: 10px;
+	margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */
+}
+
+.BannerBtns>.SmallBtn_Green.trans{
+	margin-right: 7px; /* ORCA adds a small gap between buttons */
 }

 .BlockBanner  a
@ -36,7 +40,7 @@

 .PrinterArea
 {
-	padding: 10px;
+	padding: 10px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
 	display: flex;
 	flex-wrap: wrap;
 }
@ -57,7 +61,7 @@
 .PName
 {
 	font-weight: 700;
-	text-align: left;
+	text-align:left;
 }

 .pNozzel
@ -66,7 +70,7 @@
 	align-items: center;
 	justify-content:flex-start;
 	color: #5A5A5A;	
-	padding-left: 10px;
+	padding-left: 0px; /* ORCA Align checkboxes with with model text */
 }

 .pNozzel input
@ -129,26 +133,47 @@
 	width: 100%;
 	position: relative;
 	display: flex;
-  }
+}
  
-  .searchTerm {
+.searchTerm {
 	width: 100%;
-	border: 3px solid #009688;
+	border: 1px solid #DBDBDB; /* ORCA Searchbox > match border style */
 	/*border-right: none;*/
 	padding: 5px;
-	height: 20px;
+	padding-left:32px;
+	height: 20px;      /* ORCA match height */
+	line-height: 20px; /* ORCA center text vertically */
 	border-radius: 5px 5px 5px 5px;
 	outline: none;
 	color: #9DBFAF;
-  }
-  
-  .searchTerm:focus{
-	color: #009688;
-  }
-  
-  /*Resize the wrap to see the search bar change!*/
-  .wrap{
+}
+@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
+	.searchTerm {border: 1px solid #4A4A51;}
+}
+
+.searchTerm:focus{
+	color: #363636;       /* ORCA Searchbox > use normal text color */
+	border-color:#009688; /* ORCA Searchbox > highlight border color when focused. like on normal UI */
+}
+@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
+	.searchTerm:focus{color: #FFFFFF}
+}
+
+#search-icon{ /* ORCA */
+	position:absolute;
+    top: 50%;
+    transform: translateY(-50%);
+	left:8px;
+	margin:0px auto;
+	fill:#7C8282
+}
+@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
+	#search-icon{fill:#949494}
+}
+
+/*Resize the wrap to see the search bar change!*/
+.wrap{
 	width: 30%;
 	padding-bottom: 5px;
-	padding-left: 42px;
-  }
+	padding-left: 32px; /* ORCA Align with content */
+}
--- a/resources/web/guide/21/21.js
+++ b/resources/web/guide/21/21.js
@ -98,7 +98,8 @@ function HandleModelList( pVal )
 		for(let m=0;m<NozzleArray.length;m++)
 		{
 			let nNozzel=NozzleArray[m];
-			HtmlNozzel += '<div class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor +'" onclick="CheckBoxOnclick(this)" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></div>';
+			/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			HtmlNozzel += '<label class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor +'" onclick="CheckBoxOnclick(this)" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></label>';
 		}
 		
 		let CoverImage=OneModel['cover'];
@ -261,7 +262,8 @@ function FilterModelList(keyword) {
 		let HtmlNozzel = '';
 		for (let m = 0; m < NozzleArray.length; m++) {
 			let nNozzel = NozzleArray[m];
-			HtmlNozzel += '<div class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor + '" onclick="CheckBoxOnclick(this)" /><span>' + nNozzel + '</span><span class="trans" tid="t13">mm nozzle</span></div>';
+			/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			HtmlNozzel += '<label class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor + '" onclick="CheckBoxOnclick(this)" /><span>' + nNozzel + '</span><span class="trans" tid="t13">mm nozzle</span></label>';
 		}

 		let CoverImage = OneModel['cover'];
--- a/resources/web/guide/21/index.html
+++ b/resources/web/guide/21/index.html
@ -22,6 +22,10 @@
 <div class="wrap">
 	<div class="search">
 		<input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)">
+		<svg id="search-icon" width="16px" height="16px"> <!-- ORCA -->
+			<path d="M6.5,2A4.505,4.505,0,0,0,2,6.5a.5.5,0,0,0,1,0A3.5,3.5,0,0,1,6.5,3a.5.5,0,0,0,0-1Z"/>
+			<path d="M14.854,14.146l-3.423-3.422a6.518,6.518,0,1,0-.707.707l3.422,3.423a.5.5,0,0,0,.708-.708ZM1,6.5A5.5,5.5,0,1,1,6.5,12,5.507,5.507,0,0,1,1,6.5Z"/>
+		</svg>
 	</div>
 </div>
 <div id="Content"  class="ZScrol">
--- a/resources/web/guide/22/22.css
+++ b/resources/web/guide/22/22.css
@ -60,7 +60,7 @@ input

 .MItem
 {
-	min-width: 220px;
+	min-width: 180px; /* ORCA Filtered items > slightly reduce min width to fit more items*/
 	height: 32px;
 }

--- a/resources/web/guide/22/22.js
+++ b/resources/web/guide/22/22.js
@ -95,8 +95,8 @@ function SortUI()
 	for(let n=0;n<nMode;n++)
 	{
 		let sModel=ModelList[n];	
-
-		HtmlMode+='<div><input type="checkbox" mode="'+sModel['model']+'"  nozzle="'+sModel['nozzle_selected']+'"   onChange="MachineClick()" />'+sModel['model']+'</div>';
+		/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+		HtmlMode+='<label><input type="checkbox" mode="'+sModel['model']+'"  nozzle="'+sModel['nozzle_selected']+'"   onChange="MachineClick()" />'+sModel['model']+'</label>';
 	}
 	
 	$('#MachineList .CValues').append(HtmlMode);	
@ -172,7 +172,8 @@ function SortUI()
 			let LowType=fType.toLowerCase();
 		    if(!TypeHtmlArray.hasOwnProperty(LowType))
 		    {
-			    let HtmlType='<div><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()"   />'+fType+'</div>';
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlType='<label><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()"   />'+fType+'</label>';
 			
 				TypeHtmlArray[LowType]=HtmlType;
 		    }
@ -181,7 +182,8 @@ function SortUI()
 			let lowVendor=fVendor.toLowerCase();
 			if(!VendorHtmlArray.hasOwnProperty(lowVendor))
 		    {
-			    let HtmlVendor='<div><input type="checkbox" vendor="'+fVendor+'"  onChange="VendorClick()" />'+fVendor+'</div>';
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlVendor='<label><input type="checkbox" vendor="'+fVendor+'"  onChange="VendorClick()" />'+fVendor+'</label>';
 				
 				VendorHtmlArray[lowVendor]=HtmlVendor;
 		    }
@ -190,7 +192,8 @@ function SortUI()
 			let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
 	        if(pFila.length==0)
 		    {
-			    let HtmlFila='<div class="MItem"><input type="checkbox" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" />'+fShortName+'</div>';
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlFila='<label class="MItem"><input type="checkbox" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" />'+fShortName+'</label>';
 			
 			    $("#ItemBlockArea").append(HtmlFila);
 		    } 
--- a/resources/web/guide/22/index.html
+++ b/resources/web/guide/22/index.html
@ -24,7 +24,7 @@
 <div id="MachineList" class="ChooseBlock">
 	<div class="CName"><span class="trans" tid="t15">printer</span>：</div>
 	<div class="CValues">
-	<div><input type="checkbox" mode="all" onClick="ChooseAllMachine()"  /><span class="trans" tid="t11">all</span></div>
+	<label><input type="checkbox" mode="all" onClick="ChooseAllMachine()"  /><span class="trans" tid="t11">all</span></label>
 <!--	<div><input type="checkbox" mode="-normal" onChange="SortFilament()" />Bambulab BBL-3DP-001-V4-normal</div>
 	<div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div>
 	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>		
@ -48,7 +48,7 @@
 <div id="FilatypeList" class="ChooseBlock">
 	<div class="CName"><span class="trans" tid="t16">filament type</span>：</div>
 	<div class="CValues">
-	<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></div>
+	<label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></label>
 <!--	<div><input type="checkbox" filatype="PLA" />PLA</div>
 	<div><input type="checkbox" />PET</div>	
 	<div><input type="checkbox" />ABS</div>
@ -67,7 +67,7 @@
 <div id="VendorList" class="ChooseBlock">
 	<div class="CName"><span class="trans" tid="t17">vendor</span>：</div>
 	<div class="CValues">
-	<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></div>
+	<label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></label>
 <!--	<div><input type="checkbox" vendor="Unknow" />Unknown</div>
 	<div><input type="checkbox" />BBL</div>	
 	<div><input type="checkbox" />eSUN</div>
--- a/resources/web/guide/23/23.css
+++ b/resources/web/guide/23/23.css
@ -61,7 +61,7 @@ input

 .MItem
 {
-	min-width: 220px;
+	min-width: 180px; /* ORCA Filtered items > slightly reduce min width to fit more items*/
 	height: 32px;
 }

--- a/resources/web/guide/23/23.js
+++ b/resources/web/guide/23/23.js
@ -68,8 +68,8 @@ function SortUI()
 	for(let n=0;n<nMode;n++)
 	{
 		let sModel=ModelList[n];	
-
-		HtmlMode+='<div><input type="checkbox" mode="'+sModel['model']+'"  nozzle="'+sModel['nozzle_selected']+'"   onChange="MachineClick()" />'+sModel['model']+'</div>';
+		/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+		HtmlMode+='<label><input type="checkbox" mode="'+sModel['model']+'"  nozzle="'+sModel['nozzle_selected']+'"   onChange="MachineClick()" /><span>'+sModel['model']+'</span></label>';
 	}
 	
 	$('#MachineList .CValues').append(HtmlMode);	
@ -135,7 +135,8 @@ function SortUI()
 			let LowType=fType.toLowerCase();
 		    if(!TypeHtmlArray.hasOwnProperty(LowType))
 		    {
-			    let HtmlType='<div><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()"   />'+fType+'</div>';
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlType='<label><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()"   /><span>'+fType+'</span></label>';
 			
 				TypeHtmlArray[LowType]=HtmlType;
 		    }
@ -144,7 +145,8 @@ function SortUI()
 			let lowVendor=fVendor.toLowerCase();
 			if(!VendorHtmlArray.hasOwnProperty(lowVendor))
 		    {
-			    let HtmlVendor='<div><input type="checkbox" vendor="'+fVendor+'"  onChange="VendorClick()" />'+fVendor+'</div>';
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlVendor='<label><input type="checkbox" vendor="'+fVendor+'"  onChange="VendorClick()" /><span>'+fVendor+'</span></label>';
 				
 				VendorHtmlArray[lowVendor]=HtmlVendor;
 		    }
@ -153,7 +155,8 @@ function SortUI()
 			let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
 	        if(pFila.length==0)
 		    {
-			    let HtmlFila='<div class="MItem"><input type="checkbox" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" />'+fShortName+'</div>';
+				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			    let HtmlFila='<label class="MItem"><input type="checkbox" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
 			
 			    $("#ItemBlockArea").append(HtmlFila);
 		    } 
--- a/resources/web/guide/23/index.html
+++ b/resources/web/guide/23/index.html
@ -25,7 +25,7 @@
 <div id="MachineList" class="ChooseBlock">
 	<div class="CName"><span class="trans" tid="t15">printer</span>：</div>
 	<div class="CValues">
-	<div><input type="checkbox" mode="all" onClick="ChooseAllMachine()"  /><span class="trans" tid="t11">all</span></div>
+	<label><input type="checkbox" mode="all" onClick="ChooseAllMachine()"  /><span class="trans" tid="t11">all</span></label>
 <!--	<div><input type="checkbox" mode="-normal" onChange="SortFilament()" />Bambulab BBL-3DP-001-V4-normal</div>
 	<div><input type="checkbox" />Bambulab BBL-3DP-001-V5-normal</div>
 	<div><input type="checkbox" />Bambulab BBL-3DP-001-V4-normal</div>		
@ -40,7 +40,7 @@
 <div id="FilatypeList" class="ChooseBlock">
 	<div class="CName"><span class="trans" tid="t16">filament type</span>：</div>
 	<div class="CValues">
-	<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></div>
+	<label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllFilament()" /><span class="trans" tid="t11">all</span></label>
 <!--	<div><input type="checkbox" filatype="PLA" />PLA</div>
 	<div><input type="checkbox" />PET</div>	
 	<div><input type="checkbox" />ABS</div>
@ -53,7 +53,7 @@
 <div id="VendorList" class="ChooseBlock">
 	<div class="CName"><span class="trans" tid="t17">vendor</span>：</div>
 	<div class="CValues">
-	<div><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></div>
+	<label><input type="checkbox" class="trans" tid="t11" onClick="ChooseAllVendor()" /><span class="trans" tid="t11">all</span></label>
 <!--	<div><input type="checkbox" vendor="Unknow" />Unknown</div>
 	<div><input type="checkbox" />BBL</div>	
 	<div><input type="checkbox" />eSUN</div>
--- a/resources/web/guide/24/24.css
+++ b/resources/web/guide/24/24.css
@ -1,6 +1,7 @@
 #Content
 {
 	overflow-y:auto;
+	padding: 32px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
 }

 .BlockBanner
@ -20,7 +21,11 @@
 	align-items: center;
 	height: 40px;
 	text-align: center;
-	margin-right: 10px;
+	margin-right: 0px; /* ORCA align buttons with end of horizontal separator/line */
+}
+
+.BannerBtns>.SmallBtn_Green.trans{
+	margin-right: 7px; /* ORCA adds a small gap between buttons */
 }

 /*.Banner-Btn
@ -59,7 +64,7 @@

 .PrinterArea
 {
-	padding: 10px;
+	padding: 10px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
 	display: flex;
 	flex-wrap: wrap;
 }
@ -89,7 +94,7 @@
 	align-items: center;
 	justify-content:flex-start;
 	color: #5A5A5A;	
-	padding-left: 10px;
+	padding-left: 0px; /* ORCA Align checkboxes with with model text */
 }

 .pNozzel input
@ -152,26 +157,47 @@
 	width: 100%;
 	position: relative;
 	display: flex;
-  }
+}
  
-  .searchTerm {
+.searchTerm {
 	width: 100%;
-	border: 3px solid #009688;
+	border: 1px solid #DBDBDB; /* ORCA Searchbox > match border style */
 	/*border-right: none;*/
 	padding: 5px;
-	height: 20px;
+	padding-left:32px;
+	height: 20px;      /* ORCA match height */
+	line-height: 20px; /* ORCA center text vertically */
 	border-radius: 5px 5px 5px 5px;
 	outline: none;
 	color: #9DBFAF;
-  }
-  
-  .searchTerm:focus{
-	color: #009688;
-  }
-  
-  /*Resize the wrap to see the search bar change!*/
-  .wrap{
+}
+@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
+	.searchTerm {border: 1px solid #4A4A51;}
+}
+
+.searchTerm:focus{
+	color: #363636;       /* ORCA Searchbox > use normal text color */
+	border-color:#009688; /* ORCA Searchbox > highlight border color when focused. like on normal UI */
+}
+@media (prefers-color-scheme: dark) {  /* ORCA Searchbox > add dark mode support */
+	.searchTerm:focus{color: #FFFFFF}
+}
+
+#search-icon{ /* ORCA */
+	position:absolute;
+    top: 50%;
+    transform: translateY(-50%);
+	left:8px;
+	margin:0px auto;
+	fill:#7C8282
+}
+@media (prefers-color-scheme: dark) { /* ORCA Searchbox > add dark mode support */
+	#search-icon{fill:#949494}
+}
+
+/*Resize the wrap to see the search bar change!*/
+.wrap{
 	width: 30%;
 	padding-bottom: 5px;
-	padding-left: 42px;
-  }
+	padding-left: 32px; /* ORCA Align with content */
+}
--- a/resources/web/guide/24/24.js
+++ b/resources/web/guide/24/24.js
@ -98,7 +98,8 @@ function HandleModelList( pVal )
 		for(let m=0;m<NozzleArray.length;m++)
 		{
 			let nNozzel=NozzleArray[m];
-			HtmlNozzel += '<div class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor +'" onclick="CheckBoxOnclick(this)" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></div>';
+			/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			HtmlNozzel += '<label class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor +'" onclick="CheckBoxOnclick(this)" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></label>';
 		}
 		
 		let CoverImage=OneModel['cover'];
@ -261,7 +262,8 @@ function FilterModelList(keyword) {
 		let HtmlNozzel = '';
 		for (let m = 0; m < NozzleArray.length; m++) {
 			let nNozzel = NozzleArray[m];
-			HtmlNozzel += '<div class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor + '" onclick="CheckBoxOnclick(this)" /><span>' + nNozzel + '</span><span class="trans" tid="t13">mm nozzle</span></div>';
+			/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
+			HtmlNozzel += '<label class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor + '" onclick="CheckBoxOnclick(this)" /><span>' + nNozzel + '</span><span class="trans" tid="t13">mm nozzle</span></label>';
 		}

 		let CoverImage = OneModel['cover'];
--- a/resources/web/guide/24/index.html
+++ b/resources/web/guide/24/index.html
@ -22,6 +22,10 @@
 <div class="wrap">
 	<div class="search">
 		<input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)">
+		<svg id="search-icon" width="16px" height="16px"> <!-- ORCA -->
+			<path d="M6.5,2A4.505,4.505,0,0,0,2,6.5a.5.5,0,0,0,1,0A3.5,3.5,0,0,1,6.5,3a.5.5,0,0,0,0-1Z"/>
+			<path d="M14.854,14.146l-3.423-3.422a6.518,6.518,0,1,0-.707.707l3.422,3.423a.5.5,0,0,0,.708-.708ZM1,6.5A5.5,5.5,0,1,1,6.5,12,5.507,5.507,0,0,1,1,6.5Z"/>
+		</svg>
 	</div>
 </div>
 <div id="Content"  class="ZScrol"s>
--- a/resources/web/guide/3/index.html
+++ b/resources/web/guide/3/index.html
@ -26,10 +26,10 @@
 	</div>
 <br/>	

-	<div>
+	<label> <!-- ORCA use label tag to allow checkbox to toggle when user clicked to text -->
 	<input id="ChoosePrivacy" type="checkbox" onClick="SendPrivacySelect()"  onChange="SendPrivacySelect()" />
 	<span class="trans TextS1" tid="t7">Allow sending anonymous data</span>
-</div>
+</label>
 </div>		
 <div id="AcceptArea">
 	<div class="GrayBtn trans" tid="t8" id="PreBtn"  onclick="window.open('../11/index.html','_self')">Back</div>
--- a/resources/web/guide/31/index.html
+++ b/resources/web/guide/31/index.html
@ -25,10 +25,10 @@
 	</div>
 <br/>	

-	<div>
+	<label><!-- ORCA use label tag to allow checkbox to toggle when user clicked to text -->
 	<input id="ChoosePrivacy" type="checkbox" onClick="SendPrivacySelect()"  onChange="SendPrivacySelect()" />
 	<span class="trans" tid="t7">Allow sending anonymous data</span>
-</div>
+</label>
 </div>		
 <div id="AcceptArea">
 	<div class="GrayBtn trans" tid="t8" id="PreBtn"  onclick="window.open('../11/index.html','_self')">Back</div>
--- a/resources/web/guide/4orca/4orca.css
+++ b/resources/web/guide/4orca/4orca.css
@ -16,12 +16,12 @@
 	margin-top:10mm;
 	line-height: 30px;
 }
-
+/* ORCA brokes shape of custom css checkbox
 #StealthMode
 {
 	width: 30px;
 }
-
+*/
 #RestartText
 {
 	padding-left:30px;
--- a/resources/web/guide/4orca/index.html
+++ b/resources/web/guide/4orca/index.html
@ -25,8 +25,8 @@
    </div>
 	
 	
-	
-	<div id="CheckArea"><input id="StealthMode" onClick="SendStealthModeCheck()" type="checkbox"><a tid="orca5" class="trans TextS1">Enable Stealth Mode.</a></div>
+	<!-- ORCA use label tag to allow checkbox to toggle when user clicked to text -->
+	<label id="CheckArea"><input id="StealthMode" onClick="SendStealthModeCheck()" type="checkbox"><a tid="orca5" class="trans TextS1">Enable Stealth Mode.</a></label>
 	<div id="RestartText" tid="t70" class="trans" ></div>
 	
 </div>
--- a/resources/web/guide/5/5.css
+++ b/resources/web/guide/5/5.css
@ -16,11 +16,12 @@
 	margin-top:10mm;
 	line-height: 30px;
 }
-
+/* ORCA brokes shape of custom css checkbox
 #InstallCheck
 {
 	width: 30px;
 }
+*/

 #RestartText
 {
--- a/resources/web/guide/5/index.html
+++ b/resources/web/guide/5/index.html
@ -31,8 +31,8 @@
    </div>
 	
 	
-	
-	<div id="CheckArea"><input id="InstallCheck" onClick="SendInstallPluginCheck()" type="checkbox"><a tid="t69" class="trans TextS1">Install Bambu Network Plug-in. </a></div>
+	<!-- ORCA use label tag to allow checkbox to toggle when user clicked to text -->
+	<label id="CheckArea"><input id="InstallCheck" onClick="SendInstallPluginCheck()" type="checkbox"><a tid="t69" class="trans TextS1">Install Bambu Network Plug-in. </a></label>
 	<div id="RestartText" tid="t70" class="trans" ></div>
 	
 </div>
--- a/resources/web/guide/css/common.css
+++ b/resources/web/guide/css/common.css
@ -133,16 +133,17 @@ body
 	padding: 3mm 9mm;
 	font-size: 14px;
 	text-align: center;
-	border: 1px solid #575757;
+	/* border: 1px solid #575757; */ /* ORCA match button style */
 	border-radius: 18px;
-	color: #575757;
+	background-color: #D9D9D9;
+	color: #000;					/* ORCA match button style */
 	cursor: pointer;
 	margin-left: 10px;	
 }

 .GrayBtn:hover
 {
-	background-color:#E8E8E8;
+	background-color:#CCCCCC;		/* ORCA match button style */
 }

 .SmallBtn
@ -189,6 +190,50 @@ body
 	cursor: pointer;
 }

+/*---Checkboxes ORCA ---*/
+label:has(input[type="checkbox"]){
+	margin:0;
+	padding: 0;
+	margin-right: 20px;
+}
+
+label:has(input[type="checkbox"])>span{
+	vertical-align: middle;
+	margin:0;
+}
+
+input[type="checkbox"] {
+	-webkit-appearance: none;
+	appearance: none;
+	background-color:#FFFFFF;
+	margin:0;
+	margin-right: 6px;
+	width: 1em;
+	height: 1em;
+	border: 0.1em solid #DBDBDB;
+	border-radius: 0.15em;
+	display: inline-flex;
+	place-content: center;
+	background-color:#FFFFFF;
+}
+
+input[type="checkbox"]::before {
+	content: "";
+	width: 0.8em;
+	height: 0.8em;
+	transform: scale(0);
+	box-shadow: inset 1em 1em #FFFFFF;
+	clip-path: polygon(7% 37%, 0 45%, 33% 78%, 100% 30%, 95% 21%, 33% 64%);
+}
+
+input[type="checkbox"]:checked {
+	border-color:#009688;
+	background-color:#009688;
+}
+
+input[type="checkbox"]:checked::before {
+    transform: scale(1);
+}


 /*----------------Light Mode-------------------*/
--- a/resources/web/guide/css/dark.css
+++ b/resources/web/guide/css/dark.css
@ -6,7 +6,7 @@

 body
 {
-	background-color:#3E3E45;
+	background-color:#2D2D31; /* ORCA match background color */
 	color: #efeff0;
 }

@ -23,17 +23,32 @@ body
 	color: #009688;
 }

-/*-----Button-----*/
-.GrayBtn
-{
-	border: 1px solid #B9B9BC;
-	color: #B9B9BC;	
+.search>input[type=text]{
+	background-color:#2D2D31;
 }

-.GrayBtn:hover
+/*---Checkboxes ORCA---*/
+input[type=checkbox]{
+	background-color:#2D2D31;
+	border-color:#4A4A51;
+}
+
+input[type=checkbox]:checked{
+	background-color:#009688;
+}
+
+/*-----Button-----*/
+.GrayBtn, .SmallBtn /* ORCA match button style GrayBtn & SmallBtn */
 {
-	background-color:#E8E8E8;
-	color: #565656;
+	background-color:#3E3E45;
+	/* border: 1px solid #B9B9BC; */
+	color: #FFFFFF;	
+}
+
+.GrayBtn:hover, .SmallBtn:hover /* ORCA match button style GrayBtn & SmallBtn */
+{
+	background-color:#49494E;
+	color: #FFFFFF;
 }

 /*-------Text------*/