From 068bf78cfbc9fdc0647dddcbfd3fe858bca96d73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Numbus?= <raphael@numbus.eu>
Date: Sun, 29 Mar 2026 14:27:53 +0200
Subject: [PATCH] HTML updates

---
 configurator/index.html | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/configurator/index.html b/configurator/index.html
index 4646f78..a44b8a8 100644
--- a/configurator/index.html
+++ b/configurator/index.html
@@ -109,7 +109,7 @@
                             <template x-for="device in deviceTypes" :key="device.id">
                                 <button @click="formData.deviceType = device.id" 
                                         :class="formData.deviceType === device.id ? 'bg-fuchsia-600/20 border-fuchsia-500' : 'bg-slate-900 border-slate-700'"
-                                        class="p-6 border rounded-2xl transition-all text-left group hover:border-fuchsia-500/50 hover:bg-slate-800">
+                                        class="p-6 border rounded-2xl transition-all text-left group hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
                                     <div class="flex items-center gap-4 mb-2">
                                         <div class="w-12 h-12 bg-slate-800 rounded-xl flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">
                                             <i :class="'mdi ' + device.icon" class="text-sky-400"></i>
@@ -431,7 +431,7 @@
                                         class="p-6 border rounded-2xl transition-all text-left group hover:bg-fuchsia-600/20 hover:border-fuchsia-500">
                                     <div class="flex justify-between items-center mb-2">
                                         <div class="flex items-center gap-4">
-                                            <i class="mdi mdi-cloud-outline text-3xl" :class="formData.remote_access.provider === 'netbird-cloud' ? 'text-white' : 'text-sky-400 group-hover:text-white'"></i>
+                                            <img src="https://cdn.jsdelivr.net/gh/selfhst/icons@main/svg/netbird.svg" class="w-8 h-8" alt="NetBird">
                                             <div class="font-bold text-xl" :class="formData.remote_access.provider === 'netbird-cloud' ? 'text-white' : 'text-slate-200 group-hover:text-white'">NetBird Managed</div>
                                         </div>
                                         <span class="text-[10px] bg-green-500/20 text-green-400 px-2 py-1 rounded uppercase font-bold">Recommended for small teams</span>
@@ -541,6 +541,17 @@
                             </div>
                         </div>
 
+                        <div class="space-y-4" x-data="{ help: false }">
+                            <div class="flex items-center gap-2">
+                                <label class="text-lg font-bold text-slate-200">Cloudflare DNS API Token <span class="text-fuchsia-500">*</span></label>
+                                <button @click="help = !help" class="text-slate-500 hover:text-sky-400 transition-colors">
+                                    <i class="mdi mdi-information-outline text-lg"></i>
+                                </button>
+                            </div>
+                            <p x-show="help" class="text-xs text-sky-400 italic mb-2">A security token from Cloudflare that allows Numbus to verify you own the domain and secure it via SSL.</p>
+                            <input type="password" x-model="formData.ssl.cloudflare_token" placeholder="••••••••••••••••" class="w-full bg-slate-900 border border-slate-700 rounded-xl p-4 focus:ring-2 focus:ring-fuchsia-500 outline-none placeholder:text-slate-500/40">
+                        </div>
+
                         <div class="space-y-4" x-data="{ open: false }">
                             <div class="flex items-center gap-2">
                                 <label class="text-lg font-bold text-slate-200">Authorized SSH Public Keys <span class="text-fuchsia-500">*</span></label>
@@ -943,11 +954,11 @@
                             { label: 'Remote Access', step: 7 },
                             { label: 'Services', step: 8 },
                             { label: 'Security', step: 9 },
-                            { label: 'Users', step: 10 }
+                            { label: 'Users & Groups', step: 10 }
                         ];
                         // Only servers have alerting/mail config usually
                         if (isServer) {
-                            configMinors.push({ label: 'Alerting', step: 11 });
+                            configMinors.push({ label: 'Alerts', step: 11 });
                         }
                     } else {
                         configMinors = [
@@ -1170,7 +1181,7 @@
                         6: () => this.validators.ip(this.formData.network.ip_address) && this.validators.ip(this.formData.network.router_ip),
                         7: () => this.formData.remote_access.provider !== 'netbird-cloud' || (this.formData.remote_access.netbird_token && this.validators.netbirdToken(this.formData.remote_access.netbird_token)),
                         8: () => this.validators.domain(this.formData.ssl.domain),
-                        9: () => this.formData.security.ssh_keys.trim().length > 10 && this.formData.ssl.cloudflare_token.length > 5,
+                        9: () => this.formData.security.ssh_keys.trim().length > 10 && this.formData.ssl.cloudflare_token.length > 10,
                         10: () => !!(this.formData.users[0].username && this.formData.users[0].name && this.validators.email(this.formData.users[0].email)),
                         11: () => this.validators.domain(this.formData.mail.smtp_host) && this.validators.port(this.formData.mail.smtp_port),
                         12: () => this.formData.gitConfig.url.length > 5,