mirror of
https://github.com/Gabi-Zar/Images-Scrapper-JS.git
synced 2026-04-16 21:26:05 +02:00
Clean the client code and add an empty settings page
This commit is contained in:
50
assets/leftArrowButton.svg
Normal file
50
assets/leftArrowButton.svg
Normal file
@@ -0,0 +1,50 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="512"
|
||||
height="512"
|
||||
viewBox="0 0 135.46667 135.46667"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (86a8ad7, 2024-10-11)"
|
||||
sodipodi:docname="leftArrowButton.svg"
|
||||
inkscape:export-filename="..\public\assets\downloadButton.png"
|
||||
inkscape:export-xdpi="24"
|
||||
inkscape:export-ydpi="24"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#505050"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="0.65382425"
|
||||
inkscape:cx="219.47794"
|
||||
inkscape:cy="279.127"
|
||||
inkscape:window-width="3440"
|
||||
inkscape:window-height="1369"
|
||||
inkscape:window-x="1072"
|
||||
inkscape:window-y="201"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
style="fill:none;fill-opacity:0.5;stroke:#ffffff;stroke-width:6.35;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 127.2646,68.527095 H 8.2020718 M 50.535429,110.86043 8.2020718,68.527095 50.535429,26.193762"
|
||||
id="path1"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
108
assets/settingsButton.svg
Normal file
108
assets/settingsButton.svg
Normal file
@@ -0,0 +1,108 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="512"
|
||||
height="512"
|
||||
viewBox="0 0 135.46667 135.46667"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (86a8ad7, 2024-10-11)"
|
||||
sodipodi:docname="settingsButton.svg"
|
||||
inkscape:export-filename="..\public\assets\settingsButton.png"
|
||||
inkscape:export-xdpi="24"
|
||||
inkscape:export-ydpi="24"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#505050"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="1.8492942"
|
||||
inkscape:cx="219.81359"
|
||||
inkscape:cy="255.50288"
|
||||
inkscape:window-width="3440"
|
||||
inkscape:window-height="1369"
|
||||
inkscape:window-x="1072"
|
||||
inkscape:window-y="201"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
d="m 67.733333,26.458333 a 41.275002,41.275002 0 0 0 -41.275,41.275 41.275002,41.275002 0 0 0 41.275,41.274997 41.275002,41.275002 0 0 0 41.274997,-41.274997 41.275002,41.275002 0 0 0 -41.274997,-41.275 z m 0,18.123959 A 23.151041,23.151041 0 0 1 90.884375,67.733333 23.151041,23.151041 0 0 1 67.733333,90.884375 23.151041,23.151041 0 0 1 44.582292,67.733333 23.151041,23.151041 0 0 1 67.733333,44.582292 Z"
|
||||
style="fill:#ffffff;stroke-width:19.3476;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="path9" />
|
||||
<g
|
||||
id="g5">
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:7.219;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
|
||||
id="rect4"
|
||||
width="29.104166"
|
||||
height="29.104166"
|
||||
x="53.181252"
|
||||
y="14.552083"
|
||||
ry="8" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:7.219;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
|
||||
id="rect5"
|
||||
width="29.104166"
|
||||
height="29.104166"
|
||||
x="53.181252"
|
||||
y="91.28125"
|
||||
ry="8" />
|
||||
</g>
|
||||
<g
|
||||
id="g7"
|
||||
transform="rotate(60,67.733335,67.46875)">
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:7.219;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
|
||||
id="rect6"
|
||||
width="29.104166"
|
||||
height="29.104166"
|
||||
x="53.181252"
|
||||
y="14.552083"
|
||||
ry="8" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:7.219;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
|
||||
id="rect7"
|
||||
width="29.104166"
|
||||
height="29.104166"
|
||||
x="53.181252"
|
||||
y="91.28125"
|
||||
ry="8" />
|
||||
</g>
|
||||
<g
|
||||
id="g9"
|
||||
transform="rotate(120,67.733335,67.46875)">
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:7.219;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
|
||||
id="rect8"
|
||||
width="29.104166"
|
||||
height="29.104166"
|
||||
x="53.181252"
|
||||
y="14.552083"
|
||||
ry="8" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:7.219;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
|
||||
id="rect9"
|
||||
width="29.104166"
|
||||
height="29.104166"
|
||||
x="53.181252"
|
||||
y="91.28125"
|
||||
ry="8" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
BIN
public/assets/leftArrowButton.png
Normal file
BIN
public/assets/leftArrowButton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
public/assets/settingsButton.png
Normal file
BIN
public/assets/settingsButton.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
@@ -11,23 +11,7 @@
|
||||
<div class="app">
|
||||
<main class="content">
|
||||
<h1>Images Scrapper JS</h1>
|
||||
<div class="view" id="view">
|
||||
<div class="horizontal-div">
|
||||
<form class="horizontal-div input-form" id="search-form">
|
||||
<input id="search-input" type="text" placeholder="Search For Images..." />
|
||||
<button onclick="search()">Search</button>
|
||||
</form>
|
||||
<button class="square" onclick="download()"><img src="assets/downloadButton.png" /></button>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="loader-div" id="loader-div">
|
||||
<div class="loader" id="loader"></div>
|
||||
<h2>Scrapping in progress ...</h2>
|
||||
</div>
|
||||
<div class="scroll-div">
|
||||
<div id="images-div" class="images-div scroll-hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view" id="view"></div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -37,6 +21,33 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="home-template">
|
||||
<div class="horizontal-div">
|
||||
<form class="horizontal-div input-form" id="search-form">
|
||||
<input id="search-input" type="text" placeholder="Search For Images..." />
|
||||
<button onclick="search()">Search</button>
|
||||
</form>
|
||||
<button class="square" onclick="download()"><img src="assets/downloadButton.png" /></button>
|
||||
<button class="square" onclick="navigate('settings')"><img src="assets/settingsButton.png" /></button>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="loader-div" id="loader-div">
|
||||
<div class="loader" id="loader"></div>
|
||||
<h2>Scrapping in progress ...</h2>
|
||||
</div>
|
||||
<div class="scroll-div">
|
||||
<div id="images-div" class="images-div scroll-hidden"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="settings-template">
|
||||
<div class="horizontal-div">
|
||||
<button class="square" onclick="navigate('home')"><img src="assets/leftArrowButton.png" /></button>
|
||||
<h2>Settings</h2>
|
||||
</div>
|
||||
<hr />
|
||||
</template>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user