디자인 업데이트
This commit is contained in:
119
graph.h
119
graph.h
@@ -31,24 +31,44 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
text-align: center;
|
||||
}
|
||||
.header h1 { font-size: 1.8em; margin-bottom: 5px; }
|
||||
/* ========== 통일된 네비게이션 ========== */
|
||||
.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; }
|
||||
|
||||
.dbc-upload {
|
||||
@@ -112,7 +132,7 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
color: white;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
.no-results-icon {
|
||||
@@ -168,7 +188,7 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
.signal-item:hover { border-color: #43cea2; transform: translateY(-2px); }
|
||||
.signal-item.selected { border-color: #185a9d; background: #e3f2fd; }
|
||||
.signal-name { font-weight: 600; color: #333; margin-bottom: 5px; font-size: 0.9em; }
|
||||
.signal-info { font-size: 0.8em; color: #666; line-height: 1.4; }
|
||||
.signal-info { font-size: 0.8em; color: white; line-height: 1.4; }
|
||||
.highlight {
|
||||
background-color: #ffeb3b;
|
||||
padding: 2px 0;
|
||||
@@ -220,12 +240,67 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
color: #185a9d;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ========== 반응형 디자인 ========== */
|
||||
@media (max-width: 768px) {
|
||||
body { padding: 5px; }
|
||||
.header h1 { font-size: 1.5em; }
|
||||
.content { padding: 10px; }
|
||||
.signal-grid { grid-template-columns: 1fr; gap: 8px; }
|
||||
h2 { font-size: 1.1em; }
|
||||
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>
|
||||
@@ -237,9 +312,13 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
</div>
|
||||
|
||||
<div class="nav">
|
||||
<a href="/">Monitor</a>
|
||||
<a href="/transmit">Transmit</a>
|
||||
<a href="/graph" class="active">Graph</a>
|
||||
<a href="/">📊 Monitor</a>
|
||||
<a href="/transmit">📤 Transmit</a>
|
||||
<a href="/graph" class="active">📈 Graph</a>
|
||||
<a href="/graph-view">📊 Graph View</a>
|
||||
<a href="/settings">⚙️ Settings</a>
|
||||
<a href="/serial">📟 Serial1</a>
|
||||
<a href="/serial2">📟 Serial2</a>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
@@ -250,7 +329,7 @@ const char graph_html[] PROGMEM = R"rawliteral(
|
||||
<div class="upload-area" onclick="document.getElementById('dbc-file').click()">
|
||||
<input type="file" id="dbc-file" accept=".dbc" onchange="loadDBCFile(event)">
|
||||
<p style="font-size: 1.1em; margin-bottom: 8px;">Click to upload DBC</p>
|
||||
<p style="color: #666; font-size: 0.85em;" id="dbc-status">No file loaded</p>
|
||||
<p style="color: white; font-size: 0.85em;" id="dbc-status">No file loaded</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
105
transmit.h
105
transmit.h
@@ -32,24 +32,44 @@ const char transmit_html[] PROGMEM = R"rawliteral(
|
||||
}
|
||||
.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: 20px; }
|
||||
|
||||
.section {
|
||||
@@ -202,7 +222,7 @@ const char transmit_html[] PROGMEM = R"rawliteral(
|
||||
|
||||
.sequence-info {
|
||||
font-size: 0.9em;
|
||||
color: #666;
|
||||
color: white;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -239,9 +259,67 @@ const char transmit_html[] PROGMEM = R"rawliteral(
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ========== 반응형 디자인 ========== */
|
||||
@media (max-width: 768px) {
|
||||
.form-row { grid-template-columns: 1fr; }
|
||||
.sequence-list { grid-template-columns: 1fr; }
|
||||
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>
|
||||
@@ -260,7 +338,8 @@ const char transmit_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>
|
||||
|
||||
<div class="content">
|
||||
|
||||
Reference in New Issue
Block a user