feat(styles): refactor splash screen and update UI components

sebastianjnuwu · Dec 27, 2024 · 9b30e2c · 9b30e2c
1 parent 33dc9df
commit 9b30e2c
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 15 deletions.
diff --git a/www/index.html b/www/index.html
@@ -12,15 +12,18 @@
 
 <body class="ui-cookie">
 
- <audio id="splash" preload="auto">
-   <source src="./src/audio/start.mp3" type="audio/mp3"></audio>
+  <audio id="splash" preload="auto">
+    <source src="./src/audio/start.mp3" type="audio/mp3">
+  </audio>
 
- <splash-screen>
-   <div class="d-flex flex-column justify-content-center align-items-center vh-100">
-   <img src="https://raw.githubusercontent.com/sebastianjnuwu/app/refs/heads/android/android/app/src/main/res/drawable/splash_screen.png" alt="splash-screen" class="icon mb-5">
+  <splash-screen class="d-flex flex-column justify-content-center align-items-center vh-100">
+    <img src="https://raw.githubusercontent.com/sebastianjnuwu/app/refs/heads/android/android/app/src/main/res/drawable/splash_screen.png" alt="splash-screen" class="icon mb-5">
     <h1>Click...</h1>
-   </div>
   </splash-screen>
+
+  <ui>
+
+  </ui>
 
   <script src="./src/js/main.js" defer></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>

diff --git a/www/main.ts b/www/main.ts
@@ -1,3 +1,2 @@
-import "./res/styles/scss/ui.scss";
-import "./res/plugins/admob.ts";
-import "./res/plugins/push-notifications.ts";
+import "./src/plugins/admob.ts";
+import "./src/plugins/push-notifications.ts";
diff --git a/www/src/js/main.js b/www/src/js/main.js
@@ -1,9 +1,12 @@
 $(() => {
 
-  $("splash-screen img").on("click", () => {
-    $('#splash')[0].play();
-    $("splash-screen h1").slideUp()
-    $("splash-screen").slideUp(5000)
+    // Splash screen animation
+  $("splash-screen").on("click", () => {
+    $("#splash")[0].play();
+
+    setTimeout(() => {
+      $("splash-screen").remove();
+    }, 1000);
   });
 
-});
+});
diff --git a/www/src/plugins/admob.ts b/www/src/plugins/admob.ts
@@ -6,6 +6,7 @@ import {
 import $ from "jquery";
 
 $(() => {
+
   if (window.Capacitor.getPlatform() !== "android") {
     console.log(
       `AdMob: Unsupported platform (${window.Capacitor.getPlatform()})`,

diff --git a/www/src/styles/css/ui.css b/www/src/styles/css/ui.css
@@ -27,6 +27,7 @@
 
 .ui-cookie splash-screen h1 {
     font-family: "Press Start 2P", cursive;
+    text-align: center;
     font-size: 1.5rem;
     color: #fdd388;
     font-weight: bold;

diff --git a/www/src/styles/scss/ui.scss b/www/src/styles/scss/ui.scss