Skip to main content

Redesigning a local web UI with plain HTML and CSS: Universal Downloader 1.4

A side rail, glass cards, light and dark themes, and a fix for a Windows registry quirk that broke scripts

Updated 2 min readMarkdown
Redesigning a local web UI with plain HTML and CSS: Universal Downloader 1.4

Universal Downloader is a Windows app built on yt-dlp. A Flask server listens on 127.0.0.1 only, and the interface is a normal web page opened in your browser. In 1.4 I redesigned the shell without touching the logic: the only Python change is the version number; the rest is index.html, the help pages and the translations.

Main page

What changed

  • Side rail. Tabs, the download folder, "Support the project", theme, help and language live in a panel on the left. The folder, which used to be on one tab, is now on all of them. On a phone the rail moves to the top and the tabs go in a row.
  • Glass. Translucent cards on a colored background using backdrop-filter: blur(). Browsers without it get solid cards through @supports.
  • Themes. Teal, light and dark.
  • Input bar. Big, with the button inside; a long link or a list of links stretches the field.
  • Download options as tiles across the card.
  • Player. A dark "island" above the field that moves with the page; at the bottom on a phone.
  • Help uses the same palette.
Dark theme Music search

Fix: the registry can break your scripts

Flask serves static files with send_from_directory, and the file type comes from Python's mimetypes, which on Windows reads the registry (HKEY_CLASSES_ROOT\.js, Content Type). On some machines that value is text/plain. The server then sends the script with that type, and since responses carry X-Content-Type-Options: nosniff, the browser refuses to run it. No handlers get attached, so pressing Find just clears the field. The type is now explicit:

resp = send_from_directory(WEB, name, mimetype='text/javascript')

The translations file i18n.js is also embedded in the page, so it no longer depends on a separate script.

Download

An installed copy offers to update itself (release check on GitHub, SHA-256 verification, rollback on failure).

No comments yet. Be the first to comment.