From b515b2f3a8108a8362959d4e203f91df35c2f913 Mon Sep 17 00:00:00 2001
From: Belim <belim@builtbybel.com>
Date: Wed, 21 May 2025 11:05:59 +0200
Subject: [PATCH] Add yt-review to update-check.html

---
 docs/update-check.bak.html | 176 +++++++++++++++++++++++++++++++++++++
 docs/update-check.html     | 115 +++++++++++++++++-------
 2 files changed, 259 insertions(+), 32 deletions(-)
 create mode 100644 docs/update-check.bak.html

diff --git a/docs/update-check.bak.html b/docs/update-check.bak.html
new file mode 100644
index 0000000..a198470
--- /dev/null
+++ b/docs/update-check.bak.html
@@ -0,0 +1,176 @@
+<!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 = "1.0.220";
+
+      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>
diff --git a/docs/update-check.html b/docs/update-check.html
index a198470..404c54c 100644
--- a/docs/update-check.html
+++ b/docs/update-check.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Crapfixer Update Check</title>
+    <title>CrapFixer Update Check</title>
     <style>
       :root {
         --bg: #f3f6fd;
@@ -39,6 +39,24 @@
         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);
@@ -46,29 +64,15 @@
         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 {
@@ -85,6 +89,7 @@
         color: white;
         border-radius: 8px;
         transition: background 0.3s ease;
+        text-decoration: none;
       }
 
       .donate a:hover {
@@ -92,7 +97,6 @@
       }
 
       .project-follow {
-        margin-top: 2rem;
         text-align: center;
       }
 
@@ -111,6 +115,29 @@
         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;
@@ -123,24 +150,49 @@
       }
     </style>
   </head>
+
   <body>
-    <h1>🔍 Crapfixer Update Check</h1>
-    <p id="status">Checking version...</p>
+    <h1>🔍 CrapFixer Update Check</h1>
 
-    <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>
+    <!-- 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.0.220";
+      const latestVersion = "1.1.236";
 
       function compareVersions(v1, v2) {
         const a = v1.split(".").map(Number);
@@ -158,13 +210,12 @@
       const status = document.getElementById("status");
 
       if (!userVersion) {
-        status.innerText =
-          "❓ No version found. Please open this page from the Crapfixer app.";
+        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>`;
+          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 {