Greasy Fork is available in English.
Tombol tambahan: kalkulator umur, auto reload, Hapus iklan
// ==UserScript==
// @name XButton
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Tombol tambahan: kalkulator umur, auto reload, Hapus iklan
// @author Khudhori
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Create the floating button (main icon)
const floatingBtn = document.createElement('div');
floatingBtn.style.position = 'fixed';
floatingBtn.style.bottom = '10px';
floatingBtn.style.right = '10px';
floatingBtn.style.width = '48px';
floatingBtn.style.height = '48px';
floatingBtn.style.backgroundColor = 'transparent';
floatingBtn.style.borderRadius = '50%';
floatingBtn.style.overflow = 'hidden';
floatingBtn.style.zIndex = '9999';
floatingBtn.style.transition = 'transform 0.5s ease, box-shadow 0.5s ease';
floatingBtn.style.border = '3px solid #007bff';
floatingBtn.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
// img floating button
const iconImg = document.createElement('img');
iconImg.src = 'https://lh3.googleusercontent.com/a/AGNmyxaEnKjzfKogUt2-V-11G5OAQMl0OZKBz7562IzJ=s96-c';
iconImg.style.width = '100%';
iconImg.style.height = '100%';
iconImg.style.objectFit = 'cover';
iconImg.style.borderRadius = '50%';
floatingBtn.appendChild(iconImg);
document.body.appendChild(floatingBtn);
// Create container for script buttons
const btnContainer = document.createElement('div');
btnContainer.style.position = 'fixed';
btnContainer.style.bottom = '70px';
btnContainer.style.right = '10px';
btnContainer.style.display = 'none';
btnContainer.style.opacity = '0';
btnContainer.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
btnContainer.style.transform = 'translateY(-50px)';
btnContainer.style.zIndex = '9999';
document.body.appendChild(btnContainer);
// Function to create individual buttons
function createScriptButton(text, callback) {
const btn = document.createElement('button');
btn.innerHTML = text;
btn.style.display = 'block';
btn.style.marginBottom = '7px';
btn.style.padding = '7px';
btn.style.backgroundColor = '#ffffff';
btn.style.color = '#333333';
btn.style.border = '1px solid #cccccc';
btn.style.borderRadius = '10px';
btn.style.cursor = 'pointer';
btn.style.fontFamily = 'Helvetica Neue, Arial, sans-serif';
btn.style.fontSize = '13px';
btn.style.fontWeight = '400';
btn.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
btn.style.opacity = '0';
btn.style.transform = 'translateY(-20px)';
btn.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
btn.onmouseover = () => {
btn.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
btn.style.transform = 'scale(1.05)';
};
btn.onmouseout = () => {
btn.style.boxShadow = '0 6px 4px rgba(0, 0, 0, 0.1)';
btn.style.transform = 'scale(1)';
};
btn.onclick = callback;
btnContainer.appendChild(btn);
// Show the button with fade-in effect after a small delay
setTimeout(() => {
btn.style.opacity = '1';
btn.style.transform = 'translateY(0)';
}, 100);
}
// Toggle button container visibility animation
floatingBtn.onclick = () => {
if (btnContainer.style.display === 'none') {
btnContainer.style.display = 'block';
setTimeout(() => {
btnContainer.style.opacity = '1';
btnContainer.style.transform = 'translateY(0)';
}, 100);
floatingBtn.style.transform = 'rotate(45deg) scale(1.2)';
floatingBtn.style.boxShadow = '0px 0px 20px rgba(0, 0, 0, 0.2)';
} else {
btnContainer.style.opacity = '0';
btnContainer.style.transform = 'translateY(-20px)';
setTimeout(() => {
btnContainer.style.display = 'none';
}, 300);
floatingBtn.style.transform = 'rotate(0deg) scale(1)';
floatingBtn.style.boxShadow = '0px 0px 15px rgba(0, 0, 0, 0.1)';
}
};
// Function to create a calculator popup
function createCalculator() {
const calcContainer = document.createElement('div');
calcContainer.style.position = 'fixed';
calcContainer.style.top = '50px';
calcContainer.style.right = '10px';
calcContainer.style.width = '300px';
calcContainer.style.padding = '10px';
calcContainer.style.backgroundColor = '#ffffff';
calcContainer.style.border = '1px solid #cccccc';
calcContainer.style.borderRadius = '12px';
calcContainer.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
calcContainer.style.zIndex = '10000';
calcContainer.style.display = 'none';
calcContainer.style.opacity = '0';
calcContainer.style.transition = 'opacity 0.3s ease';
const calcHTML = `
<div style="margin-bottom: 10px;">
<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;">
</div>
<div style="margin-bottom: 10px;">
<label for="birthdate">Tanggal Lahir:</label><br>
<input id="birthdate-day" type="number" placeholder="Tanggal" style="width: 30%; margin-right: 5px; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
<input id="birthdate-month" type="number" placeholder="Bulan" style="width: 30%; margin-right: 5px; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
<input id="birthdate-year" type="number" placeholder="Tahun" style="width: 35%; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
</div>
<div style="margin-bottom: 10px;">
<label for="today-date">Tanggal Hari Ini:</label><br>
<input id="today-day" type="number" placeholder="Tanggal" style="width: 30%; margin-right: 5px; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
<input id="today-month" type="number" placeholder="Bulan" style="width: 30%; margin-right: 5px; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
<input id="today-year" type="number" placeholder="Tahun" style="width: 35%; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
</div>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;">
<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>
<button id="calc-clear" style="padding: 10px; background-color: #f44336; color: white; border: 1px solid #f44336; border-radius: 6px;">C</button>
<button id="calc-close" style="padding: 10px; background-color: #007bff; color: white; border: 1px solid #007bff; border-radius: 6px;">Tutup</button>
</div>
`;
calcContainer.innerHTML = calcHTML;
document.body.appendChild(calcContainer);
// Calculator logic
const display = document.getElementById('calc-display');
const clearBtn = document.getElementById('calc-clear');
const calculateBtn = document.getElementById('calc-calculate');
const closeBtn = document.getElementById('calc-close');
// Function to calculate age
function calculateAge() {
const dayOfBirth = parseInt(document.getElementById('birthdate-day').value, 10);
const monthOfBirth = parseInt(document.getElementById('birthdate-month').value, 10);
const yearOfBirth = parseInt(document.getElementById('birthdate-year').value, 10);
const dayToday = parseInt(document.getElementById('today-day').value, 10);
const monthToday = parseInt(document.getElementById('today-month').value, 10);
const yearToday = parseInt(document.getElementById('today-year').value, 10);
if (!isNaN(dayOfBirth) && !isNaN(monthOfBirth) && !isNaN(yearOfBirth) &&
!isNaN(dayToday) && !isNaN(monthToday) && !isNaN(yearToday)) {
const birthDate = new Date(yearOfBirth, monthOfBirth - 1, dayOfBirth);
const todayDate = new Date(yearToday, monthToday - 1, dayToday);
let ageYears = todayDate.getFullYear() - birthDate.getFullYear();
let ageMonths = todayDate.getMonth() - birthDate.getMonth();
let ageDays = todayDate.getDate() - birthDate.getDate();
if (ageDays < 0) {
ageMonths--;
ageDays += new Date(todayDate.getFullYear(), todayDate.getMonth(), 0).getDate();
}
if (ageMonths < 0) {
ageYears--;
ageMonths += 12;
}
display.value = `Usia: ${ageYears} tahun, ${ageMonths} bulan, ${ageDays} hari`;
} else {
display.value = 'Masukkan tanggal yang valid';
}
}
// Button click handlers
clearBtn.addEventListener('click', () => {
display.value = ''; // Clear display
document.getElementById('birthdate-day').value = '';
document.getElementById('birthdate-month').value = '';
document.getElementById('birthdate-year').value = '';
document.getElementById('today-day').value = '';
document.getElementById('today-month').value = '';
document.getElementById('today-year').value = '';
});
calculateBtn.addEventListener('click', calculateAge);
closeBtn.addEventListener('click', () => {
calcContainer.style.opacity = '0';
setTimeout(() => {
calcContainer.style.display = 'none';
}, 300);
});
// Prevent closing the calculator when clicking inside it
calcContainer.addEventListener('click', (event) => {
event.stopPropagation();
});
return calcContainer;
}
// Function to create an auto-reload popup with time setting
function createAutoReloadPopup() {
const reloadContainer = document.createElement('div');
reloadContainer.style.position = 'fixed';
reloadContainer.style.top = '50px';
reloadContainer.style.right = '10px';
reloadContainer.style.width = '300px';
reloadContainer.style.padding = '10px';
reloadContainer.style.backgroundColor = '#ffffff';
reloadContainer.style.border = '1px solid #cccccc';
reloadContainer.style.borderRadius = '12px';
reloadContainer.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
reloadContainer.style.zIndex = '10000';
reloadContainer.style.display = 'none';
reloadContainer.style.opacity = '0';
reloadContainer.style.transition = 'opacity 0.3s ease';
const reloadHTML = `
<div style="margin-bottom: 10px;">
<label for="reload-interval">Interval Reload (menit):</label><br>
<input id="reload-interval" type="number" min="1" placeholder="Menit" style="width: 100%; padding: 5px; border: 1px solid #cccccc; border-radius: 6px;">
</div>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px;">
<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>
<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>
<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>
</div>
`;
reloadContainer.innerHTML = reloadHTML;
document.body.appendChild(reloadContainer);
// Auto-reload logic
let reloadInterval = null;
const intervalInput = document.getElementById('reload-interval');
const startBtn = document.getElementById('reload-start');
const stopBtn = document.getElementById('reload-stop');
const closeBtn = document.getElementById('reload-close');
startBtn.addEventListener('click', () => {
const minutes = parseInt(intervalInput.value, 10);
if (!isNaN(minutes) && minutes > 0) {
if (reloadInterval !== null) clearInterval(reloadInterval);
reloadInterval = setInterval(() => {
location.reload();
}, minutes * 60 * 1000); // Convert minutes to milliseconds
}
});
stopBtn.addEventListener('click', () => {
if (reloadInterval !== null) clearInterval(reloadInterval);
});
closeBtn.addEventListener('click', () => {
reloadContainer.style.opacity = '0'; // Fade out reload popup
setTimeout(() => {
reloadContainer.style.display = 'none';
}, 300);
});
// Prevent closing the reload popup when clicking inside it
reloadContainer.addEventListener('click', (event) => {
event.stopPropagation();
});
return reloadContainer;
}
// start tombol
// Tombol Kalkulator Umur
createScriptButton('Kalkulator Umur', () => {
const calcContainer = createCalculator();
calcContainer.style.display = 'block';
setTimeout(() => {
calcContainer.style.opacity = '1';
}, 100);
});
// Tombol auto reload
createScriptButton('Auto Reload', () => {
const reloadContainer = createAutoReloadPopup();
reloadContainer.style.display = 'block';
setTimeout(() => {
reloadContainer.style.opacity = '1';
}, 100);
});
// Create the ad removal button
createScriptButton('Hapus Iklan', () => {
// Function to hide ads
const hideAds = () => {
const adSelectors = [
'[id^="ad"]',
'[class*="ad"]',
'[id*="ad"]',
'[class*="advertisement"]',
'[id^="banner"]',
'[class*="banner"]',
'[id*="banner"]',
'[class*="promo"]',
'[id^="promo"]',
'[class*="sponsored"]',
'[id*="sponsored"]',
'[class*="ads"]',
'[id*="ads"]',
'[id*="popup"]',
'[class*="popup"]',
'[class*="overlay"]',
'[id*="overlay"]'
];
adSelectors.forEach(selector => {
const ads = document.querySelectorAll(selector);
ads.forEach(ad => ad.style.display = 'none');
});
};
// Function to block popups on link click
const blockPopups = () => {
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', (event) => {
const href = link.getAttribute('href');
if (href && (href.includes('popup') || href.includes('ad') || href.includes('advertisement'))) {
event.preventDefault();
console.log('Blocked popup ad link:', href);
}
});
});
};
// Execute both functions
hideAds();
blockPopups();
});
// end tombol
// Close both containers when 'Esc' key is pressed
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
// Close calculator if visible
const calcContainer = document.querySelector('div[style*="top: 50px"][style*="right: 10px"]');
if (calcContainer) {
calcContainer.style.opacity = '0';
setTimeout(() => {
calcContainer.style.display = 'none';
}, 300);
}
// Close reload popup if visible
const reloadContainer = document.querySelector('div[style*="top: 50px"][style*="right: 10px"]');
if (reloadContainer) {
reloadContainer.style.opacity = '0';
setTimeout(() => {
reloadContainer.style.display = 'none';
}, 300);
}
// Close button container if visible
if (btnContainer.style.display === 'block') {
btnContainer.style.opacity = '0';
btnContainer.style.transform = 'translateY(-20px)';
setTimeout(() => {
btnContainer.style.display = 'none';
}, 300);
floatingBtn.style.transform = 'rotate(0deg) scale(1)';
floatingBtn.style.boxShadow = '0px 0px 15px rgba(0, 0, 0, 0.1)';
}
}
});
})();