Skip to content

Commit 983b30a

Browse files
TheWildJamesTheWildJames
committed
Enhance website with technical information from Android Kernel Tutorials
1 parent 85202b6 commit 983b30a

2 files changed

Lines changed: 308 additions & 5 deletions

File tree

‎index.html‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -147,11 +147,13 @@ <h2 class="section-title">Available Kernels</h2>
147147
<i class="fas fa-android"></i>
148148
</div>
149149
<h3>GKI <span class="highlight">2.0</span> Kernel</h3>
150-
<p>Generic Kernel Image with enhanced performance and compatibility across multiple devices.</p>
150+
<p>Generic Kernel Image 2.0 - Google's standardized Linux kernel for Android 12+ devices with stable Kernel Module Interface, enabling independent updates and reducing device fragmentation.</p>
151151
<ul class="kernel-features">
152152
<li><i class="fas fa-check"></i> KernelSU Support</li>
153153
<li><i class="fas fa-check"></i> SUSFS Integration</li>
154-
<li><i class="fas fa-check"></i> Wide Device Support</li>
154+
<li><i class="fas fa-check"></i> Stable Kernel Module Interface</li>
155+
<li><i class="fas fa-check"></i> Hardware-agnostic Design</li>
156+
<li><i class="fas fa-check"></i> Independent Security Updates</li>
155157
</ul>
156158
<div class="repo-stats">
157159
<span class="stat"><i class="fas fa-star"></i> <span id="gki-stars">Loading...</span></span>
@@ -208,11 +210,29 @@ <h3>Sultan Kernel</h3>
208210
</a>
209211
</div>
210212
</div>
213+
214+
<div class="kernel-info-note">
215+
<div class="info-icon">
216+
<i class="fas fa-info-circle"></i>
217+
</div>
218+
<div class="info-content">
219+
<h4>Important Technical Information</h4>
220+
<div class="info-grid">
221+
<div class="info-item">
222+
<strong>Kernel vs Android Version:</strong> Your kernel version (e.g., 5.10.101-android12) may differ from your Android system version (e.g., Android 13). The kernel version typically corresponds to the Android version that shipped with your device.
223+
</div>
224+
<div class="info-item">
225+
<strong>GKI Evolution:</strong> GKI 2.0 (Android 12+) enforces a stable Kernel Module Interface, separating hardware-specific code into loadable modules, unlike Pre-GKI custom kernels that caused fragmentation.
226+
</div>
227+
<div class="info-item">
228+
<strong>LTS Support:</strong> All our kernels are based on Long-Term Support (LTS) kernel versions, ensuring stability and extended security updates for your device.
229+
</div>
230+
</div>
231+
</div>
232+
</div>
211233
</div>
212234
</section>
213235

214-
215-
216236
<!-- Features Section -->
217237
<section id="features" class="features">
218238
<div class="container">
@@ -247,7 +267,7 @@ <h3><a href="https://github.com/KernelSU-Next/KernelSU-Next" target="_blank" rel
247267
<i class="fas fa-user-astronaut"></i>
248268
</div>
249269
<h3><a href="https://gitlab.com/simonpunk/susfs4ksu" target="_blank" rel="noopener noreferrer">SUSFS Support</a></h3>
250-
<p>Advanced hiding capabilities with SUSFS integration for enhanced privacy and security.</p>
270+
<p>Sophisticated Userspace Spoofing File System - Advanced root hiding and detection bypass capabilities with seamless KernelSU integration for maximum stealth and security.</p>
251271
</div>
252272

253273
<div class="feature-item">

