index.html

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>touch grass</title>
  <meta name="description" content="touch grass">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/png" href="/favicon.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  <style>
    @import url('https://fonts.googleapis.com/css?family=Inter:400');

    :root {
      --background: url(assets/grass.png);
    }

    body {
      background: var(--background) !important;
      background-size: cover !important;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      width: 100vw;
      margin: 0;
      overflow: hidden;
      font-family: 'Inter';
      transition: background 5s cubic-bezier(0.61, 1, 0.88, 1);
    }

    .spark {
      position: absolute;
      width: 30px;
      height: 8px;
      border-radius: 3px;
      background-color: white;
      transform: none;
    }

    a {
      text-decoration: none;
      color: rgba(255, 255, 255, 0.5);
    }

    a:hover {
      color: #fff;
    }

    #github {
      position: fixed;
      top: 0;
      right: 0;
      padding: 2rem;
    }

    .milestone-message {
      position: fixed;
      top: 1rem;
      left: 1rem;
      background-color: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      color: black;
      padding: 1rem;
      border-radius: 1rem;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 26rem;
    }

    .milestone-message button {
      background: none;
      border: none;
      font-size: 16px;
      cursor: pointer;
      color: black;
      margin-left: 10px;
    }

    #sunriseSunset {
      opacity: 0;
      position: fixed;
      bottom: 0;
      right: 0;
      padding: 1rem;
      color: rgba(255, 255, 255, 0.4);
      transition: opacity 1s linear;
    }
  </style>

</head>

