feat: add styles

sebastianjnuwu · Dec 26, 2024 · 33dc9df · 33dc9df
1 parent 824a124
commit 33dc9df
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 91 deletions.
diff --git a/www/index.html b/www/index.html
@@ -5,36 +5,26 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <title>Cookie</title>
   <link rel="shortcut icon" href="https://raw.githubusercontent.com/sebastianjnuwu/app/refs/heads/android/android/app/src/main/res/drawable/splash_screen.png" type="image/x-icon">
-  <link rel="stylesheet" href="./res/styles/css/ui.css">
+  <link rel="stylesheet" href="./src/styles/css/ui.css">
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type="module" src="./main.ts"></script>
 </head>
 
 <body class="ui-cookie">
-    <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">
-        </div>
-       </splash-screen>
-
-         <div class="d-flex flex-column justify-content-center align-items-center">
-           <button id="show_banner" class="btn btn-custom">
-             <i class="fas fa-image"></i> Mostrar Banner
-           </button>
-
-           <button id="hide_banner" class="btn btn-custom">
-             <i class="fas fa-eye-slash"></i> Esconder Banner
-           </button>
-
-           <button id="show_video" class="btn btn-custom">
-             <i class="fas fa-video"></i> Mostrar Video
-           </button>
-
-           <button id="award" class="btn btn-custom">
-             <i class="fas fa-trophy"></i> Mostrar Premio
-           </button>
-         </div>
+
+ <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">
+    <h1>Click...</h1>
+   </div>
+  </splash-screen>
 
-   <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>
-   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
+  <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>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
+
    </body>
 </html>
diff --git a/www/main.ts b/www/main.ts
@@ -1,3 +1,3 @@
 import "./res/styles/scss/ui.scss";
 import "./res/plugins/admob.ts";
-import "./res/plugins/push-notifications.ts";
+import "./res/plugins/push-notifications.ts";
diff --git a/www/res/styles/css/ui.css b/www/res/styles/css/ui.css
diff --git a/www/src/audio/start.mp3 b/www/src/audio/start.mp3
diff --git a/www/src/js/main.js b/www/src/js/main.js
@@ -0,0 +1,9 @@
+$(() => {
+
+  $("splash-screen img").on("click", () => {
+    $('#splash')[0].play();
+    $("splash-screen h1").slideUp()
+    $("splash-screen").slideUp(5000)
+  });
+
+});
diff --git a/www/res/plugins/admob.ts → www/src/plugins/admob.ts b/www/res/plugins/admob.ts → www/src/plugins/admob.ts
diff --git a/www/res/plugins/push-notifications.ts → www/src/plugins/push-notifications.ts b/www/res/plugins/push-notifications.ts → www/src/plugins/push-notifications.ts
diff --git a/www/src/styles/css/ui.css b/www/src/styles/css/ui.css
@@ -0,0 +1,67 @@
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");
+
+@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
+
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css");
+
+@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
+
+:root {
+    --layout: #fffbde;
+    --text-color: #333;
+}
+
+.ui-cookie {
+    padding: 0;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    color: var(--text-color);
+    background-color: var(--layout);
+}
+
+.ui-cookie splash-screen .icon {
+    width: 15rem;
+    animation: splash-screen 2s infinite ease-in-out;
+}
+
+.ui-cookie splash-screen h1 {
+    font-family: "Press Start 2P", cursive;
+    font-size: 1.5rem;
+    color: #fdd388;
+    font-weight: bold;
+    text-shadow: 1px 1px #7c3d18;
+    cursor: pointer;
+    animation: reveal forwards ease-out;
+}
+
+@keyframes reveal {
+    0% {
+        opacity: 0; 
+        transform: translateY(-20px); 
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes splash-screen {
+    0%,
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    25% {
+        transform: translateY(-8px);
+        opacity: 0.8;
+    }
+    50% {
+        transform: translateY(-15px);
+        opacity: 1;
+    }
+    75% {
+        transform: translateY(-8px);
+        opacity: 0.8;
+    }
+}
diff --git a/www/res/styles/scss/ui.scss → www/src/styles/scss/ui.scss b/www/res/styles/scss/ui.scss → www/src/styles/scss/ui.scss