Crapfixer/docs/update-check.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Crapfixer Update Check</title>
    <style>
      :root {
        --bg: #f3f6fd;
        --primary: #0067c0;
        --text: #1b1b1b;
        --card-bg: #ffffffcc;
        --shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        --radius: 20px;
      }

      * {
        box-sizing: border-box;
      }

      body {
        font-family: "Segoe UI Variable", "Segoe UI", Tahoma, sans-serif;
        background: linear-gradient(145deg, #ecf0f7, #f8faff);
        color: var(--text);
        padding: 2rem;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
      }

      h1 {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      #status {
        background: var(--card-bg);
        backdrop-filter: blur(10px);
        padding: 1.5rem;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        width: 100%;
        max-width: 500px;
        font-size: 1.1rem;
      }

      a {
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
      }

      a:hover {
        text-decoration: underline;
      }

      .donate {
        margin-top: 2rem;
        padding: 1.5rem;
        background-color: #e7f5ec;
        border-left: 6px solid #4caf50;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        max-width: 500px;
        width: 100%;
      }

      .donate strong {
        display: block;
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
      }

      .donate a {
        margin-top: 1rem;
        display: inline-block;
        padding: 0.6rem 1.2rem;
        background-color: #4caf50;
        color: white;
        border-radius: 8px;
        transition: background 0.3s ease;
      }

      .donate a:hover {
        background-color: #388e3c;
      }

      .project-follow {
        margin-top: 2rem;
        text-align: center;
      }

      .project-follow a {
        padding: 0.8rem 1.5rem;
        background: #24292f;
        color: white;
        border-radius: var(--radius);
        text-decoration: none;
        font-size: 1rem;
        transition: background 0.3s ease;
        display: inline-block;
      }

      .project-follow a:hover {
        background: #0366d6;
      }

      @media (max-width: 600px) {
        body {
          padding: 1rem;
        }

        #status,
        .donate {
          padding: 1rem;
        }
      }
    </style>
  </head>
  <body>
    <h1>🔍 Crapfixer Update Check</h1>
    <p id="status">Checking version...</p>

    <div class="donate">
      <strong>💖 Support Crapfixer</strong>
      Every donation helps me provide more updates. – Thanks, Belim 🙏
      <br /><br />
      <a href="https://www.paypal.com/donate/?hosted_button_id=M9DW4VNKH9ECQ" target="_blank">💸 PayPal</a>
      <a href="https://ko-fi.com/builtbybel" target="_blank" style="background-color: #ff5f5f;">☕ Ko-fi</a>
    </div>

    <div class="project-follow">
      <a href="https://github.com/builtbybel/Crapfixer" target="_blank">🐙 View on GitHub</a>
    </div>

    <script>
      const latestVersion = "0.60.190";

      function compareVersions(v1, v2) {
        const a = v1.split(".").map(Number);
        const b = v2.split(".").map(Number);
        for (let i = 0; i < Math.max(a.length, b.length); i++) {
          if ((a[i] || 0) < (b[i] || 0)) return -1;
          if ((a[i] || 0) > (b[i] || 0)) return 1;
        }
        return 0;
      }

      const params = new URLSearchParams(window.location.search);
      const userVersion = params.get("version");

      const status = document.getElementById("status");

      if (!userVersion) {
        status.innerText =
          "❓ No version found. Please open this page from the Crapfixer app.";
      } else {
        const result = compareVersions(userVersion, latestVersion);

        if (result < 0) {
          status.innerHTML = `⚠️ Your version (${userVersion}) is outdated.<br><strong>Latest version:</strong> ${latestVersion}<br><a href="https://github.com/builtbybel/Crapfixer/releases">⬇️ Download here</a>`;
        } else if (result === 0) {
          status.innerHTML = `✅ Your version (${userVersion}) is up to date.`;
        } else {
          status.innerHTML = `✅ Your version (${userVersion}) is newer than the official release (${latestVersion}).<br><em>Note: You may be using a development build.</em>`;
        }
      }
    </script>
  </body>
</html>