This commit is contained in:
zutto 2024-05-25 17:56:41 +03:00
parent 9c3bfe3aa3
commit 5095087c96
6 changed files with 0 additions and 172 deletions

View file

@ -1,25 +0,0 @@
.bottom {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
padding: 10px;
}
/* core overrides */
a { white-space: nowrap; }
div[content] {
display: inline;
}

View file

@ -1,22 +0,0 @@
@keyframes shimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.shimmer {
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
height: 96px;
position: relative;
}

View file

@ -1,13 +0,0 @@
@keyframes dot-blink {
0% { content: ''; }
33% { content: '.'; }
66% { content: '..'; }
100% { content: '...'; }
}
.loading::after {
content: '';
display: inline-block;
animation: dot-blink 0.80s infinite steps(1, end);
}

View file

@ -1,48 +0,0 @@
<html>
<head>
<title>Zutto.fi</title>
<meta charset="UTF-8"/>
<meta name="description" content="Index portal for services under zutto.fi"/>
<meta name="keywords" content="Index,Services,Zutto"/>
<meta name="author" content="@zutto:zutto.fi"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="css/main.css" raw core />
<link rel="stylesheet" type="text/css" href="css/shimmer.css" raw />
<link rel="stylesheet" type="text/css" href="css/tripledot.css" raw />
</head>
<body>
<div id="header">
<h3>Hello World</h3>
</div>
<div id="mainContent">
<a href="https://fedi.zutto.fi">https://fedi.zutto.fi (Directory)</a>
<br/>
<a href="https://wiki.zutto.fi">https://wiki.zutto.fi</a>
<br/>
<a href="https://git.zutto.fi">https://git.zutto.fi</a>
<br/>
<div>
<span>
<a href="https://ip.zutto.fi">https://ip.zutto.fi</a>
- <div content="myip" lazy class="" template>(Your IP address is %s)</div>
</span>
<br/>
</div>
</div>
<br/> <!-- . -->
<div id="footer" class="bottom">
Matrix chat: <a href="https://matrix.to/#/#fedi.zutto.fi:zutto.fi">https://matrix.to/#/#zutto.fi:zutto.fi</a><br/>
Direct contact: <a href="https://matrix.to/#/@zutto:zutto.fi">https://matrix.to/#/@zutto:zutto.fi</a><br/>
<div content="time"></div>
</div>
<!-- load private services-->
<!-- import core scripts -->
<script type="module" src="main.js" async raw></script>
</html>

View file

@ -1 +0,0 @@
(()=>{"use strict";class e{constructor(){this.subscribers={}}subscribe(e,r){this.subscribers[e]||(this.subscribers[e]=[]),this.subscribers[e].push(r)}publish(e,r){this.subscribers[e]&&this.subscribers[e].forEach((e=>{e(r)}))}unsubscribe(e,r){this.subscribers[e]&&(this.subscribers[e]=this.subscribers[e].filter((e=>e!==r)))}}class r{constructor(){this.observers=new Map,this.initObserver()}initObserver(){new MutationObserver((e=>{e.forEach((e=>{e.addedNodes.forEach((e=>{1===e.nodeType&&this.checkNode(e)}))}))})).observe(document.body,{childList:!0,subtree:!0})}checkNode(e){this.observers.forEach(((r,t)=>{e.matches(t)&&(e.hasAttribute("lazyload")?this.observeLazyLoad(e,r):r(e))}))}observeLazyLoad(e,r){new IntersectionObserver(((e,t)=>{e.forEach((e=>{e.isIntersecting&&(r(e.target),t.unobserve(e.target))}))})).observe(e)}watch(e,r){document.querySelectorAll(e).forEach((e=>{e.hasAttribute("lazyload")?this.observeLazyLoad(e,r):r(e)})),this.observers.set(e,r)}}const t=new class{constructor(){return this.version="0.0.1",this.compiled=!1,this.watcher=new r,this.ps=new e,this}};class s{constructor(){this.html=""}async loadingStart(e){}async loadingEnd(e){console.log("super stop",e)}async render(e,r){var t="%s";e.hasAttribute("html-template")?t=e.getAttribute("html-template"):e.hasAttribute("template")&&(t=e.innerHTML,e.setAttribute("html-template",t)),e.innerHTML=t.replace("%s",r)}}class n extends s{constructor(){return super(),this}async loadingStart(e){return e.classList.add("shimmer"),this.render(e)}async loadingEnd(e){e.classList.remove("shimmer")}async render(e){return super.render(e,'\n <span id="loader" class="loading"></span>\n ')}}class i extends s{constructor(){return super(),this.loader=void 0,this}async loadingStart(e){return void 0!==this.loader&&this.loader.loadingEnd(e),this.loader=new n,this.loader.loadingStart(e),super.loadingStart(e)}async loadingEnd(e){return void 0!==this.loader&&this.loader.loadingEnd(e),super.loadingEnd(e)}async render(e,r){return super.render(e,r)}}class o{constructor(){}async go(e){try{const r=await fetch(e.url,{method:e.method||"GET",headers:e.headers||{},body:e.body||null,mode:e.mode||"cors",cache:e.cache||"default",credentials:e.credentials||"same-origin",redirect:e.redirect||"follow",referrer:e.referrer||"client"});if(!r.ok)throw new Error("Network response was not ok");return await r.text()}catch(e){console.error("error at fetch.get:",e)}}}new class extends s{constructor(){super(),t.watcher.watch('[content="time"]',(e=>{this.render(e)}))}async render(e){setInterval((()=>{super.render(e,(new Date).toLocaleTimeString("en-GB",{hour12:!1}).toString())}))}},new class extends i{constructor(){super(),this._ip="",this._source="https://ip.zutto.fi/",t.watcher.watch('[content="myip"]',(e=>{this.loadingStart(e),this.ip().then((r=>{try{this._ip=r.trim(),t.ps.publish("ip",{ip:this._ip}),this.render(e),this.loadingEnd(e)}catch(e){throw console.log("error here",e),e}}))}))}async ip(){try{const e=new o;return console.log("ok"),e.go({url:`${this._source}/ip`})}catch(e){throw e}}async loadingStart(e){return t.ps.publish("ip.load.start",{element:e}),super.loadingStart(e)}async loadingEnd(e){return t.ps.publish("ip.load.end",{element:e}),super.loadingEnd(e)}async render(e){try{const r=await super.render(e,this._ip);t.ps.publish("ip.rendered",{element:e,rendered:r})}catch(e){throw e}}}})();

View file

@ -1,63 +0,0 @@
.bottom {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
padding: 10px;
}
/* core overrides */
a { white-space: nowrap; }
div[content] {
display: inline;
}
@keyframes shimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.shimmer {
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
height: 96px;
position: relative;
}
@keyframes dot-blink {
0% { content: ''; }
33% { content: '.'; }
66% { content: '..'; }
100% { content: '...'; }
}
.loading::after {
content: '';
display: inline-block;
animation: dot-blink 0.80s infinite steps(1, end);
}