Update UI: add detailed DevOps demo content

2025-12-31 19:52:02 +07:00
parent e0500f89f7
commit 4b27ef9eaf
1 changed files with 112 additions and 3 deletions
--- a/index.html
+++ b/index.html
@@ -1,9 +1,118 @@
 <!DOCTYPE html>
-<html>
+<html lang="vi">
 <head>
-  <title>DevOps Demo</title>
+    <meta charset="UTF-8">
    <title>Hello DevOps CI/CD</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            background: #f4f6f8;
            color: #333;
        }
        header {
            background: #0d6efd;
            color: white;
            padding: 20px;
            text-align: center;
        }
        section {
            max-width: 900px;
            margin: auto;
            padding: 20px;
            background: white;
        }
        h2 {
            color: #0d6efd;
            border-bottom: 2px solid #eee;
            padding-bottom: 5px;
        }
        ul {
            line-height: 1.8;
        }
        .box {
            background: #f1f1f1;
            padding: 15px;
            border-left: 5px solid #0d6efd;
            margin: 15px 0;
        }
        footer {
            text-align: center;
            padding: 15px;
            background: #222;
            color: #aaa;
            margin-top: 30px;
        }
        .badge {
            display: inline-block;
            background: #198754;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
        }
    </style>
 </head>
 <body>
-  <h1>Huynh Tan Loc</h1>
+
 <header>
    <h1>🚀 Hello DevOps CI/CD Demo</h1>
    <p>Mini CI/CD Pipeline – Jenkins + Docker + Gitea</p>
    <span class="badge">Deploy Success</span>
 </header>
 <section>
    <h2>📌 Giới thiệu</h2>
    <p>
        Đây là ứng dụng web HTML tĩnh dùng để minh họa mô hình
        <b>Mini CI/CD Pipeline</b> trong DevOps.
        Mỗi khi code được thay đổi và đẩy lên Git, Jenkins sẽ tự động
        build Docker image và deploy container mới.
    </p>
    <h2>⚙️ Công nghệ sử dụng</h2>
    <ul>
        <li><b>Gitea</b>: Quản lý mã nguồn (Git Server)</li>
        <li><b>Jenkins</b>: Công cụ CI/CD tự động hóa</li>
        <li><b>Docker</b>: Đóng gói và triển khai ứng dụng</li>
        <li><b>Nginx</b>: Web server chạy ứng dụng</li>
        <li><b>Linux VPS</b>: Môi trường triển khai</li>
    </ul>
    <h2>🔄 Quy trình CI/CD</h2>
    <div class="box">
        <ol>
            <li>Lập trình viên chỉnh sửa mã nguồn</li>
            <li>Push code lên Git repository</li>
            <li>Jenkins tự động kéo code mới</li>
            <li>Build Docker image</li>
            <li>Triển khai container lên server</li>
        </ol>
    </div>
    <h2>🧪 Mục đích Demo</h2>
    <ul>
        <li>Kiểm tra pipeline CI/CD hoạt động đúng</li>
        <li>Minh họa tự động hóa triển khai</li>
        <li>Phù hợp cho học tập và báo cáo DevOps</li>
    </ul>
    <h2>📅 Thông tin triển khai</h2>
    <p>
        <b>Ngày deploy:</b> <span id="date"></span><br>
        <b>Trạng thái:</b> Thành công
    </p>
 </section>
 <footer>
    <p>© 2025 - Hello DevOps | Mini CI/CD Pipeline Demo</p>
 </footer>
 <script>
    document.getElementById("date").innerText = new Date().toLocaleString();
 </script>
 </body>
 </html>