Widget:Ppplanner05

 <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 801px; height: 406px;">

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

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

 function showIframe() {
   // Hide the initial image
   runImage.style.display = 'none';

   if (!iframeAdded) {
     // Create and configure the iframe
     const iframe = document.createElement('iframe');
     iframe.src = 'https://acp.analytica.com/view0?invite=4711&code=3885603542485212689';
     iframe.style.width = '801px';
     iframe.style.height = '406px';
     iframe.style.border = 'none';

     // Append the iframe to the container
     container.appendChild(iframe);
     iframeAdded = true;

     // Create maximize button
     const maximizeButton = document.createElement('button');
     maximizeButton.textContent = 'Maximize';
     maximizeButton.style.position = 'absolute';
     maximizeButton.style.bottom = '7px';
     maximizeButton.style.right = '90px';

     // Create minimize button, initially hidden
     const minimizeButton = document.createElement('button');
     minimizeButton.background-image: url('https://docs.analytica.com/index.php/File:Arrows-minimize.png');      
     minimizeButton.style.position = 'absolute';
     minimizeButton.style.bottom = '5px';
     minimizeButton.style.right = '110px';
     minimizeButton.style.display = 'none';
     minimimizeButton.title="Exit full screen
     minimimizeButton.background-size: contain;
     minimimizeButton.width: 30px;
     minimimizeButton.height: 30px;
     minimimizeButton.background-repeat: no-repeat;
     minimimizeButton.background-color: transparent;
     minimimizeButton.border: none;
     minimimizeButton.cursor: pointer;
     minimimizeButton.font-size: 0; /* Hide text */
     minimimizeButton.transition: background-color 0.3s;">

     // Add click event for maximize button to enter fullscreen mode
     maximizeButton.addEventListener('click', function () {
       // Request fullscreen for the container
       if (container.requestFullscreen) {
         container.requestFullscreen();
       } else if (container.webkitRequestFullscreen) { /* Safari */
         container.webkitRequestFullscreen();
       } else if (container.msRequestFullscreen) { /* IE11 */
         container.msRequestFullscreen();
       }

       // Adjust iframe to fill the container
       iframe.style.width = '100%';
       iframe.style.height = '100%';

       maximizeButton.style.display = 'none';
       minimizeButton.style.display = 'inline-block';
     });

     // Add click event for minimize button to exit fullscreen mode
     minimizeButton.addEventListener('click', function () {
       if (document.exitFullscreen) {
         document.exitFullscreen();
       } else if (document.webkitExitFullscreen) { /* Safari */
         document.webkitExitFullscreen();
       } else if (document.msExitFullscreen) { /* IE11 */
         document.msExitFullscreen();
       }

       // Restore iframe dimensions when exiting fullscreen
       iframe.style.width = '801px';
       iframe.style.height = '406px';

       minimizeButton.style.display = 'none';
       maximizeButton.style.display = 'inline-block';
     });

     // Append buttons to the container
     container.appendChild(maximizeButton);
     container.appendChild(minimizeButton);
   }
 }

 // Add click event listener to the image container
 container.addEventListener('click', showIframe);

}); </script>