You've already forked ReZygisk
mirror of
https://github.com/PerformanC/ReZygisk.git
synced 2025-09-06 06:37:01 +00:00
add: base for webui support in rezygisk
This commit will add the base for webui in rezygisk
This commit is contained in:
RainyXeon /
13
webui/css/base.css
Normal file
13
webui/css/base.css
Normal 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;
|
||||
}
|
||||
53
webui/css/main.css
Normal file
53
webui/css/main.css
Normal 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;
|
||||
}
|
||||
23
webui/css/terminal.css
Normal file
23
webui/css/terminal.css
Normal 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;
|
||||
}
|
||||
46
webui/index.html
Normal file
46
webui/index.html
Normal 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>
|
||||
2
webui/js/main.js
Normal file
2
webui/js/main.js
Normal file
@@ -0,0 +1,2 @@
|
||||
import { toast } from '../lib/kernelsu';
|
||||
toast('Hello, world!');
|
||||
48
webui/js/ripple.js
Normal file
48
webui/js/ripple.js
Normal 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});
|
||||
}
|
||||
115
webui/lib/kernelsu.js
Normal file
115
webui/lib/kernelsu.js
Normal 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);
|
||||
}
|
||||
24
webui/pages/terminal.html
Normal file
24
webui/pages/terminal.html
Normal 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>
|
||||
Reference in New Issue
Block a user