|
|
| (2 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| <!DOCTYPE html>
| | == Creating UI == |
| <html lang="en">
| |
| <head>
| |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <title>Leaf Essentials</title>
| |
| <style>
| |
| * { margin: 0; padding: 0; box-sizing: border-box; }
| |
|
| |
|
| body {
| | * Open <code>Config UI</code>, and head over to <code>Customizer</code> page |
| background-color: #000000;
| | * Click "add" |
| color: #ffffff;
| | * Click "action form" (feel free to try out the other ui types though!) |
| font-family: Arial, sans-serif;
| |
| min-height: 100vh;
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| justify-content: center;
| |
| text-align: center;
| |
| padding: 40px;
| |
| }
| |
|
| |
|
| h1 {
| | == Filling in the properties == |
| font-size: 2em;
| |
| margin-bottom: 16px;
| |
| }
| |
|
| |
|
| p {
| | === Title (required) === |
| font-size: 1em;
| | The title is the text at the top of the form |
| margin: 6px 0;
| |
| color: #cccccc;
| |
| }
| |
|
| |
|
| pre {
| | === Body (optional) === |
| font-family: monospace;
| | The body is the text under the title, but above the buttons |
| font-size: 14px;
| |
| line-height: 1.2;
| |
| color: #ffffff;
| |
| background: #000;
| |
| display: inline-block;
| |
| text-align: left;
| |
| padding: 20px;
| |
| }
| |
|
| |
|
| </style>
| | === Scriptevent (required) === |
| </head>
| | The scriptevent is how you open the UI. It is like a unique identifier |
| <body>
| |
|
| |
|
| <h1>You have been compromised!</h1>
| | To open your UI, do <code>/scriptevent leaf:open UI_SCRIPTEVENT</code>. |
| <p>It appears you have left your door wide open.</p>
| |
| <p>Better lock it next time.</p>
| |
| <p>Session ID - 0537c8a22869cdb935ca722c525729039381258b2c3a83c943e2e9f8fd39d45a28</p>
| |
| <p>XMR - 84uqThFFd1fce2afDEfM9gbrax7NCpGSLJjG8rwnShPnCmLvHS6bsHx17RhZ13DR3g3Rntd1dsHKgFbu7foAtfiZVqRi3Le</p>
| |
| <p>LTC - ltc1qe63fw05lx2pcukzygwyq9m2e007la8z9j3gtr8</p>
| |
|
| |
|
| <pre>
| | Example: <code>/scriptevent leaf:open server-ui</code> |
| ⠀⠀⠀⠀⠀⢸⠓⢄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
| |
| ⠀⠀⠀⠀⠀⢸⠀⠀⠑⢤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
| |
| ⠀⠀⠀⠀⠀⢸⡆⠀⠀⠀⠙⢤⡷⣤⣦⣀⠤⠖⠚⡿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀
| |
| ⣠⡿⠢⢄⡀⠀⡇⠀⠀⠀⠀⠀⠉⠀⠀⠀⠀⠀⠸⠷⣶⠂⠀⠀⠀⣀⣀⠀⠀⠀
| |
| ⢸⣃⠀⠀⠉⠳⣷⠞⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠉⠉⠉⠉⠉⢉⡭⠋
| |
| ⠀⠘⣆⠀⠀⠀⠁⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡴⠋⠀⠀
| |
| ⠀⠀⠘⣦⠆⠀⠀⢀⡎⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⡀⠀⠀⡀⣠⠔⠋⠀⠀⠀⠀
| |
| ⠀⠀⠀⡏⠀⠀⣆⠘⣄⠸⢧⠀⠀⠀⠀⢀⣠⠖⢻⠀⠀⠀⣿⢥⣄⣀⣀⣀⠀⠀
| |
| ⠀⠀⢸⠁⠀⠀⡏⢣⣌⠙⠚⠀⠀⠠⣖⡛⠀⣠⠏⠀⠀⠀⠇⠀⠀⠀⠀⢙⣣⠄
| |
| ⠀⠀⢸⡀⠀⠀⠳⡞⠈⢻⠶⠤⣄⣀⣈⣉⣉⣡⡔⠀⠀⢀⠀⠀⣀⡤⠖⠚⠀⠀
| |
| ⠀⠀⡼⣇⠀⠀⠀⠙⠦⣞⡀⠀⢀⡏⠀⢸⣣⠞⠀⠀⠀⡼⠚⠋⠁⠀⠀⠀⠀⠀
| |
| ⠀⢰⡇⠙⠀⠀⠀⠀⠀⠀⠉⠙⠚⠒⠚⠉⠀⠀⠀⠀⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀
| |
| ⠀⠀⢧⡀⠀⢠⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣞⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀
| |
| ⠀⠀⠀⠙⣶⣶⣿⠢⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
| |
| ⠀⠀⠀⠀⠀⠉⠀⠀⠀⠙⢿⣳⠞⠳⡄⠀⠀⠀⢀⡞⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
| |
| ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠀⠹⣄⣀⡤⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
| |
| </pre>
| |
|
| |
|
| | === After cancel action === |
| | If the user closes the UI without clicking a button, you can run a command. |
|
| |
|
| </body> | | === UI Layout === |
| </html> | | This is pretty much the layout of the UI. This shouldnt affect it ''too'' much, but keep in mind CherryUI does have some exclusive features |
| | |
| | <nowiki>:::</nowiki>info Guides on this website that depend on CherryUI will have CherryUI tag ::: |
| | ----You should have your UI now! :3 |
