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