From 771900051347c7efc2fb629e089d07660ab75974 Mon Sep 17 00:00:00 2001
From: Merlin04 <Merlin04@users.noreply.github.com>
Date: Tue, 24 Feb 2026 16:49:19 -0800
Subject: [PATCH 1/6] Migrate frontend to Bulma, remove jQuery

---
 pyproject.toml                            |   7 +-
 src/bepasty/bepasty_xstatic.py            |   5 -
 src/bepasty/static/app/css/style.css      |  56 +----
 src/bepasty/static/app/js/fileuploader.js | 281 +++++++++++-----------
 src/bepasty/static/app/js/utils.js        | 127 +++++-----
 src/bepasty/templates/_layout.html        |  96 ++++----
 src/bepasty/templates/_utils.html         |  62 ++---
 src/bepasty/templates/carousel.html       |  66 +++--
 src/bepasty/templates/display.html        | 127 +++++-----
 src/bepasty/templates/error.html          |  10 +-
 src/bepasty/templates/filelist.html       |   6 +-
 src/bepasty/templates/index.html          | 159 +++++-------
 src/bepasty/templates/qr.html             |  82 +++++--
 13 files changed, 531 insertions(+), 553 deletions(-)

diff --git a/pyproject.toml b/pyproject.toml
index e950ea0b..bd3ecc85 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -35,13 +35,10 @@ dependencies = [
     "Pygments >= 2.12.0",
     "xstatic < 2.0.0",
     "XStatic-asciinema-player <= 2.6.1.1",
-    "xstatic-bootbox >= 5.4.0, <= 5.5.1.1",
-    "xstatic-bootstrap >=4.0.0.0, <= 4.5.3.1",
     "xstatic-font-awesome >= 6.0.0, <= 6.2.1.1",
-    "xstatic-jquery <= 3.5.1.1",
-    "xstatic-jquery-ui <= 1.13.0.1",
-    "xstatic-jquery-file-upload <= 10.31.0.1",
     "xstatic-pygments <= 2.9.0.1",
+    "setuptools>=82.0.0",
+    "pillow>=12.1.1",
 ]
 
 [project.scripts]
diff --git a/src/bepasty/bepasty_xstatic.py b/src/bepasty/bepasty_xstatic.py
index bdda38ab..05e6e167 100644
--- a/src/bepasty/bepasty_xstatic.py
+++ b/src/bepasty/bepasty_xstatic.py
@@ -3,12 +3,7 @@
 # The names below must be package names.
 mod_names = [
     'asciinema_player',
-    'bootbox',
-    'bootstrap',
     'font_awesome',
-    'jquery',
-    'jquery_ui',
-    'jquery_file_upload',
     'pygments',
 ]
 
diff --git a/src/bepasty/static/app/css/style.css b/src/bepasty/static/app/css/style.css
index ca07c310..034bc631 100644
--- a/src/bepasty/static/app/css/style.css
+++ b/src/bepasty/static/app/css/style.css
@@ -11,24 +11,15 @@ body {
     background-color: #fff;
 }
 
-#footer {
-    height: 30px;
-    position: relative;
-}
-
 #formupload {
     height: 400px;
     width: 100%;
     font-family: monospace;
 }
 
-#files p {
+#files a {
     word-break: break-all;
 }
-#files p .break-word {
-    word-break: break-word;
-    font-weight: normal !important;
-}
 
 #filelist {
     height: auto;
@@ -36,16 +27,6 @@ body {
     font-family: monospace;
 }
 
-.fileupload-abort {
-    float: right;
-    margin-left: 10px;
-}
-
-.dropzone {
-    width: 100%;
-    padding: 3em;
-}
-
 #wrapper {
     min-height: 100%;
     margin: 0 auto -30px;
@@ -56,33 +37,11 @@ body {
     padding: 0 15px 60px;
 }
 
-.jumbotron .fa {
-    font-size: 80px;
-}
-
 .jumbotron {
     font-size: 100%;
     text-align: center;
 }
 
