Clean the client code and add an empty settings page

assets/leftArrowButton.svg

@@ -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>

assets/settingsButton.svg

@@ -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>

public/index.html

@@ -11,23 +11,7 @@
         <div class="app">
             <main class="content">
                 <h1>Images Scrapper JS</h1>
-                <div class="view" id="view">
+                <div class="view" id="view"></div>
-                    <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>
             </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>

public/script.js

@@ -1,17 +1,13 @@
 const starsNumber = 1000;
-const searchInput = document.getElementById("search-input");
+const view = document.getElementById("view");
-const searchForm = document.getElementById("search-form");
+const homeTemplate = document.getElementById("home-template");
-const imagesDiv = document.getElementById("images-div");
+const settingsTemplate = document.getElementById("settings-template");
-const imageTemplate = document.getElementById("image-template");
-const loaderDiv = document.getElementById("loader-div");
 let imagesUrls = [];
 let uuid;
 
-starsCanvas(starsNumber);
+navigate("home");
-searchForm.addEventListener("submit", function (event) {
-    event.preventDefault();
-});
 
+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");
+    return data.urls;
-    for (const url of data.urls) {
-        imagesUrls.push(url);
-        const imageTemplateCopy = imageTemplate.content.cloneNode(true);
-        imageTemplateCopy.getElementById("image").src = url;
-        imagesDiv.append(imageTemplateCopy);
-    }
 }
 
 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() {

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;