From 220b790d66d62b4b596c0d728cfb2720e1776ab1 Mon Sep 17 00:00:00 2001
From: octospacc <octo@tutamail.com>
Date: Sat, 23 Sep 2023 16:50:18 +0200
Subject: [PATCH] Update home, misc meta updts; FramesBrowser: fix file
 loading, add Eruda

---
 public/FramesBrowser/index.html    | 78 ++++++++++++++++++++++++------
 public/FramesBrowser/manifest.json |  9 ++++
 public/HashyMagnet/index.html      | 35 +++++++-------
 public/index.html                  | 39 ++++++++-------
 4 files changed, 111 insertions(+), 50 deletions(-)
 create mode 100644 public/FramesBrowser/manifest.json
diff --git a/public/FramesBrowser/index.html b/public/FramesBrowser/index.html
index e3118cb..2dfe5bc 100644
--- a/public/FramesBrowser/index.html
+++ b/public/FramesBrowser/index.html
@@ -1,9 +1,16 @@
 <!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>
+		<meta charset="utf-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+		<meta property="og:url" content="https://hub.octt.eu.org/FramesBrowser"/>
+		<link rel="canonical" href="https://hub.octt.eu.org/FramesBrowser"/>
+		<link rel="shortcut icon" type="image/x-icon" href="../favicon.png"/>
+		<link rel="manifest" href="./manifest.json"/>
+		<title>🪟️ Frames Browser (WIP)</title>
+		<meta name="description" content="iFrame-based HTML5 Browser for fun and development"/>
+		<meta property="og:title" content="🪟️ Frames Browser (WIP)"/>
+		<meta property="og:description" content="iFrame-based HTML5 Browser for fun and development"/>
 		<style>
 			:root {
 				--BaseMargin: 8px;
@@ -48,8 +55,6 @@
 				position: absolute;
 				top: 10vh;
 				z-index: 1;
-				max-height: 80vh;
-				overflow: auto;
 				text-align: center;
 			}
 			.BoxPopup.Content {
@@ -57,6 +62,8 @@
 				margin-left: auto;
 				margin-right: auto;
 				width: fit-content;
+				max-height: 80vh;
+				overflow: auto;
 				box-shadow: gray 4px 4px 4px 0px;
 				color: var(--ColorFg);
 				background-color: var(--ColorBg);
@@ -68,22 +75,23 @@
 		<script>
 			var FrameZoomLevels = [50, 200];
 			var AppInfoString = `
-Frames Browser v2023-09-22 (WIP).
+Frames Browser v2023-09-23 (WIP).
 			`.trim();
 		</script>
 	</head>
 	<body>
 		<div id="BoxControls"><table><tr>
 			<td><button onclick="ShowAppInfo()">ℹ️ Info</button></td>
+			<td><button onclick="ToggleDevTools()">📐️ Tools</button></td>
 			<td>
-				<button onclick="this.nextElementSibling.click()">📄 File</button>
+				<button id="BtnFile" onclick="this.nextElementSibling.click()">📄 File</button>
 				<input type="file" hidden="hidden" style="display: none;" onchange="LoadFile(this.files[0])"/>
 			</td>
 			<td><button onclick="ZoomFrame()">🔍️ Zoom</button></td>
 			<td><button onclick="ListFrames()">🪟 Frames</button></td>
-			<td style="width: 100%;"><input type="text" style="min-width: 100%;" hint="🔗️ Enter URI..."/></td>
-			<td><button onclick="LoadFrame()">↩️ Load</button></td>
-			<td><button onclick="ExciseFrame()">↗️ Excise</button></td>
+			<td style="width: 100%;"><input id="InputUri" type="text" style="min-width: 100%;" placeholder="🔗️ Enter URI..." onkeydown="InputHandleKey(event)"/></td>
+			<td><button id="BtnLoad" onclick="LoadFrame()">↩️ Load</button></td>
+			<td><button id="BtnExcise" onclick="ExciseFrame()">↗️ Excise</button></td>
 		<tr></table></div>
 		<noscript><p class="NoScript">
 			This is an actual app, not a badly-made website.
@@ -109,18 +117,42 @@ Frames Browser v2023-09-22 (WIP).
 				return el;
 			};
 
