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
2025-12-08 21:10:33 +00:00
parent 26d3b798d2
commit 23dcc29cec
5 changed files with 446 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
index.h
View File

@@ -26,37 +26,56 @@ const char index_html[] PROGMEM = R"rawliteral(
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
color: #666;
padding: 20px;
text-align: center;
}
.header h1 { font-size: 1.8em; margin-bottom: 5px; }
.header p { opacity: 0.9; font-size: 0.9em; }
/* ========== 통일된 네비게이션 ========== */
.nav {
background: #2c3e50;
padding: 10px;
background: #f8f9fa;
padding: 0;
border-bottom: 2px solid #e0e0e0;
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.nav a {
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 20px;
text-decoration: none;
padding: 10px 15px;
border-radius: 5px;
color: #666;
font-weight: 500;
font-size: 0.95em;
border-bottom: 3px solid transparent;
transition: all 0.3s;
font-size: 0.9em;
white-space: nowrap;
min-width: 120px;
}
.nav a:hover {
background: #e9ecef;
color: #667eea;
transform: translateY(-2px);
}
.nav a.active {
color: #764ba2;
border-bottom-color: #764ba2;
background: white;
font-weight: 600;
}
.nav a:hover { background: #34495e; }
.nav a.active { background: #3498db; }
.content { padding: 15px; }
/* 전력 경고 배너 */
.power-warning {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
color: white;
color: #666;
padding: 12px 20px;
border-radius: 8px;
margin-bottom: 15px;
@@ -85,7 +104,7 @@ const char index_html[] PROGMEM = R"rawliteral(
/* 전력 상태 표시 */
.power-status {
background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
color: white;
color: #666;
padding: 10px 15px;
border-radius: 8px;
margin-bottom: 15px;
@@ -177,7 +196,7 @@ const char index_html[] PROGMEM = R"rawliteral(
font-size: 0.75em;
font-weight: 700;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.time-sync-banner {
@@ -265,7 +284,8 @@ const char index_html[] PROGMEM = R"rawliteral(
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.status-card.status-off {
background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
opacity: 0.7;
}
h2 {
@@ -319,7 +339,7 @@ const char index_html[] PROGMEM = R"rawliteral(
cursor: pointer;
transition: all 0.3s;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
color: #666;
}
.control-row button:hover {
transform: translateY(-2px);
@@ -340,7 +360,7 @@ const char index_html[] PROGMEM = R"rawliteral(
}
thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
color: #666;
}
th {
padding: 12px 8px;
@@ -440,7 +460,7 @@ const char index_html[] PROGMEM = R"rawliteral(
}
.logging-badge {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white;
color: #666;
padding: 3px 8px;
border-radius: 4px;
font-size: 0.75em;
@@ -459,21 +479,21 @@ const char index_html[] PROGMEM = R"rawliteral(
}
.download-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
color: #666;
}
.download-btn:hover {
background: linear-gradient(135deg, #5568d3 0%, #66409e 100%);
}
.comment-btn {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
color: #666;
}
.comment-btn:hover {
background: linear-gradient(135deg, #e77fe8 0%, #e44459 100%);
}
.delete-btn {
background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
color: white;
color: #666;
}
.delete-btn:hover {
background: linear-gradient(135deg, #d32f3f 0%, #e53935 100%);
@@ -496,7 +516,7 @@ const char index_html[] PROGMEM = R"rawliteral(
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: white;
background-color: #666;
margin: 15% auto;
padding: 25px;
border-radius: 10px;
@@ -547,49 +567,14 @@ const char index_html[] PROGMEM = R"rawliteral(
}
.btn-modal-save {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
color: white;
color: #666;
}
.btn-modal-cancel {
background: #ddd;
color: #333;
}
@media (max-width: 768px) {
body { padding: 5px; }
.header h1 { font-size: 1.5em; }
.header p { font-size: 0.85em; }
.content { padding: 10px; }
.status-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.status-card { padding: 10px; }
.status-card h3 { font-size: 0.7em; }
.status-card .value { font-size: 1.2em; }
h2 { font-size: 1.1em; }
.nav a { padding: 8px 12px; font-size: 0.85em; }
table { min-width: 400px; }
th, td { padding: 6px 4px; font-size: 0.75em; }
.time-sync-banner {
flex-direction: column;
align-items: stretch;
padding: 12px 15px;
}
.time-sync-info {
gap: 10px;
}
.time-value {
font-size: 1em;
}
.btn-time-sync {
width: 100%;
padding: 10px 20px;
}
.file-actions {
width: 100%;
justify-content: stretch;
}
.download-btn, .delete-btn, .comment-btn {
flex: 1;
}
}
/* 파일 형식 선택 라디오 버튼 스타일 */
.format-selector {
@@ -629,6 +614,67 @@ const char index_html[] PROGMEM = R"rawliteral(
color: #7f8c8d;
margin-left: 3px;
}
/* ========== 반응형 디자인 ========== */
@media (max-width: 768px) {
body {
padding: 5px;
}
.container {
border-radius: 10px;
}
.header {
padding: 15px;
flex-direction: column;
text-align: center;
gap: 10px;
}
.header h1 {
font-size: 1.4em;
}
.nav {
padding: 5px;
}
.nav a {
padding: 12px 15px;
font-size: 0.85em;
}
.content {
padding: 15px;
}
.btn {
padding: 10px 20px;
font-size: 13px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.header h1 {
font-size: 1.6em;
}
.nav a {
padding: 13px 18px;
font-size: 0.9em;
}
.content {
padding: 25px;
}
}
@media (min-width: 1025px) {
.content {
padding: 30px;
}
}
</style>
</head>
<body>
@@ -644,7 +690,7 @@ const char index_html[] PROGMEM = R"rawliteral(
<a href="/graph">📈 Graph</a>
<a href="/graph-view">📊 Graph View</a>
<a href="/settings">⚙️ Settings</a>
<a href="/serial">📟 Serial</a>
<a href="/serial">📟 Serial1</a>
<a href="/serial2">📟 Serial2</a>
</div>
@@ -1514,4 +1560,4 @@ const char index_html[] PROGMEM = R"rawliteral(
</html>
)rawliteral";
#endif
#endif