☰

XButton

Tombol tambahan: kalkulator umur, auto reload, Hapus iklan

  1. // ==UserScript==
  2. // @name         XButton
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Tombol tambahan: kalkulator umur, auto reload, Hapus iklan
  6. // @author       Khudhori
  7. // @match        *://*/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Create the floating button (main icon)
  15.     const floatingBtn = document.createElement('div');
  16.     floatingBtn.style.position = 'fixed';
  17.     floatingBtn.style.bottom = '10px';
  18.     floatingBtn.style.right = '10px';
  19.     floatingBtn.style.width = '48px';
  20.     floatingBtn.style.height = '48px';
  21.     floatingBtn.style.backgroundColor = 'transparent';
  22.     floatingBtn.style.borderRadius = '50%';
  23.     floatingBtn.style.overflow = 'hidden';
  24.     floatingBtn.style.zIndex = '9999';
  25.     floatingBtn.style.transition = 'transform 0.5s ease, box-shadow 0.5s ease';
  26.     floatingBtn.style.border = '3px solid #007bff';
  27.     floatingBtn.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
  28.  
  29.     // img floating button
  30.     const iconImg = document.createElement('img');
  31.     iconImg.src = 'https://lh3.googleusercontent.com/a/AGNmyxaEnKjzfKogUt2-V-11G5OAQMl0OZKBz7562IzJ=s96-c';
  32.     iconImg.style.width = '100%';
  33.     iconImg.style.height = '100%';
  34.     iconImg.style.objectFit = 'cover';
  35.     iconImg.style.borderRadius = '50%';
  36.     floatingBtn.appendChild(iconImg);
  37.     document.body.appendChild(floatingBtn);
  38.  
  39.     // Create container for script buttons
  40.     const btnContainer = document.createElement('div');
  41.     btnContainer.style.position = 'fixed';
  42.     btnContainer.style.bottom = '70px';
  43.     btnContainer.style.right = '10px';
  44.     btnContainer.style.display = 'none';
  45.     btnContainer.style.opacity = '0';
  46.     btnContainer.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
  47.     btnContainer.style.transform = 'translateY(-50px)';
  48.     btnContainer.style.zIndex = '9999';
  49.     document.body.appendChild(btnContainer);
  50.  
  51.     // Function to create individual buttons
  52.     function createScriptButton(text, callback) {
  53.         const btn = document.createElement('button');
  54.         btn.innerHTML = text;
  55.         btn.style.display = 'block';
  56.         btn.style.marginBottom = '7px';
  57.         btn.style.padding = '7px';
  58.         btn.style.backgroundColor = '#ffffff';
  59.         btn.style.color = '#333333';
  60.         btn.style.border = '1px solid #cccccc';
  61.         btn.style.borderRadius = '10px';
  62.         btn.style.cursor = 'pointer';
  63.         btn.style.fontFamily = 'Helvetica Neue, Arial, sans-serif';
  64.         btn.style.fontSize = '13px';
  65.         btn.style.fontWeight = '400';
  66.         btn.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
  67.         btn.style.opacity = '0';
  68.         btn.style.transform = 'translateY(-20px)';
  69.         btn.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
  70.         btn.onmouseover = () => {
  71.             btn.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
  72.             btn.style.transform = 'scale(1.05)';
  73.         };
  74.         btn.onmouseout = () => {
  75.             btn.style.boxShadow = '0 6px 4px rgba(0, 0, 0, 0.1)';
  76.             btn.style.transform = 'scale(1)';
  77.         };
  78.         btn.onclick = callback;
  79.         btnContainer.appendChild(btn);
  80.  
  81.         // Show the button with fade-in effect after a small delay
  82.         setTimeout(() => {
  83.             btn.style.opacity = '1';
  84.             btn.style.transform = 'translateY(0)';
  85.         }, 100);
  86.     }
  87.  
  88.     // Toggle button container visibility animation
  89.     floatingBtn.onclick = () => {
  90.         if (btnContainer.style.display === 'none') {
  91.             btnContainer.style.display = 'block';
  92.             setTimeout(() => {
  93.                 btnContainer.style.opacity = '1';
  94.                 btnContainer.style.transform = 'translateY(0)';
  95.             }, 100);
  96.             floatingBtn.style.transform = 'rotate(45deg) scale(1.2)';
  97.             floatingBtn.style.boxShadow = '0px 0px 20px rgba(0, 0, 0, 0.2)';
  98.         } else {
  99.             btnContainer.style.opacity = '0';
  100.             btnContainer.style.transform = 'translateY(-20px)';
  101.             setTimeout(() => {
  102.                 btnContainer.style.display = 'none';
  103.             }, 300);
  104.             floatingBtn.style.transform = 'rotate(0deg) scale(1)';
  105.             floatingBtn.style.boxShadow = '0px 0px 15px rgba(0, 0, 0, 0.1)';
  106.         }
  107.     };
  108.  
  109.     // Function to create a calculator popup
  110.     function createCalculator() {
  111.         const calcContainer = document.createElement('div');
  112.         calcContainer.style.position = 'fixed';
  113.         calcContainer.style.top = '50px';
  114.         calcContainer.style.right = '10px';
  115.         calcContainer.style.width = '300px';
  116.         calcContainer.style.padding = '10px';
  117.         calcContainer.style.backgroundColor = '#ffffff';
  118.         calcContainer.style.border = '1px solid #cccccc';
  119.         calcContainer.style.borderRadius = '12px';
  120.         calcContainer.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
  121.         calcContainer.style.zIndex = '10000';
  122.         calcContainer.style.display = 'none';
  123.         calcContainer.style.opacity = '0';
  124.         calcContainer.style.transition = 'opacity 0.3s ease';
  125.  
  126.         const calcHTML = `
  127.             <div style="margin-bottom: 10px;">
  128.                 <input id="calc-display" type="text" readonly style="width: 100%; padding: 10px; font-size: 18px; text-align: right; border: 1px solid #cccccc; border-radius: 6px;">
  129.             </div>
  130.             <div style="margin-bottom: 10px;">
  131.                 <label for="birthdate">Tanggal Lahir:</label><br>
  132.                 <input id="birthdate-day" type="number" placeholder="Tanggal" style="width: 30%; margin-right: 5px; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
  133.                 <input id="birthdate-month" type="number" placeholder="Bulan" style="width: 30%; margin-right: 5px; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
  134.                 <input id="birthdate-year" type="number" placeholder="Tahun" style="width: 35%; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
  135.             </div>
  136.             <div style="margin-bottom: 10px;">
  137.                 <label for="today-date">Tanggal Hari Ini:</label><br>
  138.                 <input id="today-day" type="number" placeholder="Tanggal" style="width: 30%; margin-right: 5px; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
  139.                 <input id="today-month" type="number" placeholder="Bulan" style="width: 30%; margin-right: 5px; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
  140.                 <input id="today-year" type="number" placeholder="Tahun" style="width: 35%; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
  141.             </div>
  142.             <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;">
  143.                 <button id="calc-calculate" style="padding: 10px; background-color: #007bff; color: white; border: 1px solid #007bff; border-radius: 6px; grid-column: span 3;">Hitung Usia</button>
  144.                 <button id="calc-clear" style="padding: 10px; background-color: #f44336; color: white; border: 1px solid #f44336; border-radius: 6px;">C</button>
  145.                 <button id="calc-close" style="padding: 10px; background-color: #007bff; color: white; border: 1px solid #007bff; border-radius: 6px;">Tutup</button>
  146.             </div>
  147.         `;
  148.  
  149.         calcContainer.innerHTML = calcHTML;
  150.         document.body.appendChild(calcContainer);
  151.  
  152.         // Calculator logic
  153.         const display = document.getElementById('calc-display');
  154.         const clearBtn = document.getElementById('calc-clear');
  155.         const calculateBtn = document.getElementById('calc-calculate');
  156.         const closeBtn = document.getElementById('calc-close');
  157.  
  158.         // Function to calculate age
  159.         function calculateAge() {
  160.             const dayOfBirth = parseInt(document.getElementById('birthdate-day').value, 10);
  161.             const monthOfBirth = parseInt(document.getElementById('birthdate-month').value, 10);
  162.             const yearOfBirth = parseInt(document.getElementById('birthdate-year').value, 10);
  163.             const dayToday = parseInt(document.getElementById('today-day').value, 10);
  164.             const monthToday = parseInt(document.getElementById('today-month').value, 10);
  165.             const yearToday = parseInt(document.getElementById('today-year').value, 10);
  166.  
  167.             if (!isNaN(dayOfBirth) && !isNaN(monthOfBirth) && !isNaN(yearOfBirth) &&
  168.                 !isNaN(dayToday) && !isNaN(monthToday) && !isNaN(yearToday)) {
  169.                 const birthDate = new Date(yearOfBirth, monthOfBirth - 1, dayOfBirth);
  170.                 const todayDate = new Date(yearToday, monthToday - 1, dayToday);
  171.  
  172.                 let ageYears = todayDate.getFullYear() - birthDate.getFullYear();
  173.                 let ageMonths = todayDate.getMonth() - birthDate.getMonth();
  174.                 let ageDays = todayDate.getDate() - birthDate.getDate();
  175.  
  176.                 if (ageDays < 0) {
  177.                     ageMonths--;
  178.                     ageDays += new Date(todayDate.getFullYear(), todayDate.getMonth(), 0).getDate();
  179.                 }
  180.                 if (ageMonths < 0) {
  181.                     ageYears--;
  182.                     ageMonths += 12;
  183.                 }
  184.  
  185.                 display.value = `Usia: ${ageYears} tahun, ${ageMonths} bulan, ${ageDays} hari`;
  186.             } else {
  187.                 display.value = 'Masukkan tanggal yang valid';
  188.             }
  189.         }
  190.  
  191.         // Button click handlers
  192.         clearBtn.addEventListener('click', () => {
  193.             display.value = ''; // Clear display
  194.             document.getElementById('birthdate-day').value = '';
  195.             document.getElementById('birthdate-month').value = '';
  196.             document.getElementById('birthdate-year').value = '';
  197.             document.getElementById('today-day').value = '';
  198.             document.getElementById('today-month').value = '';
  199.             document.getElementById('today-year').value = '';
  200.         });
  201.  
  202.         calculateBtn.addEventListener('click', calculateAge);
  203.  
  204.         closeBtn.addEventListener('click', () => {
  205.             calcContainer.style.opacity = '0';
  206.             setTimeout(() => {
  207.                 calcContainer.style.display = 'none';
  208.             }, 300);
  209.         });
  210.  
  211.         // Prevent closing the calculator when clicking inside it
  212.         calcContainer.addEventListener('click', (event) => {
  213.             event.stopPropagation();
  214.         });
  215.  
  216.         return calcContainer;
  217.     }
  218.  
  219.     // Function to create an auto-reload popup with time setting
  220.     function createAutoReloadPopup() {
  221.         const reloadContainer = document.createElement('div');
  222.         reloadContainer.style.position = 'fixed';
  223.         reloadContainer.style.top = '50px';
  224.         reloadContainer.style.right = '10px';
  225.         reloadContainer.style.width = '300px';
  226.         reloadContainer.style.padding = '10px';
  227.         reloadContainer.style.backgroundColor = '#ffffff';
  228.         reloadContainer.style.border = '1px solid #cccccc';
  229.         reloadContainer.style.borderRadius = '12px';
  230.         reloadContainer.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
  231.         reloadContainer.style.zIndex = '10000';
  232.         reloadContainer.style.display = 'none';
  233.         reloadContainer.style.opacity = '0';
  234.         reloadContainer.style.transition = 'opacity 0.3s ease';
  235.  
  236.         const reloadHTML = `
  237.             <div style="margin-bottom: 10px;">
  238.                 <label for="reload-interval">Interval Reload (menit):</label><br>
  239.                 <input id="reload-interval" type="number" min="1" placeholder="Menit" style="width: 100%; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
  240.             </div>
  241.             <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;">
  242.                 <button id="reload-start" style="padding: 10px; background-color: #007bff; color: white; border: 1px solid #007bff; border-radius: 6px; grid-column: span 1;">Mulai</button>
  243.                 <button id="reload-stop" style="padding: 10px; background-color: #f44336; color: white; border: 1px solid #f44336; border-radius: 6px; grid-column: span 1;">Berhenti</button>
  244.                 <button id="reload-close" style="padding: 10px; background-color: #007bff; color: white; border: 1px solid #007bff; border-radius: 6px; grid-column: span 2;">Tutup</button>
  245.             </div>
  246.         `;
  247.  
  248.         reloadContainer.innerHTML = reloadHTML;
  249.         document.body.appendChild(reloadContainer);
  250.  
  251.         // Auto-reload logic
  252.         let reloadInterval = null;
  253.  
  254.         const intervalInput = document.getElementById('reload-interval');
  255.         const startBtn = document.getElementById('reload-start');
  256.         const stopBtn = document.getElementById('reload-stop');
  257.         const closeBtn = document.getElementById('reload-close');
  258.  
  259.         startBtn.addEventListener('click', () => {
  260.             const minutes = parseInt(intervalInput.value, 10);
  261.             if (!isNaN(minutes) && minutes > 0) {
  262.                 if (reloadInterval !== null) clearInterval(reloadInterval);
  263.                 reloadInterval = setInterval(() => {
  264.                     location.reload();
  265.                 }, minutes * 60 * 1000); // Convert minutes to milliseconds
  266.             }
  267.         });
  268.  
  269.         stopBtn.addEventListener('click', () => {
  270.             if (reloadInterval !== null) clearInterval(reloadInterval);
  271.         });
  272.  
  273.         closeBtn.addEventListener('click', () => {
  274.             reloadContainer.style.opacity = '0'; // Fade out reload popup
  275.             setTimeout(() => {
  276.                 reloadContainer.style.display = 'none';
  277.             }, 300);
  278.         });
  279.  
  280.         // Prevent closing the reload popup when clicking inside it
  281.         reloadContainer.addEventListener('click', (event) => {
  282.             event.stopPropagation();
  283.         });
  284.  
  285.         return reloadContainer;
  286.     }
  287. 	
  288. // start tombol
  289.  
  290.     // Tombol Kalkulator Umur
  291.     createScriptButton('Kalkulator Umur', () => {
  292.         const calcContainer = createCalculator();
  293.         calcContainer.style.display = 'block';
  294.         setTimeout(() => {
  295.             calcContainer.style.opacity = '1';
  296.         }, 100);
  297.     });
  298.  
  299.     // Tombol auto reload
  300.     createScriptButton('Auto Reload', () => {
  301.         const reloadContainer = createAutoReloadPopup();
  302.         reloadContainer.style.display = 'block';
  303.         setTimeout(() => {
  304.             reloadContainer.style.opacity = '1';
  305.         }, 100);
  306.     });
  307.  
  308. // Create the ad removal button
  309. createScriptButton('Hapus Iklan', () => {
  310.     // Function to hide ads
  311.     const hideAds = () => {
  312.         const adSelectors = [
  313.             '[id^="ad"]',
  314.             '[class*="ad"]',
  315.             '[id*="ad"]',
  316.             '[class*="advertisement"]',
  317.             '[id^="banner"]',
  318.             '[class*="banner"]',
  319.             '[id*="banner"]',
  320.             '[class*="promo"]',
  321.             '[id^="promo"]',
  322.             '[class*="sponsored"]',
  323.             '[id*="sponsored"]',
  324.             '[class*="ads"]',
  325.             '[id*="ads"]',
  326.             '[id*="popup"]',
  327.             '[class*="popup"]',
  328.             '[class*="overlay"]',
  329.             '[id*="overlay"]'
  330.         ];
  331.  
  332.         adSelectors.forEach(selector => {
  333.             const ads = document.querySelectorAll(selector);
  334.             ads.forEach(ad => ad.style.display = 'none');
  335.         });
  336.     };
  337.  
  338.     // Function to block popups on link click
  339.     const blockPopups = () => {
  340.         document.querySelectorAll('a').forEach(link => {
  341.             link.addEventListener('click', (event) => {
  342.                 const href = link.getAttribute('href');
  343.                 if (href && (href.includes('popup') || href.includes('ad') || href.includes('advertisement'))) {
  344.                     event.preventDefault();
  345.                     console.log('Blocked popup ad link:', href);
  346.                 }
  347.             });
  348.         });
  349.     };
  350.  
  351.     // Execute both functions
  352.     hideAds();
  353.     blockPopups();
  354. });
  355.  
  356.  
  357. // end tombol
  358.  
  359.     // Close both containers when 'Esc' key is pressed
  360.     document.addEventListener('keydown', (event) => {
  361.         if (event.key === 'Escape') {
  362.             // Close calculator if visible
  363.             const calcContainer = document.querySelector('div[style*="top: 50px"][style*="right: 10px"]');
  364.             if (calcContainer) {
  365.                 calcContainer.style.opacity = '0';
  366.                 setTimeout(() => {
  367.                     calcContainer.style.display = 'none';
  368.                 }, 300);
  369.             }
  370.  
  371.             // Close reload popup if visible
  372.             const reloadContainer = document.querySelector('div[style*="top: 50px"][style*="right: 10px"]');
  373.             if (reloadContainer) {
  374.                 reloadContainer.style.opacity = '0';
  375.                 setTimeout(() => {
  376.                     reloadContainer.style.display = 'none';
  377.                 }, 300);
  378.             }
  379.  
  380.             // Close button container if visible
  381.             if (btnContainer.style.display === 'block') {
  382.                 btnContainer.style.opacity = '0';
  383.                 btnContainer.style.transform = 'translateY(-20px)';
  384.                 setTimeout(() => {
  385.                     btnContainer.style.display = 'none';
  386.                 }, 300);
  387.                 floatingBtn.style.transform = 'rotate(0deg) scale(1)';
  388.                 floatingBtn.style.boxShadow = '0px 0px 15px rgba(0, 0, 0, 0.1)';
  389.             }
  390.         }
  391.     });
  392.  
  393. })();