From f4a41a0414f33a7a85d56ca0ee687169e727a95d Mon Sep 17 00:00:00 2001 From: byun Date: Mon, 8 Dec 2025 21:11:01 +0000 Subject: [PATCH] =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=97=85?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- graph.h | 119 ++++++++++++++++++++++++++++++++++++++++++++--------- transmit.h | 105 ++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 191 insertions(+), 33 deletions(-) diff --git a/graph.h b/graph.h index 6cfb38b..1474036 100644 --- a/graph.h +++ b/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; + } } @@ -237,9 +312,13 @@ const char graph_html[] PROGMEM = R"rawliteral(
- Monitor - Transmit - Graph + 📊 Monitor + 📤 Transmit + 📈 Graph + 📊 Graph View + ⚙️ Settings + 📟 Serial1 + 📟 Serial2
@@ -250,7 +329,7 @@ const char graph_html[] PROGMEM = R"rawliteral(

Click to upload DBC

-

No file loaded

+

No file loaded

diff --git a/transmit.h b/transmit.h index a8ca9df..e582125 100644 --- a/transmit.h +++ b/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; + } } @@ -260,7 +338,8 @@ const char transmit_html[] PROGMEM = R"rawliteral( 📈 Graph 📊 Graph View ⚙️ Settings - 📟 Serial + 📟 Serial1 + 📟 Serial2