octospacc
/
OctoSpaccHub
mirror of https://gitlab.com/octospacc/octospacc.gitlab.io
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update home, misc meta updts; FramesBrowser: fix file loading, add Eruda

This commit is contained in:
octospacc 2023-09-23 16:50:18 +02:00
parent 4d740b1627
commit 220b790d66
4 changed files with 111 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
public/FramesBrowser/index.html
View File

@ -1,9 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Frames Browser (WIP)</title> <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> <style>
:root { :root {
--BaseMargin: 8px; --BaseMargin: 8px;
@ -48,8 +55,6 @@
position: absolute; position: absolute;
top: 10vh; top: 10vh;
z-index: 1; z-index: 1;
max-height: 80vh;
overflow: auto;
text-align: center; text-align: center;
} }
.BoxPopup.Content { .BoxPopup.Content {
@ -57,6 +62,8 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: fit-content; width: fit-content;
max-height: 80vh;
overflow: auto;
box-shadow: gray 4px 4px 4px 0px; box-shadow: gray 4px 4px 4px 0px;
color: var(--ColorFg); color: var(--ColorFg);
background-color: var(--ColorBg); background-color: var(--ColorBg);
@ -68,22 +75,23 @@
<script> <script>
var FrameZoomLevels = [50, 200]; var FrameZoomLevels = [50, 200];
var AppInfoString = ` var AppInfoString = `
Frames Browser v2023-09-22 (WIP). Frames Browser v2023-09-23 (WIP).
`.trim(); `.trim();
</script> </script>
</head> </head>
<body> <body>
<div id="BoxControls"><table><tr> <div id="BoxControls"><table><tr>
<td><button onclick="ShowAppInfo()">ℹ️ Info</button></td> <td><button onclick="ShowAppInfo()">ℹ️ Info</button></td>
<td><button onclick="ToggleDevTools()">📐️ Tools</button></td>
<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])"/> <input type="file" hidden="hidden" style="display: none;" onchange="LoadFile(this.files[0])"/>
</td> </td>
<td><button onclick="ZoomFrame()">🔍️ Zoom</button></td> <td><button onclick="ZoomFrame()">🔍️ Zoom</button></td>
<td><button onclick="ListFrames()">🪟 Frames</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 style="width: 100%;"><input id="InputUri" type="text" style="min-width: 100%;" placeholder="🔗️ Enter URI..." onkeydown="InputHandleKey(event)"/></td>
<td><button onclick="LoadFrame()">↩️ Load</button></td> <td><button id="BtnLoad" onclick="LoadFrame()">↩️ Load</button></td>
<td><button onclick="ExciseFrame()">↗️ Excise</button></td> <td><button id="BtnExcise" onclick="ExciseFrame()">↗️ Excise</button></td>
<tr></table></div> <tr></table></div>
<noscript><p class="NoScript"> <noscript><p class="NoScript">
This is an actual app, not a badly-made website. This is an actual app, not a badly-made website.
@ -109,18 +117,42 @@ Frames Browser v2023-09-22 (WIP).
return el; 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(){ function ShowAppInfo(){
alert(AppInfoString); alert(AppInfoString);
}; };
function InputHandleKey(ev){
// Enter
if (ev.keyCode == 13) {
LoadFrame();
};
};
function ShowFrame(index){ function ShowFrame(index){
ListFramesClose(); ListFramesClose();
FrameIndexes = [index]; FrameIndexes = [index];
SaveCurrentFrames(); SaveCurrentFrames();
document.querySelector('iframe').hidden = false; document.querySelector('iframe').hidden = false;
document.querySelector('iframe').style.display = ''; document.querySelector('iframe').style.display = '';
document.querySelector('input[type="text"]').value = CurrentFrames[index]; InputUri.disabled = false;
document.querySelector('input[type="text"]').disabled = false; InputUri.value = CurrentFrames[index];
BtnFile.disabled = false;
BtnLoad.disabled = false;
BtnExcise.disabled = false;
document.querySelector('iframe').src = CurrentFrames[index]; document.querySelector('iframe').src = CurrentFrames[index];
}; };
@ -130,8 +162,11 @@ Frames Browser v2023-09-22 (WIP).
SaveCurrentFrames(); SaveCurrentFrames();
document.querySelector('iframe').hidden = true; document.querySelector('iframe').hidden = true;
document.querySelector('iframe').style.display = 'none'; document.querySelector('iframe').style.display = 'none';
document.querySelector('input[type="text"]').disabled = true; InputUri.disabled = true;
document.querySelector('input[type="text"]').value = ''; InputUri.value = '';
BtnFile.disabled = true;
BtnLoad.disabled = true;
BtnExcise.disabled = true;
document.querySelector('iframe').src = ''; document.querySelector('iframe').src = '';
}; };
@ -182,10 +217,10 @@ Frames Browser v2023-09-22 (WIP).
function LoadFile(file){ function LoadFile(file){
var reader = new FileReader(); var reader = new FileReader();
reader.onload = function(){ reader.onload = function(){
document.querySelector('input[type="text"]').value = `data:text/html;utf8,${reader.result}`; document.querySelector('input[type="text"]').value = reader.result;
LoadFrame(); LoadFrame();
}; };
reader.readAsText(file); reader.readAsDataURL(file);
}; };
function ZoomFrame(){ function ZoomFrame(){
@ -237,6 +272,17 @@ Frames Browser v2023-09-22 (WIP).
return exist; 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){ function NewBoxPopup(id){
var Container = $new('div', { id: id, className: 'BoxPopup Container' }); var Container = $new('div', { id: id, className: 'BoxPopup Container' });
var Content = $new('div', { className: 'BoxPopup Content' }); var Content = $new('div', { className: 'BoxPopup Content' });

9
public/FramesBrowser/manifest.json Normal file
View File

@ -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"
}

35
public/HashyMagnet/index.html
View File

@ -1,16 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>HashyMagnet</title> <title>🧲 HashyMagnet</title>
<meta name="description" content="Generate full BitTorrent Magnet Links from Info Hashes!"> <meta name="description" content="Generate full BitTorrent Magnet Links from Info Hashes!"/>
<meta property="og:title" content="HashyMagnet"> <meta property="og:title" content="🧲 HashyMagnet"/>
<meta property="og:description" content="Generate full BitTorrent Magnet Links from Info Hashes!"> <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 property="og:url" content="https://hub.octt.eu.org/HashyMagnet"/>
<meta charset="UTF-8"> <link rel="canonical" href="https://hub.octt.eu.org/HashyMagnet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"/>
<link href="Bubbles.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="shortcut icon" href="../favicon.png" type="image/x-icon"> <link href="Bubbles.css" rel="stylesheet"/>
<link rel="manifest" href="manifest.json"> <link rel="shortcut icon" type="image/x-icon" href="../favicon.png"/>
<link rel="manifest" href="./manifest.json"/>
<style> <style>
Body { Body {
Color: #FFFFFF; Color: #FFFFFF;
@ -139,9 +140,9 @@ Button:Disabled {
</div> </div>
<noscript><p class="NoScript"> <noscript><p class="NoScript">
This is an actual app, not a badly-made website. This is an actual app, not a badly-made website.
<br> <br/>
It needs JavaScript to work, so you need to enable it. 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". The code is fully open, and you can review it with "View Page Source".
</p></noscript> </p></noscript>
<div id="Info"> <div id="Info">
@ -159,7 +160,7 @@ Button:Disabled {
</p> </p>
<p> <p>
Background animations: 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> <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> <h4>License</h4>
<pre id="LicenseText">HashyMagnet <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 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>. 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> </pre>
<br> <br/>
</div> </div>
</div></div> </div></div>
<br> <br/>
<div class="Section"> <div class="Section">
<div class="NoWrap"> <div class="NoWrap">
<button id="ResetBtn"><big><b>x</b></big></button> <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> <button id="OpenBtn">🔗 Open</button>
</div> </div>
</div> </div>
<br> <br/>
<div class="Section"> <div class="Section">
<div class="NoWrap LeftAlign"> <div class="NoWrap LeftAlign">
<label for="TrackersBtn">Trackers list:</label> <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> </div>
<textarea id="TrackersArea" placeholder="📜 Paste Trackers here..." rows="8" cols="60"></textarea> <textarea id="TrackersArea" placeholder="📜 Paste Trackers here..." rows="8" cols="60"></textarea>
</div> </div>
<br> <br/>
</div> </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> <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> <script>

39
public/index.html
View File

@ -11,38 +11,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon"> <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> <script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
<link href="Assets/CSS/Dark.css" rel="stylesheet"> <link href="./Assets/CSS/Dark.css" rel="stylesheet">
<script src="Assets/JS/RandomGIF.js"></script> <script src="./Assets/JS/RandomGIF.js"></script>
<script src="Assets/JS/CurrentAge.js"></script> <script src="./Assets/JS/CurrentAge.js"></script>
</head> </head>
<body> <body>
<div id="ConfettiCanvas"></div> <div id="ConfettiCanvas"></div>
<div class="Content" style="text-align: center;"> <div class="Content" style="text-align: center;">
<div> <div>
<h1>OctoSpacc Hub</h1><br><br> <h1>OctoSpacc Hub</h1><br/><br/>
<h3>Will this place ever be filled up?</h3> <h3>Will this place ever be truly filled up?</h3>
<h5>At the moment, it remains just a simple hub...</h5> <h5>At the moment, it's still kind of an humble hub...</h5>
</div> </div>
<br><br><br> <br/><br/><br/>
<div id="Links"><div> <div id="Links"><div>
<h4><a href="https://sitoctt.octt.eu.org">[🇮🇹] ✨sitoctt✨</a> (blog/personale)</h4> <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><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> <!--<h4><del><a href="https://octtspacc.gitlab.io/bachecoctt">🔖️ bachecoctt</a> (my WebPinBoard)</del></h4>-->
<br> <br/>
<h4><a href="./Ecoji">🦜 Ecoji v1</a> (webapp fork)</h4>
<h4><a href="./HashyMagnet">🧲 BitTorrent Hash to Magnet</a></h4> <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> <h4><a href="https://octospacc.gitlab.io/FumoPrisms">🔺️ Fumo Prisms (!)</a></h4>
</div></div> </div></div>
<br><br><br> <br/><br/><br/>
<div id="OcttAgeView"> <div id="OcttAgeView">
<p id="OcttCurrentAge"></p> <p id="OcttCurrentAge"></p>
<noscript><p>There should be a ticking clock here, but your browser isn't loading the JavaScript.</p></noscript> <noscript><p>There should be a ticking clock here, but your browser isn't loading the JavaScript.</p></noscript>
<br> <br/>
</div> </div>
<br><br> <br/><br/>
</div> </div>
<script src="Assets/JS/CurrentAgeRenderIndex.js"></script> <script src="./Assets/JS/CurrentAgeRenderIndex.js"></script>
<div class="Footer"> <div class="Footer">
<span class="FlexItem FooterLeft"> <span class="FlexItem FooterLeft">
<a href="https://gitlab.com/octospacc/octospacc.gitlab.io">📐 Sources &lt;-</a> <a href="https://gitlab.com/octospacc/octospacc.gitlab.io">📐 Sources &lt;-</a>
@ -51,9 +52,13 @@
<span class="FlexItem FooterRight"> <span class="FlexItem FooterRight">
<a rel="me" href="https://gitlab.com/octospacc">-&gt; GitLab 🦊</a> <a rel="me" href="https://gitlab.com/octospacc">-&gt; GitLab 🦊</a>
<span>&nbsp;</span> <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> <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> <span>&nbsp;</span>
<a href="https://spacc-inc.github.io">-&gt; Spacc ⛏️</a> <a href="https://spacc-inc.github.io">-&gt; Spacc ⛏️</a>
</span> </span>