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 0000000..0238ce5 Binary files /dev/null and b/public/assets/leftArrowButton.png differ diff --git a/public/assets/settingsButton.png b/public/assets/settingsButton.png new file mode 100644 index 0000000..948875d Binary files /dev/null and b/public/assets/settingsButton.png differ diff --git a/public/index.html b/public/index.html index 0970d05..1fec085 100644 --- a/public/index.html +++ b/public/index.html @@ -11,23 +11,7 @@

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;