DevOpsTools/LogBoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update paths and add static files support for Docker

Browse Source
This commit is contained in:
Сергей Антропов
2025-08-20 15:45:12 +03:00
parent 910e83be50
commit c925e4920a
10 changed files with 6084 additions and 9273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

489
app/static/css/login.css
View File

@@ -1,279 +1,280 @@
/* THEME TOKENS */
:root{
--bg:#0e0f13; --panel:#151821; --muted:#8b94a8; --accent:#7aa2f7; --ok:#9ece6a; --warn:#e0af68; --err:#f7768e; --fg:#e5e9f0;
--border:#2a2f3a; --tab:#1b2030; --tab-active:#22283a; --chip:#2b3142; --link:#9ab8ff;
}
:root[data-theme="light"]{
--bg:#f7f9fc; --panel:#ffffff; --muted:#667085; --accent:#3b82f6; --ok:#15803d; --warn:#b45309; --err:#b91c1c; --fg:#0f172a;
--border:#e5e7eb; --tab:#eef2ff; --tab-active:#dbeafe; --chip:#eef2f7; --link:#1d4ed8;
}
/* THEME TOKENS */
:root{
--bg:#0e0f13; --panel:#151821; --muted:#8b94a8; --accent:#7aa2f7; --ok:#9ece6a; --warn:#e0af68; --err:#f7768e; --fg:#e5e9f0;
--border:#2a2f3a; --tab:#1b2030; --tab-active:#22283a; --chip:#2b3142; --link:#9ab8ff;
}
:root[data-theme="light"]{
--bg:#f7f9fc; --panel:#ffffff; --muted:#667085; --accent:#3b82f6; --ok:#15803d; --warn:#b45309; --err:#b91c1c; --fg:#0f172a;
--border:#e5e7eb; --tab:#eef2ff; --tab-active:#dbeafe; --chip:#eef2f7; --link:#1d4ed8;
}
*{box-sizing:border-box}
html,body{height:100%; margin: 0; padding: 0;}
body{background:var(--bg);color:var(--fg);font:13px/1.45 ui-monospace,Menlo,Consolas,monospace;}
*{box-sizing:border-box}
html,body{height:100%; margin: 0; padding: 0;}
body{background:var(--bg);color:var(--fg);font:13px/1.45 ui-monospace,Menlo,Consolas,monospace;}
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.login-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 40px;
width: 100%;
max-width: 400px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.login-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 40px;
width: 100%;
max-width: 400px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.login-header {
text-align: center;
margin-bottom: 32px;
}
.login-header {
text-align: center;
margin-bottom: 32px;
}
.login-logo {
font-size: 32px;
color: var(--accent);
margin-bottom: 16px;
}
.login-logo {
font-size: 32px;
color: var(--accent);
margin-bottom: 16px;
}
.login-title {
font-size: 24px;
font-weight: 600;
color: var(--fg);
margin: 0 0 8px 0;
}
.login-title {
font-size: 24px;
font-weight: 600;
color: var(--fg);
margin: 0 0 8px 0;
}
.login-subtitle {
font-size: 14px;
color: var(--muted);
margin: 0;
}
.login-subtitle {
font-size: 14px;
color: var(--muted);
margin: 0;
}
.login-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.login-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-label {
font-size: 12px;
font-weight: 500;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-label {
font-size: 12px;
font-weight: 500;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-input {
background: var(--chip);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
color: var(--fg);
transition: all 0.2s ease;
font-family: inherit;
}
.form-input {
background: var(--chip);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
color: var(--fg);
transition: all 0.2s ease;
font-family: inherit;
}
.form-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1);
}
.form-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1);
}
.form-input::placeholder {
color: var(--muted);
}
.form-input::placeholder {
color: var(--muted);
}
.password-input-wrapper {
position: relative;
width: 100%;
}
.password-input-wrapper {
position: relative;
width: 100%;
}
.password-toggle {
position: absolute;
right: 8px; /* Ближе к краю для всех устройств */
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--muted);
cursor: pointer;
padding: 6px;
border-radius: 4px;
transition: all 0.2s ease;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
}
.password-toggle {
position: absolute;
right: 8px; /* Ближе к краю для всех устройств */
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--muted);
cursor: pointer;
padding: 6px;
border-radius: 4px;
transition: all 0.2s ease;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
}
.password-toggle:hover {
color: var(--fg);
background: var(--chip);
}
.password-toggle:hover {
color: var(--fg);
background: var(--chip);
}
.password-toggle:active {
transform: translateY(-50%) scale(0.95);
}
.password-toggle:active {
transform: translateY(-50%) scale(0.95);
}
.password-input-wrapper .form-input {
padding-right: 40px; /* Место для кнопки */
width: 100%; /* Поле на всю ширину */
}
.password-input-wrapper .form-input {
padding-right: 40px; /* Место для кнопки */
width: 100%; /* Поле на всю ширину */
}
.login-button {
background: var(--accent);
color: #0b0d12;
border: none;
border-radius: 8px;
padding: 14px 24px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
margin-top: 8px;
}
.login-button {
background: var(--accent);
color: #0b0d12;
border: none;
border-radius: 8px;
padding: 14px 24px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
margin-top: 8px;
}
.login-button:hover {
background: #6b8fd8;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(122, 162, 247, 0.3);
}
.login-button:hover {
background: #6b8fd8;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(122, 162, 247, 0.3);
}
.login-button:disabled {
background: var(--muted);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.login-button:disabled {
background: var(--muted);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.error-message {
background: rgba(247, 118, 142, 0.1);
border: 1px solid var(--err);
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
color: var(--err);
display: none;
}
.error-message {
background: rgba(247, 118, 142, 0.1);
border: 1px solid var(--err);
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
color: var(--err);
display: none;
}
.error-message.show {
display: block;
}
.error-message.show {
display: block;
}
.loading-spinner {
display: none;
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 8px;
}
.loading-spinner {
display: none;
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 8px;
}
.loading-spinner.show {
display: inline-block;
}
.loading-spinner.show {
display: inline-block;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.footer {
text-align: center;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--muted);
}
.footer {
text-align: center;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--muted);
}
.footer a {
color: var(--link);
text-decoration: none;
}
.footer a {
color: var(--link);
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
.footer a:hover {
text-decoration: underline;
}
/* Theme toggle */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted);
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
}
/* Theme toggle */
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted);
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 12px;
}
.theme-toggle input {
appearance: none;
width: 36px;
height: 20px;
border-radius: 999px;
position: relative;
background: var(--chip);
border: 1px solid var(--border);
cursor: pointer;
transition: background 0.2s ease;
}
.theme-toggle input {
appearance: none;
width: 36px;
height: 20px;
border-radius: 999px;
position: relative;
background: var(--chip);
border: 1px solid var(--border);
cursor: pointer;
transition: background 0.2s ease;
}
.theme-toggle input::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--fg);
transition: transform 0.2s ease;
}
.theme-toggle input::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--fg);
transition: transform 0.2s ease;
}
.theme-toggle input:checked::after {
transform: translateX(16px);
}
.theme-toggle input:checked::after {
transform: translateX(16px);
}
.theme-toggle input:checked {
background: var(--accent);
}
.theme-toggle input:checked {
background: var(--accent);
}
@media (max-width: 480px) {
.login-card {
padding: 24px;
margin: 16px;
}
.login-title {
font-size: 20px;
}
.theme-toggle {
top: 16px;
right: 16px;
padding: 6px 10px;
font-size: 11px;
}
@media (max-width: 480px) {
.login-card {
padding: 24px;
margin: 16px;
}
.login-title {
font-size: 20px;
}
.theme-toggle {
top: 16px;
right: 16px;
padding: 6px 10px;
font-size: 11px;
}
}

35
app/static/js/error.js Normal file
View File

@@ -0,0 +1,35 @@
// Theme toggle functionality
function toggleTheme() {
const html = document.documentElement;
const currentTheme = html.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
html.setAttribute('data-theme', newTheme);
localStorage.setItem('lb_theme', newTheme);
// Update theme toggle button
const themeButton = document.querySelector('.theme-toggle');
if (themeButton) {
themeButton.textContent = newTheme === 'light' ? '🌙' : '☀️';
}
}
// Initialize theme on page load
document.addEventListener('DOMContentLoaded', function() {
const savedTheme = localStorage.getItem('lb_theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);
// Update theme toggle button
const themeButton = document.querySelector('.theme-toggle');
if (themeButton) {
themeButton.textContent = savedTheme === 'light' ? '🌙' : '☀️';
}
});
// Keyboard shortcut for theme toggle (Ctrl+T)
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 't') {
e.preventDefault();
toggleTheme();
}
});

