From 23dcc29ceca5ed779a911fc8d9fb3b39cb501fe7 Mon Sep 17 00:00:00 2001
From: byun <nulav@naver.com>
Date: Mon, 8 Dec 2025 21:10:33 +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_viewer.h     | 117 ++++++++++++++++++++++++++++++--
 index.h            | 166 +++++++++++++++++++++++++++++----------------
 serial2_terminal.h |  72 ++++++++++++++++++--
 serial_terminal.h  |  72 ++++++++++++++++++--
 settings.h         | 116 +++++++++++++++++++++++++------
 5 files changed, 446 insertions(+), 97 deletions(-)

diff --git a/graph_viewer.h b/graph_viewer.h
index a8411e4..3b94814 100644
--- a/graph_viewer.h
+++ b/graph_viewer.h
@@ -12,18 +12,57 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: #1a1a1a;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 10px;
             color: white;
             overflow-x: hidden;
         }
         .header {
-            background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
+            background: linear-gradient(135deg, #667eea, #764ba2);
             padding: 15px;
             text-align: center;
             box-shadow: 0 2px 10px rgba(0,0,0,0.3);
         }
         .header h1 { font-size: 1.5em; }
         .header p { font-size: 0.9em; opacity: 0.9; margin-top: 5px; }
+        
+        /* ========== 통일된 네비게이션 ========== */
+        .nav {
+            background: #f8f9fa;
+            padding: 0;
+            border-bottom: 2px solid #e0e0e0;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .nav a {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 15px 20px;
+            text-decoration: none;
+            color: #666;
+            font-weight: 500;
+            font-size: 0.95em;
+            border-bottom: 3px solid transparent;
+            transition: all 0.3s;
+            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;
+        }
         .controls {
             background: #2a2a2a;
             padding: 10px 15px;
@@ -97,7 +136,7 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
             height: 250px;
             border: 1px solid #3a3a3a;
             border-radius: 5px;
-            background: #1a1a1a;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 10px;
         }
         .status {
             position: fixed;
@@ -115,9 +154,67 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
             background: #3a2a2a;
         }
         
+        
+    
+        /* ========== 반응형 디자인 ========== */
         @media (max-width: 768px) {
-            .graphs { grid-template-columns: 1fr; }
-            canvas { height: 200px; }
+            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>
@@ -127,6 +224,16 @@ const char graph_viewer_html[] PROGMEM = R"rawliteral(
         <p>Viewing <span id="graph-count">0</span> signals</p>
     </div>
     
+    <div class="nav">
+        <a href="/">📊 Monitor</a>
+        <a href="/transmit">📤 Transmit</a>
+        <a href="/graph">📈 Graph</a>
+        <a href="/graph-view" class="active">📊 Graph View</a>
+        <a href="/settings">⚙️ Settings</a>
+        <a href="/serial">📟 Serial1</a>
+        <a href="/serial2">📟 Serial2</a>
+    </div>
+    
     <div class="controls">
         <div class="control-group">
             <button class="btn btn-success" onclick="startGraphing()">Start</button>
diff --git a/index.h b/index.h
index e5f6c24..3d58165 100644
--- a/index.h
+++ b/index.h
@@ -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
\ No newline at end of file
diff --git a/serial2_terminal.h b/serial2_terminal.h
index 0edb608..60f5f0c 100644
--- a/serial2_terminal.h
+++ b/serial2_terminal.h
@@ -55,31 +55,43 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
             font-weight: normal;
         }
         
+        /* ========== 통일된 네비게이션 ========== */
         .nav {
             background: #f8f9fa;
             padding: 0;
             border-bottom: 2px solid #e0e0e0;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
         }
         
         .nav a {
-            display: inline-block;
-            padding: 15px 25px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 15px 20px;
             text-decoration: none;
             color: #666;
             font-weight: 500;
+            font-size: 0.95em;
             border-bottom: 3px solid transparent;
             transition: all 0.3s;
+            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;
         }
         
         .content {
@@ -449,19 +461,67 @@ const char serial2_terminal_html[] PROGMEM = R"rawliteral(
             text-transform: uppercase;
         }
         
+        
+    
+        /* ========== 반응형 디자인 ========== */
         @media (max-width: 768px) {
-            .control-panel {
-                grid-template-columns: 1fr;
+            body {
+                padding: 5px;
             }
             
-            .control-group {
-                grid-template-columns: 1fr;
+            .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>
diff --git a/serial_terminal.h b/serial_terminal.h
index 0cd4b8d..adc0b00 100644
--- a/serial_terminal.h
+++ b/serial_terminal.h
@@ -55,31 +55,43 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
             font-weight: normal;
         }
         
+        /* ========== 통일된 네비게이션 ========== */
         .nav {
             background: #f8f9fa;
             padding: 0;
             border-bottom: 2px solid #e0e0e0;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
         }
         
         .nav a {
-            display: inline-block;
-            padding: 15px 25px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 15px 20px;
             text-decoration: none;
             color: #666;
             font-weight: 500;
+            font-size: 0.95em;
             border-bottom: 3px solid transparent;
             transition: all 0.3s;
+            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;
         }
         
         .content {
@@ -449,19 +461,67 @@ const char serial_terminal_html[] PROGMEM = R"rawliteral(
             text-transform: uppercase;
         }
         
+        
+    
+        /* ========== 반응형 디자인 ========== */
         @media (max-width: 768px) {
-            .control-panel {
-                grid-template-columns: 1fr;
+            body {
+                padding: 5px;
             }
             
-            .control-group {
-                grid-template-columns: 1fr;
+            .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>
diff --git a/settings.h b/settings.h
index 1d89f14..5bfc0d2 100644
--- a/settings.h
+++ b/settings.h
@@ -26,31 +26,50 @@ const char settings_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: 30px; }
         
         .settings-section {
@@ -168,7 +187,7 @@ const char settings_html[] PROGMEM = R"rawliteral(
         
         .btn-save {
             background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-            color: white;
+            color: #666;
             box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);
         }
         
@@ -179,7 +198,7 @@ const char settings_html[] PROGMEM = R"rawliteral(
         
         .btn-cancel {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+            color: #666;
             box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
         }
         
@@ -219,17 +238,17 @@ const char settings_html[] PROGMEM = R"rawliteral(
         
         .alert-success {
             background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-            color: white;
+            color: #666;
         }
         
         .alert-info {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
+            color: #666;
         }
         
         .alert-warning {
             background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-            color: white;
+            color: #666;
         }
         
         .alert-icon {
@@ -264,12 +283,67 @@ const char settings_html[] PROGMEM = R"rawliteral(
             line-height: 1.6;
         }
         
+        
+    
+        /* ========== 반응형 디자인 ========== */
         @media (max-width: 768px) {
-            .content { padding: 20px; }
-            .settings-section { padding: 20px; }
-            .section-title { font-size: 1.1em; }
-            button { min-width: 100%; }
-            .button-group { flex-direction: column; }
+            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>
@@ -286,6 +360,8 @@ const char settings_html[] PROGMEM = R"rawliteral(
             <a href="/graph">📈 Graph</a>
             <a href="/graph-view">📊 Graph View</a>
             <a href="/settings" class="active">⚙️ Settings</a>
+            <a href="/serial">📟 Serial1</a>
+            <a href="/serial2">📟 Serial2</a>
         </div>
         
         <div class="content">