updated HashyMagnet
This commit is contained in:
parent
d4f0e69642
commit
05c2ee7351
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
Width: Calc(100% - 8px);
|
||||
Input, Button {
|
||||
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>
|
||||
<p>(Sorry!)</p>
|
||||
<hr>
|
||||
|
||||
<input id="TextBox" placeholder="Paste Hash here...">
|
||||
<button id="GenerateBtn">Generate!</button>
|
||||
<!--
|
||||
<button id="CopyBtn">Copy link</button>
|
||||
<button id="OpenBtn">Open link</button>
|
||||
<textarea id="MoreTrackers" rows="8" cols="60"></textarea>
|
||||
-->
|
||||
<div id="Main">
|
||||
<div class="Section">
|
||||
<h3>HashyMagnet</h3>
|
||||
<p>Generate a full Bit<span style="Color:#AAFFFF;">Torrent</span> Magnet Link from an Info Hash!</p>
|
||||
<noscript><p>
|
||||
This is an actual app, not a badly-made website.
|
||||
<br>
|
||||
It needs JavaScript, so you need to enable it.
|
||||
<br>
|
||||
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 FetchItem(Item) {
|
||||
let Response = await fetch(Item);
|
||||
let Data = await Response.text();
|
||||
return Data;
|
||||
}
|
||||
*/
|
||||
|
||||
function FetchTrackers() {
|
||||
async function FetchTrackers() {
|
||||
for (let i = 0; i < TrackersSources.length; i++) {
|
||||
let Req = fetch(TrackersSources[i]);
|
||||
Req.then(Res => Res.text()).then(Data => {
|
||||
Trackers = Trackers.concat(Data.replaceAll("\n\n","\n").split("\n"))});
|
||||
let Req = await fetch(TrackersSources[i]);
|
||||
let Data = await Req.text();
|
||||
Trackers = Trackers.concat(Data.replaceAll("\n\n","\n").split("\n"));
|
||||
}
|
||||
Trackers.slice(0,TrackersNum);
|
||||
Trackers = Trackers.slice(0,TrackersNum);
|
||||
}
|
||||
|
||||
function DoGenerate() {
|
||||
let TextBox = document.getElementById("TextBox");
|
||||
function WriteTrackers() {
|
||||
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]);
|
||||
}
|
||||
}
|
||||
GenerateBtn.onclick = DoGenerate;
|
||||
Generated = true;
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue