From e94b50e8c3aadbc1db9279b878611f6763784995 Mon Sep 17 00:00:00 2001 From: GabiZar Date: Sun, 8 Mar 2026 22:14:59 +0100 Subject: [PATCH] Clean the client code and add an empty settings page --- assets/leftArrowButton.svg | 50 ++++++++++++++ assets/settingsButton.svg | 108 ++++++++++++++++++++++++++++++ public/assets/leftArrowButton.png | Bin 0 -> 1057 bytes public/assets/settingsButton.png | Bin 0 -> 2601 bytes public/index.html | 45 ++++++++----- public/script.js | 54 ++++++++++----- public/style.css | 8 +++ 7 files changed, 231 insertions(+), 34 deletions(-) create mode 100644 assets/leftArrowButton.svg create mode 100644 assets/settingsButton.svg create mode 100644 public/assets/leftArrowButton.png create mode 100644 public/assets/settingsButton.png diff --git a/assets/leftArrowButton.svg b/assets/leftArrowButton.svg new file mode 100644 index 0000000..a9f1690 --- /dev/null +++ b/assets/leftArrowButton.svg @@ -0,0 +1,50 @@ + + + + + + + + + + diff --git a/assets/settingsButton.svg b/assets/settingsButton.svg new file mode 100644 index 0000000..ad161ad --- /dev/null +++ b/assets/settingsButton.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/leftArrowButton.png b/public/assets/leftArrowButton.png new file mode 100644 index 0000000000000000000000000000000000000000..0238ce597fead4f5ed0c87e057ca74b59376ac84 GIT binary patch literal 1057 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 QJbLp$wpNZfx&

Images Scrapper JS

-
-
-
- - -
- -
-
-
-
-

Scrapping in progress ...

-
-
-
-
-
+
@@ -37,6 +21,33 @@ + + + + diff --git a/public/script.js b/public/script.js index 0cfb175..ac6c276 100644 --- a/public/script.js +++ b/public/script.js @@ -1,17 +1,13 @@ const starsNumber = 1000; -const searchInput = document.getElementById("search-input"); -const searchForm = document.getElementById("search-form"); -const imagesDiv = document.getElementById("images-div"); -const imageTemplate = document.getElementById("image-template"); -const loaderDiv = document.getElementById("loader-div"); +const view = document.getElementById("view"); +const homeTemplate = document.getElementById("home-template"); +const settingsTemplate = document.getElementById("settings-template"); let imagesUrls = []; let uuid; -starsCanvas(starsNumber); -searchForm.addEventListener("submit", function (event) { - event.preventDefault(); -}); +navigate("home"); +starsCanvas(starsNumber); window.addEventListener("resize", () => { starsCanvas(starsNumber); }); @@ -84,6 +80,23 @@ function starsCanvas(number) { animate(); } +function navigate(page) { + view.replaceChildren(); + switch (page) { + case "home": + view.appendChild(homeTemplate.content.cloneNode(true)); + const searchForm = document.getElementById("search-form"); + + searchForm.addEventListener("submit", function (event) { + event.preventDefault(); + }); + break; + case "settings": + view.appendChild(settingsTemplate.content.cloneNode(true)); + break; + } +} + async function getImagesURL(query, offset, count, smart) { const url = `/api/getImagesURL?q=${encodeURIComponent(query)}&offset=${offset}&count=${count}&smart=${smart}`; const response = await fetch(url); @@ -94,13 +107,7 @@ async function getImagesURL(query, offset, count, smart) { const data = await response.json(); uuid = data.uuid; - loaderDiv.classList.toggle("show"); - for (const url of data.urls) { - imagesUrls.push(url); - const imageTemplateCopy = imageTemplate.content.cloneNode(true); - imageTemplateCopy.getElementById("image").src = url; - imagesDiv.append(imageTemplateCopy); - } + return data.urls; } async function downloadImages(uuid) { @@ -123,9 +130,22 @@ async function downloadImages(uuid) { } async function search() { + const imageTemplate = document.getElementById("image-template"); + const imagesDiv = document.getElementById("images-div"); + const loaderDiv = document.getElementById("loader-div"); + const searchInput = document.getElementById("search-input"); + imagesDiv.replaceChildren(); loaderDiv.classList.toggle("show"); - await getImagesURL(searchInput.value, 1, 1000, false); + const urls = await getImagesURL(searchInput.value, 1, 1000, false); + + loaderDiv.classList.toggle("show"); + for (const url of urls) { + imagesUrls.push(url); + const imageTemplateCopy = imageTemplate.content.cloneNode(true); + imageTemplateCopy.getElementById("image").src = url; + imagesDiv.appendChild(imageTemplateCopy); + } } async function download() { diff --git a/public/style.css b/public/style.css index 013a5d4..6160ea8 100644 --- a/public/style.css +++ b/public/style.css @@ -55,6 +55,14 @@ body { justify-content: center; } +.content h2 { + font-size: 32px; + color: var(--text-color); + position: absolute; + left: 50%; + transform: translateX(-50%); +} + .content button { width: 200px; height: 50px;