major styling pass, artist list, and import processing improvements

app/templates/artist_gallery.html

@@ -3,7 +3,7 @@
 {% block title %}{{ artist }}'s Gallery{% endblock %}
 
 {% block content %}
-  <h1 style="text-align:center; margin-top: 1rem;">{{ artist }}</h2>
+  <h1 style="text-align:center; margin-top: 1rem;">{{ artist }}</h1>
 
   <!-- Pagination Controls -->
   <div class="pagination-container">
@@ -21,23 +21,21 @@
   </div>
 
   <!-- Gallery Grid -->
-    <div class="gallery-grid">
-    {% for image in images %}
+  <div class="gallery-grid">
+    {% for image in images.items %}
     <div class="gallery-item">
-        <div class="gallery-thumb img-clickable"
-            data-full="{{ url_for('static', filename=image.filepath) }}"
-            style="background-image: url('{{ url_for('static', filename=image.filepath) }}');" 
-            data-full="{{ url_for('static', filename=image.filepath) }}"
-            data-filename="{{ image.filename }}">
-        </div>
-        <a href="{{ url_for('main.artist_gallery', artist_name=image.artist) }}">{{ image.artist }}</a>
-        <span class="image-date">
-            {{ image.taken_at or image.imported_at | datetimeformat }}
-        </span>
+      <div class="gallery-thumb img-clickable"
+           data-full="{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '')) }}"
+           style="background-image: url('{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '')) }}');"
+           data-filename="{{ image.filename }}">
+      </div>
+      <a href="{{ url_for('main.artist_gallery', artist_name=image.artist) }}">{{ image.artist }}</a>
+      <span class="image-date">
+          {{ (image.taken_at or image.imported_at) | datetimeformat }}
+      </span>
     </div>
     {% endfor %}
-    </div>
-
+  </div>
 
   <!-- Pagination Controls -->
   <div class="pagination-container">

app/templates/artist_list.html

@@ -0,0 +1,23 @@
+{% extends "layout.html" %}
+{% block title %}Artists{% endblock %}
+
+{% block content %}
+<h1 style="text-align:center; margin-top: 1rem;">Artists</h1>
+
+<div class="artist-grid">
+  {% for artist in artist_data %}
+    <a href="{{ url_for('main.artist_gallery', artist_name=artist.name) }}" class="artist-card-link">
+      <div class="artist-card">
+        <h3>{{ artist.name }}</h3>
+        <div class="artist-preview">
+          {% for image in artist.images %}
+            <div class="artist-thumb"
+                 style="background-image: url('{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '')) }}');">
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+    </a>
+  {% endfor %}
+</div>
+{% endblock %}

app/templates/gallery.html

@@ -8,18 +8,15 @@
   {% for image in images %}
   <div class="gallery-item">
     <div class="gallery-thumb img-clickable"
-        data-full="{{ url_for('static', filename=image.filepath) }}"
-        style="background-image: url('{{ url_for('static', filename=image.filepath) }}');"
-        data-full="{{ url_for('static', filename=image.filepath) }}"
+        data-full="{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '')) }}"
+        style="background-image: url('{{ url_for('main.serve_image', filename=image.filepath | replace('/images/', '')) }}');"
         data-filename="{{ image.filename }}">
     </div>
     <a href="{{ url_for('main.artist_gallery', artist_name=image.artist) }}">{{ image.artist }}</a>
     <span class="image-date">
-        {{ image.taken_at or image.imported_at | datetimeformat }}
+        {{ (image.taken_at or image.imported_at) | datetimeformat }}
     </span>
   </div>
   {% endfor %}
 </div>
-
-
 {% endblock %}

app/templates/index.html

@@ -1,8 +1,14 @@
 {% extends "layout.html" %}
-
-{% block title %}Home{% endblock %}
+{% block title %}Welcome{% endblock %}
 
 {% block content %}
-<h1>Welcome to the Flask Template App!</h1>
-<p>This is the index page.</p>
+<div class="index-hero" style="background-image: url('{{ background_url }}');">
+  <div class="index-overlay">
+    <div class="index-message">
+      <h1>Private Image Repository</h1>
+      <p>This is a private image collection. You must register for access to browse and contribute.</p>
+      <a href="{{ url_for('auth.register') }}" class="btn primary-btn">Register</a>
+    </div>
+  </div>
+</div>
 {% endblock %}

app/templates/layout.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Flask Template App</title>
+  <title>ImageRepo - {% block title %}{% endblock %}</title>
   <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
@@ -18,6 +18,7 @@
     {% endif %}
 
     {% if current_user.is_authenticated %}
+      <a class="nav-button" href="{{ url_for('main.artist_list') }}">Artists</a>
       <a class="nav-button" href="{{ url_for('auth.logout') }}">Logout</a>
     {% else %}
       <a class="nav-button" href="{{ url_for('auth.login') }}">Login</a>

app/templates/login.html

@@ -1,10 +1,30 @@
 {% extends "layout.html" %}
+
+{% block title %}Login{% endblock %}
+
 {% block content %}
-<h2>Login</h2>
-<form method="POST">
+<div class="form-container">
+  <h2>Login</h2>
+  <form method="POST" class="form-card">
     {{ form.hidden_tag() }}
