All translations complete

src/lib/locales/en.json

@@ -15,9 +15,32 @@
       "hostnamePrefix": "Hostname prefix",
       "StealFocusOnNewBlock": "Steal focus on new block",
       "useBigCharsMcap": "Use big characters for market cap",
-      "otaUpdates": "OTA updates (restart required)",
+      "otaUpdates": "OTA updates",
-      "enableMdns": "mDNS (restart required)",
+      "enableMdns": "mDNS",
-      "fetchEuroPrice": "Fetch € price (restart required)"
+      "fetchEuroPrice": "Fetch € price",
+      "shortAmountsWarning": "Short amounts might shorten lifespan.",
+      "tzOffsetHelpText": "A restart is required to apply TZ offset.",
+      "screens": "Screens"
+    },
+    "control": {
+      "systemInfo": "System info",
+      "version": "Version",
+      "buildTime": "Build time",
+      "ledColor": "LED color",
+      "turnOff": "Turn off",
+      "setColor": "Set color",
+      "showText": "Show text",
+      "text": "Text",
+      "title": "Control"
+    },
+    "status": {
+      "title": "Status",
+      "screenCycle": "Screen cycle",
+      "memoryFree": "Memory free",
+      "wsPriceConnection": "WS Price connection",
+      "wsMempoolConnection": "WS Mempool.space connection",
+      "fetchEuroNote": "If you use \"Fetch € price\" the WS Price connection will show ❌  since it uses another data source.",
+      "uptime": "Uptime"
     }
   },
   "colors": {
@@ -27,5 +50,16 @@
   "time": {
     "minutes": "minutes",
     "seconds": "seconds"
+  },
+  "restartRequired": "restart required",
+  "button": {
+    "save": "Save",
+    "reset": "Reset",
+    "restart": "Restart",
+    "forceFullRefresh": "Force full refresh"
+  },
+  "timer": {
+    "running": "running",
+    "stopped": "stopped"
   }
 }

src/lib/locales/es.json

@@ -1,7 +1,65 @@
 {
   "section": {
     "settings": {
-            "title": "Configuración"
+      "title": "Configuración",
-        }
+      "textColor": "Color de texto",
+      "backgroundColor": "Color de fondo",
+      "ledBrightness": "Brillo LED",
+      "screens": "Pantallas",
+      "shortAmountsWarning": "Cantidades pequeñas pueden acortar la vida útil.",
+      "fullRefreshEvery": "Actualización completa cada",
+      "timePerScreen": "Tiempo por pantalla",
+      "tzOffsetHelpText": "Es necesario reiniciar para aplicar la compensación.",
+      "timezoneOffset": "Compensación de zona horaria",
+      "StealFocusOnNewBlock": "Presta atención al nuevo bloque",
+      "ledFlashOnBlock": "El LED parpadea con un bloque nuevo",
+      "useBigCharsMcap": "Utilice caracteres grandes para la market cap",
+      "fetchEuroPrice": "Obtener precio en €",
+      "timeBetweenPriceUpdates": "Tiempo entre actualizaciones de precios",
+      "ledPowerOnTest": "Prueba de encendido del LED",
+      "enableMdns": "mDNS",
+      "hostnamePrefix": "Prefijo de nombre de host",
+      "mempoolnstance": "Instancia de Mempool",
+      "otaUpdates": "Actualización por aire"
+    },
+    "control": {
+      "turnOff": "Apagar",
+      "setColor": "Establecer el color",
+      "version": "Versión",
+      "ledColor": "color del LED",
+      "systemInfo": "Info del sistema",
+      "showText": "Poner texto",
+      "text": "Texto",
+      "title": "Control",
+      "buildTime": "Tiempo de construcción"
+    },
+    "status": {
+      "memoryFree": "Memoria RAM libre",
+      "wsPriceConnection": "Conexión WebSocket Precio",
+      "wsMempoolConnection": "Conexión WebSocket Mempool.space",
+      "screenCycle": "Rotacion de pantalla",
+      "uptime": "Tiempo de funcionamiento",
+      "fetchEuroNote": "Si utiliza \"Obtener precio en €\", la conexión de Precio WS mostrará ❌ ya que utiliza otra fuente de datos.",
+      "title": "Estado"
+    }
+  },
+  "button": {
+    "save": "Guardar",
+    "reset": "Restaurar",
+    "restart": "Reiniciar",
+    "forceFullRefresh": "Forzar refresco"
+  },
+  "colors": {
+    "black": "Negro",
+    "white": "Blanco"
+  },
+  "restartRequired": "reinicio requerido",
+  "time": {
+    "minutes": "minutos",
+    "seconds": "segundos"
+  },
+  "timer": {
+    "running": "funcionando",
+    "stopped": "detenido"
   }
 }

src/lib/locales/nl.json

@@ -8,7 +8,39 @@
       "timezoneOffset": "Tijdzone afwijking",
       "ledBrightness": "LED helderheid",
       "timePerScreen": "Tijd per scherm",
-      "fullRefreshEvery": "Volledig verversen"
+      "fullRefreshEvery": "Volledig verversen elke",
+      "shortAmountsWarning": "Lage waardes verkorten levensduur",
+      "tzOffsetHelpText": "Herstart nodig voor toepassen afwijking.",
+      "enableMdns": "mDNS",
+      "ledPowerOnTest": "LED test bij aanzetten",
+      "StealFocusOnNewBlock": "Pak aandacht bij nieuw blok",
+      "ledFlashOnBlock": "Knipper led bij nieuw blok",
+      "useBigCharsMcap": "Gebruik grote tekens bij market cap",
+      "fetchEuroPrice": "Toon € prijs",
+      "screens": "Schermen",
+      "hostnamePrefix": "Hostnaam voorvoegsel",
+      "mempoolnstance": "Mempool instantie",
+      "otaUpdates": "OTA updates"
+    },
+    "control": {
+      "systemInfo": "Systeeminformatie",
+      "version": "Versie",
+      "buildTime": "Bouwtijd",
+      "setColor": "Kleur instellen",
+      "turnOff": "Uitzetten",
+      "ledColor": "LED kleur",
+      "showText": "Toon tekst",
+      "text": "Tekst",
+      "title": "Besturing"
+    },
+    "status": {
+      "title": "Status",
+      "memoryFree": "Geheugen vrij",
+      "screenCycle": "Scherm cyclus",
+      "wsPriceConnection": "WS Prijs verbinding",
+      "wsMempoolConnection": "WS Mempool.space verbinding",
+      "fetchEuroNote": "Wanneer je \"Toon € prijs\" aanzet, zal de prijsverbinding als ❌ verbroken getoond worden vanwege het gebruik van een andere bron.",
+      "uptime": "Uptime"
     }
   },
   "colors": {
@@ -18,5 +50,16 @@
   "time": {
     "minutes": "minuten",
     "seconds": "seconden"
+  },
+  "restartRequired": "herstart nodig",
+  "button": {
+    "save": "Opslaan",
+    "reset": "Herstel",
+    "restart": "Herstart",
+    "forceFullRefresh": "Forceer scherm verversen"
+  },
+  "timer": {
+    "running": "actief",
+    "stopped": "gestopt"
   }
 }

src/lib/style/app.scss

@@ -9,6 +9,12 @@
 $form-range-track-bg: #fff;
 $color-mode-type: media-query;
 $font-family-base: "Ubuntu";
+$font-size-base: 0.9rem;
+//$font-size-sm: $font-size-base * .875 !default;
+//$form-label-font-size: $font-size-base * .575 !default;
+//$input-btn-font-size-sm: 0.4rem;
+//$form-label-font-size: 0.4rem;
+$input-font-size-sm: $font-size-base * .875;
 
 // $border-radius:               .675rem;
 
