diff --git a/html/webpage/assets/js/dragdrop.js b/html/webpage/assets/js/dragdrop.js
new file mode 100644
index 0000000..a3082cb
--- /dev/null
+++ b/html/webpage/assets/js/dragdrop.js
@@ -0,0 +1,31 @@
+const dropArea = document.getElementById("drop-area");
+const fileInput = document.getElementById("file-input");
+
+['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+ dropArea.addEventListener(eventName, e => e.preventDefault());
+ dropArea.addEventListener(eventName, e => e.stopPropagation());
+});
+
+['dragenter', 'dragover'].forEach(eventName => {
+ dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'));
+});
+
+['dragleave', 'drop'].forEach(eventName => {
+ dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'));
+});
+
+
+dropArea.addEventListener('click', () => fileInput.click());
+
+dropArea.addEventListener('drop', e => {
+ const files = e.dataTransfer.files;
+ handleFiles(files);
+});
+
+fileInput.addEventListener('change', e => {
+ handleFiles(e.target.files);
+});
+
+function handleFiles(files) {
+ console.log("file dropped");
+}
diff --git a/html/webpage/broadcastzones.html b/html/webpage/broadcastzones.html
index 6a656b2..ef34350 100644
--- a/html/webpage/broadcastzones.html
+++ b/html/webpage/broadcastzones.html
@@ -195,9 +195,9 @@
- | No |
- Description |
- IP Address |
+ No |
+ Description |
+ IP Address |
@@ -236,11 +236,11 @@
- | No |
- Description |
- SoundChannel |
- ID |
- BP |
+ No |
+ Description |
+ SoundChannel |
+ ID |
+ BP |
diff --git a/html/webpage/setting.html b/html/webpage/setting.html
index ae89f21..006b5b5 100644
--- a/html/webpage/setting.html
+++ b/html/webpage/setting.html
@@ -80,6 +80,7 @@
+