docker-demo-k30/index.html at main · NTP010205/docker-demo-k30 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Docker Demo Portal - K30IT</title>
    <style>
        :root {
            --docker-blue: #2496ed;
            --bg-light: #f8f9fa;
            --card-bg: rgba(255, 255, 255, 0.8);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--bg-light);
            /* Hiệu ứng vân lưới nhẹ nhàng */
            background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
            background-size: 30px 30px;
        }

        .main-portal {
            width: 850px;
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            gap: 20px;
            padding: 20px;
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border-radius: 30px;
            border: 1px solid #ffffff;
            box-shadow: 0 20px 40px rgba(0,0,0,0.05);
        }

        /* Khối bên trái: Thông tin chính */
        .sidebar {
            background: white;
            padding: 30px;
            border-radius: 20px;
            text-align: center;
            box-shadow: inset 0 0 15px rgba(0,0,0,0.02);
        }

        .docker-logo {
            width: 100px;
            margin-bottom: 20px;
            filter: drop-shadow(0 5px 15px rgba(36, 150, 237, 0.3));
        }

        h1 { color: #1d2125; font-size: 1.5rem; margin-bottom: 10px; }
        .status-badge {
            background: #e1f5fe;
            color: var(--docker-blue);
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: bold;
        }

        /* Khối bên phải: Các tính năng Docker */
        .content-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .feature-card {
            background: white;
            padding: 20px;
            border-radius: 15px;
            border-bottom: 4px solid var(--docker-blue);
            transition: transform 0.3s;
        }

        .feature-card:hover { transform: translateY(-5px); }

        .feature-card h3 { color: var(--docker-blue); font-size: 0.9rem; margin-bottom: 8px; }
        .feature-card p { font-size: 0.8rem; color: #666; line-height: 1.4; }

        .full-width { grid-column: span 2; }

        .terminal-box {
            background: #2d3436;
            color: #fab1a0;
            padding: 12px;
            border-radius: 10px;
            font-family: 'Courier New', monospace;
            font-size: 0.75rem;
            text-align: left;
            margin-top: 10px;
        }

        footer {
            grid-column: span 2;
            text-align: center;
            font-size: 0.7rem;
            color: #aaa;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <div class="main-portal">
        <div class="sidebar">
            <img src="https://www.docker.com/wp-content/uploads/2022/03/vertical-logo-monochromatic.png" alt="Docker" class="docker-logo">
            <h1>CONTAINER LIVE</h1>
            <p style="font-size: 0.8rem; color: #888; margin-bottom: 15px;">Môi trường Nginx / Alpine</p>
            <span class="status-badge">● CONTAINER ACTIVE</span>
            <div class="terminal-box">
                $ docker inspect demo-container<br>
                > Status: running<br>
                > Port: 8888 -> 80
            </div>
        </div>

        <div class="content-grid">
            <div class="feature-card">
                <h3>📦 Isolation</h3>
                <p>Ứng dụng chạy biệt lập, không xung đột với hệ thống host.</p>
            </div>
            <div class="feature-card">
                <h3>🚀 Portability</h3>
                <p>Đóng gói một lần, chạy ở bất cứ đâu (Azure, AWS, GCP).</p>
            </div>
            <div class="feature-card full-width">
                <h3>🛠 Microservices Architecture</h3>
                <p>Thành phần web này là một "Vi dịch vụ" độc lập trong hệ thống ĐTĐM của nhóm K30IT.</p>
            </div>
            <div class="feature-card full-width" style="border-bottom-color: #a371f7;">
                <h3>👤 Nhóm thực hiện: NTP010205</h3>
                <p>Dự án Demo môn Các nền tảng phát triển phần mềm - 2026</p>
            </div>
        </div>

        <footer>Powered by Docker Container Technology | Học kỳ 2 - 2025-2026</footer>
    </div>
</body>
</html>