diff --git a/src/MijnBesluit.Web/Components/Onderdelen/AppDownload.razor b/src/MijnBesluit.Web/Components/Onderdelen/AppDownload.razor
new file mode 100644
index 0000000..9b5e38d
--- /dev/null
+++ b/src/MijnBesluit.Web/Components/Onderdelen/AppDownload.razor
@@ -0,0 +1,48 @@
+@inject IConfiguration Instellingen
+@inject IWebHostEnvironment Omgeving
+
+@* De "Download in de App Store" en "Ontdek het op Google Play"-knoppen.
+
+ Elke knop verschijnt pas als er twee dingen zijn: een adres in appsettings.json (Apps:AppStoreUrl
+ en Apps:GooglePlayUrl, leeg zolang de app daar niet staat) en het officiƫle plaatje van de winkel
+ in wwwroot/badges. De plaatjes tekenen we niet zelf na: Apple en Google leveren ze kant-en-klaar
+ aan en eisen dat ze onaangepast worden gebruikt. Zie wwwroot/badges/LEESMIJ.txt. *@
+
+@if (_knoppen.Count > 0)
+{
+
+ @foreach (var knop in _knoppen)
+ {
+
+
+
+ }
+
+}
+
+@code {
+ private readonly List<(string Adres, string Plaatje, string Titel)> _knoppen = new();
+
+ protected override void OnInitialized()
+ {
+ Voeg("Apps:AppStoreUrl", "app-store", "Download in de App Store");
+ Voeg("Apps:GooglePlayUrl", "google-play", "Ontdek het op Google Play");
+ }
+
+ private void Voeg(string instelling, string bestandsnaam, string titel)
+ {
+ var adres = Instellingen[instelling];
+ if (string.IsNullOrWhiteSpace(adres)) return;
+
+ // Het plaatje mag .svg of .png zijn, wat je van de winkel hebt gekregen.
+ foreach (var extensie in new[] { "svg", "png" })
+ {
+ var pad = $"badges/{bestandsnaam}.{extensie}";
+ if (Omgeving.WebRootFileProvider.GetFileInfo(pad).Exists)
+ {
+ _knoppen.Add((adres, "/" + pad, titel));
+ return;
+ }
+ }
+ }
+}
diff --git a/src/MijnBesluit.Web/Components/Pages/Home.razor b/src/MijnBesluit.Web/Components/Pages/Home.razor
index 6e8421d..fe67452 100644
--- a/src/MijnBesluit.Web/Components/Pages/Home.razor
+++ b/src/MijnBesluit.Web/Components/Pages/Home.razor
@@ -216,6 +216,9 @@
+
+ @* De knoppen voor de app in de winkels; zie AppDownload.razor. *@
+
diff --git a/src/MijnBesluit.Web/Components/Pages/Inloggen.razor b/src/MijnBesluit.Web/Components/Pages/Inloggen.razor
index c73a569..5f27f64 100644
--- a/src/MijnBesluit.Web/Components/Pages/Inloggen.razor
+++ b/src/MijnBesluit.Web/Components/Pages/Inloggen.razor
@@ -93,6 +93,8 @@
Wat is MijnBesluit?
Ik ben nieuw en wil een account aanmaken
Ik wil adverteren op MijnBesluit
+
+
@code {
diff --git a/src/MijnBesluit.Web/Components/Pages/WatIsMijnBesluit.razor b/src/MijnBesluit.Web/Components/Pages/WatIsMijnBesluit.razor
index abd5bb7..b56b8e8 100644
--- a/src/MijnBesluit.Web/Components/Pages/WatIsMijnBesluit.razor
+++ b/src/MijnBesluit.Web/Components/Pages/WatIsMijnBesluit.razor
@@ -15,5 +15,7 @@
Inloggen
+
+
Terug naar inloggen
diff --git a/src/MijnBesluit.Web/appsettings.json b/src/MijnBesluit.Web/appsettings.json
index 5fcc4c8..e02ae70 100644
--- a/src/MijnBesluit.Web/appsettings.json
+++ b/src/MijnBesluit.Web/appsettings.json
@@ -11,6 +11,10 @@
"Site": {
"Url": "https://localhost:7014"
},
+ "Apps": {
+ "GooglePlayUrl": "https://play.google.com/store/apps/details?id=nl.mijnbesluit.app",
+ "AppStoreUrl": ""
+ },
"Smtp": {
"Host": "localhost",
"Port": 587,
diff --git a/src/MijnBesluit.Web/wwwroot/app.css b/src/MijnBesluit.Web/wwwroot/app.css
index 2e83487..ec6a861 100644
--- a/src/MijnBesluit.Web/wwwroot/app.css
+++ b/src/MijnBesluit.Web/wwwroot/app.css
@@ -575,3 +575,9 @@ hr { border: none; border-top: 1px solid var(--rand); margin: 1.25rem 0; }
.voet { text-align: center; margin-top: 2rem; font-size: .9rem; }
.voet a { color: var(--inkt-zacht); }
+
+/* Download-knoppen van de winkels (AppDownload.razor). De plaatjes zelf blijven onaangepast;
+ we bepalen alleen de hoogte en de ruimte eromheen. */
+.appknoppen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; }
+.appknoppen a { display: inline-block; line-height: 0; }
+.appknoppen img { height: 44px; width: auto; display: block; }
diff --git a/src/MijnBesluit.Web/wwwroot/badges/LEESMIJ.txt b/src/MijnBesluit.Web/wwwroot/badges/LEESMIJ.txt
new file mode 100644
index 0000000..58d0776
--- /dev/null
+++ b/src/MijnBesluit.Web/wwwroot/badges/LEESMIJ.txt
@@ -0,0 +1,11 @@
+Hier horen de officiele knoppen van de winkels:
+
+ app-store.svg (of .png) "Download in de App Store" - Apple
+ google-play.svg (of .png) "Ontdek het op Google Play" - Google
+
+Haal ze zelf op bij de winkels en pas ze niet aan (kleur, vorm, tekst):
+ Apple: developer.apple.com/app-store/marketing/guidelines (sectie "Download on the App Store", Nederlandse versie)
+ Google: play.google.com/intl/nl/badges (Nederlandse knop)
+
+Een knop verschijnt op de inlogpagina pas als zijn bestand hier staat EN het adres in
+appsettings.json is ingevuld (Apps:AppStoreUrl, Apps:GooglePlayUrl).