Prompt Web Development

# Prompt Dự án: TrustShield — Ứng dụng Web Sẵn sàng cho Hackathon

Hãy đóng vai một lập trình viên full-stack cấp cao, nhà thiết kế UI/UX và kỹ sư an ninh mạng. Xây dựng một ứng dụng web hoàn chỉnh, chuyên nghiệp và tương thích đa thiết bị (responsive) cho dự án hackathon của tôi.

## 1. Định danh Dự án

**Tên Dự án:** TrustShield  
**Khẩu hiệu (Tagline):** Bảo mật Giao dịch Trực tuyến bằng Giao thức Xác minh Danh tính Đa lớp  
**Tên Nhóm:** SudoX  
**Mã số Nhóm:** T-0002  
**Trường:** Rungta College of Engineering and Technology  
**Sự kiện:** Cyber AI Hackathon 2026 — University of Derby, Vương quốc Anh

Mục tiêu là trình diễn một hệ thống xác minh giao dịch thích ứng theo rủi ro (risk-adaptive), có khả năng đánh giá các tín hiệu giao dịch, tính toán điểm rủi ro, giải thích các dấu hiệu đáng ngờ và đề xuất hành động xác minh phù hợp.

## 2. Yêu cầu Thiết kế

Tạo một bảng điều khiển (dashboard) an ninh mạng công nghệ tài chính (fintech) cao cấp với:

- Nền trắng sạch sẽ kết hợp các điểm nhấn màu xanh hải quân (navy-blue), xanh dương nhạt (light-blue) và đỏ một cách tiết chế.
- Nghệ thuật chữ (typography) hiện đại, các thẻ bo góc (rounded cards), đổ bóng tinh tế và khoảng cách nhất quán.
- Biểu tượng (icons) chuyên nghiệp và các biểu đồ trực quan hóa đơn giản.
- Bố cục tương thích (responsive) cho máy tính để bàn, máy tính xách tay, máy tính bảng và điện thoại di động.
- Hiệu ứng chuyển cảnh mượt mà nhưng tinh tế, cùng các trạng thái đang tải (loading), thành công (success), cảnh báo (warning) và lỗi (error) rõ ràng.
- Không lạm dụng dải màu chuyển sắc (gradients), hoạt ảnh không cần thiết hoặc nhồi nhét nội dung quá tải.
- Giao diện trau chuốt, chân thực, phù hợp cho một buổi thuyết trình hackathon quốc tế cấp đại học.

Giao diện người dùng phải trông giống như một sản phẩm an ninh mạng thực thụ đang hoạt động, chứ không phải một mẫu trang tiếp thị chung chung.

## 3. Các Trang và Tính năng Bắt buộc

### A. Trang Đích (Landing Page)

Bao gồm:
- Logo và tên dự án TrustShield.
- Lời giải thích ngắn gọn về vấn đề và giải pháp đề xuất.
- Nút hành động chính: “Launch Security Dashboard” (Khởi chạy Bảng điều khiển Bảo mật).
- Các thẻ tính năng cho: Xác minh Đa lớp (Multi-Layer Verification), Phân tích Rủi ro (Risk Analysis), Xác thực Thích ứng (Adaptive Authentication) và Đánh giá Bền bỉ Ngoại tuyến (Offline-Resilient Assessment).
- Hình ảnh trực quan hóa luồng quy trình ngắn gọn thể hiện cách một giao dịch được đánh giá.
- Tên nhóm SudoX và thông tin cuộc thi hackathon ở phần chân trang (footer).

### B. Bảng điều khiển Bảo mật (Security Dashboard)

Tạo một bảng điều khiển có:
- Tổng số giao dịch demo đã được phân tích.
- Số lượng giao dịch rủi ro thấp, trung bình và cao chỉ dựa trên các tương tác demo thực tế hoặc dữ liệu khởi tạo (seed data) được gắn nhãn rõ ràng.
- Biểu đồ phân bổ mức độ rủi ro.
- Bảng danh sách các giao dịch gần đây.
- Nút hành động nổi bật “Analyze Transaction” (Phân tích Giao dịch).
- Dòng thông báo rõ ràng rằng đây là bản mẫu thử nghiệm (prototype) phục vụ hackathon sử dụng các giao dịch mô phỏng.

