ad readme

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! 🚀
+

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");
+
+      // 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 = '<span class="spinner-border spinner-border-sm"></span> Running...';

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 */
+   background: rgba(255, 255, 255, 0.1); /* Màu trắng nhẹ */
-   backdrop-filter: blur(10px); /* Glass effect */
+   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);
+   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-}
+   max-width: 95%;
-h1 {
-   font-weight: bold;
-   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 }
+
+/* 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);
 }
+
+/* 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);
+}

templates/index.html

@@ -7,13 +7,16 @@
    <title>Service List</title>
 
    <!-- Bootstrap 5.3 từ Cloudflare CDN -->
+   <link rel="stylesheet" 
+   href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css">
+
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 
-<body>
+<body class="d-flex flex-column min-vh-100">
 
-   <div class="container p-4">
+   <div class="container p-4 flex-grow-1"> <!-- Thêm flex-grow-1 -->
       <div class="d-flex justify-content-between align-items-center mb-3">
          <h1 class="text-white">🚀 Service List 🚀</h1>
          <div>
@@ -22,7 +25,6 @@
          </div>
      </div>
      
-
       <div class="table-responsive">
          <table class="table table-striped table-bordered text-center">
             <thead class="table-dark">
@@ -73,6 +75,30 @@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='script.js') }}"></script>
 
+   <!-- ✅ Footer cố định dưới cùng -->
+   <footer>
+      <div class="footer-content">
+         <p>🚀 <strong>Author:</strong> Liu Van Quyet</p>
+         <p>📞 <strong>Phone:</strong> 0362795897</p>
+         <p>📧 <strong>Email:</strong> 
+            <a href="mailto:quyetlv.dev@gmail.com">quyetlv.dev@gmail.com</a>
+         </p>
+         <div class="social-icons">
+            <a href="https://www.facebook.com" target="_blank" title="Facebook">
+               <i class="bi bi-facebook"></i>
+            </a>
+            <a href="https://www.linkedin.com" target="_blank" title="LinkedIn">
+               <i class="bi bi-linkedin"></i>
+            </a>
+            <a href="https://github.com" target="_blank" title="GitHub">
+               <i class="bi bi-github"></i>
+            </a>
+         </div>
+      </div>
+   </footer>
+   
+  
 </body>
 
+
 </html>