updated HashyMagnet

public/Ecoji/index.html

@@ -9,6 +9,7 @@
 	Changes in this Web build (directly edited from the gh-pages branch):
 	| Simplified the CSS, 
 	| handling decode URIs with "#d=" instead of "?d=",
+	| // TODO: autoremove whitespace in decode box,
 	| added JavaScript notice,
 	| made the app a self-contained AHTML bundle and added notice.
 

public/HashyMagnet/Bubbles.css

@@ -0,0 +1,206 @@
+/*
+	Credits:
+	| https://codinhood.com/micro/animate-octocat-sprite-css
+	| https://codepen.io/codypearce/pen/VwYOGzq
+*/
+
+@keyframes animateSprite {
+	0% {
+		background-position: -600px; /* Starting position moving left sprite */
+	}
+	20% {
+		background-position: 0px; /* Straight on sprite */
+	}
+	25% {
+		background-position: -200px; /* Moving up sprite */
+	}
+	35% {
+		background-position: -400px; /* Moving right sprite */
+	}
+	40% {
+		background-position: -400px;
+	}
+	50% {
+		background-position: -200px;	/* Moving up sprite */
+	}
+	60% {
+		background-position: -0px; /* Straight on sprite */
+	}
+	67% {
+		background-position: -600px; /* Moving up sprite */
+	}
+
+	100% {
+		background-position: -600px;
+	}
+}
+
+@keyframes swim {
+	0% {
+		transform: translate(0, 0); /* Starting position */
+	}
+	20% {
+		transform: translate(calc(-50vw - 100px), 0); /* Animate to center of screen */
+	}
+	25% {
+		transform: translate(calc(-50vw - 100px), 0); /* Stay at the center for 1 second */
+	}
+	35% {
+		transform: translate(calc(-50vw - 100px), -20vh); /* Animate up for 2 seconds */
+	}
+	50% {
+		transform: translate(-25vw, 15vh); /* Animate bottom right for 3 seconds */
+	}
+	60% {
+		transform: translate(-25vw, -20vh); /* Animate up at right of the screen */
+	}
+	67% {
+		transform: translate(-25vw, -20vh);
+	}
+
+	100% {
+		transform: translate(calc(-100vw - 300px), 0); /* Animate past left past the screen */
+	}
+}
+
+.ocean {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: -1;
+	width: 100vw;
+	height: 100vh;
+	background-image: linear-gradient(0deg, #182848, #2980b9)
+}
+
+.bubble {
+	width: 30px;
+	height: 30px;
+	border-radius: 100%;
+	position: absolute;
+	background-color: white;
+	bottom: -30px;
+	opacity: 0.2;
+	animation: bubble 15s ease-in-out infinite,
+		sideWays 4s ease-in-out infinite alternate;
+}
+
+@keyframes bubble {
+	0% {
+		transform: translateY(0%);
+		opacity: 0.06;
+	}
+	100% {
+		transform: translateY(-120vh);
+	}
+}
+
+@keyframes sideWays {
+	0% {
+		margin-left: 0px;
+	}
+	100% {
+		margin-left: 200px;
+	}
+}
+
+.bubble-1 {
+	left: 10%;
+	animation-delay: 0.5s;
+	animation-duration: 16s;
+	opacity: 0.2;
+}
+
+.bubble-2 {
+	width: 15px;
+	height: 15px;
+	left: 40%;
+	animation-delay: 1s;
+	animation-duration: 10s;
+	opacity: 0.1;
+}
+
+.bubble-3 {
+	width: 10px;
+	height: 10px;
+	left: 30%;
+	animation-delay: 5s;
+	animation-duration: 20s;
+	opacity: 0.3;
+}
+
+.bubble-4 {
+	width: 25px;
+	height: 25px;
+	left: 40%;
+	animation-delay: 8s;
+	animation-duration: 17s;
+	opacity: 0.2;
+}
+
+.bubble-5 {
+	width: 30px;
+	height: 30px;
+	left: 60%;
+	animation-delay: 10s;
+	animation-duration: 15s;
+	opacity: 0.1;
+}
+
+.bubble-6 {
+	width: 10px;
+	height: 10px;
+	left: 80%;
+	animation-delay: 3s;
+	animation-duration: 30s;
+	opacity: 0.4;
+}
+
+.bubble-7 {
+	width: 15px;
+	height: 15px;
+	left: 90%;
+	animation-delay: -7s;
+	animation-duration: 25s;
+	opacity: 0.3;
+}
+
+.bubble-9 {
+	width: 20px;
+	height: 20px;
+	left: 50%;
+	bottom: 30px;
+	animation-delay: -5s;
+	animation-duration: 19s;
+	opacity: 0.2;
+}
+
+.bubble-10 {
+	width: 40px;
+	height: 40px;
+	left: 30%;
+	bottom: 30px;
+	animation-delay: -21s;
+	animation-duration: 16s;
+	opacity: 0.3;
+}
+
+.bubble-11 {
+	width: 30px;
+	height: 30px;
+	left: 60%;
+	bottom: 30px;
+	animation-delay: -13.75s;
+	animation-duration: 20s;
+	opacity: 0.3;
+}
+
+.bubble-11 {
+	width: 25px;
+	height: 25px;
+	left: 90%;
+	bottom: 30px;
+	animation-delay: -10.5s;
+	animation-duration: 19s;
+	opacity: 0.3;
+}

public/HashyMagnet/index.html

@@ -8,64 +8,173 @@
 	<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">
 	<style>
 Body {
+	Color: #FFFFFF;
+	Background-Color: #254070;
 	Margin: 0px;
 	Padding: 16px;
+	Overflow: Hidden;
+	Text-Align: Center;
+	Font-Family: Sans-Serif;
 }
-#TextBox {
+Input, Button {
-	Width: Calc(100% - 8px);
+	Height: 2em;
+	Font-Size: Initial;
+}
+Input, TextArea {
+	Width: Calc(90% - 8px);
+	Margin-Top: 8px;
+	Margin-Bottom: 8px;
+}
+#Main {
+	Overflow-Y: Scroll;
+	Max-Height: 100vh;
+	Position: Absolute;
+	Top: 50%;
+	Transform: TranslateY(-50%);
+	Left: 0px;
+	Right: 0px;
+	Z-Index: 4;
+}
+.Section {
+	Margin: 4px;
+}
+.NoWrap {
+	White-Space: NoWrap;
 }
 	</style>
 </head>
 <body>
