byun/esp32s3_canlogger_mcp2515
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

상태창디자인 변경

Browse Source
This commit is contained in:
byun
2026-01-19 20:27:13 +00:00
parent c6d42b87cb
commit eda61eef01
1 changed files with 77 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
index.h
View File

@@ -252,76 +252,128 @@ const char index_html[] PROGMEM = R"rawliteral(
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.status-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 18px 12px;
border-radius: 10px;
background: white;
color: #333;
padding: 20px 15px;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
transition: all 0.3s;
border: 2px solid #f0f0f0;
position: relative;
overflow: hidden;
}
.status-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.status-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
border-color: #667eea;
}
.status-card h3 {
font-size: 0.8em;
opacity: 0.95;
margin-bottom: 10px;
letter-spacing: 0.5px;
font-weight: 600;
font-size: 0.75em;
color: #888;
margin-bottom: 12px;
letter-spacing: 1px;
font-weight: 700;
text-transform: uppercase;
}
.status-card .value {
font-size: 1.6em;
font-size: 1.8em;
font-weight: 700;
font-family: 'Courier New', monospace;
line-height: 1.2;
color: #333;
}
/* ON 상태: 녹색 테두리 */
.status-card.status-on {
border-color: #11998e;
}
.status-card.status-on::before {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.status-card.status-on .value {
color: #11998e;
}
/* OFF 상태: 회색 테두리 */
.status-card.status-off {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #ddd;
opacity: 0.7;
}
.status-card.status-off::before {
background: linear-gradient(135deg, #999 0%, #bbb 100%);
}
.status-card.status-off .value {
color: #999;
}
/* 버스 부하율 색상 */
.status-card.bus-load-low {
border-color: #11998e;
}
.status-card.bus-load-low::before {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.status-card.bus-load-low .value {
color: #11998e;
}
.status-card.bus-load-medium {
border-color: #f5576c;
}
.status-card.bus-load-medium::before {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.status-card.bus-load-medium .value {
color: #f5576c;
}
.status-card.bus-load-high {
border-color: #eb3349;
}
.status-card.bus-load-high::before {
background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
}
.status-card.bus-load-high .value {
color: #eb3349;
}
/* 반응형: 모바일 */
@media (max-width: 768px) {
.status-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
gap: 12px;
}
.status-card {
padding: 15px 10px;
padding: 16px 12px;
}
.status-card h3 {
font-size: 0.75em;
font-size: 0.7em;
margin-bottom: 10px;
}
.status-card .value {
font-size: 1.4em;
font-size: 1.5em;
}
}
/* 반응형: 대형 화면 */
@media (min-width: 1200px) {
.status-grid {
grid-template-columns: repeat(5, 1fr);
grid-template-columns: repeat(6, 1fr);
}
}
@@ -513,27 +565,12 @@ const char index_html[] PROGMEM = R"rawliteral(
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
}
.download-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; /* ⭐ #666 → white */
color: white;
}
.download-btn:hover {
background: linear-gradient(135deg, #5568d3 0%, #66409e 100%);
}
.comment-btn {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white; /* ⭐ #666 → white */
}
.comment-btn:hover {
background: linear-gradient(135deg, #e77fe8 0%, #e44459 100%);
}
.delete-btn {
background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
color: white; /* ⭐ #666 → white */
}
.delete-btn:hover {
background: linear-gradient(135deg, #d32f3f 0%, #e53935 100%);
.download-btn:hover, .comment-btn:hover, .delete-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.delete-btn:disabled, .comment-btn:disabled {
background: #cccccc;