From aa8e1d1701251f5fcad8ce0c147c28fd8539613f Mon Sep 17 00:00:00 2001 From: Karl Date: Fri, 18 Jul 2025 13:56:38 +0100 Subject: [PATCH] refactor(ui): implement base template and shared CSS Introduce a `base.html` template to establish a common structure for all pages using Jinja2 template inheritance. This eliminates redundant HTML boilerplate across multiple files. Additionally, common CSS rules have been extracted from individual templates and consolidated into a single `static/css/main.css` file. All pages now link to this shared stylesheet. This refactoring significantly reduces code duplication, improves maintainability, and ensures a consistent user interface. --- static/css/main.css | 51 ++++++ templates/base.html | 20 ++ templates/create_image.html | 354 +++++++++++++++++------------------- templates/gallery.html | 76 ++------ templates/image_queued.html | 28 +-- templates/index.html | 86 ++------- templates/login.html | 28 +-- templates/settings.html | 56 ++---- 8 files changed, 296 insertions(+), 403 deletions(-) create mode 100644 static/css/main.css create mode 100644 templates/base.html diff --git a/static/css/main.css b/static/css/main.css new file mode 100644 index 0000000..ed7b33c --- /dev/null +++ b/static/css/main.css @@ -0,0 +1,51 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: black; + color: white; + font-family: sans-serif; + padding: 2rem; +} + +.button-link { + background: #333; + color: white; + text-decoration: none; + padding: 10px 20px; + border-radius: 8px; + font-size: 16px; + cursor: pointer; + transition: background 0.3s; + display: inline-block; + text-align: center; + border: none; +} + +.button-link:hover { + background: #555; +} + +.version { + position: fixed; + bottom: 8px; + right: 12px; + color: #666; + font-size: 12px; + font-family: monospace; + user-select: none; + opacity: 0.6; +} + +.version a { + color: inherit; + text-decoration: none; + cursor: pointer; +} + +.version a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/templates/base.html b/templates/base.html new file mode 100644 index 0000000..ebc5998 --- /dev/null +++ b/templates/base.html @@ -0,0 +1,20 @@ + + + + + + {% block title %}AI Image Frame{% endblock %} + + {% block head %}{% endblock %} + + + {% block content %}{% endblock %} + + +
+ v{{ version }} +
+ + {% block scripts %}{% endblock %} + + \ No newline at end of file diff --git a/templates/create_image.html b/templates/create_image.html index 3c01f9c..f779476 100644 --- a/templates/create_image.html +++ b/templates/create_image.html @@ -1,219 +1,199 @@ - - +{% extends "base.html" %} - - - - Create An Image - +{% endblock %} - /* ---------- spinner ---------- */ - #spinner-overlay { - position: fixed; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - background: rgba(0, 0, 0, 0.6); - visibility: hidden; - z-index: 1000; - } +{% block content %} +

Create An Image

- .spinner { - width: 50px; - height: 50px; - border: 6px solid #555; - border-top-color: white; - border-radius: 50%; - animation: spin 0.8s linear infinite; - } + - @keyframes spin { - to { - transform: rotate(360deg); - } - } +
+ - @media (max-width: 600px) { - body { - min-height: 100dvh; - height: auto; - justify-content: flex-start; - padding-top: 40px; - } + - .button-group { - flex-direction: column; - align-items: stretch; - width: 100%; - } + - button, - select { - width: 100%; - } + - textarea { - height: 150px; - } - } - - + +
- -

Create An Image

+
+ +
+{% endblock %} - +{% block scripts %} + - - - \ No newline at end of file + .catch(error => { + overlay.style.visibility = 'hidden'; + alert("Error requesting random prompt: " + error); + }); + } + +{% endblock %} \ No newline at end of file diff --git a/templates/gallery.html b/templates/gallery.html index 9e987da..d0388e5 100644 --- a/templates/gallery.html +++ b/templates/gallery.html @@ -1,24 +1,9 @@ - - +{% extends "base.html" %} - - - - Image Archive +{% block title %}Image Archive{% endblock %} + +{% block head %} - +{% endblock %} - +{% block content %} Home

Image Archive

- - +{% endblock %} - +{% block scripts %} - - - \ No newline at end of file +{% endblock %} \ No newline at end of file diff --git a/templates/image_queued.html b/templates/image_queued.html index 9c8eed5..fa30ea0 100644 --- a/templates/image_queued.html +++ b/templates/image_queued.html @@ -1,25 +1,15 @@ - - - - - - Image Created +{% extends "base.html" %} + +{% block title %}Image Created{% endblock %} + +{% block head %} - - +{% endblock %} + +{% block content %}
Image will be made with {{ model }} using prompt:
{{ prompt }}
- - +{% endblock %} diff --git a/templates/index.html b/templates/index.html index 29c7a2a..41a61aa 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,32 +1,20 @@ - - +{% extends "base.html" %} - - - - AI Image of the Day +{% block title %}AI Image of the Day{% endblock %} + +{% block head %} - - +{% endblock %} - +{% block content %} {% if image %}
Latest Image @@ -156,11 +97,12 @@ {% else %}

No images found

{% endif %} +{% endblock %} - -
- v{{ version }} -
- - - \ No newline at end of file +{% block scripts %} + +{% endblock %} \ No newline at end of file diff --git a/templates/login.html b/templates/login.html index 9a52559..ae8a5de 100644 --- a/templates/login.html +++ b/templates/login.html @@ -1,25 +1,15 @@ - - - - - - Login +{% extends "base.html" %} + +{% block title %}Login{% endblock %} + +{% block head %} - - +{% endblock %} + +{% block content %}
Please enter the password to continue:
@@ -69,5 +60,4 @@
- - +{% endblock %} diff --git a/templates/settings.html b/templates/settings.html index bdc538f..b5fdbcf 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -1,21 +1,10 @@ - - +{% extends "base.html" %} - - - - Config Editor +{% block title %}Config Editor{% endblock %} + +{% block head %} - - - +{% endblock %} +{% block content %}

Topics

@@ -186,7 +157,4 @@
Back to Home
- - - - \ No newline at end of file +{% endblock %} \ No newline at end of file