Preparing custom themes

Author: danieldieeins

application-main/src/deb/control/control

@@ -5,4 +5,4 @@ Priority: low
 Architecture: all
 Description: [[description]]
 Maintainer: Zyneon Studios <daniel.niesmann@outlook.com>
-Depends: openjdk-21-jdk | openjdk-21-jre
+Depends: openjdk-21-jdk | openjdk-21-jre | jdk-21 | jre-21 | temurin-21

application-main/src/main/java/com/zyneonstudios/application/Application.java

@@ -4,7 +4,7 @@
 import com.zyneonstudios.Main;
 import com.zyneonstudios.application.backend.auth.MicrosoftAuth;
 import com.zyneonstudios.application.backend.utils.backend.MinecraftVersion;
-import com.zyneonstudios.application.backend.utils.frame.web.UnixWebFrame;
+import com.zyneonstudios.application.backend.utils.frame.web.CustomWebFrame;
 import com.zyneonstudios.application.backend.utils.frame.web.ZyneonWebFrame;
 import live.nerotv.shademebaby.ShadeMeBaby;
 import live.nerotv.shademebaby.file.Config;
@@ -215,7 +215,7 @@ private void checkURL() throws IOException, UnsupportedPlatformException, CefIni
             frame = new ZyneonWebFrame(getStartURL());
             frame.pack();
         } else {
-            frame = new UnixWebFrame(getStartURL());
+            frame = new CustomWebFrame(getStartURL());
         }
         frame.setMinimumSize(new Dimension(960,500));
         frame.setSize(new Dimension(1200,720));

application-main/src/main/java/com/zyneonstudios/application/backend/utils/frame/web/UnixWebFrame.java renamed to application-main/src/main/java/com/zyneonstudios/application/backend/utils/frame/web/CustomWebFrame.java

@@ -7,14 +7,14 @@
 import java.awt.event.MouseAdapter;
 import java.awt.event.MouseEvent;
 
