PetProject/logboard
PetProject/logboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: move templates to app/ and extract CSS/JS to static files

Browse Source
This commit is contained in:
Сергей Антропов 2025-08-20 15:27:59 +03:00
parent e80f665470
commit 910e83be50
7 changed files with 3179 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
app/static/css/error.css Normal file
View File

@ -0,0 +1,211 @@
: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;
}

2584
app/static/css/index.css Normal file
View File

File diff suppressed because it is too large Load Diff

279
app/static/css/login.css Normal file
View File

@ -0,0 +1,279 @@
/* 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;
}

105
app/static/js/login.js Normal file
View File

@ -0,0 +1,105 @@
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;

0
templates/error.html → app/templates/error.html
View File

0
templates/index.html → app/templates/index.html
View File

0
templates/login.html → app/templates/login.html
View File