132 lines
6.7 KiB
HTML
132 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="{{ theme | default('auto') }}">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{% block title %}Plex Sync{% endblock %}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="{{ url_for('static', path='styles.css') }}">
|
|
|
|
<!-- ✅ 图标支持（用到 svg 图标） -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<!-- Sidebar -->
|
|
<div class="col-auto col-md-3 bg-body-tertiary sidebar border-end vh-100 custom-sidebar">
|
|
<div id="sidebar" class="collapse collapse-horizontal show">
|
|
<!-- theme button -->
|
|
<div class="position-fixed bottom-0 end-0 m-4 z-3">
|
|
<div class="dropdown border rounded shadow" style="background-color: var(--bs-body-bg); border-color: var(--bs-border-color);">
|
|
<button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center" id="bd-theme"
|
|
type="button" aria-expanded="false" data-bs-toggle="dropdown"
|
|
aria-label="Toggle theme ({{ theme }})">
|
|
<span class="me-2">
|
|
{% if theme == 'light' %}
|
|
🌞
|
|
{% elif theme == 'dark' %}
|
|
🌙
|
|
{% else %}
|
|
🌓
|
|
{% endif %}
|
|
</span>
|
|
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme">
|
|
<li>
|
|
<form method="post" action="/set-theme">
|
|
<button type="submit" name="theme" value="light"
|
|
class="dropdown-item d-flex align-items-center">
|
|
🌞 Light
|
|
</button>
|
|
<button type="submit" name="theme" value="dark"
|
|
class="dropdown-item d-flex align-items-center">
|
|
🌙 Dark
|
|
</button>
|
|
<button type="submit" name="theme" value="auto"
|
|
class="dropdown-item d-flex align-items-center">
|
|
🌓 Auto
|
|
</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- sidebar contents -->
|
|
<div class="p-3">
|
|
<a href="/" class="d-flex align-items-center justify-content-center nav-link text-decoration-none">
|
|
<!-- logo file-music-fill 🎵 -->
|
|
<i class="bi bi-file-music-fill"></i>
|
|
<!-- title -->
|
|
<span class="d-none d-md-inline ms-2">Plex Sync</span>
|
|
</a>
|
|
<hr class="d-none d-md-block">
|
|
<ul class="nav nav-pills flex-column">
|
|
<li class="nav-item">
|
|
<a href="/login" class="nav-link {% if path == '/login' %}active{% endif %}">
|
|
<!-- login icon -->
|
|
<i class="bi bi-person-fill-lock"></i>
|
|
<span class="d-none d-md-inline ms-2">登录信息</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/playlist" class="nav-link {% if path == '/playlist' %}active{% endif %}">
|
|
<!-- playlist icon -->
|
|
<i class="bi bi-music-note-list"></i>
|
|
<span class="d-none d-md-inline ms-2">播放列表设置</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- main contents -->
|
|
<main class="col ms-sm-auto px-md-4 py-4">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
{% if message %}
|
|
<div class="position-fixed top-0 start-50 translate-middle-x p-3 w-75" style="z-index: 1055; margin-top: 20px;">
|
|
<div id="messageToast" class="toast text-bg-{{ message_type | default('info') }} border-0 glass-toast glass-toast-{{ message_type | default('info') }} w-100" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body">
|
|
{{ message }}
|
|
</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JS for Bootstrap dropdown, collapse, etc -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// check system theme and apply it
|
|
function applyAutoTheme() {
|
|
// default as dark theme
|
|
const systemTheme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-bs-theme', systemTheme);
|
|
}
|
|
|
|
// auto set theme
|
|
if ("{{ theme }}" === "auto") {
|
|
applyAutoTheme();
|
|
// listen for system theme changes
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyAutoTheme);
|
|
}
|
|
// show toast message
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const toastEl = document.getElementById('messageToast');
|
|
if (toastEl) {
|
|
const toast = new bootstrap.Toast(toastEl, { delay: 3000 });
|
|
toast.show();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |