Widget:Ppplanner06
<!DOCTYPE html> <html> <head>
<title>Interactive Analytica Model</title>
<style>
#container {
position: relative;
cursor: pointer;
width: 790px;
height: 400px;
margin: 0 auto;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#runImage {
width: 100%;
height: 100%;
display: block;
}
.control-button {
position: absolute;
width: 30px;
height: 30px;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
border: none;
cursor: pointer;
}
#maximizeButton {
bottom: 10px;
right: 120px;
background-image: url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png");
display: none;
}
#minimizeButton {
bottom: 10px;
right: 120px;
background-image: url("https://docs.analytica.com/images/8/82/Arrows-minimize.png");
display: none;
}
#interactButton {
position: absolute;
bottom: 10px;
right: 120px;
padding: 5px 10px;
font-size: 16px;
font-weight: bold;
background-color: #e4e4e4;
color: black;
border: none;
border-radius: 5px;
cursor: pointer;
opacity: 0.9;
display: inline-block;
}
</style>
</head> <body>
<img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png">
<button id="maximizeButton" class="control-button" title="Click to use full screen"></button> <button id="minimizeButton" class="control-button" title="Exit full screen"></button> <button id="interactButton">Click to interact with the model in Analytica Cloud Platform</button>
<script>
document.addEventListener('DOMContentLoaded', function () {
let iframeAdded = false;
const container = document.getElementById('container');
const runImage = document.getElementById('runImage');
const maximizeButton = document.getElementById('maximizeButton');
const minimizeButton = document.getElementById('minimizeButton');
const interactButton = document.getElementById('interactButton');
function showIframe() {
runImage.style.display = 'none';
interactButton.style.display = 'none';
if (!iframeAdded) {
const iframe = document.createElement('iframe');
iframe.src = 'https://acp.analytica.com/view?invite=4771&code=2359748081441958275';
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 'none';
container.appendChild(iframe);
iframeAdded = true;
maximizeButton.style.display = 'inline-block';
maximizeButton.style.background-image: url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png");
}
}
function maximizeIframe() {
if (container.requestFullscreen) {
container.requestFullscreen();
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen();
} else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
}
maximizeButton.style.display = 'none';
minimizeButton.style.display = 'inline-block';
}
function minimizeIframe() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
maximizeButton.style.display = 'inline-block';
minimizeButton.style.display = 'none';
}
interactButton.addEventListener('click', function (event) {
event.stopPropagation();
showIframe();
});
maximizeButton.addEventListener('click', function (event) {
event.stopPropagation();
maximizeIframe();
});
minimizeButton.addEventListener('click', function (event) {
event.stopPropagation();
minimizeIframe();
});
container.addEventListener('click', showIframe);
});
</script>
</body> </html>