From a3accd7a943d9a5634a6bce33278ad09c8616d71 Mon Sep 17 00:00:00 2001 From: RainyXeon / Date: Fri, 21 Jun 2024 11:23:22 +0700 Subject: [PATCH] add: base for webui support in rezygisk This commit will add the base for webui in rezygisk --- webui/css/base.css | 13 +++++ webui/css/main.css | 53 ++++++++++++++++++ webui/css/terminal.css | 23 ++++++++ webui/index.html | 46 +++++++++++++++ webui/js/main.js | 2 + webui/js/ripple.js | 48 ++++++++++++++++ webui/lib/kernelsu.js | 115 ++++++++++++++++++++++++++++++++++++++ webui/pages/terminal.html | 24 ++++++++ 8 files changed, 324 insertions(+) create mode 100644 webui/css/base.css create mode 100644 webui/css/main.css create mode 100644 webui/css/terminal.css create mode 100644 webui/index.html create mode 100644 webui/js/main.js create mode 100644 webui/js/ripple.js create mode 100644 webui/lib/kernelsu.js create mode 100644 webui/pages/terminal.html diff --git a/webui/css/base.css b/webui/css/base.css new file mode 100644 index 0000000..a75cfb9 --- /dev/null +++ b/webui/css/base.css @@ -0,0 +1,13 @@ +* { + background-color: #181c20; + color: #fff; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif +} + +body { + margin: 0; +} + +a { + text-decoration: none !important; +} \ No newline at end of file diff --git a/webui/css/main.css b/webui/css/main.css new file mode 100644 index 0000000..d7cb727 --- /dev/null +++ b/webui/css/main.css @@ -0,0 +1,53 @@ +/* Styling for the ripple button */ +.btn-ripple { + background-color: #181c20; /* Setting the initial button background color */ + transition: background 0.8s; /* Adding a transition to the background color */ +} + +/* Defining the hover state */ +.btn-ripple:hover { + background: #181c20 radial-gradient(circle, transparent 1%, #181c20 1%) + center/15000%; /* Creating a radial gradient background on hover */ +} + +/* Defining the active (clicked) state */ +.btn-ripple:active { + background-color: #5e5e5e; /* Changing the button color when active */ + background-size: 100%; /* Increasing the size of the background image */ + transition: background 0s; /* Removing the transition from the background color */ +} + +.option_header { + padding: 15px 25px; + font-size: 0.9em; + font-weight: 500; + color: #cee5ff; +} + +.option_title { + font-size: 1.2em; +} + +.disable { + color: #c1c7ce; +} + +.option_desc { + margin-top: 3px; + font-size: 0.9em; +} + +.option_section { + padding: 15px 25px; +} +.option_section_only { + font-size: 1.2em; + padding: 15px 25px; +} + +.option_spliter { + width: 100%; + border-top: 1px solid black; + background-color: black; + color: #000; +} \ No newline at end of file diff --git a/webui/css/terminal.css b/webui/css/terminal.css new file mode 100644 index 0000000..f6d7bb5 --- /dev/null +++ b/webui/css/terminal.css @@ -0,0 +1,23 @@ +* { + background-color: #121518; + color: #fff; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif +} + +body { + margin: 0; +} + +a { + text-decoration: none !important; +} + +.header { + background-color: #181c20; + display: flex; + padding: 20px 25px; +} + +.main { + padding: 10px 10px; +} \ No newline at end of file diff --git a/webui/index.html b/webui/index.html new file mode 100644 index 0000000..188196d --- /dev/null +++ b/webui/index.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + +
+ + + +
+
ReZygisk
+
+
Information
+
+
Version
+
1.0.0
+
+
+
Root implementation
+
KernelSU
+
+
+
Zygote Monitor
+
Running
+
+
+
Zygote64
+
Injected
+
+
Options
+
Injected Modules
+
Raw Data
+
Settings
+ +
Terminal
+ +
+ + \ No newline at end of file diff --git a/webui/js/main.js b/webui/js/main.js new file mode 100644 index 0000000..cff78b3 --- /dev/null +++ b/webui/js/main.js @@ -0,0 +1,2 @@ +import { toast } from '../lib/kernelsu'; +toast('Hello, world!'); \ No newline at end of file diff --git a/webui/js/ripple.js b/webui/js/ripple.js new file mode 100644 index 0000000..7fe9292 --- /dev/null +++ b/webui/js/ripple.js @@ -0,0 +1,48 @@ +window.addEventListener("mousedown", e => { + const target = e.target; + + if(target.nodeName == "BUTTON" && !target.classList.contains("css-only-ripple")) { + show_ripple(target); + } +}); +function show_ripple(button) { + const style = getComputedStyle(button); + let ripple_elmnt = document.createElement("span"); + let diameter = Math.max(parseInt(style.height), parseInt(style.width)) * 1.5; + let radius = diameter / 2; + + ripple_elmnt.className = "ripple"; + ripple_elmnt.style.height = ripple_elmnt.style.width = diameter + "px"; + ripple_elmnt.style.position = "absolute"; + ripple_elmnt.style.borderRadius = "1000px"; + ripple_elmnt.style.pointerEvents = "none"; + + ripple_elmnt.style.left = event.clientX - button.offsetLeft - radius + "px"; + ripple_elmnt.style.top = event.clientY - button.offsetTop - radius + "px"; + + ripple_elmnt.style.transform = "scale(0)"; + ripple_elmnt.style.transition = "transform 500ms ease, opacity 400ms ease"; + ripple_elmnt.style.background = "rgba(255,255,255,0.5)"; + button.appendChild(ripple_elmnt); + + setTimeout(() => { + ripple_elmnt.style.transform = "scale(1)"; + }, 10); + + button.addEventListener("mouseup", e => { + ripple_elmnt.style.opacity = 0; + setTimeout(() => { + try { + button.removeChild(ripple_elmnt); + } catch(er) {} + }, 400); + }, {once: true}); + button.addEventListener("blur", e => { + ripple_elmnt.style.opacity = 0; + setTimeout(() => { + try { + button.removeChild(ripple_elmnt); + } catch(er) {} + }, 450); + }, {once: true}); +} \ No newline at end of file diff --git a/webui/lib/kernelsu.js b/webui/lib/kernelsu.js new file mode 100644 index 0000000..4121e5d --- /dev/null +++ b/webui/lib/kernelsu.js @@ -0,0 +1,115 @@ +let callbackCounter = 0; +function getUniqueCallbackName(prefix) { + return `${prefix}_callback_${Date.now()}_${callbackCounter++}`; +} + +export function exec(command, options) { + if (typeof options === "undefined") { + options = {}; + } + + return new Promise((resolve, reject) => { + // Generate a unique callback function name + const callbackFuncName = getUniqueCallbackName("exec"); + + // Define the success callback function + window[callbackFuncName] = (errno, stdout, stderr) => { + resolve({ errno, stdout, stderr }); + cleanup(callbackFuncName); + }; + + function cleanup(successName) { + delete window[successName]; + } + + try { + ksu.exec(command, JSON.stringify(options), callbackFuncName); + } catch (error) { + reject(error); + cleanup(callbackFuncName); + } + }); +} + +function Stdio() { + this.listeners = {}; + } + + Stdio.prototype.on = function (event, listener) { + if (!this.listeners[event]) { + this.listeners[event] = []; + } + this.listeners[event].push(listener); + }; + + Stdio.prototype.emit = function (event, ...args) { + if (this.listeners[event]) { + this.listeners[event].forEach((listener) => listener(...args)); + } + }; + + function ChildProcess() { + this.listeners = {}; + this.stdin = new Stdio(); + this.stdout = new Stdio(); + this.stderr = new Stdio(); + } + + ChildProcess.prototype.on = function (event, listener) { + if (!this.listeners[event]) { + this.listeners[event] = []; + } + this.listeners[event].push(listener); + }; + + ChildProcess.prototype.emit = function (event, ...args) { + if (this.listeners[event]) { + this.listeners[event].forEach((listener) => listener(...args)); + } + }; + + export function spawn(command, args, options) { + if (typeof args === "undefined") { + args = []; + } else if (!(args instanceof Array)) { + // allow for (command, options) signature + options = args; + } + + if (typeof options === "undefined") { + options = {}; + } + + const child = new ChildProcess(); + const childCallbackName = getUniqueCallbackName("spawn"); + window[childCallbackName] = child; + + function cleanup(name) { + delete window[name]; + } + + child.on("exit", code => { + cleanup(childCallbackName); + }); + + try { + ksu.spawn( + command, + JSON.stringify(args), + JSON.stringify(options), + childCallbackName + ); + } catch (error) { + child.emit("error", error); + cleanup(childCallbackName); + } + return child; + } + +export function fullScreen(isFullScreen) { + ksu.fullScreen(isFullScreen); +} + +export function toast(message) { + ksu.toast(message); +} \ No newline at end of file diff --git a/webui/pages/terminal.html b/webui/pages/terminal.html new file mode 100644 index 0000000..901ba0a --- /dev/null +++ b/webui/pages/terminal.html @@ -0,0 +1,24 @@ + + + + + + + + + + +
+ + + + + +
Terminal
+
+ +
+
root@rezygisk:/$
+
+ + \ No newline at end of file