104 lines
4.0 KiB
JavaScript
104 lines
4.0 KiB
JavaScript
const nawigacjaLinki = [
|
|
{ nazwa: "Tabele", link: "/tabele.html" },
|
|
{ nazwa: "Grafika", link: "/grafika.html" },
|
|
];
|
|
const stopkaLinki = [
|
|
[
|
|
"Główne linki",
|
|
{ nazwa: "Strona główna", link: "/index.html" },
|
|
{ nazwa: "Moje hobby", link: "/hobby.html" },
|
|
{ nazwa: "Galeria", link: "/galeria.html" },
|
|
{ nazwa: "Kontakt", link: "https://nonamesoft.xyz/about" },
|
|
],
|
|
[
|
|
"#FreeJavaScript",
|
|
{ nazwa: "JS. Podstawowe Zad.", link: "/js-podstawy.html" },
|
|
{ nazwa: "JS. Zad. Warunkowe", link: "/js-warunkowe.html" },
|
|
],
|
|
[
|
|
"HTML",
|
|
{ nazwa: "Tabele", link: "/tabele.html" },
|
|
{ nazwa: "Grafika", link: "/grafika.html" },
|
|
],
|
|
[
|
|
"Wszystko",
|
|
{ nazwa: "Liczby", link: "/liczby.html" },
|
|
]
|
|
];
|
|
|
|
const stopkaObrazki = [
|
|
{ link: "/assets/images/960px-Neko_Wikipe-tan.png", autor: 'przez <a href="https://en.wikipedia.org/wiki/User:Kasuga~enwiki" title="Kasuga~enwiki">w:User:Kasuga~enwiki</a> <br> <span lang="pl">Praca własna</span>, <a href="http://creativecommons.org/licenses/by-sa/3.0/" title="Creative Commons Attribution-Share Alike 3.0">CC BY-SA 3.0</a>, <a href="https://commons.wikimedia.org/w/index.php?curid=2482629">Link</a>', alt: "Wikipe-tan, personifikacja Wikipedii, jako kotodziewczynka" },
|
|
{ link: "/assets/images/rurex.webp", alt: "Rurex. " },
|
|
{ link: "/assets/images/blahaj.png", alt: "Oficjalna grafika BLÅHAJa z Ikei ale w kiepskej rozdzielczości" },
|
|
];
|
|
|
|
|
|
class Header extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.innerHTML = `
|
|
<header>
|
|
<img src="/favicon.ico" width="64" height="64">
|
|
<h1>MaszToZadanieDomowe.com</h1>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="/index.html">Strona główna</a></li>
|
|
${nawigacjaLinki.map(value => {
|
|
return `<li><a href="${value.link}">${value.nazwa}</a></li>`
|
|
}).join("")}
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
`;
|
|
}
|
|
};
|
|
customElements.define("header-comp", Header);
|
|
|
|
class Footer extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
connectedCallback() {
|
|
const obrazek = stopkaObrazki[Math.floor(Math.random() * stopkaObrazki.length)];
|
|
this.innerHTML = `
|
|
<footer>
|
|
<div>
|
|
<div class="flex-row">
|
|
${stopkaLinki.map(kategoria => {
|
|
return `<ul>
|
|
${kategoria.map(value => {
|
|
if (typeof value == "string") {
|
|
return `<h5>${value}</h5>`;
|
|
}
|
|
return `<li><a href="${value.link}">${value.nazwa}</a></li>`
|
|
}).join("")}
|
|
</ul>`
|
|
}).join("")}
|
|
</div>
|
|
<strong>Strona © Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
|
|
</div>
|
|
<div id="extra" style="flex-grow: 0; flex-direction: row;">
|
|
<iframe
|
|
src="https://youads.nonamesoft.xyz/ads/site"
|
|
title="YouAds Ads Site"
|
|
height="150"
|
|
style="border: medium; max-width: 600px; width: 600px; height: 150px;"
|
|
loading="lazy"
|
|
>
|
|
</iframe>
|
|
<div class="flex-col">
|
|
<div class="flex-row-reverse">
|
|
<img src="${obrazek.link}" title="${obrazek.alt}" alt="${obrazek.alt}">
|
|
</div>
|
|
<p>${obrazek.autor ?? ""}</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
`;
|
|
}
|
|
};
|
|
customElements.define("footer-comp", Footer);
|