feature: latest release automated

irfanshadikrishad · Jun 5, 2024 · d6cb895 · d6cb895
1 parent 1e00e3a
commit d6cb895
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 59 deletions.
diff --git a/images/irfanshadikrishad.jpg b/images/irfanshadikrishad.jpg
diff --git a/index.html b/index.html
@@ -26,57 +26,92 @@
     />
   </head>
   <body class="container">
-    <img class="cat__logo" src="./images/icon128.png" alt="" />
-    <h1 class="cat__title">Cat — Chrome extension</h1>
-    <p class="cat__desc">
-      Chrome extension for
-      <span class="cat__hl"
-        ><a href="https://www.lus.ac.bd" target="_blank"
-          >Leading University, Sylhet</a
-        ></span
-      >
-      website. It changes the views and behavior of the website. Have low
-      <span style="font-style: italic">CGPA?</span> dont't worry I got you
-      covered. show it to your friends or family to impress 👌. additionaly you
-      got the
-      <span
-        style="
-          background-color: black;
-          color: whitesmoke;
-          font-style: italic;
-          padding: 0 5px;
-        "
-        >dark mode.</span
-      >
-    </p>
-    <center>
-      <div class="cat__download">
-        <img src="./images/cat.png" alt="cat__popup" id="cat__i" />
-        <a
-          id="download"
-          href="https://github.com/irfanshadikrishad/cat/archive/refs/tags/v1.0.7.zip"
-          class="cat__down"
-          onclick="thanks()"
-          onmouseover="mouseover()"
-          onmouseout="mouseout()"
-          ontouchmove="mouseover()"
-          ontouchend="mouseout()"
-          >Download
+    <nav>
+      <section>
+        <a href="/" class="nav_logo">Cat</a>
+      </section>
+      <section class="nav_btns">
+        <a id="changelog"
+          ><i class="fa-solid fa-clock-rotate-left"></i> Changelog</a
+        >
+        <a id="version_Url" class="version_nav" target="_blank">
+          <i class="fa-solid fa-code-compare"></i> <span id="version">???</span>
         </a>
-      </div>
-      <p id="cat__thanks" class="cat__desc">
-        [thanks for using cat extension 💙]
+      </section>
+    </nav>
+    <section class="hero">
+      <img class="cat__logo" src="./images/icon128.png" alt="" />
+      <h1 class="cat__title">Cat — Chrome extension</h1>
+      <p class="cat__body">
+        Chrome extension for
+        <span class="cat__hl"
+          ><a href="https://www.lus.ac.bd" target="_blank"
+            >Leading University, Sylhet</a
+          ></span
+        >
+        website. It changes the views and behavior of the website. Have low
+        <span style="font-style: italic">CGPA?</span> dont't worry I got you
+        covered. show it to your friends or family to impress 👌. additionaly
+        you got the
+        <span
+          style="
+            background-color: var(--secondary);
+            color: var(--text-color);
+            font-style: italic;
+            padding: 0 5px;
+          "
+          >dark mode.</span
+        >
       </p>
-    </center>
-    <p class="cat__desc cat__copy">
-      developed by
-      <a
-        class="cat__hl"
-        href="https://irfanshadikrishad.github.io"
-        target="_blank"
-        >Irfan Shadik Rishad</a
-      >, [24 April, 2023]
-    </p>
+      <center>
+        <div class="cat__download">
+          <img src="./images/cat.png" alt="cat__popup" id="cat__i" />
+          <a
+            id="download"
+            href="https://github.com/irfanshadikrishad/cat/archive/refs/tags/v1.0.7.zip"
+            class="cat__down"
+            onclick="thanks()"
+            onmouseover="mouseover()"
+            onmouseout="mouseout()"
+            ontouchmove="mouseover()"
+            ontouchend="mouseout()"
+            ><i class="fa-solid fa-chevron-down"></i> Download<span
+              id="download_Count"
+              >?</span
+            >
+          </a>
+        </div>
+        <p id="cat__thanks" class="cat__desc">
+          [thanks for using cat extension 💙]
+        </p>
+      </center>
+    </section>
+    <section class="footer">
+      <p class="cat__desc">
+        ©
+        <a
+          class="cat__hl"
+          href="https://irfanshadikrishad.github.io"
+          target="_blank"
+          >Irfan Shadik Rishad</a
+        >, 24 April, 2023 - <span id="current_year">now</span>
+      </p>
+      <p class="footer_divider">|</p>
+      <div class="footer_links">
+        <a target="_blank" href="https://github.com/irfanshadikrishad"
+          ><i class="fa-brands fa-github"></i
+        ></a>
+        <a target="_blank" href="https://youtube.com/@irfanshadikrishad"
+          ><i class="fa-brands fa-youtube"></i
+        ></a>
+        <a target="_blank" href="https://instagram.com/irfanshadikrishad"
+          ><i class="fa-brands fa-instagram"></i
+        ></a>
+        <a target="_blank" href="https://www.linkedin.com/in/irfanshadikrishad"
+          ><i class="fa-brands fa-linkedin"></i
+        ></a>
+      </div>
+    </section>
     <script src="./src/script.js"></script>
   </body>
 </html>
diff --git a/src/script.js b/src/script.js
@@ -1,3 +1,29 @@
+// Initializing Variables
+let version, changelog, released, download_Link, version_Url, download_Count;
+
+const getLatestVersionOfCat = async () => {
+  const request = await fetch(
+    `https://api.github.com/repos/irfanshadikrishad/cat/releases`
+  );
+  const response = await request.json();
+
+  // Assigning Values
+  version = response[0].tag_name;
+  changelog = response[0].body;
+  released = response[0].created_at;
+  download_Link = response[0].assets[0].browser_download_url;
+  version_Url = response[0].html_url;
+  download_Count = response[0].assets[0].download_count;
+
+  // Inserting In HTML
+  document.getElementById("version").innerText = version;
+  document.getElementById("download").href = download_Link;
+  document.getElementById("version_Url").href = version_Url;
+  document.getElementById("download_Count").innerText = `| ${download_Count}`;
+};
+
+getLatestVersionOfCat();
+
 function thanks() {
   document.getElementById("cat__thanks").style.display = "inline-block";
 }
@@ -12,3 +38,6 @@ function mouseover() {
 function mouseout() {
   document.getElementById("cat__i").style.top = "-15px";
 }
+
+// Insert Current Year in Footer
+document.getElementById("current_year").innerText = new Date().getFullYear();
diff --git a/src/style.css b/src/style.css
@@ -1,3 +1,10 @@
+:root {
+  --text-color: #7c899a;
+  --background: #0b1622;
+  --primary: #a3d39c;
+  --secondary: #151f2e;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -6,24 +13,75 @@
 }
 body {
   margin-top: 20px;
-  background-color: whitesmoke;
+  color: var(--text-color);
+  background-color: var(--background);
   text-align: center;
-  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 .container {
   width: 50%;
   margin: 0 auto;
 }
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+}
+.nav_logo {
+  font-weight: 500;
+  color: var(--primary);
+  text-decoration: none;
+}
+.nav_btns {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.nav_btns > a {
+  text-decoration: none;
+  color: var(--text-color);
+  font-weight: 500;
+}
+.nav_btns > a:hover {
+  color: var(--primary);
+}
+.version_nav {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 3px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--text-color);
+}
+.hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 .cat__title {
   font-size: 1.8rem;
-  color: #a3d39c;
+  color: var(--primary);
   padding: 2vh 0;
 }
 .cat__logo {
   margin-top: 5vh;
 }
+.cat__body {
+  width: 70%;
+  font-style: italic;
+  font-weight: 500;
+}
 .cat__desc {
-  padding-bottom: 3vh;
   font-style: italic;
   font-weight: 500;
 }
@@ -33,16 +91,17 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #a3d39c;
+  gap: 5px;
+  background-color: var(--primary);
   border: 3px solid #252525;
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   text-decoration: none;
-  color: #ffe9c8;
+  color: var(--background);
 }
 center {
-  padding-top: 20px;
+  padding-top: 30px;
 }
 .cat__hl {
   font-weight: bold;
@@ -60,21 +119,46 @@ center {
   z-index: -1;
   transition: all 0.5s;
 }
-.cat__copy {
-  margin-top: 28vh;
+.footer {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  padding: 30px 0;
+}
+.footer_links {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.footer_links > a {
+  text-decoration: none;
+  color: var(--text-color);
+  text-transform: capitalize;
+  font-size: 1rem;
+  display: flex;
 }
 .cat__hl > a {
   color: #ffad8a;
 }
 #cat__thanks {
-  color: #1028cf;
+  color: #03aac0;
   display: none;
 }
 @media screen and (max-width: 768px) {
   .container {
     width: 70%;
   }
 }
+@media screen and (max-width: 700px) {
+  .footer {
+    flex-direction: column;
+  }
+  .footer_divider {
+    display: none;
+  }
+}
 @media screen and (max-width: 576px) {
   .cat__title {
     font-size: 3rem;