102 lines
5.3 KiB
HTML
102 lines
5.3 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}Logo Customization - DigiServer{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container" style="max-width: 900px;">
|
||
<h1 style="margin-bottom: 25px;">🎨 Logo Customization</h1>
|
||
|
||
<div class="card" style="margin-bottom: 20px;">
|
||
<h2 style="margin-bottom: 20px;">📸 Upload Custom Logos</h2>
|
||
|
||
<!-- Header Logo -->
|
||
<div style="margin-bottom: 30px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
|
||
<h3 style="margin-bottom: 15px;">Header Logo (Small)</h3>
|
||
<p style="color: #666; margin-bottom: 15px;">
|
||
This logo appears in the top header next to "DigiServer" text.<br>
|
||
<strong>Recommended:</strong> 150x40 pixels (or similar aspect ratio), transparent background PNG
|
||
</p>
|
||
|
||
<div style="display: flex; align-items: center; gap: 20px; margin-bottom: 15px;">
|
||
<div style="flex: 1;">
|
||
<img src="{{ url_for('static', filename='uploads/header_logo.png') }}?v={{ version }}"
|
||
alt="Current Header Logo"
|
||
style="max-height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 10px; border-radius: 4px;"
|
||
onerror="this.src='{{ url_for('static', filename='icons/monitor.svg') }}'; this.style.filter='brightness(0) invert(1)'; this.style.maxWidth='50px';">
|
||
<p style="margin-top: 5px; font-size: 0.9rem; color: #888;">Current Header Logo</p>
|
||
</div>
|
||
</div>
|
||
|
||
<form method="POST" action="{{ url_for('admin.upload_header_logo') }}" enctype="multipart/form-data">
|
||
<div style="margin-bottom: 10px;">
|
||
<input type="file" name="header_logo" accept="image/png,image/jpeg,image/svg+xml" required
|
||
style="padding: 10px; border: 2px solid #ddd; border-radius: 4px; width: 100%;">
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">📤 Upload Header Logo</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Login Logo -->
|
||
<div style="margin-bottom: 30px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
|
||
<h3 style="margin-bottom: 15px;">Login Page Logo (Large)</h3>
|
||
<p style="color: #666; margin-bottom: 15px;">
|
||
This logo appears on the left side of the login page (2/3 of screen).<br>
|
||
<strong>Recommended:</strong> 800x600 pixels (or similar), transparent background PNG
|
||
</p>
|
||
|
||
<div style="display: flex; align-items: center; gap: 20px; margin-bottom: 15px;">
|
||
<div style="flex: 1;">
|
||
<img src="{{ url_for('static', filename='uploads/login_logo.png') }}?v={{ version }}"
|
||
alt="Current Login Logo"
|
||
style="max-width: 300px; max-height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 8px;"
|
||
onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
|
||
<p style="margin-top: 10px; font-size: 0.9rem; color: #888; display: none;">No login logo uploaded yet</p>
|
||
</div>
|
||
</div>
|
||
|
||
<form method="POST" action="{{ url_for('admin.upload_login_logo') }}" enctype="multipart/form-data">
|
||
<div style="margin-bottom: 10px;">
|
||
<input type="file" name="login_logo" accept="image/png,image/jpeg,image/svg+xml" required
|
||
style="padding: 10px; border: 2px solid #ddd; border-radius: 4px; width: 100%;">
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">📤 Upload Login Logo</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div style="padding: 15px; background: #e7f3ff; border-radius: 8px; border-left: 4px solid #0066cc;">
|
||
<h4 style="margin: 0 0 10px 0;">ℹ️ Logo Guidelines</h4>
|
||
<ul style="margin: 5px 0; padding-left: 25px; color: #555;">
|
||
<li><strong>Header Logo:</strong> Keep it simple and small (max 200px width recommended)</li>
|
||
<li><strong>Login Logo:</strong> Can be larger and more detailed (800x600px works great)</li>
|
||
<li><strong>Format:</strong> PNG with transparent background recommended, or JPG/SVG</li>
|
||
<li><strong>File Size:</strong> Keep under 2MB for optimal performance</li>
|
||
<li>Logos are cached - clear browser cache if changes don't appear immediately</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 20px;">
|
||
<a href="{{ url_for('admin.admin_panel') }}" class="btn btn-secondary">
|
||
← Back to Admin Panel
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
body.dark-mode div[style*="background: #f8f9fa"] {
|
||
background: #2d3748 !important;
|
||
}
|
||
|
||
body.dark-mode div[style*="background: #e7f3ff"] {
|
||
background: #1e3a5f !important;
|
||
border-left-color: #64b5f6 !important;
|
||
}
|
||
|
||
body.dark-mode p[style*="color: #666"],
|
||
body.dark-mode p[style*="color: #888"],
|
||
body.dark-mode ul[style*="color: #555"] {
|
||
color: #cbd5e0 !important;
|
||
}
|
||
</style>
|
||
{% endblock %}
|