From d2c943e4929ec5358cedcfb2a73042fe1954b9f0 Mon Sep 17 00:00:00 2001
From: whoisaldo <whois.younes@gmail.com>
Date: Thu, 27 Aug 2026 14:27:19 -0400
Subject: [PATCH] Site: point Mac visitors at Sidecar instead of a dead end

EternalMonitor is Windows-only, but nothing on the site said so above the
fold, so Mac visitors had to read the subtitle or hit the download page to
find out. Show them a dismissible notice naming the free native option that
already solves their problem.

Detection requires platform "Mac" AND maxTouchPoints <= 1: iPadOS reports
"MacIntel" as its platform, and iPad users are the audience, not the ones to
turn away.

Dismissal is stored in sessionStorage, so it does not nag while browsing but
returns on a fresh visit.
---
 docs/script.js | 19 +++++++++++++++++
 docs/style.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+)

diff --git a/docs/script.js b/docs/script.js
index 70c43c4..99d5def 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -3,6 +3,25 @@
 (function () {
   'use strict';
 
+  /* --- macOS Notice --- */
+  // iPadOS reports platform 'MacIntel' too, so require a non-touch device.
+  var isMac = /Mac/.test(navigator.platform) && navigator.maxTouchPoints <= 1;
+  if (isMac && sessionStorage.getItem('mac-notice-dismissed') !== '1') {
+    var notice = document.createElement('div');
+    notice.className = 'mac-notice';
+    notice.innerHTML =
+      '<p><strong>Looks like you\'re on a Mac.</strong>' +
+      'EternalMonitor is Windows-only for now. The good news: macOS already does this ' +
+      'for free with <a href="https://support.apple.com/en-us/102386" target="_blank" rel="noopener">Sidecar</a>, ' +
+      'which turns your iPad into a second display natively and works well.</p>' +
+      '<button type="button" class="mac-notice-close" aria-label="Dismiss">&times;</button>';
+    notice.querySelector('.mac-notice-close').addEventListener('click', function () {
+      sessionStorage.setItem('mac-notice-dismissed', '1');
+      notice.remove();
+    });
+    document.body.appendChild(notice);
+  }
+
   /* --- Scroll Reveal (IntersectionObserver) --- */
   var reveals = document.querySelectorAll('.reveal');
   if (reveals.length && 'IntersectionObserver' in window) {
diff --git a/docs/style.css b/docs/style.css
index 4436d96..842a71e 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -986,3 +986,58 @@ section {
     padding: 120px 0;
   }
 }
+
+/* --- macOS Notice Bar --- */
+.mac-notice {
+  position: fixed;
+  left: 16px;
+  right: 16px;
+  bottom: 16px;
+  z-index: 200;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 24px 28px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+}
+
+.mac-notice p {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+.mac-notice strong {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--text);
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.15rem;
+}
+
+.mac-notice a {
+  color: var(--accent);
+}
+
+.mac-notice-close {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 4px 8px;
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 1.1rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.mac-notice-close:hover {
+  color: var(--text);
+}