@@ -77,6 +83,17 @@ nav {
     padding: 10px;
     max-width: 700px;
     margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    align-content: stretch;
+    font-family: 'Oswald', sans-serif;
+
+    >div {
+        padding: 5px;
+    }
 
     .digit,
     .splitText,
@@ -97,44 +114,20 @@ nav {
     }
 }
 
-.btclock {
+.darkMode .btclock>div {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: center;
-    align-content: stretch;
-    font-family: 'Oswald', sans-serif;
-}
-
-.btclock>div {
-    padding: 5px;
-}
-
-.fg-ffff .btclock>div {
     color: #fff;
     border-color: #fff;
 }
 
-.bg-ffff .btclock>div {
+.lightMode .btclock>div {
     background: #fff;
 }
 
-.fg-f800 .btclock>div {
+.lightMode .btclock>div {
-    color: #f00;
-    border-color: #f00;
-}
-
-.bg-f800 .btclock>div {
-    background: #f00;
-}
-
-.fg-0 .btclock>div {
     color: #000;
-    border-color: #000;
 }
 
-.bg-0 .btclock>div {
+.darkMode .btclock>div {
     background: #000;
 }
 
@@ -180,11 +173,6 @@ nav {
 #customText {
     text-transform: uppercase;
 }
-
-#toggleTimerArea {
-    cursor: pointer;
-}
-
 .system_info {
     padding: 0;
 
@@ -192,3 +180,7 @@ nav {
         list-style: none;
     }
 }
+
+.card-title {
+    margin-bottom: 0;
+}

src/routes/+layout.svelte

@@ -12,12 +12,14 @@
 		DropdownToggle
 	} from 'sveltestrap';
 
-	import { locale, locales } from 'svelte-i18n';
+	import { locale, locales, waitLocale } from 'svelte-i18n';
+	import type { LayoutLoad } from './$types';
+	import { browser } from '$app/environment';
 
     export const setLocale = (lang: string) => () => {
         locale.set(lang);
+        localStorage.setItem("locale", lang)
     }
-
 </script>
 
 <Navbar expand="md">

src/routes/+layout.ts

@@ -7,10 +7,12 @@ import { locale, waitLocale } from 'svelte-i18n'
 import type { LayoutLoad } from './$types'
 
 export const load: LayoutLoad = async () => {
-	if (browser) {
+	 if (browser && localStorage.getItem('locale')) {
+        locale.set(localStorage.getItem('locale'));
+    } else if (browser) {
 		locale.set(window.navigator.language)
 	}
-	await waitLocale()
+    await waitLocale();
 }
 
 export const prerender = true;

src/routes/+page.svelte

@@ -25,6 +25,10 @@
                 if (data.fgColor> 65535) {
                     data.fgColor = "65535";
                 }
+
+                if (data.bgColor> 65535) {
+                    data.bgColor = "65535";
+                }
 				settings.set(data);
 			});
 	});

src/routes/Control.svelte

@@ -52,37 +52,37 @@ const forceFullRefresh = () => {
 		<CardBody>
 			<Form>
 				<Row>
-					<Label md={6} for="customText" size="sm">Text</Label>
+					<Label md={6} for="customText">{ $_('section.control.text') }</Label>
 					<Col md="6">
 						<Input type="text" id="customText" bind:value={customText} bsSize="sm" maxLength="{$settings.numScreens}"/>
 					</Col>
 				</Row>
-                <Button color="primary" on:click={setCustomText}>Show text</Button>
+                <Button color="primary" on:click={setCustomText}>{ $_('section.control.showText') }</Button>
 
 			</Form>
 			<hr />
 			<h3>LEDs</h3>
             <Form>
 				<Row>
-					<Label md={6} for="ledColorPicker" size="sm">LEDs color</Label>
+					<Label md={6} for="ledColorPicker" size="sm">{ $_('section.control.ledColor') }</Label>
 					<Col md="6">
 						<Input type="color" id="ledColorPicker" bind:value="{ledColor}" />
 					</Col>
 				</Row>
-                <Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>Turn off</Button>
+                <Button color="secondary" id="turnOffLedsBtn" on:click={turnOffLeds}>{ $_('section.control.turnOff') }</Button>
-                <Button color="primary" on:click={setLEDcolor}>Set color</Button>
+                <Button color="primary" on:click={setLEDcolor}>{ $_('section.control.setColor') }</Button>
 			</Form>
 
 			<hr />
-			<h3>System info</h3>
+			<h3>{ $_('section.control.systemInfo') }</h3>
 			<ul class="small system_info">
-				<li>Version: {$settings.gitRev}</li>
+				<li>{ $_('section.control.version') }: {$settings.gitRev}</li>
-				<li>Build time: {new Date(($settings.lastBuildTime * 1000)).toLocaleString()}</li>
+				<li>{ $_('section.control.buildTime') }: {new Date(($settings.lastBuildTime * 1000)).toLocaleString()}</li>
 				<li>IP: {$settings.ip}</li>
 				<li>Hostname: {$settings.hostname}</li>
 			</ul>
-            <Button color="danger" id="restartBtn" on:click="{restartClock}">Restart</Button>
+            <Button color="danger" id="restartBtn" on:click="{restartClock}">{ $_('button.restart') }</Button>
-            <Button color="warning" id="forceFullRefresh" on:click="{forceFullRefresh}">Force full refresh</Button>
+            <Button color="warning" id="forceFullRefresh" on:click="{forceFullRefresh}">{ $_('button.forceFullRefresh') }</Button>
 		</CardBody>
 	</Card>
 </Col>

src/routes/Settings.svelte

@@ -107,7 +107,7 @@
 							<Input type="number" min={1} step="1" bind:value={$settings.minSecPriceUpd} />
 							<InputGroupText>{ $_('time.seconds') }</InputGroupText>
 						</InputGroup>
-						<FormText>Short amounts might shorten lifespan.</FormText>
+						<FormText>{ $_('section.settings.shortAmountsWarning') }</FormText>
 					</Col>
 				</Row>
 				<Row>
@@ -124,7 +124,7 @@
 							/>
 							<InputGroupText>{ $_('time.minutes') }</InputGroupText>
 						</InputGroup>
-						<FormText>A restart is required to apply TZ offset.</FormText>
+						<FormText>{ $_('section.settings.tzOffsetHelpText') }</FormText>
 					</Col>
 				</Row>
 				<Row>
@@ -181,18 +181,18 @@
                         <Input id="mcapBigChar" bind:checked={$settings.mcapBigChar} type="switch" bsSize="sm" label="{ $_('section.settings.useBigCharsMcap') }" />
                     </Col>
                     <Col md="6">
-                        <Input id="otaEnabled" bind:checked={$settings.otaEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.otaUpdates') }" />
+                        <Input id="otaEnabled" bind:checked={$settings.otaEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.otaUpdates') } ({ $_('restartRequired') })" />
                     </Col>
                     <Col md="6">
-                        <Input id="mdnsEnabled" bind:checked={$settings.mdnsEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.enableMdns') }" />
+                        <Input id="mdnsEnabled" bind:checked={$settings.mdnsEnabled} type="switch" bsSize="sm" label="{ $_('section.settings.enableMdns') } ({ $_('restartRequired') })" />
                     </Col>
                        <Col md="6">
-                        <Input id="fetchEurPrice" bind:checked={$settings.fetchEurPrice} type="switch" bsSize="sm" label="{ $_('section.settings.fetchEuroPrice') }" />
+                        <Input id="fetchEurPrice" bind:checked={$settings.fetchEurPrice} type="switch" bsSize="sm" label="{ $_('section.settings.fetchEuroPrice') } ({ $_('restartRequired') })" />
                     </Col>
                 </Row>
 
                 <Row>
-                    <h3>Screens</h3>
+                    <h3>{ $_('section.settings.screens') }</h3>
                     {#if $settings.screens}
                     {#each $settings.screens as s}
                     <Col md="6">
@@ -201,8 +201,8 @@
                     {/each}
                     {/if}
                 </Row>
-                <Button type="reset" color="secondary">Reset</Button>
+                <Button type="reset" color="secondary">{ $_('button.reset') }</Button>
-                <Button color="primary">Save</Button>
+                <Button color="primary">{ $_('button.save') }</Button>
 			</Form>
 		</CardBody>
 	</Card>

src/routes/Status.svelte

@@ -8,6 +8,7 @@
 	import { Button, ButtonGroup, Card, CardBody, CardHeader, Col, Progress,CardTitle } from 'sveltestrap';
 	import Rendered from './Rendered.svelte';
 	
+    export let settings; 
 
     const status = writable({
         data: ["L", "O", "A", "D", "I", "N", "G"],
@@ -58,11 +59,16 @@
     }
 
     let memoryFreePercent:number = 50;
+    let lightMode:boolean = false;
 
     status.subscribe((value) => {
         memoryFreePercent = Math.round(value.espFreeHeap / value.espHeapSize * 100);
     });
 
+    settings.subscribe((value) => {
+        lightMode = value.bgColor > value.fgColor;
+    });
+
     const setScreen = (id:number) => () => {
         fetch(`${PUBLIC_BASE_URL}/api/show/screen/${id}`).catch(err => { });
     }
@@ -75,7 +81,10 @@
         }
     }
 
-    export let settings; 
+    const isLightMode = () => {
+        return $settings.bgColor > $settings.fgColor;
+    }
+
 </script>
 
 <Col>
@@ -92,21 +101,23 @@
               </ButtonGroup>
               <hr>
               {#if $status.data}
+              <section class={lightMode ? 'lightMode': ''}>
                   <Rendered status="{$status}"></Rendered>
-              Screen cycle: <a style="cursor: pointer" on:click="{toggleTimer($status.timerRunning)}">{#if $status.timerRunning}&#9205; running{:else}&#9208; stopped{/if}</a>
+              </section>
+              { $_('section.status.screenCycle') }: <a style="cursor: pointer" on:click="{toggleTimer($status.timerRunning)}">{#if $status.timerRunning}&#9205; { $_('timer.running') }{:else}&#9208; { $_('timer.stopped') }{/if}</a>
               {/if}
             {/if}
         <hr>
         <Progress striped value={memoryFreePercent}>{ memoryFreePercent }%</Progress>
         <div class="d-flex justify-content-between">
-            <div>Memory free </div>
+            <div>{ $_('section.status.memoryFree') } </div>
             <div>{ Math.round($status.espFreeHeap / 1024)  } / { Math.round($status.espHeapSize / 1024) } KiB</div>
           </div>
         <hr>
-        Uptime: {toUptimeString($status.espUptime)}
+        { $_('section.status.uptime') }: {toUptimeString($status.espUptime)}
         <br>
         <p>
-            WS Price connection:
+            { $_('section.status.wsPriceConnection') }:
             <span>
             {#if $status.connectionStatus && $status.connectionStatus.price}
             &#9989;
@@ -115,7 +126,7 @@
             {/if}
             </span>
             - 
-            WS Mempool.space connection:
+            { $_('section.status.wsMempoolConnection') }:
             <span>
               {#if $status.connectionStatus && $status.connectionStatus.blocks}
               &#9989;
@@ -124,7 +135,7 @@
               {/if}
             </span><br>
             {#if $settings.fetchEurPrice}
-            <small>If you use "Fetch &euro; price" the WS Price connection will show &#10060; since it uses another data source.</small>
+            <small>{ $_('section.status.fetchEuroNote') }</small>
             {/if}
           </p>
         </CardBody>