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;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
.calib-card {
|
||||
background: var(--card-bg);
|
||||
@@ -200,6 +212,9 @@
|
||||
<body>
|
||||
<!-- Navigation 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">
|
||||
<i class="bi bi-speedometer2"></i> Dashboard
|
||||
</a>
|
||||
|
||||
@@ -68,127 +68,18 @@
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
.sensor-card {
|
||||
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 {
|
||||
/* Logo in navigation */
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.signal-bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 3px;
|
||||
height: 30px;
|
||||
.nav-logo img {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.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 */
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
@@ -261,6 +152,9 @@
|
||||
<body>
|
||||
<!-- Navigation 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">
|
||||
<i class="bi bi-speedometer2"></i> Dashboard
|
||||
</a>
|
||||
|
||||
@@ -63,6 +63,18 @@
|
||||
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 {
|
||||
max-height: calc(100vh - 200px);
|
||||
@@ -217,6 +229,9 @@
|
||||
<body>
|
||||
<!-- Navigation 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">
|
||||
<i class="bi bi-speedometer2"></i> Dashboard
|
||||
</a>
|
||||
|
||||
@@ -62,6 +62,18 @@
|
||||
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-section {
|
||||
background: var(--card-bg);
|
||||
@@ -166,6 +178,9 @@
|
||||
<body>
|
||||
<!-- Navigation 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">
|
||||
<i class="bi bi-speedometer2"></i> Dashboard
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user