Bug fixes and About page

linfindel · Nov 29, 2023 · 68eed01 · 68eed01
1 parent d896b1d
commit 68eed01
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 42 deletions.
diff --git a/about.html b/about.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Viewer</title>
+
+    <link rel="stylesheet" href="https://nadir-software.github.io/nadircss/nadir.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+</head>
+<body style="background-size: cover; background-repeat: no-repeat;">
+    <div class="navbar-column">
+        <div id="navbar" class="navbar">
+            <h1 id="navbar-text">Image Viewer</h1>
+        </div>
+
+        <button onclick="location.href = '.'">
+            <span class="material-symbols-rounded">arrow_back</span>
+            Back
+        </button>
+    </div>
+
+    <div class="card column">
+        <div class="text-center">
+            <h1 id="version">Loading...</h1>
+            <p id="whats-new"></p>
+        </div>
+
+        <div class="row">
+            <button id="about1" onclick="window.open('https://nadir-software.github.io', '_blank')" class="about">
+                <span class="material-symbols-rounded">home</span>
+                More projects
+            </button>
+
+            <button id="about2" onclick="window.open('https://www.github.com/Nadir-Software/images', '_blank')" class="about">
+                <span class="material-symbols-rounded">code</span>
+                View source
+            </button>
+        </div>
+    </div>
+
+    <script src="about.js"></script>
+</body>
+</html>
diff --git a/about.js b/about.js
@@ -0,0 +1,16 @@
+const username = 'Nadir-Software';
+const repo = 'images';
+
+fetch(`https://api.github.com/repos/${username}/${repo}/commits?per_page=1`)
+  .then(response => {
+    const totalCount = response.headers.get('Link').match(/page=(\d+)>; rel="last"/)[1];
+    return response.json().then(data => {
+        const latestCommitMessage = data[0].commit.message;
+        console.log(`Total commit count: ${totalCount}`);
+        console.log(`Latest commit message: ${latestCommitMessage}`);
+
+        document.getElementById("version").innerText = `Version ${totalCount} Release Notes`;
+        document.getElementById("whats-new").innerText = latestCommitMessage;
+    });
+})
+.catch(error => console.error('Error fetching data:', error));
diff --git a/index.html b/index.html
@@ -11,10 +11,15 @@
 <body style="background-size: cover; background-repeat: no-repeat;">
     <div class="navbar-column">
         <div id="navbar" class="navbar">
-            <h1 id="navbar-text">Loading...</h1>
+            <h1 id="navbar-text">Image Viewer</h1>
         </div>
 
-        <div id="buttons" style="opacity: 0;" class="row">
+        <div id="buttons" class="row">
+            <button onclick="location.href = 'about.html'" id="button4">
+                <span class="material-symbols-rounded">info</span>
+                About
+            </button>
+
             <button id="button1" onclick="imageOptions('show')">
                 <span id="button1-icon" class="material-symbols-rounded">upload</span>
                 <span id="button1-text">Upload image</span>
@@ -34,7 +39,7 @@ <h1 id="navbar-text">Loading...</h1>
         </div>
     </div>
 
-    <img onload="document.getElementById('navbar-text').innerText = 'Image Viewer'; document.getElementById('buttons').style.opacity = 1" loading="eager" id="image" src="https://picsum.photos/1080/500" style="max-width: 80vw; max-height: 80vh;">
+    <img id="image" style="max-width: 80vw; max-height: 80vh;">
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vibrant.js/1.0.0/Vibrant.min.js"></script>
     <script src="script.js"></script>

diff --git a/script.js b/script.js
@@ -5,6 +5,7 @@ const buttons = document.getElementById("buttons");
 const button1 = document.getElementById("button1");
 const button2 = document.getElementById("button2");
 const button3 = document.getElementById("button3");
+const button4 = document.getElementById("button4");
 
 const button1Icon = document.getElementById("button1-icon");
 const button1Text = document.getElementById("button1-text");
@@ -14,51 +15,59 @@ const button2Text = document.getElementById("button2-text");
 const queryString = window.location.search;
 console.log(queryString);
 const urlParams = new URLSearchParams(queryString);
-const url = urlParams.get('url');
+const urlParam = urlParams.get('url');
 
-if (url) {
-    imageElement.src = url;
+if (urlParam) {
+    imageElement.src = urlParam;
     document.getElementById("button3").style.display = "flex";
-    document.getElementById("filters").href = `filters.html?url=${url}`;
-}
+    document.getElementById("filters").href = `filters.html?url=${urlParam}`;
 
-generateMaterialDesignPalette(url, (error, palette) => {
-    if (error) {
-        console.error(error);
-    } else {
-        console.log("Material Design Palette:", palette);
-
-        // Set the background color of buttons with alpha 0.25
-        button1.style.backgroundColor = generateRGBA(palette.accent, 0.25);
-        button2.style.backgroundColor = generateRGBA(palette.accent, 0.25);
-        button3.style.backgroundColor = generateRGBA(palette.accent, 0.25);
-
-        // Change background color on hover to alpha 0.5
-        button1.addEventListener("mouseover", () => {
-            button1.style.backgroundColor = generateRGBA(palette.accent, 0.5);
-        });
-        button1.addEventListener("mouseout", () => {
+    generateMaterialDesignPalette(url, (error, palette) => {
+        if (error) {
+            console.error(error);
+        } else {
+            console.log("Material Design Palette:", palette);
+
+            // Set the background color of buttons with alpha 0.25
             button1.style.backgroundColor = generateRGBA(palette.accent, 0.25);
-        });
-
-        button2.addEventListener("mouseover", () => {
-            button2.style.backgroundColor = generateRGBA(palette.accent, 0.5);
-        });
-        button2.addEventListener("mouseout", () => {
             button2.style.backgroundColor = generateRGBA(palette.accent, 0.25);
-        });
-
-        button3.addEventListener("mouseover", () => {
-            button3.style.backgroundColor = generateRGBA(palette.accent, 0.5);
-        });
-        button3.addEventListener("mouseout", () => {
             button3.style.backgroundColor = generateRGBA(palette.accent, 0.25);
-        });
-
-        document.getElementById("navbar").style.backgroundColor = generateRGBA(palette.accent, 0.25);
-
-    }
-});
+            button4.style.backgroundColor = generateRGBA(palette.accent, 0.25);
+
+            // Change background color on hover to alpha 0.5
+            button1.addEventListener("mouseover", () => {
+                button1.style.backgroundColor = generateRGBA(palette.accent, 0.5);
+            });
+            button1.addEventListener("mouseout", () => {
+                button1.style.backgroundColor = generateRGBA(palette.accent, 0.25);
+            });
+
+            button2.addEventListener("mouseover", () => {
+                button2.style.backgroundColor = generateRGBA(palette.accent, 0.5);
+            });
+            button2.addEventListener("mouseout", () => {
+                button2.style.backgroundColor = generateRGBA(palette.accent, 0.25);
+            });
+
+            button3.addEventListener("mouseover", () => {
+                button3.style.backgroundColor = generateRGBA(palette.accent, 0.5);
+            });
+            button3.addEventListener("mouseout", () => {
+                button3.style.backgroundColor = generateRGBA(palette.accent, 0.25);
+            });
+
+            button4.addEventListener("mouseover", () => {
+                button4.style.backgroundColor = generateRGBA(palette.accent, 0.5);
+            });
+            button4.addEventListener("mouseout", () => {
+                button4.style.backgroundColor = generateRGBA(palette.accent, 0.25);
+            });
+
+            document.getElementById("navbar").style.backgroundColor = generateRGBA(palette.accent, 0.25);
+
+        }
+    });
+}
 
 function resetImage() {
     location.reload();
@@ -129,6 +138,7 @@ function uploadLink() {
             button1.style.backgroundColor = generateRGBA(palette.accent, 0.25);
             button2.style.backgroundColor = generateRGBA(palette.accent, 0.25);
             button3.style.backgroundColor = generateRGBA(palette.accent, 0.25);
+            button4.style.backgroundColor = generateRGBA(palette.accent, 0.25);
 
             // Change background color on hover to alpha 0.5
             button1.addEventListener("mouseover", () => {
@@ -152,6 +162,13 @@ function uploadLink() {
                 button3.style.backgroundColor = generateRGBA(palette.accent, 0.25);
             });
 
+            button4.addEventListener("mouseover", () => {
+                button4.style.backgroundColor = generateRGBA(palette.accent, 0.5);
+            });
+            button4.addEventListener("mouseout", () => {
+                button4.style.backgroundColor = generateRGBA(palette.accent, 0.25);
+            });
+
             document.getElementById("navbar").style.backgroundColor = generateRGBA(palette.accent, 0.25);
 
         }
@@ -183,6 +200,8 @@ function uploadFile() {
                         // Set the background color of buttons with alpha 0.25
                         button1.style.backgroundColor = generateRGBA(palette.accent, 0.25);
                         button2.style.backgroundColor = generateRGBA(palette.accent, 0.25);
+                        button3.style.backgroundColor = generateRGBA(palette.accent, 0.25);
+                        button4.style.backgroundColor = generateRGBA(palette.accent, 0.25);
 
                         // Change background color on hover to alpha 0.5
                         button1.addEventListener("mouseover", () => {
@@ -198,6 +217,20 @@ function uploadFile() {
                         button2.addEventListener("mouseout", () => {
                             button2.style.backgroundColor = generateRGBA(palette.accent, 0.25);
                         });
+
+                        button3.addEventListener("mouseover", () => {
+                            button3.style.backgroundColor = generateRGBA(palette.accent, 0.5);
+                        });
+                        button3.addEventListener("mouseout", () => {
+                            button3.style.backgroundColor = generateRGBA(palette.accent, 0.25);
+                        });
+
+                        button4.addEventListener("mouseover", () => {
+                            button4.style.backgroundColor = generateRGBA(palette.accent, 0.5);
+                        });
+                        button4.addEventListener("mouseout", () => {
+                            button4.style.backgroundColor = generateRGBA(palette.accent, 0.25);
+                        });
 
                         document.getElementById("navbar").style.backgroundColor = generateRGBA(palette.accent, 0.25);