<body>
  <div id="box" class="container"></div>
  <a id="github" href="https://github.com/juxtopposed/touchgrass" target="_blank" class="material-icons">help</a>
  <p id="sunriseSunset"> Powered by <a href="https://sunrisesunset.io/" target="_blank">SunriseSunset.io</a></p>

  <script>
      const getCurrentDayTime = async ({ latitude, longitude }) => {
      const response = await fetch(`https://api.sunrisesunset.io/json?lat=${latitude}&lng=${longitude}`);
      if (!response.ok) { throw new Error("Failed to fetch day times") };
      const { results } = await response.json();

      const currentTime = new Date();
      const currentDate = currentTime.toLocaleDateString("en-US");

      const { first_light, sunrise, sunset, last_light } = results;
      const [firstLightTime, sunriseTime, sunsetTime, lastLightTime] = [
          first_light,
          sunrise,
          sunset,
          last_light,
        ].map((time) => new Date(`${currentDate} ${time}`));

      if (currentTime < firstLightTime) {
        return "night";
      } else if (currentTime < sunriseTime) {
        return "sunrise";
      } else if (currentTime < sunsetTime) {
        return "day";
      } else if (currentTime < lastLightTime) {
        return "sunset";
      } else {
        return "night";
      }
    };

    const getLocation = async () => {
      return await new Promise((resolve, reject) => {
        const onSuccess = (position) => {
        const { latitude, longitude } = position.coords;
        resolve({ latitude, longitude });
      };
      const onError = (error) => reject(error);
      navigator.geolocation.getCurrentPosition(onSuccess, onError);
      });
    };

    const updateBackground = async () => {
      let currentDayTime;
      try {
        const { latitude, longitude } = await getLocation();
        currentDayTime = await getCurrentDayTime({ latitude, longitude });
        document.getElementById("sunriseSunset").style.opacity = "1";
      } catch (error) {
        console.error(error);
      }

      let backgroundUrl;
      switch (currentDayTime) {
        case "night":
          backgroundUrl = "url(assets/grass_night.png)";
          break;
        case "sunset":
          backgroundUrl = "url(assets/grass_sunset.png)";
          break;
        case "sunrise":
          backgroundUrl = "url(assets/grass_sunrise.png)";
          break;
        default:
          backgroundUrl = "url(assets/grass.png)";
          break;
      }
      document.body.style.setProperty("--background", backgroundUrl);
    };

    updateBackground();
    const oneHourMs = 1000 * 60 * 60;
    setInterval(updateBackground, oneHourMs);
  </script>

  <script>
    let styleSheet = null;
    const SPARK_ELEMENT_WIDTH = 30;
    const DISTANCE = 40;
    const RANDOMNESS_ON = true;
    const milestones = [50, 100, 500, 1000, 10000, 50000, 100000, 500000, 1000000, 10000000];

    function createTransformSteps() {
      if (Array.from(arguments).length === 0) {
        throw new Error("arguments to createTransformSteps should never be empty!");
      }

      const inputSteps = Array.from(arguments);
      const outputSteps = [inputSteps.shift()];
      inputSteps.forEach((step, i) => {
        outputSteps.push(`${outputSteps[i]} ${step}`);
      });

      return outputSteps;
    }

    const dynamicAnimation = (name, rotation) => {
      if (!styleSheet) {
        styleSheet = document.createElement("style");
        styleSheet.type = "text/css";
        document.head.appendChild(styleSheet);
      }

      const randomDist = RANDOMNESS_ON
        ? Math.floor((Math.random() - 0.5) * DISTANCE * 0.7)
        : 0;

      const [s1, s2, s3] = createTransformSteps(
        `translate(-50%, -50%) rotate(${rotation}deg) translate(10px, 0px)`,
        `translate(${DISTANCE + randomDist}px, 0px) scale(0.5, 0.5)`,
        `translate(${SPARK_ELEMENT_WIDTH / 2}px, 0) scale(0, 0)`
      );

      styleSheet.sheet.insertRule(
        `@keyframes ${name} {
       0% {
         transform: ${s1};
       }
       70% {
         transform: ${s2};
       }
       100% {
         transform: ${s3};
       }
    }`,
        styleSheet.length
      );
    };

    document.body.addEventListener("pointerdown", (e) => {
      e.preventDefault();
      const center = { x: e.pageX, y: e.pageY };
      incrementClickCount();
      makeBurst(center);
    });

    const makeBurst = (center) => {
      for (let i = 0; i < 8; i++) {
        const randomSpace = RANDOMNESS_ON
          ? Math.floor(-17 + Math.random() * 34)
          : 0;
        makeSpark(center, 45 * i + randomSpace);
      }
    };

    const makeSpark = (center, rotation) => {
      const div = document.createElement("div");
      const aniName = `disappear_${rotation}`;
      dynamicAnimation(aniName, rotation);

      div.classList.add("spark");
      div.style.left = `${center.x}px`;
      div.style.top = `${center.y}px`;
      div.style.animation = `${aniName} 500ms ease-out both`;
      document.body.append(div);
      setTimeout(() => {
        document.body.removeChild(div);
      }, 1000);
    };

    const incrementClickCount = () => {
      let clickCount = parseInt(localStorage.getItem("clickCount")) || 0;
      clickCount++;
      localStorage.setItem("clickCount", clickCount);
      checkMilestones(clickCount);
    };

    const milestoneMessages = {
      50: "wow, you've touched grass 50 times! :)",
      100: "amazing, you've touched grass 100 times! :D",
      500: "500 times!!! leave some grass for the rest of us.",
      1000: "alright slow down. 1000 times is the safe daily limit. back to your phone now.",
      10000: "you've touched grass 10,000 times (good job i guess)",
      50000: "50K! you did it! alright enough grass, go back home (or give your mouse some rest)",
      100000: "alright it's not even cool anymore. get some screen time...",
      500000: "idk what to make of 500,000 times of touching grass... but yayyy you did it.",
      1000000: "you've touched grass 1 MILLION times! phew! you may go home now, no more grass or milestones for you.",
      10000000: "how are you still here?..."
    };

    const checkMilestones = (clickCount) => {
      if (milestones.includes(clickCount)) {
        const message = milestoneMessages[clickCount];
        showMilestoneMessage(message);
        if (clickCount == 10000000) {
          setTimeout(() => {
            window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ", '_blank').focus();
          }, 2000);
        }
      }
    };

    const showMilestoneMessage = (message) => {
      const messageDiv = document.createElement("div");
      messageDiv.classList.add("milestone-message");

      const text = document.createElement("span");
      text.innerText = message;

      const closeButton = document.createElement("button");
      closeButton.innerText = "×";
      closeButton.addEventListener("click", () => {
        document.body.removeChild(messageDiv);
      });

      messageDiv.appendChild(text);
      messageDiv.appendChild(closeButton);
      document.body.appendChild(messageDiv);

      setTimeout(() => {
        if (document.body.contains(messageDiv)) {
          document.body.removeChild(messageDiv);
        }
      }, 10000);
    };
  </script>
</body>

</html>