Improve Web UI with footer, icon buttons, and better modals
Some checks failed
Validate / validate (push) Failing after 7s

- Add footer with author info (name, email, git repository link)
- Replace device action buttons with icons to save space:
  - Start/Stop: ▶️/⏹️, Settings: ⚙️, Calibrate: 📐, Remove: 🗑️
  - Added hover tooltips with translated text
  - Added btn-icon CSS class for compact styling
- Replace native browser confirm() with custom modal dialog:
  - Matches app theme and supports translations
  - Used for logout and device removal confirmations
  - Added confirm.title, confirm.yes, confirm.no translations
- Disable background scrolling when modals are open:
  - Added modal-open class to body when any modal opens
  - Prevents page scroll behind modals for better UX
  - Applied to all modals: login, settings, calibration, confirmation

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-06 18:18:33 +03:00
parent 110b3ae4ea
commit eca81e11cf
5 changed files with 147 additions and 23 deletions

View File

@@ -44,6 +44,10 @@ body {
line-height: 1.6;
}
body.modal-open {
overflow: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
@@ -218,6 +222,18 @@ section {
color: var(--text-color);
}
.btn-icon {
min-width: auto;
padding: 8px 12px;
font-size: 1.2rem;
flex: 0 0 auto;
}
.btn-icon:hover {
transform: scale(1.1);
opacity: 1;
}
.display-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
@@ -620,6 +636,38 @@ input:-webkit-autofill:focus {
transform: scale(1.1);
}
/* Footer */
.app-footer {
margin-top: 60px;
padding: 30px 0;
border-top: 1px solid var(--border-color);
text-align: center;
}
.footer-content {
color: var(--text-secondary);
font-size: 0.9rem;
}
.footer-content p {
margin: 0;
}
.footer-content strong {
color: var(--text-color);
}
.footer-content a {
color: var(--primary-color);
text-decoration: none;
transition: opacity 0.2s;
}
.footer-content a:hover {
opacity: 0.8;
text-decoration: underline;
}
@media (max-width: 768px) {
.displays-grid,
.devices-grid {