forked from Nixius/authelia
bump
This commit is contained in:
parent
630bd3d3f4
commit
71b91a4284
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue