diff --git a/public/assets/Bing.svg b/public/assets/Bing.svg new file mode 100644 index 0000000..b411a4f --- /dev/null +++ b/public/assets/Bing.svg @@ -0,0 +1 @@ +Bing \ No newline at end of file diff --git a/public/index.html b/public/index.html index 1fec085..9890e7c 100644 --- a/public/index.html +++ b/public/index.html @@ -43,9 +43,41 @@ diff --git a/public/script.js b/public/script.js index ac6c276..08c0425 100644 --- a/public/script.js +++ b/public/script.js @@ -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 = ` ${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"); + } +} diff --git a/public/style.css b/public/style.css index 6160ea8..9d0f77e 100644 --- a/public/style.css +++ b/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); +}