add simple nord theme

README.md

@@ -1,30 +1,37 @@
 # Magma Dashboard
+
 Personal dashboard that is highly customizable, lightweight and responsive.
 
 ![Magma dashboard preview](./docs/screenshots/flame.png)
 
 ## Features
-* Lightweight (8-16Mb), fast, build from Go
-* Support multiple [languages](https://magma.help14.com/#/customization/languages)
-* Support multiple [themes](https://magma.help14.com/#/customization/themes)
-* Addons support (WIP)
+
+- Lightweight (8-16Mb), fast, build from Go
+- Support multiple [languages](https://magma.help14.com/#/customization/languages)
+- Support multiple [themes](https://magma.help14.com/#/customization/themes)
+- Addons support (WIP)
 
 ## How to use
-* Download our [docker-compose.yml](./docker-compose.yml) file
-* Start with `docker-compose up -d`
-* Go to `data/config.yaml` to config your dashboard
-* Go to `data/data.yaml` to edit your bookmarks
-* See your dashboard at [localhost:7001](http://localhost:7001)
+
+- Download our [docker-compose.yml](./docker-compose.yml) file
+- Start with `docker-compose up -d`
+- Go to `data/config.yaml` to config your dashboard
+- Go to `data/data.yaml` to edit your bookmarks
+- See your dashboard at [localhost:7001](http://localhost:7001)
 
 [![Magma on Docker Hub](https://dockeri.co/image/help14/magma)](https://hub.docker.com/r/help14/magma)
 
 ## Customization
-Go to our [website](https://magma.help14.com) and read the document to  learn more.
+
+Go to our [website](https://magma.help14.com) and read the document to learn more.
 
 ## Contribution
+
 Contributions welcome and needed!
 
 ## Thanks to
-- pawelmalak for flame
-- migueravila for simplefox
-- u/Goldtom for flame css theme
+
+- pawelmalak for [flame](https://github.com/pawelmalak/flame)
+- migueravila for [simplefox](https://github.com/migueravila/SimpleFox)
+- u/Goldtom for [flame css theme](https://www.reddit.com/r/selfhosted/comments/rbb4kk/flame_dashboard_custom_css_tweaks/)
+- ramatov-zulfikor for [simplenord](https://github.com/ramatov-zulfikor/startpage)

docs/README.md

@@ -1,10 +0,0 @@
-# Magma Dashboard
-Personal dashboard that is highly customizable, lightweight and responsive.
-
-[![Magma on Docker Hub](https://dockeri.co/image/help14/magma)](https://hub.docker.com/r/help14/magma)
-
-## Features
-* Lightweight (8-16Mb), fast, build from Go
-* Support multiple [languages](./customization/languages.md)
-* Support multiple [themes](./customization/themes.md)
-* Addons support (WIP)

docs/customization/themes.md

@@ -6,8 +6,12 @@
 
 ## simplefox
 
-![Simplefox theme](../screenshots/simplefox.png)
+![Simple fox theme](../screenshots/simplefox.png)
+
+## simplenord
+
+![Simple nord theme](../screenshots/simplenord.png)
 
 ## leaf
 
-![Leaf theme](../screenshots/leaf.png)
+![Leaf theme](../screenshots/leaf.png)

sample/simplenord/config.yaml

@@ -0,0 +1,13 @@
+website:
+  theme: "simplenord"
+  title: "Magma Dashboard"
+  description: ""
+  language: "en"
+  localization: "en-US"
+  useMetric: true
+openweathermap:
+  apiKey: demo
+  lon: 0
+  lat: 0
+addons:
+  - docker

sample/simplenord/css/core.css

@@ -0,0 +1,6 @@
+:root {
+  --bgColor: #2e3440;
+  --bgImage: url("/theme/images/art.jpg");
+  --accentColor: #88c0d0;
+  --foreground: #d8dee9;
+}

sample/simplenord/data.yaml

@@ -0,0 +1,49 @@
+data:
+  - title: Applications
+    columns:
+      - title: Servers
+        bookmarks:
+          - name: OpenWRT
+            icon: fa-solid fa-wifi
+            url: https://openwrt.org
+          - name: Proxmox
+            icon: https://iconape.com/wp-content/files/pk/18549/svg/cib-proxmox.svg
+            url: https://www.proxmox.com/en/
+          - name: Home Assistant
+            icon: fa-solid fa-house
+            url: https://www.home-assistant.io
+          - name: Docker
+            icon: fa-brands fa-docker
+            url: https://www.docker.com
+      - title: Nas
+        bookmarks:
+          - name: TrueNas
+            icon: fa-solid fa-server
+            url: https://www.truenas.com
+          - name: Kerberos
+            icon: fa-solid fa-video
+            url: https://kerberos.io
+          - name: jDownloader
+            icon: fa-solid fa-cloud-arrow-down
+            url: https://jdownloader.org
+  - title: Bookmarks
+    columns:
+      - title: Social Media
+        bookmarks:
+          - name: Facebook
+            icon: fa-brands fa-facebook
+            url: https://www.facebook.com
+          - name: Reddit
+            icon: fa-brands fa-reddit
+            url: https://www.reddit.com
+          - name: Youtube
+            icon: fa-brands fa-youtube
+            url: https://www.youtube.com
+      - title: Shopping
+        bookmarks:
+          - name: Shopee
+            icon: fa-solid fa-bag-shopping
+            url: https://shopee.vn
+          - name: Lazada
+            icon: fa-brands fa-amazon
+            url: https://www.amazon.com

src/themes/simplenord/css/style.min.css

@@ -0,0 +1,168 @@
+@import url("../fonts/fonts.css");
+
+:root {
+    --text-hover-color: #81a1c1
+}
+
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+html,
+body {
+    height: 100%
+}
+
+body {
+    font-family: 'Fira Mono';
+    color: var(--foreground);
+    background-color: var(--bgColor)
+}
+
+#cover-art {
+    content: var(--bgImage);
+}
+
+.wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    height: 100%
+}
+
+.box {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    padding: 15px 30px 15px 15px;
+    border: 1px solid var(--foreground)
+}
+
+.box__image {
+    margin-right: 30px
+}
+
+.box__image img {
+    display: block;
+    width: 300px;
+    height: 300px;
+    -o-object-fit: cover;
+    object-fit: cover
+}
+
+.box__title {
+    font-weight: 400;
+    font-size: 28px;
+    margin-bottom: 25px
+}
+
+.box__links {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex
+}
+
+.links {
+    list-style: none
+}
+
+.links:not(:last-child) {
+    margin-right: 50px
+}
+
+.links__heading {
+    font-size: 18px;
+    color: #88c0d0
+}
+
+.links__item:first-child {
+    margin-bottom: 10px
+}
+
+.links__item:not(:first-child) {
+    margin-top: 5px
+}
+
+.links__link {
+    font-size: 16px;
+    line-height: 150%;
+    color: inherit;
+    text-decoration: none;
+    -webkit-transition: color 0.2s linear;
+    -o-transition: color 0.2s linear;
+    transition: color 0.2s linear
+}
+
+.links__link:hover {
+    color: var(--text-hover-color)
+}
+
+@media (max-width: 991.98px) {
+    .box {
+        padding: 20px
+    }
+
+    .box__image {
+        display: none
+    }
+}
+
+@media (max-width: 767.98px) {
+    .wrapper {
+        -webkit-box-align: start;
+        -ms-flex-align: start;
+        align-items: start;
+        -webkit-box-pack: start;
+        -ms-flex-pack: start;
+        justify-content: start
+    }
+
+    .box {
+        width: 100%;
+        border: none
+    }
+
+    .box__content {
+        width: 100%
+    }
+
+    .box__links {
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap
+    }
+
+    .links {
+        -webkit-box-flex: 0;
+        -ms-flex: 0 0 50%;
+        flex: 0 0 50%;
+        margin-bottom: 30px
+    }
+
+    .links:not(:last-child) {
+        margin-right: 0
+    }
+}
+
+@media (max-width: 575.98px) {
+    .box {
+        padding: 15px
+    }
+}

src/themes/simplenord/fonts/fonts.css

@@ -0,0 +1,9 @@
+@font-face {
+    font-family: 'Fira Mono';
+    src: url('FiraMono-Regular.eot');
+    src: local('Fira Mono Regular'), local('FiraMono-Regular'),
+        url('FiraMono-Regular.eot?#iefix') format('embedded-opentype'), url('FiraMono-Regular.woff2') format('woff2'),
+        url('FiraMono-Regular.woff') format('woff'), url('FiraMono-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}

src/themes/simplenord/index.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="{{.Config.Language}}">
+
+<head>
+    <meta charset="UTF-8">
+    <title>{{.Config.Title}}</title>
+    <meta name="description" content="{{.Config.Description}}" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="/common/assets/favicon.ico" />
+    <link rel="stylesheet" href="/common/css/all.min.css">
+    <link rel="stylesheet" href="/common/css/core.css">
+    <link rel="stylesheet" href="/theme/css/style.min.css" />
+    <link rel="stylesheet" href="/common/css/custom.css">
+</head>
+
+<body>
+    <div class="wrapper">
+        <div class="box">
+            <div class="box__image">
+                <img id="cover-art" alt="Abstract art" />
+            </div>
+            <div class="box__content">
+                <h1 id="greeting" class="box__title"></h1>
+                <div id="links" class="box__links">
+                {{range .Contents}}
+                    {{range .Columns}}
+                    <ul class="links">
+                        <li class="links__item">
+                            <span class="links__heading">{{.Title}}</span>
+                        </li>
+                        {{range .Bookmarks}}
+                        <li class="links__item">
+                            <a class="links__link" href="{{.Url}}">{{.Name}}</a>
+                        </li>
+                        {{end}}
+                    </ul>
+                    {{end}}
+                {{end}}
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="/common/js/core.js"></script>
+    <script>
+        window.config = {
+            localization: {{.Config.Localization}},
+            language: {{.Config.Language}},
+            useMetric: {{.Config.UseMetric}}
+        };
+        (function setTimer() {
+            const greeting = document.querySelector("#greeting");
+            const hour = new Date().getHours();
+            if (hour >= 5 && hour < 12) {
+                greeting.innerText = {{.Language.Greeting.Morning}};
+            }
+            else if (hour >= 12 && hour < 17) {
+                greeting.innerText = {{.Language.Greeting.Afternoon}};
+            }
+            else if (hour >= 17 && hour < 20) {
+                greeting.innerText = {{.Language.Greeting.Evening}};
+            }
+            else {
+                greeting.innerText = {{.Language.Greeting.Night}};
+            }
+        }) ();
+    </script>
+    <script src="/common/js/custom.js"></script>
+</body>
+
+</html>