Widget:Ppplanner05

 <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 100%; height: auto; display: block;">

<script> document.addEventListener('DOMContentLoaded', function () {

 let iframeAdded = false;
 const container = document.getElementById('container');
 const runImage = document.getElementById('runImage');

 function showIframe() {
   runImage.style.display = 'none';
   if (interactButton) {
     interactButton.style.display = 'none';
   }

   if (!iframeAdded) {
     const iframe = document.createElement('iframe');
     iframe.src = 'https://acp.analytica.com/view0?invite=4711&code=3885603542485212689';
     iframe.style.width = '100%';
     iframe.style.height = '400px'; // Match the height proportionally for 790px width
     iframe.style.border = 'none';

     container.appendChild(iframe);
     iframeAdded = true;

     const maximizeButton = document.createElement('button');
     maximizeButton.style.position = 'absolute';
     maximizeButton.style.bottom = '10px';
     maximizeButton.style.right = '100px';
     maximizeButton.style.width = '30px';
     maximizeButton.style.height = '30px';
     maximizeButton.style.backgroundImage = 'url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png")';
     maximizeButton.style.backgroundSize = 'contain';
     maximizeButton.style.backgroundRepeat = 'no-repeat';
     maximizeButton.style.backgroundColor = 'transparent';
     maximizeButton.style.border = 'none';
     maximizeButton.style.cursor = 'pointer';
     maximizeButton.title = 'Click to use full screen';

     maximizeButton.addEventListener('click', function () {
       if (container.requestFullscreen) {
         container.requestFullscreen();
       } else if (container.webkitRequestFullscreen) { container.webkitRequestFullscreen(); }
       else if (container.msRequestFullscreen) { container.msRequestFullscreen(); }

       iframe.style.width = '100%';
       iframe.style.height = '100%';
       maximizeButton.style.display = 'none';
       minimizeButton.style.display = 'inline-block';
     });

     const minimizeButton = document.createElement('button');
     minimizeButton.style.position = 'absolute';
     minimizeButton.style.bottom = '8px';
     minimizeButton.style.right = '120px';
     minimizeButton.style.width = '30px';
     minimizeButton.style.height = '30px';
     minimizeButton.style.backgroundImage = 'url("https://docs.analytica.com/images/8/82/Arrows-minimize.png")';
     minimizeButton.style.backgroundSize = 'contain';
     minimizeButton.style.backgroundRepeat = 'no-repeat';
     minimizeButton.style.backgroundColor = 'transparent';
     minimizeButton.style.border = 'none';
     minimizeButton.style.cursor = 'pointer';
     minimizeButton.title = 'Exit full screen';
     minimizeButton.style.display = 'none';

     minimizeButton.addEventListener('click', function () {
       if (document.exitFullscreen) {
         document.exitFullscreen();
       } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
       else if (document.msExitFullscreen) { document.msExitFullscreen(); }

       iframe.style.width = '100%';
       iframe.style.height = '400px';
       minimizeButton.style.display = 'none';
       maximizeButton.style.display = 'inline-block';
     });

     container.appendChild(maximizeButton);
     container.appendChild(minimizeButton);
   }
 }

 const interactButton = document.createElement('button');
 interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";
 interactButton.style.position = 'absolute';
 interactButton.style.bottom = '10px';
 interactButton.style.right = '10px';
 interactButton.style.padding = '10px 20px';
 interactButton.style.fontSize = '14px';
 interactButton.style.fontWeight = 'bold';
 interactButton.style.backgroundColor = '#d3d3d3';
 interactButton.style.color = 'black';
 interactButton.style.border = 'none';
 interactButton.style.borderRadius = '5px';
 interactButton.style.cursor = 'pointer';
 interactButton.style.opacity = '0.9';

 interactButton.addEventListener('click', function (event) {
   event.stopPropagation();
   showIframe();
 });

 container.appendChild(interactButton);
 container.addEventListener('click', showIframe);

}); </script>