Dabilux Login UI

WordPress plugin — Giao diện đăng nhập 2 cột với Rive Animation & Glassmorphism

---

Giới thiệu

Dabilux Login UI thay thế trang đăng nhập mặc định của WordPress bằng giao diện hiện đại gồm:

• Cột trái — Logo thương hiệu, tên website và hoạt hình Rive (chú gấu Teddy tương tác).
• Cột phải — Form đăng nhập / đăng ký / quên mật khẩu được làm đẹp với icon Lucide và hiệu ứng Glassmorphism.

---

Tính năng

• 🎨 Bố cục Split-Layout 2 cột, tự động thích ứng với màn hình nhỏ (responsive).
• 🐻 Hoạt hình Rive tương tác (Teddy Bear) — nhìn theo con trỏ khi gõ email, che mắt khi gõ mật khẩu.
• 🪟 Hiệu ứng Glassmorphism (kính mờ) cho card form.
• 🔤 Thêm icon vào các trường nhập liệu (username, password, email…).
• 📄 Hỗ trợ cả 3 trang: Đăng nhập, Đăng ký, Quên mật khẩu.
• 📂 Cho phép upload file .riv lên Media Library để thay thế animation mặc định.

---

Cấu trúc thư mục

dabilux-login-ui/
├── dabilux-login.php          # File plugin chính
├── uninstall.php              # Dọn dẹp khi gỡ cài đặt
├── readme.md
└── assets/
    ├── css/
    │   └── login.css          # Style Glassmorphism & Split Layout
    ├── js/
    │   └── login.js           # Logic DOM, Rive init, icon Lucide
    └── rive/
        └── 520-990-teddy-login-screen.riv   # File animation mặc định

---

Yêu cầu

Yêu cầu	Phiên bản tối thiểu
WordPress	5.0+
PHP	7.4+
Trình duyệt	Hỗ trợ ES6 / Canvas API

---

Cài đặt

1. Tải toàn bộ thư mục dabilux-login-ui vào /wp-content/plugins/.
2. Vào WordPress Admin → Plugins, kích hoạt plugin Dabilux Login.
3. Truy cập /wp-login.php để xem giao diện mới.

---

Tuỳ chỉnh

Thay file animation Rive

Mặc định plugin dùng file assets/rive/520-990-teddy-login-screen.riv.
Để dùng file khác:

1. Upload file .riv lên Media Library (plugin đã đăng ký MIME type application/octet-stream cho .riv).
2. Lưu URL của file vào option dabilux_login_rive_url:

update_option('dabilux_login_rive_url', 'https://example.com/path/to/your.riv');

Thay Logo

Mở dabilux-login.php, tìm biến $logo_url và thay bằng URL logo của bạn:

$logo_url = 'https://your-site.com/logo.png';

Tuỳ chỉnh CSS

Thêm CSS vào Appearance → Customize → Additional CSS hoặc chỉnh trực tiếp assets/css/login.css.

---

Thư viện sử dụng

Thư viện	Phiên bản	Mục đích
@rive-app/canvas	2.10.3	Render hoạt hình Rive
Lucide	latest	Icon cho form inputs

Cả hai thư viện được tải qua CDN (unpkg), không cần cài đặt thêm.

---

Changelog

v2.0.0

• Thiết kế lại toàn bộ sang bố cục 2 cột (Split Layout).
• Thêm hiệu ứng Glassmorphism.
• Tích hợp icon Lucide cho form inputs.
• Hỗ trợ trang Đăng ký và Quên mật khẩu.

---

Tác giả

Dabilux — dabilux.com

---

Giấy phép

Distributed under the GPLv2 or later license.