디자인 업데이트
This commit is contained in:
117
graph_viewer.h
117
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>
|
||||
|
||||
166
index.h
166
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
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
116
settings.h
116
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">
|
||||
|
||||
Reference in New Issue
Block a user