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

3
Dockerfile
View File

@@ -7,7 +7,8 @@ COPY requirements.txt /app/requirements.txt
RUN pip install --no-cache-dir -r requirements.txt RUN pip install --no-cache-dir -r requirements.txt
COPY app.py /app/app.py COPY app.py /app/app.py
COPY templates /app/templates COPY ./app/templates /app/templates
COPY ./app/static /app/static
# Создаем пользователя и добавляем в группу docker # Создаем пользователя и добавляем в группу docker
RUN useradd -m appuser && \ RUN useradd -m appuser && \

11
app.py
View File

@@ -239,7 +239,7 @@ async def general_exception_handler(request: Request, exc: Exception):
}, status_code=500) }, status_code=500)
# Инициализация шаблонов # Инициализация шаблонов
templates = Jinja2Templates(directory="templates") templates = Jinja2Templates(directory="app/templates")
# Инициализация безопасности # Инициализация безопасности
security = HTTPBearer() security = HTTPBearer()
@@ -253,6 +253,11 @@ SNAP_DIR = os.getenv("LOGBOARD_SNAPSHOT_DIR", "./snapshots")
os.makedirs(SNAP_DIR, exist_ok=True) os.makedirs(SNAP_DIR, exist_ok=True)
app.mount("/snapshots", StaticFiles(directory=SNAP_DIR), name="snapshots") app.mount("/snapshots", StaticFiles(directory=SNAP_DIR), name="snapshots")
# serve static files directory
STATIC_DIR = os.getenv("LOGBOARD_STATIC_DIR", "./app/static")
os.makedirs(STATIC_DIR, exist_ok=True)
app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
# Модели данных # Модели данных
class UserLogin(BaseModel): class UserLogin(BaseModel):
username: str username: str
@@ -541,7 +546,7 @@ def list_containers(projects: Optional[List[str]] = None, include_stopped: bool
return items return items
# ---------- HTML ---------- # ---------- HTML ----------
INDEX_PATH = os.getenv("LOGBOARD_INDEX_HTML", "./templates/index.html") INDEX_PATH = os.getenv("LOGBOARD_INDEX_HTML", "./app/templates/index.html")
def load_index_html() -> str: def load_index_html() -> str:
"""Загружает HTML шаблон главной страницы""" """Загружает HTML шаблон главной страницы"""
with open(INDEX_PATH, "r", encoding="utf-8") as f: with open(INDEX_PATH, "r", encoding="utf-8") as f:
@@ -549,7 +554,7 @@ def load_index_html() -> str:
def load_login_html() -> str: def load_login_html() -> str:
"""Загружает HTML шаблон страницы входа""" """Загружает HTML шаблон страницы входа"""
login_path = "./templates/login.html" login_path = "./app/templates/login.html"
with open(login_path, "r", encoding="utf-8") as f: with open(login_path, "r", encoding="utf-8") as f:
return f.read() return f.read()

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

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

261
app/templates/error.html
View File

@@ -4,220 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ error_title }} - LogBoard+</title> <title>{{ error_title }} - LogBoard+</title>
<style> <link rel="stylesheet" href="/static/css/error.css">
:root {
--bg: #1a1b26;
--fg: #c0caf5;
--panel: #24283b;
--border: #414868;
--accent: #7aa2f7;
--muted: #565a6e;
--ok: #9ece6a;
--warn: #e0af68;
--err: #f7768e;
--chip: #414868;
}
[data-theme="light"] {
--bg: #d5d6db;
--fg: #343b58;
--panel: #e1e2e7;
--border: #9699a3;
--accent: #34548a;
--muted: #9699a3;
--ok: #485e30;
--warn: #8f5e15;
--err: #8c4351;
--chip: #d5d6db;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg);
color: var(--fg);
line-height: 1.6;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, color 0.3s ease;
}
.error-container {
max-width: 600px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
}
.error-icon {
font-size: 4rem;
margin-bottom: 1rem;
color: var(--err);
}
.error-code {
font-size: 3rem;
font-weight: bold;
color: var(--accent);
margin-bottom: 0.5rem;
}
.error-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--fg);
}
.error-message {
font-size: 1rem;
color: var(--muted);
margin-bottom: 2rem;
line-height: 1.6;
}
.error-details {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
padding: 1rem;
margin-bottom: 2rem;
text-align: left;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.9rem;
color: var(--muted);
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background: var(--accent);
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 500;
transition: all 0.2s ease;
border: none;
cursor: pointer;
font-size: 1rem;
}
.btn:hover {
background: var(--accent);
opacity: 0.9;
transform: translateY(-1px);
}
.btn-secondary {
background: var(--chip);
color: var(--fg);
border: 1px solid var(--border);
}
.btn-secondary:hover {
background: var(--border);
}
.btn-group {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.theme-toggle {
position: fixed;
top: 1rem;
right: 1rem;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
font-size: 1.2rem;
color: var(--fg);
z-index: 1000;
}
.theme-toggle:hover {
background: var(--border);
transform: scale(1.1);
}
.theme-toggle:active {
transform: scale(0.95);
}
.auth-notice {
background: var(--warn);
color: var(--bg);
padding: 1rem;
border-radius: 6px;
margin-bottom: 1rem;
font-weight: 500;
}
.footer {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
color: var(--muted);
font-size: 0.9rem;
}
.footer a {
color: var(--accent);
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.error-container {
padding: 1rem;
}
.error-code {
font-size: 2rem;
}
.error-title {
font-size: 1.25rem;
}
.btn-group {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
}
.theme-toggle {
top: 0.5rem;
right: 0.5rem;
width: 40px;
height: 40px;
font-size: 1rem;
}
}
</style>
</head> </head>
<body> <body>
<!-- Кнопка переключателя темы --> <!-- Кнопка переключателя темы -->
@@ -277,50 +64,6 @@
</div> </div>
</div> </div>
<script> <script src="/static/js/error.js"></script>
// Автоматическое определение темы
const savedTheme = localStorage.getItem('lb_theme') || 'dark';
document.documentElement.setAttribute('data-theme', savedTheme);
// Функция для обновления иконки темы
function updateThemeIcon() {
const themeToggle = document.querySelector('.theme-toggle');
const currentTheme = document.documentElement.getAttribute('data-theme');
if (themeToggle) {
if (currentTheme === 'light') {
themeToggle.innerHTML = '🌙';
themeToggle.title = 'Переключить на темную тему (Ctrl+T)';
} else {
themeToggle.innerHTML = '☀️';
themeToggle.title = 'Переключить на светлую тему (Ctrl+T)';
}
}
}
// Переключатель темы
function toggleTheme() {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('lb_theme', newTheme);
// Обновляем иконку
updateThemeIcon();
}
// Добавляем обработчик клавиш для переключения темы (Ctrl+T)
document.addEventListener('keydown', function(e) {
if (e.ctrlKey && e.key === 't') {
e.preventDefault();
toggleTheme();
}
});
// Инициализируем иконку при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
updateThemeIcon();
});
</script>
</body> </body>
</html> </html>

