디자인 업데이트

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;
+            background: #f8f9fa;
-            padding: 10px;
+            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;
+            color: #666;
-            border-radius: 5px;
+            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; }
+            body {
-            .header h1 { font-size: 1.5em; }
+                padding: 5px;
-            .content { padding: 10px; }
+            }
-            .signal-grid { grid-template-columns: 1fr; gap: 8px; }
+            
-            h2 { font-size: 1.1em; }
+            .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="/">📊 Monitor</a>
-            <a href="/transmit">Transmit</a>
+            <a href="/transmit">📤 Transmit</a>
-            <a href="/graph" class="active">Graph</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>
             

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;
+            background: #f8f9fa;
-            padding: 10px;
+            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;
+            color: #666;
-            border-radius: 5px;
+            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; }
+            body {
-            .sequence-list { grid-template-columns: 1fr; }
+                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">