diff --git a/Readme b/Readme
new file mode 100644
index 0000000..2025454
--- /dev/null
+++ b/Readme
@@ -0,0 +1,65 @@
+# Hướng dẫn chạy ứng dụng Flask ngầm với PID File
+
+## 1️⃣ Chạy ứng dụng ngầm và lưu PID
+Bạn có thể chạy ứng dụng Flask (`app.py`) dưới nền và lưu PID vào file để dễ dàng quản lý.
+
+```bash
+nohup python app.py > output.log 2>&1 & echo $! > app.pid
+```
+
+### 🔍 Giải thích lệnh:
+- `nohup python app.py > output.log 2>&1 &` → Chạy `app.py` ngầm, không bị dừng khi thoát terminal.
+- `echo $! > app.pid` → Lưu **Process ID (PID)** vào file `app.pid`.
+
+---
+
+## 2️⃣ Dừng ứng dụng bằng file PID
+Để dừng ứng dụng, sử dụng lệnh:
+
+```bash
+kill $(cat app.pid)
+rm app.pid
+```
+
+### ✅ Giải thích:
+- `cat app.pid` → Đọc **PID** từ file.
+- `kill $(cat app.pid)` → Dừng tiến trình ứng dụng.
+- `rm app.pid` → Xóa file PID sau khi dừng.
+
+---
+
+## 3️⃣ Đổi tên file PID
+Bạn có thể đổi tên file PID theo ý muốn, ví dụ `myapp.pid`:
+
+```bash
+nohup python app.py > output.log 2>&1 & echo $! > myapp.pid
+```
+
+Dừng ứng dụng:
+
+```bash
+kill $(cat myapp.pid)
+rm myapp.pid
+```
+
+---
+
+## 4️⃣ Quản lý nhiều ứng dụng cùng lúc
+Nếu bạn chạy nhiều ứng dụng Flask, hãy sử dụng file PID riêng cho từng ứng dụng:
+
+```bash
+nohup python service1.py > service1.log 2>&1 & echo $! > service1.pid
+nohup python service2.py > service2.log 2>&1 & echo $! > service2.pid
+```
+
+Dừng từng ứng dụng:
+
+```bash
+kill $(cat service1.pid) && rm service1.pid
+kill $(cat service2.pid) && rm service2.pid
+```
+
+---
+
+⚡ **TIP:** Bạn có thể tạo script tự động Start/Stop ứng dụng bằng PID để tiện sử dụng! 🚀
+
diff --git a/static/script.js b/static/script.js
index 9794efb..04a27bd 100644
--- a/static/script.js
+++ b/static/script.js
@@ -2,11 +2,16 @@ document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll(".run-btn").forEach((button) => {
button.addEventListener("click", function () {
let command = this.getAttribute("data-command");
- runCommand(this, command);
+
+ // Hiển thị hộp thoại xác nhận
+ if (confirm(`Bạn có chắc chắn restart ?`)) {
+ runCommand(this, command);
+ }
});
});
});
+
function runCommand(button, commandStr) {
const originalText = button.innerHTML;
button.innerHTML = ' Running...';
diff --git a/static/style.css b/static/style.css
index fbf9daa..136d08f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,30 +1,64 @@
+/* Nền Gradient Đẹp & Hài Hòa */
body {
- background: linear-gradient(135deg, #66d0ea, #764ba2); /* Gradient Background */
+ background: linear-gradient(135deg, #1E2A38, #4C6EF5); /* Xanh đậm sang xanh dương */
min-height: 100vh;
display: flex;
- align-items: center;
+ flex-direction: column;
justify-content: center;
+ align-items: center;
color: white;
}
+
+/* Tăng độ mờ của container */
.container {
- background: rgba(255, 255, 255, 0.15); /* Transparent background */
- backdrop-filter: blur(10px); /* Glass effect */
+ background: rgba(255, 255, 255, 0.1); /* Màu trắng nhẹ */
+ backdrop-filter: blur(15px); /* Hiệu ứng kính mờ */
border-radius: 12px;
padding: 20px;
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-}
-h1 {
- font-weight: bold;
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+ max-width: 95%;
}
+
+/* Bảng hiển thị đẹp hơn với chữ màu đen */
table {
- background: rgba(255, 255, 255, 0.9);
+ background: rgba(255, 255, 255, 0.9); /* Nền trắng rõ ràng */
border-radius: 8px;
overflow: hidden;
+ color: #000; /* Đặt màu chữ đen */
+}
+
+th {
+ background: rgba(0, 0, 0, 0.8); /* Header màu đen đậm */
+ color: #ffffff; /* Chữ trắng để nổi bật trên nền đen */
}
+
+td {
+ color: #000; /* Màu chữ đen */
+}
+
+/* Khi hover vào hàng trong bảng */
+tbody tr:hover {
+ background: rgba(0, 0, 0, 0.1); /* Nhấn mạnh dòng khi rê chuột */
+}
+
+
+/* Tăng độ nổi bật khi hover */
.run-btn {
transition: all 0.3s ease-in-out;
}
+
.run-btn:hover {
transform: scale(1.1);
-}
\ No newline at end of file
+}
+
+/* Footer nổi bật & chuyên nghiệp */
+footer {
+ background: rgba(0, 0, 0, 0.85);
+ padding: 20px 0;
+ text-align: center;
+ width: 100%;
+ margin-top: auto;
+ color: #ddd;
+ font-size: 14px;
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
+}
diff --git a/templates/index.html b/templates/index.html
index 93fa2e2..a3a5281 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,13 +7,16 @@
Service List
+
+
-
+
-
+
🚀 Service List 🚀
@@ -22,7 +25,6 @@
-
@@ -65,7 +67,7 @@
-
+
@@ -73,6 +75,30 @@
+
+
+
+
+
\ No newline at end of file