8278
app/templates/index.html
View File

File diff suppressed because it is too large Load Diff

393
app/templates/login.html
View File

@@ -5,288 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1"/> <meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>LogBoard+ - Вход</title> <title>LogBoard+ - Вход</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style> <link rel="stylesheet" href="/static/css/login.css">
/* 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;}
.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-header {
text-align: center;
margin-bottom: 32px;
}
.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-subtitle {
font-size: 14px;
color: var(--muted);
margin: 0;
}
.login-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.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-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::placeholder {
color: var(--muted);
}
.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: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;
color: var(--err);
display: none;
}
.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.show {
display: inline-block;
}
@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 a {
color: var(--link);
text-decoration: none;
}
.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 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:checked::after {
transform: translateX(16px);
}
.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;
}
}
</style>
</head> </head>
<body> <body>
<div class="theme-toggle"> <div class="theme-toggle">
@@ -349,114 +68,6 @@
</div> </div>
</div> </div>
</div> </div>
<script src="/static/js/login.js"></script>
<script>
// 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;
});
})();
// 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';
}
});
// 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');
}
});
function showError(message) {
const errorMessage = document.getElementById('errorMessage');
errorMessage.textContent = message;
errorMessage.classList.add('show');
}
function hideError() {
const errorMessage = document.getElementById('errorMessage');
errorMessage.classList.remove('show');
}
// Auto-focus on username field
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('username').focus();
});
// Handle Enter key in password field
document.getElementById('password').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
document.getElementById('loginForm').dispatchEvent(new Event('submit'));
}
});
</script>
</body> </body>
</html> </html>

5
env.example
View File

@@ -22,8 +22,11 @@ LOGBOARD_PASS=admin
# Директория для сохранения снимков логов (путь внутри контейнера) # Директория для сохранения снимков логов (путь внутри контейнера)
LOGBOARD_SNAPSHOT_DIR=/app/snapshots LOGBOARD_SNAPSHOT_DIR=/app/snapshots
# Директория для статических файлов (CSS, JS, изображения)
LOGBOARD_STATIC_DIR=/app/static
# Путь к HTML шаблону главной страницы # Путь к HTML шаблону главной страницы
LOGBOARD_INDEX_HTML=./templates/index.html LOGBOARD_INDEX_HTML=./app/templates/index.html
# Временная зона для временных меток в логах (например: Europe/Moscow, UTC) # Временная зона для временных меток в логах (например: Europe/Moscow, UTC)
TZ_TS=Europe/Moscow TZ_TS=Europe/Moscow