664 lines
18 KiB
HTML
664 lines
18 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="branding-container">
|
|
<!-- Header Section -->
|
|
<div class="page-header">
|
|
<div class="header-content">
|
|
<div class="header-left">
|
|
<h1 class="page-title">
|
|
<span class="page-icon"><i class="ti ti-palette"></i></span>
|
|
Branding Settings
|
|
</h1>
|
|
<p class="page-subtitle">Customize the appearance and branding of {{ branding.app_name }}</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary">
|
|
<i class="ti ti-arrow-left"></i>
|
|
Back to Dashboard
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Branding Preview -->
|
|
<div class="card preview-card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">
|
|
<span class="icon"><i class="ti ti-eye"></i></span>
|
|
Current Branding Preview
|
|
</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="preview-demo">
|
|
<div class="demo-header">
|
|
{% if branding.logo_filename %}
|
|
<img src="{{ url_for('static', filename='uploads/branding/' + branding.logo_filename) }}"
|
|
alt="{{ branding.logo_alt_text }}"
|
|
class="demo-logo">
|
|
{% else %}
|
|
<span class="demo-text-logo">{{ branding.app_name }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="demo-content">
|
|
<p>Welcome to {{ branding.app_name }}</p>
|
|
<button class="btn btn-primary" style="background-color: {{ branding.primary_color }}; border-color: {{ branding.primary_color }};">
|
|
Sample Button
|
|
</button>
|
|
<a href="#" style="color: {{ branding.primary_color }};">Sample Link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Branding Settings Form -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">
|
|
<span class="icon"><i class="ti ti-settings"></i></span>
|
|
Branding Configuration
|
|
</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="POST" enctype="multipart/form-data" class="settings-form">
|
|
<!-- Application Name -->
|
|
<div class="form-section">
|
|
<h3><i class="ti ti-forms"></i> Basic Information</h3>
|
|
<div class="form-group">
|
|
<label for="app_name">Application Name</label>
|
|
<input type="text" id="app_name" name="app_name"
|
|
value="{{ branding.app_name }}"
|
|
class="form-control"
|
|
placeholder="TimeTrack"
|
|
required>
|
|
<small class="form-text">
|
|
This name will appear in the title, navigation, and throughout the interface.
|
|
</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="logo_alt_text">Logo Alternative Text</label>
|
|
<input type="text" id="logo_alt_text" name="logo_alt_text"
|
|
value="{{ branding.logo_alt_text }}"
|
|
class="form-control"
|
|
placeholder="Company Logo">
|
|
<small class="form-text">
|
|
Text displayed when the logo cannot be loaded (accessibility).
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Visual Assets -->
|
|
<div class="form-section">
|
|
<h3><i class="ti ti-photo"></i> Visual Assets</h3>
|
|
<div class="form-row">
|
|
<div class="form-group col-md-6">
|
|
<label for="logo_file">Logo Image</label>
|
|
<input type="file" id="logo_file" name="logo_file"
|
|
accept="image/*"
|
|
class="form-control-file">
|
|
{% if branding.logo_filename %}
|
|
<div class="current-asset">
|
|
<img src="{{ url_for('static', filename='uploads/branding/' + branding.logo_filename) }}"
|
|
alt="{{ branding.logo_alt_text }}"
|
|
class="current-logo">
|
|
<span class="asset-label">Current logo</span>
|
|
</div>
|
|
{% endif %}
|
|
<small class="form-text">
|
|
PNG, JPG, GIF, SVG. Recommended: 200x50px
|
|
</small>
|
|
</div>
|
|
|
|
<div class="form-group col-md-6">
|
|
<label for="favicon_file">Favicon</label>
|
|
<input type="file" id="favicon_file" name="favicon_file"
|
|
accept="image/*"
|
|
class="form-control-file">
|
|
{% if branding.favicon_filename %}
|
|
<div class="current-asset">
|
|
<img src="{{ url_for('static', filename='uploads/branding/' + branding.favicon_filename) }}"
|
|
alt="Current favicon"
|
|
class="current-favicon">
|
|
<span class="asset-label">Current favicon</span>
|
|
</div>
|
|
{% endif %}
|
|
<small class="form-text">
|
|
ICO, PNG. Recommended: 16x16px or 32x32px
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Theme Settings -->
|
|
<div class="form-section">
|
|
<h3><i class="ti ti-color-swatch"></i> Theme Settings</h3>
|
|
<div class="form-group">
|
|
<label for="primary_color">Primary Color</label>
|
|
<div class="color-picker-wrapper">
|
|
<input type="color" id="primary_color" name="primary_color"
|
|
value="{{ branding.primary_color }}"
|
|
class="form-control color-picker">
|
|
<input type="text" value="{{ branding.primary_color }}"
|
|
class="form-control color-value"
|
|
id="primary_color_text"
|
|
pattern="^#[0-9A-Fa-f]{6}$"
|
|
placeholder="#007bff">
|
|
</div>
|
|
<small class="form-text">
|
|
This color will be used for buttons, links, and other UI elements.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Imprint/Legal Page -->
|
|
<div class="form-section">
|
|
<h3><i class="ti ti-scale"></i> Imprint / Legal Page</h3>
|
|
<div class="form-group">
|
|
<label class="toggle-label">
|
|
<input type="checkbox" name="imprint_enabled" id="imprint_enabled"
|
|
{% if branding.imprint_enabled %}checked{% endif %}>
|
|
<span class="toggle-slider"></span>
|
|
<span class="toggle-text">Enable Imprint Page</span>
|
|
</label>
|
|
<small class="form-text">
|
|
When enabled, an "Imprint" link will appear in the footer linking to your custom legal page.
|
|
</small>
|
|
</div>
|
|
|
|
<div class="imprint-settings" id="imprint-settings" style="{% if not branding.imprint_enabled %}display: none;{% endif %}">
|
|
<div class="form-group">
|
|
<label for="imprint_title">Page Title</label>
|
|
<input type="text" id="imprint_title" name="imprint_title"
|
|
value="{{ branding.imprint_title or 'Imprint' }}"
|
|
class="form-control"
|
|
placeholder="Imprint">
|
|
<small class="form-text">
|
|
The title that will be displayed on the imprint page.
|
|
</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="imprint_content">Page Content (HTML supported)</label>
|
|
<textarea id="imprint_content" name="imprint_content"
|
|
class="form-control content-editor"
|
|
rows="15"
|
|
placeholder="Enter your imprint/legal information here...">{{ branding.imprint_content or '' }}</textarea>
|
|
<small class="form-text">
|
|
You can use HTML to format your content. Common tags: <h2>, <h3>, <p>, <strong>, <br>, <a href="">
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Button -->
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="ti ti-device-floppy"></i>
|
|
Save Branding Settings
|
|
</button>
|
|
<a href="{{ url_for('system_admin.system_admin_dashboard') }}" class="btn btn-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Container */
|
|
.branding-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
/* Page Header */
|
|
.page-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
color: white;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.page-icon {
|
|
font-size: 2.5rem;
|
|
display: inline-block;
|
|
animation: rotate 8s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
margin: 0.5rem 0 0 0;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
border: 1px solid #e5e7eb;
|
|
margin-bottom: 1.5rem;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.card-header {
|
|
background: #f8f9fa;
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
color: #1f2937;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.card-title .icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
/* Preview Card */
|
|
.preview-card {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.preview-demo {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.demo-header {
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.demo-logo {
|
|
max-height: 50px;
|
|
max-width: 200px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.demo-text-logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.demo-content {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.demo-content p {
|
|
color: #6b7280;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.demo-content .btn {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
/* Form Sections */
|
|
.form-section {
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 2rem;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.form-section:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-section h3 {
|
|
margin-bottom: 1rem;
|
|
color: #1f2937;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.form-section h3 i {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
/* Form Controls */
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
color: #374151;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 0.625rem 1rem;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.form-text {
|
|
display: block;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* File Input */
|
|
.form-control-file {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.375rem 0;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Current Assets */
|
|
.current-asset {
|
|
margin-top: 0.5rem;
|
|
padding: 0.75rem;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.current-logo {
|
|
max-height: 40px;
|
|
max-width: 120px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.current-favicon {
|
|
width: 32px;
|
|
height: 32px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.asset-label {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Color Picker */
|
|
.color-picker-wrapper {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.color-picker {
|
|
width: 60px;
|
|
height: 38px;
|
|
padding: 0.25rem;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.color-value {
|
|
flex: 1;
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* Toggle Switch */
|
|
.toggle-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
cursor: pointer;
|
|
margin-bottom: 0.5rem;
|
|
padding: 0;
|
|
}
|
|
|
|
.toggle-label input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
|
|
.toggle-slider {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 24px;
|
|
background: #e5e7eb;
|
|
border-radius: 24px;
|
|
transition: background 0.3s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toggle-slider::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
top: 2px;
|
|
left: 2px;
|
|
transition: transform 0.3s;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.toggle-label input[type="checkbox"]:checked + .toggle-slider {
|
|
background: #667eea;
|
|
}
|
|
|
|
.toggle-label input[type="checkbox"]:checked + .toggle-slider::before {
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
.toggle-text {
|
|
font-weight: 500;
|
|
color: #1f2937;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Content Editor */
|
|
.content-editor {
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 0.875rem;
|
|
line-height: 1.5;
|
|
background: #f8f9fa;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
padding: 0.75rem;
|
|
resize: vertical;
|
|
}
|
|
|
|
.imprint-settings {
|
|
margin-top: 1.5rem;
|
|
padding: 1.5rem;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Form Row */
|
|
.form-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-right: -0.5rem;
|
|
margin-left: -0.5rem;
|
|
}
|
|
|
|
.form-row > .col-md-6 {
|
|
flex: 0 0 50%;
|
|
max-width: 50%;
|
|
padding-right: 0.5rem;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
/* Form Actions */
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid #e5e7eb;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
padding: 0.75rem 1.5rem;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: white;
|
|
color: #667eea;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.branding-container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.page-header {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.header-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-row > .col-md-6 {
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.card {
|
|
animation: slideIn 0.3s ease-out;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.card:nth-child(1) { animation-delay: 0.1s; }
|
|
.card:nth-child(2) { animation-delay: 0.2s; }
|
|
.card:nth-child(3) { animation-delay: 0.3s; }
|
|
</style>
|
|
|
|
<script>
|
|
// Sync color picker with text input
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const colorPicker = document.getElementById('primary_color');
|
|
const colorText = document.getElementById('primary_color_text');
|
|
|
|
colorPicker.addEventListener('input', function() {
|
|
colorText.value = this.value;
|
|
});
|
|
|
|
colorText.addEventListener('input', function() {
|
|
if (this.value.match(/^#[0-9A-Fa-f]{6}$/)) {
|
|
colorPicker.value = this.value;
|
|
}
|
|
});
|
|
|
|
// Toggle imprint settings visibility
|
|
const imprintEnabled = document.getElementById('imprint_enabled');
|
|
const imprintSettings = document.getElementById('imprint-settings');
|
|
|
|
imprintEnabled.addEventListener('change', function() {
|
|
if (this.checked) {
|
|
imprintSettings.style.display = 'block';
|
|
} else {
|
|
imprintSettings.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |