307 lines
19 KiB
HTML
307 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AIO 3D Slicer</title>
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<!-- Bootstrap Icons -->
|
|
<link href="{{ url_for('static', filename='css/bootstrap-icons.css') }}" rel="stylesheet">
|
|
<style>
|
|
body { padding-top: 56px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f8f9fa; }
|
|
.sidebar { position: fixed; top: 56px; bottom: 0; left: 0; z-index: 100; padding: 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); background-color: #fff; }
|
|
.sidebar-sticky { position: relative; top: 0; height: calc(100vh - 56px); padding-top: 1rem; overflow-x: hidden; overflow-y: auto; }
|
|
|
|
.nav-pills .nav-link { border-radius: 0.5rem; padding: 0.75rem 1rem; font-weight: 500; transition: all 0.2s ease; margin-bottom: 0.25rem; }
|
|
.nav-pills .nav-link:hover { background-color: rgba(13,110,253,0.05); color: #0d6efd !important; }
|
|
.nav-pills .nav-link.active { background-color: #0d6efd; color: white !important; box-shadow: 0 4px 6px rgba(13,110,253,0.3); }
|
|
|
|
.navbar-brand { font-size: 1.25rem; letter-spacing: 0.5px; }
|
|
.card { border: none; border-radius: 0.75rem; overflow: hidden; }
|
|
.card-header { border-bottom: 1px solid rgba(0,0,0,.05); background-color: transparent; }
|
|
|
|
.toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1055; width: auto; max-width: 90%; pointer-events: none; }
|
|
.toast {
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.25);
|
|
pointer-events: auto;
|
|
border: none;
|
|
transform: translateY(-20px);
|
|
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
|
|
}
|
|
.toast.showing, .toast.show {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* 页面切换动画 Page Transition */
|
|
@keyframes pageFadeInSlide {
|
|
0% { opacity: 0; transform: translateY(10px); }
|
|
100% { opacity: 1; transform: translateY(0); }
|
|
}
|
|
main { animation: pageFadeInSlide 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
|
|
|
|
/* 提升 Accordion 折叠栏动画更平滑 */
|
|
.collapsing { transition: height 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
|
|
<div class="container-fluid position-relative d-flex justify-content-between align-items-center">
|
|
<a class="navbar-brand fw-bold" href="{{ url_for('main.index') }}"><i class="bi bi-printer me-2"></i>AIO 3D Slicer</a>
|
|
|
|
<div class="d-none d-md-flex mx-auto" style="position: absolute; left: 50%; transform: translateX(-50%);">
|
|
<div class="btn-group border border-secondary shadow-sm rounded-pill p-1 bg-dark" role="group" style="background-color: #1a1e21 !important;">
|
|
<a href="{{ url_for('main.files') }}" class="btn btn-sm rounded-pill {% if not request.blueprint == 'printer' %}btn-primary active fw-bold text-white px-4{% else %}btn-transparent text-secondary border-0 px-3{% endif %}" style="transition: all 0.2s;"><i class="bi bi-layers me-1"></i>{{ _('Slicer') }}</a>
|
|
<a href="{{ url_for('printer.status') }}" class="btn btn-sm rounded-pill {% if request.blueprint == 'printer' %}btn-primary active fw-bold text-white px-4{% else %}btn-transparent text-secondary border-0 px-3{% endif %}" style="transition: all 0.2s;"><i class="bi bi-printer-fill me-1"></i>{{ _('Printer') }}</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex text-light align-items-center ms-auto">
|
|
<div class="dropdown me-3">
|
|
<button class="btn btn-sm btn-outline-light dropdown-toggle" type="button" id="langDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="bi bi-globe me-1"></i>{{ _('Language') }}
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="langDropdown">
|
|
<li><a class="dropdown-item {% if request.cookies.get('lang') == 'en' %}active{% endif %}" href="{{ url_for('main.set_language', lang='en') }}"><i class="bi bi-translate me-2"></i>English</a></li>
|
|
<li><a class="dropdown-item {% if request.cookies.get('lang') == 'zh-cn' %}active{% endif %}" href="{{ url_for('main.set_language', lang='zh-cn') }}"><i class="bi bi-translate me-2"></i>中文 (简体)</a></li>
|
|
<li><a class="dropdown-item {% if request.cookies.get('lang') == 'de' %}active{% endif %}" href="{{ url_for('main.set_language', lang='de') }}"><i class="bi bi-translate me-2"></i>Deutsch</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
{% if current_user.is_authenticated %}
|
|
{% if current_user.is_guest %}
|
|
<span class="me-3 text-secondary"><i class="bi bi-incognito me-1"></i>{{ _('Guest') }} ({{ current_user.username }})</span>
|
|
<a href="{{ url_for('auth.login') }}" class="btn btn-outline-light btn-sm rounded-pill px-3">{{ _('Login') }}</a>
|
|
{% else %}
|
|
<span class="me-3 text-success fw-semibold"><i class="bi bi-person-circle me-1"></i>{{ current_user.username }}</span>
|
|
<a href="{{ url_for('auth.logout') }}" class="btn btn-outline-light btn-sm rounded-pill px-3">{{ _('Logout') }}</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-white sidebar collapse border-end">
|
|
<div class="sidebar-sticky pt-3 px-2">
|
|
|
|
{% if request.blueprint == 'printer' %}
|
|
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mb-2 text-muted fw-bold text-uppercase" style="font-size: 0.75rem;">
|
|
<span><i class="bi bi-list-task me-1"></i>{{ _('General Operations') }}</span>
|
|
</h6>
|
|
<ul class="nav flex-column nav-pills gap-1">
|
|
<li class="nav-item">
|
|
<a class="nav-link text-dark {% if request.endpoint == 'printer.status' %}active text-white shadow-sm{% endif %}" href="{{ url_for('printer.status') }}">
|
|
<i class="bi bi-activity me-2"></i>{{ _('Printer Status') }}
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-dark {% if request.endpoint == 'printer.prepare' %}active text-white shadow-sm{% endif %}" href="{{ url_for('printer.prepare') }}">
|
|
<i class="bi bi-file-earmark-plus me-2"></i>{{ _('Prepare Print') }}
|
|
</a>
|
|
</li>
|
|
<li class="nav-item mb-1">
|
|
<a class="nav-link text-dark {% if request.endpoint == 'printer.control' %}active text-white shadow-sm{% endif %}" href="{{ url_for('printer.control') }}">
|
|
<i class="bi bi-arrows-move me-2"></i>{{ _('Control') }}
|
|
</a>
|
|
</li>
|
|
<!-- {% if current_user.is_authenticated and not current_user.is_guest %}
|
|
<li class="nav-item mb-1">
|
|
<a class="nav-link text-dark {% if request.endpoint == 'main.account' %}active text-white shadow-sm{% endif %}" href="{{ url_for('main.account') }}">
|
|
<i class="bi bi-person-badge me-2"></i>{{ _('Account Management') }}
|
|
</a>
|
|
</li>
|
|
{% endif %} -->
|
|
</ul>
|
|
|
|
{% if current_user.is_authenticated and current_user.is_admin %}
|
|
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-2 text-muted fw-bold text-uppercase" style="font-size: 0.75rem;">
|
|
<span><i class="bi bi-shield-lock me-1"></i>{{ _('Admin / OctoPrint') }}</span>
|
|
</h6>
|
|
<ul class="nav flex-column nav-pills gap-1 mb-2">
|
|
<li class="nav-item">
|
|
<a class="nav-link text-dark {% if request.endpoint == 'printer.octo_config' %}active text-white shadow-sm{% endif %}" href="{{ url_for('printer.octo_config') }}">
|
|
<i class="bi bi-plug me-2"></i>{{ _('System Config') }}
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-dark {% if request.endpoint == 'printer.octo_embed' %}active text-white shadow-sm{% endif %}" href="{{ url_for('printer.octo_embed') }}">
|
|
<i class="bi bi-window-sidebar me-2"></i>{{ _('OctoPrint Panel') }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mb-2 text-muted fw-bold text-uppercase" style="font-size: 0.75rem;">
|
|
<span><i class="bi bi-list-task me-1"></i>{{ _('General Operations') }}</span>
|
|
</h6>
|
|
<ul class="nav flex-column nav-pills gap-1">
|
|
<li class="nav-item">
|
|
<a class="nav-link text-dark {% if request.endpoint == 'main.index' %}active text-white shadow-sm{% endif %}" href="{{ url_for('main.index') }}">
|
|
<i class="bi bi-house-door me-2"></i>{{ _('Home') }}
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-dark {% if request.endpoint == 'main.files' %}active text-white shadow-sm{% endif %}" href="{{ url_for('main.files') }}">
|
|
<i class="bi bi-folder2-open me-2"></i>{{ _('My Files') }}
|
|
</a>
|
|
</li>
|
|
<li class="nav-item mb-1">
|
|
<a class="nav-link text-dark {% if request.endpoint == 'main.plater' %}active text-white shadow-sm{% endif %}" href="{{ url_for('main.plater') }}">
|
|
<i class="bi bi-grid-3x3 me-2"></i>{{ _('Plater') }}
|
|
</a>
|
|
</li>
|
|
{% if current_user.is_authenticated and not current_user.is_guest %}
|
|
<li class="nav-item mb-1">
|
|
<a class="nav-link text-dark {% if request.endpoint == 'main.account' %}active text-white shadow-sm{% endif %}" href="{{ url_for('main.account') }}">
|
|
<i class="bi bi-person-badge me-2"></i>{{ _('Account Management') }}
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
|
|
{% if current_user.is_authenticated and current_user.is_admin %}
|
|
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-2 text-muted fw-bold text-uppercase" style="font-size: 0.75rem;">
|
|
<span><i class="bi bi-shield-lock me-1"></i>{{ _('Admin Options') }}</span>
|
|
</h6>
|
|
<ul class="nav flex-column nav-pills gap-1 mb-2">
|
|
<li class="nav-item">
|
|
<a class="nav-link text-dark {% if request.endpoint == 'admin.settings' %}active text-white shadow-sm{% endif %}" href="{{ url_for('admin.settings') }}">
|
|
<i class="bi bi-gear me-2"></i>{{ _('System Settings') }}
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-dark {% if request.endpoint == 'admin.users' %}active text-white shadow-sm{% endif %}" href="{{ url_for('admin.users') }}">
|
|
<i class="bi bi-people me-2"></i>{{ _('User Management') }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 mt-4 bg-light min-vh-100 pb-5">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notification Container -->
|
|
<div class="toast-container" id="global-toast-container">
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
{% set toast_class = 'bg-success text-white' if category == 'success' else 'bg-danger text-white' if category == 'danger' else 'bg-warning text-dark' if category == 'warning' else 'bg-primary text-white' %}
|
|
<div class="toast align-items-center border-0 {{ toast_class }} mb-2" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body fw-medium">
|
|
{{ _(message) if _ else 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>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
</div>
|
|
|
|
<!-- Global Custom Alert Modal -->
|
|
<div class="modal fade" id="globalAlertModal" tabindex="-1" aria-hidden="true" style="z-index: 1060;">
|
|
<div class="modal-dialog modal-dialog-centered modal-sm">
|
|
<div class="modal-content border-0 shadow">
|
|
<div class="modal-header bg-warning text-dark py-2">
|
|
<h6 class="modal-title fw-bold" id="globalAlertTitle"><i class="bi bi-exclamation-triangle-fill me-2"></i>{{ _('Notice') }}</h6>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body fs-6 text-center py-4 text-break" id="globalAlertMessage">
|
|
</div>
|
|
<div class="modal-footer border-0 p-2 justify-content-center bg-light">
|
|
<button type="button" class="btn btn-warning px-4 rounded-pill fw-bold" data-bs-dismiss="modal">{{ _('OK') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Global Custom Confirm Modal -->
|
|
<div class="modal fade" id="globalConfirmModal" tabindex="-1" aria-hidden="true" style="z-index: 1060;">
|
|
<div class="modal-dialog modal-dialog-centered modal-sm">
|
|
<div class="modal-content border-0 shadow">
|
|
<div class="modal-header bg-primary text-white py-2">
|
|
<h6 class="modal-title fw-bold"><i class="bi bi-question-circle-fill me-2"></i>{{ _('Confirm') }}</h6>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body fs-6 text-center py-4 text-break" id="globalConfirmMessage">
|
|
</div>
|
|
<div class="modal-footer border-0 p-2 justify-content-center bg-light">
|
|
<button type="button" class="btn btn-outline-secondary px-4 rounded-pill" data-bs-dismiss="modal">{{ _('Cancel') }}</button>
|
|
<button type="button" class="btn btn-primary px-4 rounded-pill fw-bold" id="globalConfirmBtn">{{ _('Yes') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
|
|
<script>
|
|
// Initialize Toasts automatically
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
|
|
var toastList = toastElList.map(function (toastEl) {
|
|
return new bootstrap.Toast(toastEl, { delay: 3000 }).show()
|
|
});
|
|
});
|
|
|
|
// Global Utility: Show Toast dynamically
|
|
window.showToast = function(msg, type='success', duration=3000) {
|
|
const container = document.getElementById('global-toast-container');
|
|
const toastClass = type === 'success' ? 'bg-success text-white' :
|
|
type === 'danger' ? 'bg-danger text-white' :
|
|
type === 'warning' ? 'bg-warning text-dark' : 'bg-primary text-white';
|
|
|
|
const html = `
|
|
<div class="toast align-items-center border-0 ${toastClass} mb-2" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body fw-medium">${msg}</div>
|
|
<button type="button" class="btn-close ${type==='warning'?'':'btn-close-white'} me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.insertAdjacentHTML('beforeend', html);
|
|
const ts = container.lastElementChild;
|
|
new bootstrap.Toast(ts, { autohide: true, delay: duration }).show();
|
|
ts.addEventListener('hidden.bs.toast', () => { ts.remove(); });
|
|
};
|
|
|
|
// Override default alert
|
|
window.customAlert = function(msg, title) {
|
|
document.getElementById('globalAlertMessage').innerHTML = String(msg).replace(/\n/g, '<br>');
|
|
if(title) document.getElementById('globalAlertTitle').innerHTML = '<i class="bi bi-info-circle-fill me-2"></i>' + title;
|
|
else document.getElementById('globalAlertTitle').innerHTML = '<i class="bi bi-exclamation-triangle-fill me-2"></i>Notice';
|
|
new bootstrap.Modal(document.getElementById('globalAlertModal')).show();
|
|
};
|
|
|
|
// Override default confirm
|
|
window.customConfirm = function(msg, onConfirm) {
|
|
document.getElementById('globalConfirmMessage').innerHTML = String(msg).replace(/\n/g, '<br>');
|
|
const modalEl = document.getElementById('globalConfirmModal');
|
|
const modal = new bootstrap.Modal(modalEl);
|
|
|
|
// Clear previous event listener bindings
|
|
const elClone = document.getElementById('globalConfirmBtn').cloneNode(true);
|
|
document.getElementById('globalConfirmBtn').parentNode.replaceChild(elClone, document.getElementById('globalConfirmBtn'));
|
|
|
|
document.getElementById('globalConfirmBtn').addEventListener('click', function() {
|
|
modal.hide();
|
|
if(onConfirm) onConfirm();
|
|
});
|
|
|
|
modal.show();
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|