Add FramesBrowser WIP

This commit is contained in:
2023-09-21 17:29:40 +02:00
parent 1bd58d83de
commit f49bea9fa3
2 changed files with 85 additions and 2 deletions

View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frames Browser (WIP)</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0px;
overflow: hidden;
}
iframe {
border: none;
width: 100vw;
height: calc(100vh - 32px);
position: relative;
}
#BoxControls table, #BoxControls td > * {
height: 32px;
border-spacing: 0;
}
</style>
<script>
var FrameZoomLevels = [50, 200];
var AppInfoString = `
Frames Browser v2023-09-21 (WIP).
`.trim();
</script>
</head>
<body>
<div id="BoxControls"><table><tr>
<td><button onclick="ShowAppInfo()"> Info</button></td>
<td><button onclick="ZoomFrame()">🔍️ Zoom</button></td>
<td style="width: 100%;"><input style="width: 100%;"/></td>
<td><button onclick="LoadFrame()">↩️ Load</button></td>
<tr></table></div>
<div><iframe></iframe></div>
<script>
var FrameZoomIndex = -1;
function ShowAppInfo(){
alert(AppInfoString);
};
function LoadFrame(){
var url = document.querySelector('input').value;
localStorage.setItem('FramesBrowser.url', url);
document.querySelector('iframe').src = url;
};
function ZoomFrame(){
if (FrameZoomIndex == FrameZoomLevels.length - 1) {
FrameZoomIndex = -1;
} else {
FrameZoomIndex ++;
};
var level = FrameZoomLevels[FrameZoomIndex];
var levelopp = FrameZoomLevels[FrameZoomLevels.length - 1 - FrameZoomIndex];
var stylepos = (level < 100
? `right: ${level}vw; bottom: calc(${level}vh - 16px);`
: `left: ${levelopp/2}vw; top: calc(${levelopp/2}vh - 8px);`
);
document.querySelector('iframe').style = (FrameZoomIndex == -1
? ''
: `scale: ${level/100}; width: ${levelopp}vw; height: calc(${levelopp}vh - ${32 * (levelopp / 100)}px); ${stylepos}`
);
//switch (FrameZoom) {
// case 100: FrameZoom = 200; break;
// case 200: FrameZoom = 50; break;
// case 50: FrameZoom = 100; break;
//};
//document.querySelector('iframe').style = `scale: ${FrameZoom/100}; width: ${FrameZoom}vw; height: ${FrameZoom}vh; left: ${''}; top: ${''};`;
};
onload = function(){
document.querySelector('input').value = localStorage.getItem('FramesBrowser.url');
};
</script>
</body>
</html>

View File

@@ -36,7 +36,7 @@ A:Hover {
Color: #E9FFEE;
}
NoScript, NoScript P {
NoScript, NoScript P, .NoScript {
Font-Size: XX-Large;
}
@@ -137,7 +137,7 @@ Button:Disabled {
<h3>HashyMagnet</h3>
<p>Generate a full Bit<span style="Color:#AAFFFF;">Torrent</span> Magnet Link from an Info Hash...</p>
</div>
<noscript><p>
<noscript><p class="NoScript">
This is an actual app, not a badly-made website.
<br>
It needs JavaScript to work, so you need to enable it.