Skip to content

Commit 52a55c7

Browse files
KOWX712KOWX712
committed
webui: add monet theme support in MMRL
1 parent c91ce88 commit 52a55c7

3 files changed

Lines changed: 94 additions & 104 deletions

File tree

‎module/webroot/assets/RobotoMono-Regular.ttf‎

-85.2 KB
Binary file not shown.

‎module/webroot/scripts.js‎

Lines changed: 24 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ function applyButtonEventListeners() {
2121
const fetchButton = document.getElementById('fetch');
2222
const previewFpToggle = document.getElementById('preview-fp-toggle-container');
2323
const clearButton = document.querySelector('.clear-terminal');
24+
const terminal = document.querySelector('.output-terminal-content');
2425

2526
fetchButton.addEventListener('click', runAction);
2627
previewFpToggle.addEventListener('click', async () => {
@@ -34,22 +35,19 @@ function applyButtonEventListeners() {
3435
console.error('Failed to switch fingerprint type:', error);
3536
}
3637
});
38+
3739
clearButton.addEventListener('click', () => {
38-
const output = document.querySelector('.output-terminal-content');
39-
output.innerHTML = '';
40+
terminal.innerHTML = '';
4041
currentFontSize = 14;
4142
updateFontSize(currentFontSize);
4243
});
43-
44-
const terminal = document.querySelector('.output-terminal-content');
4544

4645
terminal.addEventListener('touchstart', (e) => {
4746
if (e.touches.length === 2) {
4847
e.preventDefault();
4948
initialPinchDistance = getDistance(e.touches[0], e.touches[1]);
5049
}
5150
}, { passive: false });
52-
5351
terminal.addEventListener('touchmove', (e) => {
5452
if (e.touches.length === 2) {
5553
e.preventDefault();
@@ -66,7 +64,6 @@ function applyButtonEventListeners() {
6664
initialPinchDistance = currentDistance;
6765
}
6866
}, { passive: false });
69-
7067
terminal.addEventListener('touchend', () => {
7168
initialPinchDistance = null;
7269
});
@@ -147,11 +144,29 @@ async function runAction() {
147144
actionRunning = false;
148145
}
149146

150-
// Function to apply ripple effect
147+
/**
148+
* Simulate MD3 ripple animation
149+
* Usage: class="ripple-element" style="position: relative; overflow: hidden;"
150+
* Note: Require background-color to work properly
151+
* @return {void}
152+
*/
151153
function applyRippleEffect() {
152154
document.querySelectorAll('.ripple-element').forEach(element => {
153155
if (element.dataset.rippleListener !== "true") {
154-
element.addEventListener("pointerdown", function (event) {
156+
element.addEventListener("pointerdown", async (event) => {
157+
// Pointer up event
158+
const handlePointerUp = () => {
159+
ripple.classList.add("end");
160+
setTimeout(() => {
161+
ripple.classList.remove("end");
162+
ripple.remove();
163+
}, duration * 1000);
164+
element.removeEventListener("pointerup", handlePointerUp);
165+
element.removeEventListener("pointercancel", handlePointerUp);
166+
};
167+
element.addEventListener("pointerup", handlePointerUp);
168+
element.addEventListener("pointercancel", handlePointerUp);
169+
155170
const ripple = document.createElement("span");
156171
ripple.classList.add("ripple");
157172

@@ -176,7 +191,6 @@ function applyRippleEffect() {
176191
// Adaptive color
177192
const computedStyle = window.getComputedStyle(element);
178193
const bgColor = computedStyle.backgroundColor || "rgba(0, 0, 0, 0)";
179-
const textColor = computedStyle.color;
180194
const isDarkColor = (color) => {
181195
const rgb = color.match(/\d+/g);
182196
if (!rgb) return false;
@@ -185,19 +199,8 @@ function applyRippleEffect() {
185199
};
186200
ripple.style.backgroundColor = isDarkColor(bgColor) ? "rgba(255, 255, 255, 0.2)" : "";
187201

188-
// Append ripple and handle cleanup
202+
// Append ripple
189203
element.appendChild(ripple);
190-
const handlePointerUp = () => {
191-
ripple.classList.add("end");
192-
setTimeout(() => {
193-
ripple.classList.remove("end");
194-
ripple.remove();
195-
}, duration * 1000);
196-
element.removeEventListener("pointerup", handlePointerUp);
197-
element.removeEventListener("pointercancel", handlePointerUp);
198-
};
199-
element.addEventListener("pointerup", handlePointerUp);
200-
element.addEventListener("pointercancel", handlePointerUp);
201204
});
202205
element.dataset.rippleListener = "true";
203206
}
@@ -213,27 +216,6 @@ async function checkMMRL() {
213216
} catch (error) {
214217
console.log("Error setting status bars theme:", error)
215218
}
216-
217-
// Request API permission, supported version: 33045+
218-
try {
219-
$playintegrityfix.requestAdvancedKernelSUAPI();
220-
} catch (error) {
221-
console.log("Error requesting API:", error);
222-
}
223-
try {
224-
await execCommand("whoami");
225-
} catch (error) {
226-
appendToOutput("");
227-
appendToOutput("[!] Please allow permission in MMRL settings");
228-
appendToOutput("[-] Settings");
229-
appendToOutput("[-] Security");
230-
appendToOutput("[-] Allow JavaScript API");
231-
appendToOutput("[-] Play Integrity Fix");
232-
appendToOutput("[-] Enable Allow Advanced KernelSU API");
233-
appendToOutput("");
234-
}
235-
} else {
236-
console.log("Not running in MMRL environment.");
237219
}
238220
}
239221

‎module/webroot/styles.css‎

Lines changed: 70 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,61 @@
1-
@font-face {
2-
font-family: 'Mono';
3-
src: url('assets/RobotoMono-Regular.ttf') format('truetype');
4-
font-weight: normal;
5-
font-style: normal;
1+
@import url('https://mui.kernelsu.org/mmrl/insets.css');
2+
@import url('https://mui.kernelsu.org/mmrl/colors.css');
3+
4+
:root {
5+
/* window inset */
6+
--top-inset: var(--window-inset-top, 0px);
7+
--bottom-inset: var(--window-inset-bottom, 0px);
8+
9+
/* Background colors */
10+
--bg-primary: var(--background, #EDEDED);
11+
--bg-secondary: var(--tonalSurface, #fff);
12+
--bg-input: var(--surfaceBright, #F5F5F5);
13+
14+
/* Text colors */
15+
--text-constant: var(--onSurface, #000);
16+
--text-primary: var(--onSurface, #000);
17+
--text-muted: #757575;
18+
19+
/* Border colors */
20+
--border-color: var(--outlineVariant, #ccc);
21+
22+
/* Button colors */
23+
--btn-primary: var(--primary, #007bff);
24+
--btn-primary-text: var(--onPrimary, #fff);
25+
}
26+
27+
@media (prefers-color-scheme: dark) {
28+
:root {
29+
/* Background colors */
30+
--bg-primary: var(--background, #151515);
31+
--bg-secondary: var(--tonalSurface, #292929);
32+
--bg-input: var(--surfaceBright, #1b1b1b);
33+
34+
/* Text colors */
35+
--text-constant: var(--onSurface, #eee);;
36+
--text-primary: var(--onSurface, #eee);
37+
--text-muted: #C2C2C2;
38+
39+
/* Border colors */
40+
--border-color: var(--outlineVariant, #636363);
41+
}
642
}
743

844
body {
9-
background-color: #F5F5F5;
10-
padding-top: var(--window-inset-top);
11-
padding-bottom: var(--window-inset-bottom);
45+
color: var(--text-primary);
46+
background-color: var(--bg-primary);
47+
padding-top: var(--top-inset);
48+
padding-bottom: var(--bottom-inset);
49+
margin: 0;
1250
}
1351

1452
.content {
15-
padding-bottom: 10px;
53+
padding-bottom: 30px;
1654
display: flex;
1755
flex-direction: column;
1856
align-items: center;
19-
height: 90vh;
20-
gap: 15px;
57+
height: calc(100vh - var(--top-inset) - var(--bottom-inset));
58+
box-sizing: border-box;
2159
}
2260

2361
.header {
@@ -28,22 +66,23 @@ body {
2866
width: calc(85vw + 30px);
2967
max-width: 800px;
3068
flex-shrink: 0;
31-
background-color: #fff;
69+
background-color: var(--bg-secondary);
3270
border: none;
3371
border-radius: 15px;
3472
box-sizing: border-box;
35-
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
73+
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
3674
overflow: hidden;
3775
}
3876

3977
.toggle-list {
4078
display: flex;
4179
align-items: center;
42-
background-color: #fff;
43-
padding: 10px 20px;
80+
background-color: var(--bg-secondary);
81+
min-height: 25px;
82+
padding: 8px 20px;
4483
white-space: nowrap;
4584
text-align: left;
46-
border-bottom: 1px solid #ccc;
85+
border-bottom: 1px solid var(--border-color);;
4786
position: relative;
4887
overflow: hidden;
4988
}
@@ -81,7 +120,7 @@ body {
81120
left: 0;
82121
right: 0;
83122
bottom: 0;
84-
background-color: #ccc;
123+
background-color: var(--border-color);
85124
-webkit-transition: .4s;
86125
transition: .4s;
87126
}
@@ -93,19 +132,20 @@ body {
93132
width: 19px;
94133
left: 3px;
95134
bottom: 3px;
96-
background-color: white;
135+
background-color: var(--text-muted);
97136
transition: .4s;
98137
}
99138

100139
input:checked+.slider {
101-
background-color: #007bff;
140+
background-color: var(--btn-primary);
102141
}
103142

104143
input:focus+.slider {
105-
box-shadow: 0 0 1px #007bff;
144+
box-shadow: 0 0 1px var(--btn-primary);
106145
}
107146

108147
input:checked+.slider:before {
148+
background-color: var(--btn-primary-text);
109149
transform: translateX(15px);
110150
}
111151

@@ -121,10 +161,11 @@ input:checked+.slider:before {
121161
width: calc(85vw + 30px);
122162
max-width: 800px;
123163
flex-grow: 1;
124-
background-color: #fff;
164+
background-color: var(--bg-input);
125165
box-sizing: border-box;
126166
border-radius: 15px;
127-
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
167+
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
168+
margin-top: 15px;
128169
overflow: hidden;
129170
}
130171

@@ -133,27 +174,27 @@ input:checked+.slider:before {
133174
padding: 5px 15px;
134175
font-size: 14px;
135176
justify-content: space-between;
136-
background-color: #E0E0E0;
137-
color: #333;
177+
background-color: var(--bg-secondary);
178+
color: var(--text-muted);
138179
user-select: none;
139180
}
140181

141182
.clear-terminal {
142183
display: flex;
143184
align-items: center;
144-
}
145185

146-
.clear-terminal svg {
147-
fill: #333;
186+
svg {
187+
fill: var(--text-muted);;
188+
}
148189
}
149190

150191
.output-terminal-content {
151-
font-family: 'Mono';
192+
font-family: monospace;
152193
font-size: 14px;
153194
padding: 10px;
154195
width: calc(100% - 20px);
155196
height: calc(100% - 50px);
156-
overflow-y: scroll;
197+
overflow-y: auto;
157198
}
158199

159200
.output-content {
@@ -188,37 +229,4 @@ input:checked+.slider:before {
188229
to {
189230
transform: scale(3);
190231
}
191-
}
192-
193-
@media (prefers-color-scheme: dark) {
194-
body {
195-
background-color: #121212;
196-
color: #fff;
197-
}
198-
199-
.toggle-list,
200-
.button-box,
201-
.output-terminal-header {
202-
background-color: #343434;
203-
}
204-
205-
.output-terminal-header {
206-
color: #ccc;
207-
}
208-
209-
.clear-terminal svg {
210-
fill: #ccc;
211-
}
212-
213-
.output-terminal {
214-
background-color: #232323;
215-
}
216-
217-
.toggle-list {
218-
border-bottom: 1px solid #6E6E6E;
219-
}
220-
221-
.slider {
222-
background-color: #6E6E6E;
223-
}
224232
}

0 commit comments

Comments
 (0)