aptis-practice/about.html at main · TranHuuDat2004/aptis-practice · 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="vi">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giới Thiệu & Hướng Dẫn Sử Dụng</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="icon" href="img/favicon.png" type="image/x-icon">
</head>
<style>
    .about-content {
        max-width: 1200px;
        margin: 20px auto;
        background-color: #fff;
        padding: 30px 40px;
        border-radius: 8px;
        line-height: 1.8;
    }

    .about-content h2 {
        color: var(--primary-blue);
        border-bottom: 2px solid var(--primary-blue);
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .about-content .section {
        margin-bottom: 30px;
    }

    .about-content code {
        background-color: #e9ecef;
        padding: 2px 6px;
        border-radius: 4px;
        font-family: monospace;
    }

    about-content {
        overflow: hidden;
        /* Fix lỗi float */
    }

    .float-right {
        float: right;
        margin-left: 25px;
    }

    .float-left {
        float: left;
        margin-right: 25px;
    }

    .about-image {
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border: 1px solid #dee2e6;
    }

    /* Responsive cho màn hình nhỏ */
    @media (max-width: 768px) {
        .about-image-container {
            float: none;
            width: 90%;
            max-width: 400px;
            /* Tăng max-width trên mobile cho đẹp hơn */
            margin: 20px auto;
        }
    }

    /* === CSS MỚI CHO LAYOUT TRANG ABOUT (DÙNG GRID) === */
    .about-content .section {
        border-top: 1px solid #eee;
        padding-top: 20px;
    }

    .about-content .section:first-of-type {
        border-top: none;
        padding-top: 0;
    }

    .about-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Chia 2 cột 50/50 */
        gap: 40px;
        /* Khoảng cách giữa văn bản và hình ảnh */
        align-items: center;
        /* Căn giữa các item theo chiều dọc */
        margin-bottom: 40px;
    }

    /* Đảo ngược thứ tự cho các hàng chẵn */
    .about-grid.reverse {
        direction: rtl;
        /* Mẹo để đảo ngược thứ tự cột */
    }

    .about-grid.reverse>* {
        direction: ltr;
        /* Reset lại hướng chữ cho nội dung bên trong */
    }

    .about-text ul {
        padding-left: 20px;
    }

    .about-text li {
        margin-bottom: 10px;
    }

    .about-image-container {
        width: 100%;
    }

    .about-image {
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        border: 1px solid #dee2e6;
    }

    /* Responsive cho màn hình nhỏ */
    @media (max-width: 768px) {

        .about-grid,
        .about-grid.reverse {
            grid-template-columns: 1fr;
            /* Chuyển thành 1 cột */
            direction: ltr;
            /* Reset lại hướng trên mobile */
        }

        .about-grid.reverse .about-image-container {
            grid-row: 1;
            /* Đảm bảo ảnh luôn nằm trên chữ trên mobile */
        }
    }
</style>

