Add images download feature and minor UI improvements

public/index.html

@@ -17,7 +17,7 @@
                             <input id="search-input" type="text" placeholder="Search For Images..." />
                             <button onclick="search()">Search</button>
                         </form>
-                        <button onclick="download()">Download Images</button>
+                        <button class="square" onclick="download()"><img src="assets/downloadButton.png" /></button>
                     </div>
                     <hr />
                     <div class="loader-div" id="loader-div">

public/script.js

@@ -5,6 +5,7 @@ const imagesDiv = document.getElementById("images-div");
 const imageTemplate = document.getElementById("image-template");
 const loaderDiv = document.getElementById("loader-div");
 let imagesUrls = [];
+let uuid;
 
 starsCanvas(starsNumber);
 searchForm.addEventListener("submit", function (event) {
@@ -86,10 +87,15 @@ function starsCanvas(number) {
 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);
+    if (!response.ok) {
+        console.error(await response.text());
+        return;
+    }
     const data = await response.json();
+    uuid = data.uuid;
 
     loaderDiv.classList.toggle("show");
-    for (const url of data) {
+    for (const url of data.urls) {
         imagesUrls.push(url);
         const imageTemplateCopy = imageTemplate.content.cloneNode(true);
         imageTemplateCopy.getElementById("image").src = url;
@@ -97,8 +103,31 @@ async function getImagesURL(query, offset, count, smart) {
     }
 }
 
+async function downloadImages(uuid) {
+    const url = `/api/downloadImages?uuid=${encodeURIComponent(uuid)}`;
+    const response = await fetch(url);
+    if (!response.ok) {
+        console.error(await response.text());
+        return;
+    }
+
+    const blob = await response.blob();
+    const blobUrl = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = blobUrl;
+    a.download = `${uuid}.zip`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    window.URL.revokeObjectURL(blobUrl);
+}
+
 async function search() {
     imagesDiv.replaceChildren();
     loaderDiv.classList.toggle("show");
     await getImagesURL(searchInput.value, 1, 1000, false);
 }
+
+async function download() {
+    await downloadImages(uuid);
+}

public/style.css

@@ -3,11 +3,12 @@
     box-sizing: border-box;
     font-family: "Segoe UI", sans-serif;
     scrollbar-width: thin;
-    scrollbar-color: var(--border-color) transparent;
+    scrollbar-color: var(--secondary-color) transparent;
 }
 
 :root {
-    --border-color: #ffffff;
+    --primary-color: #ffffff;
+    --secondary-color: #888888;
     --text-color: #eee;
     --transparent-white: rgba(255, 255, 255, 0.1);
 }
@@ -28,7 +29,7 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-    background: var(--border-color);
+    background: var(--secondary-color);
     border-radius: 2px;
 }
 
@@ -58,7 +59,7 @@ body {
     width: 200px;
     height: 50px;
     background: var(--transparent-white);
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--primary-color);
     border-radius: 12px;
     color: var(--text-color);
     font-size: 20px;
@@ -68,12 +69,27 @@ body {
     align-items: center;
 }
 
+.content button:hover {
+    border-color: var(--secondary-color);
+}
+
+.content button.square {
+    width: 50px;
+}
+
+.content button img {
+    width: 100%;
+    height: 100%;
+    padding: 5px;
+    object-fit: cover;
+}
+
 .content input {
     flex: 1;
     height: 40px;
     padding: 0 12px;
     background: var(--transparent-white);
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--primary-color);
     border-radius: 12px;
     color: var(--text-color);
     font-size: 17px;
@@ -81,6 +97,14 @@ body {
     transition: all 0.2s ease;
 }
 
+.content input:hover {
+    border-color: var(--secondary-color);
+}
+
+.content input:focus {
+    border-color: var(--secondary-color);
+}
+
 .content form {
     display: flex;
     flex: 1;
@@ -88,7 +112,7 @@ body {
 
 .content hr {
     border: none;
-    border-top: 1px solid var(--border-color);
+    border-top: 1px solid var(--secondary-color);
     margin: 10px 0;
 }
 
@@ -100,7 +124,7 @@ body {
     flex-direction: column;
     flex: 1;
 
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--primary-color);
     border-radius: 32px;
     padding: 40px;
 
@@ -152,7 +176,7 @@ body {
 
 .loader {
     border: 16px solid var(--transparent-white);
-    border-top: 16px solid var(--border-color);
+    border-top: 16px solid var(--primary-color);
     border-radius: 50%;
     width: 300px;
     height: 300px;