Update home links and improve footer, add some app icons

This commit is contained in:
octospacc 2024-04-27 20:10:58 +02:00
parent 8b86de049b
commit c433bc6635
9 changed files with 31 additions and 20 deletions

BIN
source/SpiderADB/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta property="og:title" content="🕷️ SpiderADB"/> <meta property="og:title" content="🕷️ SpiderADB"/>
<meta OctoSpaccHubSdk="Url" content="https://hub.octt.eu.org/SpiderADB/"/> <meta OctoSpaccHubSdk="Url" content="https://hub.octt.eu.org/SpiderADB/"/>
<meta OctoSpaccHubSdk="WebManifestExtra" content="'display':'standalone',"/> <meta OctoSpaccHubSdk="WebManifestExtra" content="'display':'standalone', 'icons':[{ 'src':'./icon.png', 'type':'image/png', 'sizes':'512x512' }]"/>
<link rel="stylesheet" href="./holo-web/holo-base-elements.css"/> <link rel="stylesheet" href="./holo-web/holo-base-elements.css"/>
<link rel="stylesheet" href="./holo-web/holo-base-widgets.css"/> <link rel="stylesheet" href="./holo-web/holo-base-widgets.css"/>
<link rel="stylesheet" href="./holo-web/holo-ics-dark-elements.css"/> <link rel="stylesheet" href="./holo-web/holo-ics-dark-elements.css"/>

BIN
source/WuppiMini/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

View File

