feat: Updated UI for better distinction of orca cloud and bambu cloud (#13755)

* feat: Updated UI for better distinction of orca cloud and bambu cloud

* refined UI

resources/web/data/text.js

@@ -112,6 +112,11 @@ var LangText = {
     orca4: "This stops the transmission of data to Bambu's cloud services. Users who don't use BBL machines or use LAN mode only can safely turn on this function.",
     orca5: "Enable Stealth Mode.",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   ca_ES: {
     t1: "Benvingut a Orca Slicer",
@@ -222,6 +227,11 @@ var LangText = {
     orca1: "Editar Informació del Projecte",
     orca2: "No hi ha informació del model",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   es_ES: {
     t1: "Bienvenido a Orca Slicer",
@@ -336,6 +346,11 @@ var LangText = {
     orca4: "Esta función detiene la transmisión de datos a los servicios en la nube de Bambu. Los usuarios que no utilicen máquinas BBL o que solo usen el modo LAN pueden activar esta función con seguridad.",
     orca5: "Activar modo sigiloso.",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   it_IT: {
     t1: "Benvenuti in OrcaSlicer",
@@ -449,6 +464,11 @@ var LangText = {
     orca4: "Con questa modalità, la trasmissione dei dati ai servizi cloud di Bambu sarà interrotta. Gli utenti che non utilizzano macchine BBL o che usano solo la modalità LAN possono attivare questa funzione in modo sicuro.",
     orca5: "Abilita la modalità invisibile.",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   de_DE: {
     t1: "Willkommen im Orca Slicer",
@@ -553,6 +573,11 @@ var LangText = {
     orca1: "Edit Project Info",
     orca2: "No model information",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   cs_CZ: {
     t1: "Vítejte v Orca Slicer",
@@ -657,6 +682,11 @@ var LangText = {
     orca1: "Edit Project Info",
     orca2: "No model information",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   fr_FR: {
     t1: "Bienvenue sur Orca Slicer",
@@ -780,6 +810,11 @@ var LangText = {
     wk15: "Texte 3D",
     wk16: "Avec l'outil Texte 3D, les utilisateurs peuvent facilement créer diverses formes de texte 3D dans le projet, ce qui rend le modèle plus personnalisé. Orca Slicer fournit des dizaines de polices et prend en charge les styles gras et italique pour donner au texte une plus grande flexibilité.",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   zh_CN: {
     t1: "欢迎使用Orca Slicer",
@@ -907,6 +942,11 @@ var LangText = {
     orca1: "编辑项目信息",
     orca2: "该模型没有相关信息",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   zh_TW: {
     t1: "歡迎使用 Orca Slicer",
@@ -1013,6 +1053,11 @@ var LangText = {
     orca1: "編輯專案資訊",
     orca2: "沒有模型相關資訊",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   ru_RU: {
     t1: "Приветствуем в Orca Slicer!",
@@ -1127,6 +1172,11 @@ var LangText = {
     orca4: "Это остановит передачу данных в облачные сервисы Bambu. Помешает только владельцам Bambu Lab, не использующим режим «Только LAN».",
     orca5: "Включить режим конфиденциальности",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   ko_KR: {
     t1: "Orca Slicer에 오신 것을 환영합니다",
@@ -1220,6 +1270,11 @@ var LangText = {
     orca1: "Edit Project Info",
     orca2: "No model information",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   tr_TR: {
     t1: "Orca Slicer'a hoş geldiniz",
@@ -1334,6 +1389,11 @@ var LangText = {
     orca4: "Bu, Bambu'nun bulut hizmetlerine veri iletimini durdurur. BBL makinelerini kullanmayan veya yalnızca LAN modunu kullanan kullanıcılar bu işlevi güvenle açabilir.",
     orca5: "Gizli Modu etkinleştirin.",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   pl_PL: {
     t1: "Witamy w Orca Slicer",
@@ -1448,6 +1508,11 @@ var LangText = {
     orca4: "To wyłączy przesyłanie danych do usług chmurowych Bambu. Użytkownicy, którzy nie korzystają z maszyn BBL lub używają tylko trybu LAN, mogą bez obaw włączyć tę opcję.",
     orca5: "Włącz tryb «Niewidzialny»",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   pt_BR: {
     t1: "Bem-vindo ao Orca Slicer",
@@ -1562,6 +1627,11 @@ var LangText = {
     orca4: "Isso interrompe a transmissão de dados para os serviços de nuvem da Bambu. Usuários que não usam máquinas BBL ou usam somente o modo LAN podem ativar essa função com segurança.",
     orca5: "Habilita Modo Furtivo.",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
   lt_LT: {
     t1: "Pasisveikinkite su Orca Slicer",
@@ -1675,6 +1745,11 @@ var LangText = {
     orca4: "Tai sustabdo duomenų perdavimą į Bambu debesijos paslaugas. Vartotojai, kurie nenaudoja BBL mašinų arba naudoja tik LAN režimą, gali drąsiai įjungti šią funkciją.",
     orca5: "Įjungti slaptą režimą.",
     orca6: "Bambu Cloud",
+    orca7: "Orca Cloud Account",
+    orca8: "Not signed in",
+    orca9: "Bambu Cloud Account",
+    orca10: "Not connected",
+    orca11: "Connected",
   },
 };
 

resources/web/homepage/css/dark.css

@@ -129,6 +129,11 @@ body
     border: 1px solid rgba(129, 129, 131, 0.64);
 }
 
+/*--- Account Sections ---*/
+.AccountSectionLabel    { color: #818183; }
+.OrcaAccountText        { color: #efeff0; }
+.AccountStatusText      { color: #818183; }
+
 /*--- Bambu Cloud Section ---*/
 #BambuCloudHeader       { color: #818183; }
 #BambuCloudHeader:hover { color: #efeff0; }

resources/web/homepage/css/home.css

@@ -80,7 +80,6 @@ body
 
 #LoginArea
 {
-	min-height: 180px;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -89,6 +88,38 @@ body
 	width:262px;
 }
 
+.AccountSectionLabel
+{
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--fg-color-text);
+	padding: 16px 20px 6px;
+	width: 262px;
+	box-sizing: border-box;
+}
+
+.AccountSectionIcon
+{
+	width: 18px;
+	height: 18px;
+	flex: 0 0 auto;
+}
+
+.AccountStatusText
+{
+	font-size: 12px;
+	color: #A8A8A8;
+	margin-top: 8px;
+}
+
+.OrcaAccountText
+{
+	font-weight: bold;
+}
+
 #OrcaLoginSection
 {
 	display: flex;

resources/web/homepage/index.html

@@ -24,11 +24,17 @@
 	<div id="LoginArea">
 
 	<!-- Orca Login Section -->
-	<div id="OrcaLoginSection">
+	<div id="OrcaSectionLabel" class="AccountSectionLabel">
-		<div id="OrcaLogin1">
+		<img class="AccountSectionIcon" src="../../images/OrcaSlicer_gradient_circle.svg" alt="" />
-			<div id="Icon1"><img id="BBLIcon" src="../image/logo.png" /></div> <!-- ORCA use square icon for better consistency on UI -->
+		<span class="trans OrcaAccountText" tid="orca7">Orca Cloud</span>
-			<div id="LoginBtn" class="ButtonStyleRegular ButtonTypeWindow" onClick="OnLoginOrRegister()"><span class="trans" tid="t26">login</span> / <span class="trans" tid="t27">register</span></div>
+	</div>
-		</div>
+
+		<div id="OrcaLoginSection">
+			<div id="OrcaLogin1">
+				<div id="Icon1"><img id="BBLIcon" src="../image/logo.png" /></div> <!-- ORCA use square icon for better consistency on UI -->
+				<div id="LoginBtn" class="ButtonStyleRegular ButtonTypeWindow" onClick="OnLoginOrRegister()"><span class="trans" tid="t26">login</span> / <span class="trans" tid="t27">register</span></div>
+				<div id="OrcaStatusText" class="AccountStatusText trans" tid="orca8">Not signed in</div>
+			</div>
 
 		<div id="OrcaLogin2">
 			<div>
@@ -261,4 +267,3 @@
 
 
 
-

resources/web/homepage/js/home.js

@@ -173,6 +173,7 @@ function GotoMenu( strMenu )
 function SetOrcaLoginInfo( strAvatar, strName )
 {
 	$("#OrcaLogin1").hide();
+	$("#OrcaStatusText").hide();
 
 	$("#UserName").text(strName);
 
@@ -196,6 +197,7 @@ function SetOrcaUserOffline()
 
 	$("#OrcaLogin1").show();
 	$("#OrcaLogin1").css("display","flex");
+	$("#OrcaStatusText").show();
 }
 
 function SetMallUrl( strUrl )
@@ -437,6 +439,8 @@ function SetBambuLoginInfo(strAvatar, strName) {
   $("#BambuLogin2").show();
   $("#BambuLogin2").css("display", "flex");
   $(".bambu-status-dot").addClass("online");
+  $("#BambuStatusText").text("Connected");
+  $("#BambuStatusText").attr("tid", "orca11");
 }
 
 function SetBambuUserOffline() {
@@ -448,6 +452,8 @@ function SetBambuUserOffline() {
     $("#BambuLogin1").css("display", "flex");
   }
   $(".bambu-status-dot").removeClass("online");
+  $("#BambuStatusText").text("Not connected");
+  $("#BambuStatusText").attr("tid", "orca10");
 }
 
 function OnBambuLoginOrRegister() { SendSimpleCommand("homepage_bambu_login_or_register"); }