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;
+ }
+ }
@@ -644,7 +690,7 @@ const char index_html[] PROGMEM = R"rawliteral(
📈 Graph
📊 Graph View
⚙️ Settings
-
📟 Serial
+
📟 Serial1
📟 Serial2
@@ -1514,4 +1560,4 @@ const char index_html[] PROGMEM = R"rawliteral(
)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;
+ }
}
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;
+ }
}
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;
+ }
}
@@ -286,6 +360,8 @@ const char settings_html[] PROGMEM = R"rawliteral(
📈 Graph
📊 Graph View
⚙️ Settings
+
📟 Serial1
+
📟 Serial2