From 68eed012d33dbb731108b616b5e0717723b82539 Mon Sep 17 00:00:00 2001 From: Nadir Technologies Date: Wed, 29 Nov 2023 16:15:12 +0000 Subject: [PATCH] Bug fixes and About page --- about.html | 44 +++++++++++++++++++++ about.js | 16 ++++++++ index.html | 11 ++++-- script.js | 111 ++++++++++++++++++++++++++++++++++------------------- 4 files changed, 140 insertions(+), 42 deletions(-) create mode 100644 about.html create mode 100644 about.js diff --git a/about.html b/about.html new file mode 100644 index 0000000..a17e41d --- /dev/null +++ b/about.html @@ -0,0 +1,44 @@ + + + + + + Image Viewer + + + + + +
+ + + +
+ +
+
+

Loading...

+

+
+ +
+ + + +
+
+ + + + diff --git a/about.js b/about.js new file mode 100644 index 0000000..0666953 --- /dev/null +++ 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)); \ No newline at end of file diff --git a/index.html b/index.html index 9ab685a..344044b 100644 --- a/index.html +++ b/index.html @@ -11,10 +11,15 @@
-
+
+ +
- + diff --git a/script.js b/script.js index 5c7b1a1..1a742ce 100644 --- 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);