forked from Nixius/authelia
1
0
Fork 0
This commit is contained in:
Leopere 2026-03-05 15:25:35 -05:00
parent 630bd3d3f4
commit 71b91a4284
Signed by: colin
SSH Key Fingerprint: SHA256:nRPCQTeMFLdGytxRQmPVK9VXY3/ePKQ5lGRyJhT5DY8
1 changed files with 40 additions and 7 deletions

View File

@ -52,7 +52,15 @@
.features li { padding: 0.4rem 0; color: var(--muted); font-size: 0.95rem; } .features li { padding: 0.4rem 0; color: var(--muted); font-size: 0.95rem; }
.features li::before { content: "\2713"; color: var(--accent); font-weight: 700; margin-right: 0.75rem; } .features li::before { content: "\2713"; color: var(--accent); font-weight: 700; margin-right: 0.75rem; }
form { display: flex; flex-direction: column; gap: 0.75rem; } form { display: flex; flex-direction: column; gap: 0.75rem; }
input[type="email"], input[type="text"] { form label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: var(--muted);
margin-bottom: -0.25rem;
}
input[type="email"], input[type="text"], input[type="tel"] {
width: 100%;
background: var(--bg); background: var(--bg);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
@ -62,8 +70,8 @@
outline: none; outline: none;
transition: border-color 0.2s; transition: border-color 0.2s;
} }
input[type="email"]:focus, input[type="text"]:focus { border-color: var(--accent); } input[type="email"]:focus, input[type="text"]:focus, input[type="tel"]:focus { border-color: var(--accent); }
input[type="email"]::placeholder, input[type="text"]::placeholder { color: var(--muted); } input[type="email"]::placeholder, input[type="text"]::placeholder, input[type="tel"]::placeholder { color: var(--muted); }
button { button {
background: var(--accent); background: var(--accent);
color: #fff; color: #fff;
@ -134,12 +142,37 @@
<ul class="features"> <ul class="features">
{{range .Features}}<li>{{.}}</li>{{end}} {{range .Features}}<li>{{.}}</li>{{end}}
</ul> </ul>
<form method="POST" action="/subscribe"> <form method="POST" action="/subscribe" id="subscribe-form">
<input type="email" name="email" placeholder="you@example.com" required> <label for="sub-email">Email</label>
<input type="tel" name="phone" placeholder="+1 555 123 4567" autocomplete="tel" required> <input id="sub-email" type="email" name="email" placeholder="you@example.com" autocomplete="email" required>
<input type="text" name="domain" placeholder="Domain you want to manage (e.g. git.mycompany.com)" autocomplete="off" required> <label for="sub-phone">Phone <span style="font-weight:400;color:var(--muted)">(10+ digits, any format)</span></label>
<input id="sub-phone" type="tel" name="phone" placeholder="e.g. 555 123 4567 or +1 555 123 4567" autocomplete="tel" inputmode="tel" minlength="10" required>
<label for="sub-domain">Domain to manage</label>
<input id="sub-domain" type="text" name="domain" placeholder="e.g. git.mycompany.com" autocomplete="off" required>
<button type="submit">Subscribe Now</button> <button type="submit">Subscribe Now</button>
</form> </form>
<script>
(function() {
var phone = document.getElementById('sub-phone');
if (!phone) return;
function digitsOnly(s) { return (s || '').replace(/\D/g, ''); }
function formatPhone(digits) {
if (digits.length <= 3) return digits;
if (digits.length <= 6) return digits.slice(0,3) + ' ' + digits.slice(3);
if (digits.length <= 10) return digits.slice(0,3) + ' ' + digits.slice(3,6) + ' ' + digits.slice(6);
return digits.slice(0,3) + ' ' + digits.slice(3,6) + ' ' + digits.slice(6,10) + ' ' + digits.slice(10,15);
}
phone.addEventListener('input', function() {
var d = digitsOnly(this.value);
if (d.length > 15) d = d.slice(0, 15);
var formatted = formatPhone(d);
if (this.value !== formatted) {
this.value = formatted;
this.setSelectionRange(formatted.length, formatted.length);
}
});
})();
</script>
{{else}} {{else}}
<h2>Subscribe</h2> <h2>Subscribe</h2>
<p style="color: var(--muted); margin-bottom: 1rem;">Pricing is being configured. Check back soon.</p> <p style="color: var(--muted); margin-bottom: 1rem;">Pricing is being configured. Check back soon.</p>