-	<h4>Still under construction ¯\_(ツ)_/¯</h4>
+<div id="Main">
-	<p>(Sorry!)</p>
+	<div class="Section">
-	<hr>
+		<h3>HashyMagnet</h3>
-
+		<p>Generate a full Bit<span style="Color:#AAFFFF;">Torrent</span> Magnet Link from an Info Hash!</p>
-	<input id="TextBox" placeholder="Paste Hash here...">
+		<noscript><p>
-	<button id="GenerateBtn">Generate!</button>
+			This is an actual app, not a badly-made website.
-	<!--
+			<br>
-	<button id="CopyBtn">Copy link</button>
+			It needs JavaScript, so you need to enable it.
-	<button id="OpenBtn">Open link</button>
+			<br>
-	<textarea id="MoreTrackers" rows="8" cols="60"></textarea>
+			The code is fully open, and you can review it with "View Page Source".
-	-->
+		</p></noscript>
+	</div>
+	<br>
+	<div class="Section">
+		<div class="NoWrap">
+			<button id="ResetBtn">❌</button>
+			<input id="TextBox" placeholder="📝 Paste Info Hash here...">
+		</div>
+		<div class="NoWrap">
+			<button id="GenerateBtn">Generate Magnet!</button>
+			<button id="CopyBtn">Copy link</button>
+			<button id="OpenBtn">Open link</button>
+		</div>
+	</div>
+	<br>
+	<div class="Section">
+		<div class="NoWrap">
+			<label for="TrackersBtn">Trackers list:</label>
+			<button id="TrackersBtn"></button>
+		</div>
+		<textarea id="TrackersArea" placeholder="📜 Paste Trackers here..." rows="8" cols="60"></textarea>
+	</div>
+	<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>
+var Generated = false;
 var Trackers = [];
 var TrackersNum = 35;
 const TrackersSources = [
-	"https://newtrackon.com/api/stable",
 	"https://ngosang.github.io/trackerslist/trackers_best.txt",
+	"https://newtrackon.com/api/stable",
 ];
 
-/*
+async function FetchTrackers() {
-async function FetchItem(Item) {
-	let Response = await fetch(Item);
-	let Data = await Response.text();
-	return Data;
-}
-*/
-
-function FetchTrackers() {
 	for (let i = 0; i < TrackersSources.length; i++) {
-		let Req = fetch(TrackersSources[i]);
+		let Req = await fetch(TrackersSources[i]);
-		Req.then(Res => Res.text()).then(Data => {
+		let Data = await Req.text();
-			Trackers = Trackers.concat(Data.replaceAll("\n\n","\n").split("\n"))});
+		Trackers = Trackers.concat(Data.replaceAll("\n\n","\n").split("\n"));
 	}
-	Trackers.slice(0,TrackersNum);
+	Trackers = Trackers.slice(0,TrackersNum);
 }
 
-function DoGenerate() {
+function WriteTrackers() {
-	let TextBox = document.getElementById("TextBox");
+	for (let i = 0; i < Trackers.length; i++) {
+		TrackersArea.value += Trackers[i] + "\n\n";
+	}
+	DoRedraw();
+}
+
+function StoreTrackers() {
+}
+
+async function FetchWriteTrackers() {
+	await FetchTrackers();
+	WriteTrackers();
+}
+
+GenerateBtn.onclick = function() {
 	TextBox.value = "magnet:?xt=urn:btih:" + TextBox.value;
 	for (let i = 0; i < Trackers.length; i++) {
 		TextBox.value += "&tr=" + encodeURIComponent(Trackers[i]);
 	}
-}
+	Generated = true;
-GenerateBtn.onclick = DoGenerate;
+	DoRedraw();
+};
 
-FetchTrackers();
+function DoRedraw() {
+	if (Generated) {
+		GenerateBtn.hidden = true;
+		ResetBtn.hidden = false;
+		
+		CopyBtn.hidden = false;
+		OpenBtn.hidden = false;
+	} else {
+		GenerateBtn.hidden = false;
+		ResetBtn.hidden = true;
+		
+		CopyBtn.hidden = true;
+		OpenBtn.hidden = true;
+	}
+	if (TrackersArea.value) {
+		TrackersBtn.textContent = "🧹 Clear";
+	} else {
+		TrackersBtn.textContent = "🔄 Refresh";
+	}
+}
+
+ResetBtn.onclick = function() {
+	TextBox.value = "";
+	Generated = false;
+	DoRedraw();
+};
+
+CopyBtn.onclick = function() {
+	navigator.clipboard.writeText(TextBox.value);
+};
+
+OpenBtn.onclick = function() {
+	window.open(TextBox.value);
+};
+
+TrackersBtn.onclick = function() {
+	if (TrackersArea.value) {
+		TrackersArea.value = "";
+	} else {
+		WriteTrackers();
+	}
+	DoRedraw();
+};
+
+TrackersArea.onchange = StoreTrackers;
+
+DoRedraw();
+FetchWriteTrackers();
+TrackersBtn.hidden = true;
 	</script>
 </body>
 </html>