Không tự bịa ra khách hàng thật, kết nối ngân hàng thật, số liệu thống kê gian lận thực tế (production) hoặc các chỉ số hiệu năng đã được kiểm chứng.

### C. Trình Phân tích Rủi ro Giao dịch (Transaction Risk Analyzer)

Xây dựng một biểu mẫu tương tác đầy đủ bao gồm:

- Số tiền giao dịch tính bằng INR.
- Người thụ hưởng: đã biết (known) hoặc mới (new).
- Thiết bị: đã nhận diện (recognized) hoặc mới (new).
- Tần suất giao dịch: bình thường (normal) hoặc thường xuyên bất thường (unusually frequent).
- Hành vi người dùng: bình thường (normal) hoặc bất thường (unusual).
- Tùy chọn chỉ báo bất thường về vị trí địa lý.

Khi người dùng nhấp vào “Analyze Transaction”, hệ thống sẽ tính toán điểm số một cách linh hoạt bằng bộ máy đánh giá rủi ro dựa trên quy tắc (rules-based risk engine) minh bạch và có thể cấu hình được.

Hiển thị:
- Điểm rủi ro từ 0–100.
- Phân loại rủi ro: thấp (Low), trung bình (Medium) hoặc cao (High).
- Đồng hồ đo rủi ro trực quan.
- Từng yếu tố rủi ro riêng lẻ và mức đóng góp điểm của chúng.
- Lời giải thích bằng ngôn ngữ dễ hiểu về lý do tại sao mức điểm đó được gán.
- Hành động khuyến nghị.

Sử dụng các ngưỡng trình diễn ban đầu sau đây:
- 0–29: Rủi ro Thấp (Low Risk).
- 30–59: Rủi ro Trung bình (Medium Risk).
- 60–100: Rủi ro Cao (High Risk).

Sử dụng các trọng số mẫu có thể cấu hình được, giới hạn điểm tối đa ở mức 100 và ghi chú rõ logic tính điểm. Không gán một số điểm cố định thủ công cho từng kịch bản.

### D. Bộ máy Ra Quyết định Thích ứng (Adaptive Decision Engine)

Sử dụng điểm rủi ro đã tính toán và các tín hiệu phát hiện được để chọn phản hồi tương ứng:

- Rủi ro thấp: khuyến nghị luồng xác minh tiêu chuẩn.
- Rủi ro trung bình: khuyến nghị thực hiện xác minh bổ sung.
- Rủi ro cao: khuyến nghị xác minh mạnh hơn hoặc tạm giữ giao dịch.

Không tuyên bố rằng bản mẫu thử nghiệm này thực sự cấp phép, chặn hoặc xử lý các khoản thanh toán ngân hàng/UPI thật. Kết quả chỉ là một khuyến nghị trong môi trường mô phỏng.

### E. Bảng Giải thích Kết quả (Explainability Panel)

Đối với mỗi lần phân tích, hãy hiển thị:
- Những tín hiệu nào đã làm tăng điểm rủi ro.
- Số điểm đóng góp bởi từng tín hiệu.
- Phép tính điểm số cuối cùng.
- Lý do đằng sau hành động được khuyến nghị.

Bao gồm một ghi chú bảo mật ngắn gọn rằng hành vi bất thường không tự động chứng minh là có gian lận.

### F. Các Kịch bản Demo Tương tác (Interactive Demo Scenarios)

Thêm ba nút bấm giúp điền sẵn vào trình phân tích các kịch bản mẫu có thể tái lập:

1. **Rủi ro Thấp (Low Risk):** thiết bị đã nhận diện, người thụ hưởng đã biết, số tiền và hành vi bình thường.
2. **Rủi ro Trung bình (Medium Risk):** thiết bị mới và giao dịch có mức độ bất thường vừa phải.
3. **Rủi ro Cao (High Risk):** thiết bị mới, người thụ hưởng mới, số tiền lớn cùng tần suất hoặc hành vi bất thường.

