<!doctype html>
<html lang="nl">
<head>
<base target="_top">
<meta charset="utf-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
<meta
name="description"
content="KlantKompas – veilig klantenportaal en ondernemersportaal."
>
<title>KlantKompas | Veilig inloggen</title>
<?!= include('Styles'); ?>
</head>
<body>
<div class="page-shell">
<!-- ===================================================
HUISSTIJL EN LOGO
=================================================== -->
<header class="brandbar">
<div class="brandmark" aria-hidden="true">
K
</div>
<div class="brandtext">
<strong id="brandName">
KlantKompas
</strong>
<small>
Veilig klantenportaal
</small>
</div>
</header>
<!-- ===================================================
HOOFDINHOUD
=================================================== -->
<main>
<!-- =================================================
LADEN EN TOEGANG CONTROLEREN
================================================= -->
<section
id="loadingView"
class="auth-card"
>
<div
class="spinner"
aria-hidden="true"
></div>
<h1>
Beveiligde toegang controleren
</h1>
<p>
Een ogenblik geduld.
</p>
</section>
<!-- =================================================
INLOGFORMULIER
================================================= -->
<section
id="loginView"
class="auth-card"
hidden
>
<span class="eyebrow">
VEILIG INLOGGEN
</span>
<h1>
Welkom bij KlantKompas
</h1>
<p>
Vul het e-mailadres in dat bij uw klantaccount
hoort. U ontvangt vervolgens een persoonlijke
en beveiligde inloglink.
</p>
<form
id="loginForm"
autocomplete="on"
>
<label for="email">
E-mailadres
</label>
<input
id="email"
name="email"
type="email"
inputmode="email"
autocomplete="email"
autocapitalize="none"
spellcheck="false"
required
placeholder="naam@voorbeeld.nl"
>
<button
type="submit"
class="primary"
>
Stuur mijn inloglink
</button>
</form>
<div class="security-note">
<strong>
Inloggen zonder wachtwoord
</strong>
<span>
De persoonlijke inloglink is 15 minuten geldig.
Na het inloggen kan dit apparaat maximaal
30 dagen vertrouwd blijven.
</span>
</div>
</section>
<!-- =================================================
INLOGLINK VERSTUURD
================================================= -->
<section
id="sentView"
class="auth-card"
hidden
>
<div
class="success-icon"
aria-hidden="true"
>
✓
</div>
<h1>
Controleer uw e-mail
</h1>
<p id="sentMessage">
Als uw account actief is, ontvangt u binnen
enkele minuten een persoonlijke inloglink.
</p>
<p>
Controleer eventueel ook de map met ongewenste
e-mail of spam.
</p>
<button
class="secondary"
type="button"
onclick="showLogin()"
>
Ander e-mailadres gebruiken
</button>
</section>
<!-- =================================================
FOUTMELDING
================================================= -->
<section
id="errorView"
class="auth-card"
hidden
>
<div
class="error-icon"
aria-hidden="true"
>
!
</div>
<h1>
Inloggen is niet gelukt
</h1>
<p id="errorMessage">
De inloglink is ongeldig of verlopen.
</p>
<button
class="primary"
type="button"
onclick="showLogin()"
>
Nieuwe inloglink aanvragen
</button>
</section>
<!-- =================================================
INGELOGD KLANTKOMPAS-PORTAAL
================================================= -->
<section
id="portalView"
class="portal"
hidden
>
<div class="portal-head">
<div>
<span class="eyebrow">
KLANTKOMPAS PORTAAL
</span>
<h1 id="welcomeTitle">
Welkom
</h1>
<p id="accountLine"></p>
</div>
<button
class="secondary"
type="button"
onclick="logoutUser()"
>
Uitloggen
</button>
</div>
<!-- STATUS INLOGSESSIE -->
<div class="status-grid">
<article>
<small>
E-maillink
</small>
<strong>
Actief
</strong>
<span>
Eenmalig te gebruiken · 15 minuten
</span>
</article>
<article>
<small>
Huidige sessie
</small>
<strong>
24 uur
</strong>
<span id="sessionExpiry">
Beveiligde toegang
</span>
</article>
<article>
<small>
Vertrouwd apparaat
</small>
<strong>
Maximaal 30 dagen
</strong>
<span id="deviceExpiry">
Automatische vernieuwing
</span>
</article>
</div>
<!-- BEVEILIGINGSFASEN -->
<div class="phase-panel">
<h2>
Beveiliging van KlantKompas
</h2>
<div class="phase done">
<b>
1
</b>
<span>
<strong>
E-maillink en beveiligde sessies
</strong>
<small>
In deze versie actief
</small>
</span>
</div>
<div class="phase next">
<b>
2
</b>
<span>
<strong>
Dagelijkse KlantKompas-PIN
</strong>
<small>
Toe te voegen in de volgende bouwfase
</small>
</span>
</div>
<div class="phase">
<b>
3
</b>
<span>
<strong>
Passkeys
</strong>
<small>
Vingerafdruk, gezichtsherkenning of
de toestel-PIN
</small>
</span>
</div>
</div>
<!-- PORTAALONDERDELEN -->
<div class="phase-panel">
<h2>
KlantKompas-onderdelen
</h2>
<p>
Na het afronden van de veilige login kunnen
hier de onderdelen van het klantenportaal
worden toegevoegd.
</p>
<div class="status-grid">
<article>
<small>Communicatie</small>
<strong>Inbox</strong>
<span>Berichten en meldingen</span>
</article>
<article>
<small>Relaties</small>
<strong>Klanten</strong>
<span>Klant- en contactgegevens</span>
</article>
<article>
<small>Verkoop</small>
<strong>Offertes</strong>
<span>Voorstellen en goedkeuringen</span>
</article>
<article>
<small>Administratie</small>
<strong>Facturen</strong>
<span>Facturen en betaalstatus</span>
</article>
<article>
<small>Levering</small>
<strong>Bestellingen</strong>
<span>Bestellen en levering volgen</span>
</article>
<article>
<small>Aanbod</small>
<strong>Producten en diensten</strong>
<span>Product- en dienstenoverzicht</span>
</article>
<article>
<small>Planning</small>
<strong>Agenda</strong>
<span>Afspraken en werkzaamheden</span>
</article>
<article>
<small>Ondersteuning</small>
<strong>Kennisbank</strong>
<span>Uitleg, instructies en antwoorden</span>
</article>
<article>
<small>Service</small>
<strong>Klachten en garantie</strong>
<span>Klachten, bewijsstukken en afhandeling</span>
</article>
</div>
</div>
</section>
</main>
<!-- ===================================================
FOOTER EN CONTACTGEGEVENS
=================================================== -->
<footer>
<p>
Een product van
<strong>Stichting GODOGOOD.eu</strong>
en
<strong>Gabeler.eu Coaching</strong>.
</p>
<p>
Contact met de maker kan via:
<a href="mailto:Stijn.Gabeler@gmail.com">
Stijn.Gabeler@gmail.com
</a>
en via WhatsApp:
<a
href="https://api.whatsapp.com/send/?phone=31622869860&text=Hallo%20Stijn%20Gabeler,%20Graag%20leg%20ik%20hierbij%20het%201e%20contact%20voor%20een%20gesprek%20over%20de%20mogelijkheden%20omtrent%20een%20KlantenKompas%20vanuit%20het%20OndernemersPortaal%20van%20Stichting%20GODOGOOD.eu%20,%20vandaag%20bezocht%20ik%20de%20site:%20%20https://sites.google.com/view/ondernemers/portaal%20en%20ik%20zou%20graag%20meer%20willen%20weten%20over%20de%20mogelijkheden.%20Dit%20is%20mijn%20nummer.%20Mijn%20verdere%20info%20is:"
target="_blank"
rel="noopener noreferrer"
>
+31 6 22869860
</a>
</p>
<p>
Wilt u een eigen KlantKompas-dashboard voor uw
bedrijf? Neem dan gerust contact op.
</p>
</footer>
</div>
<!-- =====================================================
MELDINGEN
===================================================== -->
<div
id="toast"
role="status"
aria-live="polite"
aria-atomic="true"
></div>
<!-- =====================================================
TOKEN UIT DE URL DOORGEVEN AAN JAVASCRIPT
===================================================== -->
<script>
window.KK_MAGIC_TOKEN =
<?!= JSON.stringify(loginToken || '') ?>;
</script>
<!-- =====================================================
KLANTKOMPAS JAVASCRIPT LADEN
===================================================== -->
<?!= include('Scripts'); ?>
</body>
</html>
Ik heb de nieuwe deployment gecontroleerd.
De oorzaak is nu exact duidelijk: de gepubliceerde Index.html
stopt voortijdig in de footer bij de woorden “en via”.
Hierdoor ontbreken in de online pagina volledig:
De WhatsApp-link
toast
window.KK_MAGIC_TOKEN
<?!= include('Scripts'); ?>
Dus Scripts.html wordt momenteel helemaal niet geladen.