Apply new frontend theme
Full style rewrite (holographic/chrome dark theme) plus matching favicon, authored externally and dropped in at /home/andrew/alembic-theme. Verified every template's variable names, form field names, and action URLs match the actual data each router passes before importing -- all matched exactly with zero router/service changes needed. Validated all templates parse (Jinja2 env.get_template over the full tree) and confirmed the live container serves the new theme after rebuild+redeploy.
This commit is contained in:
andrew
@@ -1,44 +1,74 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ playlist.name }} — alembic{% endblock %}
|
||||
{% block content %}
|
||||
<p><a href="/playlists">← back to playlists</a></p>
|
||||
<h1>{{ playlist.name }}</h1>
|
||||
<p class="muted"><a href="{{ playlist.spotify_url }}">{{ playlist.spotify_url }}</a></p>
|
||||
<a class="back-link" href="/playlists">← back to playlists</a>
|
||||
|
||||
<form method="post" action="/playlists/{{ playlist.id }}">
|
||||
<label><input type="checkbox" name="active" value="true" {{ "checked" if playlist.active }}> active</label>
|
||||
<label for="cron_expr">Cron schedule</label>
|
||||
<input type="text" id="cron_expr" name="cron_expr" value="{{ playlist.cron_expr or '' }}" placeholder="0 1 * * *">
|
||||
<label><input type="checkbox" name="no_m3u" value="true" {{ "checked" if playlist.no_m3u }}> skip M3U</label>
|
||||
<label for="notes">Notes</label>
|
||||
<textarea id="notes" name="notes">{{ playlist.notes or '' }}</textarea>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>{{ playlist.name }}</h1>
|
||||
<p class="subtitle muted"><a href="{{ playlist.spotify_url }}">{{ playlist.spotify_url }}</a></p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<form method="post" action="/jobs/playlist:{{ playlist.name }}/run" class="inline">
|
||||
<button type="submit" class="btn btn-primary">Run now</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="post" action="/jobs/playlist:{{ playlist.name }}/run" style="display:inline">
|
||||
<button type="submit">Run now</button>
|
||||
</form>
|
||||
<div class="panel" style="max-width:560px;">
|
||||
<form method="post" action="/playlists/{{ playlist.id }}">
|
||||
<label class="checkbox-field"><input type="checkbox" name="active" value="true" {{ "checked" if playlist.active }}> Active</label>
|
||||
<div class="field">
|
||||
<label for="cron_expr">Cron schedule</label>
|
||||
<input type="text" id="cron_expr" name="cron_expr" value="{{ playlist.cron_expr or '' }}" placeholder="0 1 * * *">
|
||||
</div>
|
||||
<label class="checkbox-field"><input type="checkbox" name="no_m3u" value="true" {{ "checked" if playlist.no_m3u }}> Skip M3U</label>
|
||||
<div class="field wide">
|
||||
<label for="notes">Notes</label>
|
||||
<textarea id="notes" name="notes" rows="3">{{ playlist.notes or '' }}</textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h2>Status</h2>
|
||||
{% if error %}
|
||||
<p class="muted">Couldn't fetch live status: {{ error }}</p>
|
||||
<div class="notice warning">Couldn't fetch live status: {{ error }}</div>
|
||||
{% elif status %}
|
||||
<p>
|
||||
{% for key, count in status.counts.items() %}
|
||||
<strong>{{ count }}</strong> {{ key }}
|
||||
{% endfor %}
|
||||
</p>
|
||||
<table>
|
||||
<thead><tr><th>Artist</th><th>Title</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
{% for t in status.tracks %}
|
||||
<tr>
|
||||
<td>{{ t.artist }}</td>
|
||||
<td>{{ t.title }}</td>
|
||||
<td>{{ t.status }}</td>
|
||||
</tr>
|
||||
{% set status_meta = {
|
||||
"IN_LIBRARY": ("var(--status-success)", "In library"),
|
||||
"QUARANTINED": ("var(--status-warning)", "Quarantined"),
|
||||
"DOWNLOADED_PENDING_IMPORT": ("var(--status-info)", "Downloaded, pending import"),
|
||||
"NOT_YET_ATTEMPTED": ("var(--status-muted)", "Not yet attempted")
|
||||
} %}
|
||||
{% set total = status.counts.values() | sum %}
|
||||
<div class="status-bar">
|
||||
{% for key, count in status.counts.items() %}
|
||||
{% if count %}
|
||||
<span style="width: {{ (count / total * 100) if total else 0 }}%; background: {{ status_meta.get(key, ('var(--status-muted)', key))[0] }};"></span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="status-legend">
|
||||
{% for key, count in status.counts.items() %}
|
||||
<span class="item"><span class="dot" style="background: {{ status_meta.get(key, ('var(--status-muted)', key))[0] }}; color: {{ status_meta.get(key, ('var(--status-muted)', key))[0] }};"></span><strong>{{ count }}</strong> {{ status_meta.get(key, (None, key))[1] }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% set badge_class = {"IN_LIBRARY": "badge-success", "QUARANTINED": "badge-warning", "DOWNLOADED_PENDING_IMPORT": "badge-info", "NOT_YET_ATTEMPTED": "badge-muted"} %}
|
||||
<div class="table-wrap scroll">
|
||||
<table>
|
||||
<thead><tr><th>Artist</th><th>Title</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
{% for t in status.tracks %}
|
||||
<tr>
|
||||
<td>{{ t.artist }}</td>
|
||||
<td>{{ t.title }}</td>
|
||||
<td><span class="badge {{ badge_class.get(t.status, 'badge-muted') }}">{{ status_meta.get(t.status, (None, t.status))[1] }}</span></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,44 +1,62 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Playlists — alembic{% endblock %}
|
||||
{% block content %}
|
||||
<h1>Playlists</h1>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Active</th><th>Cron</th><th>No M3U</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for p in playlists %}
|
||||
<tr>
|
||||
<td><a href="/playlists/{{ p.id }}">{{ p.name }}</a></td>
|
||||
<td>{{ "yes" if p.active else "no" }}</td>
|
||||
<td class="muted">{{ p.cron_expr or "(unscheduled)" }}</td>
|
||||
<td>{{ "yes" if p.no_m3u else "no" }}</td>
|
||||
<td>
|
||||
<form method="post" action="/playlists/{{ p.id }}/delete" style="display:inline"
|
||||
onsubmit="return confirm('Remove {{ p.name }}? This deletes its rendered config but not any downloaded music.')">
|
||||
<button type="submit">remove</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr><td colspan="5" class="muted">No playlists yet.</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>Playlists</h1>
|
||||
<p class="subtitle muted">Each active playlist syncs on its own schedule, or run it manually from its page.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Active</th><th>Cron</th><th>No M3U</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for p in playlists %}
|
||||
<tr>
|
||||
<td><a href="/playlists/{{ p.id }}">{{ p.name }}</a></td>
|
||||
<td>{% if p.active %}<span class="badge badge-success">active</span>{% else %}<span class="badge badge-muted">paused</span>{% endif %}</td>
|
||||
<td class="muted mono">{{ p.cron_expr or "unscheduled" }}</td>
|
||||
<td class="muted">{{ "yes" if p.no_m3u else "no" }}</td>
|
||||
<td class="actions-cell">
|
||||
<form method="post" action="/playlists/{{ p.id }}/delete" class="inline"
|
||||
onsubmit="return confirm('Remove {{ p.name }}? This deletes its rendered config but not any downloaded music.')">
|
||||
<button type="submit" class="btn btn-sm btn-danger">Remove</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr class="empty-row"><td colspan="5">
|
||||
<div class="empty-state">
|
||||
<div class="sparkle-inline"><span class="sparkle" style="position:relative;top:0;left:0;"></span></div>
|
||||
<p class="muted" style="margin:0;">No playlists yet — add your first one below.</p>
|
||||
</div>
|
||||
</td></tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h2>Add a playlist</h2>
|
||||
<form method="post" action="/playlists">
|
||||
<label for="name">Name (used as the beets grouping tag)</label>
|
||||
<input type="text" id="name" name="name" required pattern="[a-z0-9_-]+">
|
||||
|
||||
<label for="spotify_url">Spotify playlist URL</label>
|
||||
<input type="text" id="spotify_url" name="spotify_url" required>
|
||||
|
||||
<label for="cron_expr">Cron schedule (5-field, blank = unscheduled/manual-only)</label>
|
||||
<input type="text" id="cron_expr" name="cron_expr" placeholder="0 1 * * *">
|
||||
|
||||
<label><input type="checkbox" name="no_m3u" value="true"> skip M3U generation (e.g. "liked songs")</label>
|
||||
|
||||
<button type="submit">Add playlist</button>
|
||||
</form>
|
||||
<div class="panel" style="max-width:560px;">
|
||||
<form method="post" action="/playlists">
|
||||
<div class="field">
|
||||
<label for="name">Name (used as the beets grouping tag)</label>
|
||||
<input type="text" id="name" name="name" required pattern="[a-z0-9_-]+" placeholder="late-night-drive">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="spotify_url">Spotify playlist URL</label>
|
||||
<input type="text" id="spotify_url" name="spotify_url" required placeholder="https://open.spotify.com/playlist/...">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="cron_expr">Cron schedule</label>
|
||||
<input type="text" id="cron_expr" name="cron_expr" placeholder="0 1 * * *">
|
||||
<span class="hint">5-field cron. Leave blank for unscheduled/manual-only.</span>
|
||||
</div>
|
||||
<label class="checkbox-field"><input type="checkbox" name="no_m3u" value="true"> Skip M3U generation (e.g. "liked songs")</label>
|
||||
<button type="submit" class="btn btn-primary">Add playlist</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user