Articulate Storyline Prompt Users to Rotate Screen

var IMAGE_URL  = 'https://cdn-icons-png.flaticon.com/512/7214/7214065.png';
var LABEL_TEXT = 'Rotate Your Screen';
var OVERLAY_ID = 'sl-rotate-overlay';

function createOverlay() {
  if (document.getElementById(OVERLAY_ID)) return;

  var style = document.createElement('style');
  style.innerHTML =
    '@keyframes sl-spin {' +
      '0%  { transform: rotate(0deg);  }' +
      '50% { transform: rotate(90deg); }' +
      '100%{ transform: rotate(90deg); }' +
    '}' +
    '@keyframes sl-pulse {' +
      '0%,100%{ opacity:1;   }' +
      '50%    { opacity:0.5; }' +
    '}';
  document.head.appendChild(style);

  var overlay = document.createElement('div');
  overlay.id = OVERLAY_ID;
  overlay.style.cssText =
    'position:fixed;top:0;left:0;width:100%;height:100%;' +
    'z-index:99999;display:flex;flex-direction:column;' +
    'align-items:center;justify-content:center;gap:24px;' +
    'background:rgba(10,10,20,0.92);' +
    'backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);';

  var img = document.createElement('img');
  img.src = IMAGE_URL;
  img.alt = LABEL_TEXT;
  img.style.cssText =
    'width:110px;height:auto;' +
    'animation:sl-spin 2s ease-in-out infinite;' +
    'transform-origin:center;' +
    'filter:drop-shadow(0 0 16px rgba(255,255,255,0.3));';

  var label = document.createElement('p');
  label.textContent = LABEL_TEXT;
  label.style.cssText =
    'margin:0;color:#fff;' +
    'font-size:22px;font-weight:700;letter-spacing:0.05em;' +
    'font-family:system-ui,sans-serif;text-align:center;' +
    'animation:sl-pulse 2s ease-in-out infinite;';

  overlay.appendChild(img);
  overlay.appendChild(label);
  document.body.appendChild(overlay);
}

function checkOrientation() {
  var overlay = document.getElementById(OVERLAY_ID);
  var isMobile = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);

  if (!isMobile) {
    if (overlay) overlay.style.display = 'none';
    return;
  }

  var isPortrait;
  if (window.screen && window.screen.orientation && window.screen.orientation.type) {
    isPortrait = window.screen.orientation.type.indexOf('portrait') !== -1;
  } else if (typeof window.orientation !== 'undefined') {
    isPortrait = (window.orientation === 0 || window.orientation === 180);
  } else {
    isPortrait = window.innerHeight > window.innerWidth;
  }

  if (isPortrait) {
    createOverlay();
    document.getElementById(OVERLAY_ID).style.display = 'flex';
  } else {
    if (overlay) overlay.style.display = 'none';
  }
}

// Attach listeners only once
if (!window._slRotateListenerAdded) {
  window.addEventListener('orientationchange', checkOrientation);
  window.addEventListener('resize', checkOrientation);
  if (window.screen && window.screen.orientation) {
    window.screen.orientation.addEventListener('change', checkOrientation);
  }
  window._slRotateListenerAdded = true;
}

// Run immediately on trigger fire
checkOrientation();