button to close / open / enlarge console
This commit is contained in:
parent
22fd4a481b
commit
68881f008d
|
@ -121,7 +121,7 @@
|
||||||
|
|
||||||
#console {
|
#console {
|
||||||
visibility: hidden;
|
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;
|
color: white;
|
||||||
width: 570px;
|
width: 570px;
|
||||||
height: 480px;
|
height: 480px;
|
||||||
|
@ -130,12 +130,33 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
box-sizing: border-box;
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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>
|
<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="demo">
|
||||||
<div id="description">
|
<div id="description">
|
||||||
|
@ -164,9 +185,35 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="console">
|
<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>
|
<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>
|
<iframe name="aframe" id="aframe" src="_index.p4n.html" width="100%" height="100%"></iframe>
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue