From 6d72d198c18cb191b3f80eabc4791e23ae09c0f9 Mon Sep 17 00:00:00 2001
From: Irfan Shadik Rishad <irfanshadikrishad@gmail.com>
Date: Sat, 8 Jun 2024 22:32:10 +0600
Subject: [PATCH] feat: changelog viewable

---
 index.html    | 18 ++++++++++++++++--
 src/script.js |  9 +++++++++
 src/style.css | 31 +++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 6df038f..b55c362 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
         <a href="/" class="nav_logo">Cat</a>
       </section>
       <section class="nav_btns">
-        <a id="changelog"
+        <a id="changelog_open" onclick="changelogOpen()"
           ><i class="fa-solid fa-clock-rotate-left"></i> Changelog</a
         >
         <a id="version_Url" class="version_nav" target="_blank">
@@ -65,7 +65,12 @@ <h1 class="cat__title">Cat — Chrome extension</h1>
       </p>
       <center>
         <div class="cat__download">
-          <img src="./images/cat.png" alt="cat__popup" id="cat__i" />
+          <img
+            src="./images/cat.png"
+            alt="cat__popup"
+            id="cat__i"
+            draggable="false"
+          />
           <a
             id="download"
             href="https://github.com/irfanshadikrishad/cat/archive/refs/tags/v1.0.7.zip"
@@ -112,6 +117,15 @@ <h1 class="cat__title">Cat — Chrome extension</h1>
         ></a>
       </div>
     </section>
+    <section id="changelog_popper">
+      <div class="changelog_header">
+        <h1>Changelog</h1>
+        <button id="changelog_close" onclick="changelogClose()">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
+      <p id="changelog_insert"></p>
+    </section>
     <script src="./src/script.js"></script>
   </body>
 </html>
diff --git a/src/script.js b/src/script.js
index 49a6cf2..7cb5cab 100644
--- a/src/script.js
+++ b/src/script.js
@@ -20,6 +20,7 @@ const getLatestVersionOfCat = async () => {
   document.getElementById("download").href = download_Link;
   document.getElementById("version_Url").href = version_Url;
   document.getElementById("download_Count").innerText = `| ${download_Count}`;
+  document.getElementById("changelog_insert").innerText = changelog;
 };
 
 getLatestVersionOfCat();
@@ -41,3 +42,11 @@ function mouseout() {
 
 // Insert Current Year in Footer
 document.getElementById("current_year").innerText = new Date().getFullYear();
+
+// Changelog Management
+function changelogOpen() {
+  document.getElementById("changelog_popper").style.display = "flex";
+}
+function changelogClose() {
+  document.getElementById("changelog_popper").style.display = "none";
+}
diff --git a/src/style.css b/src/style.css
index 05f132f..5070033 100644
--- a/src/style.css
+++ b/src/style.css
@@ -12,6 +12,7 @@
     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 body {
+  position: relative;
   margin-top: 20px;
   color: var(--text-color);
   background-color: var(--background);
@@ -45,6 +46,9 @@ nav {
   color: var(--text-color);
   font-weight: 500;
 }
+.nav_btns > a:first-child {
+  cursor: pointer;
+}
 .nav_btns > a:hover {
   color: var(--primary);
 }
@@ -146,6 +150,33 @@ center {
   color: #03aac0;
   display: none;
 }
+#changelog_popper {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  padding: 10px;
+  background-color: var(--secondary);
+  min-height: 150px;
+  border-radius: 5px;
+  top: 35%;
+  width: 100%;
+}
+.changelog_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+#changelog_close {
+  background-color: transparent;
+  border: none;
+  color: var(--text-color);
+  font-size: 1rem;
+  cursor: pointer;
+}
+#changelog_insert {
+  text-align: left;
+}
+
 @media screen and (max-width: 768px) {
   .container {
     width: 70%;