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

feat: complete premium visual audit and brand refinement
deploy / deploy (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Jens
2026-07-26 05:03:53 +02:00
parent 2a32e9fec9
commit fd5b50b8fe
31 changed files with 325 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/base.html
+9 -5
View File
@@ -7,9 +7,9 @@
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#071327" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#f4f7f7" media="(prefers-color-scheme: light)">
<meta name="application-name" content="VacatureRadar · {{ app_brand_name }}">
<meta name="application-name" content="VacatureRadar">
<title>{% block title %}{{ app_name }}{% endblock %}</title>
<link rel="icon" href="{% static 'img/itworx-app-icon.png' %}?v={{ app_version }}" type="image/png" sizes="512x512">
<link rel="icon" href="{% static 'favicon.svg' %}?v={{ app_version }}" type="image/svg+xml" sizes="any">
<link rel="stylesheet" href="{% static 'css/app.css' %}?v={{ app_version }}">
<script src="{% static 'js/app.js' %}?v={{ app_version }}" defer></script>
{% block extra_head %}{% endblock %}
@@ -21,8 +21,9 @@
<div class="cockpit" data-app-frame>
<aside class="cockpit-sidebar" data-sidebar aria-label="Hoofdnavigatie">
<div class="sidebar-heading">
<a class="cockpit-brand" href="{% url 'dashboard:today' %}" aria-label="ITWorx.tech VacatureRadar dashboard">
<span class="brand-lockup"><img class="brand-wordmark" src="{% static 'img/itworx-wordmark.png' %}" alt="ITWorx.tech"><small>VacatureRadar · intelligence cockpit</small></span>
<a class="cockpit-brand" href="{% url 'dashboard:today' %}" aria-label="VacatureRadar dashboard">
<img class="brand-radar" src="{% static 'img/vacatureradar-logo.svg' %}" alt="" width="42" height="42">
<span class="brand-lockup"><strong>VacatureRadar</strong><small>Intelligence cockpit</small></span>
</a>
<button class="icon-button nav-close mobile-only" type="button" data-nav-close aria-label="Menu sluiten"><svg class="icon"><use href="#icon-close"></use></svg></button>
</div>
@@ -47,6 +48,7 @@
<span class="status-beacon {% if navigation_profile %}is-live{% endif %}" aria-hidden="true"></span>
<span><strong>{% if navigation_profile %}Radar actief{% else %}Profiel nodig{% endif %}</strong><small>{% if navigation_profile %}{{ navigation_profile.name }}{% else %}Configureer je zoekprofiel{% endif %}</small></span>
</div>
{% include "components/developer_credit.html" %}
<div class="sidebar-account">
<span class="avatar" aria-hidden="true">{{ user.first_name|default:user.username|slice:":1"|upper }}</span>
<span><strong>{{ user.get_full_name|default:user.username }}</strong><small>Eigen werkruimte</small></span>
@@ -56,9 +58,10 @@
<button class="nav-scrim" type="button" data-nav-scrim aria-label="Menu sluiten" tabindex="-1"></button>
<div class="cockpit-workspace">
<header class="cockpit-topbar">
<div class="topbar-inner">
<div class="topbar-start">
<button class="icon-button mobile-only" type="button" data-nav-toggle aria-label="Menu openen" aria-expanded="false"><svg class="icon"><use href="#icon-menu"></use></svg></button>
<div class="workspace-identity desktop-label"><span>{{ app_brand_name }}</span><small>VacatureRadar · {{ page_context_label }}</small></div>
<div class="workspace-identity desktop-label"><span>VacatureRadar</span><small>{{ page_context_label }}</small></div>
<form class="command-search" method="get" action="{% url 'jobs:list' %}" role="search">
<label class="sr-only" for="global-search">Zoek door vacatures</label>
<svg class="icon" aria-hidden="true"><use href="#icon-search"></use></svg>
@@ -74,6 +77,7 @@
<div class="account-popover"><strong>{{ user.get_full_name|default:user.username }}</strong><small>{{ user.username }}</small>{% if navigation_profile %}<a href="{% url 'profiles:edit' navigation_profile.pk %}">Zoekprofiel aanpassen</a>{% endif %}<form action="{% url 'logout' %}" method="post">{% csrf_token %}<button type="submit"><svg class="icon"><use href="#icon-logout"></use></svg>Afmelden</button></form></div>
</details>
</div>
</div>
</header>
<main id="main" class="cockpit-main" tabindex="-1">
templates/components/developer_credit.html
+4
View File
@@ -0,0 +1,4 @@
{% load static %}<div class="developer-credit" aria-label="Ontwikkeld door ITWorx.tech">
<span>Ontwikkeld door</span>
<img src="{% static 'img/itworx-wordmark.png' %}" alt="" width="113" height="25">
</div>
templates/registration/login.html
+10 -11
View File
@@ -5,16 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<meta name="theme-color" content="#071327">
<meta name="application-name" content="VacatureRadar · {{ app_brand_name }}">
<meta name="application-name" content="VacatureRadar">
<title>Inloggen · VacatureRadar</title>
<link rel="icon" href="{% static 'img/itworx-app-icon.png' %}?v={{ app_version }}" type="image/png" sizes="512x512">
<link rel="icon" href="{% static 'favicon.svg' %}?v={{ app_version }}" type="image/svg+xml" sizes="any">
<link rel="stylesheet" href="{% static 'css/auth.css' %}?v={{ app_version }}">
</head>
<body class="auth-page">
{% include "components/icon_sprite.html" %}
<main class="auth-shell">
<div class="auth-brand">
<img class="auth-brand-logo" src="{% static 'img/itworx-wordmark.png' %}" alt="ITWorx.tech" width="274" height="60">
<img class="auth-brand-logo" src="{% static 'img/vacatureradar-logo.svg' %}" alt="VacatureRadar" width="72" height="72">
<p class="auth-brand-name">VacatureRadar</p>
<p class="auth-brand-tagline">Persoonlijke intelligence cockpit</p>
</div>
@@ -59,8 +59,8 @@
autocomplete="current-password" placeholder="••••••••" required
{% if form.errors %}aria-invalid="true"{% endif %}>
<button class="pw-toggle" type="button" data-pw-toggle aria-label="Wachtwoord tonen">
<svg class="icon" aria-hidden="true" data-eye><use href="#icon-eye"></use></svg>
<svg class="icon" aria-hidden="true" data-eye-off hidden><use href="#icon-eye-off"></use></svg>
<svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" data-eye><path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="2.7" stroke="currentColor" stroke-width="1.8"/></svg>
<svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" data-eye-off hidden><path d="M3 3l18 18M10.6 6.1A10.7 10.7 0 0 1 12 6c6 0 9.5 6 9.5 6a17 17 0 0 1-2.8 3.4M6.2 6.2C3.8 8 2.5 12 2.5 12s3.5 6 9.5 6c1.2 0 2.3-.2 3.3-.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" stroke="currentColor" stroke-width="1.8"/></svg>
</button>
</div>
</div>
@@ -69,7 +69,7 @@
<button class="btn btn-primary" type="submit" data-submit>
<span data-label>Inloggen</span>
<svg class="icon" aria-hidden="true" data-arrow><use href="#icon-arrow"></use></svg>
<svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true" data-arrow><path d="M5 12h14M14 7l5 5-5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
{% if entra_enabled %}
@@ -100,7 +100,7 @@
{% csrf_token %}
{% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
<button class="btn-ghost" type="submit">
<svg class="icon" aria-hidden="true"><use href="#icon-eye"></use></svg>
<svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M14 7l5 5-5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
Bekijk demo
</button>
</form>
@@ -108,12 +108,11 @@
{% endif %}
</div>
{% include "components/developer_credit.html" %}
<footer class="auth-footer">
<div class="auth-footer-links">
<a href="{% url 'password_reset' %}">Wachtwoord vergeten</a>
</div>
<div class="auth-badge">
<svg class="icon" aria-hidden="true"><use href="#icon-shield"></use></svg>
<svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3 5 6v5c0 4.7 2.8 8.2 7 10 4.2-1.8 7-5.3 7-10V6l-7-3Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
<span>Local-first secure node</span>
</div>
</footer>
templates/registration/password_reset_complete.html
+3 -2
View File
@@ -5,14 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<title>Wachtwoord gewijzigd · VacatureRadar</title>
<link rel="icon" href="{% static 'img/itworx-app-icon.png' %}?v={{ app_version }}" type="image/png" sizes="512x512">
<link rel="icon" href="{% static 'favicon.svg' %}?v={{ app_version }}" type="image/svg+xml" sizes="any">
<link rel="stylesheet" href="{% static 'css/auth.css' %}?v={{ app_version }}">
</head>
<body class="auth-page">
{% include "components/icon_sprite.html" %}
<main class="auth-shell">
<div class="auth-brand">
<img class="auth-brand-logo" src="{% static 'img/itworx-wordmark.png' %}" alt="ITWorx.tech" width="274" height="60">
<img class="auth-brand-logo" src="{% static 'img/vacatureradar-logo.svg' %}" alt="VacatureRadar" width="72" height="72">
<p class="auth-brand-name">VacatureRadar</p>
<p class="auth-brand-tagline">Persoonlijke intelligence cockpit</p>
</div>
@@ -30,6 +30,7 @@
</button>
</form>
</div>
{% include "components/developer_credit.html" %}
</main>
</body>
</html>
templates/registration/password_reset_confirm.html
+3 -2
View File
@@ -5,14 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<title>Nieuw wachtwoord · VacatureRadar</title>
<link rel="icon" href="{% static 'img/itworx-app-icon.png' %}?v={{ app_version }}" type="image/png" sizes="512x512">
<link rel="icon" href="{% static 'favicon.svg' %}?v={{ app_version }}" type="image/svg+xml" sizes="any">
<link rel="stylesheet" href="{% static 'css/auth.css' %}?v={{ app_version }}">
</head>
<body class="auth-page">
{% include "components/icon_sprite.html" %}
<main class="auth-shell">
<div class="auth-brand">
<img class="auth-brand-logo" src="{% static 'img/itworx-wordmark.png' %}" alt="ITWorx.tech" width="274" height="60">
<img class="auth-brand-logo" src="{% static 'img/vacatureradar-logo.svg' %}" alt="VacatureRadar" width="72" height="72">
<p class="auth-brand-name">VacatureRadar</p>
<p class="auth-brand-tagline">Persoonlijke intelligence cockpit</p>
</div>
@@ -59,6 +59,7 @@
<a class="auth-back" href="{% url 'password_reset' %}"><svg class="icon" aria-hidden="true"><use href="#icon-arrow"></use></svg>Nieuwe link aanvragen</a>
{% endif %}
</div>
{% include "components/developer_credit.html" %}
</main>
</body>
</html>
templates/registration/password_reset_done.html
+3 -2
View File
@@ -5,14 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<title>Herstel-link verstuurd · VacatureRadar</title>
<link rel="icon" href="{% static 'img/itworx-app-icon.png' %}?v={{ app_version }}" type="image/png" sizes="512x512">
<link rel="icon" href="{% static 'favicon.svg' %}?v={{ app_version }}" type="image/svg+xml" sizes="any">
<link rel="stylesheet" href="{% static 'css/auth.css' %}?v={{ app_version }}">
</head>
<body class="auth-page">
{% include "components/icon_sprite.html" %}
<main class="auth-shell">
<div class="auth-brand">
<img class="auth-brand-logo" src="{% static 'img/itworx-wordmark.png' %}" alt="ITWorx.tech" width="274" height="60">
<img class="auth-brand-logo" src="{% static 'img/vacatureradar-logo.svg' %}" alt="VacatureRadar" width="72" height="72">
<p class="auth-brand-name">VacatureRadar</p>
<p class="auth-brand-tagline">Persoonlijke intelligence cockpit</p>
</div>
@@ -25,6 +25,7 @@
</div>
<a class="auth-back" href="{% url 'login' %}"><svg class="icon" aria-hidden="true"><use href="#icon-arrow"></use></svg>Terug naar inloggen</a>
</div>
{% include "components/developer_credit.html" %}
</main>
</body>
</html>
templates/registration/password_reset_form.html
+3 -2
View File
@@ -5,14 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light">
<title>Wachtwoord herstellen · VacatureRadar</title>
<link rel="icon" href="{% static 'img/itworx-app-icon.png' %}?v={{ app_version }}" type="image/png" sizes="512x512">
<link rel="icon" href="{% static 'favicon.svg' %}?v={{ app_version }}" type="image/svg+xml" sizes="any">
<link rel="stylesheet" href="{% static 'css/auth.css' %}?v={{ app_version }}">
</head>
<body class="auth-page">
{% include "components/icon_sprite.html" %}
<main class="auth-shell">
<div class="auth-brand">
<img class="auth-brand-logo" src="{% static 'img/itworx-wordmark.png' %}" alt="ITWorx.tech" width="274" height="60">
<img class="auth-brand-logo" src="{% static 'img/vacatureradar-logo.svg' %}" alt="VacatureRadar" width="72" height="72">
<p class="auth-brand-name">VacatureRadar</p>
<p class="auth-brand-tagline">Persoonlijke intelligence cockpit</p>
</div>
@@ -40,6 +40,7 @@
<a class="auth-back" href="{% url 'login' %}"><svg class="icon" aria-hidden="true"><use href="#icon-arrow"></use></svg>Terug naar inloggen</a>
</div>
{% include "components/developer_credit.html" %}
</main>
</body>
</html>