SDD-029 · Oceanic, hệ giao diện của trang công khai
Một phần của SDD-029. Hệ giao diện Oceanic: thứ bị thay, hai dải, các mảnh mới, phiếu điểm, học phí trên trang môn, trang học phí và chẩn đoán.
11. Oceanic — hệ giao diện của trang công khai (SRC-767, chỉ đạo 2026-09-16 kèm ảnh mẫu)
11.1 Thứ bị thay, và vì sao
Từ 2026-08-30 tới nay, .theme-www phủ một dải biển sâu lên toàn bộ trang công khai: nền xanh chuyển sắc chạy hết chiều cao trang, thẻ kính mờ, chữ sáng. Cách đó có một cái giá mà càng nhiều trang thì càng đắt: mọi bề mặt trở thành cùng một chất liệu. Thẻ, ô nhấn, menu thả xuống và nút viền đều là trắng loãng trên xanh, chỉ khác nhau vài phần trăm độ mờ.
Hệ quả đo được, trong đúng một ngày: nút không ra nút, menu thả xuống trong suốt (chữ trang đằng sau hiện xuyên qua), khung chờ tàng hình. Ba lần vá đó không phải ba lỗi rời nhau - chúng là một hệ quả của việc cả trang chỉ có một mặt phẳng.
11.2 Hai dải
Bản mới đi theo ảnh mẫu: trang là các dải sáng - tối xen kẽ.
| Dùng cho | Class | |
|---|---|---|
| Dải sáng | nội dung cần đọc kỹ: đầu trang, CEFR, mentors, đọc tiếp | mặc định, không cần class |
| Dải tối | thứ cần nhìn: năm bước, phiếu điểm, mức yêu cầu, chân trang | .n12-band-dark |
Tương phản giữa hai dải làm được việc mà độ mờ không làm nổi. Trên nền sáng, một tấm thẻ trắng có viền mảnh là một tấm thẻ; một nút cam đặc là một nút. Không phải vá gì cả.
Luật khi viết trang mới: chọn dải bằng .n12-band-dark rồi dùng utility bình thường. Đừng tự khai màu chữ sáng trong JSX - trang làm vậy tự đứng ngoài hệ và sẽ lệch ở lần đổi kế tiếp.
11.3 Vì sao KHÔNG sửa token của Design System
Chỉ đạo cho phép đổi cả DS "nếu cần thiết". Đọc packages/design-system/tokens/base.css thì hoá ra không cần: DS vốn đã là hệ sáng gần đơn sắc (--n12-sand-50 làm nền trang, --n12-ink-900 làm chữ, coral làm điểm nhấn) - tức là đã đúng hướng ảnh mẫu từ đầu. Thứ sai là tầng override của riêng www đè lên nó. Bản này gỡ tầng override thay vì sửa token.
Đó cũng là ranh giới an toàn: tokens/base.css dùng chung cho learn, marlins, coral, admin, mentors, b21 và bốn site VitePress. Sửa một token ở đó là reskin chín ứng dụng để phục vụ ảnh mẫu của một site.
Thứ duy nhất thêm vào là --n12-www-cyan, khai trong phạm vi .theme-www: ảnh mẫu dùng một màu lam để đánh dấu "đang chọn" và để gạch chân tiêu đề, mà DS không có màu nào rảnh cho việc đó (bảng gần đơn sắc, coral đã giữ vai điểm nhấn hành động).
11.4 Các mảnh mới
| Mảnh | Việc nó làm |
|---|---|
Eyebrow / .n12-eyebrow | viên thuốc có chấm màu, nói chủ đề khối trước khi mắt bắt vào tiêu đề |
.n12-swash | nét lam dưới cụm từ quan trọng nhất của tiêu đề, vẽ bằng gradient nền nên không đẩy dòng |
.n12-fact | nhãn dưới nút chính, trả lời "bấm vào thì được gì" mà không bắt cuộn xuống |
.n12-readout | dòng mono ở phiếu điểm, nói con số do máy tính ra chứ không do người viết |
Band | bọc một dải, chọn sáng hay tối |
PageHead căn giữa và to hẳn: một trang chỉ có một câu hỏi lớn, và câu ấy phải lớn thật. Bản trước căn trái với cỡ chữ gần bằng tiêu đề mục, nên nó đọc ra như một mục nữa chứ không ra đầu trang.
Chân trang chia bốn cột theo việc (Chương trình · Công cụ đo lường · Hỗ trợ · vai đang xem) thay cho một cột gộp bảy link đủ loại: phần lớn người đọc chân trang đang tìm đúng một thứ. Trên trang môn thì cột đầu vẫn thu hẹp về đúng môn đó (§10.13).
Dòng phụ dưới logo (Marine IELTS Lab) chỉ nhận tên kỳ thi, không nhận tên khu: nhãn khu là tiếng Việt dài, ghép vào khuôn tiếng Anh ra "Marine Vào đại học Lab" - một câu không thuộc ngôn ngữ nào. Không khớp thì không hiện dòng phụ.
11.5 Phiếu điểm: giấy trắng, số đỏ (SRC-768)
Chỉ đạo 2026-09-16, vòng hai: phiếu bên phải nền trắng, năm con số màu đỏ, và màu của cả khối bám theo phiếu để phiếu nổi lên.
Vì sao trắng-đỏ chứ không phải một bảng màu đẹp khác: đó đúng là hình dạng của phiếu điểm IELTS thật - giấy trắng, số đỏ. Người đọc đã nhìn thấy nó ở đâu đó rồi, nên họ nhận ra trước khi kịp đọc chữ. Một phiếu màu lam sẽ đẹp ngang thế mà không nói được điều gì cả.
Nền khối vẫn tối: trên dải tối, một tấm trắng là vật sáng nhất màn hình. Đổi nền khối sang sáng thì phiếu thành một thẻ nữa. Các thứ còn lại trong khối (nhãn mào đầu, số thứ tự của luật) đổi từ lam/coral sang đỏ để cả khối nói cùng một màu với phiếu.
Chỉ đạo 2026-09-19 (SRC-840) thu hẹp lại: trong phiếu, đỏ chỉ còn đúng một việc là đánh dấu điểm band. Lưới nền mạng nhện đỏ bỏ đi; nhãn "Overall score" và con số trung bình về màu chữ thường (apps/web/src/site/IeltsGraphics.tsx, .n12-scorecard trong apps/web/src/index.css) — đỏ ở khắp nơi thì đỏ không còn chỉ vào đâu cả. (Đoạn này ghi hộ từ commit f7679274 khi cổng SRC-596 đỏ trên main vì SRC-840 chưa được mô tả ở đâu; phiên làm SRC-840 sửa lại lời nếu cần.)
Cột trái rút từ bốn ý xuống ba, mỗi ý ngắn còn khoảng 60%: hai luật tính cộng một ô cảnh báo. Cột chữ dài ngang ngửa phiếu thì mắt phải chọn đọc bên nào trước, mà thứ đáng nhìn là phiếu. Hai ngưỡng làm tròn .25 và .75 gộp vào một dòng vì chúng nói cùng một việc.
Ràng buộc kỹ thuật đáng nhớ: các lớp n12-score-* không dùng lại utility màu của Tailwind. text-ocean-900 và text-accent đã bị tầng .n12-band-dark kéo về bản tối, nên dùng lại là hai tầng đánh nhau trong cùng một thẻ. Và selector của phiếu phải có độ chọn lọc bằng hoặc hơn.n12-band-dark [data-slot="card"] (0,2,0) - bản đầu dùng .n12-scorecard (0,1,0) và phiếu vẫn tối.
11.6 Học phí trên trang môn: ba dòng, không con số (SRC-769)
Trang môn trước đó đổ nguyên bảng giá của API vào khối Học phí - hơn hai chục dòng, có cả các khoản mua thêm tính theo tuần. Bảng ấy đúng chỗ ở trang học phí riêng, nơi người đọc đã quyết định hỏi về tiền; trên trang môn nó chen vào lúc người đọc mới đang tìm hiểu, và dài tới mức đẩy mọi thứ sau nó xuống dưới tầm mắt.
Nay khối là một thẻ tối đa ba dòng: tiêu đề, một dòng nói cách niêm yết, một nút sang /ielts/tuition. Cơ chế đã có sẵn từ SAT (tuitionHref trong subjectCopy.ts) - IELTS chỉ thiếu khai báo, nên nó rơi về nhánh PricingBlock.
Không in con số nào ở khối này. Giá sống trong API và đổi được bất cứ lúc nào, nên một con số chép vào mã là một con số sẽ sai mà không ai biết. Dòng giữa vì thế nói về cách niêm yết ("số công khai, không có khoản nào phải hỏi mới biết"), không nói mức giá.
Cùng vòng này, hai câu dẫn ở khối "Bạn cần bao nhiêu" bị bỏ theo chỉ đạo: câu trên tiêu đề chỉ mô tả lại thứ mắt vừa nhìn thấy (hàng nút đích đến nằm ngay dưới), còn câu nhắc cuối khối thì lặp lại điều mà mỗi dòng note của từng đích đến đã nói.
11.7 "Bạn nhận được gì" trả lời câu hỏi của ai (SRC-770)
Chủ dự án hỏi thẳng: khối này trả lời câu hỏi nào, xử lý job-to-be-done nào, pain nào?
Câu trả lời trung thực cho bản cũ: nó trả lời câu hỏi của người bán - "gói này gồm gì". Bốn gạch đầu dòng phẳng, không cái nào gắn với thứ người đọc đang mắc, nên đọc ra như một bảng tính năng.
Câu hỏi thật của người đọc ở đúng chỗ này của trang thì khác. Tới đây họ đã đi qua phiếu điểm, năm bước, thang CEFR và mức band cần đạt - tức là họ đã biết mình cần bao nhiêu và đang cách bao xa. Thứ họ hỏi tiếp là: "đi với Nemo12 thì cái gì khác so với cách tôi đang tự học?"
Nên mỗi mục nay có ba phần, đúng hình dạng một JTBD:
| Phần | Vai |
|---|---|
pain | thứ đang mắc, viết nguyên văn kiểu người ta than |
get | thứ nhận được, thay đúng cái pain đó |
proof | bằng chứng cầm được |
Bốn pain lấy từ sổ pain có thật của landing /ielts cũ (5 job × 5 pain, viết ở ngôi thứ nhất của người học; file đã gỡ ở SRC-1002, xem lịch sử git), không bịa mới: pain bịa nghe ra ngay.
proof là phần giữ khối khỏi rơi lại thành lời hứa. Luật khi thêm một mục: viết không nổi một dòng proof cụ thể thì mục đó chưa đáng đứng trên trang.
gets (danh sách phẳng cũ) vẫn giữ: bản prerender dùng nó, và môn chưa khai payoffs thì rơi về danh sách cũ thay vì mất khối.
Lịch sử quyết định
11.8 Trang học phí IELTS theo vai (SRC-771)
/{vai}/university/ielts/tuition. Khối học phí trên trang môn rút về ba dòng (§11.6) và dẫn sang đây.
Tách vai với /ielts/tuition để hai trang không đánh nhau:
| Trang | Trả lời |
|---|---|
/ielts/tuition | chọn mức đồng hành - ba mức Dory, Marlin, Nemo khác nhau ở đâu. Cố ý không có con số |
/{vai}/university/ielts/tuition | con số và chính sách - bao nhiêu tiền, gồm gì, mua thêm gì được, không hợp thì sao |
Chính sách đứng TRƯỚC bảng giá. Người mở trang học phí đang cân nhắc rủi ro nhiều hơn cân nhắc con số: con số họ đoán được gần đúng, còn "lỡ không hợp thì sao" thì không.
Ba chính sách, mỗi cái gồm một câu khẳng định và một câu điều kiện: hai buổi học thử miễn phí (tính riêng, không trừ vào 8 buổi), hoàn tiền trong 30 ngày đầu kể từ buổi học đầu tiên (không cần giải thích lý do; phần mua thêm đã dùng trừ theo tuần), và không có khoản nào phải hỏi mới biết.
Chính sách chỉ có vế khẳng định là chính sách chưa viết xong: người đọc sẽ tự điền điều kiện bằng thứ họ sợ nhất, và thường họ điền sai theo hướng bất lợi cho mình.
Con số lấy từ API, chính sách viết trong mã. Giá sống ở /v1/public/pricing và đổi được bất cứ lúc nào; chính sách là chữ biên tập và hiếm khi đổi. Nhưng nó là một cam kết có thật - hoàn tiền là tiền ra khỏi tài khoản - nên câu chữ không được viết rộng hơn thứ Nemo12 định làm, và sửa nó phải có chỉ đạo chứ không phải sửa cho hay hơn.
API hỏng thì phần con số biến mất, phần chính sách vẫn đứng. Bản prerender vì thế mang chính sách chứ không mang con số: chép giá vào bản tĩnh là dựng một bảng giá thứ hai sẽ lệch ngay lần đổi giá đầu tiên.
11.8.1 Nemo12 bán THỜI GIAN, không bán mức tăng (SRC-986)
Chỉ đạo chủ dự án 22.09.2026: 20.000.000 ₫ cho 6 tháng học không giới hạn, bất kể tăng bao nhiêu band, và gỡ hẳn mô hình giá theo band.
Tới hôm ấy giá bán theo mỗi 1.0 band tăng thêm (band_pricing, migration 0227, SRC-791): muốn lên 2.0 band thì trả gấp đôi. Mô hình ấy buộc trang phải hỏi "bạn muốn tăng bao nhiêu" trước khi nói được giá — một câu hỏi người mới tìm hiểu chưa trả lời được, vì họ còn chưa biết mình đang ở band nào.
Cũ (band_pricing, đã gỡ) | Nay (membership_pricing, migration 0278) | |
|---|---|---|
| Đơn vị bán | mỗi 1.0 band tăng thêm | một kỳ 6 tháng |
| Người muốn +2.0 band trả | gấp đôi | như nhau |
| Giao diện phải làm gì với con số | nhân với mức band | hiển thị nguyên |
Hai đợt ưu đãi tự rụng theo ngày, không chờ ai hạ cờ: giảm 50% (còn 10 triệu) tới hết 30.09.2026, giảm 25% (còn 15 triệu) từ 01.10.2026 tới hết 31.12.2026. Đợt band-oct-2026 cũ (5 triệu, 20 học viên đầu) đã hạ cờ — để nguyên thì pickOffer chọn mức rẻ nhất và ngày 01.10 trang hiện 5 triệu thay vì 15 triệu, hỏng theo cách im lặng nhất.
GAIN trên trang vẫn còn, và đổi nghĩa. Nó chỉ còn là đích của phần THỜI GIAN (200 giờ có hướng dẫn cho 1.0 band, nguồn Cambridge). Hai nửa của trang từ nay đo hai thứ khác nhau — nửa trên đo thời gian theo mức tăng, nửa dưới báo giá theo kỳ — nên đừng nối lại bằng một phép nhân cho gọn.
Chữ "không giới hạn" được neo bằng một con số đo được, viết trong terms_vi của dòng nền: learner học cao điểm thường 20–30 giờ mỗi tuần, học vừa phải 10–15 giờ. Không có câu ấy thì mỗi người đọc ra một kỳ vọng khác nhau.
11.8.2 "Trọn 6 tháng" đứng dưới con số, kể cả khi đang giảm giá (SRC-1025)
Chỉ đạo chủ dự án 24.09.2026, sau khi mở trang đã deploy ra xem.
Bản của §11.8.1 để kỳ hạn và điều kiện giá loại trừ nhau trong cùng một dòng phụ: có đợt giảm thì dòng ấy nói về đợt giảm, và số tháng biến mất. Mà đợt giảm thì lúc nào cũng có - hai đợt liên tiếp chạy tới hết 2026 - nên trên thực tế người đọc không bao giờ thấy mình đang mua bao lâu.
Điều đó không chỉ là thiếu một thông tin. Ô bên cạnh nói "5 tháng · thời gian ôn", nên thứ duy nhất mang chữ "tháng" trên cả thẻ lại là con số không phải thứ họ trả tiền. Lỗi này chỉ sinh ra khi mô hình giá đổi sang bán theo thời gian (§11.8.1): trước đó giá không gắn với tháng nào nên không có gì để lẫn.
Nay dòng phụ có hai dòng, và chúng nói hai LOẠI khác nhau:
| Dòng | Loại |
|---|---|
| Trọn 6 tháng (đậm) | cam kết - thứ learner mua |
| Giảm 50% tới hết 30.09.2026, thay vì 20.000.000đ | điều kiện giá - có thể hết hạn |
(Chữ của dòng đầu đổi thành "Đóng N tháng một lần" ở §11.8.3 khi kỳ 6 tháng trọn gói thành chu kỳ đóng 3 tháng. Cách chia hai loại thì giữ nguyên.)
Ô "thời gian ôn" bên cạnh vẫn là một ước lượng tính từ 200 giờ và số giờ mỗi tuần learner chọn. Ba loại số ấy - cam kết, điều kiện, ước lượng - đứng cạnh nhau trên một thẻ, nên mỗi cái phải tự khai mình là loại nào; đó là việc mà chữ dưới con số làm, không phải việc của con số.
Số tháng vẫn đọc từ API (months), không viết cứng: nó là dữ liệu của gói, và một ngày có gói 12 tháng thì trang không được nói dối.
11.8.3 Bán theo THÁNG, đóng 3 tháng một lần (SRC-1036)
Chỉ đạo chủ dự án 25.09.2026: 1.800.000đ mỗi tháng, đóng 3 tháng một lần là 5.400.000đ. Chủ dự án chốt thêm hai điều khi được hỏi lại: mức này thay hẳn mô hình kỳ 6 tháng ở §11.8.1, và không còn kỳ 6 tháng — learner gia hạn 3 tháng một lần.
| §11.8.1 (22.09.2026) | Nay (migration 0293) | |
|---|---|---|
| Đơn vị bán | một kỳ 6 tháng | một tháng |
| Người học trả mỗi lần | 20.000.000 (giảm còn 10 / 15 / 18 triệu) | 5.400.000 |
| Con số TO trên trang | số tiền một lần đóng | đơn giá tháng |
| Dòng ngay dưới | "Trọn 6 tháng" | "Đóng 3 tháng một lần: 5.400.000đ" |
Đơn giá tháng là con số PHÁI SINH, không phải một cột thứ hai. amount_vnd giữ nguyên nghĩa từ 0278 — số tiền của MỘT lần đóng — và months là độ dài kỳ. Đơn giá tháng = phép chia, làm ở đúng một chỗ (showcase/membershipPricing.ts, trường monthly_amount_vnd). Lưu hai con số cho cùng một sự thật là dựng sẵn chỗ để chúng lệch: người vận hành sửa 5.400.000 thành 6.000.000 ở admin mà quên ô "mỗi tháng" thì trang nói hai giá khác nhau trên cùng một thẻ, và không cổng nào kêu.
Chia không hết thì API trả null và trang bỏ dòng ấy đi. Một đơn giá làm tròn là con số không ai trả đúng bằng nó; thà thiếu một dòng.
Ba mức cũ hạ cờ, không xoá — chúng là lịch sử giá, và một hoá đơn đã phát hành theo mức ấy vẫn phải giải thích được. Dòng nguy hiểm nhất là membership-2027 (18 triệu): nó không có ends_at, nên sót nó lại là tới 01.01.2027 pickOffer thấy một đợt còn hiệu lực và trang lặng lẽ quay về bán kỳ 6 tháng. Đúng kiểu hỏng im lặng mà 0278 đã dính một lần với band-oct-2026.
Trang /ielts/tuition thôi nói "chưa có giá". Tới hôm nay ô học phí ở đó là một câu mời nhắn, vì chủ dự án chưa chốt mức. Nay nó đọc cùng API với trang học phí kia — không chép con số sang, kể cả làm giá dự phòng: hai trang mỗi bên giữ một bản là hai bên lệch nhau đúng vào lần đổi giá tiếp theo, và bên lệch là bên không ai nhớ ra để sửa. API chưa trả lời thì ô ấy quay về câu mời nhắn.
11.9 Trang chẩn đoán: chuyển nhà, và hai hình thay cho chữ (SRC-772)
/ielts/diagnosis chuyển xuống /{vai}/university/ielts/diagnosis, đứng cùng họ với lộ trình, lịch học, dạng bài, câu hỏi nên hỏi và học phí. Địa chỉ cũ giữ làm bí danh (ALIASES) và trỏ về bản học sinh: người vào từ một link cũ không khai vai bao giờ, mà học sinh là vai đông hơn.
Trang giảm chữ theo chỉ đạo, và thứ thay vào chỗ chữ là hai hình:
Biểu đồ mười hai tháng - bốn kỹ năng cộng Overall, mười ba mốc tháng, ba vạch đứt đánh dấu ba lần hệ thống đánh giá lại (tháng 0, 3, 6 - đúng ba mốc của bản báo cáo).
Hai ràng buộc của biểu đồ:
- Overall không khai tay. Nó tính lại từ bốn kỹ năng bằng
ieltsOverall- đúng hàm mà khối phiếu điểm trên trang môn dùng. Khai tay thì sớm muộn Overall trên biểu đồ sẽ mâu thuẫn với chính luật làm tròn mà trang môn đang dạy. - Bốn đường không được song song. Số liệu hư cấu nhưng có hình dạng thật: Reading lên sớm và nhanh, Writing lên chậm nhất và có đoạn chững, Listening đi đều, Speaking nhảy bậc sau khi bắt đầu nộp bài nói. Một biểu đồ mà cả bốn đường song song là một biểu đồ nói dối về việc học.
Bảng tiêu chí - bốn cụm, mỗi cụm bốn dòng, ba cột cho ba lần đo cộng một cột chênh lệch.
Writing và Speaking dùng đúng tên bốn tiêu chí chấm chính thức của IELTS: đó là thứ giám khảo chấm, và người học sẽ gặp lại đúng những chữ ấy trong nhận xét. Reading và Listening không có tiêu chí chấm (chúng chấm bằng số câu đúng), nên hai cụm ấy liệt kê năng lực con và ghi rõ điều đó trong tiêu đề cụm - nếu không, bảng sẽ dạy sai rằng IELTS chấm Reading theo tiêu chí.
Khối hỏi đáp ba câu ở cuối trang bị gỡ: nó là chữ thuần, và trang này nay lấy hình làm chính.
11.10 Lộ trình tính từ hôm nay, và bảng tiêu chí mở giải thích được (SRC-773)
Mốc đầu là ngày hôm nay. Trang bán một lộ trình bắt đầu từ chỗ người đọc đang đứng, nên một ngày cứng in trong mã sẽ cũ dần và tới lúc nào đó nói rằng lộ trình bắt đầu từ năm ngoái. Năm lần đánh giá cách nhau ba tháng, phủ trọn mười hai tháng, mỗi lần ghi ngày cụ thể dạng DD.MM.YYYY (SRC-748).
roundDates() gọi một lần cho mỗi lượt vẽ trang rồi truyền xuống cả biểu đồ lẫn bảng: gọi ở hai chỗ thì hai chỗ đọc đồng hồ ở hai thời điểm, và đúng nửa đêm chúng sẽ ra hai ngày khác nhau trên cùng một màn hình.
Một nguồn số duy nhất. Bảng tiêu chí là nguồn; mọi thứ khác tính ra từ nó:
| Thứ | Tính ra sao |
|---|---|
| Band của một kỹ năng | trung bình bốn tiêu chí của chính cụm đó, làm tròn nửa bậc |
| Overall | ieltsOverall trên bốn band ấy - đúng hàm mà khối phiếu điểm dùng |
| Đường mười ba tháng | nội suy giữa các lần đo rồi bám về nửa bậc |
Khai tay bất kỳ cái nào trong ba thứ trên là dựng nguồn thứ hai, và ngày nó lệch thì biểu đồ sẽ nói khác cái bảng nằm ngay dưới nó.
41% các bước là đứng yên (26 trên 64 lần chuyển). Chủ dự án yêu cầu đúng điều này, và nó cũng đúng với việc học: một tiêu chí nhích nửa bậc thường mất hơn ba tháng. Một bảng mà ô nào cũng tăng đều là một bảng quảng cáo. Ô đứng yên tô nhạt hơn, kèm một câu dưới bảng: đứng yên một lần là bình thường, hai lần liên tiếp mới là dấu hiệu cần đổi cách luyện.
Bật tắt từng đường. Năm đường cùng lúc là nhiều; người đọc thường chỉ muốn so hai kỹ năng, và ẩn ba đường kia là cách duy nhất để thấy rõ. Chú giải CHÍNH LÀ bộ bật tắt - một hàng chú giải chết bên cạnh một hàng nút bật tắt là hai hàng nói cùng một việc.
Bảng: tên tiếng Anh, thụt vào, và mở giải thích được. Tiêu chí thụt vào bằng một đường kẻ dọc chứ không bằng khoảng trắng: khoảng trắng thì hàng cuối của cụm không còn gì nối nó với tiêu đề cụm. Mỗi tiêu chí có một nút i mở popover gồm nghĩa và một ví dụ. Popover chứ không phải tooltip vì nội dung có hai đoạn và người đọc cần thời gian; mỗi lúc chỉ một popover mở, trạng thái giữ ở bảng chứ không ở từng nút.
11.11 Ba trang con còn lại, và đường cong mềm (SRC-774)
schedule, tasks và questions-to-ask dựng lại theo dải sáng tối (§11.2): đầu trang căn giữa có nhãn mào đầu và nét gạch lam, rồi khối chính đổi sang dải tối. Sau vòng này, cả sáu trang của khu IELTS dùng chung một hệ: trang môn, năm bước, chẩn đoán, lịch học, dạng bài, câu hỏi nên hỏi và học phí.
Ba câu dẫn dưới tiêu đề bị rút gọn hoặc bỏ trong lúc chuyển: dải tối đã tự tách khối khỏi phần trên, nên câu dẫn chỉ còn nhiệm vụ nói thêm điều gì mới, không phải nhiệm vụ báo rằng "đây là khối khác".
Đường cong mềm. Bản đầu vẽ bằng polyline và bám mọi tháng về nửa bậc, nên mỗi quý là một bậc thang vuông góc. Hai thứ đổi:
- Các tháng giữa không bám nửa bậc nữa, và
tđi qua smoothstep nên đường rời một mốc đo và tới mốc sau đều ở tốc độ bằng không - không còn góc gãy tại mốc. Bậc thang nói sai về việc học: năng lực không nhảy một phát vào ngày cuối quý, nó lên dần rồi mới được đo thành một con số nửa bậc. - Vẽ bằng
pathvới Catmull-Rom đổi sang Bezier bậc ba. Đường đi qua đúng mọi điểm dữ liệu - đó là điều kiện bắt buộc, vì mốc đo phải nằm trên đường, nếu không biểu đồ vẽ một con số khác con số trong bảng.
Con số nửa bậc vẫn đúng ở đúng các mốc đo: đó là chỗ duy nhất có phép đo thật.
11.12 Khối Mentors: vòng tròn chữ cái thay chỗ của ảnh (SRC-775)
Bản trước là năm thẻ trắng chỉ có chữ, trên nền sáng. Nó đọc ra một danh sách, không ra những con người - đúng thứ khối này tồn tại để nói.
Kho ảnh mentor chưa có, và §6 cấm lấp chỗ trống bằng ảnh stock hay ảnh AI. Đường thứ ba: vòng tròn mang chữ cái đầu, vẽ từ mã. Nó không giả vờ là ảnh của ai, mà vẫn cho mỗi người một hình dạng và một màu riêng để mắt phân biệt được. Ngày có ảnh thật thì thay đúng component Initials, không phải sửa cả khối.
Chữ cái lấy từ hai từ cuối của tên: người Việt gọi nhau bằng tên, nên "Nguyễn Tất Đắc" phải ra "TĐ" chứ không phải "NT". Màu chọn theo id nên ổn định qua mỗi lần tải, không nhảy màu.
Hai thứ khác cùng đổi:
- Khối chuyển sang dải tối, nằm giữa hai dải sáng đúng nhịp xen kẽ của §11.2.
- Bố cục từ lưới ba cột sang
flex-wrapcăn giữa. Đội ngũ có năm người, và lưới ba cột đẩy hai người cuối dạt sang trái để lại một ô trống đọc ra như thiếu người. Số người là dữ liệu thật và nó đổi, nên bố cục phải chịu được mọi số.
Nơi công tác và số năm dạy chuyển thành nhãn n12-fact ở đáy thẻ, nên mọi thẻ cao bằng nhau dù người này có dữ liệu mà người kia không.