br0kenpixel/ReZygisk
1
0
Fork 0
mirror of https://github.com/PerformanC/ReZygisk.git synced 2025-09-06 06:37:01 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

add: base for webui support in rezygisk

Browse Source 
This commit will add the base for webui in rezygisk
This commit is contained in:
RainyXeon /
2024-06-21 11:23:22 +07:00
committed by ThePedroo
parent 47566a81af
commit a3accd7a94
8 changed files with 324 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/css/base.css
+13
View File
@@ -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;
}
webui/css/main.css
+53
View File
@@ -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;
}
webui/css/terminal.css
+23
View File
@@ -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;
}
webui/index.html
+46
View File
@@ -0,0 +1,46 @@
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
<meta name="viewport" content="viewport-fit=cover" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="js/main.js" type="module"></script>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/base.css" />
</head>
<body>
<div style="margin-left: 25px; padding-top: 20px;" onclick="window.close()">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
<path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/>
</svg>
</div>
<div style="font-size: 2em; margin-left: 25px; margin-top: 2em; margin-bottom: 1.2em;">ReZygisk</div>
<div>
<div class="option_header">Information</div>
<div class="option_section">
<div class="option_title disable">Version</div>
<div class="option_desc disable">1.0.0</div>
</div>
<div class="option_section">
<div class="option_title disable">Root implementation</div>
<div class="option_desc disable">KernelSU</div>
</div>
<div class="option_section">
<div class="option_title disable">Zygote Monitor</div>
<div class="option_desc disable">Running</div>
</div>
<div class="option_section">
<div class="option_title disable">Zygote64</div>
<div class="option_desc disable">Injected</div>
</div>
<div class="option_header">Options</div>
<div class="option_section_only btn-ripple">Injected Modules</div>
<div class="option_section_only btn-ripple">Raw Data</div>
<div class="option_section_only btn-ripple">Settings</div>
<a href="./pages/terminal.html">
<div class="option_section_only btn-ripple">Terminal</div>
</a>
</div>
</body>
</html>
webui/js/main.js
+2
View File
@@ -0,0 +1,2 @@
import { toast } from '../lib/kernelsu';
toast('Hello, world!');
webui/js/ripple.js
+48
View File
@@ -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});
}
webui/lib/kernelsu.js
+115
View File
@@ -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);
}
webui/pages/terminal.html
+24
View File
@@ -0,0 +1,24 @@
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
<meta name="viewport" content="viewport-fit=cover" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../css/terminal.css" />
</head>
<body>
<div class="header">
<a href="../index.html" style="background-color: #181c20;">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed" style="background-color: #181c20;">
<path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/>
</svg>
</a>
<div style="padding-left: 10px; background-color: #181c20;">Terminal</div>
</div>
<div class="main">
<div>root@rezygisk:/$ </div>
</div>
</body>
</html>