Initial commit

src/lib/i18n/index.ts

@@ -0,0 +1,13 @@
+import { browser } from '$app/environment'
+import { init, register } from 'svelte-i18n'
+
+const defaultLocale = 'en'
+
+register('en', () => import('../locales/en.json'))
+register('nl', () => import('../locales/nl.json'))
+register('es', () => import('../locales/es.json'))
+
+init({
+	fallbackLocale: defaultLocale,
+	initialLocale: browser ? window.navigator.language : defaultLocale,
+})

src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

src/lib/locales/en.json

@@ -0,0 +1,12 @@
+{
+    "my": {
+        "translation": {
+            "key": "Test"
+        }
+    },
+    "section": {
+        "settings": {
+            "title": "Settings"
+        }
+    }
+}

src/lib/locales/es.json

@@ -0,0 +1,7 @@
+{
+    "section": {
+        "settings": {
+            "title": "Configuración"
+        }
+    }
+}

src/lib/locales/nl.json

@@ -0,0 +1,7 @@
+{
+    "section": {
+        "settings": {
+            "title": "Instellingen"
+        }
+    }
+}

src/lib/style/app.scss

@@ -0,0 +1,200 @@
+// @use "../node_modules/@fontsource/antonio/scss/mixins" as Antonio;
+// $directory: "../node_modules/@fontsource/ubuntu";
+// @use "../node_modules/@fontsource/ubuntu/scss/mixins" as Ubuntu;
+
+
+// @import "../node_modules/bootstrap/scss/bootstrap";
+
+@import "../node_modules/bootstrap/scss/functions";
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
+
+@import "@fontsource/antonio/latin-400.css";
+@import "@fontsource/ubuntu/latin-400.css";
+@import "@fontsource/oswald/latin-400.css";
+
+$form-range-track-bg: #fff;
+$color-mode-type: media-query;
+$font-family-base: "Ubuntu";
+
+// $border-radius:               .675rem;
+
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/maps";
+@import "../node_modules/bootstrap/scss/utilities";
+
+@import "../node_modules/bootstrap/scss/root";
+@import "../node_modules/bootstrap/scss/reboot";
+@import "../node_modules/bootstrap/scss/type";
+@import "../node_modules/bootstrap/scss/containers";
+@import "../node_modules/bootstrap/scss/grid";
+@import "../node_modules/bootstrap/scss/forms";
+@import "../node_modules/bootstrap/scss/buttons";
+@import "../node_modules/bootstrap/scss/button-group";
+@import "../node_modules/bootstrap/scss/dropdown";
+
+@import "../node_modules/bootstrap/scss/navbar";
+@import "../node_modules/bootstrap/scss/nav";
+@import "../node_modules/bootstrap/scss/card";
+@import "../node_modules/bootstrap/scss/progress";
+
+@import "../node_modules/bootstrap/scss/helpers";
+@import "../node_modules/bootstrap/scss/utilities/api";
+
+@include media-breakpoint-down(xl) {
+    html {
+        font-size: 85%;
+    }
+
+    button.btn,
+    input[type="button"].btn,
+    input[type="submit"].btn,
+    input[type="reset"].btn {
+        @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
+    }
+}
+
+@include media-breakpoint-down(lg) {
+    html {
+        font-size: 75%;
+    }
+}
+
+
+nav {
+    margin-bottom: 15px;
+}
+
+.splitText div:first-child::after {
+    display: block;
+    content: '';
+    margin-top: 0px;
+    border-bottom: 2px solid;
+    margin-bottom: 3px;
+}
+
+#btcclock-wrapper {
+    margin: 0 auto;
+}
+
+.btclock {
+    border: 1px solid darkgray;
+    background: #000;
+    border-radius: 5px;
+    padding: 10px;
+    max-width: 700px;
+    margin: 0 auto;
+
+    .digit,
+    .splitText,
+    .mediumText {
+        border: 2px solid gold;
+        border-radius: 8px;
+
+        @include media-breakpoint-up(sm) {
+            min-width: 10px;
+        }
+
+        @include media-breakpoint-up(xxl) {
+            min-width: 70px;
+        }
+
+        text-align: center;
+    }
+}
+
+.btclock {
+    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 {
+    background: #fff;
+}
+
+.fg-f800 .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 {
+    background: #000;
+}
+
+.splitText {
+    @include media-breakpoint-up(sm) {
+        font-size: 1.0rem;
+        padding-top: 8px !important;
+        padding-bottom: 9px !important;
+    }
+    @include media-breakpoint-up(xxl) {
+        font-size: 1.8rem;
+        padding-top: 19px !important;
+        padding-bottom: 20px !important;
+    }
+
+    text-align: center;
+}
+
+.mediumText {
+    font-size: 3rem;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 20px !important;
+    padding-bottom: 20px !important;
+}
+
+.digit {
+    font-size: 5rem;
+    @include media-breakpoint-up(sm) {
+        font-size: 2.5rem;
+    }
+    @include media-breakpoint-up(xxl) {
+        font-size: 5rem;
+    }
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.digit-blank {
+    content: "abc";
+}
+
+#customText {
+    text-transform: uppercase;
+}
+
+#toggleTimerArea {
+    cursor: pointer;
+}
+
+.system_info {
+    padding: 0;
+
+    li {
+        list-style: none;
+    }
+}