-.alert {
-    padding: 5px 10px;
-}
-
-.alert-processing {
-    color: #464646;
-    background-color: #f0f0f0;
-    border-color: #eeeeee;
-}
-
-.alert-processing hr {
-    border-top-color: #e6e6e6;
-}
-
-.alert-processing .alert-link {
-    color: #959595;
-}
-
 /* If data is too wide, show scrollbars */
 .data {
    width: 100%;
@@ -132,7 +91,14 @@ table.highlighttable {
     width: 1px;
 }
 
-/* Autocomplete for modify dialog */
-.ui-autocomplete {
-    z-index: 1065;
+.mr-auto {
+    margin-right: auto;
+}
+
+.filepond--credits {
+    display: none;
+}
+
+.is-text-6-5 {
+    font-size: 0.85rem;
 }
diff --git a/src/bepasty/static/app/js/fileuploader.js b/src/bepasty/static/app/js/fileuploader.js
index 927e7278..755c7429 100644
--- a/src/bepasty/static/app/js/fileuploader.js
+++ b/src/bepasty/static/app/js/fileuploader.js
@@ -1,139 +1,148 @@
-jqXHR = {};
-$(function () {
-    'use strict';
-
-    // Generate human-readable file size
-    function humansize (size) {
-        var suffix = ["B", "KiB", "MiB", "GiB", "TiB", "PiB"],
-            tier = 0;
-
-        while (size >= 1024) {
-            size = size / 1024;
-            tier++;
-        }
+function humansize (size) {
+  const suffix = ["B", "KiB", "MiB", "GiB", "TiB", "PiB"];
+  let tier = 0;
+
+  while (size >= 1024) {
+    size = size / 1024;
+    tier++;
+  }
+
+  return Math.round(size * 10) / 10 + " " + suffix[tier];
+}
+
+function process(fieldName, file, metadata, load, error, progress, abort, transfer, options) {
+  const state = { aborted: false, xhr: null };
+  let uploadUrl = null;
+  let displayUrl = null;
+
+  const controller = new AbortController();
+
+  const doUpload = (url, name, offset) => {
+    if (state.aborted) return;
+
+    const end = Math.min(offset + MAX_BODY_SIZE, file.size);
+    const xhr = new XMLHttpRequest();
+    state.xhr = xhr;
+
+    xhr.open("POST", url, true);
+    xhr.setRequestHeader("Content-Range", `bytes ${offset}-${end - 1}/${file.size}`);
+
+    xhr.upload.onprogress = (e) => progress(true, offset + e.loaded, file.size);
+
+    xhr.onload = () => {
+      state.xhr = null;
+      if (xhr.status < 200 || xhr.status >= 300) {
+        error(`Chunk upload failed: ${xhr.status}`);
+        return;
+      }
+      const result = JSON.parse(xhr.responseText);
+      if (result.files?.[0]?.url) displayUrl = result.files[0].url;
+
+      if (end < file.size) {
+        doUpload(url, name, end);
+      } else {
+        load(displayUrl ?? url);
+        const filesDiv = document.getElementById("files");
+        const alert = document.createElement("div");
+        alert.className = "notification is-success is-light";
+        alert.dataset.name = name;
+        const a = document.createElement("a");
+        a.href = displayUrl ?? url;
+        a.target = "_blank";
+        a.textContent = `${file.name} (${humansize(file.size)})`;
+        alert.appendChild(a);
+        filesDiv.appendChild(alert);
+
+        const fileList = document.getElementById("filelist");
+        fileList.textContent += name + "\n";
+        const fileListForm = document.getElementById("filelist-form");
+        fileListForm.style.display = "";
+      }
+    };
+
+    xhr.onerror = () => { state.xhr = null; error("Network error"); };
+    xhr.onabort = () => { state.xhr = null; };
+
+    const formData = new FormData();
+    formData.append("text", "");
+    formData.append("contenttype", file.type || "application/octet-stream");
+    formData.append("filename", file.name);
+    formData.append("maxlife-value", document.querySelector("input[name=maxlife-value]").value);
+    formData.append("maxlife-unit", document.querySelector("select[name=maxlife-unit]").value);
+    formData.append("file", file.slice(offset, end), file.name);
+
+    xhr.send(formData);
+  };
+
+  fetch(UPLOAD_NEW_URL, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    signal: controller.signal,
+    body: JSON.stringify({
+      filename: file.name,
+      size: file.size,
+      type: file.type,
+      maxlife_unit: document.querySelector("select[name=maxlife-unit]").value,
+      maxlife_value: document.querySelector("input[name=maxlife-value]").value
+    })
+  })
+    .then(res => {
+      if (!res.ok) throw new Error("Failed to initialise upload");
+      return res.json();
+    })
+    .then(({ name, url }) => {
+      uploadUrl = url;
+      doUpload(url, name, 0);
+    })
+    .catch(err => {
+      if (err.name !== "AbortError") error(err.message);
+    });
 
-        return Math.round(size * 10) / 10 + " " + suffix[tier];
+  return {
+    abort: () => {
+      state.aborted = true;
+      controller.abort();
+      if (state.xhr) state.xhr.abort();
+      if (uploadUrl) fetch(`${uploadUrl}/abort`).catch(() => {});
+      abort();
     }
-
-    $('#fileupload')
-        .fileupload({
-            dataType: 'json',
-            autoUpload: true,
-            singleFileUploads: true,
-            maxChunkSize: MAX_BODY_SIZE,
-            maxFileSize: MAX_ALLOWED_FILE_SIZE
-        })
-
-        .on('fileuploadadd', function (e, data) { })
-
-        .on('fileuploadsubmit', function (e, data) {
-            var $this = $(this);
-            var file = data.files[0]
-            // Create new item
-            $.ajax({
-                type: 'POST',
-                url: UPLOAD_NEW_URL,
-                data: JSON.stringify({
-                    filename: file.name,
-                    size: file.size,
-                    type: file.type,
-                    maxlife_unit: $("select[name=maxlife-unit] option:selected").val(),
-                    maxlife_value: $("input[name=maxlife-value]").val()
-                }),
-                contentType: 'application/json',
-                success: function (result) {
-                    data.url = result.url;
-
-                    data.context = $('<div class="alert alert-processing"/>')
-                        .appendTo('#files');
-
-                    var abortButton = $('<button id="' + result.name + '" class="'
-                        + ' fileupload-abort btn btn-danger"/>').text('abort');
-                    abortButton.appendTo(data.context);
-
-                    abortButton.click(function (e) {
-                        jqXHR[result.name].abort();
-                        abortButton.css('display', 'none')
-                    });
-
-                    var fileItem = $('<p/>').text(file.name);
-                    fileItem.append(' <span class="break-word">('
-                        + humansize(file.size)
-                        + ')</span>');
-                    fileItem.appendTo(data.context);
-
-                    var _jqXHR = $this.fileupload('send', data);
-                    _jqXHR.error(function (jqXHR, textStatus, errorThrown) {
-                            // Delete file-upload garbage on the server
-                            $.ajax({
-                                type: 'GET',
-                                url: data.url+'/abort'
-                            });
-                        });
-                    jqXHR[result.name] = _jqXHR;
-                }
-            });
-            return false;
-        })
-
-        .on('fileuploaddone', function (e, data) {
-            $(data.context)
-                .attr('class', 'alert alert-success');
-            $.each(data.result.files, function (index, file) {
-                $(data.context[0].childNodes[1])
-                    .wrapInner($('<a target="_blank" class="alert-link">')
-                        .prop('href', file.url));
-                $('#filelist').append(file.name + "\n");
-                delete jqXHR[file.name];
-                $('#' + file.name).css('display', 'none');
-            });
-            $('#filelist-form').show();
-        })
-
-        .on('fileuploadfail', function (e, data) {
-            $(data.context)
-                .attr('class', 'alert alert-danger')
-                .append('<p><strong>Upload failed!</strong></p>');
-            var name = data.url.split('/').pop();
-            delete jqXHR[name];
-        })
-
-        .on('fileuploadprogressall', function (e, data) {
-            var progress = parseInt(data.loaded / data.total * 100, 10);
-            $('#fileupload-progress').find('.progress-bar').css('width', progress + '%');
-        })
-
-        .on('fileuploadstart', function (e, data) {
-            $('#fileupload-progress').css('visibility', 'visible');
-            $('#fileupload-abort').css('visibility', 'visible')
-        })
-
-        .on('fileuploadstop', function (e, data) {
-            var progressBar = $('#fileupload-progress')
-            progressBar.css('visibility', 'hidden');
-            progressBar.find('.progress-bar').css('width', 0 + '%');
-            $('#fileupload-abort').css('visibility', 'hidden');
-        })
-
-        .on('fileuploadprocessfail', function (e, data) {
-            $(data.context)
-                .attr('class', 'alert alert-danger');
-            var index = data.index,
-                file = data.files[index];
-            $(data.context.children()[index])
-                .append('<br>')
-                .append('<strong>' + file.error + '</strong>');
-        });
-
-    $('#fileupload-abort').click(function (e) {
-        bootbox.confirm("Are you sure you want to abort the upload?", function(result) {
-            if (result == true && jqXHR != null){
-                for (var key in jqXHR) {
-                    jqXHR[key].abort();
-                    $('#' + key).css('display', 'none');
-                }
-            }
-            $('#fileupload-progress').find('.progress-bar').css('width', 0 + '%');
-        });
-    });
+  };
+}
+
+function revert(uniqueFileId, load, error) {
+  const name = uniqueFileId.split("#")[0].slice(1)
+  fetch(`/${name}/+delete`, { method: "POST" })
+    .then(res => {
+      console.log("wahoo");
+      console.log(res);
+      if (!res.ok) throw new Error(`Delete failed: ${res.status}`);
+
+      document.querySelector(`#files div[data-name=${name}]`).remove();
+
+      const fileList = document.getElementById("filelist");
+      fileList.textContent = fileList.textContent
+        .split("\n")
+        .filter(n => n !== name)
+        .join("\n");
+
+      if (!fileList.textContent.trim()) {
+        document.getElementById("filelist-form").style.display = "none";
+      }
+
+      load();
+    })
+    .catch(err => error(err.message));
+}
+
+const fp = FilePond.create(document.getElementById("filepond"), {
+  chunkUploads: true,
+  allowMinimumUploadDuration: false,
+  server: {
+    fetch: null,
+    revert,
+    restore: null,
+    load: null,
+    remove: null,
+    process
+  }
 });
diff --git a/src/bepasty/static/app/js/utils.js b/src/bepasty/static/app/js/utils.js
index 5f5ee51a..89c4e99b 100644
--- a/src/bepasty/static/app/js/utils.js
+++ b/src/bepasty/static/app/js/utils.js
@@ -1,77 +1,44 @@
-$(function () {
-    // Show a confirm dialog box when trying to delete a file
-    $("#del-btn").click(function(){
-        bootbox.confirm("Are you sure you want to delete this file?", function(result) {
-            if (result == true){
-                $("#del-frm").submit();
-            }
-        });
-    });
-
-    // Show a modify dialog box when trying to edit metadata.
-    $("#modify-btn").click(function() {
-        var form_name = "modify-frm"
-        var hidden_name_id = "#hidden-" + form_name
-        // Read form template from HTML
-        var modal_form = $(hidden_name_id).html();
-        var modal_title = $(hidden_name_id).attr('modalTitle');
-        var modal_focus = $(hidden_name_id).attr('modalFocus');
-        // A bit of a hack to avoid implementing this from scratch
-        // using .dialog().
-        var box = bootbox.confirm({
-            title: modal_title,
-            message: modal_form,
-            centerVertical: true,
-            onShown: function(e) {
-                if (modal_focus) {
-                    $(this).find("#" + modal_focus).trigger('focus');
-                }
-                // Support jQuery UI autocomplete
-                contenttype_autocomplete(this)
-            },
-            callback: function(result) {
-                // Please note that this is not called when hitting
-                // the Enter key on the input box.
-                if (result == true) {
-                    $(this).find("#" + form_name).submit();
-                }
-            }
-        });
-    });
+// Show a confirm dialog box when trying to delete a file
+document.getElementById("del-btn").addEventListener("click", () => {
+  if(confirm("Are you sure you want to delete this file?")) {
+    document.getElementById("del-frm").submit();
+  }
+});
 
-    // Bind click event to all line number anchor tags
-    $('td.linenos a').on('click', function(e) {
+// Bind click event to all line number anchor tags
+document.querySelectorAll('td.linenos a').forEach(e => {
+    e.addEventListener("click", function(e) {
         remove_highlights();
-        var $this = $(this);
-        var line_number = $this.text().trim();
+        var line_number = e.innerText.trim();
         highlight_line(line_number);
-    });
+    })
+});
 
-    // Check the value of the hash in the URL on first load
+// Check the value of the hash in the URL on first load
+var line_number = get_hash_line_number();
+if (line_number != null) {
+    highlight_line(line_number);
+}
+
+// Bind the hashchange event
+window.addEventListener('hashchange', function(e){
+    remove_highlights();
     var line_number = get_hash_line_number();
     if (line_number != null) {
         highlight_line(line_number);
     }
-
-    // Bind the hashchange event
-    $(window).bind('hashchange', function(e){
-        remove_highlights();
-        var line_number = get_hash_line_number();
-        if (line_number != null) {
-            highlight_line(line_number);
-        }
-    });
 });
 
 // Highlight one line
 function highlight_line(line_number) {
-    var line = $('#L-' + line_number);
-    $(line).addClass("line-highlight");
+    var line = document.getElementById('L-' + line_number);
+    line.classList.add("line-highlight");
 }
 
 // Remove highlighting from all lines
 function remove_highlights() {
-    $('td.code p').removeClass("line-highlight");
+  document.querySelectorAll('td.code p').forEach(e =>
+    e.classList.remove("line-highlight"));
 }
 
 // Get the line number from the hash if present; otherwise return null
@@ -82,3 +49,47 @@ function get_hash_line_number() {
         }
     return null;
 }
+
+// JS for modals, from Bulma docs: https://bulma.io/documentation/components/modal/
+document.addEventListener('DOMContentLoaded', () => {
+  // Functions to open and close a modal
+  function openModal($el) {
+    $el.classList.add('is-active');
+  }
+
+  function closeModal($el) {
+    $el.classList.remove('is-active');
+  }
+
+  function closeAllModals() {
+    (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+      closeModal($modal);
+    });
+  }
+
+  // Add a click event on buttons to open a specific modal
+  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+    const modal = $trigger.dataset.target;
+    const $target = document.getElementById(modal);
+
+    $trigger.addEventListener('click', () => {
+      openModal($target);
+    });
+  });
+
+  // Add a click event on various child elements to close the parent modal
+  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+    const $target = $close.closest('.modal');
+
+    $close.addEventListener('click', () => {
+      closeModal($target);
+    });
+  });
+
+  // Add a keyboard event to close all modals
+  document.addEventListener('keydown', (event) => {
+    if(event.key === "Escape") {
+      closeAllModals();
+    }
+  });
+});
diff --git a/src/bepasty/templates/_layout.html b/src/bepasty/templates/_layout.html
index 38353b87..57163a98 100644
--- a/src/bepasty/templates/_layout.html
+++ b/src/bepasty/templates/_layout.html
@@ -10,10 +10,10 @@
 
         <title>{% if config.SITENAME %}{{ config.SITENAME }}{% else %}Bepasty{% endif %}{% if page_title %} - {{ page_title }}{% endif %}</title>
 
-        <!-- Bootstrap styles -->
-        <link rel="stylesheet" href="{{ url_for('bepasty.xstatic', name='bootstrap', filename='css/bootstrap.min.css') }}" type="text/css">
-        <!-- jQuery UI styles -->
-        <link rel="stylesheet" href="{{ url_for('bepasty.xstatic', name='jquery_ui', filename='themes/smoothness/jquery-ui.css') }}" type="text/css">
+        <link
+          rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css"
+        >
         <!-- Font Awesome - load only what we need -->
         <link rel="stylesheet" href="{{ url_for('bepasty.xstatic', name='font_awesome', filename='css/fontawesome.min.css') }}">
         <link rel="stylesheet" href="{{ url_for('bepasty.xstatic', name='font_awesome', filename='css/solid.min.css') }}">
@@ -27,53 +27,42 @@
         <div id="wrapper">
             <!-- Begin header -->
             <div id="header" class="pb-3">
-                <nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation">
-                    <div class="container-fluid">
-                        <!-- Brand and toggle get grouped for better mobile display -->
-                        <a class="navbar-brand" href="{{ url_for('bepasty.index') }}">
+                <nav class="navbar is-light" role="navigation">
+                    <div class="navbar-brand">
+                        <a class="navbar-item" href="{{ url_for('bepasty.index') }}">
                             {{ config.SITENAME }}
+                            {% if flaskg.icon_permissions|length > 0 %}
                             <span class="navbar-text small">
                                 (Permissions:{% for permission, permission_icon in flaskg.icon_permissions %} <i class="fas fa-{{ permission_icon }}" title="{{ permission }}"></i>{% endfor %})
                             </span>
+                            {% endif %}
                         </a>
-                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
-                            <span class="navbar-toggler-icon"></span>
-                        </button>
-
-                        <!-- Collect the nav links, forms, and other content for toggling -->
-                        <div class="collapse navbar-collapse" id="navbarHeader">
-                            <ul class="navbar-nav mr-auto">
-                                <li class="nav-item">
-                                    <a class="nav-link" href="https://bepasty-server.readthedocs.io/en/latest/">Documentation</a>
-                                </li>
-                                {% if may(LIST) %}
-                                <li class="nav-item">
-                                    <a class="nav-link" href="{{ url_for('bepasty.filelist') }}">List all items</a>
-                                </li>
-                                {% endif %}
-                            </ul>
+                        <a class="navbar-burger" role="button" aria-label="menu" aria-expanded="false" data-target="navMenu">
+                          <span aria-hidden="true"></span>
+                          <span aria-hidden="true"></span>
+                          <span aria-hidden="true"></span>
+                          <span aria-hidden="true"></span>
+                        </a>
+                    </div>
+                    <div class="navbar-menu" id="navMenu">
+                        <div class="navbar-start">
+                            {% if may(LIST) %}
+                            <a class="navbar-item" href="{{ url_for('bepasty.filelist') }}">List items</a>
+                            {% endif %}
+                        </div>
+                        <div class="navbar-end">
                             {% if flaskg.logged_in %}
-                            <form class="form-inline" role="form" method="post" action="{{ url_for('bepasty.logout') }}">
-                                <div class="form-row">
-                                    <div class="col">
-                                        <input class="btn btn-outline-secondary" type="submit" value="Logout">
-                                    </div>
-                                </div>
+                            <form class="navbar-item" role="form" method="post" action="{{ url_for('bepasty.logout') }}">
+                                <input class="button" type="submit" value="Logout">
                             </form>
                             {% else %}
-                            <form class="form-inline" role="form" method="post" action="{{ url_for('bepasty.login') }}">
-                                <div class="form-row">
-                                    <div class="col">
-                                        <input class="form-control" type="password" name="token" placeholder="Password" autofocus>
-                                    </div>
-                                    <div class="col">
-                                        <button type="submit" class="btn btn-outline-secondary">Login</button>
-                                    </div>
-                                </div>
+                            <form class="navbar-item" role="form" method="post" action="{{ url_for('bepasty.login') }}">
+                                <input class="input" type="password" name="token" placeholder="Password" autofocus>
+                                <button type="submit" class="button">Login</button>
                             </form>
                             {% endif %}
-                        </div><!-- /.navbar-collapse -->
-                    </div><!-- /.container-fluid -->
+                        </div>
+                    </div>
                 </nav>
             </div>
             <!-- /.header -->
@@ -86,19 +75,18 @@
         </div>
         <!-- /.wrapper -->
 
-        <!-- Begin footer -->
-        <div id="footer">
-            <div class="container">
-            </div>
-        </div>
-        <!-- /.footer -->
-
-        <!-- jQuery -->
-        <script src="{{ url_for('bepasty.xstatic', name='jquery', filename='jquery.min.js') }}" type="text/javascript"></script>
-        <!-- jQuery UI -->
-        <script src="{{ url_for('bepasty.xstatic', name='jquery_ui', filename='jquery-ui.min.js') }}" type="text/javascript"></script>
-        <!-- Bootstrap -->
-        <script src="{{ url_for('bepasty.xstatic', name='bootstrap', filename='js/bootstrap.bundle.min.js') }}" type="text/javascript"></script>
+        <script>
+        document.addEventListener('DOMContentLoaded', () => {
+          const navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+          navbarBurgers.forEach( el => {
+            el.addEventListener('click', () => {
+              const target = document.getElementById(el.dataset.target);
+              el.classList.toggle('is-active');
+              target.classList.toggle('is-active');
+            });
+          });
+        });
+        </script>
         {% block extra_script %}{% endblock %}
     </body>
 </html>
diff --git a/src/bepasty/templates/_utils.html b/src/bepasty/templates/_utils.html
index 3e8cfbf3..71af1abf 100644
--- a/src/bepasty/templates/_utils.html
+++ b/src/bepasty/templates/_utils.html
@@ -1,8 +1,8 @@
 {% macro filelist(files) %}
-    <table class="table table-hover">
+    <table class="table is-hoverable">
         <thead>
         <tr>
-            <th class="text-right">
+            <th class="has-text-right">
                 Filename
                 <br />
                 Type
@@ -25,7 +25,7 @@
         <tbody>
             {% for file in files %}
             <tr>
-                <td class="text-right">
+                <td class="has-text-right">
                     <a href="{{ url_for('bepasty.display', name=file['id']) }}">
                         {{ file['filename'] }}
                     </a>
@@ -49,33 +49,41 @@
                     {% endif %}
                 </td>
                 <td>
-                    <div class="btn-group flex-wrap flex-md-nowrap" role="group">
-                        <a href="{{ url_for('bepasty.display', name=file['id']) }}" class="btn btn-sm btn-info" role="button">
-                            Display
-                        </a>
-                        <a href="{{ url_for('bepasty.download', name=file['id']) }}" class="btn btn-sm btn-info" role="button">
-                            Download
-                        </a>
-                        <a href="{{ url_for('bepasty.inline', name=file['id']) }}" class="btn btn-sm btn-info" role="button">
-                            Inline
-                        </a>
+                    <div class="field has-addons">
+                        <p class="control">
+                            <a href="{{ url_for('bepasty.display', name=file['id']) }}" class="button is-small is-info" role="button">
+                                Display
+                            </a>
+                        </p>
+                        <p class="control">
+                            <a href="{{ url_for('bepasty.download', name=file['id']) }}" class="button is-small is-info" role="button">
+                                Download
+                            </a>
+                        </p>
+                        <p class="control">
+                            <a href="{{ url_for('bepasty.inline', name=file['id']) }}" class="button is-small is-info" role="button">
+                                Inline
+                            </a>
+                        </p>
+                    </div>
+                    <div class="field has-addons">
                         {% if may(DELETE) %}
-                            <form action="{{ url_for('bepasty.delete', name=file['id']) }}" method="post" class="btn-group">
-                                <button type="submit" class="btn btn-sm btn-danger">
+                            <form class="control" action="{{ url_for('bepasty.delete', name=file['id']) }}" method="post">
+                                <button type="submit" class="button is-small is-danger">
                                     Delete
                                 </button>
                             </form>
                         {% endif %}
                         {% if may(ADMIN) %}
                         {% if not file['locked'] %}
-                            <form action="{{ url_for('bepasty.lock', name=file['id']) }}" method="post" class="btn-group">
-                                <button type="submit" class="btn btn-sm btn-danger">
+                            <form action="{{ url_for('bepasty.lock', name=file['id']) }}" method="post" class="control">
+                                <button type="submit" class="button is-small is-danger">
                                     Lock
                                 </button>
                             </form>
                         {% else %}
-                            <form action="{{ url_for('bepasty.unlock', name=file['id']) }}" method="post" class="btn-group">
-                                <button type="submit" class="btn btn-sm btn-info">
+                            <form action="{{ url_for('bepasty.unlock', name=file['id']) }}" method="post" class="control">
+                                <button type="submit" class="button is-small is-info">
                                     Unlock
                                 </button>
                             </form>
@@ -90,14 +98,14 @@
 {% endmacro %}
 
 {% macro input_filename(value) -%}
-    <input class="form-control" type="text" id="filename" name="filename" size="40" placeholder="optional download-filename"{% if value is defined %} value="{{ value }}"{% endif %}>
-{%- endmacro %}
-
-{% macro input_contenttype(value) -%}
-    <input class="form-control" type="text" id="contenttype" name="contenttype" size="30" placeholder="Content-Type"{% if value is defined %} value="{{ value }}"{% endif %}>
+    <input class="input" type="text" id="filename" name="filename" size="40" placeholder="optional download filename"{% if value is defined %} value="{{ value }}"{% endif %}>
 {%- endmacro %}
 
-{% macro contenttype_autocomplete(selector, contenttypes) -%}
-    var availableTypes = ["{{ contenttypes | join('","') | safe}}"];
-    {{ selector|safe }}.autocomplete({source: availableTypes});
+{% macro input_contenttype(contenttypes, value) -%}
+    <input class="input" type="text" id="contenttype" list="content-types" name="contenttype" size="30" placeholder="Content-Type"{% if value is defined %} value="{{ value }}"{% endif %}>
+    <datalist id="content-types">
+        {% for contenttype in contenttypes %}
+            <option value="{{ contenttype }}"></option>
+        {% endfor %}
+    </datalist>
 {%- endmacro %}
diff --git a/src/bepasty/templates/carousel.html b/src/bepasty/templates/carousel.html
index 3059cc5d..a1e56396 100644
--- a/src/bepasty/templates/carousel.html
+++ b/src/bepasty/templates/carousel.html
@@ -1,45 +1,39 @@
 {% extends "_layout.html" %}
 
+{% block content %}
+{% for file in files %}
+    <a data-fslightbox href="{{ url_for('bepasty.inline', name=file['id']) }}" class="mb-3 is-block">
+        <img src="{{ url_for('bepasty.inline', name=file['id']) }}" alt="{{ file['filename'] }}">
+    </a>
+{% endfor %}
+{% endblock content %}
+
+
 {% block extra_link %}
 <style>
 /* Carousel sizing and background behavior */
