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>Crap Fixer 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-box {
	  font-family: Verdana, Geneva, sans-serif;
	  font-size: 13px;
	  background-color: #fffde5;
	  border: 1px solid #ccc;
	  padding: 15px;
	  max-width: 340px;
	  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
	  margin-top: 2rem;
	  color: #333;
	}

	.donate-box h3 {
	  margin-top: 0;
	  font-size: 14px;
	  color: #444;
	}

	.donate-box a {
	  color: #0066cc;
	  text-decoration: none;
	}

	.donate-box a:hover {
	  text-decoration: underline;
	}

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

	.project-follow a {
	  padding: 0.8rem 1.5rem;
	  background: #24292f;
	  color: white;
	  border-radius: 12px;
	  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>
	<!-- Main Content -->
    <p id="status">Checking version...</p>

	<div class="donate-box">
	  <h3>How can I help?</h3>
		<p>
		  If you like this software, you can help by <a href="https://twitter.com/intent/tweet?text=Still%20cleaning%20up%20Windows%20like%20it%E2%80%99s%202005.%20CrapFixer%20fixes%20the%20crap%20Windows%20leaves%20behind.%20https%3A%2F%2Fgithub.com%2Fbuiltbybel%2FCrapFixer" target="_blank">tweeting about it</a> or <strong>supporting the project</strong> with a donation.
		</p>

	  <p>
		Although this software is free, any donations — large or small — are greatly appreciated :)
	  </p>

	  <form action="https://www.paypal.com/donate" method="post" target="_blank" style="margin-top: 10px;">
		<input type="hidden" name="hosted_button_id" value="M9DW4VNKH9ECQ" />
		<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" name="submit" alt="Donate with PayPal" />
	  </form>

	  <p style="margin-top: 1rem;">
		Or support me with a coffee: <a href="https://ko-fi.com/builtbybel" target="_blank">☕ Ko-fi</a>
	  </p>

<p style="margin-top: 1rem;">
  Just like the good old tools from back in the day — built with care, running on caffeine and community support ☕💾
</p>

	</div>

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


    <!-- Update Logic Script -->
    <script>
      const latestVersion = "1.11.71";

      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>