Splash screen update

GwtMaterialDesign · Jan 11, 2020 · 783188d · 783188d
1 parent 82326c5
commit 783188d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 24 deletions.
diff --git a/src/main/resources/archetype-resources/src/main/webapp/index.html b/src/main/resources/archetype-resources/src/main/webapp/index.html
@@ -9,12 +9,21 @@
 
     <link rel="manifest" href="manifest.json" />
 
+    <link rel="stylesheet" type="text/css" href="splash/splash.css" />
+
     <script src="${moduleName}/${moduleName}.nocache.js"></script>
 
     <style>
         :focus {
             outline: none;
         }
+
+        @media (prefers-color-scheme: dark) {
+            #splashscreen {
+                background: #292929 !important;
+                color: white !important;
+            }
+        }
     </style>
 </head>
 <body>

diff --git a/src/main/resources/archetype-resources/src/main/webapp/splash/splash.css b/src/main/resources/archetype-resources/src/main/webapp/splash/splash.css
@@ -1,20 +1,10 @@
-@font-face {
-    font-family: "Roboto";
-    src: local(Roboto Regular), url("font/Roboto-Regular.eot");
-    src: url("font/Roboto-Regular.eot?#iefix")
-    format("embedded-opentype"), url("font/Roboto-Regular.woff2")
-    format("woff2"), url("font/Roboto-Regular.woff")
-    format("woff"), url("font/Roboto-Regular.ttf")
-    format("truetype");
-    font-weight: 400
-}
 #splashscreen {
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     position: fixed;
-    background: #2196f3 !important;
+    background: #fff !important;
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
@@ -24,9 +14,10 @@
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
-    color: #fff;
-    font-family: 'Roboto', sans-serif;
+    color: #000;
     z-index: 9999;
+    font-display: swap;
+    font-family: monospace, monospace;
 }
 
 #splashscreen div {
@@ -35,10 +26,6 @@
     width: 100%;
 }
 
-#splashscreen img {
-    width: 150px;
-}
-
 #splashscreen .progress {
     margin: 0px;
     position: absolute;
@@ -53,5 +40,4 @@
 
 #splashscreen span.descripton {
     font-weight: 200;
-}
-
+}
diff --git a/src/main/resources/archetype-resources/src/main/webapp/splash/splash.js b/src/main/resources/archetype-resources/src/main/webapp/splash/splash.js
@@ -4,15 +4,15 @@ splashcontainer.id = "splashscreen";
 var splashContent = document.createElement('div');
 
 var image = document.createElement("img");
-image.src = "/launcher-icons/launcher4x.png";
+image.src = "https://gwtmaterialdesign.github.io/gmd-core-demo/launcher-icons/launcher2x.png";
 
 var title = document.createElement("span");
 title.className = "title";
 title.innerHTML = "${projectName}";
 
 var description = document.createElement("span");
 description.className = "description";
-description.innerHTML = "${projectName}";
+description.innerHTML = "Some description";
 
 var progress = document.createElement("div");
 progress.className = "progress";
@@ -27,6 +27,4 @@ splashContent.append(description);
 splashContent.append(progress);
 
 splashcontainer.append(splashContent);
-document.body.appendChild(splashcontainer);
-
-document.write('<link rel="stylesheet" type="text/css" href="splash/splash.css">');
+document.body.appendChild(splashcontainer);