☰

Custom Google Homepage with Timer and Guess the Number

Customize the Google homepage by adding buttons, a color changer feature, social media buttons, a timer, and a Guess the Number game.

目前為 2023-07-19 提交的版本，檢視 最新版本。

// ==UserScript==
// @name Custom Google Homepage with Timer and Guess the Number
// @namespace https://greasyfork.org/users/1129625
// @version 3.0
// @description Customize the Google homepage by adding buttons, a color changer feature, social media buttons, a timer, and a Guess the Number game.
// @match *://www.google.com/*
// @grant none
// @license MIT
// ==/UserScript==

(function () {
  'use strict';

  // Function to create a button element
  function createButton(text, url) {
    var button = document.createElement('a');
    button.textContent = text;
    button.href = url;
    button.style.marginRight = '10px';
    button.style.cursor = 'pointer';
    return button;
  }

  // Function to create a button element with a color wheel
  function createButtonWithColorWheel(text, url) {
    var buttonContainer = document.createElement('div');
    buttonContainer.style.display = 'flex';
    buttonContainer.style.alignItems = 'center';

    var button = document.createElement('a');
    button.textContent = text;
    button.href = url;
    button.style.marginRight = '10px';
    button.style.cursor = 'pointer';

    var colorWheelContainer = document.createElement('div');
    colorWheelContainer.style.marginRight = '10px';

    var colorWheel = document.createElement('input');
    colorWheel.type = 'color';
    colorWheel.style.cursor = 'pointer';
    colorWheel.addEventListener('input', function (event) {
      document.body.style.backgroundColor = event.target.value;
    });

    colorWheelContainer.appendChild(colorWheel);

    buttonContainer.appendChild(button);
    buttonContainer.appendChild(colorWheelContainer);

    return buttonContainer;
  }

  // Function to create the Color Changer button
  function createColorChangerButton() {
    var button = document.createElement('button');
    button.textContent = 'Change Color';
    button.style.marginRight = '10px';
    button.style.cursor = 'pointer';
    button.addEventListener('click', function () {
      var color = prompt(
        "Select a color:\n1. Blue\n2. Red\n3. Green\n4. Yellow\n5. Purple\n6. Orange\n7. Pink\n8. Teal\n9. Gray\n10. Brown\n11. SkyBlue\n12. Cyan\n13. Magenta\n14. Lime\n15. Indigo\n16. Olive\n17. Silver\n18. Maroon\n19. Navy\n20. Custom Color"
      );

      if (color !== null) {
        var colors = [
          'blue', 'red', 'green', 'yellow', 'purple', 'orange', 'pink', 'teal', 'gray', 'brown',
          'skyblue', 'cyan', 'magenta', 'lime', 'indigo', 'olive', 'silver', 'maroon', 'navy'
        ];
        if (color >= 1 && color <= 19) {
          document.body.style.backgroundColor = colors[color - 1];
        } else if (color == 20) {
          showCustomColor();
        } else {
          alert("Invalid selection. Please choose a valid option.");
        }
      }
    });

    return button;
  }

  // Function to show the custom color prompt
  function showCustomColor() {
    var customColor = prompt("Enter a custom color (HEX or RGB):");
    if (customColor !== null) {
      document.body.style.backgroundColor = customColor;
    }
  }

  // Function to create the Random Number button
  function createRandomNumberButton() {
    var button = document.createElement('button');
    button.textContent = 'Random Number';
    button.style.marginRight = '10px';
    button.style.cursor = 'pointer';
    button.addEventListener('click', function () {
      var randomNumber = Math.floor(Math.random() * 101);
      alert('Random Number: ' + randomNumber);
    });

    return button;
  }

  // Function to create the New Fact button
  function createNewFactButton() {
    var button = document.createElement('button');
    button.textContent = 'New Fact';
    button.style.marginRight = '10px';
    button.style.cursor = 'pointer';
    button.addEventListener('click', function () {
      var currentDay = new Date().getDate();
      var fact = getFactOfTheDay(currentDay);
      alert('Fact of the Day: ' + fact);
    });

    return button;
  }

  // Function to get the fact of the day based on the current day
  function getFactOfTheDay(day) {
    if (isNaN(day)) {
      day = 1;
    }

    var facts = [
      // Facts array unchanged
    ];

    // Get the fact corresponding to the current day
    var factIndex = (day - 1) % facts.length;
    return facts[factIndex];
  }

  // Function to create the Timer element
  function createTimerElement() {
    var timerElement = document.createElement('div');
    timerElement.style.position = 'fixed';
    timerElement.style.top = '50%';
    timerElement.style.left = '10px';
    timerElement.style.transform = 'translateY(-50%)';
    timerElement.style.backgroundColor = '#fff';
    timerElement.style.padding = '10px';
    timerElement.style.borderRadius = '5px';
    timerElement.style.fontSize = '18px';
    timerElement.style.fontWeight = 'bold';
    timerElement.style.zIndex = '9999';
    timerElement.textContent = '00:00:00';

    return timerElement;
  }

  // Function to create the Guess the Number game elements
  function createGuessTheNumberElements() {
    var guessContainer = document.createElement('div');
    guessContainer.style.position = 'fixed';
    guessContainer.style.top = '50%';
    guessContainer.style.left = '1165px';
    guessContainer.style.transform = 'translateY(-50%)';
    guessContainer.style.backgroundColor = '#fff';
    guessContainer.style.padding = '10px';
    guessContainer.style.borderRadius = '5px';
    guessContainer.style.fontSize = '18px';
    guessContainer.style.fontWeight = 'bold';
    guessContainer.style.zIndex = '9999';

    var guessLabel = document.createElement('p');
    guessLabel.textContent = 'Guess the Number (0-100)';
    guessContainer.appendChild(guessLabel);

    var attemptsLabel = document.createElement('p');
    attemptsLabel.textContent = 'Attempts left:';
    guessContainer.appendChild(attemptsLabel);

    var inputField = document.createElement('input');
    inputField.type = 'number';
    guessContainer.appendChild(inputField);

    var submitButton = document.createElement('button');
    submitButton.textContent = 'Submit Guess';
    submitButton.style.cursor = 'pointer';
    submitButton.style.marginTop = '5px';
    submitButton.addEventListener('click', function () {
      checkGuess(parseInt(inputField.value));
    });
    guessContainer.appendChild(submitButton);

    return guessContainer;
  }

  // Function to create the message container for Guess the Number game
  function createMessageContainer() {
    var messageContainer = document.createElement('div');
    messageContainer.style.marginTop = '10px';
    return messageContainer;
  }

  // Create the Start button
  var startButton = document.createElement('button');
  startButton.textContent = 'Start';
  startButton.style.marginRight = '10px';
  startButton.style.cursor = 'pointer';
  startButton.style.position = 'absolute';
  startButton.style.left = '32px';
  startButton.style.top = '312px';
  startButton.addEventListener('click', function () {
    startTimer();
  });

  // Create the Pause button
  var pauseButton = document.createElement('button');
  pauseButton.textContent = 'Pause';
  pauseButton.style.marginRight = '10px';
  pauseButton.style.cursor = 'pointer';
  pauseButton.style.position = 'absolute';
  pauseButton.style.left = '72px';
  pauseButton.style.top = '312px';
  pauseButton.addEventListener('click', function () {
    pauseTimer();
  });

  // Create the Reset button
  var resetButton = document.createElement('button');
  resetButton.textContent = 'Reset';
  resetButton.style.cursor = 'pointer';
  resetButton.style.position = 'absolute';
  resetButton.style.left = '122px';
  resetButton.style.top = '312px';
  resetButton.addEventListener('click', function () {
    resetTimer();
  });

  // Find the Google Apps button
  var appsButton = document.querySelector('a.gb_d');
  if (appsButton) {
    // Create the color changer button
    var changeColorButton = createColorChangerButton();
    changeColorButton.style.marginRight = '10px';
    changeColorButton.style.cursor = 'pointer';

    // Replace the Google Apps button with the color changer button
    appsButton.parentNode.replaceChild(changeColorButton, appsButton);
  }

  // Find the About button
  var aboutButton = document.querySelector('a[href*="about.google"]');
  if (aboutButton) {
    // Replace the About button with the YouTube button
    var youtubeButton = createButton('YouTube', 'https://www.youtube.com');
    aboutButton.parentNode.replaceChild(youtubeButton, aboutButton);
  }

  // Find the Store button
  var storeButton = document.querySelector('a[href*="store.google.com"]');
  if (storeButton) {
    // Replace the Store button with the Twitch button and color wheel
    var twitchButton = createButtonWithColorWheel('Twitch', 'https://www.twitch.tv');
    storeButton.parentNode.replaceChild(twitchButton, storeButton);
  }

  // Find the Images button
  var imagesButton = document.querySelector('a[href*="google.com/imghp"]');
  if (imagesButton) {
    // Replace the Images button with the Discord button
    var discordButton = createButton('Discord', 'https://www.discord.com');
    imagesButton.parentNode.replaceChild(discordButton, imagesButton);
  }

  // Create the Reddit button
  var redditButton = createButton('Reddit', 'https://www.reddit.com');
  redditButton.style.marginRight = '10px';
  redditButton.style.cursor = 'pointer';

  // Create the Twitter button
  var twitterButton = createButton('Twitter', 'https://www.twitter.com');
  twitterButton.style.marginRight = '10px';
  twitterButton.style.cursor = 'pointer';

  // Create the Instagram button
  var instagramButton = createButton('Instagram', 'https://www.instagram.com');
  instagramButton.style.marginRight = '10px';
  instagramButton.style.cursor = 'pointer';

  // Create the Facebook button
  var facebookButton = createButton('Facebook', 'https://www.facebook.com');
  facebookButton.style.marginRight = '10px';
  facebookButton.style.cursor = 'pointer';

  // Create the Random Number button
  var randomNumberButton = createRandomNumberButton();
  randomNumberButton.style.marginRight = '10px';
  randomNumberButton.style.cursor = 'pointer';

  // Create the New Fact button
  var newFactButton = createNewFactButton();
  newFactButton.style.marginRight = '10px';
  newFactButton.style.cursor = 'pointer';

  // Find the color wheel container
  var colorWheelContainer = document.querySelector('div[style="margin-right: 10px;"]');
  if (colorWheelContainer) {
    // Insert the Reddit button after the color wheel container
    colorWheelContainer.parentNode.insertBefore(redditButton, colorWheelContainer.nextSibling);

    // Insert the Twitter button after the Reddit button
    redditButton.parentNode.insertBefore(twitterButton, redditButton.nextSibling);

    // Insert the Instagram button after the Twitter button
    twitterButton.parentNode.insertBefore(instagramButton, twitterButton.nextSibling);

    // Insert the Facebook button after the Instagram button
    instagramButton.parentNode.insertBefore(facebookButton, instagramButton.nextSibling);

    // Insert the Random Number button after the Facebook button
    facebookButton.parentNode.insertBefore(randomNumberButton, facebookButton.nextSibling);

    // Insert the New Fact button after the Random Number button
    randomNumberButton.parentNode.insertBefore(newFactButton, randomNumberButton.nextSibling);
  }

  // Create the Timer element
  var timerElement = createTimerElement();
  document.body.appendChild(timerElement);

  // Create the Guess the Number elements
  var guessContainer = createGuessTheNumberElements();
  document.body.appendChild(guessContainer);

  // Create the message container for Guess the Number
  var messageContainer = createMessageContainer();
  document.body.appendChild(messageContainer);

  var timerInterval;
  var startTime;

  var randomNumber;
  var remainingAttempts = 6;

  // Function to update the timer
  function updateTimer() {
    var currentTime = new Date().getTime();
    var elapsedTime = currentTime - startTime;
    var hours = Math.floor(elapsedTime / (1000 * 60 * 60)).toString().padStart(2, '0');
    var minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
    var seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000).toString().padStart(2, '0');

    timerElement.textContent = hours + ':' + minutes + ':' + seconds;
  }

  // Function to start the timer
  function startTimer() {
    if (!timerInterval) {
      startTime = new Date().getTime();
      timerInterval = setInterval(updateTimer, 1000);
    }
  }

  // Function to pause the timer
  function pauseTimer() {
    if (timerInterval) {
      clearInterval(timerInterval);
      timerInterval = null;
    }
  }

  // Function to reset the timer
  function resetTimer() {
    if (timerInterval) {
      clearInterval(timerInterval);
      timerInterval = null;
    }
    timerElement.textContent = '00:00:00';
  }

  // Function to show the hint popup with remaining attempts
  function showHintPopup(hint) {
    var popup = document.createElement('div');
    popup.style.position = 'fixed';
    popup.style.top = '50%';
    popup.style.left = 'calc(50% - 100px)';
    popup.style.transform = 'translate(-50%, -50%)';
    popup.style.backgroundColor = '#fff';
    popup.style.padding = '10px';
    popup.style.borderRadius = '5px';
    popup.style.fontSize = '18px';
    popup.style.fontWeight = 'bold';
    popup.style.zIndex = '9999';
    popup.textContent = hint + ' (Attempts left: ' + remainingAttempts + ')';

    document.body.appendChild(popup);

    setTimeout(function () {
      document.body.removeChild(popup);
    }, 2000);
  }

  // Function to check the guess in the Guess the Number game
  function checkGuess(guess) {
    if (remainingAttempts > 0) {
      if (isNaN(guess) || guess < 0 || guess > 100) {
        messageContainer.textContent = 'Please enter a valid number between 0 and 100.';
      } else {
        remainingAttempts--;
        messageContainer.textContent = 'Attempts left: ' + remainingAttempts;

        if (guess === randomNumber) {
          messageContainer.textContent = 'Congratulations! You guessed the correct number.';
          guessContainer.style.display = 'none';
        } else if (remainingAttempts === 0) {
          messageContainer.textContent = 'Game Over. The correct number was: ' + randomNumber;
          guessContainer.style.display = 'none';
        } else if (guess < randomNumber) {
          showHintPopup('Higher');
        } else {
          showHintPopup('Lower');
        }

        // Add the guessed number to the history container
        addToGuessHistory(guess);
      }
    }
  }

  // Function to create the Guess History container
  function createGuessHistoryContainer() {
    var guessHistoryContainer = document.createElement('div');
    guessHistoryContainer.style.position = 'fixed';
    guessHistoryContainer.style.top = '50%';
    guessHistoryContainer.style.left = '1100px';
    guessHistoryContainer.style.transform = 'translateY(-50%)';
    guessHistoryContainer.style.backgroundColor = '#fff';
    guessHistoryContainer.style.padding = '10px';
    guessHistoryContainer.style.borderRadius = '5px';
    guessHistoryContainer.style.fontSize = '18px';
    guessHistoryContainer.style.fontWeight = 'bold';
    guessHistoryContainer.style.zIndex = '9999';
    guessHistoryContainer.textContent = 'Guess History:\n';

    return guessHistoryContainer;
  }

  // Create the Guess History container
  var guessHistoryContainer = createGuessHistoryContainer();
  document.body.appendChild(guessHistoryContainer);

  // Function to add the guessed number to the history container
  function addToGuessHistory(guess) {
    guessHistoryContainer.textContent += guess + ', ';
  }

  // Generate the initial random number for the Guess the Number game
  randomNumber = Math.floor(Math.random() * 101);

  // Create the Start/Pause/Reset buttons container
  var timerButtonsContainer = document.createElement('div');
  timerButtonsContainer.style.display = 'flex';
  timerButtonsContainer.style.alignItems = 'center';
  timerButtonsContainer.style.marginTop = '10px';

  // Insert the Start/Pause/Reset buttons container after the color wheel container
  if (colorWheelContainer) {
    colorWheelContainer.parentNode.insertBefore(timerButtonsContainer, colorWheelContainer.nextSibling);
  }

  // Add the Start button to the container
  timerButtonsContainer.appendChild(startButton);

  // Add the Pause button to the container
  timerButtonsContainer.appendChild(pauseButton);

  // Add the Reset button to the container
  timerButtonsContainer.appendChild(resetButton);

  // Remove the unwanted div with class "KxwPGc SSwjIe"
  const unwantedDiv = document.querySelector('div.KxwPGc.SSwjIe');
  if (unwantedDiv) {
    unwantedDiv.remove();
  }

  // Attach scroll event listener to lock the timer in place
  window.addEventListener('scroll', function () {
    var topOffset = '10px'; // Adjust this value if needed
    timerElement.style.top = 'calc(50% + ' + topOffset + ' - ' + window.scrollY + 'px)';
  });
})();