Merge branch 'main' of https://github.com/builtbybel/Winpilot

README.md

@@ -1,24 +1,27 @@
-# Winpilot (former Bloatynosy) The manic cousin of Microsoft Copilot
+# Winpilot 
+### and the tragic hero Clippy, just out here trying to be helpful.
+![explorer_uR3GXgtB3H](https://github.com/builtbybel/Winpilot/assets/57478606/d5dd7bf7-60cf-4bca-93a3-f25b32f77a1b)
 
-![winpilot](https://github.com/builtbybel/Winpilot/assets/57478606/a864eac4-d372-40ed-922e-c5e788cf9fb9)
 
 ## About the app
-Winpilot will pick up where Bloatynosy left off. The plan was originally just to rename the AI version, but this time we'll do it right and completely turn our backs on Bloatynosy. I've been playing around with a few names over the past few weeks, which are now making their way into Winpilot as plugins, such as CoTweaker and ClippySupreme, which also doubles as the main assistant in the Winpilot app designed as a chatbot. I might also introduce some classic Bloatynosy functions natively as "plugins". 
+### Alright, first off, the app's called Winpilot, not Clippy. But Clippy's in the mix, we'll get into that later.
+Clippits, aka Clippy's legacy, now lives on in Winpilot. 
+It was inevitable, Microsoft betrayed Clippy, and now we're bringing him back. 
 
-![explorer_FYkwJJaf91](https://github.com/builtbybel/Winpilot/assets/57478606/22488a48-3dce-4860-b029-34381ed4e106)
+**But what exactly does the Winpilot app do, and why is Clippy on board?** It all started with the spin-off of the predecessor project Bloatynosy to BloatynosyAI. I know, the app names are quirky and fun (hence the name change to Winpilot), but with the latter app, I hopped on the AI train and wanted to create the first tool of its kind—besides Copilot (even though it can barely handle any meaningful Windows management functions)—which can intelligently assist us in Windows and even take over certain functions (The AI story got too bloated and convoluted, so I ditched it). For this, I needed a mascot, an assistant to interact with the user. Clippy seemed to be just the right fit for this, as he somehow annoyed most people back in his day, and nowadays, he isn't associated with much positivity. That's the whole point of the story—putting Clippy into a debloating/tweaking app, which is a bit of revenge against Microsoft and maybe now contributes some valuable additions to the W11 OS to somewhat restore its honor.
 
-The latest release of Winpilot introduces a significant milestone with its hybrid web app foundation. 
+The rights to Clippit still belong to Microsoft (copyright notice is set in the app), even though when we talk about Clippy here, specifically in Winpilot, we mean NeoClippy. 
-This update not only empowers users with the capability to remove AI features in Windows but also emphasizes the app's intelligent approach, driven by a novel hybrid and web-based core.
 
-Here are the individual plugins briefly explained:
+**So what can Winpilot (including NeoClippy) really do for you?** 
 
-- **CoTweaker**: It enhances Windows privacy settings and optimizes system and gaming configurations.
+**I'll be back! To remove annoying Windows 11 ads.**
-- **Decrapify**: It removes unwanted apps and also handles advanced debloating.
+![terminator_clippit](https://github.com/builtbybel/Winpilot/assets/57478606/3edabd92-0919-450b-8b24-48fd53389f8c)
-- **WingetUI**: It offers some essential base apps for download.
+
-- **Copilotless**: It searches for AI/Copilot features in Windows and allows you to remove them. Please follow the instructions provided.
+
-- **ClippySupreme**: This is the assistant you'll consistently see in the app, monitoring various areas of the system. It can also provide simple tips. Just keep clicking on the plugin to access them.
+Winpilot can spare you from advertising pop-ups in the W11 UI, optimize your privacy, system, and gaming settings, including those of your Legion GO or Rog Ally, and assist you in removing unnecessary apps.
+
+(Neo)Clippy in Winpilot can also be used to change various settings and access various pieces of system information. 
 
-Winpilot can also be used to change various settings and access various pieces of system information. 
 **Windows-specific features**
 - Ask to add a device
 - Ask to add Microsoft Account
@@ -54,16 +57,13 @@ Winpilot can also be used to change various settings and access various pieces o
 You can use these skills via a type prompt in Winpilot, such as "toggle dark theme" or "uninstall apps or bloatware"; Winpilots Assistant Clippy will take the appropriate action and confirm completion.
   
 ## Download
-**Recommended Winpilot Version:** [Latest release](https://github.com/builtbybel/Winpilot/releases)
+### Recommended Winpilot Version: [Latest release](https://github.com/builtbybel/Winpilot/releases)
 
 **Classic Bloatynosy version:** [Last classic Bloatynosy 1.5 release](https://github.com/builtbybel/Bloatynosy/releases/tag/1.5.0)
 
 ## How-to
 Simply execute Winpilot.exe. Feel free to delete the cache folder Winpilot.exe.WebView2 whenever necessary.
 
-With the chat box in front of you, input your search terms, inquiries, or keywords, and enjoy real-time results. For instance, if you need to 'install an app,' simply type 'install' or any related keyword, and you'll receive the same outcome. Additionally, using this search function, you can easily install popular apps using 'winget.' Remember other useful keywords such as 'bloat,' 'appx,' or 'uninstall' to effortlessly remove unwanted default apps in Windows 10/11. The possibilities are endless. Have fun experimenting with different queries! 
-
-
 ## Support statement
 WebView2 apps can run on the following versions of Windows:
 

extensions/UI.css

@@ -0,0 +1,675 @@
+/* Dark Mode for Winpilot by Belim */
+
+/* Main body */
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(to right, #1e1e1e, #2b2b2b); /* Modern dark gradient */
+    color: #ffffff; /* White text color */
+    padding: 40px;
+    text-align: left;
+    margin: 0;
+    zoom: 0.9; /* WebView2 zoom level */
+}
+
+/* Hide all containers except the left-container and system container by default */
+.workspace-content .glassy-box:not(#stepleftHeader):not(#stepHomeHeader) {
+   display: none;
+}
+
+
+.container {
+    display: flex;
+    flex-wrap: wrap; /* Wrap to next line */
+}
+
+.left-container {
+   flex: 2; /* Initial width */
+   display: flex;
+   flex-direction: column; 
+   align-items: stretch; 
+   margin-right: 20px;
+   margin-top: 20px; 
+}
+
+.workspace-container {
+    flex: 3; /* Initial width */
+    margin-left: 0px;
+}
+
+@media (max-width: 600px) { 
+    .container {
+        flex-direction: column; /* Change to a column layout on smaller screens */
+    }
+
+    .left-container {
+        order: 2; /* Move left container to bottom */
+        margin-top: 0; /* Remove top margin */
+        margin-bottom: 20px; /* Add bottom margin */
+    }
+
+    .workspace-container {
+        order: 1; /* Move workspace container to top */
+    }
+}
+
+/* Navigation menu container */
+.navigation-menu {
+    padding: 0;
+    margin-left: auto;
+    margin-bottom: 10px;
+}
+
+/* Menu item styles */
+.navigation-menu a {
+    margin-right: 10px;
+    text-decoration: none;
+    color: #999;
+    font-weight: bold;
+    font-size: 16px;
+    transition: color 0.3s ease, transform 0.3s ease;
+    position: relative;
+    margin-right: 20px;
+}
+
+/* Hover effect */
+.navigation-menu a:hover {
+    color: #ff00dd; /* Light magenta on hover */
+}
+
+/* Active/focus state */
+.navigation-menu a.active,
+.navigation-menu a:focus {
+    color: #ff00dd; /* Light magenta for active link */
+    outline: none;
+    transform: scale(1.1);
+}
+
+/* Indicator for active menu item */
+.navigation-menu a.active::before,
+.navigation-menu a:focus::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -15px;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 10px;
+    background: radial-gradient(circle, #aa00ff, #ff00dd); /* Light magenta to pink gradient */
+    border-radius: 50%;
+    animation: blink 1s infinite alternate;
+}
+
+/* Blinking animation */
+@keyframes blink {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+/* Workspace Header styling */
+#stepHomeHeader {
+    top: 30px;
+    background: linear-gradient(45deg, #1f1f1f 0%, #303030 50%, #1f1f1f 100%); /* Dark gradient */
+    border-radius: 12px;
+    padding: 20px;
+    margin: 10px 0;
+    z-index: 998;
+}
+
+/* All other Header styling */
+#stepLeftHeader,
+#stepSystemHeader,
+#stepAppsHeader,
+#stepAppxHeader,
+#steptweakHeader {
+    top: 30px;
+    background: linear-gradient(45deg, #1f1f1f 0%, #303030 50%, #1f1f1f 100%); /* Dark gradient */
+    border-radius: 12px;
+    padding: 20px;
+    margin: 10px 0;
+    margin-bottom: 50px;
+    z-index: 998;
+    transition: background-color 0.3s ease;
+}
+
+/* Hover effect */
+#stepLeftHeader:hover,
+#stepSystemHeader:hover,
+#stepAppsHeader:hover,
+#stepAppxHeader:hover,
+#steptweakHeader:hover {
+    background: linear-gradient(45deg, #303030 0%, #424242 50%, #303030 100%); /* Dark gradient on hover */
+}
+
+/* Background color */
+#stepLeftHeader,
+#stepSystemHeader,
+#stepAppsHeader,
+#stepAppxHeader,
+#steptweakHeader {
+    background: linear-gradient(45deg, #1f1f1f 0%, #990099 50%, #1f1f1f 100%); /* Dark magenta/purple gradient */
+}
+
+/* Styling for links, e.g. Share, GitHub etc. */
+.links-container {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+.modern-link {
+    color: #ff00dd; /* Light magenta */
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.modern-link:hover {
+    color: #ff99ff; /* Lighter magenta on hover */
+}
+
+/* Settings menu */
+.settings-dropbtn {
+    background-color: transparent;
+    color: #d5d5d5;
+    padding: 0px 16px;
+    font-size: inherit;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+/* Dropdown container (hidden by default) */
+.settings-dropdown {
+    position: relative;
+    display: inline-block;
+    z-index: 99999;
+}
+
+/* Dropdown content */
+.settings-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #1f1f1f; /* Dark background */
+    min-width: 160px;
+    z-index: 1;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    right: 0;
+}
+
+/* Links inside dropdown */
+.settings-dropdown-content a {
+    color: #ffffff; /* White text */
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.settings-dropdown-content a:hover {
+    background-color: #424242; /* Darker background on hover */
+}
+
+.settings-dropdown:hover .settings-dropdown-content {
+    display: block;
+}
+
+/* Change the background color of dropdown button when the dropdown content is shown */
+.settings-dropdown:hover .settings-dropbtn {
+    background-color: #ff00dd; /* Light magenta */
+    color: #ffffff; /* White text */
+}
+
+/* Styling for back button */
+#btnBack {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-color: transparent;
+	color: #999;
+    border: none;
+}
+
+#btnBack .icon {
+    font-family: 'Segoe MDL2 Assets';
+    font-size: 14px;
+}
+
+#btnBack:hover {
+    background-color: #333333; /* Darker background on hover */
+}
+
+/* Main Container styling */
+.glassy-box {
+    position: relative;
+    flex: 1;
+    max-width: 100%;
+    margin-right: 20px;
+}
+
+/* UI: Glassy-Box buttons in Headers/Plugins, e.g. CoTweaker, Decrapify etc. */
+.glassy-box button {
+    position: relative;
+    font-family: "Segoe UI";
+    font-size: 14px;
+    display: inline-block;
+    padding: 10px 20px;
+    border: 1px solid #ffffff; /* White border */
+    margin-bottom: 5px;
+    border-radius: 10px;
+    color: #ffffff; /* White text */
+    background: #990099; /* Dark magenta background */
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+}
+
+.glassy-box button:hover {
+    border: 1px solid #ff00dd; /* Light magenta border on hover */
+}
+
+/* Clippy Animation */
+@keyframes clippyAnimation {
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+    100% { transform: translateY(0); }
+}
+
+/* Styling for Clippy container */
+#clippy-container {
+    position: fixed;
+    bottom: 20px;
+    right: -150px;
+    z-index: 999;
+    animation: clippyAnimation 2s infinite;
+}
+
+/* Styling for Clippy image */
+#clippy-container img {
+    width: 180px;
+    height: auto;
+    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); /* White drop shadow */
+}
+
+/* Styling for Assisted buttons container inside logContainer */
+.assisted-container {
+    display: flex;
+}
+
+/* Styling for logContainer */
+#logContainer {
+    position: fixed;
+    bottom: 110px;
+    left: 20px;
+    right: calc(20% + 100px);
+    z-index: 999;
+    background-color: rgba(255, 255, 204, 0.8); /* Light transparent yellow-orange background */
+    font-size: 14px;
+    color: #333; /* Dark grey text */
+    border: 3px solid #000; /* Light grey border */
+    border-radius: 10px;
+    padding: 10px; /* Increased padding */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Dark transparent shadow */
+}
+
+/* Triangle pointer for logContainer */
+#logContainer::before {
+    content: "";
+    position: absolute;
+    bottom: calc(50% - 10px);
+    right: -20px;
+    border-width: 10px;
+    border-style: solid;
+    border-color: transparent transparent transparent rgba(255, 255, 204, 0.9); /* Light transparent yellow-orange triangle pointer */
+    z-index: -1;
+}
+
+/* UI: Chatbox Container */
+.chatbox-container {
+    left: 30px;
+    width: 65%;
+    max-height: 80%;
+    padding: 10px;
+    backdrop-filter: blur(10px); /* Apply blur effect to the background */
+}
+
+/* Additional style for chatbox container */
+.chatbox-container input {
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+    color: #f0f0f0;
+}
+
+/* Chatbox: input styling */
+#chatbox {
+    background-color: rgba(51, 51, 51, 0.9);
+    width: 120%;
+    height: 20px;
+    padding: 12px;
+    font-size: 16px;
+    border: none; /* Remove default border */
+    border: 1px solid #666666;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #7a336c; /* Magenta bottom border */
+    outline: none;
+}
+
+.chatbox-items div {
+    display: inline-block;
+    padding: 5px;
+    font-size: 14px;
+    cursor: pointer;
+    background-color: #333333;
+    border: 2px solid #7a336c; /* Rounded Microsoft Copilot magenta border for each result */
+    border-radius: 8px; /* Rounded corners */
+    margin-bottom: 10px;
+}
+
+.chatbox-items div:hover {
+    background-color: #555555;
+    color: magenta;
+}
+
+/* Assisted buttons container */
+/* Button sizes for the buttons container */
+#buttons-container,
+#buttonsAppx-container {
+    display: flex;
+    flex-wrap: wrap; /* Allow buttons to wrap to the next line if necessary */
+    gap: 8px; /* Let's add some spacing between buttons */
+    margin-bottom: 8px; /* Add some space after buttons-container */
+}
+
+/* Common button styles */
+#buttons-container button,
+#buttonsAppx-container button,
+#refreshButton {
+    font-family: "Comic Sans MS", sans-serif; /* Because Clippy loved Comic Sans! */
+    font-size: 13px;
+    text-align: left;
+    margin-bottom: 8px;
+    border-radius: 10px;
+    background: transparent; /* Transparent background */
+    cursor: pointer;
+    min-width: 150px;
+    transition: transform 0.3s ease;
+    flex: 1;
+    border: none;
+}
+
+/* Styling for the middle/third button */
+#buttons-container button:nth-child(3) {
+    font-weight: 500;
+    background: #9d0194;
+	color: #fff;
+    border: 1px solid #7a336c;
+}
+
+/* Pink border on hover */
+#buttons-container button:hover,
+#buttonsAppx-container button:hover,
+#refreshButton:hover {
+    border: 1px solid magenta;
+}
+
+/* Scale up the button on hover */
+#buttonsAppx-container button:hover {
+    transform: scale(1.2);
+}
+
+/* Add a trash/bin icon before the button text */
+#buttonsAppx-container button::before {
+    content: "📱 Remove ";
+}
+
+#refreshButton:hover {
+    height: 20px;
+    border-color: #0078cf;
+}
+
+/* ASSISTED BUTTONS: Additional buttons are shown progressively as the container width increases,
+with a maximum of 6 buttons being displayed at widths of 1200px or larger based on the size of the viewport. */
+
+/* Initially hide all buttons */
+#buttons-container button {
+    display: none;
+}
+
+/* Show the first two buttons initially */
+#buttons-container button:nth-child(-n+2) {
+    display: inline-block;
+}
+
+/* Show additional buttons as container width increases */
+@media screen and (min-width: 400px) {
+    #buttons-container button:nth-child(-n+2) {
+        display: inline-block;
+    }
+}
+
+@media screen and (min-width: 600px) {
+    #buttons-container button:nth-child(-n+4) {
+        display: inline-block;
+    }
+}
+
+@media screen and (min-width: 800px) {
+    #buttons-container button:nth-child(-n+5) {
+        display: inline-block;
+    }
+}
+
+@media screen and (min-width: 1000px) {
+    #buttons-container button:nth-child(-n+6) {
+        display: inline-block;
+    }
+}
+
+/* Ensure a maximum of 6 buttons are shown */
+@media screen and (min-width: 1200px) {
+    #buttons-container button {
+        display: inline-block;
+    }
+}
+
+/* PLUGIN: CoTweaker */
+/* UI: Header styling for Toggle Switches in CoTweaker */
+/* Highlight Feature status in CoTweaker js backend */
+.CoTweakerFeatureON { color: green; }
+.CoTweakerFeatureOFF { color: red; }
+
+/* Support statement for Handhelds */
+.handheld-badge {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background-color: #6f4fdc;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    margin-left: 8px;
+    border-radius: 5px;
+}
+
+/* Styling for the section headers */
+.section-header {
+    font-size: 1.2em;
+    font-weight: bold;
+    margin-top: 20px;
+    color: #f0f0f0;
+    border-bottom: 2px solid rgba(255, 0, 255, 0.4); /* Semi-transparent magenta border */
+    padding-bottom: 10px;
+}
+
+/* Styling for the settings group */
+.settings-group {
+    margin-bottom: 30px;
+    padding: 20px;
+}
+
+/* Styling for the descriptions */
+.description {
+    display: none; /* Initially hide descriptions */
+    margin-top: 10px;
+}
+
+/* Styling for the individual settings */
+.toggle-switch-label {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+    background-color: #ccc;
+    border-radius: 20px;
+    transition: background-color 0.3s;
+    vertical-align: middle;
+    margin-right: 10px;
+}
+
+.toggle-switch-label:before {
+    content: '';
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: white;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.3s;
+}
+
+input[type="checkbox"] {
+    display: none;
+}
+
+input[type="checkbox"]:checked + .toggle-switch-label {
+    background-color: #86d993; /* Green color when checked */
+}
+
+input[type="checkbox"]:checked + .toggle-switch-label:before {
+    transform: translateX(20px); /* Move the circle to the right when checked */
+}
+
+.checkbox-label {
+    cursor: help;
+}
+
+/* PLUGIN: Decrapify */
+.package-group {
+  margin-bottom: 20px;
+}
+
+.package-group h2 {
+  font-size: 24px;
+  color: #fff; /* Light text color */
+  margin-bottom: 10px;
+}
+
+.toggle-switch-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 10px;
+}
+
+.custom-toggle-switch {
+  display: flex;
+  align-items: center;
+}
+
+.custom-toggle-switch input {
+  display: none;
+}
+
+.custom-toggle-switch label {
+  cursor: pointer;
+  background-color: #212121; /* Darker background */
+  border-radius: 10px;
+  padding: 8px 12px;
+  color: #fff; /* Light text color */
+}
+
+.custom-toggle-switch input:checked + label {
+  background-color: #1976D2; /* Windows 11 accent color */
+  color: #fff;
+}
+
+/* PLUGIN: WingetUI */
+#appList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.app-item {
+    background: linear-gradient(45deg, #2c2c2c 0%, #333333 20%, #444444 40%, #555555 60%, #666666 80%, #2c2c2c 100%);
+    border-radius: 12px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    width: 100%;
+    box-sizing: border-box;
+    transition: transform 0.3s;
+    width: calc(33.33% - 20px); /* Width of each app item */
+    margin-bottom: 20px; /* Space between rows */
+}
+
+.app-item:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); /* Slightly larger shadow on hover */
+}
+
+/* PLUGIN: Extensions */
+#plugin-categories-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+/* Preinstalled badge */
+.plugin-badge {
+    background-color: #8f3cd5;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    margin-left: 8px;
+}
+
+.plugin-entry {
+    width: calc(33.33% - 20px);
+    background-color: #f2effd;
+    border: 1px solid #e8e8ed;
+    border-radius: 5px;
+    padding: 20px;
+    margin-bottom: 10px;
+}
+
+.plugin-entry h3 {
+    color: #333;
+    font-size: 18px;
+    margin-bottom: 10px;
+}
+
+.plugin-entry p {
+    color: #666;
+    font-size: 14px;
+    margin-bottom: 15px;
+}
+
+.plugin-entry .execute-button {
+    background-color: #e26bf8;
+    color: #fff;
+    border: none;
+    border-radius: 3px;
+    padding: 5px 10px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.plugin-entry .execute-button:hover {
+    background-color: #8f3cd5;
+}