feat: add splash screen

dev-AshishRanjan · Feb 24, 2024 · 4c4fc54 · 4c4fc54
1 parent 7061fe1
commit 4c4fc54
Show file tree

Hide file tree

Showing 4 changed files with 291 additions and 1 deletion.
diff --git a/src/app/css/index.css b/src/app/css/index.css
@@ -269,7 +269,7 @@ input[type=number] {
     flex-direction: column;
     gap: 3rem;
 
-    h4{
+    h4 {
       padding: 0 0.5rem;
     }
 

diff --git a/src/app/css/splash.css b/src/app/css/splash.css
@@ -0,0 +1,208 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+
+:root {
+  --primary-1: #0d121c;
+  --primary-2: #301e67;
+  --card: #301e678d;
+  --primary-3: #5b8fb9;
+  --primary-3: #0c34d6;
+  --primary-3-light: #9c83ea;
+  --primary-4: #b6eada;
+  --sidenav: #03001cce;
+  --gradient: #1c2f4b;
+}
+
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --primary-1: #f2f1ef;
+    --primary-2: #d9b18e;
+    --card: #d9b18e8d;
+    --primary-3: #8b6254;
+    --primary-3-light: #68493f;
+    --primary-4: #723e31;
+    --sidenav: #bce3ffce;
+    --gradient: #d9d2cc;
+  }
+}
+
+body {
+  height: 100vh;
+  width: 100vw;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+img {
+  position: absolute;
+  animation: splash-ripple 1.5s infinite ease-in-out;
+}
+
+@keyframes splash-ripple {
+  0% {
+    filter: drop-shadow(0 0 0px var(--primary-3));
+  }
+
+  100% {
+    filter: drop-shadow(0 0 50px transparent);
+  }
+}
+
+@keyframes square-animation {
+  0% {
+    left: 0;
+    top: 0;
+  }
+
+  10.5% {
+    left: 0;
+    top: 0;
+  }
+
+  12.5% {
+    left: 42.67px;
+    top: 0;
+  }
+
+  23% {
+    left: 42.67px;
+    top: 0;
+  }
+
+  25% {
+    left: 82px;
+    top: 0;
+  }
+
+  35.5% {
+    left: 82px;
+    top: 0;
+  }
+
+  37.5% {
+    left: 82px;
+    top: 42.67px;
+  }
+
+  48% {
+    left: 82px;
+    top: 42.67px;
+  }
+
+  50% {
+    left: 42.67px;
+    top: 42.67px;
+  }
+
+  60.5% {
+    left: 42.67px;
+    top: 42.67px;
+  }
+
+  62.5% {
+    left: 42.67px;
+    top: 82px;
+  }
+
+  73% {
+    left: 42.67px;
+    top: 82px;
+  }
+
+  75% {
+    left: 0;
+    top: 82px;
+  }
+
+  85.5% {
+    left: 0;
+    top: 82px;
+  }
+
+  87.5% {
+    left: 0;
+    top: 42.67px;
+  }
+
+  98% {
+    left: 0;
+    top: 42.67px;
+  }
+
+  100% {
+    left: 0;
+    top: 0;
+  }
+}
+
+.loader {
+  position: relative;
+  width: 82px;
+  height: 82px;
+  transform: rotate(45deg);
+}
+
+.loader-square {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 37px;
+  height: 37px;
+  margin: 2px;
+  border-radius: 10px;
+  background: var(--card);
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  animation: square-animation 10s ease-in-out infinite both;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--primary-3-light);
+
+  img {
+    height: 80%;
+    transform: rotate(-45deg);
+    /* width: 100%; */
+  }
+}
+
+.loader-square:nth-of-type(0) {
+  animation-delay: 0s;
+}
+
+.loader-square:nth-of-type(1) {
+  animation-delay: -1.4285714286s;
+}
+
+.loader-square:nth-of-type(2) {
+  animation-delay: -2.8571428571s;
+}
+
+.loader-square:nth-of-type(3) {
+  animation-delay: -4.2857142857s;
+}
+
+.loader-square:nth-of-type(4) {
+  animation-delay: -5.7142857143s;
+}
+
+.loader-square:nth-of-type(5) {
+  animation-delay: -7.1428571429s;
+}
+
+.loader-square:nth-of-type(6) {
+  animation-delay: -8.5714285714s;
+}
+
+.loader-square:nth-of-type(7) {
+  animation-delay: -10s;
+}
diff --git a/src/app/splash.html b/src/app/splash.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;900&family=Poppins:wght@300;400;700&family=Roboto+Mono&family=Ubuntu:wght@300;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./css/splash.css" />
+    <title>Splash Screen</title>
+  </head>
+  <body>
+    <!-- <img src="../assets/icons/icon_256.png" alt="" /> -->
+    <!-- <div class="banter-loader">
+      <div class="banter-loader__box"></div>
+      <div class="banter-loader__box"></div>
+      <div class="banter-loader__box"></div>
+      <div class="banter-loader__box"></div>
+      <div class="banter-loader__box"></div>
+      <div class="banter-loader__box"></div>
+      <div class="banter-loader__box"></div>
+      <div class="banter-loader__box"></div>
+      <div class="banter-loader__box"></div>
+    </div> -->
+    <div class="loader">
+      <div class="loader-square">P</div>
+      <div class="loader-square">R</div>
+      <div class="loader-square">O</div>
+      <div class="loader-square">
+        <img src="../assets/icons/icon_256.png" alt="" />
+      </div>
+      <div class="loader-square">X</div>
+      <div class="loader-square">Y</div>
+      <div class="loader-square">
+        <img src="../assets/icons/icon_256.png" alt="" />
+      </div>
+    </div>
+
+    <!-- <div class="loader">
+      <span>ProxyManager</span>
+      <span>ProxyManager</span>
+    </div> -->
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -22,12 +22,14 @@ const isDev = process.env.NODE_ENV === "development"; //change it to (!=="produc
 
 let mainWindow;
 let dynamicWindow;
