From f49bea9fa3eabb21496c7deee4338d0546b8f48b Mon Sep 17 00:00:00 2001
From: octospacc <octo@tutamail.com>
Date: Thu, 21 Sep 2023 17:29:40 +0200
Subject: [PATCH] Add FramesBrowser WIP

---
 public/FramesBrowser/index.html | 83 +++++++++++++++++++++++++++++++++
 public/HashyMagnet/index.html   |  4 +-
 2 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 public/FramesBrowser/index.html
diff --git a/public/FramesBrowser/index.html b/public/FramesBrowser/index.html
new file mode 100644
index 0000000..333519d
--- /dev/null
+++ b/public/FramesBrowser/index.html
@@ -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>
diff --git a/public/HashyMagnet/index.html b/public/HashyMagnet/index.html
index 85e104d..970e811 100644
--- a/public/HashyMagnet/index.html
+++ b/public/HashyMagnet/index.html
@@ -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.
