734 lines
41 KiB
HTML
734 lines
41 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}系统设置{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<form method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
|
||
<!-- 主题设置 -->
|
||
<div class="card mb-4 border-light shadow-sm">
|
||
<div class="card-header bg-light">
|
||
<h5 class="mb-0"><i class="fas fa-palette me-2"></i>显示设置</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="theme" class="form-label">主题设置</label>
|
||
<select name="theme" id="theme" class="form-select" required>
|
||
<option value="auto" {% if settings.theme == 'auto' %}selected{% endif %}>自动（跟随系统）</option>
|
||
<option value="light" {% if settings.theme == 'light' %}selected{% endif %}>明亮模式</option>
|
||
<option value="dark" {% if settings.theme == 'dark' %}selected{% endif %}>暗黑模式</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label for="card_style" class="form-label">卡片样式</label>
|
||
<select name="card_style" id="card_style" class="form-select" required>
|
||
<option value="normal" {% if settings.card_style == 'normal' %}selected{% endif %}>正常大小</option>
|
||
<option value="compact" {% if settings.card_style == 'compact' %}selected{% endif %}>紧凑模式</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 网站标题与Logo -->
|
||
<div class="card mb-4 border-light shadow-sm">
|
||
<div class="card-header bg-light">
|
||
<h5 class="mb-0"><i class="fas fa-heading me-2"></i>网站标题与Logo</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="site_title" class="form-label">网站标题</label>
|
||
<input type="text" class="form-control" id="site_title" name="site_title"
|
||
value="{{ settings.site_title }}" required>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<div class="form-check form-switch">
|
||
<input class="form-check-input" type="checkbox" id="show_logo" name="show_logo"
|
||
{% if settings.show_logo %}checked{% endif %}>
|
||
<label class="form-check-label" for="show_logo">在标题左侧显示Logo</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">Logo类型</label>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="logo_type" id="logo_type_icon"
|
||
value="icon" {% if settings.logo_type == 'icon' %}checked{% endif %}>
|
||
<label class="form-check-label" for="logo_type_icon">使用图标</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="logo_type" id="logo_type_image"
|
||
value="image" {% if settings.logo_type == 'image' %}checked{% endif %}>
|
||
<label class="form-check-label" for="logo_type_image">使用图片</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图标选择 -->
|
||
<div id="logoIconSection" class="mb-3" style="{% if settings.logo_type != 'icon' %}display:none;{% endif %}">
|
||
<label class="form-label">选择图标</label>
|
||
<div class="input-group">
|
||
<span class="input-group-text"><i class="fas {{ settings.logo_icon }}"></i></span>
|
||
<select class="form-select" name="logo_icon" id="logo_icon">
|
||
{% for icon, name in icons.items() %}
|
||
<option value="{{ icon }}" {% if icon.endswith(settings.logo_icon) %}selected{% endif %}>
|
||
{{ name }} ({{ icon }})
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片选择 -->
|
||
<div id="logoImageSection" style="{% if settings.logo_type != 'image' %}display:none;{% endif %}">
|
||
<div class="mb-3">
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="logo_image_type" id="logo_image_none" value="none"
|
||
{% if not settings.logo_image %}checked{% endif %}>
|
||
<label class="form-check-label" for="logo_image_none">使用默认图片</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="logo_image_type" id="logo_image_existing" value="existing"
|
||
{% if settings.logo_image %}checked{% endif %}>
|
||
<label class="form-check-label" for="logo_image_existing">选择已上传的Logo</label>
|
||
<input type="hidden" name="selected_logo" id="selected_logo" value="{{ settings.logo_image.split('/')[-1] if settings.logo_image else '' }}">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary mt-2" data-bs-toggle="modal" data-bs-target="#logoModal">
|
||
<i class="fas fa-image me-1"></i>选择Logo
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{% if settings.logo_image and settings.logo_type == 'image' %}
|
||
<div class="current-logo mt-3">
|
||
<p class="mb-1"><strong>当前Logo预览:</strong></p>
|
||
<img src="{{ settings.logo_image }}" style="max-width: 100px; max-height: 100px;" class="img-thumbnail">
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 明亮模式背景设置 -->
|
||
<div class="card mb-4 border-light shadow-sm">
|
||
<div class="card-header bg-light">
|
||
<h5 class="mb-0"><i class="fas fa-sun me-2"></i>明亮模式背景</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="bg_type" id="bg_none" value="none"
|
||
{% if settings.bg_image == 'none' %}checked{% endif %}>
|
||
<label class="form-check-label" for="bg_none">不使用背景</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="bg_type" id="bg_default" value="default"
|
||
{% if settings.bg_image == '/static/background_light.jpg' or (not settings.bg_image or settings.bg_image == '') %}checked{% endif %}>
|
||
<label class="form-check-label" for="bg_default">使用默认明亮背景</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="bg_type" id="bg_existing" value="existing"
|
||
{% if settings.bg_image and settings.bg_image != '/static/background_light.jpg' and settings.bg_image != 'none' and not settings.bg_image.endswith('.mp4') %}checked{% endif %}>
|
||
<label class="form-check-label" for="bg_existing">选择已上传的背景图片</label>
|
||
<input type="hidden" name="selected_bg" id="selected_bg" value="{{ settings.bg_image.split('/')[-1] if settings.bg_image and settings.bg_image != '/static/background_light.jpg' and settings.bg_image != 'none' and not settings.bg_image.endswith('.mp4') else '' }}">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary mt-2" data-bs-toggle="modal" data-bs-target="#bgModal">
|
||
<i class="fas fa-image me-1"></i>选择背景图片
|
||
</button>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="bg_type" id="bg_video" value="video"
|
||
{% if settings.bg_image and settings.bg_image.endswith('.mp4') %}checked{% endif %}>
|
||
<label class="form-check-label" for="bg_video">选择已上传的背景视频</label>
|
||
<input type="hidden" name="selected_video" id="selected_video" value="{{ settings.bg_image.split('/')[-1] if settings.bg_image and settings.bg_image.endswith('.mp4') else '' }}">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary mt-2" data-bs-toggle="modal" data-bs-target="#videoModal">
|
||
<i class="fas fa-video me-1"></i>选择背景视频
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{% if settings.bg_image and settings.bg_image != '/static/background_light.jpg' and settings.bg_image != 'none' %}
|
||
<div class="current-bg mt-3">
|
||
<p class="mb-1"><strong>当前背景预览:</strong></p>
|
||
{% if settings.bg_image.endswith('.mp4') %}
|
||
<video width="300" height="150" controls class="img-thumbnail">
|
||
<source src="{{ settings.bg_image }}" type="video/mp4">
|
||
您的浏览器不支持视频预览
|
||
</video>
|
||
{% else %}
|
||
<img src="{{ settings.bg_image }}" style="max-width: 300px; max-height: 150px;" class="img-thumbnail">
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 暗黑模式背景设置 -->
|
||
<div class="card mb-4 border-light shadow-sm">
|
||
<div class="card-header bg-light">
|
||
<h5 class="mb-0"><i class="fas fa-moon me-2"></i>暗黑模式背景</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="dark_bg_type" id="dark_bg_none" value="none"
|
||
{% if settings.dark_bg_image == 'none' %}checked{% endif %}>
|
||
<label class="form-check-label" for="dark_bg_none">不使用背景</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="dark_bg_type" id="dark_bg_default" value="default"
|
||
{% if settings.dark_bg_image == '/static/background_dark.jpg' or (not settings.dark_bg_image or settings.dark_bg_image == '') %}checked{% endif %}>
|
||
<label class="form-check-label" for="dark_bg_default">使用默认暗黑背景</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="dark_bg_type" id="dark_bg_existing" value="existing"
|
||
{% if settings.dark_bg_image and settings.dark_bg_image != '/static/background_dark.jpg' and settings.dark_bg_image != 'none' and not settings.dark_bg_image.endswith('.mp4') %}checked{% endif %}>
|
||
<label class="form-check-label" for="dark_bg_existing">选择已上传的背景图片</label>
|
||
<input type="hidden" name="selected_dark_bg" id="selected_dark_bg" value="{{ settings.dark_bg_image.split('/')[-1] if settings.dark_bg_image and settings.dark_bg_image != '/static/background_dark.jpg' and settings.dark_bg_image != 'none' and not settings.dark_bg_image.endswith('.mp4') else '' }}">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary mt-2" data-bs-toggle="modal" data-bs-target="#darkBgModal">
|
||
<i class="fas fa-image me-1"></i>选择背景图片
|
||
</button>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="dark_bg_type" id="dark_bg_video" value="video"
|
||
{% if settings.dark_bg_image and settings.dark_bg_image.endswith('.mp4') %}checked{% endif %}>
|
||
<label class="form-check-label" for="dark_bg_video">选择已上传的背景视频</label>
|
||
<input type="hidden" name="selected_dark_video" id="selected_dark_video" value="{{ settings.dark_bg_image.split('/')[-1] if settings.dark_bg_image and settings.dark_bg_image.endswith('.mp4') else '' }}">
|
||
<button type="button" class="btn btn-sm btn-outline-secondary mt-2" data-bs-toggle="modal" data-bs-target="#darkVideoModal">
|
||
<i class="fas fa-video me-1"></i>选择背景视频
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{% if settings.dark_bg_image and settings.dark_bg_image != '/static/background_dark.jpg' and settings.dark_bg_image != 'none' %}
|
||
<div class="current-bg mt-3">
|
||
<p class="mb-1"><strong>当前背景预览:</strong></p>
|
||
{% if settings.dark_bg_image.endswith('.mp4') %}
|
||
<video width="300" height="150" controls class="img-thumbnail">
|
||
<source src="{{ settings.dark_bg_image }}" type="video/mp4">
|
||
您的浏览器不支持视频预览
|
||
</video>
|
||
{% else %}
|
||
<img src="{{ settings.dark_bg_image }}" style="max-width: 300px; max-height: 150px;" class="img-thumbnail">
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card mb-4 border-light shadow-sm">
|
||
<div class="card-header bg-light">
|
||
<h5 class="mb-0"><i class="fas fa-user me-2"></i>游客设置</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-6 mb-3">
|
||
<label for="guest_theme" class="form-label">游客默认主题</label>
|
||
<select name="guest_theme" id="guest_theme" class="form-select">
|
||
<option value="auto" {% if guest_settings.theme == 'auto' %}selected{% endif %}>自动（跟随系统）</option>
|
||
<option value="light" {% if guest_settings.theme == 'light' %}selected{% endif %}>明亮模式</option>
|
||
<option value="dark" {% if guest_settings.theme == 'dark' %}selected{% endif %}>暗黑模式</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6 mb-3">
|
||
<label for="guest_card_style" class="form-label">游客卡片样式</label>
|
||
<select name="guest_card_style" id="guest_card_style" class="form-select">
|
||
<option value="normal" {% if guest_settings.card_style == 'normal' %}selected{% endif %}>正常大小</option>
|
||
<option value="compact" {% if guest_settings.card_style == 'compact' %}selected{% endif %}>紧凑模式</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">游客明亮模式背景</label>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="guest_bg_type" id="guest_bg_none" value="none"
|
||
{% if guest_settings.bg_image == 'none' %}checked{% endif %}>
|
||
<label class="form-check-label" for="guest_bg_none">无背景</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="guest_bg_type" id="guest_bg_default" value="default"
|
||
{% if guest_settings.bg_image == '/static/background_light.jpg' %}checked{% endif %}>
|
||
<label class="form-check-label" for="guest_bg_default">默认背景</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="guest_bg_type" id="guest_bg_system" value="system"
|
||
{% if guest_settings.bg_image not in ['none', '/static/background_light.jpg'] %}checked{% endif %}>
|
||
<label class="form-check-label" for="guest_bg_system">使用系统设置背景</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label">游客暗黑模式背景</label>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="guest_dark_bg_type" id="guest_dark_bg_none" value="none"
|
||
{% if guest_settings.dark_bg_image == 'none' %}checked{% endif %}>
|
||
<label class="form-check-label" for="guest_dark_bg_none">无背景</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="guest_dark_bg_type" id="guest_dark_bg_default" value="default"
|
||
{% if guest_settings.dark_bg_image == '/static/background_dark.jpg' %}checked{% endif %}>
|
||
<label class="form-check-label" for="guest_dark_bg_default">默认背景</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="radio" name="guest_dark_bg_type" id="guest_dark_bg_system" value="system"
|
||
{% if guest_settings.dark_bg_image not in ['none', '/static/background_dark.jpg'] %}checked{% endif %}>
|
||
<label class="form-check-label" for="guest_dark_bg_system">使用系统设置背景</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 页脚设置 -->
|
||
<div class="card mb-4 border-light shadow-sm">
|
||
<div class="card-header bg-light">
|
||
<h5 class="mb-0"><i class="fas fa-code me-2"></i>页脚设置</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<label for="footer_html" class="form-label">自定义页脚HTML代码</label>
|
||
<textarea class="form-control" id="footer_html" name="footer_html" rows="4">{{ settings.footer_html if settings.footer_html else '' }}</textarea>
|
||
<div class="form-text">支持HTML代码，可用于添加版权信息、统计代码等</div>
|
||
</div>
|
||
|
||
<div class="preview-area mt-3 p-3 bg-light rounded">
|
||
<h6>预览效果：</h6>
|
||
<div id="footer_preview">
|
||
{{ settings.footer_html|safe if settings.footer_html else '' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 修改密码 -->
|
||
<div class="card mb-4 border-light shadow-sm">
|
||
<div class="card-header bg-light">
|
||
<h5 class="mb-0"><i class="fas fa-lock me-2"></i>安全设置</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card border-warning">
|
||
<div class="card-header bg-warning text-dark">
|
||
<i class="fas fa-key me-2"></i>修改管理员密码
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<label for="old_password" class="form-label">当前密码</label>
|
||
<input type="password" class="form-control" id="old_password" name="old_password">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="new_password" class="form-label">新密码</label>
|
||
<input type="password" class="form-control" id="new_password" name="new_password">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="confirm_password" class="form-label">确认新密码</label>
|
||
<input type="password" class="form-control" id="confirm_password" name="confirm_password">
|
||
</div>
|
||
<div class="alert alert-info mb-0">
|
||
<i class="fas fa-info-circle me-2"></i>如果不修改密码，请留空这些字段
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-between mt-4">
|
||
<a href="{{ url_for('index') }}" class="btn btn-secondary">
|
||
<i class="fas fa-arrow-left me-2"></i>返回首页
|
||
</a>
|
||
<button type="submit" class="btn btn-primary">
|
||
<i class="fas fa-save me-2"></i>保存设置
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Logo选择模态框 -->
|
||
<div class="modal fade" id="logoModal" tabindex="-1" aria-labelledby="logoModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="logoModalLabel">选择Logo</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
{% for attachment in attachments if attachment.type == 'logo' %}
|
||
<div class="col-md-3 mb-3">
|
||
<div class="card h-100 cursor-pointer" onclick="selectLogo('{{ attachment.filename }}')">
|
||
<img src="{{ url_for('uploaded_logo', filename=attachment.filename) }}"
|
||
class="card-img-top img-thumbnail"
|
||
style="height: 100px; object-fit: contain;">
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 明亮模式背景图片选择模态框 -->
|
||
<div class="modal fade" id="bgModal" tabindex="-1" aria-labelledby="bgModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="bgModalLabel">选择明亮模式背景图片</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
{% for attachment in attachments if attachment.type == 'background' %}
|
||
<div class="col-md-4 mb-3">
|
||
<div class="card h-100 cursor-pointer" onclick="selectBg('{{ attachment.filename }}')">
|
||
<img src="{{ url_for('uploaded_background', filename=attachment.filename) }}"
|
||
class="card-img-top img-thumbnail"
|
||
style="height: 150px; object-fit: cover;">
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 明亮模式背景视频选择模态框 -->
|
||
<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="videoModalLabel">选择明亮模式背景视频</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
{% for attachment in attachments if attachment.type == 'video' %}
|
||
<div class="col-md-6 mb-3">
|
||
<div class="card h-100 cursor-pointer" onclick="selectVideo('{{ attachment.filename }}')">
|
||
<video class="card-img-top img-thumbnail" style="height: 150px; object-fit: cover;" muted>
|
||
<source src="{{ url_for('uploaded_video', filename=attachment.filename) }}" type="video/mp4">
|
||
</video>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 暗黑模式背景图片选择模态框 -->
|
||
<div class="modal fade" id="darkBgModal" tabindex="-1" aria-labelledby="darkBgModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="darkBgModalLabel">选择暗黑模式背景图片</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
{% for attachment in attachments if attachment.type == 'background' %}
|
||
<div class="col-md-4 mb-3">
|
||
<div class="card h-100 cursor-pointer" onclick="selectDarkBg('{{ attachment.filename }}')">
|
||
<img src="{{ url_for('uploaded_background', filename=attachment.filename) }}"
|
||
class="card-img-top img-thumbnail"
|
||
style="height: 150px; object-fit: cover;">
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 暗黑模式背景视频选择模态框 -->
|
||
<div class="modal fade" id="darkVideoModal" tabindex="-1" aria-labelledby="darkVideoModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="darkVideoModalLabel">选择暗黑模式背景视频</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
{% for attachment in attachments if attachment.type == 'video' %}
|
||
<div class="col-md-6 mb-3">
|
||
<div class="card h-100 cursor-pointer" onclick="selectDarkVideo('{{ attachment.filename }}')">
|
||
<video class="card-img-top img-thumbnail" style="height: 150px; object-fit: cover;" muted>
|
||
<source src="{{ url_for('uploaded_video', filename=attachment.filename) }}" type="video/mp4">
|
||
</video>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 页脚预览
|
||
document.getElementById('footer_html').addEventListener('input', function() {
|
||
document.getElementById('footer_preview').innerHTML = this.value;
|
||
});
|
||
// 全局选择函数
|
||
function selectLogo(filename) {
|
||
document.getElementById('selected_logo').value = filename;
|
||
document.getElementById('logo_image_existing').checked = true;
|
||
document.getElementById('logo_image_none').checked = false;
|
||
|
||
// 更新预览
|
||
const previewContainer = document.querySelector('.current-logo');
|
||
if (!previewContainer) {
|
||
// 如果预览容器不存在，创建一个
|
||
const logoImageSection = document.getElementById('logoImageSection');
|
||
const previewDiv = document.createElement('div');
|
||
previewDiv.className = 'current-logo mt-3';
|
||
previewDiv.innerHTML = `
|
||
<p class="mb-1"><strong>当前Logo预览:</strong></p>
|
||
<img src="/upload/logo/${filename}" style="max-width: 100px; max-height: 100px;" class="img-thumbnail">
|
||
`;
|
||
logoImageSection.appendChild(previewDiv);
|
||
} else {
|
||
// 更新现有预览
|
||
previewContainer.querySelector('img').src = `/upload/logo/${filename}`;
|
||
}
|
||
|
||
// 使用原生 JavaScript 关闭模态框
|
||
const logoModal = bootstrap.Modal.getInstance(document.getElementById('logoModal'));
|
||
logoModal.hide();
|
||
}
|
||
|
||
function selectBg(filename) {
|
||
document.getElementById('selected_bg').value = filename;
|
||
document.getElementById('bg_existing').checked = true;
|
||
document.getElementById('bg_none').checked = false;
|
||
document.getElementById('bg_default').checked = false;
|
||
document.getElementById('bg_video').checked = false;
|
||
|
||
// 更新预览
|
||
const previewContainer = document.querySelector('.current-bg');
|
||
if (!previewContainer) {
|
||
const bgSection = document.querySelector('input[name="bg_type"]').closest('.card');
|
||
const previewDiv = document.createElement('div');
|
||
previewDiv.className = 'current-bg mt-3';
|
||
previewDiv.innerHTML = `
|
||
<p class="mb-1"><strong>当前背景预览:</strong></p>
|
||
<img src="/upload/background/${filename}" style="max-width: 300px; max-height: 150px;" class="img-thumbnail">
|
||
`;
|
||
bgSection.querySelector('.card-body').appendChild(previewDiv);
|
||
} else {
|
||
previewContainer.innerHTML = `
|
||
<p class="mb-1"><strong>当前背景预览:</strong></p>
|
||
<img src="/upload/background/${filename}" style="max-width: 300px; max-height: 150px;" class="img-thumbnail">
|
||
`;
|
||
}
|
||
|
||
const bgModal = bootstrap.Modal.getInstance(document.getElementById('bgModal'));
|
||
bgModal.hide();
|
||
}
|
||
|
||
function selectVideo(filename) {
|
||
document.getElementById('selected_video').value = filename;
|
||
document.getElementById('bg_video').checked = true;
|
||
document.getElementById('bg_none').checked = false;
|
||
document.getElementById('bg_default').checked = false;
|
||
document.getElementById('bg_existing').checked = false;
|
||
|
||
// 更新预览
|
||
const previewContainer = document.querySelector('.current-bg');
|
||
if (!previewContainer) {
|
||
const bgSection = document.querySelector('input[name="bg_type"]').closest('.card');
|
||
const previewDiv = document.createElement('div');
|
||
previewDiv.className = 'current-bg mt-3';
|
||
previewDiv.innerHTML = `
|
||
<p class="mb-1"><strong>当前背景预览:</strong></p>
|
||
<video width="300" height="150" controls class="img-thumbnail">
|
||
<source src="/upload/video/${filename}" type="video/mp4">
|
||
您的浏览器不支持视频预览
|
||
</video>
|
||
`;
|
||
bgSection.querySelector('.card-body').appendChild(previewDiv);
|
||
} else {
|
||
previewContainer.innerHTML = `
|
||
<p class="mb-1"><strong>当前背景预览:</strong></p>
|
||
<video width="300" height="150" controls class="img-thumbnail">
|
||
<source src="/upload/video/${filename}" type="video/mp4">
|
||
您的浏览器不支持视频预览
|
||
</video>
|
||
`;
|
||
}
|
||
|
||
const videoModal = bootstrap.Modal.getInstance(document.getElementById('videoModal'));
|
||
videoModal.hide();
|
||
}
|
||
|
||
function selectDarkBg(filename) {
|
||
document.getElementById('selected_dark_bg').value = filename;
|
||
document.getElementById('dark_bg_existing').checked = true;
|
||
document.getElementById('dark_bg_none').checked = false;
|
||
document.getElementById('dark_bg_default').checked = false;
|
||
document.getElementById('dark_bg_video').checked = false;
|
||
|
||
const previewContainer = document.querySelectorAll('.current-bg')[1];
|
||
if (!previewContainer) {
|
||
const darkBgSection = document.querySelector('input[name="dark_bg_type"]').closest('.card');
|
||
const previewDiv = document.createElement('div');
|
||
previewDiv.className = 'current-bg mt-3';
|
||
previewDiv.innerHTML = `
|
||
<p class="mb-1"><strong>当前背景预览:</strong></p>
|
||
<img src="/upload/background/${filename}" style="max-width: 300px; max-height: 150px;" class="img-thumbnail">
|
||
`;
|
||
darkBgSection.querySelector('.card-body').appendChild(previewDiv);
|
||
} else {
|
||
previewContainer.innerHTML = `
|
||
<p class="mb-1"><strong>当前背景预览:</strong></p>
|
||
<img src="/upload/background/${filename}" style="max-width: 300px; max-height: 150px;" class="img-thumbnail">
|
||
`;
|
||
}
|
||
|
||
const darkBgModal = bootstrap.Modal.getInstance(document.getElementById('darkBgModal'));
|
||
darkBgModal.hide();
|
||
}
|
||
|
||
function selectDarkVideo(filename) {
|
||
document.getElementById('selected_dark_video').value = filename;
|
||
document.getElementById('dark_bg_video').checked = true;
|
||
document.getElementById('dark_bg_none').checked = false;
|
||
document.getElementById('dark_bg_default').checked = false;
|
||
document.getElementById('dark_bg_existing').checked = false;
|
||
|
||
const previewContainer = document.querySelectorAll('.current-bg')[1];
|
||
if (!previewContainer) {
|
||
const darkBgSection = document.querySelector('input[name="dark_bg_type"]').closest('.card');
|
||
const previewDiv = document.createElement('div');
|
||
previewDiv.className = 'current-bg mt-3';
|
||
previewDiv.innerHTML = `
|
||
<p class="mb-1"><strong>当前背景预览:</strong></p>
|
||
<video width="300" height="150" controls class="img-thumbnail">
|
||
<source src="/upload/video/${filename}" type="video/mp4">
|
||
您的浏览器不支持视频预览
|
||
</video>
|
||
`;
|
||
darkBgSection.querySelector('.card-body').appendChild(previewDiv);
|
||
} else {
|
||
previewContainer.innerHTML = `
|
||
<p class="mb-1"><strong>当前背景预览:</strong></p>
|
||
<video width="300" height="150" controls class="img-thumbnail">
|
||
<source src="/upload/video/${filename}" type="video/mp4">
|
||
您的浏览器不支持视频预览
|
||
</video>
|
||
`;
|
||
}
|
||
|
||
const darkVideoModal = bootstrap.Modal.getInstance(document.getElementById('darkVideoModal'));
|
||
darkVideoModal.hide();
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 明亮模式背景
|
||
const bgRadios = document.querySelectorAll('input[name="bg_type"]');
|
||
bgRadios.forEach(radio => {
|
||
radio.addEventListener('change', function() {
|
||
document.getElementById('selected_bg').disabled = this.value !== 'existing';
|
||
document.getElementById('selected_video').disabled = this.value !== 'video';
|
||
});
|
||
});
|
||
|
||
// 暗黑模式背景
|
||
const darkBgRadios = document.querySelectorAll('input[name="dark_bg_type"]');
|
||
darkBgRadios.forEach(radio => {
|
||
radio.addEventListener('change', function() {
|
||
document.getElementById('selected_dark_bg').disabled = this.value !== 'existing';
|
||
document.getElementById('selected_dark_video').disabled = this.value !== 'video';
|
||
});
|
||
});
|
||
|
||
// Logo图片类型
|
||
const logoImageRadios = document.querySelectorAll('input[name="logo_image_type"]');
|
||
logoImageRadios.forEach(radio => {
|
||
radio.addEventListener('change', function() {
|
||
document.getElementById('selected_logo').disabled = this.value !== 'existing';
|
||
});
|
||
});
|
||
|
||
// 动态显示/隐藏logo设置部分
|
||
document.querySelectorAll('input[name="logo_type"]').forEach(radio => {
|
||
radio.addEventListener('change', function() {
|
||
document.getElementById('logoIconSection').style.display = this.value === 'icon' ? 'block' : 'none';
|
||
document.getElementById('logoImageSection').style.display = this.value === 'image' ? 'block' : 'none';
|
||
});
|
||
});
|
||
|
||
// 表单验证
|
||
const forms = document.querySelectorAll('.needs-validation');
|
||
forms.forEach(form => {
|
||
form.addEventListener('submit', function(event) {
|
||
if (!form.checkValidity()) {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
}
|
||
form.classList.add('was-validated');
|
||
}, false);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.card-header {
|
||
font-weight: 600;
|
||
}
|
||
.form-check-label {
|
||
font-weight: 500;
|
||
}
|
||
.current-bg img, .current-logo img, .current-bg video {
|
||
border: 2px solid #dee2e6;
|
||
}
|
||
.img-thumbnail {
|
||
background-color: #f8f9fa;
|
||
}
|
||
.cursor-pointer {
|
||
cursor: pointer;
|
||
}
|
||
.cursor-pointer:hover {
|
||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
||
transform: translateY(-2px);
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
.card .card-header {
|
||
border-bottom: 1px solid rgba(0,0,0,.125);
|
||
}
|
||
.card .card-body {
|
||
padding: 1.5rem;
|
||
}
|
||
.card .card-header.bg-light {
|
||
background-color: #abcbeb !important;
|
||
}
|
||
.card .card-header h5 {
|
||
font-size: 1.1rem;
|
||
color: #495057;
|
||
}
|
||
|
||
.card.mb-4 {
|
||
margin-bottom: 1.5rem!important;
|
||
}
|
||
</style>
|
||
{% endblock %} |