|
|
|
|
@@ -17,54 +17,150 @@
|
|
|
|
|
<section class="card">
|
|
|
|
|
<form method="post" action="{% url 'save_portal_branding' %}" enctype="multipart/form-data" class="stack-form">
|
|
|
|
|
{% csrf_token %}
|
|
|
|
|
<div class="grid two">
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.portal_title.id_for_label }}">{{ form.portal_title.label }}</label>
|
|
|
|
|
{{ form.portal_title }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.company_name.id_for_label }}">{{ form.company_name.label }}</label>
|
|
|
|
|
{{ form.company_name }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.company_domain.id_for_label }}">{{ form.company_domain.label }}</label>
|
|
|
|
|
{{ form.company_domain }}
|
|
|
|
|
<div class="hint">{% trans "Wird für E-Mail-Vorschläge und Domain-bezogene Standardtexte verwendet, z. B. tub.co." %}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.support_email.id_for_label }}">{{ form.support_email.label }}</label>
|
|
|
|
|
{{ form.support_email }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.default_language.id_for_label }}">{{ form.default_language.label }}</label>
|
|
|
|
|
{{ form.default_language }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.primary_color.id_for_label }}">{{ form.primary_color.label }}</label>
|
|
|
|
|
{{ form.primary_color }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.secondary_color.id_for_label }}">{{ form.secondary_color.label }}</label>
|
|
|
|
|
{{ form.secondary_color }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.logo_image.id_for_label }}">{{ form.logo_image.label }}</label>
|
|
|
|
|
{{ form.logo_image }}
|
|
|
|
|
<div class="hint">{% trans "Erlaubte Formate: SVG, PNG, JPG, JPEG, WEBP. Maximal 5 MB." %}</div>
|
|
|
|
|
{% for error in form.logo_image.errors %}<div class="hint">{{ error }}</div>{% endfor %}
|
|
|
|
|
{% if branding.logo_image %}
|
|
|
|
|
<div class="hint">{% trans "Aktuelles Logo:" %} <a href="{{ branding.logo_image.url }}" target="_blank" rel="noopener">{% trans "öffnen" %}</a></div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.pdf_letterhead.id_for_label }}">{{ form.pdf_letterhead.label }}</label>
|
|
|
|
|
{{ form.pdf_letterhead }}
|
|
|
|
|
<div class="hint">{% trans "Erlaubtes Format: PDF. Maximal 10 MB." %}</div>
|
|
|
|
|
{% for error in form.pdf_letterhead.errors %}<div class="hint">{{ error }}</div>{% endfor %}
|
|
|
|
|
{% if branding.pdf_letterhead %}
|
|
|
|
|
<div class="hint">{% trans "Aktueller Briefkopf:" %} <a href="{{ branding.pdf_letterhead.url }}" target="_blank" rel="noopener">{% trans "öffnen" %}</a></div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="branding-sections">
|
|
|
|
|
<section class="branding-block">
|
|
|
|
|
<div class="branding-block-head">
|
|
|
|
|
<h2>{% trans "Identität" %}</h2>
|
|
|
|
|
<p>{% trans "Titel, Firmenname und zentrale Spracheinstellungen." %}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid two">
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.portal_title.id_for_label }}">{{ form.portal_title.label }}</label>
|
|
|
|
|
{{ form.portal_title }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.company_name.id_for_label }}">{{ form.company_name.label }}</label>
|
|
|
|
|
{{ form.company_name }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.company_domain.id_for_label }}">{{ form.company_domain.label }}</label>
|
|
|
|
|
{{ form.company_domain }}
|
|
|
|
|
<div class="hint">{% trans "Wird für E-Mail-Vorschläge und Domain-bezogene Standardtexte verwendet, z. B. tub.co." %}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.default_language.id_for_label }}">{{ form.default_language.label }}</label>
|
|
|
|
|
{{ form.default_language }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field field-full">
|
|
|
|
|
<label for="{{ form.login_subtitle.id_for_label }}">{{ form.login_subtitle.label }}</label>
|
|
|
|
|
{{ form.login_subtitle }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="branding-block">
|
|
|
|
|
<div class="branding-block-head">
|
|
|
|
|
<h2>{% trans "Farben & Erscheinungsbild" %}</h2>
|
|
|
|
|
<p>{% trans "Zentrale visuelle Markenwerte und Browser-Icon." %}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid two">
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.primary_color.id_for_label }}">{{ form.primary_color.label }}</label>
|
|
|
|
|
{{ form.primary_color }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.secondary_color.id_for_label }}">{{ form.secondary_color.label }}</label>
|
|
|
|
|
{{ form.secondary_color }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.logo_image.id_for_label }}">{{ form.logo_image.label }}</label>
|
|
|
|
|
{{ form.logo_image }}
|
|
|
|
|
<div class="hint">{% trans "Erlaubte Formate: SVG, PNG, JPG, JPEG, WEBP. Maximal 5 MB." %}</div>
|
|
|
|
|
{% for error in form.logo_image.errors %}<div class="hint">{{ error }}</div>{% endfor %}
|
|
|
|
|
{% if branding.logo_image %}
|
|
|
|
|
<div class="hint">{% trans "Aktuelles Logo:" %} <a href="{{ branding.logo_image.url }}" target="_blank" rel="noopener">{% trans "öffnen" %}</a></div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.favicon_image.id_for_label }}">{{ form.favicon_image.label }}</label>
|
|
|
|
|
{{ form.favicon_image }}
|
|
|
|
|
<div class="hint">{% trans "Erlaubte Formate: ICO, PNG, SVG, WEBP. Maximal 2 MB." %}</div>
|
|
|
|
|
{% for error in form.favicon_image.errors %}<div class="hint">{{ error }}</div>{% endfor %}
|
|
|
|
|
{% if branding.favicon_image %}
|
|
|
|
|
<div class="hint">{% trans "Aktuelles Favicon:" %} <a href="{{ branding.favicon_image.url }}" target="_blank" rel="noopener">{% trans "öffnen" %}</a></div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field field-full">
|
|
|
|
|
<div class="branding-preview" id="branding-preview" data-default-logo="{{ portal_logo_url }}">
|
|
|
|
|
<div class="branding-preview-shell">
|
|
|
|
|
<div class="branding-preview-header">
|
|
|
|
|
<img class="branding-preview-logo" id="branding-preview-logo" src="{{ portal_logo_url }}" alt="{{ portal_company_name }} Logo" />
|
|
|
|
|
<div class="branding-preview-copy">
|
|
|
|
|
<strong id="branding-preview-company">{{ branding.company_name }}</strong>
|
|
|
|
|
<span id="branding-preview-title">{{ branding.portal_title }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="branding-preview-band">
|
|
|
|
|
<span class="branding-preview-chip" id="branding-preview-primary">{% trans "Primärfarbe" %}</span>
|
|
|
|
|
<span class="branding-preview-chip branding-preview-chip-secondary" id="branding-preview-secondary">{% trans "Sekundärfarbe" %}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="branding-preview-footer">
|
|
|
|
|
<div class="branding-preview-footer-main" id="branding-preview-footer">{{ branding.footer_text|default:branding.portal_title }}</div>
|
|
|
|
|
<div class="branding-preview-footer-legal" id="branding-preview-legal">{{ branding.legal_notice }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="branding-block">
|
|
|
|
|
<div class="branding-block-head">
|
|
|
|
|
<h2>{% trans "Kommunikation" %}</h2>
|
|
|
|
|
<p>{% trans "Absender, Support und PDF-Branding für ausgehende Kommunikation." %}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid two">
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.support_email.id_for_label }}">{{ form.support_email.label }}</label>
|
|
|
|
|
{{ form.support_email }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.sender_display_name.id_for_label }}">{{ form.sender_display_name.label }}</label>
|
|
|
|
|
{{ form.sender_display_name }}
|
|
|
|
|
<div class="hint">{% trans "Wird für ausgehende System-E-Mails als Anzeigename verwendet." %}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field field-full">
|
|
|
|
|
<label for="{{ form.pdf_letterhead.id_for_label }}">{{ form.pdf_letterhead.label }}</label>
|
|
|
|
|
{{ form.pdf_letterhead }}
|
|
|
|
|
<div class="hint">{% trans "Erlaubtes Format: PDF. Maximal 10 MB." %}</div>
|
|
|
|
|
{% for error in form.pdf_letterhead.errors %}<div class="hint">{{ error }}</div>{% endfor %}
|
|
|
|
|
{% if branding.pdf_letterhead %}
|
|
|
|
|
<div class="hint">{% trans "Aktueller Briefkopf:" %} <a href="{{ branding.pdf_letterhead.url }}" target="_blank" rel="noopener">{% trans "öffnen" %}</a></div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section class="branding-block">
|
|
|
|
|
<div class="branding-block-head">
|
|
|
|
|
<h2>{% trans "Footer & Rechtliches" %}</h2>
|
|
|
|
|
<p>{% trans "Gemeinsame Footer-Texte und rechtliche Hinweise für die Shell." %}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="grid two lang-pairs">
|
|
|
|
|
<div class="lang-block">
|
|
|
|
|
<h3>{% trans "Deutsch" %}</h3>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.footer_text.id_for_label }}">{{ form.footer_text.label }}</label>
|
|
|
|
|
{{ form.footer_text }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.legal_notice.id_for_label }}">{{ form.legal_notice.label }}</label>
|
|
|
|
|
{{ form.legal_notice }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="lang-block">
|
|
|
|
|
<h3>{% trans "English" %}</h3>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.footer_text_en.id_for_label }}">{{ form.footer_text_en.label }}</label>
|
|
|
|
|
{{ form.footer_text_en }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="field">
|
|
|
|
|
<label for="{{ form.legal_notice_en.id_for_label }}">{{ form.legal_notice_en.label }}</label>
|
|
|
|
|
{{ form.legal_notice_en }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="toolbar" style="margin-top:1.25rem;">
|
|
|
|
|
<div class="hint">{% trans "TUBCO bleibt als Standard erhalten, bis hier Werte geändert oder Dateien hochgeladen werden." %}</div>
|
|
|
|
|
@@ -73,3 +169,59 @@
|
|
|
|
|
</form>
|
|
|
|
|
</section>
|
|
|
|
|
{% endblock %}
|
|
|
|
|
|
|
|
|
|
{% block extra_scripts %}
|
|
|
|
|
<script>
|
|
|
|
|
(() => {
|
|
|
|
|
const byId = (id) => document.getElementById(id);
|
|
|
|
|
const title = byId('{{ form.portal_title.id_for_label }}');
|
|
|
|
|
const company = byId('{{ form.company_name.id_for_label }}');
|
|
|
|
|
const footer = byId('{{ form.footer_text.id_for_label }}');
|
|
|
|
|
const legal = byId('{{ form.legal_notice.id_for_label }}');
|
|
|
|
|
const primary = byId('{{ form.primary_color.id_for_label }}');
|
|
|
|
|
const secondary = byId('{{ form.secondary_color.id_for_label }}');
|
|
|
|
|
const logo = byId('{{ form.logo_image.id_for_label }}');
|
|
|
|
|
const previewLogo = byId('branding-preview-logo');
|
|
|
|
|
const previewTitle = byId('branding-preview-title');
|
|
|
|
|
const previewCompany = byId('branding-preview-company');
|
|
|
|
|
const previewFooter = byId('branding-preview-footer');
|
|
|
|
|
const previewLegal = byId('branding-preview-legal');
|
|
|
|
|
const previewPrimary = byId('branding-preview-primary');
|
|
|
|
|
const previewSecondary = byId('branding-preview-secondary');
|
|
|
|
|
const preview = byId('branding-preview');
|
|
|
|
|
if (!preview) return;
|
|
|
|
|
|
|
|
|
|
const defaultLogo = preview.dataset.defaultLogo || '';
|
|
|
|
|
|
|
|
|
|
function syncPreview() {
|
|
|
|
|
if (previewTitle && title) previewTitle.textContent = title.value || '{{ branding.portal_title|escapejs }}';
|
|
|
|
|
if (previewCompany && company) previewCompany.textContent = company.value || '{{ branding.company_name|escapejs }}';
|
|
|
|
|
if (previewFooter && footer) previewFooter.textContent = footer.value || '{{ branding.footer_text|default:branding.portal_title|escapejs }}';
|
|
|
|
|
if (previewLegal && legal) previewLegal.textContent = legal.value || '{{ branding.legal_notice|escapejs }}';
|
|
|
|
|
if (previewPrimary && primary) previewPrimary.style.background = primary.value || '#000078';
|
|
|
|
|
if (previewSecondary && secondary) previewSecondary.style.background = secondary.value || '#c0002b';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[title, company, footer, legal, primary, secondary].forEach((input) => {
|
|
|
|
|
if (input) input.addEventListener('input', syncPreview);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (logo && previewLogo) {
|
|
|
|
|
logo.addEventListener('change', () => {
|
|
|
|
|
const file = logo.files && logo.files[0];
|
|
|
|
|
if (!file) {
|
|
|
|
|
previewLogo.src = defaultLogo;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
reader.onload = (event) => {
|
|
|
|
|
previewLogo.src = event.target.result;
|
|
|
|
|
};
|
|
|
|
|
reader.readAsDataURL(file);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
syncPreview();
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
{% endblock %}
|
|
|
|
|
|