прогресс

src/.prettierrc

@@ -24,12 +24,6 @@
       "options": {
         "printWidth": 600
       }
-    },
-    {
-      "files": "Cross.svelte",
-      "options": {
-        "printWidth": 50
-      }
     }
   ]
 }

src/App.svelte

@@ -33,8 +33,8 @@
 
   //****************************************************variable section**********************************************************/
   //******************************************************************************************************************************/
-  let myip = document.location.hostname;
-  //let myip = "192.168.88.235";
+  //let myip = document.location.hostname;
+  let myip = "192.168.88.235";
 
   //Flags
   let showInput = false;

src/components/Card.svelte

@@ -1,10 +1,22 @@
 <script>
+  import CloudIcon from "../svg/Cloud.svelte";
   export let title;
+  export let cloud = false;
+  export let cloudColor;
 </script>
 
 <div class="crd">
-  {#if title}
+  {#if title && !cloud}
     <h1 class="crd-hdr">{title}</h1>
+  {:else if title && cloud}
+    <div class="flex items-center">
+      <div class="w-11/12">
+        <h1 class="crd-hdr">{title}</h1>
+      </div>
+      <div class="flex justify-end w-1/12">
+        <CloudIcon color={cloudColor} />
+      </div>
+    </div>
   {/if}
   <slot />
 </div>

src/pages/Connection.svelte

@@ -5,6 +5,7 @@
   export let settingsJson;
   export let errorsJson;
   export let ssidJson;
+  let mqttConnected = true;
   export let ssidDropdownClick = () => {};
   export let saveSettings = () => {};
   export let rebootEsp = () => {};
@@ -65,7 +66,7 @@
     {/if}
     <button class="btn-lg" on:click={() => saveSettings()}>{"Сохранить"}</button>
   </Card>
-  <Card title="Подключение к MQTT брокеру">
+  <Card title="Подключение к MQTT брокеру" cloud={true} cloudColor={mqttConnected === true ? "text-green-500" : "text-red-500"}>
     <div class="crd-itm-psn">
       <div class="wgt-dscr-w">
         <p class="wgt-dscr-stl">Название сервера</p>

src/svg/Cross.svelte

@@ -2,14 +2,6 @@
   export let click = () => {};
 </script>
 
-<svg
-  on:click={click()}
-  class="h-6 w-6 text-red-400 cursor-pointer"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round">
+<svg on:click={click()} class="h-6 w-6 text-red-400 cursor-pointer" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <line x1="18" y1="6" x2="6" y2="18" />
   <line x1="6" y1="6" x2="18" y2="18" /></svg>