+			function $request(url, opts){
+				if (!opts.method) {
+					opts.method = 'GET';
+				};
+				var req = new XMLHttpRequest();
+				req.onreadystatechange = function(){
+					if (this.readyState == 4) {
+						opts.callback(req.responseText);
+					};
+				};
+				req.open(opts.method, url, true);
+				req.send();
+			};
+
 			function ShowAppInfo(){
 				alert(AppInfoString);
 			};
 
+			function InputHandleKey(ev){
+				// Enter
+				if (ev.keyCode == 13) {
+					LoadFrame();
+				};
+			};
+
 			function ShowFrame(index){
 				ListFramesClose();
 				FrameIndexes = [index];
 				SaveCurrentFrames();
 				document.querySelector('iframe').hidden = false;
 				document.querySelector('iframe').style.display = '';
-				document.querySelector('input[type="text"]').value = CurrentFrames[index];
-				document.querySelector('input[type="text"]').disabled = false;
+				InputUri.disabled = false;
+				InputUri.value = CurrentFrames[index];
+				BtnFile.disabled = false;
+				BtnLoad.disabled = false;
+				BtnExcise.disabled = false;
 				document.querySelector('iframe').src = CurrentFrames[index];
 			};
 
@@ -130,8 +162,11 @@ Frames Browser v2023-09-22 (WIP).
 				SaveCurrentFrames();
 				document.querySelector('iframe').hidden = true;
 				document.querySelector('iframe').style.display = 'none';
-				document.querySelector('input[type="text"]').disabled = true;
-				document.querySelector('input[type="text"]').value = '';
+				InputUri.disabled = true;
+				InputUri.value = '';
+				BtnFile.disabled = true;
+				BtnLoad.disabled = true;
+				BtnExcise.disabled = true;
 				document.querySelector('iframe').src = '';
 			};
 
@@ -182,10 +217,10 @@ Frames Browser v2023-09-22 (WIP).
 			function LoadFile(file){
 				var reader = new FileReader();
 				reader.onload = function(){
-					document.querySelector('input[type="text"]').value = `data:text/html;utf8,${reader.result}`;
+					document.querySelector('input[type="text"]').value = reader.result;
 					LoadFrame();
 				};
-				reader.readAsText(file);
+				reader.readAsDataURL(file);
 			};
 
 			function ZoomFrame(){
@@ -237,6 +272,17 @@ Frames Browser v2023-09-22 (WIP).
 				return exist;
 			};
 
