created space for more settings
This commit is contained in:
137
templates/settings/tabs/colors.html
Normal file
137
templates/settings/tabs/colors.html
Normal file
@@ -0,0 +1,137 @@
|
||||
{% macro colors_tab(primary_color, secondary_color, csrf_token) %}
|
||||
<form id="colorSettingsForm" method="POST" action="{{ url_for('main.update_colors') }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||
|
||||
<!-- Primary Color Section -->
|
||||
<div class="mb-5">
|
||||
<h6 class="mb-3">Primary Color</h6>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<label class="form-label">Main Color</label>
|
||||
<div class="d-flex align-items-center gap-3 mb-3">
|
||||
<input type="color"
|
||||
class="form-control form-control-color d-none"
|
||||
id="primaryColor"
|
||||
name="primary_color"
|
||||
value="{{ primary_color }}"
|
||||
data-original-value="{{ primary_color }}">
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
onclick="document.getElementById('primaryColor').click()">
|
||||
<i class="fas fa-palette me-1"></i> Choose Color
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-muted">Used for primary buttons, links, and accents</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<label class="form-label">Derived Colors</label>
|
||||
<div class="d-flex gap-3" id="primaryDerivedColors">
|
||||
<div class="text-center">
|
||||
<div class="color-preview p-3 rounded shadow-sm mb-2"
|
||||
data-color-type="base"
|
||||
style="background-color: var(--primary-color); width: 80px; height: 80px;">
|
||||
</div>
|
||||
<small class="d-block text-muted">Base</small>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="color-preview p-3 rounded shadow-sm mb-2"
|
||||
data-color-type="light"
|
||||
style="background-color: var(--primary-light); width: 80px; height: 80px;">
|
||||
</div>
|
||||
<small class="d-block text-muted">Light</small>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="color-preview p-3 rounded shadow-sm mb-2"
|
||||
data-color-type="bg-light"
|
||||
style="background-color: var(--primary-bg-light); width: 80px; height: 80px;">
|
||||
</div>
|
||||
<small class="d-block text-muted">Background</small>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="color-preview p-3 rounded shadow-sm mb-2"
|
||||
data-color-type="opacity"
|
||||
style="background-color: var(--primary-opacity-15); width: 80px; height: 80px;">
|
||||
</div>
|
||||
<small class="d-block text-muted">Opacity 15%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Secondary Color Section -->
|
||||
<div class="mb-5">
|
||||
<h6 class="mb-3">Secondary Color</h6>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<label class="form-label">Main Color</label>
|
||||
<div class="d-flex align-items-center gap-3 mb-3">
|
||||
<input type="color"
|
||||
class="form-control form-control-color d-none"
|
||||
id="secondaryColor"
|
||||
name="secondary_color"
|
||||
value="{{ secondary_color }}"
|
||||
data-original-value="{{ secondary_color }}">
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary"
|
||||
onclick="document.getElementById('secondaryColor').click()">
|
||||
<i class="fas fa-palette me-1"></i> Choose Color
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-muted">Used for secondary elements and highlights</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<label class="form-label">Derived Colors</label>
|
||||
<div class="d-flex gap-3" id="secondaryDerivedColors">
|
||||
<div class="text-center">
|
||||
<div class="color-preview p-3 rounded shadow-sm mb-2"
|
||||
data-color-type="base"
|
||||
style="background-color: var(--secondary-color); width: 80px; height: 80px;">
|
||||
</div>
|
||||
<small class="d-block text-muted">Base</small>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="color-preview p-3 rounded shadow-sm mb-2"
|
||||
data-color-type="light"
|
||||
style="background-color: var(--secondary-light); width: 80px; height: 80px;">
|
||||
</div>
|
||||
<small class="d-block text-muted">Light</small>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="color-preview p-3 rounded shadow-sm mb-2"
|
||||
data-color-type="opacity"
|
||||
style="background-color: var(--secondary-opacity-15); width: 80px; height: 80px;">
|
||||
</div>
|
||||
<small class="d-block text-muted">Opacity 15%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-end gap-2">
|
||||
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#resetColorsModal">
|
||||
<i class="fas fa-undo me-1"></i> Reset to Defaults
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-save me-1"></i> Save Colors
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{% endmacro %}
|
||||
6
templates/settings/tabs/general.html
Normal file
6
templates/settings/tabs/general.html
Normal file
@@ -0,0 +1,6 @@
|
||||
{% macro general_tab() %}
|
||||
<div class="alert alert-info">
|
||||
<i class="fas fa-info-circle me-2"></i>
|
||||
General settings will be available soon.
|
||||
</div>
|
||||
{% endmacro %}
|
||||
6
templates/settings/tabs/security.html
Normal file
6
templates/settings/tabs/security.html
Normal file
@@ -0,0 +1,6 @@
|
||||
{% macro security_tab() %}
|
||||
<div class="alert alert-info">
|
||||
<i class="fas fa-info-circle me-2"></i>
|
||||
Security settings will be available soon.
|
||||
</div>
|
||||
{% endmacro %}
|
||||
Reference in New Issue
Block a user