mirror of
https://github.com/Gabi-Zar/Images-Scrapper-JS.git
synced 2026-04-17 05:36:06 +02:00
Add settings
This commit is contained in:
1
public/assets/Bing.svg
Normal file
1
public/assets/Bing.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Bing</title><path d="M11.97 7.569a.92.92 0 00-.805.863c-.013.195-.01.209.43 1.347 1 2.59 1.242 3.214 1.283 3.302.099.213.237.413.41.592.134.138.222.212.37.311.26.176.39.224 1.405.527.989.295 1.529.49 1.994.723.603.302 1.024.644 1.29 1.051.191.292.36.815.434 1.342.029.206.029.661 0 .847a2.491 2.491 0 01-.376 1.026c-.1.151-.065.126.081-.058.415-.52.838-1.408 1.054-2.213a6.728 6.728 0 00.102-3.012 6.626 6.626 0 00-3.291-4.53 104.157 104.157 0 00-1.322-.698l-.254-.133a737.941 737.941 0 01-1.575-.827c-.548-.29-.78-.406-.846-.426a1.376 1.376 0 00-.29-.045l-.093.01z" fill="url(#lobe-icons-bing-fill-0)"></path><path d="M13.164 17.24a4.385 4.385 0 00-.202.125 511.45 511.45 0 00-1.795 1.115 163.087 163.087 0 01-.989.614l-.463.288a99.198 99.198 0 01-1.502.941c-.326.2-.704.334-1.09.387-.18.024-.52.024-.7 0a2.807 2.807 0 01-1.318-.538 3.665 3.665 0 01-.543-.545 2.837 2.837 0 01-.506-1.141 2.161 2.161 0 00-.041-.182c-.008-.008.006.138.032.33.027.199.085.487.147.733.482 1.907 1.85 3.457 3.705 4.195a6.31 6.31 0 001.658.412c.22.025.844.035 1.074.017 1.054-.08 1.972-.393 2.913-.992a325.28 325.28 0 01.937-.596l.384-.244.684-.435.234-.149.009-.005.025-.017.013-.007.172-.11.597-.38c.76-.481.987-.65 1.34-.998.148-.146.37-.394.381-.425.002-.007.042-.068.088-.136a2.49 2.49 0 00.373-1.023 4.181 4.181 0 000-.847 4.336 4.336 0 00-.318-1.137c-.224-.472-.7-.9-1.383-1.245a2.972 2.972 0 00-.406-.181c-.01 0-.646.392-1.413.87a7089.171 7089.171 0 00-1.658 1.031l-.439.274z" fill="url(#lobe-icons-bing-fill-1)" fill-rule="nonzero"></path><path d="M4.003 14.946l.004 3.33.042.193c.134.604.366 1.04.77 1.445a2.701 2.701 0 001.955.814c.536 0 1-.135 1.479-.43l.703-.435.556-.346V8.003c0-2.306-.004-3.675-.012-3.782a2.734 2.734 0 00-.797-1.765c-.145-.144-.268-.24-.637-.496A1780.102 1780.102 0 015.762.362C5.406.115 5.38.098 5.271.059a.943.943 0 00-1.254.696C4.003.818 4 1.659 4 6.223v5.394H4l.003 3.329z" fill="url(#lobe-icons-bing-fill-2)" fill-rule="nonzero"></path><defs><radialGradient cx="93.717%" cy="77.818%" fx="93.717%" fy="77.818%" gradientTransform="scale(-1 -.7146) rotate(49.288 2.035 -2.198)" id="lobe-icons-bing-fill-0" r="143.691%"><stop offset="0%" stop-color="#00CACC"></stop><stop offset="100%" stop-color="#048FCE"></stop></radialGradient><radialGradient cx="13.893%" cy="71.448%" fx="13.893%" fy="71.448%" gradientTransform="scale(.6042 1) rotate(-23.34 .184 .494)" id="lobe-icons-bing-fill-1" r="149.21%"><stop offset="0%" stop-color="#00BBEC"></stop><stop offset="100%" stop-color="#2756A9"></stop></radialGradient><linearGradient id="lobe-icons-bing-fill-2" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#00BBEC"></stop><stop offset="100%" stop-color="#2756A9"></stop></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -43,9 +43,41 @@
|
||||
<template id="settings-template">
|
||||
<div class="horizontal-div">
|
||||
<button class="square" onclick="navigate('home')"><img src="assets/leftArrowButton.png" /></button>
|
||||
<h2>Settings</h2>
|
||||
<h2 class="sub-title">Settings</h2>
|
||||
</div>
|
||||
<hr />
|
||||
<div style="height: 20px"></div>
|
||||
<div class="setting-row">
|
||||
<label>Images provider: </label>
|
||||
<div class="list-div">
|
||||
<div class="longer-button fake-button" id="provider-button" onclick="toggleProviderMenu()"></div>
|
||||
<div class="list-menu longer-button" id="provider-menu">
|
||||
<li id="Bing" onclick="changeProvider('Bing')"><img src="assets/Bing.svg" class="icons" /> Bing</li>
|
||||
<li id="Bing" onclick="changeProvider('Bing')"><img src="assets/Bing.svg" class="icons" /> Bing</li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-description">Select where the images will be scraped from.</div>
|
||||
<div class="setting-row">
|
||||
<label>Max number of images:</label>
|
||||
<input id="max-images-input" type="text" />
|
||||
</div>
|
||||
<div class="setting-description">Maximum number of images to scrape from the provider.</div>
|
||||
<div class="setting-row">
|
||||
<label>Images offset:</label>
|
||||
<input id="offset-input" type="text" />
|
||||
</div>
|
||||
<div class="setting-description">Leave 1 if you're unsure. Higher values skip images.</div>
|
||||
<div class="setting-row">
|
||||
<label>Use Smart mode</label>
|
||||
<div class="setting-control">
|
||||
<label class="checkbox-container">
|
||||
<input type="checkbox" name="smart-mode" id="smart-mode" />
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-description">Verifies that images can be downloaded before returning URLs. Slower but prevents broken or black images.</div>
|
||||
</template>
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
@@ -4,6 +4,10 @@ const homeTemplate = document.getElementById("home-template");
|
||||
const settingsTemplate = document.getElementById("settings-template");
|
||||
let imagesUrls = [];
|
||||
let uuid;
|
||||
let imagesProvider = "Bing";
|
||||
let imagesOffset = 1;
|
||||
let maxImages = 1000;
|
||||
let smartMode = false;
|
||||
|
||||
navigate("home");
|
||||
|
||||
@@ -93,6 +97,26 @@ function navigate(page) {
|
||||
break;
|
||||
case "settings":
|
||||
view.appendChild(settingsTemplate.content.cloneNode(true));
|
||||
setProviderButton();
|
||||
toggleSelectedListButton("provider-menu", imagesProvider);
|
||||
|
||||
const maxImagesInput = document.getElementById("max-images-input");
|
||||
maxImagesInput.value = maxImages;
|
||||
maxImagesInput.addEventListener("input", function (event) {
|
||||
maxImages = maxImagesInput.value;
|
||||
});
|
||||
|
||||
const offsetInput = document.getElementById("offset-input");
|
||||
offsetInput.value = imagesOffset;
|
||||
offsetInput.addEventListener("input", function (event) {
|
||||
imagesOffset = offsetInput.value;
|
||||
});
|
||||
|
||||
const smartModeCheckbox = document.getElementById("smart-mode");
|
||||
smartModeCheckbox.checked = smartMode;
|
||||
smartModeCheckbox.addEventListener("change", function () {
|
||||
smartMode = this.checked;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -137,7 +161,7 @@ async function search() {
|
||||
|
||||
imagesDiv.replaceChildren();
|
||||
loaderDiv.classList.toggle("show");
|
||||
const urls = await getImagesURL(searchInput.value, 1, 1000, false);
|
||||
const urls = await getImagesURL(searchInput.value, imagesOffset, maxImages, smartMode);
|
||||
|
||||
loaderDiv.classList.toggle("show");
|
||||
for (const url of urls) {
|
||||
@@ -151,3 +175,38 @@ async function search() {
|
||||
async function download() {
|
||||
await downloadImages(uuid);
|
||||
}
|
||||
|
||||
function toggleProviderMenu() {
|
||||
const providerMenu = document.getElementById("provider-menu");
|
||||
if (providerMenu) {
|
||||
providerMenu.classList.toggle("show");
|
||||
}
|
||||
}
|
||||
|
||||
async function setProviderButton() {
|
||||
const providerButton = document.getElementById("provider-button");
|
||||
if (providerButton) {
|
||||
providerButton.innerHTML = `<img src="assets/${imagesProvider}.svg" class="icons" /> ${imagesProvider}`;
|
||||
}
|
||||
}
|
||||
|
||||
function changeProvider(provider) {
|
||||
imagesProvider = provider;
|
||||
toggleProviderMenu();
|
||||
toggleSelectedListButton("provider-menu", provider);
|
||||
setProviderButton();
|
||||
}
|
||||
|
||||
function toggleSelectedListButton(ListMenuId, buttonId) {
|
||||
const listMenu = document.getElementById(ListMenuId);
|
||||
if (listMenu) {
|
||||
Array.from(listMenu.children).forEach((child) => {
|
||||
child.classList.remove("selected");
|
||||
});
|
||||
}
|
||||
|
||||
const listButton = document.getElementById(buttonId);
|
||||
if (listButton) {
|
||||
listButton.classList.toggle("selected");
|
||||
}
|
||||
}
|
||||
|
||||
127
public/style.css
127
public/style.css
@@ -55,7 +55,7 @@ body {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
.sub-title {
|
||||
font-size: 32px;
|
||||
color: var(--text-color);
|
||||
position: absolute;
|
||||
@@ -63,7 +63,8 @@ body {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.content button {
|
||||
.content button,
|
||||
.fake-button {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
background: var(--transparent-white);
|
||||
@@ -75,9 +76,11 @@ body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.content button:hover {
|
||||
.content button:hover,
|
||||
.fake-button:hover {
|
||||
border-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
@@ -85,6 +88,10 @@ body {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.longer-button {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.content button img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -203,7 +210,6 @@ body {
|
||||
|
||||
.loader-div {
|
||||
display: none;
|
||||
margin-top: 50px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
@@ -213,3 +219,116 @@ body {
|
||||
.loader-div.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.list-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: var(--transparent-white);
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 12px;
|
||||
z-index: 10;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.list-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.list-menu li {
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
border-radius: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.list-menu li:hover {
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
.list-menu li.selected {
|
||||
background: var(--secondary-color);
|
||||
}
|
||||
|
||||
.icons {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 400px;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.setting-control {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.setting-description {
|
||||
grid-column: 1 / span 2;
|
||||
font-size: 14px;
|
||||
color: var(--secondary-color);
|
||||
margin-top: -5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding-left: 36px;
|
||||
color: var(--text-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checkbox-container input {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
background: var(--transparent-white);
|
||||
border: 1px solid var(--secondary-color);
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.checkbox-container:hover .checkmark {
|
||||
background: var(--transparent-white);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark {
|
||||
background: var(--secondary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark:after {
|
||||
left: 8px;
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border: solid var(--text-color);
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user