Mỗi kịch bản đều phải được xử lý bởi cùng một bộ máy tính toán rủi ro. Điểm số phải được sinh ra từ các tín hiệu đầu vào chứ không phải một kết quả gán cứng (hardcoded).

### G. Lịch sử Giao dịch (Transaction History)

Hiển thị các giao dịch demo đã phân tích với:
- Mã giao dịch demo (Demo transaction ID).
- Dấu thời gian (Timestamp).
- Số tiền (Amount).
- Điểm rủi ro và phân loại mức độ rủi ro.
- Các tín hiệu rủi ro đóng góp chính.
- Hành động được khuyến nghị.

Lưu trữ lịch sử demo cục bộ bằng cơ chế lưu trữ phù hợp trên trình duyệt. Gắn nhãn rõ ràng tất cả các bản ghi khởi tạo sẵn là dữ liệu mẫu. Không lưu trữ thông tin xác thực tài chính thật hoặc

Trong thư viện của tôi có 4 phân khu chức năng: 1-Đăng ký mới (new admission): sau khi hoàn thành 1 tháng, học viên có thể gia hạn kỳ học của mình; việc đăng ký có thể được thực hiện mà chưa cần đóng phí ban đầu nhưng nếu không đóng phí trong vòng 10 ngày kể từ ngày đăng ký thì hồ sơ đăng ký có thể bị hủy hoặc chuyển vào vùng cảnh báo đỏ (red zone); sau khi hết 1 tháng, phí gia hạn cũng phải được thanh toán trong vòng 10 ngày đầu tiên của tháng thứ 2, nếu không việc gia hạn sẽ bị hủy. 2-Trong phân mục thu phí (fee section): hiển thị một bảng lưu trữ phí hàng tháng theo ngày và bổ sung thêm chức năng lịch sử thanh toán; khi mở hồ sơ học viên thì tên, địa chỉ, số điện thoại di động, ngày đăng ký, ngày đóng phí và danh sách lịch sử thanh toán của 5 tháng gần nhất sẽ được hiển thị. 3-Trong phân mục điểm danh (attendance section): hiển thị một bảng đơn giản nơi tôi có thể đánh dấu có mặt hoặc vắng mặt cho học viên, đồng thời hiển thị toàn bộ học viên có mặt trong ngày hiện tại cũng như tổng số ngày mỗi học viên đã đến thư viện. 4-Trong phân mục phân bổ chỗ ngồi (sheet distribution section): hiển thị một số lượng chỗ ngồi được chọn (mỗi chỗ dành cho một học viên) và các chỗ ngồi được phân công theo ca; có 4 ca hoạt động gồm: 7h sáng - 1h chiều, 1h chiều - 7h tối, 10h sáng - 3h chiều, 10h sáng - 7h tối.

Hãy đóng vai một lập trình viên frontend chuyên gia về Three.js và WebGL. Tôi muốn xây dựng một trang web trưng bày giày sneaker 3D cao cấp. Hãy viết mã HTML hoàn chỉnh trong một tệp duy nhất (single-file HTML). Yêu cầu: 1) Tải một mô hình 3D có tên 'shoe.glb' bằng GLTFLoader. 2) Tự động căn giữa mô hình và thêm tính năng co giãn đáp ứng (responsive scaling). 3) Triển khai hiệu ứng tự động xoay mượt mà và hiệu ứng thị sai (parallax) theo dõi chuột. 4) Sử dụng thiết lập ánh sáng studio tối sang trọng với hiệu ứng mặt sàn đổ bóng mềm mại. 5) Tạo một lớp giao diện người dùng (UI) phong cách kính mờ (glassmorphism) hiện đại, đáp ứng (responsive) nằm đè lên trên canvas với tiêu đề in đậm 'AERO GLIDE', phần mô tả tinh tế, thẻ giá tùy chỉnh và nút 'Pre-Order Now' có hiệu ứng chuyển động khi di chuột qua (hover). Đảm bảo mã nguồn sẵn sàng cho môi trường thực tế (production-ready), được tối ưu hóa cao và không chứa các phần giữ chỗ (placeholder)."