5685
app/static/js/index.js Normal file
View File

File diff suppressed because it is too large Load Diff

197
app/static/js/login.js
View File

@@ -1,105 +1,106 @@
flex-direction: column;
gap: 8px;
}
// Theme toggle
(function initTheme(){
const saved = localStorage.lb_theme || 'dark';
document.documentElement.setAttribute('data-theme', saved);
document.getElementById('themeSwitch').checked = (saved==='light');
document.getElementById('themeSwitch').addEventListener('change', ()=>{
const t = document.getElementById('themeSwitch').checked ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', t);
localStorage.lb_theme = t;
});
})();
.form-label {
font-size: 12px;
font-weight: 500;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
// Password toggle
document.getElementById('passwordToggle').addEventListener('click', function() {
const passwordInput = document.getElementById('password');
const icon = this.querySelector('i');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
icon.className = 'fas fa-eye-slash';
} else {
passwordInput.type = 'password';
icon.className = 'fas fa-eye';
}
});
.form-input {
background: var(--chip);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
color: var(--fg);
transition: all 0.2s ease;
font-family: inherit;
// Login form
document.getElementById('loginForm').addEventListener('submit', async function(e) {
e.preventDefault();
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value;
const loginButton = document.getElementById('loginButton');
const buttonText = document.getElementById('buttonText');
const loadingSpinner = document.getElementById('loadingSpinner');
const errorMessage = document.getElementById('errorMessage');
// Validation
if (!username || !password) {
showError('Пожалуйста, заполните все поля');
return;
}
// Show loading state
loginButton.disabled = true;
buttonText.textContent = 'Вход...';
loadingSpinner.classList.add('show');
hideError();
try {
const response = await fetch('/api/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: username,
password: password
})
});
if (response.ok) {
const data = await response.json();
// Store token in localStorage
localStorage.setItem('access_token', data.access_token);
// Redirect to main page
window.location.href = '/';
} else {
const errorData = await response.json();
showError(errorData.detail || 'Ошибка входа в систему');
}
} catch (error) {
console.error('Login error:', error);
showError('Ошибка соединения с сервером');
} finally {
// Reset loading state
loginButton.disabled = false;
buttonText.textContent = 'Войти';
loadingSpinner.classList.remove('show');
}
});
.form-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.1);
}
function showError(message) {
const errorMessage = document.getElementById('errorMessage');
errorMessage.textContent = message;
errorMessage.classList.add('show');
}
.form-input::placeholder {
color: var(--muted);
}
function hideError() {
const errorMessage = document.getElementById('errorMessage');
errorMessage.classList.remove('show');
}
.password-input-wrapper {
position: relative;
width: 100%;
}
// Auto-focus on username field
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('username').focus();
});
.password-toggle {
position: absolute;
right: 8px; /* Ближе к краю для всех устройств */
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--muted);
cursor: pointer;
padding: 6px;
border-radius: 4px;
transition: all 0.2s ease;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
}
.password-toggle:hover {
color: var(--fg);
background: var(--chip);
}
.password-toggle:active {
transform: translateY(-50%) scale(0.95);
}
.password-input-wrapper .form-input {
padding-right: 40px; /* Место для кнопки */
width: 100%; /* Поле на всю ширину */
}
.login-button {
background: var(--accent);
color: #0b0d12;
border: none;
border-radius: 8px;
padding: 14px 24px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
margin-top: 8px;
}
.login-button:hover {
background: #6b8fd8;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(122, 162, 247, 0.3);
}
.login-button:disabled {
background: var(--muted);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.error-message {
background: rgba(247, 118, 142, 0.1);
border: 1px solid var(--err);
border-radius: 8px;
padding: 12px 16px;
font-size: 14px;
// Handle Enter key in password field
document.getElementById('password').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
document.getElementById('loginForm').dispatchEvent(new Event('submit'));
}
});