-.carousel .carousel-item {
-  height: 40em;
-}
-.carousel .carousel-item > *:first-child {
-  background-position: 50%;
-  background-repeat: no-repeat;
-  background-size: cover;
-  height: inherit;
-  background-color: black;
+a[data-fslightbox] > img {
+    max-height: 80vh;
+    min-height: 200px;
+    min-width: 200px;
 }
 </style>
+
 {% endblock %}
 
-{% block content %}
-    <div class="carousel slide" id="demo-carousel" data-ride="carousel">
-        <ol class="carousel-indicators">
-            {% for file in files %}
-                <li class="{% if loop.index == 1 %}active{% endif %}" data-target="#demo-carousel" data-slide-to="{{ loop.index }}"></li>
-            {% endfor %}
-        </ol>
-        <div class="carousel-inner rounded">
-            {% for file in files %}
-                <div class="carousel-item{% if loop.index == 1 %} active{% endif %}">
-                    <div style="background-image: url('{{ url_for('bepasty.inline', name=file['id']) }}')"></div>
-                    <div class="carousel-caption">
-                        <h3>{{ file['filename'] }}</h3>
-                    </div>
-                </div>
-            {% endfor %}
-        </div>
-        <a class="carousel-control-prev" href="#demo-carousel" role="button" data-slide="prev">
-            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-            <span class="sr-only">Previous</span>
-        </a>
-        <a class="carousel-control-next" href="#demo-carousel" role="button" data-slide="next">
-            <span class="carousel-control-next-icon" aria-hidden="true"></span>
-            <span class="sr-only">Next</span>
-        </a>
-    </div>
-{% endblock content %}
+{% block extra_script %}
+<script src="https://cdn.jsdelivr.net/npm/fslightbox@3.7.5/index.min.js"></script>
+<script>
+const data = {{ files | tojson }};
+const bp = BiggerPicture({
+  target: document.getElementById("gallery")
+});
+bp.open({
+  items: data.map(d => ({ img: d.url, alt: d.filename })),
+  inline: true,
+  scale: 1,
+  intro: "fadeup",
+  noClose: true
+});
+</script>
+{% endblock %}
diff --git a/src/bepasty/templates/display.html b/src/bepasty/templates/display.html
index a4c51b4d..d950ca97 100644
--- a/src/bepasty/templates/display.html
+++ b/src/bepasty/templates/display.html
@@ -6,77 +6,72 @@
 
 {% block content %}
 <div class="card">
-    <div class="card-header">
-        <h1>
+    <div class="card-header is-flex-direction-column">
+        <h1 class="card-header-title is-size-4">
             {{ item.meta['filename'] }}
         </h1>
-        <div class="btn-group flex-wrap flex-md-nowrap" role="group">
+        <div class="card-header-icon field has-addons pt-0">
             {% if not item.meta['locked'] or may(ADMIN) %}
                 {% if is_list_item %}
-                <a id="carousel-btn" href="{{ url_for('bepasty.carousel', name=name) }}" class="btn btn-info">
-                    <span class="fas fa-play-circle"></span> Carousel
-                </a>
+                <p class="control">
+                    <a id="carousel-btn" href="{{ url_for('bepasty.carousel', name=name) }}" class="button is-info">
+                        <span class="icon">
+                            <i class="fas fa-play-circle"></i>
+                        </span>
+                        <span>Carousel</span>
+                    </a>
+                </p>
                 {% endif %}
-                <a id="qr-btn" href="{{ url_for('bepasty.qr', name=name) }}" class="btn btn-info">
-                    <span class="fas fa-qrcode"></span> QR
-                </a>
-                <a id="download-btn" href="{{ url_for('bepasty.download', name=name) }}" class="btn btn-info" role="button">
-                    <span class="fas fa-download"></span> Download
-                </a>
-                <a id="inline-btn" href="{{ url_for('bepasty.inline', name=name) }}" class="btn btn-info" role="button">
-                    <span class="fas fa-asterisk"></span> Inline
-                </a>
+                <p class="control">
+                    <a id="qr-btn" href="{{ url_for('bepasty.qr', name=name) }}" class="button is-info">
+                        <span class="icon"><i class="fas fa-qrcode"></i></span> <span>QR</span>
+                    </a>
+                </p>
+                <p class="control">
+                    <a id="download-btn" href="{{ url_for('bepasty.download', name=name) }}" class="button is-info" role="button">
+                        <span class="icon"><i class="fas fa-download"></i></span> <span>Download</span>
+                    </a>
+                </p>
+                <p class="control">
+                    <a id="inline-btn" href="{{ url_for('bepasty.inline', name=name) }}" class="button is-info" role="button">
+                        <span class="icon"><i class="fas fa-asterisk"></i></span> <span>Inline</span>
+                    </a>
+                </p>
             {% endif %}
             {% if may(MODIFY) %}
-                <div id="hidden-modify-frm" class="d-none" modalTitle="Modify Metadata" modalFocus="filename">
-                    <!-- Modify form used by utils.js -->
-                    <form id="modify-frm" action="{{ url_for('bepasty.modify', name=name) }}" method="post">
-                        <div class="form-group row">
-                            <label for="filename" class="col-2 form-label">Filename</label>
-                            <div class="col-10">
-                                {{ utils.input_filename(item.meta['filename']) }}
-                            </div>
-                        </div>
-                        <div class="form-group row">
-                            <label for="contenttype" class="col-2 form-label">Type</label>
-                            <div class="col-10">
-                                {{ utils.input_contenttype(item.meta['type']) }}
-                            </div>
-                        </div>
-                        <button type="submit" class="btn btn-primary d-none">Submit</button>
-                    </form>
-                </div>
-                <button id="modify-btn" type="button" class="btn btn-info">
-                    <span class="fas fa-edit"></span> Modify
-                </button>
+                <p class="control">
+                    <button type="button" class="button is-info js-modal-trigger" data-target="modify-modal">
+                        <span class="icon"><i class="fas fa-edit"></i></span> <span>Modify</span>
+                    </button>
+                </p>
             {% endif %}
             {% if may(DELETE) %}
-                <form id="del-frm" action="{{ url_for('bepasty.delete', name=name) }}" method="post" class="btn-group">
+                <form id="del-frm" action="{{ url_for('bepasty.delete', name=name) }}" method="post" class="control">
                     <input type="hidden" name="next" value="{{ url_for('bepasty.index') }}">
-                    <button id="del-btn" type="button" class="btn btn-danger">
-                        <span class="fas fa-times"></span> Delete
+                    <button id="del-btn" type="button" class="button is-danger">
+                        <span class="icon"><i class="fas fa-times"></i></span> <span>Delete</span>
                     </button>
                 </form>
             {% endif %}
             {% if may(ADMIN) %}
             {% if not item.meta['locked'] %}
-                <form id="lock-frm" action="{{ url_for('bepasty.lock', name=name) }}" method="post" class="btn-group">
-                    <button id="lock-btn" type="submit" class="btn btn-danger">
-                        <span class="fas fa-lock"></span> Lock
+                <form id="lock-frm" action="{{ url_for('bepasty.lock', name=name) }}" method="post" class="control">
+                    <button id="lock-btn" type="submit" class="button is-danger">
+                        <span class="icon"><i class="fas fa-lock"></i></span> <span>Lock</span>
                     </button>
                 </form>
             {% else %}
-                <form id="unlock-frm" action="{{ url_for('bepasty.unlock', name=name) }}" method="post" class="btn-group">
-                    <button id="unlock-btn" type="submit" class="btn btn-info">
-                        <span class="fas fa-unlock"></span> Unlock
+                <form id="unlock-frm" action="{{ url_for('bepasty.unlock', name=name) }}" method="post" class="control">
+                    <button id="unlock-btn" type="submit" class="button is-info">
+                        <span class="icon"><i class="fas fa-unlock"></i></span> <span>Unlock</span>
                     </button>
                 </form>
             {% endif %}
             {% endif %}
         </div>
     </div>
-    <div class="card-body">
-        <p>
+    <div class="card-content">
+        <p class="mb-3 has-text-dark is-text-6-5">
         Type: {{ item.meta['type'] }},
         Size: {{ item.meta['size'] }} bytes,
         SHA256: <code>{{ item.meta['hash'] }}</code>.
@@ -95,6 +90,36 @@ <h1>
         </div>
     </div>
 </div>
+
+{% if may(MODIFY) %}
+<div id="modify-modal" class="modal">
+    <div class="modal-background"></div>
+    <form class="modal-card" id="modify-frm" action="{{ url_for('bepasty.modify', name=name) }}" method="post">
+        <header class="modal-card-head">
+            <p class="modal-card-title">Modify metadata</p>
+            <button class="delete" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body">
+            <div class="field">
+                <label for="filename" class="label">Filename</label>
+                <div class="control">
+                    {{ utils.input_filename(item.meta['filename']) }}
+                </div>
+            </div>
+            <div class="field">
+                <label for="contenttype" class="label">Type</label>
+                <div class="control">
+                    {{ utils.input_contenttype(contenttypes, item.meta['type']) }}
+                </div>
+            </div>
+        </section>
+        <footer class="modal-card-foot">
+            <button type="submit" class="button is-primary">Submit</button>
+        </footer>
+    </form>
+</div>
+{% endif %}
+
 {% endblock content %}
 
 {% block extra_link %}
@@ -108,12 +133,4 @@ <h1>
 <script src="{{ url_for('bepasty.xstatic', name='bootbox', filename='bootbox.min.js') }}" type="text/javascript"></script>
 <script src="{{ url_for('bepasty.xstatic', name='asciinema_player', filename='asciinema-player.js') }}" type="text/javascript"></script>
 <script src="{{ url_for('static', filename='app/js/utils.js') }}" type="text/javascript"></script>
-{% if may(MODIFY) %}
-<script>
-    <!-- Function used by utils.js -->
-    function contenttype_autocomplete(modal_box) {
-        {{ utils.contenttype_autocomplete('$(modal_box).find("#contenttype")', contenttypes) }}
-    };
-</script>
-{% endif %}
 {% endblock extra_script %}
diff --git a/src/bepasty/templates/error.html b/src/bepasty/templates/error.html
index e2ba1f65..9c1de6b8 100644
--- a/src/bepasty/templates/error.html
+++ b/src/bepasty/templates/error.html
@@ -2,13 +2,13 @@
 
 {% block content %}
 <div class="card">
-    <div class="card-header">
-        <h1>
+    <header class="card-header">
+        <h1 class="card-header-title">
             {{ heading }}
         </h1>
-    </div>
-    <div class="card-body">
-        <div class="alert alert-danger">
+    </header>
+    <div class="card-content">
+        <div class="notification is-danger is-light">
             {{ body }}
         </div>
     </div>
diff --git a/src/bepasty/templates/filelist.html b/src/bepasty/templates/filelist.html
index 7d440ec1..7837d91a 100644
--- a/src/bepasty/templates/filelist.html
+++ b/src/bepasty/templates/filelist.html
@@ -4,9 +4,5 @@
 {% set page_title = 'All items' %}
 
 {% block content %}
-<div class="row">
-    <div class="col-md-12">
-        {{ utils.filelist(files) }}
-    </div>
-</div>
+{{ utils.filelist(files) }}
 {% endblock content %}
diff --git a/src/bepasty/templates/index.html b/src/bepasty/templates/index.html
index cace9573..a61bf5c4 100644
--- a/src/bepasty/templates/index.html
+++ b/src/bepasty/templates/index.html
@@ -5,143 +5,115 @@
 {% macro maximum_lifetime() -%}
 {% set default_maxlife_value = config.DEFAULT_MAXLIFE_VALUE or 1 %}
 {% set default_maxlife_unit = (config.DEFAULT_MAXLIFE_UNIT or 'MONTHS')|lower %}
-<div class="row">
-    <div class="col-lg-3 form-group">
-        <input class="form-control" name="maxlife-value" type="number" min="1" value="{{ default_maxlife_value }}" /><br>
-    </div>
-    <div class="col-lg-9 form-group">
-        <select class="form-control" name="maxlife-unit" size="1">
-            <option value="months" {{ 'selected' if default_maxlife_unit == 'months' else '' }}>Months</option>
-            <option value="weeks" {{ 'selected' if default_maxlife_unit == 'weeks' else '' }}>Weeks</option>
-            <option value="days" {{ 'selected' if default_maxlife_unit == 'days' else '' }}>Days</option>
-            <option value="hours" {{ 'selected' if default_maxlife_unit == 'hours' else '' }}>Hours</option>
-            <option value="minutes" {{ 'selected' if default_maxlife_unit == 'minutes' else '' }}>Minutes</option>
-            <option value="years" {{ 'selected' if default_maxlife_unit == 'years' else '' }}>Years</option>
-            <option value="forever" {{ 'selected' if default_maxlife_unit == 'forever' else '' }}>Keep Forever</option>
-        </select>
-    </div>
+<div class="field has-addons">
+    <p class="control is-expanded">
+        <input class="input" name="maxlife-value" type="number" min="1" value="{{ default_maxlife_value }}" /><br>
+    </p>
+    <p class="control">
+        <span class="select">
+            <select name="maxlife-unit" size="1">
+                <option value="months" {{ 'selected' if default_maxlife_unit == 'months' else '' }}>Months</option>
+                <option value="weeks" {{ 'selected' if default_maxlife_unit == 'weeks' else '' }}>Weeks</option>
+                <option value="days" {{ 'selected' if default_maxlife_unit == 'days' else '' }}>Days</option>
+                <option value="hours" {{ 'selected' if default_maxlife_unit == 'hours' else '' }}>Hours</option>
+                <option value="minutes" {{ 'selected' if default_maxlife_unit == 'minutes' else '' }}>Minutes</option>
+                <option value="years" {{ 'selected' if default_maxlife_unit == 'years' else '' }}>Years</option>
+                <option value="forever" {{ 'selected' if default_maxlife_unit == 'forever' else '' }}>Keep Forever</option>
+            </select>
+        </span>
+    </p>
 </div>
 {% endmacro %}
 
 {% block content %}
 {% if may(CREATE) %}
-<div class="row">
-    <div class="col-md-8">
+<div class="columns">
+    <div class="column is-8">
         <form action="{{ url_for('bepasty.upload') }}" method="POST" enctype="multipart/form-data">
-            <div class="form-group">
-                <textarea class="form-control" id="formupload" name="text" placeholder="Paste text here..." autofocus></textarea>
+            <div class="mb-3">
+                <textarea class="textarea" id="formupload" name="text" placeholder="Paste text here..." autofocus></textarea>
             </div>
-            <div class="row">
-                <div class="col-3 form-group">
-                    {{ utils.input_contenttype() }}
-                </div>
-                <div class="col-6 form-group">
+            <div class="field is-grouped">
+                <p class="control is-expanded">
+                    {{ utils.input_contenttype(contenttypes) }}
+                </p>
+                <p class="control is-expanded">
                     {{ utils.input_filename() }}
-                </div>
-                <div class="col-3">
-                    <button id="formupload-submit" class="btn btn-primary btn-block">Submit</button>
-                </div>
+                </p>
+                <p class="control">
+                    <button id="formupload-submit" class="button is-primary">Submit</button>
+                </p>
             </div>
             <hr>
-            <label>Maximum lifetime value (choose before dragging or submitting)</label>
-            {{ maximum_lifetime() }}
-            <span class="btn btn-light fileinput-button dropzone">
-                <i class="fas fa-upload"></i>
-                <span>Drag and drop files here — or click to select files</span>
-                <!-- Input for file upload widget -->
-                <input id="fileupload" type="file" class="form-control-file" name="file" multiple style="height: 100%; width: 100%;">
-            </span>
-            <noscript><br><button id="fileupload-submit" class="btn btn-success btn-block">Upload</button></noscript>
+            <div class="field">
+                <label class="label">Maximum lifetime value (choose before dragging or submitting)</label>
+                <div class="field-body">
+                    {{ maximum_lifetime() }}
+                </div>
+            </div>
+            <input type="file" id="filepond" multiple />
+            <noscript><br><button id="fileupload-submit" class="button is-success">Upload</button></noscript>
         </form>
     </div>
-    <div class="col-md-4">
+    <div class="column is-4">
         <!-- item name list assembled here and offered for submission -->
         <form id="filelist-form" style="display: none" action="{{ url_for('bepasty.upload') }}" method="POST" enctype="multipart/form-data">
-            <div class="form-group">
-                <textarea class="form-control" id="filelist" name="text" rows="10" cols="40"></textarea>
+            <div class="mb-3">
+                <textarea class="textarea" id="filelist" name="text" rows="10" cols="40"></textarea>
             </div>
             {{ maximum_lifetime() }}
             <input type="hidden" name="contenttype" value="text/x-bepasty-list">
-            <div class="row">
-                <div class="col-lg-7 form-group">
-                    <input class="form-control" type="text" id="filelist-filename" name="filename" size="23" placeholder="optional list-name">
-                </div>
-                <div class="col-lg-5">
-                    <button class="btn btn-success btn-block text-nowrap">Create List</button>
-                </div>
+            <div class="field has-addons">
+                <p class="control is-expanded">
+                    <input class="input" type="text" id="filelist-filename" name="filename" size="23" placeholder="optional list-name">
+                </p>
+                <p class="control">
+                    <button class="button is-success">Create List</button>
+                </p>
             </div>
         </form>
-        <div class="d-flex pt-3 pb-3 align-items-center">
-            <!-- The progress bar -->
-            <div class="col-lg-9 pl-0 pr-0">
-                <div id="fileupload-progress" class="progress" style="visibility: hidden">
-                    <div class="progress-bar progress-bar-striped active" role="progressbar"></div>
-                </div>
-            </div>
-            <div class="col-lg-3">
-                <button id="fileupload-abort" class="btn btn-danger" style="visibility: hidden">Abort</button>
-            </div>
-        </div>
         <!-- Uploaded files -->
         <div id="files" class="files"></div>
     </div>
 </div>
 
 {% else %}
-<div class="pb-2 mt-4 mb-2 border-bottom">
-    <h1>bepasty, the Binary File Upload Site</h1>
-</div>
+<section class="section">
+    <h1 class="title">bepasty</h1>
+    <h2 class="subtitle">the binary file upload site</h2>
+</section>
 <div class="jumbotron">
-    <div class="row">
-        <div class="col-md-3">
-            <span class="far fa-thumbs-up"></span>
+    <div class="columns">
+        <div class="column">
+            <span class="icon is-large"><i class="far fa-2x fa-thumbs-up"></i></span>
             <h2>Free and Nice</h2>
             <p>
                 A pastebin for <em>all</em> the stuff,<br>
                 not just for text.
             </p>
         </div>
-        <div class="col-md-6">
-            <span class="fas fa-eye"></span>
+        <div class="column">
+            <span class="icon is-large"><i class="fas fa-2x fa-eye"></i></span>
             <h2>Free and Open Source</h2>
             <p>
                 Bepasty is free and open source software.<br>
                 <a href="https://github.com/bepasty/">Bepasty project on GitHub</a>
             </p>
         </div>
-        <div class="col-md-3">
-            <span class="far fa-heart"></span>
-            <h2>Awesome Code</h2>
-            <p>
-                Powered by <a href="http://python.org">Python</a> and
-                <a href="http://flask.pocoo.org/">Flask</a>.
-            </p>
-        </div>
     </div>
 </div>
 {% endif %}
 {% endblock content %}
 
 {% block extra_link %}
-<!-- fileinput-button styles -->
-<link rel="stylesheet" href="{{ url_for('bepasty.xstatic', name='jquery_file_upload', filename='css/jquery.fileupload.css') }}" type="text/css">
-<!-- File upload UI styles -->
-<link rel="stylesheet" href="{{ url_for('bepasty.xstatic', name='jquery_file_upload', filename='css/jquery.fileupload-ui.css') }}" type="text/css">
+{% if may(CREATE) %}
+<link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
+{% endif %}
 {% endblock %}
 
 {% block extra_script %}
-<!-- jQuery UI widget -->
-<script src="{{ url_for('bepasty.xstatic', name='jquery_file_upload', filename='js/vendor/jquery.ui.widget.js') }}" type="text/javascript"></script>
-<!-- iframe transport for browser without XHR support -->
-<script src="{{ url_for('bepasty.xstatic', name='jquery_file_upload', filename='js/jquery.iframe-transport.js') }}" type="text/javascript"></script>
-<!-- Basic file upload -->
-<script src="{{ url_for('bepasty.xstatic', name='jquery_file_upload', filename='js/jquery.fileupload.js') }}" type="text/javascript"></script>
-<!-- file upload progress bar -->
-<script src="{{ url_for('bepasty.xstatic', name='jquery_file_upload', filename='js/jquery.fileupload-process.js') }}" type="text/javascript"></script>
-<!-- file upload validation -->
-<script src="{{ url_for('bepasty.xstatic', name='jquery_file_upload', filename='js/jquery.fileupload-validate.js') }}" type="text/javascript"></script>
-<!-- QuestionBox -->
-<script src="{{ url_for('bepasty.xstatic', name='bootbox', filename='bootbox.min.js') }}" type="text/javascript"></script>
+{% if may(CREATE) %}
+<script src="https://unpkg.com/filepond@^4/dist/filepond.js"></script>
 <!-- fileuploader -->
 <script type="application/javascript">
     MAX_ALLOWED_FILE_SIZE = {{ config.MAX_ALLOWED_FILE_SIZE }};
@@ -149,10 +121,5 @@ <h2>Awesome Code</h2>
     UPLOAD_NEW_URL = "{{ url_for('bepasty.upload_new') }}";
 </script>
 <script src="{{ url_for('static', filename='app/js/fileuploader.js') }}" type="text/javascript"></script>
-
-<script>
-    $(function() {
-        {{ utils.contenttype_autocomplete('$("#contenttype")', contenttypes) }}
-    });
-</script>
+{% endif %}
 {% endblock %}
diff --git a/src/bepasty/templates/qr.html b/src/bepasty/templates/qr.html
index 4db5f50f..aa5da0f2 100644
--- a/src/bepasty/templates/qr.html
+++ b/src/bepasty/templates/qr.html
@@ -3,6 +3,16 @@
 {% block extra_link %}
     <script src="{{ url_for('static', filename='app/js/qrcode.js') }}" type="text/javascript"></script>
 
+    <style>
+    .field-label {
+        display: flex;
+        align-items: center;
+    }
+    .field-label label {
+        flex: 1;
+    }
+    </style>
+
     <script>
 
         // Code based on BorgBackup's paperkey.html (written by https://github.com/textshell, BSD licensed),
@@ -72,41 +82,61 @@
 
 {% block content %}
     <div class="card">
-        <div class="card-header">
-            <form>
-                <div class="form-group row">
-                    <label class="col-md-3 col-form-label text-md-right text-nowrap" for="text">Content:</label>
-                    <div class="col-md-9">
-                        <input class="form-control" id="text" placeholder="https://example.org/" size="80"
-                               value="{{ text }}">
+        <div class="card-content has-background-light">
+            <div>
+                <div class="field is-horizontal">
+                    <div class="field-label">
+                        <label class="label" for="text">Content:</label>
+                    </div>
+                    <div class="field-body">
+                        <div class="field">
+                            <div class="control">
+                                <input class="input" id="text" placeholder="https://example.org/" size="80"
+                                       value="{{ text }}">
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div class="form-group row">
-                    <label class="col-md-3 col-form-label text-md-right text-nowrap" for="errorCorrectionLevel">Error correction:</label>
-                    <div class="col-md-2">
-                        <select class="form-control" id="errorCorrectionLevel" name="e">
-                            <option value="L">7% (L)</option>
-                            <option value="M">15% (M)</option>
-                            <option value="Q">25% (Q)</option>
-                            <option value="H" selected="selected">30% (H)</option>
-                        </select>
+                <div class="field is-horizontal">
+                    <div class="field-label">
+                        <label class="label" for="errorCorrectionLevel">Error correction:</label>
                     </div>
-                    <label class="col-md-1 col-form-label text-md-right text-nowrap" for="qrsize">Size:</label>
-                    <div class="col-md-6">
-                        <input type="range" class="form-control" id="qrsize" min="45" max="500" value="100">
+                    <div class="field-body">
+                        <div class="field is-flex-grow-0">
+                            <div class="control">
+                                <div class="select">
+                                    <select id="errorCorrectionLevel" name="e">
+                                        <option value="L">7% (L)</option>
+                                        <option value="M">15% (M)</option>
+                                        <option value="Q">25% (Q)</option>
+                                        <option value="H" selected="selected">30% (H)</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="field is-horizontal">
+                            <div class="field-label">
+                                <label class="label" for="qrsize">Size:</label>
+                            </div>
+                            <div class="field-body">
+                                <div class="field is-flex">
+                                    <div class="control is-flex is-flex-grow-1">
+                                        <input class="is-flex-grow-1" type="range" id="qrsize" min="45" max="500" value="100">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </form>
+            </div>
 
-            <div class="text-right">
-                <button type="button" class="btn btn-primary" onclick="update()">Update</button>
+            <div class="is-flex is-justify-content-end">
+                <button type="button" class="button is-primary" onclick="update()">Update</button>
             </div>
         </div>
 
-        <div class="card-body">
-            <div class="text-center">
-                <div id="qr"></div>
-            </div>
+        <div class="card-image">
+            <div id="qr" class="is-flex is-justify-content-center"></div>
         </div>
     </div>
 {% endblock %}

From adde4796caa7c30d5e22538166c07c33e6bc5a36 Mon Sep 17 00:00:00 2001
From: Merlin04 <Merlin04@users.noreply.github.com>
Date: Tue, 24 Feb 2026 16:50:28 -0800
Subject: [PATCH 2/6] Fix accidental pyproject.toml change

---
 pyproject.toml | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/pyproject.toml b/pyproject.toml
index bd3ecc85..f2eebb6e 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -36,9 +36,7 @@ dependencies = [
     "xstatic < 2.0.0",
     "XStatic-asciinema-player <= 2.6.1.1",
     "xstatic-font-awesome >= 6.0.0, <= 6.2.1.1",
-    "xstatic-pygments <= 2.9.0.1",
-    "setuptools>=82.0.0",
-    "pillow>=12.1.1",
+    "xstatic-pygments <= 2.9.0.1"
 ]
 
 [project.scripts]

From 35ace98f30fc33a600f9852bf9fcfba40f1f355b Mon Sep 17 00:00:00 2001
From: Merlin04 <Merlin04@users.noreply.github.com>
Date: Tue, 24 Feb 2026 23:33:34 -0800
Subject: [PATCH 3/6] Add copy URLs feature

---
 src/bepasty/static/app/js/fileuploader.js |  27 ++++-
 src/bepasty/templates/index.html          | 135 +++++++++++++++++++---
 2 files changed, 142 insertions(+), 20 deletions(-)

diff --git a/src/bepasty/static/app/js/fileuploader.js b/src/bepasty/static/app/js/fileuploader.js
index 755c7429..f317df77 100644
--- a/src/bepasty/static/app/js/fileuploader.js
+++ b/src/bepasty/static/app/js/fileuploader.js
@@ -57,6 +57,17 @@ function process(fieldName, file, metadata, load, error, progress, abort, transf
         fileList.textContent += name + "\n";
         const fileListForm = document.getElementById("filelist-form");
         fileListForm.style.display = "";
+
+        const previewBody = document.getElementById("tab-copy-preview-body");
+        const inlineBody = document.getElementById("tab-copy-inline-body");
+        const urlEl = document.createElement("span");
+        urlEl.dataset.name = name;
+        urlEl.append(window.location + name, document.createElement("br"));
+        previewBody.appendChild(urlEl);
+        const urlInlineEl = document.createElement("span");
+        urlInlineEl.dataset.name = name;
+        urlInlineEl.append(urlEl.innerText + "/+inline", document.createElement("br"));
+        inlineBody.appendChild(urlInlineEl);
       }
     };
 
@@ -113,11 +124,9 @@ function revert(uniqueFileId, load, error) {
   const name = uniqueFileId.split("#")[0].slice(1)
   fetch(`/${name}/+delete`, { method: "POST" })
     .then(res => {
-      console.log("wahoo");
-      console.log(res);
       if (!res.ok) throw new Error(`Delete failed: ${res.status}`);
 
-      document.querySelector(`#files div[data-name=${name}]`).remove();
+      document.querySelectorAll(`#right-panel [data-name=${name}]`).forEach(v=>v.remove());
 
       const fileList = document.getElementById("filelist");
       fileList.textContent = fileList.textContent
@@ -146,3 +155,15 @@ const fp = FilePond.create(document.getElementById("filepond"), {
     process
   }
 });
+
+document.querySelectorAll("#tab-copy-body code").forEach(el => {
+  let t;
+  el.addEventListener("click", async _ => {
+    await navigator.clipboard.writeText(el.innerText);
+    el.classList.add("copied");
+    if (t) window.clearTimeout(t);
+    t = setTimeout(() => {
+      el.classList.remove("copied");
+    }, 1500);
+  });
+});
diff --git a/src/bepasty/templates/index.html b/src/bepasty/templates/index.html
index a61bf5c4..13de7e4e 100644
--- a/src/bepasty/templates/index.html
+++ b/src/bepasty/templates/index.html
@@ -55,25 +55,63 @@
             <noscript><br><button id="fileupload-submit" class="button is-success">Upload</button></noscript>
         </form>
     </div>
-    <div class="column is-4">
-        <!-- item name list assembled here and offered for submission -->
-        <form id="filelist-form" style="display: none" action="{{ url_for('bepasty.upload') }}" method="POST" enctype="multipart/form-data">
-            <div class="mb-3">
-                <textarea class="textarea" id="filelist" name="text" rows="10" cols="40"></textarea>
+    <div id="right-panel" class="column is-4">
+        <div id="filelist-form" style="display: none">
+            <div class="tabs is-boxed">
+                <ul>
+                    <li>
+                        <label>
+                            <input id="tab-list" type="radio" name="tabs" checked>
+                            <a>Create list</a>
+                        </label>
+                    </li>
+                    <li>
+                        <label>
+                            <input id="tab-copy" type="radio" name="tabs">
+                            <a>Copy URLs</a>
+                        </label>
+                    </li>
+                </ul>
             </div>
-            {{ maximum_lifetime() }}
-            <input type="hidden" name="contenttype" value="text/x-bepasty-list">
-            <div class="field has-addons">
-                <p class="control is-expanded">
-                    <input class="input" type="text" id="filelist-filename" name="filename" size="23" placeholder="optional list-name">
-                </p>
-                <p class="control">
-                    <button class="button is-success">Create List</button>
-                </p>
+            <!-- item name list assembled here and offered for submission -->
+            <form id="tab-list-body" action="{{ url_for('bepasty.upload') }}" method="POST" enctype="multipart/form-data">
+                <div class="mb-3">
+                    <textarea class="textarea" id="filelist" name="text" rows="10" cols="40"></textarea>
+                </div>
+                {{ maximum_lifetime() }}
+                <input type="hidden" name="contenttype" value="text/x-bepasty-list">
+                <div class="field has-addons">
+                    <p class="control is-expanded">
+                        <input class="input" type="text" id="filelist-filename" name="filename" size="23" placeholder="optional list-name">
+                    </p>
+                    <p class="control">
+                        <button class="button is-success">Create List</button>
+                    </p>
+                </div>
+            </form>
+            <div id="tab-copy-body">
+                <div class="tabs is-small mb-0">
+                    <ul>
+                        <li>
+                            <label>
+                                <input id="tab-inline" type="radio" name="copy-type" checked>
+                                <a>Inline</a>
+                            </label>
+                        </li>
+                        <li>
+                            <label>
+                                <input id="tab-preview" type="radio" name="copy-type">
+                                <a>Preview</a>
+                            </label>
+                        </li>
+                    </ul>
+                </div>
+                <code id="tab-copy-inline-body"></code>
+                <code id="tab-copy-preview-body"></code>
             </div>
-        </form>
-        <!-- Uploaded files -->
-        <div id="files" class="files"></div>
+            <!-- Uploaded files -->
+            <div id="files" class="files mt-5"></div>
+        </div>
     </div>
 </div>
 
@@ -108,6 +146,69 @@ <h2>Free and Open Source</h2>
 {% block extra_link %}
 {% if may(CREATE) %}
 <link href="https://unpkg.com/filepond@^4/dist/filepond.css" rel="stylesheet" />
+<style>
+#tab-copy-body {
+    margin-top: -1rem;
+}
+
+#tab-copy-body code {
+    display: block;
+    cursor: pointer;
+    position: relative;
+    padding-top: 1.25em;
+    border-radius: 0 0 0.5em 0.5em;
+}
+
+#tab-copy-body code:hover {
+    background-color: var(--bulma-background-hover);
+}
+
+#tab-copy-body code::before {
+    content: "Copy";
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: var(--bulma-body-color);
+    background-color: rgba(0 0 0 / 0.1);
+    border-radius: 0 0 0 0.5em;
+    padding: 0 0.5em;
+    font-family: var(--bulma-family-primary);
+    font-size: 0.8em;
+}
+
+#tab-copy-body code.copied::before {
+    content: "Copied";
+}
+
+#right-panel:has(#tab-list:not(:checked)) #tab-list-body,
+#right-panel:has(#tab-copy:not(:checked)) #tab-copy-body,
+#tab-copy-body:has(#tab-inline:not(:checked)) #tab-copy-inline-body,
+#tab-copy-body:has(#tab-preview:not(:checked)) #tab-copy-preview-body {
+  display: none;
+}
+
+.tabs input {
+    opacity: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+.tabs a {
+    transition: none;
+}
+
+.tabs label:has(input:checked) a {
+    border-bottom-color: var(--bulma-tabs-link-active-border-bottom-color);
+    color: var(--bulma-tabs-link-active-color);
+}
+
+.tabs.is-boxed label:has(input:checked) a {
+    background-color: var(--bulma-tabs-boxed-link-active-background-color) !important;
+    border-color: var(--bulma-tabs-boxed-link-active-border-color) !important;
+    border-bottom-color: var(--bulma-tabs-boxed-link-active-border-bottom-color) !important;
+    color: var(--bulma-tabs-link-active-color);
+}
+</style>
 {% endif %}
 {% endblock %}
 

From ff57d37622b89a9faa9290f7a3798865a769b3f7 Mon Sep 17 00:00:00 2001
From: Merlin04 <Merlin04@users.noreply.github.com>
Date: Wed, 25 Feb 2026 23:33:22 -0800
Subject: [PATCH 4/6] Fix dark theme

---
 src/bepasty/static/app/css/style.css | 17 ++++++++++++-----
 src/bepasty/templates/_layout.html   |  2 +-
 src/bepasty/templates/display.html   |  2 +-
 src/bepasty/templates/index.html     |  8 ++++++++
 src/bepasty/templates/qr.html        |  8 ++++++++
 5 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/bepasty/static/app/css/style.css b/src/bepasty/static/app/css/style.css
index 034bc631..fdd7a893 100644
--- a/src/bepasty/static/app/css/style.css
+++ b/src/bepasty/static/app/css/style.css
@@ -8,7 +8,6 @@ body {
     margin: 0;
     -webkit-font-smoothing: antialiased;
     font-size: 100%;
-    background-color: #fff;
 }
 
 #formupload {
@@ -95,10 +94,18 @@ table.highlighttable {
     margin-right: auto;
 }
 
-.filepond--credits {
-    display: none;
-}
-
 .is-text-6-5 {
     font-size: 0.85rem;
 }
+
+#header .navbar {
+    --bulma-navbar-background-color: var(--bulma-light);
+}
+.has-text-deemph {
+    color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));
+}
+@media (prefers-color-scheme:dark) {
+    #header .navbar {
+        --bulma-navbar-background-color: var(--bulma-dark);
+    }
+}
diff --git a/src/bepasty/templates/_layout.html b/src/bepasty/templates/_layout.html
index 57163a98..cd3bd8c7 100644
--- a/src/bepasty/templates/_layout.html
+++ b/src/bepasty/templates/_layout.html
@@ -27,7 +27,7 @@
         <div id="wrapper">
             <!-- Begin header -->
             <div id="header" class="pb-3">