‎style.css‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -750,6 +750,59 @@ body {
750750
font-weight: var(--font-weight-semibold);
751751
transition: all 0.3s ease;
752752
display: inline-flex;
753+
}
754+
755+
.kernel-info-note {
756+
margin-top: 60px;
757+
background: var(--tertiary-dark);
758+
border-radius: 15px;
759+
padding: 30px;
760+
border: 1px solid var(--border-dark);
761+
box-shadow: var(--shadow-light);
762+
}
763+
764+
.kernel-info-note .info-icon {
765+
display: inline-block;
766+
margin-bottom: 15px;
767+
}
768+
769+
.kernel-info-note .info-icon i {
770+
font-size: 1.5rem;
771+
color: var(--accent-blue);
772+
}
773+
774+
.kernel-info-note h4 {
775+
color: var(--text-primary);
776+
font-size: 1.25rem;
777+
font-weight: var(--font-weight-semibold);
778+
margin-bottom: 20px;
779+
}
780+
781+
.info-grid {
782+
display: grid;
783+
grid-template-columns: 1fr;
784+
gap: 20px;
785+
}
786+
787+
.info-item {
788+
padding: 15px;
789+
background: var(--secondary-dark);
790+
border-radius: 10px;
791+
border: 1px solid var(--border-dark);
792+
color: var(--text-secondary);
793+
line-height: 1.6;
794+
}
795+
796+
.info-item strong {
797+
color: var(--accent-blue);
798+
font-weight: var(--font-weight-semibold);
799+
}
800+
801+
@media (min-width: 768px) {
802+
.info-grid {
803+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
804+
}
805+
}
753806
align-items: center;
754807
gap: 8px;
755808
}
@@ -884,6 +937,236 @@ body {
884937
}
885938
}
886939

940+
/* Tutorials Section */
941+
.tutorials {
942+
padding: 100px 0;
943+
background: var(--primary-dark);
944+
}
945+
946+
.tutorials-grid {
947+
display: grid;
948+
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
949+
gap: 30px;
950+
margin-top: 60px;
951+
}
952+
953+
.tutorial-card {
954+
background: var(--secondary-dark);
955+
border-radius: 20px;
956+
padding: 40px 30px;
957+
text-align: left;
958+
box-shadow: var(--shadow-medium);
959+
transition: all 0.3s ease;
960+
position: relative;
961+
border: 1px solid var(--border-dark);
962+
}
963+
964+
.tutorial-card:hover {
965+
transform: translateY(-10px);
966+
box-shadow: var(--shadow-heavy), var(--glow-accent);
967+
border-color: var(--accent-blue);
968+
}
969+
970+
.tutorial-card.featured {
971+
border: 2px solid var(--accent-blue);
972+
box-shadow: var(--glow-accent);
973+
}
974+
975+
.tutorial-card.featured:hover {
976+
transform: translateY(-10px);
977+
box-shadow: var(--shadow-heavy), var(--glow-accent);
978+
}
979+
980+
.tutorial-icon {
981+
width: 70px;
982+
height: 70px;
983+
background: var(--surface-gradient);
984+
border-radius: 50%;
985+
display: flex;
986+
align-items: center;
987+
justify-content: center;
988+
margin-bottom: 25px;
989+
box-shadow: var(--glow-accent);
990+
border: 1px solid var(--border-dark);
991+
}
992+
993+
.tutorial-icon i {
994+
font-size: 2rem;
995+
color: var(--accent-blue);
996+
}
997+
998+
.tutorial-card h3 {
999+
font-size: 1.4rem;
1000+
font-weight: var(--font-weight-semibold);
1001+
color: var(--text-primary);
1002+
margin-bottom: 15px;
1003+
}
1004+
1005+
.tutorial-card p {
1006+
color: var(--text-secondary);
1007+
line-height: 1.6;
1008+
margin-bottom: 20px;
1009+
}
1010+
1011+
.tutorial-features {
1012+
display: flex;
1013+
flex-wrap: wrap;
1014+
gap: 10px;
1015+
margin-bottom: 25px;
1016+
}
1017+
1018+
.tutorial-tag {
1019+
background: var(--tertiary-dark);
1020+
color: var(--text-secondary);
1021+
padding: 6px 12px;
1022+
border-radius: 15px;
1023+
font-size: 0.8rem;
1024+
font-weight: var(--font-weight-medium);
1025+
border: 1px solid var(--border-dark);
1026+
display: flex;
1027+
align-items: center;
1028+
gap: 5px;
1029+
}
1030+
1031+
.tutorial-tag i {
1032+
color: var(--accent-blue);
1033+
font-size: 0.7rem;
1034+
}
1035+
1036+
.tutorial-topics {
1037+
margin-bottom: 25px;
1038+
}
1039+
1040+
.tutorial-topics h4 {
1041+
color: var(--text-primary);
1042+
font-size: 1rem;
1043+
font-weight: var(--font-weight-semibold);
1044+
margin-bottom: 15px;
1045+
}
1046+
1047+
.tutorial-topics ul {
1048+
list-style: none;
1049+
}
1050+
1051+
.tutorial-topics li {
1052+
display: flex;
1053+
align-items: center;
1054+
gap: 10px;
1055+
padding: 6px 0;
1056+
color: var(--text-secondary);
1057+
font-size: 0.9rem;
1058+
}
1059+
1060+
.tutorial-topics i {
1061+
color: var(--accent-blue);
1062+
font-size: 0.8rem;
1063+
}
1064+
1065+
.kernel-evolution {
1066+
margin-top: 20px;
1067+
}
1068+
1069+
.evolution-item {
1070+
background: var(--tertiary-dark);
1071+
padding: 15px;
1072+
border-radius: 10px;
1073+
margin-bottom: 10px;
1074+
border-left: 4px solid var(--accent-blue);
1075+
color: var(--text-secondary);
1076+
font-size: 0.9rem;
1077+
}
1078+
1079+
.evolution-item strong {
1080+
color: var(--text-primary);
1081+
}
1082+
1083+
.requirements-list {
1084+
margin-top: 20px;
1085+
}
1086+
1087+
.requirements-list h4 {
1088+
color: var(--text-primary);
1089+
font-size: 1rem;
1090+
font-weight: var(--font-weight-semibold);
1091+
margin-bottom: 15px;
1092+
}
1093+
1094+
.requirements-list ul {
1095+
list-style: none;
1096+
margin-bottom: 20px;
1097+
}
1098+
1099+
.requirements-list li {
1100+
display: flex;
1101+
align-items: center;
1102+
gap: 10px;
1103+
padding: 6px 0;
1104+
color: var(--text-secondary);
1105+
font-size: 0.9rem;
1106+
}
1107+
1108+
.requirements-list i {
1109+
color: var(--accent-blue);
1110+
font-size: 0.8rem;
1111+
}
1112+
1113+
.install-command {
1114+
background: var(--primary-dark);
1115+
padding: 15px;
1116+
border-radius: 8px;
1117+
border: 1px solid var(--border-dark);
1118+
overflow-x: auto;
1119+
}
1120+
1121+
.install-command code {
1122+
font-family: var(--font-mono);
1123+
color: var(--accent-blue);
1124+
font-size: 0.8rem;
1125+
line-height: 1.4;
1126+
white-space: pre-wrap;
1127+
word-break: break-all;
1128+
}
1129+
1130+
.tutorial-note {
1131+
background: var(--tertiary-dark);
1132+
border: 1px solid var(--accent-orange);
1133+
border-radius: 15px;
1134+
padding: 25px;
1135+
margin-top: 40px;
1136+
display: flex;
1137+
gap: 20px;
1138+
align-items: flex-start;
1139+
}
1140+
1141+
.note-icon {
1142+
width: 50px;
1143+
height: 50px;
1144+
background: rgba(255, 123, 114, 0.1);
1145+
border-radius: 50%;
1146+
display: flex;
1147+
align-items: center;
1148+
justify-content: center;
1149+
flex-shrink: 0;
1150+
}
1151+
1152+
.note-icon i {
1153+
color: var(--accent-orange);
1154+
font-size: 1.5rem;
1155+
}
1156+
1157+
.note-content h4 {
1158+
color: var(--text-primary);
1159+
font-size: 1.1rem;
1160+
font-weight: var(--font-weight-semibold);
1161+
margin-bottom: 10px;
1162+
}
1163+
1164+
.note-content p {
1165+
color: var(--text-secondary);
1166+
line-height: 1.6;
1167+
margin: 0;
1168+
}
1169+
8871170
/* Features Section */
8881171
.features {
8891172
padding: 100px 0;

0 commit comments

Comments
 (0)