<body>
    <header id="header-placeholder"></header>
    <div class="content-pusher">
        <div class="container">
            <div class="page-intro">
                <h1>Giới Thiệu & Hướng Dẫn Sử Dụng</h1>
                <p>Khám phá bố cục và cách tận dụng tối đa các công cụ trên Aptis Practice.</p>
            </div>

            <div class="about-content">
                <div class="section">
                    <h2>Mục Tiêu Của Trang Web</h2>
                    <p><strong>Aptis Practice</strong> được xây dựng với mục tiêu cung cấp một môi trường luyện tập
                        tương tác, bám sát phương pháp học "key" và "câu chuyện gợi nhớ". Trang web này không chỉ là nơi
                        bạn làm bài, mà còn là nơi bạn hệ thống hóa kiến thức và rèn luyện các kỹ năng cần thiết để tự
                        tin bước vào phòng thi.</p>
                </div>

                <div class="section">
                    <h2>Bố Cục và Lộ Trình Ôn Tập Đề Xuất</h2>
                    <p>Trang web được chia thành 5 khu vực chính, tương ứng với 5 tab trên trang chủ:</p>

                    <!-- Hướng dẫn chung -->
                    <div class="about-grid">
                        <div class="about-text">
                            <h4>1. 📖 Hướng dẫn chung</h4>
                            <p>Đây là điểm khởi đầu của bạn. Hãy dành thời gian đọc kỹ các mục trong phần này để nắm
                                vững cấu trúc bài thi, các mẹo làm bài quan trọng và các lỗi sai cần tránh. Đặc biệt,
                                các trang <code>Ngân hàng ý tưởng Speaking</code> và <code>Phương pháp PEEL</code> là
                                nền tảng cốt lõi cho kỹ năng Nói.</p>
                        </div>
                        <div class="about-image-container">
                            <img src="screenshot/peel.png" alt="Hướng dẫn chung" class="about-image">
                        </div>
                    </div>

                    <!-- Listening & Reading -->
                    <div class="about-grid reverse">
                        <div class="about-text">
                            <h4>2. 🎧 Listening & 📖 Reading</h4>
                            <p>Hai kỹ năng này có cấu trúc học tương tự:</p>
                            <ul>
                                <li><strong>Các trang học "Key":</strong> Nơi bạn học và ghi nhớ đáp án.</li>
                                <li><strong>Trang Cheatsheet:</strong> Hệ thống hóa các key dễ nhầm lẫn.</li>
                                <li><strong>Trang "Làm bài Part X":</strong> Kiểm tra trí nhớ của bạn.</li>
                                <li><strong>Thi thử Reading:</strong> Mô phỏng bài thi đầy đủ 5 phần.</li>
                            </ul>
                        </div>
                        <div class="about-image-container">
                            <img src="screenshot/reading4.png" alt="Giao diện thi thử Reading" class="about-image">
                        </div>
                    </div>

                    <!-- Speaking -->
                    <div class="about-grid">
                        <div class="about-text">
                            <h4>3. 🗣️ Speaking</h4>
                            <ul>
                                <li><strong>Các trang luyện tập:</strong> Cung cấp chủ đề, câu hỏi, và câu trả lời mẫu
                                    có kèm audio.</li>
                                <li><strong>Prepare to Test:</strong> Quiz ngắn củng cố kiến thức về sườn bài.</li>
                                <li><strong>Thi thử Speaking:</strong> Giao diện mô phỏng phòng thi thật với đồng hồ đếm
                                    ngược.</li>
                            </ul>
                        </div>
                        <div class="about-image-container">
                            <img src="screenshot/speaking3.png" alt="Giao diện thi thử Speaking" class="about-image">
                        </div>
                    </div>

                    <!-- Writing -->
                    <div class="about-grid reverse">
                        <div class="about-text">
                            <h4>4. ✍️ Writing</h4>
                            <ul>
                                <li><strong>Các trang luyện tập:</strong> Cung cấp đề bài và các công cụ hỗ trợ như bộ
                                    đếm từ, tự động lưu bài.</li>
                                <li><strong>Part 4 Structure Quiz:</strong> Trắc nghiệm giúp bạn thuộc lòng cấu trúc câu
                                    mẫu.</li>
                                <li><strong>Phân Tích Đề Bài:</strong> Công cụ giúp bạn đọc hiểu đúng yêu cầu đề bài.
                                </li>
                                <li><strong>Luyện Gõ Chính Tả:</strong> Luyện gõ các câu mẫu để tăng tốc độ và độ chính
                                    xác.</li>
                            </ul>
                        </div>
                        <div class="about-image-container">
                            <img src="screenshot/writing.png" alt="Giao diện luyện tập Writing" class="about-image">
                        </div>
                    </div>
                </div>
                <div class="section">
                    <h2>Chúc Bạn Học Tốt!</h2>
                    <p>Hy vọng rằng với cấu trúc rõ ràng và các công cụ đa dạng, trang web này sẽ là một người bạn đồng
                        hành hữu ích trên con đường chinh phục Aptis của bạn.</p>
                </div>
            </div>
        </div>
        <footer id="footer-placeholder"></footer>
    </div>
    <script src="js/main.js"></script>
</body>

</html>