From d12faef76487de35e16855d3f310cda6fad92a42 Mon Sep 17 00:00:00 2001 From: Hong Phuc Date: Wed, 13 May 2026 00:51:58 +0700 Subject: [PATCH] style(gui): apply desktop neo redesign Refresh the GUI templates around the desktop-first neo-brutalist direction so the library, create, background, and settings screens share one visual system. Tested: rtk docker compose run --rm test Tested: Playwright desktop screenshots for /, select mode, /backgrounds, and /settings --- GUI/backgrounds.html | 116 ++++++------- GUI/create.html | 225 +++++++++++++------------ GUI/index.html | 82 +++++----- GUI/layout.html | 381 +++++++++++++++++++++++++++++++++++-------- GUI/settings.html | 225 +++++++++++++------------ 5 files changed, 634 insertions(+), 395 deletions(-) diff --git a/GUI/backgrounds.html b/GUI/backgrounds.html index 29d68a6..fee5842 100644 --- a/GUI/backgrounds.html +++ b/GUI/backgrounds.html @@ -1,22 +1,22 @@ {% extends "layout.html" %} {% block main %} -
+
-

Background Manager

+

Background Manager

- - +
-
@@ -27,23 +27,23 @@
-
-
-

Delete Background

-

Are you sure you want to delete this background video? This action cannot be undone.

+
+

Delete Background

+

Are you sure you want to delete this background video? This action cannot be undone.

- - + +
@@ -51,54 +51,54 @@ -
-

Add Background Video

+
+

Add Background Video

- -
-
- + +
+
+
- +
- +
- -
-
- + +
+
+
- +
- +
- -
-
- + +
+
+
- +
- +
- - + +
- - + +
@@ -122,10 +122,10 @@ const response = await fetch("backgrounds.json"); const data = await response.json(); delete data["__comment"]; - + const container = document.getElementById('backgrounds'); let html = ''; - + Object.entries(data).forEach(([key, value]) => { keys.push(key); youtube_urls.push(value[0]); @@ -133,21 +133,21 @@ const videoId = value[0].includes('?v=') ? value[0].split('?v=')[1] : value[0].split('/').pop(); html += ` -
-
-
-

${h(key)}

-

${h(value[2])}

- +

${h(key)}

+

${h(value[2])}

+
-
@@ -169,7 +169,7 @@ } function searchFilter() { - const query = document.querySelector(".searchFilter").value.toLowerCase(); + const query = document.querySelector(".searchFilter") ? document.querySelector(".searchFilter").value.toLowerCase() : ''; const cards = document.querySelectorAll(".bg-card"); let visibleCount = 0; @@ -203,7 +203,7 @@ let message = ""; if (name === "youtube_uri") { - const regex = /(?:\/|%3D|v=|vi=)([0-9A-z-_]{11})(?:[%#?&]|$)/; + const regex = /(?:\/|%3D|v=|vi=)([0-9A-Za-z_-]{11})(?:[%#?&]|$)/; if (!regex.test(value)) { message = "Invalid YouTube URI"; valid = false; diff --git a/GUI/create.html b/GUI/create.html index 5135be8..5bcbdfd 100644 --- a/GUI/create.html +++ b/GUI/create.html @@ -1,21 +1,21 @@ {% extends "layout.html" %} {% block main %} -
+
-
-
+
+
-
- +
+
-

Create New Short

-

Start the automated video creation pipeline.

+

Create New Short

+

Start the automated video creation pipeline.

@@ -23,26 +23,26 @@
-
- @@ -28,15 +28,14 @@
- + @@ -50,19 +49,19 @@
-
-
-
-

-
@@ -73,17 +72,17 @@ -
+
- -

Delete Video?

+ +

Delete Video?

-

+

- +
- @@ -143,56 +142,55 @@ data.sort((b, a) => a['time'] - b['time']); const container = document.getElementById('videos'); - // Use data-* attributes for arbitrary strings — never embed them in onclick/href container.innerHTML = data.map(v => { const title = checkTitle(v.reddit_title, v.filename); return ` -
-
-

+
+

${h(title)}

-
+
- -
-
- +
+ ${timeSince(v.time)}
@@ -228,7 +226,7 @@ btn.addEventListener('click', () => { navigator.clipboard.writeText(btn.dataset.copy).then(() => { const orig = btn.innerHTML; - btn.innerHTML = ''; + btn.innerHTML = ''; lucide.createIcons(); setTimeout(() => { btn.innerHTML = orig; lucide.createIcons(); }, 2000); }); @@ -344,7 +342,7 @@ } function searchFilter() { - const query = document.querySelector(".searchFilter").value.toLowerCase(); + const query = document.querySelector(".searchFilter") ? document.querySelector(".searchFilter").value.toLowerCase() : ''; const cards = document.querySelectorAll(".video-card"); let visibleCount = 0; @@ -387,4 +385,4 @@ document.addEventListener('DOMContentLoaded', loadVideos); -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/GUI/layout.html b/GUI/layout.html index 6f7eb4b..a0b8722 100644 --- a/GUI/layout.html +++ b/GUI/layout.html @@ -1,5 +1,5 @@ - + @@ -7,70 +7,325 @@ VideoMakerBot - - + + + + + + + + - + + + + - + -
+ +
-
-
- -
- -
- VideoMakerBot - -
-
- - - +
+ + + VideoMakerBot + + + +
+ Library + Backgrounds + Settings + /// + + Create
@@ -78,40 +333,38 @@
+ {% if get_flashed_messages() %}
{% for category, message in get_flashed_messages(with_categories=true) %} -
- +
+ {{ message }}
{% endfor %}
{% endif %} +
{% block main %}{% endblock %}
-