+			function ToggleDevTools(){
+				//var src = 'https://cdn.jsdelivr.net/npm/eruda';
+				//document.write('<scr' + 'ipt src="' + src + '" onload="eruda.init();"></scr' + 'ipt>');
+				//document.write('<scr' + 'ipt>eruda.init()</scr' + 'ipt>');
+				$request('https://cdn.jsdelivr.net/npm/eruda', { callback: function(text){
+					eval(text);
+					eruda.init();
+				} });
+				document.querySelector('button[onclick="ToggleDevTools()"]').disabled = true;
+			};
+
 			function NewBoxPopup(id){
 				var Container = $new('div', { id: id, className: 'BoxPopup Container' });
 				var Content = $new('div', { className: 'BoxPopup Content' });
diff --git a/public/FramesBrowser/manifest.json b/public/FramesBrowser/manifest.json
new file mode 100644
index 0000000..eae7887
--- /dev/null
+++ b/public/FramesBrowser/manifest.json
@@ -0,0 +1,9 @@
+{
+	"short_name": "Frames Browser",
+	"name": "🪟️ Frames Browser (WIP)",
+	"description": "iFrame-based HTML5 Browser for fun and development",
+	"start_url": "https://hub.octt.eu.org/FramesBrowser",
+	"scope": "https://hub.octt.eu.org/FramesBrowser",
+	"display": "standalone",
+	"background_color": "#f0f0f0"
+}
diff --git a/public/HashyMagnet/index.html b/public/HashyMagnet/index.html
index 970e811..27fe399 100644
--- a/public/HashyMagnet/index.html
+++ b/public/HashyMagnet/index.html
@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<title>HashyMagnet</title>
-	<meta name="description" content="Generate full BitTorrent Magnet Links from Info Hashes!">
-	<meta property="og:title" content="HashyMagnet">
-	<meta property="og:description" content="Generate full BitTorrent Magnet Links from Info Hashes!">
-	<meta property="og:url" content="https://hub.octt.eu.org/HashyMagnet">
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link href="Bubbles.css" rel="stylesheet">
-	<link rel="shortcut icon" href="../favicon.png" type="image/x-icon">
-	<link rel="manifest" href="manifest.json">
+	<title>🧲 HashyMagnet</title>
+	<meta name="description" content="Generate full BitTorrent Magnet Links from Info Hashes!"/>
+	<meta property="og:title" content="🧲 HashyMagnet"/>
+	<meta property="og:description" content="Generate full BitTorrent Magnet Links from Info Hashes!"/>
+	<meta property="og:url" content="https://hub.octt.eu.org/HashyMagnet"/>
+	<link rel="canonical" href="https://hub.octt.eu.org/HashyMagnet"/>
+	<meta charset="UTF-8"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+	<link href="Bubbles.css" rel="stylesheet"/>
+	<link rel="shortcut icon" type="image/x-icon" href="../favicon.png"/>
+	<link rel="manifest" href="./manifest.json"/>
 <style>
 Body {
 	Color: #FFFFFF;
@@ -139,9 +140,9 @@ Button:Disabled {
 		</div>
 		<noscript><p class="NoScript">
 			This is an actual app, not a badly-made website.
-			<br>
+			<br/>
 			It needs JavaScript to work, so you need to enable it.
-			<br>
+			<br/>
 			The code is fully open, and you can review it with "View Page Source".
 		</p></noscript>
 		<div id="Info">
@@ -159,7 +160,7 @@ Button:Disabled {
 			</p>
 			<p>
 				Background animations:
-				<br>
+				<br/>
 				<a href="https://codinhood.com/micro/animate-octocat-sprite-css" target="_blank" rel="noopener nofollow">https://codinhood.com/micro/animate-octocat-sprite-css</a></p>
 			<h4>License</h4>
 <pre id="LicenseText">HashyMagnet
@@ -178,10 +179,10 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <a href="https://www.gnu.org/licenses" target="_blank" rel="noopener nofollow">https://www.gnu.org/licenses</a>.
 </pre>
-	<br>
+	<br/>
 		</div>
 	</div></div>
-	<br>
+	<br/>
 	<div class="Section">
 		<div class="NoWrap">
 			<button id="ResetBtn"><big><b>x</b></big></button>
@@ -193,7 +194,7 @@ along with this program. If not, see <a href="https://www.gnu.org/licenses" targ
 			<button id="OpenBtn">🔗 Open</button>
 		</div>
 	</div>
-	<br>
+	<br/>
 	<div class="Section">
 		<div class="NoWrap LeftAlign">
 			<label for="TrackersBtn">Trackers list:</label>
@@ -201,7 +202,7 @@ along with this program. If not, see <a href="https://www.gnu.org/licenses" targ
 		</div>
 		<textarea id="TrackersArea" placeholder="📜 Paste Trackers here..." rows="8" cols="60"></textarea>
 	</div>
-	<br>
+	<br/>
 </div>
 <div class="ocean"><div class="bubble bubble-1"></div><div class="bubble bubble-2"></div><div class="bubble bubble-3"></div><div class="bubble bubble-4"></div><div class="bubble bubble-5"></div><div class="bubble bubble-6"></div><div class="bubble bubble-7"></div><div class="bubble bubble-8"></div><div class="bubble bubble-9"></div><div class="bubble bubble-10"></div><div class="bubble bubble-11"></div></div>
 <script>
diff --git a/public/index.html b/public/index.html
index af8037d..b55abfe 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,38 +11,39 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
 	<script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
-	<link href="Assets/CSS/Dark.css" rel="stylesheet">
-	<script src="Assets/JS/RandomGIF.js"></script>
-	<script src="Assets/JS/CurrentAge.js"></script>
+	<link href="./Assets/CSS/Dark.css" rel="stylesheet">
+	<script src="./Assets/JS/RandomGIF.js"></script>
+	<script src="./Assets/JS/CurrentAge.js"></script>
 </head>
 <body>
 	<div id="ConfettiCanvas"></div>
 	<div class="Content" style="text-align: center;">
 		<div>
-			<h1>OctoSpacc Hub</h1><br><br>
-			<h3>Will this place ever be filled up?</h3>
-			<h5>At the moment, it remains just a simple hub...</h5>
+			<h1>OctoSpacc Hub</h1><br/><br/>
+			<h3>Will this place ever be truly filled up?</h3>
+			<h5>At the moment, it's still kind of an humble hub...</h5>
 		</div>
-		<br><br><br>
+		<br/><br/><br/>
 		<div id="Links"><div>
 			<h4><a href="https://sitoctt.octt.eu.org">[🇮🇹] ✨sitoctt✨</a> (blog/personale)</h4>
 			<h4><a href="https://kb.octt.eu.org">📝 OcttKB</a> (knowledge base)</h4>
-			<h4><del><a href="https://octtspacc.gitlab.io/bachecoctt">🔖️ bachecoctt</a> (my WebPinBoard)</del></h4>
-			<br>
-			<h4><a href="./Ecoji">🦜 Ecoji v1</a> (webapp fork)</h4>
+			<!--<h4><del><a href="https://octtspacc.gitlab.io/bachecoctt">🔖️ bachecoctt</a> (my WebPinBoard)</del></h4>-->
+			<br/>
 			<h4><a href="./HashyMagnet">🧲 BitTorrent Hash to Magnet</a></h4>
-			<br>
+			<h4><a href="./FramesBrowser">🪟️ Frames Browser</a> (WIP)</h4>
+			<h4><a href="./Ecoji">🦜 Ecoji v1</a> (webapp fork)</h4>
+			<br/>
 			<h4><a href="https://octospacc.gitlab.io/FumoPrisms">🔺️ Fumo Prisms (!)</a></h4>
 		</div></div>
-		<br><br><br>
+		<br/><br/><br/>
 		<div id="OcttAgeView">
 			<p id="OcttCurrentAge"></p>
 			<noscript><p>There should be a ticking clock here, but your browser isn't loading the JavaScript.</p></noscript>
-			<br>
+			<br/>
 		</div>
-		<br><br>
+		<br/><br/>
 	</div>
-	<script src="Assets/JS/CurrentAgeRenderIndex.js"></script>
+	<script src="./Assets/JS/CurrentAgeRenderIndex.js"></script>
 	<div class="Footer">
 		<span class="FlexItem FooterLeft">
 			<a href="https://gitlab.com/octospacc/octospacc.gitlab.io">📐 Sources &lt;-</a>
@@ -51,9 +52,13 @@
 		<span class="FlexItem FooterRight">
 			<a rel="me" href="https://gitlab.com/octospacc">-&gt; GitLab 🦊</a>
 			<span>&nbsp;</span>
-			<a rel="me" href="https://mastodon.uno/@octo">-&gt; Mastodon 🐘</a>
+			<a rel="me" href="https://github.com/andrigamerita">-&gt; GitHub 🐙️</a>
 			<span>&nbsp;</span>
-			<a rel="me" href="https://botsin.space/@octtpz">-&gt; pezziposting 🦜</a>
+			<a rel="me" href="https://mastodon.uno/@octo">-&gt; Mastodon 🐘</a>
+			<!--<span>&nbsp;</span>
+			<a rel="me" href="https://botsin.space/@octtpz">-&gt; pezziposting 🦜</a>-->
+			<span>&nbsp;</span>
+			<a href="https://bbs.spacc.eu.org">-&gt; Forum 🏛️</a>
 			<span>&nbsp;</span>
 			<a href="https://spacc-inc.github.io">-&gt; Spacc ⛏️</a>
 		</span>
