Update 13/04/2023

adman/docs/tutorial-adman/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Adman",
+  "position": 3
+}

adman/docs/tutorial-adman/adman-setting.md

@@ -0,0 +1,33 @@
+---
+sidebar_position: 4
+---
+
+# Cài đặt
+
+Cài đặt các thiết lập dành riêng cho **Tài khoản gốc Adman** `(Tài khoản đầu tiên)` tạm gọi lad **ADMIN**.
+
+## Nhân sự
+
+Từ **Thanh công cụ bên trái**, ấn **Cài đặt**, tiếp theo ấn vào **Nhân sự**.
+
+![Setting Staffs](./img/minigame-setting-staffs.png)
+
+### Danh sách nhân sự
+
+Danh sách nhân sự bao gồm:
+
+- **Họ tên:** hiển thị Tên và Email của nhân sự.
+- **Quyền hạn:** quyền hạn được phân cấp bởi `ADMIN`, quyền hạn càng cao thì càng được sử dụng nhiều chức năng của `Adman`.
+- **Đăng nhập cuối:** hiển thị thời gian và địa chỉ ip của lần đăng nhập cuối cùng.
+- **Lựa chọn:**
+  - **Xóa:** xóa nhân sự.
+  - **Xem chi tiết:** chỉnh sửa lại thông tin cơ bản, quyền hạn và mật khẩu của nhân sự.
+
+### Thêm mới
+
+Ấn <button className="btn btn-add">[+] Thêm mới</button> để hiển thị Popup **Tạo nhân sự**
+
+- Nhập đầy đủ các trường `Họ, Tên, Email, Mobile`.
+- Ấn <button className="btn btn-submit">Thực hiện</button> để thêm nhân sự mới.
+
+![Setting Staffs](./img/minigame-setting-staffs-2.png)

adman/docs/tutorial-adman/files-library.md

@@ -0,0 +1,65 @@
+---
+sidebar_position: 2
+---
+
+# Thư viện files
+
+Là nơi bạn tải và lưu trữ toàn bộ files vào tài khoản Adman. Chủ yếu là các hình ảnh như: **ảnh sản phẩm, ảnh vòng quay, ảnh banner, logo, ...**. Giúp các bạn quản lý các files một cách hợp lý, khoa học hơn.
+
+Cung cấp một số thông tin chính như :
+
+- **Type**: loại file như Photo(ảnh), css(CSS3), js(javascript),... `Đang cập nhật`.
+- **Thông tin:** tên file và ảnh preview - `nếu là file ảnh`.
+- **Dung lượng:** kích thước file.
+- **Thời gian:** thời gian và tên tài khoản đã upload file.
+- **Lựa chọn:**
+  - **Xem chi tiết**: xem nội dung của file.
+  - **Xóa**: xóa file hiện tại.
+
+Phía bên trái là **Thanh điều hướng - Navbar**. Chọn **Thư viện files**.
+
+Đây là **Thư viện chung** cho toàn bộ Minigame của tài khoản Adman.
+
+:::tip
+
+Bạn nên tải các file ảnh **Logo, Banner, Icon,...** có thể tái sử dụng nhiều lần vào **Thư viện chung** này.
+
+:::
+
+![Files Library](./img/minigame-library-files-1.png)
+
+## Chức năng chính
+
+### Upload file mới
+
+- Ấn <button className="btn btn-add">[+] Upload file mới</button> một Popup sẽ hiển thị.
+- Ấn vào ô **Upload** rồi chọn file cần tải lên. Ảnh sẽ lập tức được upload lên website. Ấn <button className="btn btn-submit">OK</button> để đóng Popup.
+
+:::tip
+
+- File ảnh tải lên nên được tối ưu, có kích thước phù hợp, dung lượng nhỏ hơn 1MB.
+- File ảnh **sản phẩm** nên là ảnh vuông, có nền trong suốt, dạng PNG.
+- File ảnh banner, nền nên là ảnh JPG để có dung lượng tối ưu nhất.
+
+:::
+
+### Danh mục
+
+`Đang cập nhật`
+
+## Thư viện riêng
+
+Ngoài **Thư viện chung**, còn có các **Thư viện riêng** cho từng Minigame.
+
+Vào một Minigame bất kì, thanh điều hướng ngay bên trái,
+
+- Chọn **Thư viện files**, hệ thống tự động mở tab **File riêng của game**.
+- Chọn tab **Thư viện chung** ngay kế bên để xem danh sách các file chung.
+
+:::tip
+
+Các file ảnh như **ảnh sản phẩm, ảnh vòng quay,... file riêng biệt** cho từng Minigame nên upload ở **Thư viện riêng** để dễ quản lý hơn.
+
+:::
+
+![Files Library](./img/minigame-library-files-2.png)

