Splashscreen test

CHANGELOG.txt

@@ -27,6 +27,7 @@ v1.0.371: (Unreleased):
  - Updated Readme screenshot on Github
  - Updated Firmware Found log strings to show platform and date
  - Added LEAD 1010 Plasma Add-On Machine Profile
+ - Fixed bug related to "$$=" commands in Serial Terminal causing issues with Grbl Settings tab
 v1.0.370: Fixed typo in an error message, Updated SSL Certificates
 v1.0.369: Fixed bug in firmware flashing tool
 v1.0.368: Updated grblHAL firmware images to 20230501, updated grblHAL Settings templates, added 3-Axes with Door firmware, Fixed bug in Firmware flashing tool for Interface > Firmware Version when offline, Updated included Interface firmware version

app/css/main.css

@@ -208,6 +208,54 @@ select {
   /* background-color: #fff */
 }
 
+#openbuildslogosplashImg {
+  -webkit-transition-property: -webkit-transform;
+  -webkit-transition-duration: 1.2s;
+  -webkit-animation-name: rotate;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+  -moz-transition-property: -moz-transform;
+  -moz-animation-name: rotate;
+  -moz-animation-duration: 4.4s;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-timing-function: linear;
+  transition-property: transform;
+  animation-name: rotate;
+  animation-duration: 4.4s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@-webkit-keyframes rotate {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes rotate {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .macrotype {
   position: absolute !important;
   top: 2px !important;

app/index.html

@@ -21,9 +21,8 @@
     <div class="pos-fixed pos-center" id="splash">
       <center>
         <div id="openbuildslogosplash" style="display: none;">
-          <!-- <img id="openbuildslogosplashImg" src="/img/openbuilds.png" onload="$('#openbuildslogosplash').fadeIn(800); setTimeout(function() { $('#splash').fadeOut(400); }, 2000)" width="200" /> -->
           <h1>OpenBuilds<sup>&reg;</sup>&nbsp;CONTROL</h1>
-          <img id="openbuildslogosplashImgX32" src="/img/splash.png" onload="setTimeout(function() {$('#openbuildslogosplash').fadeIn(100); setTimeout(function() { $('#splash').fadeOut(100); }, 1000)}, 100);" style="cursor:pointer" />
+          <img id="openbuildslogosplashImg" src="/img/splash.svg" onload="setTimeout(function() {$('#openbuildslogosplash').fadeIn(500); setTimeout(function() { $('#splash').fadeOut(100); }, 1400)}, 100);" style="cursor:pointer" />
         </div>
       </center>
     </div>

app/js/theme.js

@@ -138,7 +138,7 @@ let ThemeData = {
     // }
   },
 
-  currentThemeId: "light", // Forcing dark mode after update
+  currentThemeId: "dark", // Forcing dark mode after update
 
   init: function init() {
     let themeId = localStorage.getItem('themeId');