You've already forked ReZygisk
mirror of
https://github.com/PerformanC/ReZygisk.git
synced 2025-09-06 06:37:01 +00:00
move: webui -> webroot; improve: design for webui
This commit will move webui dir to webroot dir and redesign the webui base on KernelSU UI
This commit is contained in:
RainyXeon /
3
webroot/assets/tick.svg
Normal file
3
webroot/assets/tick.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg class="brightc" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
|
||||
<path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 483 B |
61
webroot/css/index.css
Normal file
61
webroot/css/index.css
Normal file
@@ -0,0 +1,61 @@
|
||||
* {
|
||||
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;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 25px 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 10px;
|
||||
padding: 15px 15px;
|
||||
border-radius: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.spliter {
|
||||
border-bottom: 1px solid #283136;
|
||||
}
|
||||
|
||||
.liste {
|
||||
justify-content: space-between;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bright {
|
||||
border: 5px solid #3a4857;
|
||||
background: #3a4857;
|
||||
}
|
||||
.brightc {
|
||||
background: #3a4857;
|
||||
}
|
||||
|
||||
.dim {
|
||||
border: 5px solid #1d2327;
|
||||
background: #1d2327;
|
||||
}
|
||||
|
||||
.dimc {
|
||||
background: #1d2327;
|
||||
}
|
||||
64
webroot/index.html
Normal file
64
webroot/index.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!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/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">ReZygisk</div>
|
||||
<div name="ghost" style="padding: 40px 0px;"></div>
|
||||
<div name="version" class="bright card">
|
||||
<div class="brightc content" style="display: flex; align-items: center;">
|
||||
<div name="rezygisk-status" class="brightc">
|
||||
<img class="brightc" src="assets/tick.svg">
|
||||
</div>
|
||||
<div name="rezygisk-status" class="brightc content" style="font-size: 1.2em; padding-bottom: 6.5px; padding-left: 5px;">
|
||||
Zygote is running!
|
||||
</div>
|
||||
</div>
|
||||
<div class="brightc content">
|
||||
<div class="brightc" style="font-size: 1.1em">Version</div>
|
||||
<div class="brightc" style="color: #c9c9c9">1.0.0</div>
|
||||
</div>
|
||||
<div class="brightc content">
|
||||
<div class="brightc" style="font-size: 1.1em">Root Implementation</div>
|
||||
<div class="brightc" style="color: #c9c9c9">KernelSU</div>
|
||||
</div>
|
||||
<div class="brightc content">
|
||||
<div class="brightc" style="font-size: 1.1em">Zygote32</div>
|
||||
<div class="brightc" style="color: #c9c9c9">Injected</div>
|
||||
</div>
|
||||
<div class="brightc content">
|
||||
<div class="brightc" style="font-size: 1.1em">Zygote64</div>
|
||||
<div class="brightc" style="color: #c9c9c9">Injected</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div name="version" class="dim card">
|
||||
<div class="dimc content" style="font-size: 1.2em;">
|
||||
Modules (3)
|
||||
</div>
|
||||
<div class="dimc content spliter liste" style="padding-top: 3px; padding-bottom: 13px;">
|
||||
<div class="dimc">Play Integrity Fix (STRONG)</div>
|
||||
<div class="dimc">32/64</div>
|
||||
</div>
|
||||
<div class="dimc content spliter liste" style="padding-top: 10px; padding-bottom: 13px;">
|
||||
<div class="dimc">Shamiko</div>
|
||||
<div class="dimc">32/64</div>
|
||||
</div>
|
||||
<div class="dimc content spliter liste" style="padding-top: 10px; padding-bottom: 13px;">
|
||||
<div class="dimc">Zygisk - LSposed</div>
|
||||
<div class="dimc">32/64</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div name="version" class="dim card">
|
||||
<div class="dimc content" style="font-size: 1.2em;">
|
||||
Settings
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
2
webroot/js/main.js
Normal file
2
webroot/js/main.js
Normal file
@@ -0,0 +1,2 @@
|
||||
import { toast } from './kernelsu';
|
||||
toast('Hello, world!');
|
||||
@@ -1,13 +0,0 @@
|
||||
* {
|
||||
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;
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
* {
|
||||
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;
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,2 +0,0 @@
|
||||
import { toast } from '../lib/kernelsu';
|
||||
toast('Hello, world!');
|
||||
@@ -1,48 +0,0 @@
|
||||
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});
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
<!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