feat: changelog viewable

irfanshadikrishad · Jun 8, 2024 · 6d72d19 · 6d72d19
1 parent 76c9d1b
commit 6d72d19
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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%;