From a8019c01a4c0ce12e45c3041c499644cf6edf4ed Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Fri, 14 Jun 2024 17:53:35 +0200
Subject: [PATCH] feat(ui): separate CSS and JS into external files

Moved inline CSS from index.ejs to a new style.css file for cleaner structure and maintainability. Extracted embedded JavaScript to index.js to streamline HTML and enhance script manageability.

Benefits:
- Improved readability and organization of HTML
- Easier maintenance and updates for CSS and JS
- Potential for CSS and JS caching, improving load times

No functional changes were made. Refactors existing code for better practices.
---
 public/css/style.css |  60 +++++++++++++++++
 public/js/index.js   |  80 ++++++++++++++++++++++
 views/index.ejs      | 153 +------------------------------------------
 3 files changed, 142 insertions(+), 151 deletions(-)
 create mode 100644 public/css/style.css
 create mode 100644 public/js/index.js

diff --git a/public/css/style.css b/public/css/style.css
new file mode 100644
index 0000000..c85bb20
--- /dev/null
+++ b/public/css/style.css
@@ -0,0 +1,60 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 20px;
+  }
+  h1 {
+    color: #333;
+  }
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+    background: #fff;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  .section {
+    margin-bottom: 20px;
+  }
+  input[type="file"],
+  input[type="text"],
+  input[type="url"] {
+    width: calc(100% - 22px);
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  button {
+    padding: 10px 20px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  button:hover {
+    background-color: #218838;
+  }
+  .progress {
+    width: 100%;
+    background-color: #f3f3f3;
+    border-radius: 4px;
+    margin: 10px 0;
+  }
+  .progress-bar {
+    width: 0;
+    height: 20px;
+    background-color: #28a745;
+    border-radius: 4px;
+    text-align: center;
+    color: white;
+    line-height: 20px;
+  }
+  .result {
+    margin: 10px 0;
+    padding: 10px;
+    background-color: #e9ecef;
+    border-radius: 4px;
+  }
\ No newline at end of file
diff --git a/public/js/index.js b/public/js/index.js
new file mode 100644
index 0000000..b943eb7
--- /dev/null
+++ b/public/js/index.js
@@ -0,0 +1,80 @@
+const client = new WebTorrent();
+
+function uploadFile() {
+  const fileInput = document.getElementById("fileInput");
+  const file = fileInput.files[0];
+  const uploadProgressBar = document.getElementById("uploadProgressBar");
+
+  if (!file) {
+    alert("Please select a file to upload.");
+    return;
+  }
+
+  const opts = {
+    announce: [trackerUrl],
+  };
+
+  client.seed(file, opts, (torrent) => {
+    fetch(`/generate-mnemonic/${torrent.infoHash}`)
+      .then((response) => response.json())
+      .then((data) => {
+        const uploadResult = document.getElementById("uploadResult");
+        uploadResult.innerHTML = `Started sharing file. Share this mnemonic: <strong>${data.mnemonic}</strong>
+        <br>Note that the file will be available for download as long as this page is open.
+        `;
+      });
+
+    torrent.on("upload", () => {
+      const progress = Math.round((torrent.uploaded / torrent.length) * 100);
+      uploadProgressBar.style.width = `${progress}%`;
+      uploadProgressBar.textContent = `${progress}%`;
+    });
+  });
+}
+
+function downloadFile() {
+  const mnemonicInput = document.getElementById("mnemonicInput").value;
+  const downloadProgressBar = document.getElementById("downloadProgressBar");
+
+  if (!mnemonicInput) {
+    alert("Please enter a mnemonic.");
+    return;
+  }
+
+  fetch(`/get-infohash/${mnemonicInput}`)
+    .then((response) => response.json())
+    .then((data) => {
+      const torrentId = data.infoHash;
+
+      const opts = {
+        announce: [trackerUrl],
+      };
+
+      client.add(torrentId, opts, (torrent) => {
+        torrent.files[0].getBlob((err, blob) => {
+          if (err) {
+            const downloadResult = document.getElementById("downloadResult");
+            downloadResult.innerHTML = `Error: ${err.message}`;
+            return;
+          }
+
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = torrent.files[0].name;
+          a.click();
+
+          const downloadResult = document.getElementById("downloadResult");
+          downloadResult.innerHTML = `File downloaded: <strong>${torrent.files[0].name}</strong>`;
+        });
+
+        torrent.on("download", () => {
+          const progress = Math.round(
+            (torrent.downloaded / torrent.length) * 100
+          );
+          downloadProgressBar.style.width = `${progress}%`;
+          downloadProgressBar.textContent = `${progress}%`;
+        });
+      });
+    });
+}
diff --git a/views/index.ejs b/views/index.ejs
index f7531c0..6b10dcf 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -2,68 +2,7 @@
 <html>
   <head>
     <title>Transfer.coffee</title>
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        background-color: #f4f4f4;
-        margin: 0;
-        padding: 20px;
-      }
-      h1 {
-        color: #333;
-      }
-      .container {
-        max-width: 800px;
-        margin: 0 auto;
-        background: #fff;
-        padding: 20px;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-      }
-      .section {
-        margin-bottom: 20px;
-      }
-      input[type="file"],
-      input[type="text"],
-      input[type="url"] {
-        width: calc(100% - 22px);
-        padding: 10px;
-        margin: 10px 0;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-      }
-      button {
-        padding: 10px 20px;
-        background-color: #28a745;
-        color: white;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-      button:hover {
-        background-color: #218838;
-      }
-      .progress {
-        width: 100%;
-        background-color: #f3f3f3;
-        border-radius: 4px;
-        margin: 10px 0;
-      }
-      .progress-bar {
-        width: 0;
-        height: 20px;
-        background-color: #28a745;
-        border-radius: 4px;
-        text-align: center;
-        color: white;
-        line-height: 20px;
-      }
-      .result {
-        margin: 10px 0;
-        padding: 10px;
-        background-color: #e9ecef;
-        border-radius: 4px;
-      }
-    </style>
+    <link rel="stylesheet" href="/css/style.css" />
     <script src="/dist/js/webtorrent.min.js"></script>
   </head>
   <body>
@@ -88,94 +27,6 @@
         <div class="result" id="downloadResult"></div>
       </div>
     </div>
-    <script>
-      const client = new WebTorrent();
-      const trackerUrl = "<%= trackerUrl %>";
-
-      function uploadFile() {
-        const fileInput = document.getElementById("fileInput");
-        const file = fileInput.files[0];
-        const uploadProgressBar = document.getElementById("uploadProgressBar");
-
-        if (!file) {
-          alert("Please select a file to upload.");
-          return;
-        }
-
-        const opts = {
-          announce: [trackerUrl],
-        };
-
-        client.seed(file, opts, (torrent) => {
-          fetch(`/generate-mnemonic/${torrent.infoHash}`)
-            .then((response) => response.json())
-            .then((data) => {
-              const uploadResult = document.getElementById("uploadResult");
-              uploadResult.innerHTML = `Started sharing file. Share this mnemonic: <strong>${data.mnemonic}</strong>
-              <br>Note that the file will be available for download as long as this page is open.
-              `;
-            });
-
-          torrent.on("upload", () => {
-            const progress = Math.round(
-              (torrent.uploaded / torrent.length) * 100
-            );
-            uploadProgressBar.style.width = `${progress}%`;
-            uploadProgressBar.textContent = `${progress}%`;
-          });
-        });
-      }
-
-      function downloadFile() {
-        const mnemonicInput = document.getElementById("mnemonicInput").value;
-        const downloadProgressBar = document.getElementById(
-          "downloadProgressBar"
-        );
-
-        if (!mnemonicInput) {
-          alert("Please enter a mnemonic.");
-          return;
-        }
-
-        fetch(`/get-infohash/${mnemonicInput}`)
-          .then((response) => response.json())
-          .then((data) => {
-            const torrentId = data.infoHash;
-
-            const opts = {
-              announce: [trackerUrl],
-            };
-
-            client.add(torrentId, opts, (torrent) => {
-              torrent.files[0].getBlob((err, blob) => {
-                if (err) {
-                  const downloadResult =
-                    document.getElementById("downloadResult");
-                  downloadResult.innerHTML = `Error: ${err.message}`;
-                  return;
-                }
-
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement("a");
-                a.href = url;
-                a.download = torrent.files[0].name;
-                a.click();
-
-                const downloadResult =
-                  document.getElementById("downloadResult");
-                downloadResult.innerHTML = `File downloaded: <strong>${torrent.files[0].name}</strong>`;
-              });
-
-              torrent.on("download", () => {
-                const progress = Math.round(
-                  (torrent.downloaded / torrent.length) * 100
-                );
-                downloadProgressBar.style.width = `${progress}%`;
-                downloadProgressBar.textContent = `${progress}%`;
-              });
-            });
-          });
-      }
-    </script>
+    <script src="/js/index.js"></script>
   </body>
 </html>