156 lines
6.8 KiB
HTML
156 lines
6.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Branding — Settings{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h4 class="mb-0"><i class="bi bi-palette me-2"></i>Branding</h4>
|
|
<div class="btn-group btn-group-sm">
|
|
<a href="{{ url_for('tenant_settings.branding') }}" class="btn btn-primary">Branding</a>
|
|
<a href="{{ url_for('tenant_settings.plan') }}" class="btn btn-outline-secondary">Plan & Usage</a>
|
|
<a href="{{ url_for('tenant_settings.domains') }}" class="btn btn-outline-secondary">Domains</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% if not branding_allowed %}
|
|
<div class="alert alert-warning">
|
|
<i class="bi bi-lock me-1"></i>
|
|
Branding customisation is available on <strong>Pro</strong> and <strong>Enterprise</strong> plans.
|
|
Changes below won't take effect until you upgrade.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row">
|
|
<div class="col-lg-7">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body">
|
|
<form method="POST" action="{{ url_for('tenant_settings.branding') }}" enctype="multipart/form-data">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Company / Workspace Name</label>
|
|
<input type="text" name="company_name" class="form-control"
|
|
value="{{ settings.company_name or '' }}" maxlength="150"
|
|
placeholder="e.g. Acme Janitorial">
|
|
<div class="form-text">Shown in the navbar and email footers.</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">Logo</label>
|
|
{% if settings.logo_url %}
|
|
<div class="mb-2">
|
|
<img src="{{ media_url(settings.logo_url) }}"
|
|
alt="Current logo" style="max-height:48px; border-radius:6px;">
|
|
<div class="form-check mt-1">
|
|
<input class="form-check-input" type="checkbox" name="clear_logo" id="clear_logo">
|
|
<label class="form-check-label text-muted small" for="clear_logo">Remove current logo</label>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<input type="file" name="logo" class="form-control"
|
|
accept=".png,.jpg,.jpeg,.gif,.svg,.webp">
|
|
<div class="form-text">PNG, JPG, SVG or WebP. Displayed at 40px height in the navbar.</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-6">
|
|
<label class="form-label fw-semibold">Primary Colour</label>
|
|
<div class="input-group">
|
|
<input type="color" name="primary_color" class="form-control form-control-color"
|
|
value="{{ settings.primary_color or '#1a56db' }}" title="Primary colour">
|
|
<input type="text" class="form-control font-monospace"
|
|
value="{{ settings.primary_color or '#1a56db' }}"
|
|
pattern="^#[0-9a-fA-F]{6}$"
|
|
oninput="this.previousElementSibling.value=this.value"
|
|
id="primary_color_text">
|
|
</div>
|
|
<div class="form-text">Navbar background.</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label fw-semibold">Accent Colour</label>
|
|
<div class="input-group">
|
|
<input type="color" name="accent_color" class="form-control form-control-color"
|
|
value="{{ settings.accent_color or '#16a34a' }}" title="Accent colour">
|
|
<input type="text" class="form-control font-monospace"
|
|
value="{{ settings.accent_color or '#16a34a' }}"
|
|
pattern="^#[0-9a-fA-F]{6}$"
|
|
oninput="this.previousElementSibling.value=this.value"
|
|
id="accent_color_text">
|
|
</div>
|
|
<div class="form-text">Buttons and highlights.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label fw-semibold">Support Email</label>
|
|
<input type="email" name="support_email" class="form-control"
|
|
value="{{ settings.support_email or '' }}"
|
|
placeholder="support@yourcompany.com">
|
|
<div class="form-text">Shown to users on the support page.</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary" {{ 'disabled' if not branding_allowed }}>
|
|
<i class="bi bi-check-lg me-1"></i> Save Branding
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-5 mt-3 mt-lg-0">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white py-2">
|
|
<span class="fw-semibold" style="font-size:.9rem;">Preview</span>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<nav class="navbar navbar-dark px-3 py-2" id="preview-navbar"
|
|
style="background-color: {{ settings.primary_color or '#1a56db' }}; border-radius:0 0 6px 6px;">
|
|
{% if settings.logo_url %}
|
|
<img src="{{ media_url(settings.logo_url) }}"
|
|
alt="logo" style="max-height:32px; margin-right:.5rem; border-radius:4px;">
|
|
{% else %}
|
|
<i class="bi bi-clipboard-check me-2"></i>
|
|
{% endif %}
|
|
<span class="navbar-brand mb-0 h1" style="font-size:1rem;" id="preview-name">
|
|
{{ settings.display_name }}
|
|
</span>
|
|
</nav>
|
|
<div class="p-3" style="font-size:.82rem; color:#64748b;">
|
|
Navbar and button colours update as you pick them.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Live preview sync
|
|
(function () {
|
|
const navbar = document.getElementById('preview-navbar');
|
|
const nameEl = document.getElementById('preview-name');
|
|
|
|
document.querySelector('input[name="company_name"]').addEventListener('input', function () {
|
|
nameEl.textContent = this.value || 'Janitorial QC';
|
|
});
|
|
|
|
function wireColor(colorInput, textInput) {
|
|
colorInput.addEventListener('input', function () {
|
|
textInput.value = this.value;
|
|
if (colorInput.name === 'primary_color') navbar.style.backgroundColor = this.value;
|
|
});
|
|
textInput.addEventListener('input', function () {
|
|
if (/^#[0-9a-fA-F]{6}$/.test(this.value)) {
|
|
colorInput.value = this.value;
|
|
if (colorInput.name === 'primary_color') navbar.style.backgroundColor = this.value;
|
|
}
|
|
});
|
|
}
|
|
|
|
const pColor = document.querySelector('input[name="primary_color"]');
|
|
const pText = document.getElementById('primary_color_text');
|
|
const aColor = document.querySelector('input[name="accent_color"]');
|
|
const aText = document.getElementById('accent_color_text');
|
|
if (pColor && pText) wireColor(pColor, pText);
|
|
if (aColor && aText) wireColor(aColor, aText);
|
|
})();
|
|
</script>
|
|
{% endblock %} |