diff --git a/web/assets/js/main.js b/web/assets/js/main.js
index e69de29..2779545 100644
--- a/web/assets/js/main.js
+++ b/web/assets/js/main.js
@@ -0,0 +1,56 @@
+const video_formats = ["webm", "mp4"];
+const audio_formats = ["mp3", "flac", "opus", "ogg", "m4a"];
+const image_formats = ["jpg", "jpeg", "gif", "png", "bmp", "webp"];
+
+const overlay = document.getElementById("overlay");
+let   g_scale = 1;
+let   g_volume = 1.0;
+
+function mousescroll(e) {
+    e.preventDefault();
+    g_scale = Math.min(Math.max(0.25, g_scale + (e.deltaY * -0.001)), 4);
+    e.target.style.transform = `scale(${g_scale})`;
+}
+
+function onvolumechange(e) {
+    g_volume = e.target.volume;
+}
+
+const ext_filter = (ext, pathname) => pathname.toLowerCase().endsWith(ext);
+
+function to_overlay(eltyp, pathname) {
+    const el = document.createElement(eltyp);
+    const el_label = document.createElement("span");
+    el_label.textContent = decodeURI(pathname.substr(pathname.lastIndexOf("/") + 1));
+    if (eltyp !== "audio") el.addEventListener('wheel', mousescroll);
+    if (eltyp !== "img") {
+        el.autoplay = el.controls = true;
+        el.addEventListener("volumechange", onvolumechange);
+        el.volume = g_volume;
+    }
+    el.src = pathname;
+    overlay.appendChild(el);
+    overlay.appendChild(el_label);
+    overlay.style.visibility = "visible";
+}
+
+document.getElementById("overlay").addEventListener("click", e => {
+    e.target.firstChild.remove();
+    e.target.firstChild.remove();
+    e.target.style.visibility = "hidden";
+    g_scale = 1;
+});
+
+const file_links = Array.from(document.getElementsByTagName('tr')).slice(2).filter(e => e.lastChild.innerHTML != "DIR").map(l => l.firstChild.firstChild);
+
+file_links.forEach(f => f.addEventListener('click', e => {
+    const pathname = e.target.pathname;
+    if (video_formats.some(ext => ext_filter(ext, pathname)))
+        to_overlay("video", pathname);
+    else if (audio_formats.some(ext => ext_filter(ext, pathname)))
+        to_overlay("audio", pathname);
+    else if (image_formats.some(ext => ext_filter(ext, pathname)))
+        to_overlay("img", pathname);
+    if (overlay.firstChild != null)
+        e.preventDefault();
+}));