☰

Shredsauce dark Theme

All-black dark theme for Shredsauce website by Gheat – Combined Menu with collapsible Tools, SLVSH, and Settings HUD

  1. // ==UserScript==
  2. // @name         Shredsauce dark Theme
  3. // @namespace    stylish
  4. // @version      1.9.0
  5. // @description  All-black dark theme for Shredsauce website by Gheat – Combined Menu with collapsible Tools, SLVSH, and Settings HUD
  6. // @include      *://shredsauce.com/*
  7. // @include      *://suikagame.io/shredsauce/*
  8. // @run-at       document-start
  9. // @grant        GM_xmlhttpRequest
  10. // @license      All Rights Reserved
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.   const style = document.createElement('style');
  15.   style.innerText = `
  16.     body, html { background-color: #000 !important; color: #fff !important; }
  17.     mobileContainer, #webContainer, .scroll-section, .carousel, .navbar, footer, #contentContainer, #playerContainerOverlay {
  18.       background-color: #000 !important; color: #fff !important;
  19.     }
  20.     button, .btn, .flickity-button, .playButton, #playButton { background-color: #333 !important; color: #fff !important; border: 1px solid #555 !important; }
  21.     button:hover, .btn:hover, .flickity-button:hover, .playButton:hover, #playButton:hover { background-color: #444 !important; }
  22.     .navbar, .navbar nav ul li a, .social-icons a, .dropdown-content a, .logoContainer img, .videoOverlayLogo { filter: brightness(0) invert(1) !important; }
  23.     #playContainerInfoBox, .updateTitle, .text, .leaderboardContainer, .skyscraperContainer, .pull-right, .clearfix { background-color: #000 !important; color: #fff !important; }
  24.     img, video, .carousel img, .flickity-button svg, .videoOverlayLogo { filter: brightness(0.8) !important; }
  25.     #playIcon path { fill: #fff !important; }
  26.     a, a:link, a:visited { color: #66ccff !important; } a:hover { color: #00aaff !important; }
  27.     [class*="ad"], .ad-container, #div-gpt-ad, .banner-ad, .myAds { display: none !important; }
  28.     *:not(#gheat-menu):not(#slvsh-hud):not(#gheat-tools-popup):not(#gheat-menu-sections):not(#gheat-tools-section):not(#gheat-slvsh-section):not(#gheat-settings-hud):not(#webContainer):not(.scroll-section):not(#playerContainerOverlay):not(.navbar):not(footer):not(#contentContainer):not(body):not(html) {
  29.       background-color: transparent !important;
  30.     }
  31.     #gheat-message {
  32.       position: fixed; bottom: 10px; right: 20px; font-size: 12px; color: #aaa; font-family: monospace; z-index: 99999;
  33.     }
  34.     #leaderboardContainer, #skyscraperContainer,
  35.     div[class*="8p7p6pdb282"] { display: none !important; }
  36.   `;
  37.   document.head.appendChild(style);
  38.  
  39.   // Delete unwanted elements
  40.   window.addEventListener('load', () => {
  41.     const msg = document.createElement('div');
  42.     msg.id = 'gheat-message';
  43.     msg.innerText = 'https://sites.google.com/view/shredhub/home - Gheat';
  44.     document.body.appendChild(msg);
  45.     const allowedIds = [
  46.       'webContainer', 'mobileContainer', 'gheat-message', 'gheat-menu',
  47.       'gheat-menu-header', 'gheat-menu-sections',
  48.       'gheat-tools-popup', 'gheat-tools-section', 'gheat-slvsh-section',
  49.       'gheat-settings-hud',
  50.       'slvsh-hud', 'slvsh-p1-bg', 'slvsh-p2-bg',
  51.       'butta-edit', 'butta-video'
  52.     ];
  53.     function nukeUnwanted() {
  54.       Array.from(document.body.children).forEach(el => {
  55.         if (!allowedIds.includes(el.id)) { el.remove(); }
  56.       });
  57.     }
  58.     setTimeout(() => {
  59.       allowedIds.push('gheat-menu');
  60.       nukeUnwanted();
  61.       const observer = new MutationObserver(() => { nukeUnwanted(); });
  62.       observer.observe(document.body, { childList: true, subtree: true });
  63.     }, 2500);
  64.   });
  65. })();
  66.  
  67. // Update theme message and YouTube section
  68. window.addEventListener('load', () => {
  69.   const titleDiv = document.querySelector('.updateTitle');
  70.   if (titleDiv) titleDiv.textContent = '';
  71.   const msgContainer = document.querySelector('.text');
  72.   if (msgContainer) {
  73.     msgContainer.innerHTML = `
  74.       <em>sites.google.com/view/shredhub</em><br>
  75.       <em>April 6 2025</em><br><br>
  76.       Thank you for using my theme<br><br>
  77.       - Gheat
  78.     `;
  79.     const ytSection = document.createElement('div');
  80.     ytSection.id = 'butta-edit';
  81.     ytSection.style.marginTop = '30px';
  82.     ytSection.style.textAlign = 'center';
  83.     ytSection.style.color = '#fff';
  84.     ytSection.style.fontFamily = 'Arial, sans-serif';
  85.     ytSection.innerHTML = `
  86.       <h2 style="margin-bottom: 10px; font-size: 16px; text-align: left;">Butta Park shredsauce edit by Gheat</h2>
  87.       <div style="width: 520px; height: 292px; margin-right: auto;">
  88.         <iframe id="butta-video" width="520" height="292"
  89.           src="https://www.youtube.com/embed/moFxyVw-L78"
  90.           title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
  91.           encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  92.       </div>
  93.     `;
  94.     msgContainer.appendChild(ytSection);
  95.   }
  96. });
  97.  
  98. // Replace video
  99. window.addEventListener('load', () => {
  100.   const video = document.querySelector('video.video');
  101.   const source = video ? video.querySelector('source') : null;
  102.   if (source) { source.src = 'https://files.catbox.moe/nmgerh.mp4'; video.load(); }
  103. });
  104.  
  105. ///////////////////////////////////////////////////////////////////
  106. //////////////////////////Gheat Menu///////////////////////////////
  107. ///////////////////////////////////////////////////////////////////
  108. window.addEventListener('load', () => {
  109.   // Main Menu container
  110.   const menu = document.createElement('div');
  111.   menu.id = 'gheat-menu';
  112.   Object.assign(menu.style, {
  113.     position: 'fixed',
  114.     top: '50%',
  115.     right: '20px',
  116.     transform: 'translate(100%, -50%)',
  117.     color: 'white',
  118.     fontFamily: 'Arial, sans-serif',
  119.     padding: '20px',
  120.     borderRadius: '16px',
  121.     zIndex: '99999',
  122.     textAlign: 'center',
  123.     width: 'max-content',
  124.     background: 'rgba(255, 255, 255, 0.1)',
  125.     backdropFilter: 'blur(12px) saturate(140%)',
  126.     WebkitBackdropFilter: 'blur(12px) saturate(140%)',
  127.     boxShadow: '0 4px 20px rgba(0, 0, 0, 0.2)',
  128.     border: '1px solid rgba(255,255,255,0.1)',
  129.     opacity: '0',
  130.     transition: 'opacity 0.5s ease, transform 0.5s ease'
  131.   });
  132.   setTimeout(() => {
  133.     menu.style.opacity = '1';
  134.     menu.style.transform = 'translate(0, -50%)';
  135.   }, 300);
  136.   document.body.appendChild(menu);
  137.  
  138.   // Content wrapper for fading inner content
  139.   const contentWrapper = document.createElement('div');
  140.   contentWrapper.style.opacity = '0';
  141.   contentWrapper.style.transition = 'opacity 0.4s ease';
  142.   menu.appendChild(contentWrapper);
  143.   setTimeout(() => { contentWrapper.style.opacity = '1'; }, 200);
  144.  
  145.   // Main Menu header with buttons and container for sub panels
  146.   contentWrapper.innerHTML = `
  147.     <div id="gheat-menu-header" style="display: flex; flex-direction: column; align-items: center; width: 100%;">
  148.       <div style="font-weight: bold; font-size: 16px; margin-bottom: 12px;">✦ Gheat Menu ✦</div>
  149.       <div class="menu-item" style="margin: 5px 0; width: 100%; text-align: center;">
  150.         <button id="cheatBtn" style="padding: 6px 12px; width: 140px; border: none; border-radius: 6px; background: #444; color: white; cursor: pointer;">
  151.           Cheat Sheet
  152.         </button>
  153.       </div>
  154.       <div class="menu-item" style="margin: 5px 0; width: 100%; text-align: center;">
  155.         <button id="toolsBtn" style="padding: 6px 12px; width: 140px; border: none; border-radius: 6px; background: #444; color: white; cursor: pointer;">
  156.           Tools
  157.         </button>
  158.         <div id="gheat-tools-section" style="
  159.           display: none;
  160.           flex-direction: column;
  161.           align-items: center;
  162.           opacity: 0;
  163.           transform: translateY(-10px);
  164.           transition: opacity 0.3s ease, transform 0.3s ease;
  165.           margin-top: 5px;
  166.           width: 100%;
  167.           text-align: center;
  168.         ">
  169.           <div style="font-weight: bold; font-size: 16px; margin-bottom: 8px;">✦ Tools ✦</div>
  170.           <div style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
  171.             <button id="btnCustomTextures" style="padding: 6px 12px; width: 140px; border: none; border-radius: 6px; background: #444; color: white; cursor: pointer;">
  172.               Custom Textures Extension
  173.             </button>
  174.             <button id="btnIsItDown" style="padding: 6px 12px; width: 140px; border: none; border-radius: 6px; background: #444; color: white; cursor: pointer;">
  175.               Checking...
  176.             </button>
  177.             <button id="btnBeta" style="padding: 6px 12px; width: 140px; border: none; border-radius: 6px; background: #444; color: white; cursor: pointer;">
  178.               Beta
  179.             </button>
  180.             <button id="btnSettings" style="padding: 6px 12px; width: 140px; border: none; border-radius: 6px; background: #444; color: white; cursor: pointer;">
  181.               Settings
  182.             </button>
  183.           </div>
  184.         </div>
  185.       </div>
  186.       <div class="menu-item" style="margin: 5px 0; width: 100%; text-align: center;">
  187.         <button id="slvshBtn" style="padding: 6px 12px; width: 140px; border: none; border-radius: 6px; background: #444; color: white; cursor: pointer;">
  188.           SLVSH
  189.         </button>
  190.         <div id="gheat-slvsh-section" style="
  191.           display: none;
  192.           opacity: 0;
  193.           transform: translateY(-10px);
  194.           transition: opacity 0.3s ease, transform 0.3s ease;
  195.           margin-top: 5px;
  196.           width: 100%;
  197.           text-align: center;
  198.         ">
  199.           <div style="font-weight: bold; font-size: 16px; margin-bottom: 8px;">✦ Slvsh Cup ✦</div>
  200.           <div style="margin-bottom: 8px;"><strong>Skier 1 - </strong><span id="p1Letters"></span></div>
  201.           <div style="margin-bottom: 8px;"><strong>Skier 2 - </strong><span id="p2Letters"></span></div>
  202.           <div style="margin-bottom: 8px; display: flex; gap: 4px; justify-content: center;">
  203.             <button id="slvshBtnPlus1" style="padding:4px 8px; border:none; border-radius:4px; background:#555; color:white; cursor:pointer;">SK1 +</button>
  204.             <button id="slvshBtnMinus1" style="padding:4px 8px; border:none; border-radius:4px; background:#555; color:white; cursor:pointer;">SK1 -</button>
  205.           </div>
  206.           <div style="margin-bottom: 8px; display: flex; gap: 4px; justify-content: center;">
  207.             <button id="slvshBtnPlus2" style="padding:4px 8px; border:none; border-radius:4px; background:#555; color:white; cursor:pointer;">SK2 +</button>
  208.             <button id="slvshBtnMinus2" style="padding:4px 8px; border:none; border-radius:4px; background:#555; color:white; cursor:pointer;">SK2 -</button>
  209.           </div>
  210.         </div>
  211.       </div>
  212.     </div>
  213.   `;
  214.  
  215.   ///////////////////////////////////////////////////////////////////
  216.   // Event Handlers for Main Menu Buttons
  217.   ///////////////////////////////////////////////////////////////////
  218.   document.getElementById('cheatBtn').onclick = () => {
  219.     window.open('https://sites.google.com/view/shredhub/cheats', '_blank');
  220.   };
  221.  
  222.   // Toggle Tools panel
  223.   document.getElementById('toolsBtn').onclick = () => {
  224.     const toolsPanel = document.getElementById('gheat-tools-section');
  225.     if (toolsPanel.style.display === 'none' || toolsPanel.style.display === '') {
  226.       toolsPanel.style.display = 'block';
  227.       requestAnimationFrame(() => {
  228.         toolsPanel.style.opacity = '1';
  229.         toolsPanel.style.transform = 'translateY(0)';
  230.       });
  231.     } else {
  232.       toolsPanel.style.opacity = '0';
  233.       toolsPanel.style.transform = 'translateY(-10px)';
  234.       setTimeout(() => { toolsPanel.style.display = 'none'; }, 300);
  235.     }
  236.   };
  237.  
  238.   // Toggle SLVSH panel
  239.   document.getElementById('slvshBtn').onclick = () => {
  240.     const slvshPanel = document.getElementById('gheat-slvsh-section');
  241.     if (slvshPanel.style.display === 'none' || slvshPanel.style.display === '') {
  242.       slvshPanel.style.display = 'block';
  243.       requestAnimationFrame(() => {
  244.         slvshPanel.style.opacity = '1';
  245.         slvshPanel.style.transform = 'translateY(0)';
  246.       });
  247.     } else {
  248.       slvshPanel.style.opacity = '0';
  249.       slvshPanel.style.transform = 'translateY(-10px)';
  250.       setTimeout(() => { slvshPanel.style.display = 'none'; }, 300);
  251.     }
  252.   };
  253.  
  254.   ///////////////////////////////////////////////////////////////////
  255.   // SLVSH Score Buttons Logic
  256.   ///////////////////////////////////////////////////////////////////
  257.   const p1Letters = document.getElementById('p1Letters');
  258.   const p2Letters = document.getElementById('p2Letters');
  259.   document.getElementById('slvshBtnPlus1').onclick = function() {
  260.     if (p1Letters.textContent.length < 5) {
  261.       p1Letters.textContent += 'SLVSH'[p1Letters.textContent.length];
  262.     }
  263.     this.blur();
  264.   };
  265.   document.getElementById('slvshBtnMinus1').onclick = function() {
  266.     p1Letters.textContent = p1Letters.textContent.slice(0, -1);
  267.     this.blur();
  268.   };
  269.   document.getElementById('slvshBtnPlus2').onclick = function() {
  270.     if (p2Letters.textContent.length < 5) {
  271.       p2Letters.textContent += 'SLVSH'[p2Letters.textContent.length];
  272.     }
  273.     this.blur();
  274.   };
  275.   document.getElementById('slvshBtnMinus2').onclick = function() {
  276.     p2Letters.textContent = p2Letters.textContent.slice(0, -1);
  277.     this.blur();
  278.   };
  279.  
  280.   ///////////////////////////////////////////////////////////////////
  281.   // Tools Section Event Handlers
  282.   ///////////////////////////////////////////////////////////////////
  283.   document.getElementById('btnCustomTextures').onclick = () => {
  284.     window.open("https://sites.google.com/view/shredhub/tutorials", "_blank");
  285.   };
  286.  
  287.   // Is It Down status check – if any response is received before 8 sec, it says UP.
  288.   function checkStatus() {
  289.     const btn = document.getElementById('btnIsItDown');
  290.     if (!btn) return;
  291.     btn.textContent = "Checking...";
  292.     GM_xmlhttpRequest({
  293.       method: "GET",
  294.       url: "https://shredsauce.com/test.php",
  295.       timeout: 8000,
  296.       ontimeout: () => { btn.textContent = "DOWN ❌"; },
  297.       onload: (resp) => { btn.textContent = "UP ✅"; },
  298.       onerror: (err) => { btn.textContent = "DOWN ❌"; console.error("Status check error:", err); }
  299.     });
  300.   }
  301.   document.getElementById('btnIsItDown').onclick = checkStatus;
  302.   checkStatus();
  303.  
  304.   // Settings HUD
  305.   document.getElementById('btnSettings').onclick = () => {
  306.     let settingsHud = document.getElementById('gheat-settings-hud');
  307.     if (!settingsHud) {
  308.       settingsHud = document.createElement('div');
  309.       settingsHud.id = 'gheat-settings-hud';
  310.       settingsHud.style.cssText = `
  311.         position: fixed;
  312.         top: 50%;
  313.         left: 50%;
  314.         transform: translate(-50%, -50%);
  315.         background: rgba(40, 40, 40, 0.75);
  316.         backdrop-filter: blur(12px) saturate(130%);
  317.         -webkit-backdrop-filter: blur(12px) saturate(130%);
  318.         border: 1px solid rgba(255,255,255,0.08);
  319.         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  320.         border-radius: 16px;
  321.         padding: 20px;
  322.         z-index: 100000;
  323.         text-align: center;
  324.         width: 220px;
  325.         display: none;
  326.         opacity: 0;
  327.         transition: opacity 0.3s ease, transform 0.3s ease;
  328.       `;
  329.       settingsHud.innerHTML = `
  330.         <div style="font-weight: bold; font-size: 16px; margin-bottom: 12px;">✦ Settings ✦</div>
  331.         <button style="margin:5px; padding:6px 12px; width: 180px; border:none; border-radius:6px; background:#444; color:white; cursor:pointer;">settings in the works</button>
  332.         <button style="margin:5px; padding:6px 12px; width: 180px; border:none; border-radius:6px; background:#444; color:white; cursor:pointer;">settings in the works</button>
  333.         <button id="settingsCloseBtn" style="margin:5px; padding:6px 12px; width: 180px; border:none; border-radius:6px; background:#800; color:white; cursor:pointer;">
  334.           Close Settings
  335.         </button>
  336.       `;
  337.       document.body.appendChild(settingsHud);
  338.       document.getElementById('settingsCloseBtn').onclick = () => {
  339.         settingsHud.style.opacity = '0';
  340.         settingsHud.style.transform = 'translateY(-10px)';
  341.         setTimeout(() => { settingsHud.style.display = 'none'; }, 300);
  342.       };
  343.     }
  344.     if (settingsHud.style.display === 'block') {
  345.       settingsHud.style.opacity = '0';
  346.       settingsHud.style.transform = 'translateY(-10px)';
  347.       setTimeout(() => { settingsHud.style.display = 'none'; }, 300);
  348.     } else {
  349.       settingsHud.style.display = 'block';
  350.       requestAnimationFrame(() => {
  351.         settingsHud.style.opacity = '1';
  352.         settingsHud.style.transform = 'translateY(0)';
  353.       });
  354.     }
  355.   };
  356.  
  357.   // Beta button
  358.  document.getElementById('btnBeta').onclick = () => {
  359.   const proceed = confirm("Switching to the Beta version will reload the page. Do you want to continue?");
  360.   if (proceed) {
  361.     window.location.href = "https://shredsauce.com/beta";
  362.   }
  363. };
  364. // --- Add Update Check at the Bottom of the Gheat Menu ---
  365.  
  366. const currentVersion = "1.9.0"; // <-- Set your current version here
  367.  
  368. GM_xmlhttpRequest({
  369.   method: "GET",
  370.   url: "https://update.gf.qytechs.cn/scripts/532035/Shredsauce%20dark%20Theme.meta.js",
  371.   onload: function(response) {
  372.     if (response.status === 200) {
  373.       // Extract the version string from the meta file using a regex
  374.       const metaText = response.responseText;
  375.       const versionMatch = metaText.match(/@version\s+([^\s]+)/i);
  376.       if (versionMatch && versionMatch[1]) {
  377.         const newVersion = versionMatch[1].trim();
  378.         // If the version in the meta file does NOT equal our current version, consider that an update.
  379.         if (newVersion !== currentVersion) {
  380.           // Create the update button
  381.           const updateBtn = document.createElement("button");
  382.           updateBtn.textContent = "Update available!";
  383.           updateBtn.style.cssText = "margin-top: 10px; padding: 6px 12px; width: 140px; border: none; border-radius: 6px; background: #800; color: white; cursor: pointer;";
  384.           updateBtn.onclick = () => {
  385.             window.open("https://gf.qytechs.cn/en/scripts/532035-shredsauce-dark-theme", "_blank");
  386.           };
  387.           // Append the update button at the bottom of your main content wrapper or menu
  388.           // (If you already defined `contentWrapper` in your Gheat Menu creation code, you can append it there)
  389.           contentWrapper.appendChild(updateBtn);
  390.         }
  391.       }
  392.     }
  393.   },
  394.   onerror: function(err) {
  395.     console.error("Error checking update:", err);
  396.   }
  397. });
  398. });

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址