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;
      }

      /* ---------- Two-Column Layout Container ---------- */
      .content-wrapper {
        display: flex;
        gap: 2rem;
        max-width: 1100px;
        width: 100%;
        margin-top: 2rem;
        flex-wrap: wrap;
      }

      /* ---------- Left Column: Status, Donate, GitHub ---------- */
      .left-column {
        flex: 1 1 480px;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

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

      .donate {
        padding: 1.5rem;
        background-color: #e7f5ec;
        border-left: 6px solid #4caf50;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
      }

      .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;
        text-decoration: none;
      }

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

      .project-follow {
        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;
      }

      /* ---------- Right Column: YouTube Review ---------- */
      .right-column {
        flex: 1 1 480px;
      }

      .video-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
      }

      .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

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

        #status,
        .donate {
          padding: 1rem;
        }
      }
    </style>
  </head>

  <body>
    <h1>🔍 CrapFixer Update Check</h1>

    <!-- Main Content: Two Columns -->
    <div class="content-wrapper">
      <!-- Left Column -->
      <div class="left-column">
        <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>
      </div>

      <!-- Right Column: YouTube Video -->
      <div class="right-column">
        <p style="font-weight: 500; margin-bottom: 1rem;">
          🎬 Here's a recent cool review of CrapFixer on YouTube:
        </p>
        <div class="video-container">
          <iframe
            src="https://www.youtube.com/embed/RmnNo9RGRT8"
            title="CrapFixer Review"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </div>
      </div>
    </div>

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

      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>