docs: overhauled KernelSU Next webpage

This commit is contained in:
Rifat Azad
2025-01-07 07:42:17 +06:00
parent 72739facc8
commit 552c3e11b2
5 changed files with 503 additions and 90 deletions

View File

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -5,124 +5,222 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home | KernelSU Next</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<link rel="icon" href="assets/icons/ksu-next-tab.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
html, body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
body {
font-family: 'Inter', sans-serif;
background-color: #ffffff;
color: #000000;
}
.navbar {
background-color: #000000;
}
.navbar-brand span {
font-weight: bold;
font-size: 1.5rem;
color: #ffffff;
}
header {
background-color: #000000;
color: #ffffff;
padding: 5rem 0;
}
header h1 {
font-size: 2.5rem;
}
header p {
font-size: 1.2rem;
}
.btn-copy {
background-color: #000000;
color: #ffffff;
border: none;
cursor: pointer;
}
.btn-copy:hover {
background-color: #333333;
}
.navbar-toggler {
background-color: #ffffff;
}
ol {
padding-left: 1.5rem;
}
footer {
background-color: #000000;
color: #ffffff;
padding: 1.5rem 0;
}
footer a {
color: #ffffff;
}
.highlight {
background: #f8f9fa;
border-left: 5px solid #000000;
padding: 1rem;
font-size: 0.95rem;
overflow-x: auto;
white-space: pre-wrap;
}
.highlight code {
color: #000000;
font-family: monospace;
}
.header-icon {
font-size: 4rem;
margin-bottom: 1rem;
}
.contact-icons {
font-size: 2rem;
display: flex;
justify-content: center;
gap: 20px;
}
.contact-icons a {
color: #000000;
text-decoration: none;
}
.contact-icons a:hover {
color: #333333;
}
.navbar-nav .nav-link {
color: #ffffff;
}
.navbar-nav .nav-link:hover {
color: #cccccc;
}
</style>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-md sticky-top py-3" id="mainNav">
<!-- Navbar -->
<nav class="navbar navbar-expand-md sticky-top py-3">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="/">
<span style="color: rgb(255,168,168);">KernelSU Next</span>
<span>KernelSU Next</span>
</a>
<button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1">
<span class="visually-hidden">Toggle navigation</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav mx-auto">
<li class="nav-item"></li>
<li class="nav-item"></li>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link text-light" href="#installation">Installation</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="pages/features.html">Features</a>
</li>
<li class="nav-item"></li>
<a class="nav-link text-light" href="pages/devices.html">Devices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/rifsxd/KernelSU-Next" target="_blank">
<i class="fab fa-github fa-lg"></i>
</a>
</li>
</ul>
<a class="navbar-brand d-flex align-items-center" href="https://github.com/rifsxd/KernelSU-Next" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-github" style="font-size: 24px;">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</a>
</div>
</div>
</nav>
<header class="bg-dark">
<div class="container pt-4 pt-xl-5">
<div class="row pt-5">
<div class="col-md-8 col-xl-6 text-center text-md-start mx-auto">
<div class="text-center">
<h1 class="fs-1 fw-bold text-start" style="color: rgb(255,192,192);">KernelSU Next</h1>
<h1 class="fw-bolder text-start" style="color: rgb(255,118,118);">A kernel-based root solution for Android</h1>
</div>
<p class="fs-5 fw-bold text-start" style="color: rgb(255,202,202);">Supports kernel 4.9 - 6.6 (Non-GKI &amp; GKI)</p>
</div>
<div class="col">
<div></div>
</div>
<div class="col">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-yin-yang" style="font-size: 170px;color: rgb(255,244,244);">
<path d="M9.167 4.5a1.167 1.167 0 1 1-2.334 0 1.167 1.167 0 0 1 2.334 0Z"></path>
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM1 8a7 7 0 0 1 7-7 3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 0 0 7 7 7 0 0 1-7-7Zm7 4.667a1.167 1.167 0 1 1 0-2.334 1.167 1.167 0 0 1 0 2.334Z"></path>
</svg>
</div>
<!-- Header -->
<header>
<div class="container text-center">
<div class="header-icon">
<img src="assets/icons/ksu-next.png" width="80" height="80">
</div>
<h1 class="fw-bold">KernelSU Next</h1>
<p class="lead">A kernel-based root solution for Android</p>
<p>Supports kernel 4.4 - 6.6 (Non-GKI &amp; GKI)</p>
</div>
</header>
<section class="py-5">
<!-- Installation Section -->
<section id="installation" class="py-5">
<div class="container">
<h2 class="fs-2 fw-bold text-start" style="color: rgb(255,192,192);">Installation</h2>
<p style="color: rgb(255,192,192);">Copy and paste the commands below to install KernelSU Next. Latest tag (stable)</p>
<div>
<pre><code style="color: rgb(255,118,118);">curl -LSs "https://raw.githubusercontent.com/rifsxd/KernelSU-Next/next/kernel/setup.sh" | bash -</code><button class="btn" style="color: rgb(255,192,192); padding: 5px 10px; font-size: 12px;" onclick="copyToClipboard(this)">Copy to clipboard!</button></pre>
<h2 class="text-center mb-4">Installation</h2>
<p class="text-center">Run the following commands below for different installation options, should be ran inside the root of your kernel directory.</p>
<div class="highlight mt-3">
<code>curl -LSs "https://raw.githubusercontent.com/rifsxd/KernelSU-Next/next/kernel/setup.sh" | bash -</code>
<button class="btn btn-copy mt-2" onclick="copyToClipboard(this)">Copy</button>
</div>
<p style="color: rgb(255,192,192);">Copy and paste the commands below to install KernelSU Next. Next branch (development bleeding edge)</p>
<div>
<pre><code style="color: rgb(255,118,118);">curl -LSs "https://raw.githubusercontent.com/rifsxd/KernelSU-Next/next/kernel/setup.sh" | bash -s next</code><button class="btn" style="color: rgb(255,192,192); padding: 5px 10px; font-size: 12px;" onclick="copyToClipboard(this)">Copy to clipboard!</button></pre>
<div class="highlight mt-3">
<code>curl -LSs "https://raw.githubusercontent.com/rifsxd/KernelSU-Next/next/kernel/setup.sh" | bash -s next</code>
<button class="btn btn-copy mt-2" onclick="copyToClipboard(this)">Copy</button>
</div>
<p style="color: rgb(255,192,192);">Copy and paste the commands below to install KernelSU Next. Select tag (such as v1.0.2-R14)</p>
<div>
<pre><code style="color: rgb(255,118,118);">curl -LSs "https://raw.githubusercontent.com/rifsxd/KernelSU-Next/next/kernel/setup.sh" | bash -s v1.0.2-R14</code><button class="btn" style="color: rgb(255,192,192); padding: 5px 10px; font-size: 12px;" onclick="copyToClipboard(this)">Copy to clipboard!</button></pre>
<div class="highlight mt-3">
<code>curl -LSs "https://raw.githubusercontent.com/rifsxd/KernelSU-Next/next/kernel/setup.sh" | bash -s v1.0.2-R14</code>
<button class="btn btn-copy mt-2" onclick="copyToClipboard(this)">Copy</button>
</div>
</div>
</section>
<script>
function copyToClipboard(button) {
// Find the <code> element
var code = button.previousElementSibling.innerText;
// Create a temporary textarea to copy the text
var textarea = document.createElement('textarea');
textarea.value = code;
document.body.appendChild(textarea);
// Select and copy the content
textarea.select();
document.execCommand('copy');
// Remove the temporary textarea
document.body.removeChild(textarea);
}
</script>
<section class="py-5">
<div class="container">
<h2 class="fs-2 fw-bold text-start" style="color: rgb(255,192,192);">Info</h2>
<p class="fs-4 fw-bold text-start" style="color: rgb(255,192,192);">KernelSU Next has many features and improvements!</p>
<p style="color: rgb(255,192,192);">Just mentioning a few features:</p>
<ol style="color: rgb(255,202,202);">
<li>Non-GKI kernel support from 4.x - 5.4 (LTS).</li>
<li>GKI kernels can use LKM/KMI methods for installation.</li>
<li>Dedicated pre-patched SuSFS branches to effectively hide root.</li>
<li>New manager features and UI overhaul.</li>
<li>Module installation confirmation window.</li>
<li>Restoration of module after uninstallation.</li>
<li>SuSFS-based features and info (SuSFS patched kernels only).</li>
<li>Magic Mount is used for module mounting, ensuring fast, light, and convenient operations.</li>
<li>Has its own SuSFS library for CLI commands.</li>
<li>Manager app can get auto-updates from new releases.</li>
<li>More frequent updates and upcoming features.</li>
</ol>
</div>
</section>
<footer class="py-3 bg-dark text-light">
<!-- Contact Information Section -->
<section id="contact" class="py-5">
<div class="container text-center">
<p style="color: rgb(255,202,202);" class="mb-0">&copy; 2025 KernelSU Next. All rights reserved.</p>
<h2 class="mb-4">Contact Us</h2>
<p>If you have any questions or need support, feel free to reach out:</p>
<div class="contact-icons">
<a href="https://github.com/rifsxd/KernelSU-Next/issues" target="_blank">
<i class="fab fa-github"></i>
</a>
<a href="https://t.me/ksunext_discussions" target="_blank">
<i class="fab fa-telegram-plane"></i>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center">
<div class="container">
<p>&copy; 2025 KernelSU Next. All rights reserved. <a href="https://github.com/rifsxd/KernelSU-Next" target="_blank">GitHub</a></p>
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bold-and-dark.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function copyToClipboard(button) {
var code = button.previousElementSibling.textContent;
navigator.clipboard.writeText(code).then(() => {
button.textContent = "Copied!";
setTimeout(() => button.textContent = "Copy", 2000);
});
}
</script>
</body>
</html>

163
docs/pages/devices.html Normal file
View File

@@ -0,0 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Devices | KernelSU Next</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<link rel="icon" href="../assets/icons/ksu-next-tab.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
html, body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
body {
font-family: 'Inter', sans-serif;
background-color: #ffffff;
color: #000000;
}
.navbar {
background-color: #000000;
}
.navbar-brand span {
font-weight: bold;
font-size: 1.5rem;
color: #ffffff;
}
.navbar-toggler {
background-color: #ffffff;
}
header {
background-color: #000000;
color: #ffffff;
padding: 5rem 0;
}
header h1 {
font-size: 2.5rem;
}
header p {
font-size: 1.2rem;
}
footer {
background-color: #000000;
color: #ffffff;
padding: 1.5rem 0;
}
footer a {
color: #ffffff;
}
.table th, .table td {
vertical-align: middle;
}
.navbar-nav .nav-link {
color: #ffffff;
}
.navbar-nav .nav-link:hover {
color: #cccccc;
}
#devices a {
color: #000000;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md sticky-top py-3">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="/">
<span>KernelSU Next</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link text-light" href="../index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/rifsxd/KernelSU-Next" target="_blank">
<i class="fab fa-github fa-lg"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header>
<div class="container text-center">
<h1 class="fw-bold">Supported Devices</h1>
<p class="lead">Here is the list of devices officially supported by KernelSU Next.</p>
</div>
</header>
<!-- Devices Table Section -->
<section id="devices" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Officially Supported Devices</h2>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">Maintainer</th>
<th scope="col">Repository</th>
<th scope="col">Supported Devices</th>
</tr>
</thead>
<tbody>
<tr></tr>
<td><a href="https://github.com/devnoname120" target="_blank">devnoname120</a></td>
<td><a href="https://github.com/devnoname120/Android-Kernel-Builder_mi-note-10-lite/releases" target="_blank">kernel_xiaomi_sm6150</a></td>
<td>Mi Note 10 Lite (toco)</td>
</tr>
<tr>
<td><a href="https://github.com/rifsxd" target="_blank">rifsxd</a></td>
<td><a href="https://github.com/rifsxd/nyx_android_kernel_realme_c35/releases" target="_blank">nyx_android_kernel_realme_c35</a></td>
<td>Realme C35 (RMX3511, RMX3513)</td>
</tr>
<!-- <tr>
<td>Example Maintainer</td>
<td><a href="https://github.com/example/example" target="_blank">example repo name</a></td>
<td>Example Devices</td>
</tr> -->
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
</section>
<!-- Footer -->
<footer class="text-center">
<div class="container">
<p>&copy; 2025 KernelSU Next. All rights reserved. <a href="https://github.com/rifsxd/KernelSU-Next" target="_blank">GitHub</a></p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

