feat: added multilanguage for portal

src_data/styles/app.css

@@ -0,0 +1,203 @@
+@media (min-width: 576px) {
+  article {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 0.75);
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 0.75);
+  }
+}
+
+@media (min-width: 768px) {
+  article {
+    --pico-block-spacing-vertical: var(--pico-spacing);
+    --pico-block-spacing-horizontal: var(--pico-spacing);
+  }
+}
+
+@media (min-width: 1024px) {
+  article {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.25);
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.25);
+  }
+}
+
+@media (min-width: 1280px) {
+  article {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.5);
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.5);
+  }
+
+  .container {
+    max-width: 1000px;
+  }
+}
+
+@media (min-width: 1536px) {
+  article {
+    --pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.75);
+    --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.75);
+  }
+
+  .container {
+    max-width: 1000px;
+  }
+}
+
+header,
+main,
+footer {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+article {
+  margin-bottom: 1rem;
+}
+
+footer {
+  text-align: center;
+}
+
+/*nav li a:has(> div.logo) {
+  margin-bottom: 0;
+}*/
+nav li :where(a,[role=link]) {
+  margin: 0;
+}
+
+details>div {
+  padding: 0 var(--pico-form-element-spacing-horizontal);
+}
+
+pre {
+  padding: 0.5rem;
+}
+
+
+.hidden {
+  display: none !important;
+}
+
+button.success {
+  background-color: var(--pico-form-element-valid-border-color);
+  border-color: var(--pico-form-element-valid-border-color);
+}
+
+button.failed {
+  background-color: var(--pico-form-element-invalid-border-color);
+  border-color: var(--pico-form-element-invalid-border-color);
+}
+
+tr.network:hover {
+  --pico-background-color: var(--pico-primary-focus);
+  cursor: pointer;
+}
+
+.primary {
+  border: 0.25rem solid var(--pico-form-element-invalid-border-color);
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.logo {
+  display: inline-block;
+  padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
+  vertical-align: baseline;
+  line-height: var(--pico-line-height);
+  background-color: var(--pico-code-kbd-background-color);
+  border-radius: var(--pico-border-radius);
+  color: var(--pico-code-kbd-color);
+  font-weight: bolder;
+  font-size: 1.3rem;
+  font-family: var(--pico-font-family-monospace);
+}
+
+.thermostat {
+  display: grid;
+  grid-template-columns: 0.5fr 2fr 0.5fr;
+  grid-template-rows: 0.25fr 1fr 0.25fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  justify-content: center;
+  justify-items: center;
+  grid-template-areas:
+    ". thermostat-header ."
+    "thermostat-minus thermostat-temp thermostat-plus"
+    "thermostat-control thermostat-control thermostat-control";
+
+  border: .25rem solid var(--pico-blockquote-border-color);
+  padding: 0.5rem;
+}
+
+.thermostat-header {
+  justify-self: center;
+  align-self: end;
+  grid-area: thermostat-header;
+
+  font-size: 1rem;
+  font-weight: bold;
+  border-bottom: .25rem solid var(--pico-primary-hover-border);
+  margin: 0 0 1rem 0;
+}
+
+.thermostat-temp {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 0.5fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  grid-template-areas:
+    "thermostat-temp-target"
+    "thermostat-temp-current";
+  grid-area: thermostat-temp;
+}
+
+.thermostat-temp-target {
+  justify-self: center;
+  align-self: center;
+  grid-area: thermostat-temp-target;
+
+  font-weight: bold;
+  font-size: 1.75rem;
+}
+
+.thermostat-temp-current {
+  justify-self: center;
+  align-self: start;
+  grid-area: thermostat-temp-current;
+
+  color: var(--pico-secondary);
+  font-size: 0.85rem;
+}
+
+.thermostat-minus {
+  justify-self: end;
+  align-self: center;
+  grid-area: thermostat-minus;
+}
+
+.thermostat-plus {
+  justify-self: start;
+  align-self: center;
+  grid-area: thermostat-plus;
+}
+
+.thermostat-control {
+  justify-self: center;
+  align-self: start;
+  grid-area: thermostat-control;
+
+  margin: 1.25rem 0;
+}
+
+[class*=" icons-"],
+[class=icons],
+[class^=icons-] {
+  font-size: 1.35rem;
+}
+
+*:has(> [class*=" icons-"], > [class=icons], > [class^=icons-]):has(+ * > [class*=" icons-"], + * > [class=icons], + * > [class^=icons-]) {
+  margin: 0 0.5rem 0 0;
+}
+
+[data-tooltip]:has(> [class*=" icons-"], > [class=icons], > [class^=icons-]) {
+  border: 0 !important;
+}

src_data/styles/iconly.css

@@ -0,0 +1,68 @@
+/*!
+ *  Icons icon font. Generated by Iconly: https://iconly.io/
+ */
+
+@font-face {
+  font-display: auto;
+  font-family: "Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/static/fonts/iconly.eot?1718563596894");
+  src: url("/static/fonts/iconly.eot?#iefix") format("embedded-opentype"), url("/static/fonts/iconly.woff2?1718563596894") format("woff2"), url("/static/fonts/iconly.woff?1718563596894") format("woff"), url("/static/fonts/iconly.ttf?1718563596894") format("truetype"), url("/static/fonts/iconly.svg?1718563596894#Icons") format("svg");
+}
+
+[class="icons"], [class^="icons-"], [class*=" icons-"] {
+  display: inline-block;
+  font-family: "Icons" !important;
+  font-weight: 400;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.icons-plus:before {
+  content: "\e000";
+}
+
+.icons-minus:before {
+  content: "\e001";
+}
+
+.icons-unlocked:before {
+  content: "\e002";
+}
+
+.icons-locked:before {
+  content: "\e003";
+}
+
+.icons-wifi-strength-1:before {
+  content: "\e004";
+}
+
+.icons-wifi-strength-0:before {
+  content: "\e005";
+}
+
+.icons-wifi-strength-2:before {
+  content: "\e006";
+}
+
+.icons-wifi-strength-3:before {
+  content: "\e008";
+}
+
+.icons-down:before {
+  content: "\e009";
+}
+
+.icons-wifi-strength-4:before {
+  content: "\e00a";
+}
+
+.icons-up:before {
+  content: "\e00c";
+}