css update

conf/icmp-ping-server.pid

@@ -1 +1 @@
-62900
+38088

src/main/resources/static/css/logFiles.css

@@ -22,6 +22,7 @@
 .log-table td:first-child {
     text-align: left;
     width: 200px;
+    font-size: 16px;
 }
 
 .log-table td:nth-child(2) {

src/main/resources/static/css/login.css

@@ -1,52 +1,76 @@
-body {
-    background-color: #f5f5f5;
+.login-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100vh;
+    background: #f0f3f7;
     font-family: 'Segoe UI', sans-serif;
 }
 
-.login-container {
-    width: 360px;
-    margin: 100px auto;
-    padding: 30px 40px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+.login-header {
+    position: absolute;
+    top: 20px;
+    left: 0;
+    width: 100%;
+    padding: 0 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
 }
 
-form {
-    display: flex;
-    flex-direction: column;
+.logo-text {
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
 }
 
-.form-group {
-    margin-bottom: 16px;
+.login-box {
+    background: #fff;
+    padding: 40px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+    min-width: 320px;
+    max-width: 380px;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: left;
 }
 
-label {
-    font-weight: bold;
-    margin-bottom: 5px;
+#loginForm label {
     display: block;
+    margin: 12px 0 6px;
+    font-size: 13px;
+    font-weight: bold;
+    color: #444;
 }
 
-input[type="text"],
-input[type="password"] {
+#loginForm input {
     width: 100%;
-    padding: 10px;
+    padding: 8px 12px;
     border: 1px solid #ccc;
     border-radius: 4px;
+    font-size: 14px;
+    box-sizing: border-box;
 }
 
-button[type="submit"] {
-    background-color: #0078D7;
-    color: white;
+#loginForm button {
+    width: 100%;
+    margin-top: 20px;
+    padding: 10px 0;
+    font-size: 15px;
+    font-weight: bold;
     border: none;
-    padding: 10px;
-    font-size: 16px;
     border-radius: 4px;
+    background: #0078d7;
+    color: #fff;
     cursor: pointer;
 }
 
-button[type="submit"]:hover {
-    background-color: #005ea2;
+#loginForm button:hover {
+    background: #005fa3;
 }
 
 .error-message {
@@ -57,4 +81,4 @@ button[type="submit"]:hover {
     border-radius: 4px;
     font-size: 14px;
     display: none;
-}
+}

src/main/resources/static/css/main.css

@@ -4,40 +4,68 @@ body {
     background-color: #f4f6f8;
 }
 
-.app-header {
-    background-color: #fff;
-    padding: 16px;
-    text-align: center;
-    position: relative;
-}
+/*.app-header {*/
+/*    align: center;*/
+/*}*/
 
-.app-title {
+/* 공통 테이블 스타일 추출 */
+.app-title-table,
+.app-time-table {
+    width: 100%;
+    color: #808080;
+    border: 0;
+    border-collapse: collapse;
     margin: 0;
-    font-size: 24px;
-    font-weight: 700;
 }
-
-.server-time {
-    position: absolute;
-    right: 20px;
-    top: 16px;
-    font-size: 14px;
-    color: #555;
+.app-title-table {
+}
+.app-time-table {
 }
 
-.divider-line {
-    height: 1px;
-    background-color: #ccc;
-    width: 100%;
-    margin: 0;
+/* 🎯 제목 텍스트 */
+.app-title-text,
+.app-time-text {
+    font-family: Tahoma, sans-serif;
+    font-weight: bold;
+    color: black;
 }
+.app-title-text {
+    /*font-weight: bold;*/
+    /*color: black;*/
+    font-size: 24px;
+    text-align: center;
+    padding: 10px 0;
+}
+/* 🕒 시간 텍스트 */
+.app-time-text {
+    /*font-weight: bold;*/
+    /*color: black;*/
+    font-size: 16px;
+    text-align: right;
+    padding: 0 30px 5px 0;
+}
+
+
+
+
+
+
+
+
+/*.app-header {*/
+/*    background-color: #fff;*/
+/*    padding: 16px;*/
+/*    text-align: center;*/
+/*    position: relative;*/
+/*}*/
 
 .navigation {
     background-color: #fff;
     text-align: center;
-    /*padding: 12px 0;*/
-    padding: 8px 0;
+    padding: 4px 0;
     margin-bottom: 0;
+    margin-top: 0;
+    border-top: none;
 }
 
 .menu-list {
@@ -51,7 +79,7 @@ body {
 }
 
 .menu-list li {
-    padding: 8px 16px;
+    padding: 5px 15px;
     background-color: #e0e4e7;
     border-radius: 5px;
     cursor: pointer;
@@ -87,6 +115,7 @@ legend {
     font-size: 16px;
     color: #333;
     padding: 0 10px;
+    text-align: center;     /* legend 텍스트 중앙 정렬 */
 }
 
 .sub-main-info table {

src/main/resources/static/css/system.css

@@ -15,6 +15,7 @@
     font-weight: bold;
     color: #555;
     width: 200px;
+    font-size: 16px;
 }
 
 input[disabled] {
@@ -24,5 +25,5 @@ input[disabled] {
     color: #333;
     border: 1px solid #ccc;
     border-radius: 4px;
-    font-size: 13px;
+    font-size: 16px;
 }

src/main/resources/static/html/login.html

@@ -9,28 +9,31 @@
     <script type="module" src="/js/login.js"></script>
 </head>
 <body>
-<header class="app-header">
-    <h1 class="app-title">ICMP Ping Server</h1>
-</header>
 
-<div class="login-container">
-    <form id="loginForm">
-        <div class="form-group">
+<section class="app-header">
+    <table class="app-title-table">
+        <tbody> <tr><td class="app-title-text">ICMP Ping Server</td></tr> </tbody>
+    </table>
+    <hr>
+    <table class="app-time-table">
+        <tbody> <tr><td class="app-time-text" id="serverTime">0000-00-00 00:00:00</td></tr> </tbody>
+    </table>
+</section>
+
+<section class="login-wrapper">
+    <div class="login-box">
+        <form id="loginForm">
             <label for="userId">USER ID</label>
-            <input type="text" id="userId" required />
-        </div>
+            <input type="text" id="userId" name="userId" required />
 
-        <div class="form-group">
-            <label for="userPassword">PASSWORD</label>
-            <input type="password" id="userPassword" required />
-        </div>
+            <label for="userPw">USER PASSWORD</label>
+            <input type="password" id="userPw" name="userPw" required />
 
-        <div class="form-group">
             <button type="submit">LOGIN</button>
-        </div>
+            <div id="errorMessage" class="error-message"></div>
+        </form>
+    </div>
+</section>
 
-        <div id="errorMessage" class="error-message"></div>
-    </form>
-</div>
 </body>
 </html>

src/main/resources/static/html/main.html

@@ -15,12 +15,15 @@
 </head>
 <body>
 
-<header class="app-header">
-    <h1 class="app-title">ICMP Ping Server</h1>
-    <div class="server-time" id="serverTime">--:--:--</div>
-</header>
-
-<div class="divider-line"></div>
+<section class="app-header">
+    <table class="app-title-table">
+        <tbody> <tr><td class="app-title-text">ICMP Ping Server</td></tr> </tbody>
+    </table>
+    <hr>
+    <table class="app-time-table">
+        <tbody> <tr><td class="app-time-text" id="serverTime">0000-00-00 00:00:00</td></tr> </tbody>
+    </table>
+</section>
 
 <nav class="navigation">
     <ul class="menu-list" id="menu">

src/main/resources/static/js/login.js

@@ -8,7 +8,7 @@ function main() {
 		e.preventDefault();
 
 		const userId = document.getElementById("userId").value.trim();
-		const password = document.getElementById("userPassword").value.trim();
+		const password = document.getElementById("userPw").value.trim();
 
 		errorBox.textContent = "";
 		errorBox.style.display = "none";
@@ -35,5 +35,25 @@ function main() {
 		}
 	});
 }
+function pad(n) {
+	return n.toString().padStart(2, '0');
+}
+
+function updateDateTime() {
+	const el = document.getElementById("serverTime");
+	if (!el) return;
+
+	const now = new Date();
+	const year = now.getFullYear();
+	const month = pad(now.getMonth() + 1);
+	const date = pad(now.getDate());
+	const hour = pad(now.getHours());
+	const min = pad(now.getMinutes());
+	const sec = pad(now.getSeconds());
+
+	el.textContent = `${year}-${month}-${date} ${hour}:${min}:${sec}`;
+}
 
 main(); // 실행 시작
+updateDateTime();
+setInterval(updateDateTime, 1000);