Started work on Search front-end

thehousewashere · Dec 19, 2024 · 3d6ab0e · 3d6ab0e
1 parent 96cbbd5
commit 3d6ab0e
Show file tree

Hide file tree

Showing 6 changed files with 200 additions and 101 deletions.
diff --git a/app.js b/app.js
@@ -2,14 +2,24 @@ import { settingsModal } from './settingsModal.js';
 import { themeModal, loadTheme } from './themeModal.js';
 import * as modHandler from './modHandler.js';
 import * as Util from './util.js';
+import { menuButtons } from './elements.js';
 
 loadTheme();
 document.getElementById('settingsButton').addEventListener('click', settingsModal);
+menuButtons.urlDownloader.addEventListener('click', modHandler.urlDownloader);
+menuButtons.search.addEventListener('click', async () => {
+        menuButtons.urlDownloader.className = 'nav-link';
+        menuButtons.search.className = 'nav-link active';
+        const response = await fetch('search.html', {cache: 'no-store'});
+        root.innerHTML = await response.text(); //TODO: Fix this
+});
+
+await modHandler.urlDownloader();
 
 if (await Util.newVersion()) {
     document.getElementById('settingsButton').innerHTML = `<span class="badge rounded-pill text-bg-primary">1</span> Settings <i class="bi bi-box-arrow-in-up-right"></i>`;
 }
 
 document.getElementById('themeButton').addEventListener('click', themeModal);
-modHandler.addEventListener();
-Util.addEventListener();
+Util.addEventListener();
+
diff --git a/elements.js b/elements.js
@@ -1,27 +1,35 @@
 export const root = document.getElementById('root');
 export const body = document.getElementById('body');
 export const style = document.getElementById('style');
-export const urlsText = document.getElementById('urlsText');
 export const APP = window.location.hostname == '';
 export const VERSION = '24.11.22';
 
