Add yt-review

docs/update-check.html

@@ -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,26 +150,47 @@
       }
     </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>
+    <!-- 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";