@ -37,7 +37,7 @@ const newHtmlPage = (content, title) => `<!DOCTYPE html><html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta property="og:title" content="${title ? `${title} — ` : ''}${appName}"/> <meta property="og:title" content="${title ? `${title} — ` : ''}${appName}"/>
<meta OctoSpaccHubSdk="Url" content="https://hub.octt.eu.org/WuppiMini/"/> <meta OctoSpaccHubSdk="Url" content="https://hub.octt.eu.org/WuppiMini/"/>
<meta OctoSpaccHubSdk="WebManifestExtra" content="'display':'standalone',"/> <meta OctoSpaccHubSdk="WebManifestExtra" content="'display':'standalone', 'icons':[{ 'src':'./icon.png', 'type':'image/png', 'sizes':'256x256' }]"/>
<script src="../../shared/OctoHub-Global.js"></script> <script src="../../shared/OctoHub-Global.js"></script>
<style> <style>
* { * {

View File

@ -1,5 +1,9 @@
@import url("Font_F25_Bank_Printer.css"); @import url("Font_F25_Bank_Printer.css");
:root {
--FooterPadding: 8px;
}
A { A {
Color: #17C3EA; Color: #17C3EA;
} }
@ -87,10 +91,7 @@ Body {
Justify-Content: Space-Between; Justify-Content: Space-Between;
Bottom: 0px; Bottom: 0px;
Width: 100vw; Width: 100vw;
Padding-Top: 2px; Padding: var(--FooterPadding);
Padding-Bottom: 2px;
Padding-Left: 6px;
Padding-Right: 6px;
Text-Align: Center; Text-Align: Center;
Overflow-X: Auto; Overflow-X: Auto;
Overflow-Y: Hidden; Overflow-Y: Hidden;
@ -111,6 +112,6 @@ Body {
Background-Color: RGBA(36, 36, 36, 0.85); Background-Color: RGBA(36, 36, 36, 0.85);
Font-Size: Larger; Font-Size: Larger;
} }
.Footer > .FooterRight { Margin-Right: 12px; } .Footer > .FooterRight { Margin-Right: calc(var(--FooterPadding) * 2); }
#OcttAgeView { Padding: 16px; } #OcttAgeView { Padding: 16px; }

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

View File

@ -5,5 +5,8 @@
"start_url": "https://hub.octt.eu.org/FramesBrowser/", "start_url": "https://hub.octt.eu.org/FramesBrowser/",
"scope": "https://hub.octt.eu.org/FramesBrowser/", "scope": "https://hub.octt.eu.org/FramesBrowser/",
"display": "standalone", "display": "standalone",
"background_color": "#f0f0f0" "background_color": "#f0f0f0",
"icons": [
{ "src": "./icon.png", "type": "image/png", "sizes": "256x256" }
]
} }

View File

@ -12,7 +12,7 @@
{ {
"src": "https://cdn.jsdelivr.net/gh/octospacc/twemoji-astonishing@gh-pages/i/1f9f2.svg", "src": "https://cdn.jsdelivr.net/gh/octospacc/twemoji-astonishing@gh-pages/i/1f9f2.svg",
"type": "image/svg+xml", "type": "image/svg+xml",
"sizes": "512x512" "sizes": "any"
} }
] ]
} }

View File

@ -28,23 +28,23 @@
</div> </div>
<br/><br/> <br/><br/>
<div style="font-size: x-small"> <div style="font-size: x-small">
<audio src="https://octospacc.gitlab.io/Web-ThirdParty-Unknown/Assets/Media/MightyFinalFightSlums.mp3" controls muted loop autoplay></audio> <audio src="https://octospacc.gitlab.io/Web-ThirdParty-Unknown/Assets/Media/MightyFinalFightSlums.mp3" onloadstart="this.volume=0.5" controls muted loop autoplay></audio>
<p>Theme Song: <i><a target="_blank" href="https://www.youtube.com/watch?v=TwqutMIfc94">Spirit of Famiclone Selection Menu</a></i></p> <p>Theme Song: <i><a target="_blank" href="https://www.youtube.com/watch?v=TwqutMIfc94">Spirit of Famiclone Selection Menu</a></i></p>
</div> </div>
<br/><br/><br/> <br/><br/><br/>
<div id="Links"><div> <div id="Links"><div>
<h4><!-- <h4><!--
--><small>[🇮🇹]</small> --><small>[🇮🇹]</small>
<a href="https://sitoctt.octt.eu.org">✨sitoctt✨</a> <a rel="me" href="https://sitoctt.octt.eu.org">✨sitoctt✨</a>
<small>(long-form blog, personale)</small><!-- <small>(long-form blog, personale)</small><!--
--></h4> --></h4>
<h4><!-- <h4><!--
--><a href="https://kb.octt.eu.org">📝 OcttKB</a> --><a rel="me" href="https://kb.octt.eu.org">📝 OcttKB</a>
<small>(knowledge base & personal wiki)</small><!-- <small>(knowledge base & personal wiki)</small><!--
--></h4> --></h4>
<h4><!-- <h4><!--
--><small>[🇮🇹]</small> --><small>[🇮🇹]</small>
<a href="https://octospacc.altervista.org">📓️ fritto misto di octospacc</a> <a rel="me" href="https://octospacc.altervista.org">📓️ fritto misto di octospacc</a>
<small>(microblog)</small><!-- <small>(microblog)</small><!--
--></h4> --></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>-->
@ -100,6 +100,8 @@
<span>&nbsp;</span> <span>&nbsp;</span>
<a rel="me" href="https://github.com/andrigamerita">-&gt; GitHub 🐙️</a> <a rel="me" href="https://github.com/andrigamerita">-&gt; GitHub 🐙️</a>
<span>&nbsp;</span> <span>&nbsp;</span>
<a rel="me" href="https://octt.itch.io">-&gt; Itch.io 🛍️</a>
<span>&nbsp;</span>
<a rel="me" href="https://mastodon.uno/@octo">-&gt; Mastodon (<dfn title="inactive">💤️</dfn>) 🐘</a> <a rel="me" href="https://mastodon.uno/@octo">-&gt; Mastodon (<dfn title="inactive">💤️</dfn>) 🐘</a>
<!--<span>&nbsp;</span> <!--<span>&nbsp;</span>
<a rel="me" href="https://botsin.space/@octtpz">-&gt; pezziposting 🦜</a>--> <a rel="me" href="https://botsin.space/@octtpz">-&gt; pezziposting 🦜</a>-->
@ -112,26 +114,31 @@
<script>(function(){ <script>(function(){
var footerElem = document.querySelector('div.Footer'); var footerElem = document.querySelector('div.Footer');
var footerScrollLast; var footerScrollLast;
var footerScrollDir = 1; var footerScrollDirection = 1;
var footerShouldScroll = true; var footerShouldScroll = true;
footerElem.onclick = footerElem.ontouch = footerElem.ontouchstart = footerElem.onmouseover = footerElem.onmouseenter = stopFooterScroll; footerElem.onclick = footerElem.ontouch = footerElem.ontouchstart = footerElem.onmouseover = footerElem.onmouseenter = stopFooterScroll;
footerElem.onmouseleave = footerElem.ontouchend = restartFooterScroll; footerElem.onmouseleave = footerElem.ontouchend = restartFooterScroll;
var footerScrollIndex; var footerScrollIndex;
function serviceFooterScroll() { function serviceFooterScroll () {
footerScrollIndex = setInterval(function(){ footerScrollIndex = setInterval(function(){
if (footerElem.scrollLeft === footerScrollLast) { if (footerElem.scrollLeft === footerScrollLast) {
footerScrollDir *= -1; reverseScrollDirection();
} }
footerScrollLast = footerElem.scrollLeft; footerScrollLast = footerElem.scrollLeft;
footerElem.scrollLeft += footerScrollDir; footerElem.scrollLeft += footerScrollDirection;
}, 25); }, 25);
} }
function restartFooterScroll() { function reverseScrollDirection () {
footerScrollDirection *= -1;
stopFooterScroll();
restartFooterScroll(1250);
}
function restartFooterScroll (delay) {
if (!footerScrollIndex) { if (!footerScrollIndex) {
footerScrollIndex = setTimeout(serviceFooterScroll, 2000); footerScrollIndex = setTimeout(serviceFooterScroll, (delay || 2000));
} }
} }
function stopFooterScroll() { function stopFooterScroll () {
clearInterval(footerScrollIndex); clearInterval(footerScrollIndex);
footerScrollIndex = null; footerScrollIndex = null;
} }