-                <nav class="navbar is-light" role="navigation">
+                <nav class="navbar" role="navigation">
                     <div class="navbar-brand">
                         <a class="navbar-item" href="{{ url_for('bepasty.index') }}">
                             {{ config.SITENAME }}
diff --git a/src/bepasty/templates/display.html b/src/bepasty/templates/display.html
index d950ca97..68c9de40 100644
--- a/src/bepasty/templates/display.html
+++ b/src/bepasty/templates/display.html
@@ -71,7 +71,7 @@ <h1 class="card-header-title is-size-4">
         </div>
     </div>
     <div class="card-content">
-        <p class="mb-3 has-text-dark is-text-6-5">
+        <p class="mb-3 has-text-deemph is-text-6-5">
         Type: {{ item.meta['type'] }},
         Size: {{ item.meta['size'] }} bytes,
         SHA256: <code>{{ item.meta['hash'] }}</code>.
diff --git a/src/bepasty/templates/index.html b/src/bepasty/templates/index.html
index 13de7e4e..d0ea740e 100644
--- a/src/bepasty/templates/index.html
+++ b/src/bepasty/templates/index.html
@@ -208,6 +208,14 @@ <h2>Free and Open Source</h2>
     border-bottom-color: var(--bulma-tabs-boxed-link-active-border-bottom-color) !important;
     color: var(--bulma-tabs-link-active-color);
 }