-    {{ form.email(size=32, placeholder=form.email.label.text) }}<br>
-    {{ form.password(size=32, placeholder=form.password.label.text) }}<br>
-    {{ form.submit() }}
-</form>
+
+    <div class="form-group">
+      {{ form.email.label(class="form-label") }}
+      {{ form.email(class="form-input", placeholder=form.email.label.text) }}
+    </div>
+
+    <div class="form-group">
+      {{ form.password.label(class="form-label") }}
+      {{ form.password(class="form-input", placeholder=form.password.label.text) }}
+    </div>
+
+    <div class="form-actions">
+      {{ form.submit(class="form-button") }}
+    </div>
+  </form>
+
+  <p class="form-footer-text">
+    Don’t have an account? <a href="{{ url_for('auth.register') }}">Register here</a>.
+  </p>
+</div>
 {% endblock %}

app/templates/register.html

@@ -1,39 +1,52 @@
 {% extends "layout.html" %}
+
+{% block title %}Register{% endblock %}
+
 {% block content %}
-<h2>Register</h2>
-<form method="POST">
+<div class="form-container">
+  <h2>Register</h2>
+  <form method="POST" class="form-card">
     {{ form.hidden_tag() }}
 
-    <p>
-        {{ form.username(size=32, placeholder=form.username.label.text) }}
-        {% for error in form.username.errors %}
-            <span class="error">{{ error }}</span>
-        {% endfor %}
-    </p>
+    <div class="form-group">
+      {{ form.username.label(class="form-label") }}
+      {{ form.username(class="form-input", placeholder=form.username.label.text) }}
+      {% for error in form.username.errors %}
+        <span class="error">{{ error }}</span>
+      {% endfor %}
+    </div>
 
-    <p>
-        {{ form.email(size=32, placeholder=form.email.label.text) }}
-        {% for error in form.email.errors %}
-            <span class="error">{{ error }}</span>
-        {% endfor %}
-    </p>
+    <div class="form-group">
+      {{ form.email.label(class="form-label") }}
+      {{ form.email(class="form-input", placeholder=form.email.label.text) }}
+      {% for error in form.email.errors %}
+        <span class="error">{{ error }}</span>
+      {% endfor %}
+    </div>
 
-    <p>
-        {{ form.password(size=32, placeholder=form.password.label.text) }}
-        {% for error in form.password.errors %}
-            <span class="error">{{ error }}</span>
-        {% endfor %}
-    </p>
+    <div class="form-group">
+      {{ form.password.label(class="form-label") }}
+      {{ form.password(class="form-input", placeholder=form.password.label.text) }}
+      {% for error in form.password.errors %}
+        <span class="error">{{ error }}</span>
+      {% endfor %}
+    </div>
 
-    <p>
-        {{ form.confirm_password(size=32, placeholder=form.confirm_password.label.text) }}
-        {% for error in form.confirm_password.errors %}
-            <span class="error">{{ error }}</span>
-        {% endfor %}
-    </p>
+    <div class="form-group">
+      {{ form.confirm_password.label(class="form-label") }}
+      {{ form.confirm_password(class="form-input", placeholder=form.confirm_password.label.text) }}
+      {% for error in form.confirm_password.errors %}
+        <span class="error">{{ error }}</span>
+      {% endfor %}
+    </div>
 
-    <p>
-        {{ form.submit() }}
-    </p>
-</form>
+    <div class="form-actions">
+      {{ form.submit(class="form-button") }}
+    </div>
+  </form>
+
+  <p class="form-footer-text">
+    Already have an account? <a href="{{ url_for('auth.login') }}">Login here</a>.
+  </p>
+</div>
 {% endblock %}

app/templates/settings.html

@@ -1,25 +1,25 @@
 {% extends "layout.html" %}
-
 {% block title %}Settings{% endblock %}
 
 {% block content %}
-  <div class="container mt-4">
-    <h2>Image Management</h2>
-    <p>Use the options below to manage image data.</p>
+<h1 style="text-align:center; margin-top: 1rem;">Settings</h1>
 
-    <div class="mb-3">
-      <a href="{{ url_for('main.trigger_image_import') }}" class="btn btn-primary">
-        📥 Import Images
-      </a>
-    </div>
+<div class="settings-container">
+  <div class="settings-section">
+    <h2>Admin Actions</h2>
+    <div class="settings-actions">
+      <form action="{{ url_for('main.trigger_image_import') }}" method="get">
+        <button type="submit" class="btn primary-btn">Trigger Image Import</button>
+      </form>
 
-    <div class="mb-3">
-      <form method="POST" action="{{ url_for('main.reset_db') }}"
-            onsubmit="return confirm('Are you sure you want to delete all image records?');">
-        <button type="submit" class="btn btn-danger">
-          🗑️ Reset Database
-        </button>
+      <form action="{{ url_for('main.reset_db') }}" method="post" onsubmit="return confirm('Are you sure you want to delete all image records? This action cannot be undone.');">
+        <button type="submit" class="btn danger-btn">Reset Image Database</button>
       </form>
     </div>
   </div>
+
+  <div class="settings-info">
+    <p>Use these tools to manually trigger an import or reset the image database. Resetting the database does not delete the actual image files.</p>
+  </div>
+</div>
 {% endblock %}