+let splashScreen;
 
 const createWindow = () => {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: isDev ? 1000 : 550,
     height: 600,
+    show: false,
     webPreferences: {
       preload: path.join(__dirname, "preload.js"),
       nodeIntegration: true,
@@ -44,6 +46,20 @@ const createWindow = () => {
   if (isDev) {
     mainWindow.webContents.openDevTools();
   }
+
+  mainWindow.once("ready-to-show", () => {
+    // mainWindow.show();
+    // if (splashScreen) {
+    //   splashScreen.close();
+    // }
+    setTimeout(() => {
+      mainWindow.show();
+      if (splashScreen) {
+        splashScreen.close();
+      }
+    }, 1000);
+  });
+
   // when main window is closed, close all window
   mainWindow.on("closed", () => {
     // Close all windows when the main window is closed
@@ -84,6 +100,27 @@ const createDynamicWindow = (file) => {
   }
 };
 
+function createSplashScreen() {
+  splashScreen = new BrowserWindow({
+    width: 550,
+    height: 550,
+    frame: false,
+    alwaysOnTop: true,
+    resizable: false,
+    webPreferences: {
+      nodeIntegration: true,
+    },
+    roundedCorners: true,
+    transparent: true, // Set the window to be transparent
+  });
+
+  splashScreen.loadFile(path.join(__dirname, "./app/splash.html"));
+
+  splashScreen.on("closed", () => {
+    splashScreen = null;
+  });
+}
+
 const createURLWindow = (file) => {
   dynamicWindow = new BrowserWindow({
     width: isDev ? 1000 : 550,
@@ -405,6 +442,7 @@ const checkProxy = () => {
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
+  createSplashScreen();
   createWindow();
   // checkProxy();
   // showNotification();
-Original file line number
+Diff line change
@@ Expand Up / @@ -269,7 +269,7 @@ input[type=number] { @@
         flex-direction: column;
         gap: 3rem;
-        h4{
+        h4 {
           padding: 0 0.5rem;
         }
@@ Expand Down @@