ad readme

5 months ago · c362efd13a
parent 2bc46325a5
commit c362efd13a
4 changed files with 146 additions and 16 deletions
--- a/65
+++ b/65
@ -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! 🚀
+
--- 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 = '<span class="spinner-border spinner-border-sm"></span> Running...';
--- 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);
-}
+}
+
+/* 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);
+}
--- a/templates/index.html
+++ b/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">
@ -65,7 +67,7 @@
         <pre id="commandOutput" class="bg-dark text-white p-3 rounded" style="height: 300px; overflow-y: auto;"></pre>
      </div>
   </div>
-
+   
   <!-- Container hiển thị Toast -->
   <div id="toastContainer" class="position-fixed top-0 end-0 p-3" style="z-index: 1050;"></div>

@ -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>