152
docs/pages/features.html Normal file
View File

@@ -0,0 +1,152 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Features | KernelSU Next</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<link rel="icon" href="../assets/icons/ksu-next-tab.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
html, body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
}
body {
font-family: 'Inter', sans-serif;
background-color: #ffffff;
color: #000000;
}
.navbar {
background-color: #000000;
}
.navbar-brand span {
font-weight: bold;
font-size: 1.5rem;
color: #ffffff;
}
.navbar-toggler {
background-color: #ffffff;
}
header {
background-color: #000000;
color: #ffffff;
padding: 5rem 0;
}
header h1 {
font-size: 2.5rem;
}
header p {
font-size: 1.2rem;
}
ol {
padding-left: 1.5rem;
}
footer {
background-color: #000000;
color: #ffffff;
padding: 1.5rem 0;
}
footer a {
color: #ffffff;
}
.highlight {
background: #f8f9fa;
border-left: 5px solid #000000;
padding: 1rem;
font-size: 0.95rem;
overflow-x: auto;
white-space: pre-wrap;
}
.highlight code {
color: #000000;
font-family: monospace;
}
.header-icon {
font-size: 4rem;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md sticky-top py-3">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="/">
<span>KernelSU Next</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link text-light" href="../index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/rifsxd/KernelSU-Next" target="_blank">
<i class="fab fa-github fa-lg"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header>
<div class="container text-center">
<h1 class="fw-bold">KernelSU Next Features</h1>
<p class="lead">Explore the amazing features of KernelSU Next!</p>
</div>
</header>
<!-- Features Section -->
<section class="py-5">
<div class="container">
<h2 class="text-center mb-4">Features</h2>
<ul class="list-unstyled text-center">
<li>✔️ Non-GKI kernel support from 4.x - 5.4 LTS (3.x is experimental).</li>
<li>✔️ GKI kernels support LKM/KMI methods for easy installation.</li>
<li>✔️ Magic Mount ensures fast, light, and convenient module mounting.</li>
<li>✔️ New manager features and UI overhaul.</li>
<li>✔️ Restoration of modules post-uninstallation.</li>
<li>✔️ Manager app auto-updates with new releases.</li>
<li>✔️ Frequent updates and upcoming features.</li>
</ul>
</div>
</section>
<!-- Footer -->
<footer class="text-center">
<div class="container">
<p>&copy; 2025 KernelSU Next. All rights reserved. <a href="https://github.com/rifsxd/KernelSU-Next" target="_blank">GitHub</a></p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>