feat(quick-1): add TCK logo to all 4 template navigation bars
- Added .nav-logo CSS styling to dashboard.html, settings.html, calibration.html, files.html - Added logo image at start of each navigation bar using logo/[LOGO] TCK.svg - Logo displays at 40px height, touch-friendly sizing
This commit is contained in:
@@ -62,6 +62,18 @@
|
|||||||
border: 1px solid #dee2e6;
|
border: 1px solid #dee2e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Logo in navigation */
|
||||||
|
.nav-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.nav-logo img {
|
||||||
|
max-height: 40px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* Calibration cards */
|
/* Calibration cards */
|
||||||
.calib-card {
|
.calib-card {
|
||||||
background: var(--card-bg);
|
background: var(--card-bg);
|
||||||
@@ -200,6 +212,9 @@
|
|||||||
<body>
|
<body>
|
||||||
<!-- Navigation Menu -->
|
<!-- Navigation Menu -->
|
||||||
<nav class="nav-menu">
|
<nav class="nav-menu">
|
||||||
|
<a href="/" class="nav-logo">
|
||||||
|
<img src="logo/[LOGO] TCK.svg" alt="TCK" height="40">
|
||||||
|
</a>
|
||||||
<a href="/" class="nav-btn">
|
<a href="/" class="nav-btn">
|
||||||
<i class="bi bi-speedometer2"></i> Dashboard
|
<i class="bi bi-speedometer2"></i> Dashboard
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -68,127 +68,18 @@
|
|||||||
border: 1px solid #dee2e6;
|
border: 1px solid #dee2e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Card styles */
|
/* Logo in navigation */
|
||||||
.sensor-card {
|
.nav-logo {
|
||||||
background: var(--card-bg);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 20px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sensor-card h5 {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #6c757d;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sensor-value {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #212529;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sensor-unit {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #6c757d;
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Status indicators */
|
|
||||||
.status-badge {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
min-width: 80px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-high {
|
|
||||||
background-color: #d1e7dd;
|
|
||||||
color: #0f5132;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-normal {
|
|
||||||
background-color: #cff4fc;
|
|
||||||
color: #055160;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-low {
|
|
||||||
background-color: #f8d7da;
|
|
||||||
color: #842029;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Date/Time display */
|
|
||||||
.datetime-display {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
|
|
||||||
color: white;
|
|
||||||
border-radius: 16px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-display {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 700;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-display {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Station info */
|
|
||||||
.station-info {
|
|
||||||
text-align: center;
|
|
||||||
padding: 15px;
|
|
||||||
background: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.station-id {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #212529;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Communication status */
|
|
||||||
.comm-status {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 15px;
|
justify-content: center;
|
||||||
padding: 15px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
.nav-logo img {
|
||||||
.signal-bars {
|
max-height: 40px;
|
||||||
display: flex;
|
width: auto;
|
||||||
align-items: flex-end;
|
|
||||||
gap: 3px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.signal-bar {
|
|
||||||
width: 8px;
|
|
||||||
background-color: #dee2e6;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signal-bar.active {
|
|
||||||
background-color: var(--success-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.signal-bar:nth-child(1) { height: 25%; }
|
|
||||||
.signal-bar:nth-child(2) { height: 50%; }
|
|
||||||
.signal-bar:nth-child(3) { height: 75%; }
|
|
||||||
.signal-bar:nth-child(4) { height: 100%; }
|
|
||||||
|
|
||||||
/* Grid layout */
|
/* Grid layout */
|
||||||
.dashboard-grid {
|
.dashboard-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -261,6 +152,9 @@
|
|||||||
<body>
|
<body>
|
||||||
<!-- Navigation Menu -->
|
<!-- Navigation Menu -->
|
||||||
<nav class="nav-menu">
|
<nav class="nav-menu">
|
||||||
|
<a href="/" class="nav-logo">
|
||||||
|
<img src="logo/[LOGO] TCK.svg" alt="TCK" height="40">
|
||||||
|
</a>
|
||||||
<a href="/" class="nav-btn active">
|
<a href="/" class="nav-btn active">
|
||||||
<i class="bi bi-speedometer2"></i> Dashboard
|
<i class="bi bi-speedometer2"></i> Dashboard
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -63,6 +63,18 @@
|
|||||||
border: 1px solid #dee2e6;
|
border: 1px solid #dee2e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Logo in navigation */
|
||||||
|
.nav-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.nav-logo img {
|
||||||
|
max-height: 40px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* File list container with scroll */
|
/* File list container with scroll */
|
||||||
.file-list-container {
|
.file-list-container {
|
||||||
max-height: calc(100vh - 200px);
|
max-height: calc(100vh - 200px);
|
||||||
@@ -217,6 +229,9 @@
|
|||||||
<body>
|
<body>
|
||||||
<!-- Navigation Menu -->
|
<!-- Navigation Menu -->
|
||||||
<nav class="nav-menu">
|
<nav class="nav-menu">
|
||||||
|
<a href="/" class="nav-logo">
|
||||||
|
<img src="logo/[LOGO] TCK.svg" alt="TCK" height="40">
|
||||||
|
</a>
|
||||||
<a href="/" class="nav-btn">
|
<a href="/" class="nav-btn">
|
||||||
<i class="bi bi-speedometer2"></i> Dashboard
|
<i class="bi bi-speedometer2"></i> Dashboard
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -62,6 +62,18 @@
|
|||||||
border: 1px solid #dee2e6;
|
border: 1px solid #dee2e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Logo in navigation */
|
||||||
|
.nav-logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.nav-logo img {
|
||||||
|
max-height: 40px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* Settings sections */
|
/* Settings sections */
|
||||||
.settings-section {
|
.settings-section {
|
||||||
background: var(--card-bg);
|
background: var(--card-bg);
|
||||||
@@ -166,6 +178,9 @@
|
|||||||
<body>
|
<body>
|
||||||
<!-- Navigation Menu -->
|
<!-- Navigation Menu -->
|
||||||
<nav class="nav-menu">
|
<nav class="nav-menu">
|
||||||
|
<a href="/" class="nav-logo">
|
||||||
|
<img src="logo/[LOGO] TCK.svg" alt="TCK" height="40">
|
||||||
|
</a>
|
||||||
<a href="/" class="nav-btn">
|
<a href="/" class="nav-btn">
|
||||||
<i class="bi bi-speedometer2"></i> Dashboard
|
<i class="bi bi-speedometer2"></i> Dashboard
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Reference in New Issue
Block a user