-
-export const modOutput = {
-    div: document.getElementById('modOutput'),
-    title: document.getElementById('modOutputTitle'),
-    text: document.getElementById('modOutputText'),
-    copyButton: document.getElementById('modOutputCopy'),
-    downloadButton: document.getElementById('modOutputDownload'),
-    progressBar: document.getElementById('modOutputProgressBar'),
-    progressDiv: document.getElementById('modOutputProgressDiv')
+export const menuButtons = {
+    search: document.getElementById('searchButton'),
+    urlDownloader: document.getElementById('urlDownloaderButton')
 }
 
-export const modInput = {
-    textArea: document.getElementById('modInputTextArea'),
-    loadButton: document.getElementById('modInputLoadButton'),
-    verisonArea: document.getElementById('modInputVerisonArea'),
-    loaderDropdown: document.getElementById('modInputLoaderDropdown'),
-    AddDependsButton: document.getElementById('modInputAddDependsButton')
+export let modOutput, modInput;
+
+export function urlDownloaderElements(){
+    modOutput = {
+        div: document.getElementById('modOutput'),
+        title: document.getElementById('modOutputTitle'),
+        text: document.getElementById('modOutputText'),
+        copyButton: document.getElementById('modOutputCopy'),
+        downloadButton: document.getElementById('modOutputDownload'),
+        progressBar: document.getElementById('modOutputProgressBar'),
+        progressDiv: document.getElementById('modOutputProgressDiv')
+    }
+
+    modInput = {
+        urlsText: document.getElementById('urlsText'),
+        textArea: document.getElementById('modInputTextArea'),
+        loadButton: document.getElementById('modInputLoadButton'),
+        verisonArea: document.getElementById('modInputVerisonArea'),
+        loaderDropdown: document.getElementById('modInputLoaderDropdown'),
+        AddDependsButton: document.getElementById('modInputAddDependsButton')
+    }
 }
 
 export const modal = {

diff --git a/index.html b/index.html
@@ -19,6 +19,11 @@
     body {
         overflow-x: hidden;
     }
+
+    .no-padding-table, .no-padding-table, .no-padding-table td {
+        padding: 0;
+        margin: 0;
+    }
 </style>
 
 <body id="body" data-bs-theme="light">
@@ -38,92 +43,18 @@
     </nav>
     <ul class="nav nav-tabs bg-body-tertiary">
         <li class="nav-item">
-          <a class="nav-link active" aria-current="page">URL Downloader</a>
+          <a class="nav-link active" aria-current="page" id="urlDownloaderButton">URL Downloader</a>
         </li>
         <!-- <li class="nav-item">
             <button class="nav-link" disabled>Manifest Downloader</button>
         </li>
         <li class="nav-item">
             <button class="nav-link" disabled>SHA Downloader</button>
-        </li>
-        <li class="nav-item">
-          <button class="nav-link" disabled>File Name Searcher</button>
         </li> -->
+        <li class="nav-item">
+          <button class="nav-link" id="searchButton" disabled>Search (Coming Soon)</button>
+        </li> 
       </ul>
-    <div class="input-group">
-        <div>
-            <span class="input-group-text">Download Settings</span>
-            <input id="modInputVerisonArea" type="text" class="form-control" placeholder="Version (e.g 1.20.1)"
-                aria-label="Version" aria-describedby="basic-addon1">
-            <select class="form-select" id="modInputLoaderDropdown">
-                <option selected value="Forge">Loader (Forge)</option>
-                <option value="NeoForge">Loader (NeoForge)</option>
-                <option value="Fabric">Loader (Fabric)</option>
-                <option value="Quilt">Loader (Quilt)</option>
-                <option value="None">No Specified Loader</option>
-            </select>
-            <!-- <div>
-                <button class="btn btn-outline-secondary btn-sm" type="button" id="modInputLoadLastSettingsButton">Load
-                    Last Data</button>
-                <button class="btn btn-outline-secondary btn-sm" type="button" id="modInputLoadLastURLsButton">Load last
-                    URLs</button>
-            </div> -->
-            <div class="d-grid gap-2">
-                <button class="btn btn-outline-secondary btn-sm" type="button" id="modInputAddDependsButton">Add
-                    Modrinth Dependencies</button>
-            </div>
-        </div>
-        <span class="input-group-text" id="urlsText">URLs</span>
-        <textarea class="form-control" aria-label="With textarea" id="modInputTextArea"
-            placeholder="e.g https://modrinth.com/mod/create-track-map&#10;https://www.curseforge.com/minecraft/mc-mods/twigs"></textarea>
-        <button class="btn btn-outline-secondary" type="button" id="modInputLoadButton">Load</button>
-        <div class="input-group-text row">
-            <t>Currently works with</t>
-            <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round"
-                stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 3307 593" aria-hidden="true" width="2em"
-                height="2em">
-                <path fill-rule="nonzero"
-                    d="M1053.02 205.51c35.59 0 64.27 10.1 84.98 30.81 20.72 21.25 31.34 52.05 31.34 93.48v162.53h-66.4V338.3c0-24.96-5.3-43.55-16.46-56.3-11.15-12.22-26.55-18.6-47.27-18.6-22.3 0-40.37 7.45-53.65 21.79-13.27 14.87-20.18 36.11-20.18 63.2v143.94h-66.4V338.3c0-24.96-5.3-43.55-16.46-56.3-11.15-12.22-26.56-18.6-47.27-18.6-22.84 0-40.37 7.45-53.65 21.79-13.27 14.34-20.18 35.58-20.18 63.2v143.94h-66.4V208.7h63.21v36.12c10.63-12.75 23.9-22.3 39.84-29.21 15.93-6.9 33.46-10.1 53.11-10.1 21.25 0 40.37 3.72 56.84 11.69 16.46 8.5 29.21 20.18 38.77 35.59 11.69-14.88 26.56-26.56 45.15-35.06 18.59-7.97 38.77-12.22 61.08-12.22Zm329.84 290.54c-28.68 0-54.7-6.37-77.54-18.59a133.19 133.19 0 0 1-53.65-52.05c-13.28-21.78-19.65-46.74-19.65-74.9 0-28.14 6.37-53.1 19.65-74.88a135.4 135.4 0 0 1 53.65-51.53c22.84-12.21 48.86-18.59 77.54-18.59 29.22 0 55.24 6.38 78.08 18.6 22.84 12.21 40.9 29.74 54.18 51.52 12.75 21.77 19.12 46.74 19.12 74.89s-6.37 53.11-19.12 74.89c-13.28 22.3-31.34 39.83-54.18 52.05-22.84 12.22-48.86 18.6-78.08 18.6Zm0-56.83c24.44 0 44.62-7.97 60.55-24.43 15.94-16.47 23.9-37.72 23.9-64.27 0-26.56-7.96-47.8-23.9-64.27-15.93-16.47-36.11-24.43-60.55-24.43-24.43 0-44.61 7.96-60.02 24.43-15.93 16.46-23.9 37.71-23.9 64.27 0 26.55 7.97 47.8 23.9 64.27 15.4 16.46 35.6 24.43 60.02 24.43Zm491.32-341v394.11h-63.74v-36.65a108.02 108.02 0 0 1-40.37 30.28c-16.46 6.9-34 10.1-53.65 10.1-27.08 0-51.52-5.85-73.3-18.07-21.77-12.21-39.3-29.21-51.52-51.52-12.21-21.78-18.59-47.27-18.59-75.95s6.38-54.18 18.6-75.96c12.21-21.77 29.74-38.77 51.52-50.99 21.77-12.21 46.2-18.06 73.3-18.06 18.59 0 36.11 3.2 51.52 9.56a106.35 106.35 0 0 1 39.83 28.69V98.22h66.4Zm-149.79 341c15.94 0 30.28-3.72 43.03-11.16 12.74-6.9 22.83-17.52 30.27-30.8 7.44-13.28 11.15-29.21 11.15-46.74s-3.71-33.46-11.15-46.74c-7.44-13.28-17.53-23.9-30.27-31.34-12.75-6.9-27.1-10.62-43.03-10.62s-30.27 3.71-43.02 10.62c-12.75 7.43-22.84 18.06-30.28 31.34-7.43 13.28-11.15 29.2-11.15 46.74 0 17.53 3.72 33.46 11.15 46.74 7.44 13.28 17.53 23.9 30.28 30.8 12.75 7.44 27.09 11.16 43.02 11.16Zm298.51-189.09c19.12-29.74 52.58-44.62 100.92-44.62v63.21a84.29 84.29 0 0 0-15.4-1.6c-26.03 0-46.22 7.44-60.56 22.32-14.34 15.4-21.78 37.18-21.78 65.33v137.56h-66.39V208.7h63.2v41.43Zm155.63-41.43h66.39v283.63h-66.4V208.7Zm33.46-46.74c-12.22 0-22.31-3.72-30.28-11.68a37.36 37.36 0 0 1-12.21-28.16c0-11.15 4.25-20.71 12.21-28.68 7.97-7.43 18.06-11.15 30.28-11.15 12.21 0 22.3 3.72 30.27 10.62 7.97 7.44 12.22 16.47 12.22 27.62 0 11.69-3.72 21.25-11.69 29.21-7.96 7.97-18.59 12.22-30.8 12.22Zm279.38 43.55c35.59 0 64.27 10.63 86.05 31.34 21.78 20.72 32.4 52.05 32.4 92.95v162.53h-66.4V338.3c0-24.96-5.84-43.55-17.52-56.3-11.69-12.22-28.15-18.6-49.93-18.6-24.43 0-43.55 7.45-57.9 21.79-14.34 14.87-21.24 36.11-21.24 63.73v143.41h-66.4V208.7h63.21v36.65c11.16-13.28 24.97-22.84 41.43-29.74 16.47-6.9 35.59-10.1 56.3-10.1Zm371.81 271.42a78.34 78.34 0 0 1-28.15 14.34 130.83 130.83 0 0 1-35.6 4.78c-31.33 0-55.23-7.97-72.23-24.43-17-16.47-25.5-39.84-25.5-71.17V263.94h-46.73v-53.11h46.74v-64.8h66.4v64.8h75.95v53.11h-75.96v134.91c0 13.81 3.19 24.43 10.1 31.34 6.9 7.44 16.46 11.15 29.2 11.15 14.88 0 27.1-3.71 37.19-11.68l18.59 47.27Zm214.05-271.42c35.59 0 64.27 10.63 86.05 31.34 21.77 20.72 32.4 52.05 32.4 92.95v162.53h-66.4V338.3c0-24.96-5.84-43.55-17.53-56.3-11.68-12.22-28.15-18.6-49.92-18.6-24.44 0-43.56 7.45-57.9 21.79-14.34 14.87-21.24 36.11-21.24 63.73v143.41h-66.4V98.23h66.4v143.4c11.15-11.68 24.43-20.71 40.9-27.09 15.93-5.84 33.99-9.03 53.64-9.03Z"
-                    fill="currentColor" />
-                <g fill="currentColor">
-                    <path
-                        d="m29 424.4 188.2-112.95-17.15-45.48 53.75-55.21 67.93-14.64 19.67 24.21-31.32 31.72-27.3 8.6-19.52 20.05 9.56 26.6 19.4 20.6 27.36-7.28 19.47-21.38 42.51-13.47 12.67 28.5-43.87 53.78-73.5 23.27-32.97-36.7L55.06 467.94C46.1 456.41 35.67 440.08 29 424.4Zm543.03-230.25-149.5 40.32c8.24 21.92 10.95 34.8 13.23 49l149.23-40.26c-2.38-15.94-6.65-32.17-12.96-49.06Z" />
-                    <path
-                        d="M51.28 316.13c10.59 125 115.54 223.3 243.27 223.3 96.51 0 180.02-56.12 219.63-137.46l48.61 16.83c-46.78 101.34-149.35 171.75-268.24 171.75C138.6 590.55 10.71 469.38 0 316.13h51.28ZM.78 265.24C15.86 116.36 141.73 0 294.56 0c162.97 0 295.28 132.31 295.28 295.28 0 26.14-3.4 51.49-9.8 75.63l-48.48-16.78a244.28 244.28 0 0 0 7.15-58.85c0-134.75-109.4-244.15-244.15-244.15-124.58 0-227.49 93.5-242.32 214.11H.8Z"
-                        class="ring ring--large" />
-                    <path
-                        d="M293.77 153.17c-78.49.07-142.2 63.83-142.2 142.34 0 78.56 63.79 142.34 142.35 142.34 3.98 0 7.93-.16 11.83-.49l14.22 49.76a194.65 194.65 0 0 1-26.05 1.74c-106.72 0-193.36-86.64-193.36-193.35 0-106.72 86.64-193.35 193.36-193.35 2.64 0 5.28.05 7.9.16l-8.05 50.85Zm58.2-42.13c78.39 24.67 135.3 97.98 135.3 184.47 0 80.07-48.77 148.83-118.2 178.18l-14.17-49.55c48.08-22.85 81.36-71.89 81.36-128.63 0-60.99-38.44-113.07-92.39-133.32l8.1-51.15Z"
-                        class="ring ring--small" />
-                </g>
-            </svg>
-            <div>and</div>
-            <svg viewBox="61.995 278.453 526.958 85.636" style="enable-background:new 0 0 652 652"
-                xmlns="http://www.w3.org/2000/svg" width="2em" height="2em">
-                <path fill="currentColor"
-                    d="M152.6 306.9s23.9-3.8 27.7-15h-36.7V283H63.1l9.9 11.7v12s25-1.3 34.7 6.1c13.3 12.5-14.9 29.3-14.9 29.3L88 358.4c7.6-7.3 22-16.7 48.4-16.3-10 3.2-20.2 8.2-28 16.3h53.4l-5-16.2c-.1 0-38.8-23.1-4.2-35.3z" />
-                <path fill="currentColor"
-                    d="M213.2 346.7c6.2 0 10.7-2 14.6-5.9l-4.3-5.6c-3.1 3.1-6.1 4.2-9.8 4.2-6.3 0-11.7-4.4-11.7-13 0-8 5.3-13.1 12.1-13.1 3.7 0 6.6 1.3 9.1 3.9l4.3-5.8c-3.5-3.5-8.1-5.3-13.7-5.3-11.4 0-19.9 8.3-19.9 20.3.1 12.7 8.4 20.3 19.3 20.3zm57.1-39.8h-7.9v20.5c0 8.6-4.6 12-9.9 12-5.5 0-8.8-3.4-8.8-10.5v-22h-7.9v22.9c0 11.3 5.7 16.9 13.8 16.9 5.6 0 9.9-2.3 12.7-7l.3 6h7.6v-38.8zm20 7.8-.2-7.8h-7.6v38.9h7.9V327c0-10.6 7.8-13 14.3-12.6v-8.1c-4.9 0-10.8 1.5-14.4 8.4zm35.2 32c8.3 0 15.2-4.5 15.2-12.2 0-14.9-22.1-8.9-22.1-17 0-2.7 2.4-4.7 7.3-4.7 4.3 0 7.7 1.6 10.3 4.2l4.2-5.4c-3.4-3.3-8.2-5.6-14.7-5.6-9.2 0-15.1 5.1-15.1 11.8 0 15 22.1 8.2 22.1 17.1 0 3.4-2.9 4.9-7.3 4.9-4.6 0-8.2-1.6-11.7-5.1l-4.6 5.3c3.9 3.9 8.6 6.7 16.4 6.7zm59-20.5c0-12.9-7.5-20.3-18.2-20.3-10.5 0-19.3 7.9-19.3 20.4 0 12.8 7.9 20.5 19.6 20.5 6.7 0 11.8-2 16-6.6l-4.3-5.2c-3.5 3.4-6.9 4.8-11.2 4.8-7 0-11.4-3.9-12.1-11.3h29.3c.2-.9.2-1.5.2-2.3zm-18.2-13.6c5.9 0 9.4 4 10.1 10.1h-21c.9-6.1 5.2-10.1 10.9-10.1zm37.2-5.7v-3.1c0-4.8 2.5-7.2 6.3-7.2 2.3 0 4.1.7 5.8 2.1l3.4-5.8c-2.7-1.9-5.9-3.1-9.8-3.1-8.6 0-13.6 5.4-13.6 14.4v2.8h-6l-1.8 6.9h7.8v32h7.9v-32h13V307h-13zm35.6 39.9c10.7 0 20-7.7 20-20.4 0-13-9.3-20.5-19.9-20.5-10.7 0-20.1 7.6-20.1 20.5 0 12.8 9.5 20.4 20 20.4zm0-7.1c-6.4 0-11.9-5-11.9-13.3 0-8.4 5.7-13.4 12-13.4 6.4 0 11.8 5 11.8 13.3.1 8.4-5.6 13.4-11.9 13.4zm37.3-25-.2-7.8h-7.6v38.9h7.9V327c0-10.6 7.8-13 14.3-12.6v-8.1c-5 0-10.8 1.5-14.4 8.4zm57.4-7.8h-7.6l-.1 6c-2.7-4.4-7.1-7.1-12.9-7.1-10.4 0-17.7 8.9-17.7 20 0 11 6.6 19.9 17.6 19.9 5.8 0 10.2-2.8 13-7.2v5c0 8.3-4.8 11.2-11.9 11.2-3.8 0-7.1-1-10-2.4l-2.4 6.8c3.6 1.8 7.7 2.8 12.6 2.8 11.6 0 19.6-5.7 19.6-18.8v-36.2zm-19.4 31.8c-6.3 0-10.9-5.1-10.9-12.9 0-7.8 5-12.7 11.5-12.7 6.3 0 11 4.6 11 12.7 0 8.2-5.1 12.9-11.6 12.9zm66.4-12.5c0-12.9-7.5-20.3-18.2-20.3-10.5 0-19.3 7.9-19.3 20.4 0 12.8 7.9 20.5 19.6 20.5 6.7 0 11.8-2 16-6.6l-4.3-5.2c-3.5 3.4-6.9 4.8-11.2 4.8-7 0-11.4-3.9-12.1-11.3h29.3c.1-.9.2-1.5.2-2.3zm-18.2-13.6c5.9 0 9.4 4 10.1 10.1h-21c.9-6.1 5.2-10.1 10.9-10.1z" />
-            </svg>
-        </div>
-    </div>
-
-    <div class="card border-primary" id="modOutput">
-        <div class="card-header">
-            <button type="button" class="btn btn-warning" id="modOutputCopy"><i class="bi bi-copy"></i></button>
-            <button type="button" class="btn btn-primary" id="modOutputDownload"><i class="bi bi-download"></i></button>
-            <t id="modOutputTitle">Output</t>
-
-        </div>
-        <div class="card-body">
-            <div id="modOutputProgressDiv" class="progress" role="progressbar" aria-label="Basic example"
-                aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="display: none;">
-                <div id="modOutputProgressBar" class="progress-bar" style="width: 0%"></div>
-            </div>
-            <div class="card-text" id="modOutputText">Insert Modrinth and CurseForge mod page links to get the download
-                link. Don't forget to
-                set the dowload settings</div>
-        </div>
-    </div>
 
     <div id="root"></div>
 
@@ -185,8 +116,6 @@ <h1 class="modal-title fs-5" id="settingsModalTitle">Settings</h1>
     </div>
 
 
-
-
     <script type=module src="app.js"></script>
     <script type="text/javascript" src="lib/jszip.min.js"></script>
     <script type="text/javascript" src="lib/FileSaver.min.js"></script>

diff --git a/modHandler.js b/modHandler.js
@@ -1,4 +1,4 @@
-import { modInput, COLOR, TEXTCOLOR, modOutput, settings, urlsText } from './elements.js';
+import { modInput, COLOR, TEXTCOLOR, modOutput, settings, urlDownloaderElements, menuButtons } from './elements.js';
 import * as Util from './util.js';
 
 let downloadList = [];        
@@ -12,8 +12,21 @@ export function getErrorMessages(){
     return errorMessages;
 }
 
+export async function urlDownloader(){
+    menuButtons.urlDownloader.className = 'nav-link active';
+    menuButtons.search.className = 'nav-link';
+    const response = await fetch('urlDownloader.html', {cache: 'no-store'});
+    root.innerHTML = await response.text(); //TODO: Fix this
+    document.getElementById('CFsvg').innerHTML = 
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.995 278.453 626.958 95.636" style="enable-background:new 0 0 652 652">
+        <path fill="currentColor"
+            d="M152.6 306.9s23.9-3.8 27.7-15h-36.7V283H63.1l9.9 11.7v12s25-1.3 34.7 6.1c13.3 12.5-14.9 29.3-14.9 29.3L88 358.4c7.6-7.3 22-16.7 48.4-16.3-10 3.2-20.2 8.2-28 16.3h53.4l-5-16.2c-.1 0-38.8-23.1-4.2-35.3z" />            <path fill="currentColor" d="M213.2 346.7c6.2 0 10.7-2 14.6-5.9l-4.3-5.6c-3.1 3.1-6.1 4.2-9.8 4.2-6.3 0-11.7-4.4-11.7-13 0-8 5.3-13.1 12.1-13.1 3.7 0 6.6 1.3 9.1 3.9l4.3-5.8c-3.5-3.5-8.1-5.3-13.7-5.3-11.4 0-19.9 8.3-19.9 20.3.1 12.7 8.4 20.3 19.3 20.3zm57.1-39.8h-7.9v20.5c0 8.6-4.6 12-9.9 12-5.5 0-8.8-3.4-8.8-10.5v-22h-7.9v22.9c0 11.3 5.7 16.9 13.8 16.9 5.6 0 9.9-2.3 12.7-7l.3 6h7.6v-38.8zm20 7.8-.2-7.8h-7.6v38.9h7.9V327c0-10.6 7.8-13 14.3-12.6v-8.1c-4.9 0-10.8 1.5-14.4 8.4zm35.2 32c8.3 0 15.2-4.5 15.2-12.2 0-14.9-22.1-8.9-22.1-17 0-2.7 2.4-4.7 7.3-4.7 4.3 0 7.7 1.6 10.3 4.2l4.2-5.4c-3.4-3.3-8.2-5.6-14.7-5.6-9.2 0-15.1 5.1-15.1 11.8 0 15 22.1 8.2 22.1 17.1 0 3.4-2.9 4.9-7.3 4.9-4.6 0-8.2-1.6-11.7-5.1l-4.6 5.3c3.9 3.9 8.6 6.7 16.4 6.7zm59-20.5c0-12.9-7.5-20.3-18.2-20.3-10.5 0-19.3 7.9-19.3 20.4 0 12.8 7.9 20.5 19.6 20.5 6.7 0 11.8-2 16-6.6l-4.3-5.2c-3.5 3.4-6.9 4.8-11.2 4.8-7 0-11.4-3.9-12.1-11.3h29.3c.2-.9.2-1.5.2-2.3zm-18.2-13.6c5.9 0 9.4 4 10.1 10.1h-21c.9-6.1 5.2-10.1 10.9-10.1zm37.2-5.7v-3.1c0-4.8 2.5-7.2 6.3-7.2 2.3 0 4.1.7 5.8 2.1l3.4-5.8c-2.7-1.9-5.9-3.1-9.8-3.1-8.6 0-13.6 5.4-13.6 14.4v2.8h-6l-1.8 6.9h7.8v32h7.9v-32h13V307h-13zm35.6 39.9c10.7 0 20-7.7 20-20.4 0-13-9.3-20.5-19.9-20.5-10.7 0-20.1 7.6-20.1 20.5 0 12.8 9.5 20.4 20 20.4zm0-7.1c-6.4 0-11.9-5-11.9-13.3 0-8.4 5.7-13.4 12-13.4 6.4 0 11.8 5 11.8 13.3.1 8.4-5.6 13.4-11.9 13.4zm37.3-25-.2-7.8h-7.6v38.9h7.9V327c0-10.6 7.8-13 14.3-12.6v-8.1c-5 0-10.8 1.5-14.4 8.4zm57.4-7.8h-7.6l-.1 6c-2.7-4.4-7.1-7.1-12.9-7.1-10.4 0-17.7 8.9-17.7 20 0 11 6.6 19.9 17.6 19.9 5.8 0 10.2-2.8 13-7.2v5c0 8.3-4.8 11.2-11.9 11.2-3.8 0-7.1-1-10-2.4l-2.4 6.8c3.6 1.8 7.7 2.8 12.6 2.8 11.6 0 19.6-5.7 19.6-18.8v-36.2zm-19.4 31.8c-6.3 0-10.9-5.1-10.9-12.9 0-7.8 5-12.7 11.5-12.7 6.3 0 11 4.6 11 12.7 0 8.2-5.1 12.9-11.6 12.9zm66.4-12.5c0-12.9-7.5-20.3-18.2-20.3-10.5 0-19.3 7.9-19.3 20.4 0 12.8 7.9 20.5 19.6 20.5 6.7 0 11.8-2 16-6.6l-4.3-5.2c-3.5 3.4-6.9 4.8-11.2 4.8-7 0-11.4-3.9-12.1-11.3h29.3c.1-.9.2-1.5.2-2.3zm-18.2-13.6c5.9 0 9.4 4 10.1 10.1h-21c.9-6.1 5.2-10.1 10.9-10.1z" />
+    </svg>`;
+    urlDownloaderElements();
+    addEventListener();
+}
 
-export function addEventListener() {
+function addEventListener() {
     modInput.loadButton.addEventListener('click', () => {
         downloadList = [];
         modOutput.copyButton.disabled = true;
@@ -170,7 +183,7 @@ export function addEventListener() {
         });
         Promise.all(promises)
         .then(results => {
-            urlsText.innerHTML = `URLs <br> (${urlCount})`;
+            modInput.urlsText.innerHTML = `URLs <br> (${urlCount})`;
             let combinedResults = '<table class="table table-sm table-hover">';
             let nonErrorResults = results.filter(result => result !== null);
             if (localStorage.getItem('settingsRemoveDupesSwitch') === 'true') {