STI/Astroport.ONE
STI
/
Astroport.ONE
4
1
Fork 2
Code Issues 11 Pull Requests Projects Releases 1 Wiki Activity

button to close / open / enlarge console

This commit is contained in:
fred 2023-12-05 15:13:52 +01:00
parent 22fd4a481b
commit 68881f008d
1 changed files with 49 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
templates/UPlanetSector/index.html
View File

@ -121,7 +121,7 @@
#console {
visibility: hidden;
background: rgba(0, 0, 0, 0.9); /* Adjust the background color and opacity as needed */
background: rgba(0, 0, 0, 0.9);
color: white;
width: 570px;
height: 480px;
@ -130,12 +130,33 @@
left: 0;
padding: 5px;
box-sizing: border-box;
z-index: 1000; /* Ensure the console appears above other elements */
}
#toggleConsoleButton {
position: fixed;
top: 10px;
left: 10px;
cursor: pointer;
}
#fullscreenButton {
position: fixed;
top: 10px;
left: 70px;
cursor: pointer;
}
iframe {
display: block;
}
</style>
</head>
<body>
<button id="toggleConsoleButton" onclick="toggleConsole()">(-/+)</button>
<button style="position: fixed; top: 10px; left: 10px;" onclick="document.getElementById('console').style.visibility = (document.getElementById('console').style.visibility === 'visible' ? 'hidden' : 'visible');">(-/+)</button>
<div id="demo">
<div id="description">
@ -164,9 +185,35 @@
</div>
<div id="console">
<a href="_index.p4n.html" target="aframe">O</a> __ <a href="/ipns/_ZONENS_/TW" target="aframe">TW _ZONE_ </a> __ <a href="/ipns/_UPZONENS_/TW" target="aframe">TW _UPZONE_ </a>
<button onclick="document.getElementById('console').style.visibility = 'hidden';"> X </button>
<button onclick="hideConsole()"> X </button><button id="fullscreenButton" onclick="toggleConsoleFullScreen()">^^</button>
<iframe name="aframe" id="aframe" src="_index.p4n.html" width="100%" height="100%"></iframe>
</div>
<script>
function toggleConsole() {
const console = document.getElementById('console');
console.style.visibility = (console.style.visibility === 'visible' ? 'hidden' : 'visible');
}
function hideConsole() {
document.getElementById('console').style.visibility = 'hidden';
}
function toggleConsoleFullScreen() {
const console = document.getElementById('console');
if (console.style.width === '100%' && console.style.height === '100%') {
console.style.width = '570px';
console.style.height = '480px';
} else {
console.style.width = '100%';
console.style.height = '100%';
}
}
</script>
</body>
</html>