Jens/VacatureRadar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: verfijn UX en borg Unraid deployment
deploy / deploy (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Jens
2026-07-26 02:26:45 +02:00
parent 6c09d16a02
commit eea74f97ef
21 changed files with 1440 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/components/radar_illustration.html
+14
View File
@@ -0,0 +1,14 @@
<div class="radar-illustration" data-radar-illustration aria-hidden="true">
<svg viewBox="0 0 320 320" focusable="false">
<defs>
<radialGradient id="radar-glow" cx="50%" cy="50%" r="50%"><stop offset="0" stop-color="currentColor" stop-opacity=".16" /><stop offset="1" stop-color="currentColor" stop-opacity="0" /></radialGradient>
<linearGradient id="radar-sweep" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="currentColor" stop-opacity=".55" /><stop offset="1" stop-color="currentColor" stop-opacity="0" /></linearGradient>
</defs>
<circle class="radar-illustration-glow" cx="160" cy="160" r="150" fill="url(#radar-glow)" />
<g class="radar-illustration-grid" fill="none"><circle cx="160" cy="160" r="118" /><circle cx="160" cy="160" r="82" /><circle cx="160" cy="160" r="45" /><path d="M42 160h236M160 42v236" /></g>
<path class="radar-illustration-sweep" d="M160 160V42a118 118 0 0 1 83.4 34.6Z" fill="url(#radar-sweep)" />
<g class="radar-illustration-signals"><circle cx="224" cy="101" r="5" /><circle cx="103" cy="184" r="4" /><circle cx="201" cy="222" r="3" /></g>
<circle class="radar-illustration-core" cx="160" cy="160" r="7" />
</svg>
<span class="radar-illustration-orbit orbit-one"></span><span class="radar-illustration-orbit orbit-two"></span>
</div>
templates/profiles/list.html
+19 -1
View File
@@ -1,3 +1,21 @@
{% extends "base.html" %}
{% block title %}Zoekprofiel · VacatureRadar{% endblock %}
{% block content %}<header class="cockpit-heading"><div><p class="eyebrow">Persoonlijke radar</p><h1>Zoekprofiel</h1><p>Je harde grenzen blijven deterministisch; ervaringsduur is alleen context en nooit een scorefactor.</p></div></header><div class="profile-index-grid">{% for profile in profiles %}<article class="profile-index-card {% if profile.is_active %}strong-match{% endif %}"><div class="profile-index-head"><span class="source-icon"><svg class="icon"><use href="#icon-profile"></use></svg></span><span class="pill {% if profile.is_active %}pill-success{% endif %}">{% if profile.is_active %}Live{% else %}Pauze{% endif %}</span></div><h2>{{ profile.name }}</h2><p class="muted">{{ profile.desired_titles|slice:":3"|join:", "|default:"Nog geen rollen geselecteerd" }}</p><dl class="intel-facts"><div><dt>Postcode</dt><dd>{{ profile.home_postal_code|default:"—" }}</dd></div><div><dt>Radius</dt><dd>{{ profile.max_distance_km }} km</dd></div><div><dt>Skills</dt><dd>{{ profile.desired_skills|length }}</dd></div><div><dt>Versie</dt><dd>{{ profile.version }}</dd></div></dl><div class="page-actions"><a class="button button-primary" href="{% url 'profiles:edit' profile.pk %}">Radar configureren</a>{% if not profile.is_active %}<form method="post" action="{% url 'profiles:activate' profile.pk %}">{% csrf_token %}<button class="button button-ghost" type="submit">Activeren</button></form>{% endif %}</div></article>{% empty %}<div class="empty-state"><h2>Geen profiel beschikbaar</h2><p>Initialiseer het persoonlijke profiel via de bootstrapopdracht.</p></div>{% endfor %}</div>{% endblock %}
{% block content %}
<header class="cockpit-heading"><div><p class="eyebrow">Persoonlijke radar</p><h1>Zoekprofiel</h1><p>Je harde grenzen blijven deterministisch; ervaringsduur is alleen context en nooit een scorefactor.</p></div></header>
<div class="profile-index-grid">
{% for profile in profiles %}
<article class="profile-index-card {% if profile.is_active %}strong-match{% endif %}">
<div class="profile-index-content">
<div class="profile-index-head"><span class="source-icon"><svg class="icon"><use href="#icon-profile"></use></svg></span><span class="pill {% if profile.is_active %}pill-success{% endif %}">{% if profile.is_active %}Live{% else %}Pauze{% endif %}</span></div>
<h2>{{ profile.name }}</h2>
<p class="muted">{{ profile.desired_titles|slice:":3"|join:", "|default:"Nog geen rollen geselecteerd" }}</p>
<dl class="intel-facts"><div><dt>Postcode</dt><dd>{{ profile.home_postal_code|default:"—" }}</dd></div><div><dt>Radius</dt><dd>{{ profile.max_distance_km }} km</dd></div><div><dt>Skills</dt><dd>{{ profile.desired_skills|length }}</dd></div><div><dt>Versie</dt><dd>{{ profile.version }}</dd></div></dl>
<div class="page-actions"><a class="button button-primary" href="{% url 'profiles:edit' profile.pk %}">Radar configureren</a>{% if not profile.is_active %}<form method="post" action="{% url 'profiles:activate' profile.pk %}">{% csrf_token %}<button class="button button-ghost" type="submit">Activeren</button></form>{% endif %}</div>
</div>
<div class="profile-index-art" title="Interactieve visualisatie van je persoonlijke radar">{% include "components/radar_illustration.html" %}</div>
</article>
{% empty %}
<div class="empty-state illustrated-empty">{% include "components/radar_illustration.html" %}<h2>Geen profiel beschikbaar</h2><p>Initialiseer het persoonlijke profiel via de bootstrapopdracht.</p></div>
{% endfor %}
</div>
{% endblock %}
templates/registration/login.html
+1 -27
View File
@@ -118,32 +118,6 @@
</footer>
</main>
<script>
(function () {
var toggle = document.querySelector('[data-pw-toggle]');
if (toggle) {
var pw = document.getElementById('id_password');
var eye = toggle.querySelector('[data-eye]');
var eyeOff = toggle.querySelector('[data-eye-off]');
toggle.addEventListener('click', function () {
var show = pw.type === 'password';
pw.type = show ? 'text' : 'password';
toggle.setAttribute('aria-label', show ? 'Wachtwoord verbergen' : 'Wachtwoord tonen');
if (eye && eyeOff) { eye.hidden = show; eyeOff.hidden = !show; }
});
}
var form = document.querySelector('form.auth-form');
if (form) {
form.addEventListener('submit', function () {
var btn = form.querySelector('[data-submit]');
if (!btn || btn.dataset.busy) return;
if (typeof form.checkValidity === 'function' && !form.checkValidity()) return;
btn.dataset.busy = '1';
var label = btn.querySelector('[data-label]');
if (label) label.textContent = 'Bezig met inloggen…';
});
}
})();
</script>
<script src="{% static 'js/login.js' %}?v={{ app_version }}" defer></script>
</body>
</html>