+
+.filepond--credits {
+    display: none;
+}
+
+.filepond--panel-root {
+    background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));
+}
 </style>
 {% endif %}
 {% endblock %}
diff --git a/src/bepasty/templates/qr.html b/src/bepasty/templates/qr.html
index aa5da0f2..752aa269 100644
--- a/src/bepasty/templates/qr.html
+++ b/src/bepasty/templates/qr.html
@@ -11,6 +11,14 @@
     .field-label label {
         flex: 1;
     }
+    @media (prefers-color-scheme:dark) {
+        .card-content.has-background-light {
+            background-color: var(--bulma-dark) !important;
+        }
+        #qr svg {
+            filter: invert();
+        }
+    }
     </style>
 
     <script>

From 3e5bc04f5686e2ee1908ddc75cebef10af0bf6d4 Mon Sep 17 00:00:00 2001
From: Merlin04 <Merlin04@users.noreply.github.com>
Date: Fri, 27 Feb 2026 15:48:35 -0800
Subject: [PATCH 5/6] Add dark mode support for pygments

---
 src/bepasty/static/app/css/style.css | 12 ++++++++++++
 src/bepasty/templates/display.html   |  3 ++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/bepasty/static/app/css/style.css b/src/bepasty/static/app/css/style.css
index fdd7a893..e63c1c39 100644
--- a/src/bepasty/static/app/css/style.css
+++ b/src/bepasty/static/app/css/style.css
@@ -85,6 +85,18 @@ table.highlighttable {
     border-left: 1px solid #ccc;
 }
 
+@media (prefers-color-scheme: dark) {
+    .line-highlight {
+        background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 15%);
+    }
+    table.highlighttable {
+        border: 1px solid var(--bulma-dark);
+    }
+    .highlight pre {
+        border-left: 1px solid var(--bulma-dark);
+    }
+}
+
 /* Set minimal width and let the contents push the block width */
 .linenos {
     width: 1px;
diff --git a/src/bepasty/templates/display.html b/src/bepasty/templates/display.html
index 68c9de40..c0014422 100644
--- a/src/bepasty/templates/display.html
+++ b/src/bepasty/templates/display.html
@@ -124,7 +124,8 @@ <h1 class="card-header-title is-size-4">
 
 {% block extra_link %}
 <!-- Pygments styles -->
-<link rel="stylesheet" href="{{ url_for('bepasty.xstatic', name='pygments', filename='css/colorful.css') }}" type="text/css">
+<link rel="stylesheet" href="{{ url_for('bepasty.xstatic', name='pygments', filename='css/monokai.css') }}" media="(prefers-color-scheme: dark)">
+<link rel="stylesheet" href="{{ url_for('bepasty.xstatic', name='pygments', filename='css/colorful.css') }}" media="not (prefers-color-scheme: dark)">
 <!-- asciinema styles -->
 <link rel="stylesheet" href="{{ url_for('bepasty.xstatic', name='asciinema_player', filename='asciinema-player.css') }}" type="text/css">
 {% endblock %}

From 4781beba41cebd0e3e3534576ece30c6b620c16e Mon Sep 17 00:00:00 2001
From: Merlin04 <Merlin04@users.noreply.github.com>
Date: Sat, 28 Feb 2026 21:04:39 -0800
Subject: [PATCH 6/6] Remove lingering bootbox reference

---
 src/bepasty/templates/display.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/bepasty/templates/display.html b/src/bepasty/templates/display.html
index c0014422..c52eea91 100644
--- a/src/bepasty/templates/display.html
+++ b/src/bepasty/templates/display.html
@@ -131,7 +131,6 @@ <h1 class="card-header-title is-size-4">
 {% endblock %}
 
 {% block extra_script %}
-<script src="{{ url_for('bepasty.xstatic', name='bootbox', filename='bootbox.min.js') }}" type="text/javascript"></script>
 <script src="{{ url_for('bepasty.xstatic', name='asciinema_player', filename='asciinema-player.js') }}" type="text/javascript"></script>
 <script src="{{ url_for('static', filename='app/js/utils.js') }}" type="text/javascript"></script>
 {% endblock extra_script %}