디자인 업데이트

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">