-public class UnixWebFrame extends ZyneonWebFrame {
+public class CustomWebFrame extends ZyneonWebFrame {
 
     private static Point mouseDownCompCoords;
     private String title;
     private JPanel titleBar;
     private boolean border;
 
-    public UnixWebFrame(String url) {
+    public CustomWebFrame(String url) {
         super(url);
         title = "  Zyneon Application";
         setUndecorated(true);

application-ui/content/assets/zyneon/images/abstract.png

@@ -1,4 +1,4 @@
-let theme = "dark";
+let theme = "default.dark";
 let app = false;
 
 document.addEventListener('contextmenu',function(e){
@@ -73,10 +73,6 @@ function syncTheme() {
     if(localStorage.getItem("theme")!==null) {
         theme = localStorage.getItem("theme");
     }
-    setTheme(theme);
-}
-
-function syncTheme_old() {
     const urlParams = new URLSearchParams(window.location.search);
     if(urlParams.get("theme")!=null) {
         theme = urlParams.get('theme');
@@ -86,8 +82,8 @@ function syncTheme_old() {
 
 function setTheme(newTheme) {
     let root = document.documentElement;
-    if (newTheme === "light") {
-        theme = "light";
+    if (newTheme === "default.light") {
+        theme = "default.light";
         root.style.setProperty("--background", '#c7c7c7');
         root.style.setProperty('--background2', '#e0e0e0');
         root.style.setProperty('--background3', '#d3d3d3');
@@ -98,16 +94,16 @@ function setTheme(newTheme) {
         root.style.setProperty("--color-dim", "#00000085");
         root.style.setProperty("--color-dim-less", "#00000099");
         root.style.setProperty("--inverted", "#fff");
-    } else if (newTheme === "zyneon") {
-        setTheme("dark");
-        theme = "zyneon";
+    } else if (newTheme === "default.zyneon") {
+        setTheme("default.dark");
+        theme = "default.zyneon";
         root.style.setProperty('--background', '#140c28');
         root.style.setProperty('--background2', '#0d061c');
         root.style.setProperty('--background3', '#120925');
         root.style.setProperty('--background4', '#060112');
         root.style.setProperty('--background-accent', '#050113');
-    } else {
-        theme = "dark";
+    } else if (newTheme === "default.dark") {
+        theme = "default.dark";
         root.style.setProperty('--background', '#181818');
         root.style.setProperty('--background2', '#101010');
         root.style.setProperty('--background3', '#1a1a1a');
@@ -118,6 +114,8 @@ function setTheme(newTheme) {
         root.style.setProperty("--color-dim", "#ffffff60");
         root.style.setProperty("--color-dim-less", "#ffffff90");
         root.style.setProperty("--inverted", "#000");
+    } else {
+        callJavaMethod("sync.theme."+theme)
     }
     localStorage.setItem('theme', theme);
     callJavaMethod('button.theme.' + theme);

application-ui/content/assets/zyneon/js/functions.js

@@ -40,11 +40,11 @@ function syncGeneralSettings() {
     const dark = document.getElementById("appearance-theme-dark");
     const light = document.getElementById("appearance-theme-light");
     const zyneon = document.getElementById("appearance-theme-zyneon");
-    if(theme==="zyneon") {
+    if(theme==="default.zyneon") {
         dark.classList.remove("active");
         light.classList.remove("active");
         zyneon.classList.add("active");
-    } else if(theme==="light") {
+    } else if(theme==="default.light") {
         dark.classList.remove("active");
         zyneon.classList.remove("active");
         light.classList.add("active");

application-ui/content/assets/zyneon/js/settings.js

@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <title>News ▪ Zyneon Application</title>
-    <link rel="stylesheet" href="assets/zyneon/css/themes/default/shared.css">
-    <link rel="stylesheet" href="assets/zyneon/css/themes/default/instances.css">
-    <link rel='stylesheet' href='assets/boxicons/css/boxicons.min.css'>
+    <link id="shared-css" rel="stylesheet" href="assets/zyneon/css/themes/default/shared.css">
+    <link id="icons-css" rel='stylesheet' href='assets/boxicons/css/boxicons.min.css'>
+    <link id="page-css" rel="stylesheet" href="assets/zyneon/css/themes/default/instances.css">
     <script src="assets/zyneon/js/functions.js"></script>
     <script>syncTheme();</script>
 </head>
@@ -22,7 +22,7 @@
                     <a onclick="link('start.html');">
                         <div class="menu-item">
                             <i class="bx bxs-home"></i>
-                            <span class="menu-item">News & updates</span>
+                            <span class="menu-item">Home & news</span>
                         </div>
                     </a>
                 </li>

application-ui/content/instances.html

@@ -3,9 +3,9 @@
     <head>
         <meta charset="UTF-8">
         <title>News ▪ Zyneon Application</title>
-        <link rel="stylesheet" href="assets/zyneon/css/themes/default/shared.css">
-        <link rel="stylesheet" href="assets/zyneon/css/themes/default/resources.css">
-        <link rel='stylesheet' href='assets/boxicons/css/boxicons.min.css'>
+        <link id="shared-css" rel="stylesheet" href="assets/zyneon/css/themes/default/shared.css">
+        <link id="icons-css" rel='stylesheet' href='assets/boxicons/css/boxicons.min.css'>
+        <link id="page-css" rel="stylesheet" href="assets/zyneon/css/themes/default/resources.css">
         <script src="assets/zyneon/js/functions.js"></script>
         <script>syncTheme();</script>
     </head>
@@ -22,7 +22,7 @@
                         <a onclick="link('start.html');">
                             <div class="menu-item">
                                 <i class="bx bxs-home"></i>
-                                <span class="menu-item">News & updates</span>
+                                <span class="menu-item">Home & news</span>
                             </div>
                         </a>
                     </li>

application-ui/content/resources.html

@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <title>News ▪ Zyneon Application</title>
-    <link rel="stylesheet" href="assets/zyneon/css/themes/default/shared.css">
-    <link rel="stylesheet" href="assets/zyneon/css/themes/default/settings.css">
-    <link rel='stylesheet' href='assets/boxicons/css/boxicons.min.css'>
+    <link id="shared-css" rel="stylesheet" href="assets/zyneon/css/themes/default/shared.css">
+    <link id="icons-css" rel='stylesheet' href='assets/boxicons/css/boxicons.min.css'>
+    <link id="page-css" rel="stylesheet" href="assets/zyneon/css/themes/default/settings.css">
     <script src="assets/zyneon/js/functions.js"></script>
     <script>syncTheme();</script>
 </head>
@@ -22,7 +22,7 @@
                     <a onclick="link('start.html');">
                         <div class="menu-item">
                             <i class="bx bxs-home"></i>
-                            <span class="menu-item">News & updates</span>
+                            <span class="menu-item">Home & news</span>
                         </div>
                     </a>
                 </li>
@@ -137,16 +137,16 @@
                     <h2>General settings</h2>
                     <h3 id="startTitle" class="background-bottom">Start tab:</h3>
                     <div id="startTab" class="start-tab">
-                        <a class="button" id="general-tab-start" onclick="callJavaMethod('button.starttab.start');">News</a>
+                        <a class="button" id="general-tab-start" onclick="callJavaMethod('button.starttab.start');">Start</a>
                         <a class="button" id="general-tab-instances" onclick="callJavaMethod('button.starttab.instances');">Instances</a>
                     </div>
                 </div>
                 <div class="card" id="appearance">
                     <h2>Appearance</h2>
                     <h3 class="background">Theme:
-                        <a class="button" id="appearance-theme-light" onclick="setTheme('light'); link('settings.html');">Light</a>
-                        <a class="button" id="appearance-theme-dark" onclick="setTheme('dark'); link('settings.html');">Dark</a>
-                        <a class="button" id="appearance-theme-zyneon" onclick="setTheme('zyneon'); link('settings.html');">Zyneon</a>
+                        <a class="button" id="appearance-theme-light" onclick="setTheme('default.light'); link('settings.html');">Light</a>
+                        <a class="button" id="appearance-theme-dark" onclick="setTheme('default.dark'); link('settings.html');">Dark</a>
+                        <a class="button" id="appearance-theme-zyneon" onclick="setTheme('default.zyneon'); link('settings.html');">Zyneon</a>
                     </h3>
                     <h3 class="bottom">Language:
                         <a class="button" id="appearance-language-english"><i class='bx bxs-lock-alt'></i> English</a>

application-ui/content/settings.html

@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <title>News ▪ Zyneon Application</title>
-    <link rel="stylesheet" href="assets/zyneon/css/themes/default/shared.css">
-    <link rel="stylesheet" href="assets/zyneon/css/themes/default/start.css">
-    <link rel='stylesheet' href='assets/boxicons/css/boxicons.min.css'>
+    <link id="shared-css" rel="stylesheet" href="assets/zyneon/css/themes/default/shared.css">
+    <link id="icons-css" rel='stylesheet' href='assets/boxicons/css/boxicons.min.css'>
+    <link id="page-css" rel="stylesheet" href="assets/zyneon/css/themes/default/start.css">
     <script src="assets/zyneon/js/functions.js"></script>
     <script>syncTheme();</script>
 </head>
@@ -22,7 +22,7 @@
                     <a>
                         <div class="menu-item" id="selected">
                             <i class="bx bxs-home"></i>
-                            <span class="menu-item">News & updates</span>
+                            <span class="menu-item">Home & news</span>
                         </div>
                     </a>
                 </li>
@@ -69,13 +69,13 @@
         <div class="menu" id="submenu">
             <ul>
                 <li class="subtitle">
-                    <span class="bold">News & updates</span>
+                    <span class="bold">Home, news & updates</span>
                 </li>
                 <li>
                     <a onclick="syncNews();">
                         <div class="menu-item" id="news-button">
                             <i class='bx bxs-news' ></i>
-                            <span class="menu-item">News</span>
+                            <span class="menu-item">Home & news</span>
                         </div>
                     </a>
                 </li>
@@ -91,17 +91,26 @@
         </div>
         <div class="content">
             <div id="news">
+                <div class="card">
+                    <div class="flex">
+                        <img alt="Zyneon Logo" src="assets/zyneon/images/abstract.png">
+                        <div>
+                            <h2>Zyneon Application</h2>
+                            <h3>Manage, create and share beloved Minecraft instances, mod packs, resources and more!</h3>
+                        </div>
+                    </div>
+                </div>
                 <div class="card">
                     <h1>News</h1>
                 </div>
+                <div class="card">
+                    <h2>Loading</h2>
+                    <h3>Trying to sync news <i class='bx bx-loader-alt bx-spin bx-rotate-90' ></i></h3>
+                </div>
                 <div class="card" id="news-card">
                     <h2>Title</h2>
                     <h3>content</h3>
                 </div>
-                <div class="card">
-                    <h2>Status</h2>
-                    <h3>No connection to the news server.</h3>
-                </div>
             </div>
             <div id="updates">
                 <div class="card">

application-ui/content/start.html

@@ -3,8 +3,8 @@
     <head>
         <meta charset="UTF-8">
         <title>News ▪ Zyneon Application</title>
-        <link rel="stylesheet" href="../assets/zyneon/css/themes/default/shared.css">
-        <link rel='stylesheet' href='../assets/boxicons/css/boxicons.min.css'>
+        <link id="shared-css" rel="stylesheet" href="../assets/zyneon/css/themes/default/shared.css">
+        <link id="icons-css" rel='stylesheet' href='../assets/boxicons/css/boxicons.min.css'>
         <script src="../assets/zyneon/js/functions.js"></script>
         <script>syncTheme();</script>
     </head>

application-ui/content/sub/installing.html

@@ -3,8 +3,8 @@
     <head>
         <meta charset="UTF-8">
         <title>News ▪ Zyneon Application</title>
-        <link rel="stylesheet" href="../assets/zyneon/css/themes/default/shared.css">
-        <link rel='stylesheet' href='../assets/boxicons/css/boxicons.min.css'>
+        <link id="shared-css" rel="stylesheet" href="../assets/zyneon/css/themes/default/shared.css">
+        <link id="icons-css" rel='stylesheet' href='../assets/boxicons/css/boxicons.min.css'>
         <script src="../assets/zyneon/js/functions.js"></script>
         <script>syncTheme();</script>
     </head>

application-ui/content/sub/login.html

@@ -3,8 +3,8 @@
     <head>
         <meta charset="UTF-8">
         <title>News ▪ Zyneon Application</title>
-        <link rel="stylesheet" href="../assets/zyneon/css/themes/default/shared.css">
-        <link rel='stylesheet' href='../assets/boxicons/css/boxicons.min.css'>
+        <link id="shared-css" rel="stylesheet" href="../assets/zyneon/css/themes/default/shared.css">
+        <link id="icons-css" rel='stylesheet' href='../assets/boxicons/css/boxicons.min.css'>
         <script src="../assets/zyneon/js/functions.js"></script>
         <script>syncTheme();</script>
     </head>