adman/docs/tutorial-adman/index.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 1
+---
+
+# Hướng dẫn Adman
+
+Hướng dẫn sử dụng các chức năng cơ bản của **Adman** các tính năng bổ trợ khác.
+
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />

adman/docs/tutorial-adman/tutorial-design-wheel.md

@@ -0,0 +1,101 @@
+---
+sidebar_position: 3
+---
+
+# Hướng dẫn cắt vòng quay
+
+Dưới đây là một số cách cắt vòng quay cơ bản, dễ làm và miễn phí.
+
+:::tip
+
+Nếu bạn muốn Vòng quay nhiều `màu sắc, hoạt ảnh, hiệu ứng...` xin vui lòng liên hệ bộ phần **[Bộ phận Chăm sóc khách hàng](https://www.hurasoft.vn/)** để được tư vấn thêm về thiết kế.
+
+:::
+
+## Thiết kế bằng Figma
+
+**[Figma](https://www.figma.com/)** là một ứng dụng gồm nhiều công cụ thiết kế mạnh mẽ trên nền tảng website. Với Figma, bạn có thể sáng tạo không giới hạn giao diện người dùng (UI/UX), thiết kế tạo mẫu, tạo bài đăng trên các mạng xã hội và nhiều dự án thiết kế khác.
+
+### Đăng kí tài khoản (Miễn phí)
+
+Để sử dụng một cách đầy đủ nhất vui lòng **đăng ký tài khoản (miễn phí)** tại **[Figma](https://www.figma.com/)**, sau đó ấn <button className="btn btn-submit">Get Started</button>.
+
+![Figma Homepage](./img/minigame-tutorial-design-wheel-1.png)
+
+:::danger
+
+Sau khi `Đăng ký` xong tài khoản, vui lòng `Đăng nhập` để thực hiện bước tiếp theo.
+
+:::
+
+### Sử dụng thiết kế có sẵn
+
+Nhằm đảm bảo cho việc rút ngắn thời gian, đơn giản hóa công việc tạo **Ô sản phẩm trên vòng quay**, chúng tôi xin cung cấp các mẫu có sẵn theo từng số lượng cố định ở Link:
+
+- **[Thiết kế hình ảnh sản phẩm vòng quay mẫu 1](https://www.figma.com/file/EOx1EPnA2OkzQD5FEZzNJo/Thi%E1%BA%BFt-k%E1%BA%BF-v%C3%B2ng-quay-may-m%E1%BA%AFn-c%C6%A1-b%E1%BA%A3n-1?t=0U0p17qqc1kVnfjl-1)**
+
+- **[Thiết kế hình ảnh sản phẩm vòng quay mẫu 2](https://www.figma.com/file/T2aqeEFOUoB2o9fIA67wak/VONGQUAY_6-8-10-12?t=vLvTMihgA3xTmQKr-1)**
+
+Để chỉnh sửa vui lòng làm theo các bước:
+
+- Ấn vào dấu mũi tên đi xuống `(vị trí 1)`.
+- Ấn **Duplicate to your drafts** `(vị trí 2)`.
+- Ấn **Open** khi có thông báo đã thành công `(vị trí 3)` hoặc quay lại **[Figma](https://www.figma.com/)** để tìm, lưu ý cuối tên file có chữ `(Copy)`.
+
+![Figma Duplicate Draft](./img/minigame-tutorial-design-wheel-2.png)
+
+:::caution
+
+- Thiết kế mẫu chỉ bao gồm `Hình ảnh các ô trên vòng quay`. Bạn cần chọn `ảnh sản phẩm` phù hợp cùng với `tên giải thưởng` để chèn vào bên trong.
+- Khi **[Cài đặt vòng quay](../tutorial-minigame/wheel)** vui lòng `theo thứ tự như mẫu, màu sắc SOLE với nhau` để hình Vòng quay được hiển thị đẹp nhất.
+
+:::
+
+### Thiết kế theo số lượng tự chọn - Figpie
+
+:::caution
+
+- Cần thời gian và sự tỉ mỉ.
+- Số lượng ô trên vòng quay khuyến nghị là từ 4 - 12.
+- Nếu gặp khó khăn vui lòng liên hệ bộ phận **[Bộ phận Chăm sóc khách hàng](https://www.hurasoft.vn/)** để được giúp đỡ.
+
+:::
+
+- Vào Link **[Figpie](https://www.figma.com/community/plugin/924390003304842148/Figpie)**, sau đó ấn <button className="btn btn-submit">Try it out</button> để cài đặt.
+- Bạn sẽ được chuyển về trang Thiết kế của Figma, một Popup thông báo sẽ hiển thị, Ấn <button className="btn btn-submit">Run</button>.
+- Plugin **Figpie** hiển thị báo gồm các cài đặt sau:
+
+  - **DATA:** số lượng ô trên vòng quay.
+    - ấn `+` để thêm và ấn `-` để xóa.
+    - nhập `value` giống nhau, mặc định là `5`.
+  - **DIAMETER:** `chiều cao và chiều rộng` của Vòng quay.
+  - **THEME:** màu sắc mặc định của các ô.
+  - **PREVIEW:** xem trước Vòng quay hiển thị.
+
+  ![Figpie](./img/minigame-tutorial-design-wheel-3.png)
+
+- Ấn <button className="btn btn-figpie">Create a pie chart</button> để tạo.
+
+- **Một biểu đồ** sẽ hiển thị `(1)`, vui lòng chọn `1 ô (mảnh)` (tạm gọi là &#127829;) trong số đó và làm theo hướng dẫn:
+
+  - Kéo ra ngoài `(2)`
+  - Xóa viền trắng mặc định `(3)`, ấn dấu `-`
+  - Chỉnh màu `(5)`
+  - Chỉnh lại góc nghiêng `(4)` sao cho &#127829; dựng thẳng đứng `(6)`image.png
+
+  ![Figpie Tutorial 1](./img/minigame-tutorial-design-wheel-4.png)
+
+- **Tạo Frame** để bọc khung `Ô vòng quay` vừa lấy được:
+
+  - Ấn trên bàn phím nút `F`, sau đó kéo thả chuột tạo 1 **Frame** với `chiều cao` bằng với &#127829;, `chiều rộng` sẽ tự căn chỉnh sau `(1)`.
+  - Kéo &#127829; `(2)` vào bên trong **Frame** `(1)` sẽ được **Frame** `(3)`
+  - Xòa màu nền bằng cách ấn vào `-` `(4)`
+  - **Frame** hoàn thiện `(5)`, copy `Ctrl + C` và dán `Ctrl + V` lại ở vị trí khác rồi đổi màu sẽ có &#127829; khác `(6)`.
+
+  ![Figpie Tutorial 2](./img/minigame-tutorial-design-wheel-5.png)
+
+- Việc cuối cùng là tạo thêm các &#127829; để thêm nội dung vào đó rồi xuất ảnh.
+
+## Thiết kế bằng Photoshop
+
+`Đang cập nhật`