update UIAndUsage

Contributing.md

@@ -0,0 +1 @@
+# Contributing

FAQ.md

@@ -18,7 +18,8 @@ Please check if there is a `config.json` file in the working directory, because
 
 ### Wayland
 
-> Plasma wayland + systemd boot + autostart unable to  display icon on system tray
+> Plasma wayland + systemd boot + autostart unable to display icon on system tray
+>
 > > No such signal QPlatformNativeInterface::systemTrayWindowChanged("QScreen")
 
 The system tray widget will be loaded asynchronously along with the panel, and the application will be opened before them. The following is an example user service of start after `5s` delay.
@@ -44,4 +45,4 @@ Slice=app.slice
 WantedBy=default.target
 ```
 
-## Windows
+## Windows

README.md

@@ -1,21 +1,25 @@
 ## Welcome
-Welcome to ACross's official documentation. Here you can find probability anything you need to know about the configurations of your instance, the usage and the contributing guidelines. 
+
+Welcome to ACross's official documentation. Here you can find probability anything you need to know about the configurations of your instance, the usage and the contributing guidelines.
 
 ![preview](_media/banner.png)
 
-`ACross` is a simple and modern GUI client for v2ray written in Qt6 & QML which is one of the main products of the `Arktoria` community. We focus on user experience,  simple and practical, no much redundant functions but doing it well and flexibility. For instance, we do not provide a build-in core to keep the project pure and clean, but you can easily set the core and even customize the interface for your core branch. One of the crucial pieces of ACross is our community which is always asking us for new features or reporting issues that might happen. We rececommend you vividly to check our [Github Issues](https://github.com/ArkToria/ACross/issues). For developers, we welcome you refer to the contributing page.
+`ACross` is a simple and modern GUI client for v2ray written in Qt6 & QML which is one of the main products of the `Arktoria` community. We focus on user experience, simple and practical, no much redundant functions but doing it well and flexibility. For instance, we do not provide a build-in core to keep the project pure and clean, but you can easily set the core and even customize the interface for your core branch. One of the crucial pieces of ACross is our community which is always asking us for new features or reporting issues that might happen. We rececommend you vividly to check our [Github Issues](https://github.com/ArkToria/ACross/issues). For developers, we welcome you refer to the contributing page.
 
 ## Supported Platforms
+
 - Linux
 - Windows (at least Windows 10 or newer)
 
 ## Protocols
+
 - VMESS
 - Trojan
 - Shadowsocks
 
 ## Subscriptions
+
 - SIP008
 - Base64 (`ss://` | `vmess://` | `trojan://`)
 
-We also provide manual local configuration management and regular automatic update. All nodes information will be stored in the `SQLite` database which you can easily backup and read the data without this app.
+We also provide manual local configuration management and regular automatic update. All nodes information will be stored in the `SQLite` database which you can easily backup and read the data without this app.

UIAndUsage.md

@@ -0,0 +1,104 @@
+# User Intreface
+
+## Home Page
+
+![Home Page](/UI/home_page.png)
+
+### Local Group and Nodes
+
+- Create Local Group
+
+![Create local group](/UI/create_local_group.png)
+
+Enter the group name and you can pre-fill the node list in `base64` format here, or leave it blank.
+
+### Subscription Group
+
+- Create Subscription Group
+
+![Create Subscription group](/UI/create_subscription_group.png)
+
+The subscription content type should be one of the following three: `Base64`, `SIP008` and `JSON Outbound`. If you are not sure, enter the subscription link in your browser to compare with the following scheme.
+
+#### Subscription Type
+
+- Base64: Generally looks like `vmess://`|`ss://`|`trojan://`
+
+  - VMESS: `vmess://<base64EncodeJson>`
+
+  ```json
+
+     "v": "2",
+     "ps": "Names",
+     "add": "111.111.111.111",
+     "port": "32000",
+     "id": "1386f85e-657b-4d6e-9d56-78badb75e1fd",
+     "aid": "100",
+     "scy": "zero",
+     "net": "tcp",
+     "type": "none",
+     "host": "www.bbb.com",
+     "path": "/",
+     "tls": "tls",
+     "sni": "www.ccc.com"
+  }
+  ```
+
+  - Shadowsocks [SIP002](https://shadowsocks.org/en/wiki/SIP002-URI-Scheme.html):
+    `ss://<websafe-base64-encode-utf8(method:password)>@hostname:port/?plugin"#"tag`
+
+  - Trojan:
+    `trojan://<password>@<host>:<port>?sni=<server_name>&allowinsecure=<allow_insecure>&alpn=h2%0Ahttp/1.1#<name>`
+
+- Shadowsocks [SIP008](https://shadowsocks.org/en/wiki/SIP008-Online-Configuration-Delivery.html):
+
+  ```json
+  {
+    "version": 1,
+    "servers": [
+      {
+        // Server UUID to distinguish between servers when updating.
+        "id": "27b8a625-4f4b-4428-9f0f-8a2317db7c79",
+        "remarks": "Name of the server",
+        "server": "example.com",
+        "server_port": 8388,
+        "password": "example",
+        "method": "chacha20-ietf-poly1305",
+        "plugin": "xxx",
+        "plugin_opts": "xxxxx"
+      },
+      // Another server
+      {
+        "id": "7842c068-c667-41f2-8f7d-04feece3cb67",
+        "remarks": "Name of the server",
+        "server": "example.com",
+        "server_port": 8388,
+        "password": "example",
+        "method": "chacha20-ietf-poly1305",
+        "plugin": "xxx",
+        "plugin_opts": "xxxxx"
+      }
+    ],
+    // The above fields are mandatory.
+    // Optional fields for data usage:
+    "bytes_used": 274877906944,
+    "bytes_remaining": 824633720832
+    // You may add other custom fields in the root object.
+  }
+  ```
+
+- VMESS Outbound Object
+
+    ```json
+    {
+        "sendThrough": "0.0.0.0",
+        "protocol": "protocol name",
+        "settings": {},
+        "tag": "PROXY",
+        "streamSettings": {},
+        "proxySettings": {
+            "tag": "another-outbound-tag",
+            "transportLayer": false
+        }
+    }
+    ```

_sidebar.md

@@ -1,3 +1,5 @@
 * [Introduction](/README.md)
 * [Installation](/Installation.md)
+* [UI & Usage](/UIAndUsage.md)
+* [Contributing](/Contributing.md)
 * [F&Q](/FAQ.md)

index.html

@@ -81,6 +81,7 @@
     <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-git.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-systemd.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-protobuf.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-json.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/index.min.js">
   </script>
   </body>