디자인 업데이트

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>