From ec0f5852820c58ea4ae704139c055c5ae58d370e Mon Sep 17 00:00:00 2001
From: GattoDev <172432009+GattoDev-debug@users.noreply.github.com>
Date: Fri, 14 Aug 2026 20:21:43 -0400
Subject: [PATCH 1/3] webkitty except high quality
---
includes/assets/icons/webkitty.svg | 158 +++++++++++++++++++++++++++++
1 file changed, 158 insertions(+)
create mode 100644 includes/assets/icons/webkitty.svg
diff --git a/includes/assets/icons/webkitty.svg b/includes/assets/icons/webkitty.svg
new file mode 100644
index 0000000..aa4fa44
--- /dev/null
+++ b/includes/assets/icons/webkitty.svg
@@ -0,0 +1,158 @@
+
From f56364b4e3be1e576c177231eb285f0488cb884a Mon Sep 17 00:00:00 2001
From: GattoDev <172432009+GattoDev-debug@users.noreply.github.com>
Date: Fri, 14 Aug 2026 20:22:52 -0400
Subject: [PATCH 2/3] change readme to use SVG
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 718be81..131aa2f 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
# WebKitty
-
+
**WebKitty is a collection of WebKit-based exploit chains for the PS4 console.**
From b28138f04e6ab80849081ce319946a27dbe47d7e Mon Sep 17 00:00:00 2001
From: GattoDev
Date: Sat, 15 Aug 2026 17:04:17 -0400
Subject: [PATCH 3/3] add catppuccin theme and discord/twitter embed
---
includes/css/colors/catppuccin-frappe.css | 180 +++++++++++++++++
includes/css/colors/catppuccin-latte.css | 198 +++++++++++++++++++
includes/css/colors/catppuccin-macchiato.css | 180 +++++++++++++++++
includes/css/colors/catppuccin-mocha.css | 180 +++++++++++++++++
includes/css/layouts/index.css | 17 ++
index.html | 118 +++++++++--
6 files changed, 862 insertions(+), 11 deletions(-)
create mode 100644 includes/css/colors/catppuccin-frappe.css
create mode 100644 includes/css/colors/catppuccin-latte.css
create mode 100644 includes/css/colors/catppuccin-macchiato.css
create mode 100644 includes/css/colors/catppuccin-mocha.css
diff --git a/includes/css/colors/catppuccin-frappe.css b/includes/css/colors/catppuccin-frappe.css
new file mode 100644
index 0000000..70810bb
--- /dev/null
+++ b/includes/css/colors/catppuccin-frappe.css
@@ -0,0 +1,180 @@
+/* Catppuccin Frappé */
+
+#ps-logo {
+ fill: #8caaee !important;
+}
+
+#initial-screen.compact {
+ background-color: #292c3c !important;
+}
+
+.bg-gray-900 {
+ background-color: #303446;
+}
+
+.bg-gray-800 {
+ background-color: #292c3c;
+}
+
+.bg-gray-700 {
+ background-color: #414559;
+}
+
+.bg-gray-700\/60 {
+ background-color: rgba(65, 69, 89, 0.6);
+}
+
+.bg-black\/50 {
+ background-color: rgba(35, 38, 52, 0.5);
+}
+
+.bg-white\/5 {
+ background-color: rgba(198, 160, 246, 0.05);
+}
+
+.bg-white\/10 {
+ background-color: rgba(198, 160, 246, 0.1);
+}
+
+.bg-blue-600 {
+ background-color: #8caaee;
+}
+
+.hover\:bg-blue-700:hover {
+ background-color: #7b9cdb;
+}
+
+.text-blue-500 {
+ color: #8caaee;
+}
+
+.border-blue-500 {
+ border-color: #8caaee;
+}
+
+.focus-within\:border-blue-500:focus-within {
+ border-color: #8caaee;
+}
+
+.accent-blue-500 {
+ accent-color: #8caaee;
+}
+
+.focus\:ring-2:focus,
+.focus\:ring-blue-400:focus {
+ box-shadow: 0 0 0 2px #8caaee;
+}
+
+.text-white {
+ color: #c6d0f5;
+}
+
+.text-white\/70 {
+ color: rgba(198, 208, 245, 0.7);
+}
+
+.text-white\/80 {
+ color: rgba(198, 208, 245, 0.8);
+}
+
+.text-white\/90 {
+ color: rgba(198, 208, 245, 0.9);
+}
+
+.text-gray-600 {
+ color: #949cbb;
+}
+
+.hover\:text-white:hover {
+ color: #c6d0f5;
+}
+
+.border-gray-200 {
+ border-color: #626880;
+}
+
+.border-gray-700 {
+ border-color: #51576d;
+}
+
+.border-transparent {
+ border-color: transparent;
+}
+
+.hover\:bg-gray-700:hover {
+ background-color: #414559;
+}
+
+.hover\:bg-white\/10:hover {
+ background-color: rgba(198, 208, 245, 0.1);
+}
+
+.hover\:text-gray-600:hover {
+ color: #949cbb;
+}
+
+.hover\:border-gray-300:hover {
+ border-color: #626880;
+}
+
+input[type="radio"]:checked {
+ border: none;
+ background: #8caaee;
+}
+
+.fwSelected {
+ background-color: #8caaee;
+ color: #303446;
+}
+
+::-webkit-scrollbar-track {
+ background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #8caaee;
+ border-radius: 10px;
+}
+
+.category-tools {
+ background-color: rgba(166, 209, 137, 0.2);
+ color: #a6d189;
+ border: none !important;
+}
+
+.category-advanced {
+ background-color: rgba(231, 130, 132, 0.2);
+ color: #e78284;
+}
+
+.category-linux {
+ background-color: rgba(202, 158, 230, 0.2);
+ color: #ca9ee6;
+}
+
+.tabs ul {
+ border-color: #51576d;
+}
+
+.tabs button {
+ font-family: sans-serif;
+ border-color: transparent;
+ color: rgba(198, 208, 245, 0.8);
+}
+
+.tabs button[aria-selected="true"] {
+ border-color: #8caaee;
+ color: #8caaee;
+ border-bottom: 1px solid #8caaee;
+}
+
+.tabs button:not([aria-selected="true"]):hover {
+ color: #949cbb;
+ border-color: #626880;
+}
+
+.catppuccin-frappe {
+ color: #c6d0f5;
+ background: #292c3c;
+ border: 1px solid #51576d;
+}
\ No newline at end of file
diff --git a/includes/css/colors/catppuccin-latte.css b/includes/css/colors/catppuccin-latte.css
new file mode 100644
index 0000000..e723b31
--- /dev/null
+++ b/includes/css/colors/catppuccin-latte.css
@@ -0,0 +1,198 @@
+/* Catppuccin Latte
+ * Official palette:
+ * https://catppuccin.com/palette/
+ */
+
+#ps-logo {
+ fill: #1e66f5 !important;
+}
+
+#initial-screen.compact {
+ background-color: #e6e9ef !important;
+}
+
+/* Base */
+.bg-gray-900 {
+ background-color: #eff1f5;
+}
+
+.bg-gray-800 {
+ background-color: #e6e9ef;
+}
+
+.bg-gray-700 {
+ background-color: #ccd0da;
+}
+
+.bg-gray-700\/60 {
+ background-color: rgba(204, 208, 218, 0.6);
+}
+
+.bg-black\/50 {
+ background-color: rgba(76, 79, 105, 0.5);
+}
+
+.bg-white\/5 {
+ background-color: rgba(76, 79, 105, 0.05);
+}
+
+.bg-white\/10 {
+ background-color: rgba(76, 79, 105, 0.1);
+}
+
+/* Blue / primary */
+.bg-blue-600 {
+ background-color: #1e66f5;
+}
+
+.hover\:bg-blue-700:hover {
+ background-color: #1a5bd7;
+}
+
+.text-blue-500 {
+ color: #1e66f5;
+}
+
+.border-blue-500 {
+ border-color: #1e66f5;
+}
+
+.focus-within\:border-blue-500:focus-within {
+ border-color: #1e66f5;
+}
+
+.accent-blue-500 {
+ accent-color: #1e66f5;
+}
+
+.focus\:ring-2:focus,
+.focus\:ring-blue-400:focus {
+ box-shadow: 0 0 0 2px #7287fd;
+}
+
+/* Text */
+.text-white {
+ color: #4c4f69;
+}
+
+.text-white\/70 {
+ color: rgba(76, 79, 105, 0.7);
+}
+
+.text-white\/80 {
+ color: rgba(76, 79, 105, 0.8);
+}
+
+.text-white\/90 {
+ color: rgba(76, 79, 105, 0.9);
+}
+
+.text-gray-600 {
+ color: #6c6f85;
+}
+
+.hover\:text-white:hover {
+ color: #4c4f69;
+}
+
+/* Borders */
+.border-gray-200 {
+ border-color: #ccd0da;
+}
+
+.border-gray-700 {
+ border-color: #bcc0cc;
+}
+
+.border-blue-500 {
+ border-color: #1e66f5;
+}
+
+.border-transparent {
+ border-color: transparent;
+}
+
+/* Hover */
+.hover\:bg-gray-700:hover {
+ background-color: #ccd0da;
+}
+
+.hover\:bg-white\/10:hover {
+ background-color: rgba(76, 79, 105, 0.1);
+}
+
+.hover\:text-gray-600:hover {
+ color: #6c6f85;
+}
+
+.hover\:border-gray-300:hover {
+ border-color: #bcc0cc;
+}
+
+/* Radio */
+input[type="radio"]:checked {
+ border: none;
+ background: #1e66f5;
+}
+
+/* Firmware */
+.fwSelected {
+ background-color: #1e66f5;
+ color: #eff1f5;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar-track {
+ background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #1e66f5;
+ border-radius: 10px;
+}
+
+/* Payload categories */
+.category-tools {
+ background-color: rgba(64, 160, 43, 0.2);
+ color: #40a02b;
+ border: none !important;
+}
+
+.category-advanced {
+ background-color: rgba(210, 15, 57, 0.2);
+ color: #d20f39;
+}
+
+.category-linux {
+ background-color: rgba(136, 57, 239, 0.2);
+ color: #8839ef;
+}
+
+/* Tabs */
+.tabs ul {
+ border-color: #bcc0cc;
+}
+
+.tabs button {
+ font-family: sans-serif;
+ border-color: transparent;
+ color: rgba(76, 79, 105, 0.8);
+}
+
+.tabs button[aria-selected="true"] {
+ border-color: #1e66f5;
+ color: #1e66f5;
+ border-bottom: 1px solid #1e66f5;
+}
+
+.tabs button:not([aria-selected="true"]):hover {
+ color: #6c6f85;
+ border-color: #bcc0cc;
+}
+
+/* Color selector */
+.catppuccin-latte {
+ color: #4c4f69;
+ background: #e6e9ef;
+ border: 1px solid #ccd0da;
+}
\ No newline at end of file
diff --git a/includes/css/colors/catppuccin-macchiato.css b/includes/css/colors/catppuccin-macchiato.css
new file mode 100644
index 0000000..0a7b7f8
--- /dev/null
+++ b/includes/css/colors/catppuccin-macchiato.css
@@ -0,0 +1,180 @@
+/* Catppuccin Macchiato */
+
+#ps-logo {
+ fill: #8aadf4 !important;
+}
+
+#initial-screen.compact {
+ background-color: #1e2030 !important;
+}
+
+.bg-gray-900 {
+ background-color: #24273a;
+}
+
+.bg-gray-800 {
+ background-color: #1e2030;
+}
+
+.bg-gray-700 {
+ background-color: #363a4f;
+}
+
+.bg-gray-700\/60 {
+ background-color: rgba(54, 58, 79, 0.6);
+}
+
+.bg-black\/50 {
+ background-color: rgba(24, 25, 38, 0.5);
+}
+
+.bg-white\/5 {
+ background-color: rgba(198, 160, 246, 0.05);
+}
+
+.bg-white\/10 {
+ background-color: rgba(198, 160, 246, 0.1);
+}
+
+.bg-blue-600 {
+ background-color: #8aadf4;
+}
+
+.hover\:bg-blue-700:hover {
+ background-color: #7b9bdd;
+}
+
+.text-blue-500 {
+ color: #8aadf4;
+}
+
+.border-blue-500 {
+ border-color: #8aadf4;
+}
+
+.focus-within\:border-blue-500:focus-within {
+ border-color: #8aadf4;
+}
+
+.accent-blue-500 {
+ accent-color: #8aadf4;
+}
+
+.focus\:ring-2:focus,
+.focus\:ring-blue-400:focus {
+ box-shadow: 0 0 0 2px #8aadf4;
+}
+
+.text-white {
+ color: #cad3f5;
+}
+
+.text-white\/70 {
+ color: rgba(202, 211, 245, 0.7);
+}
+
+.text-white\/80 {
+ color: rgba(202, 211, 245, 0.8);
+}
+
+.text-white\/90 {
+ color: rgba(202, 211, 245, 0.9);
+}
+
+.text-gray-600 {
+ color: #939ab7;
+}
+
+.hover\:text-white:hover {
+ color: #cad3f5;
+}
+
+.border-gray-200 {
+ border-color: #5b6078;
+}
+
+.border-gray-700 {
+ border-color: #494d64;
+}
+
+.border-transparent {
+ border-color: transparent;
+}
+
+.hover\:bg-gray-700:hover {
+ background-color: #363a4f;
+}
+
+.hover\:bg-white\/10:hover {
+ background-color: rgba(202, 211, 245, 0.1);
+}
+
+.hover\:text-gray-600:hover {
+ color: #939ab7;
+}
+
+.hover\:border-gray-300:hover {
+ border-color: #5b6078;
+}
+
+input[type="radio"]:checked {
+ border: none;
+ background: #8aadf4;
+}
+
+.fwSelected {
+ background-color: #8aadf4;
+ color: #24273a;
+}
+
+::-webkit-scrollbar-track {
+ background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #8aadf4;
+ border-radius: 10px;
+}
+
+.category-tools {
+ background-color: rgba(166, 218, 149, 0.2);
+ color: #a6da95;
+ border: none !important;
+}
+
+.category-advanced {
+ background-color: rgba(237, 135, 150, 0.2);
+ color: #ed8796;
+}
+
+.category-linux {
+ background-color: rgba(198, 160, 246, 0.2);
+ color: #c6a0f6;
+}
+
+.tabs ul {
+ border-color: #494d64;
+}
+
+.tabs button {
+ font-family: sans-serif;
+ border-color: transparent;
+ color: rgba(202, 211, 245, 0.8);
+}
+
+.tabs button[aria-selected="true"] {
+ border-color: #8aadf4;
+ color: #8aadf4;
+ border-bottom: 1px solid #8aadf4;
+}
+
+.tabs button:not([aria-selected="true"]):hover {
+ color: #939ab7;
+ border-color: #5b6078;
+}
+
+.catppuccin-macchiato {
+ color: #cad3f5;
+ background: #1e2030;
+ border: 1px solid #494d64;
+}
\ No newline at end of file
diff --git a/includes/css/colors/catppuccin-mocha.css b/includes/css/colors/catppuccin-mocha.css
new file mode 100644
index 0000000..96ef96d
--- /dev/null
+++ b/includes/css/colors/catppuccin-mocha.css
@@ -0,0 +1,180 @@
+/* Catppuccin Mocha */
+
+#ps-logo {
+ fill: #89b4fa !important;
+}
+
+#initial-screen.compact {
+ background-color: #181825 !important;
+}
+
+.bg-gray-900 {
+ background-color: #1e1e2e;
+}
+
+.bg-gray-800 {
+ background-color: #181825;
+}
+
+.bg-gray-700 {
+ background-color: #313244;
+}
+
+.bg-gray-700\/60 {
+ background-color: rgba(49, 50, 68, 0.6);
+}
+
+.bg-black\/50 {
+ background-color: rgba(17, 17, 27, 0.5);
+}
+
+.bg-white\/5 {
+ background-color: rgba(203, 166, 247, 0.05);
+}
+
+.bg-white\/10 {
+ background-color: rgba(203, 166, 247, 0.1);
+}
+
+.bg-blue-600 {
+ background-color: #89b4fa;
+}
+
+.hover\:bg-blue-700:hover {
+ background-color: #74a8f8;
+}
+
+.text-blue-500 {
+ color: #89b4fa;
+}
+
+.border-blue-500 {
+ border-color: #89b4fa;
+}
+
+.focus-within\:border-blue-500:focus-within {
+ border-color: #89b4fa;
+}
+
+.accent-blue-500 {
+ accent-color: #89b4fa;
+}
+
+.focus\:ring-2:focus,
+.focus\:ring-blue-400:focus {
+ box-shadow: 0 0 0 2px #89b4fa;
+}
+
+.text-white {
+ color: #cdd6f4;
+}
+
+.text-white\/70 {
+ color: rgba(205, 214, 244, 0.7);
+}
+
+.text-white\/80 {
+ color: rgba(205, 214, 244, 0.8);
+}
+
+.text-white\/90 {
+ color: rgba(205, 214, 244, 0.9);
+}
+
+.text-gray-600 {
+ color: #9399b2;
+}
+
+.hover\:text-white:hover {
+ color: #cdd6f4;
+}
+
+.border-gray-200 {
+ border-color: #585b70;
+}
+
+.border-gray-700 {
+ border-color: #45475a;
+}
+
+.border-transparent {
+ border-color: transparent;
+}
+
+.hover\:bg-gray-700:hover {
+ background-color: #313244;
+}
+
+.hover\:bg-white\/10:hover {
+ background-color: rgba(205, 214, 244, 0.1);
+}
+
+.hover\:text-gray-600:hover {
+ color: #9399b2;
+}
+
+.hover\:border-gray-300:hover {
+ border-color: #585b70;
+}
+
+input[type="radio"]:checked {
+ border: none;
+ background: #89b4fa;
+}
+
+.fwSelected {
+ background-color: #89b4fa;
+ color: #1e1e2e;
+}
+
+::-webkit-scrollbar-track {
+ background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #89b4fa;
+ border-radius: 10px;
+}
+
+.category-tools {
+ background-color: rgba(166, 227, 161, 0.2);
+ color: #a6e3a1;
+ border: none !important;
+}
+
+.category-advanced {
+ background-color: rgba(243, 139, 168, 0.2);
+ color: #f38ba8;
+}
+
+.category-linux {
+ background-color: rgba(203, 166, 247, 0.2);
+ color: #cba6f7;
+}
+
+.tabs ul {
+ border-color: #45475a;
+}
+
+.tabs button {
+ font-family: sans-serif;
+ border-color: transparent;
+ color: rgba(205, 214, 244, 0.8);
+}
+
+.tabs button[aria-selected="true"] {
+ border-color: #89b4fa;
+ color: #89b4fa;
+ border-bottom: 1px solid #89b4fa;
+}
+
+.tabs button:not([aria-selected="true"]):hover {
+ color: #9399b2;
+ border-color: #585b70;
+}
+
+.catppuccin-mocha {
+ color: #cdd6f4;
+ background: #181825;
+ border: 1px solid #45475a;
+}
\ No newline at end of file
diff --git a/includes/css/layouts/index.css b/includes/css/layouts/index.css
index de441e1..672bfb6 100644
--- a/includes/css/layouts/index.css
+++ b/includes/css/layouts/index.css
@@ -5,7 +5,24 @@ body {
-webkit-font-smoothing: antialiased;
}
+.webkitty-logo-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.webkitty-logo {
+ width: 180px;
+ max-width: 60vw;
+ height: auto;
+ display: block;
+ transition: transform 0.3s ease, filter 0.3s ease;
+}
+.webkitty-logo:hover {
+ transform: scale(1.03);
+}
.mainContainer {
height: 100vh;
/* Ensure main container takes full viewport height */
diff --git a/index.html b/index.html
index 6b43432..4384d51 100644
--- a/index.html
+++ b/index.html
@@ -3,12 +3,51 @@
-
+
+
+
WebKitty
-
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+