octospacc/OctoSpaccHub
1
0
Fork 0
mirror of https://gitlab.com/octospacc/octospacc.gitlab.io synced 2024-12-22 14:23:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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>
<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' });

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>
<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>

39
public/index.html
View File

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