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 = + '
Looks like you\'re on a Mac.' + + 'EternalMonitor is Windows-only for now. The good news: macOS already does this ' + + 'for free with Sidecar, ' + + 'which turns your iPad into a second display natively and works well.
' + + ''; + 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); +}