spaaać mi sie chceeee

assets/css/main.css

@@ -83,15 +83,13 @@ footer {
     border-radius: 1rem;
     border: .3rem solid var(--colorOverlay1);
 
-    max-height: 128px;
 
     margin: .5rem;
     padding: 1rem;
-    padding-bottom: 1.75rem;
 }
 
 footer img {
-    height: 100%;
+    height: 150px;
 }
 
 footer strong {
@@ -103,13 +101,6 @@ footer div {
     flex-direction: column;
 }
 
-footer div div, .flex-row {
-    flex-grow: 1;
-    display: inline-flex;
-    flex-direction: row;
-    gap: 1rem;
-}
-
 footer div div ul {
     display: flex;
     flex-direction: column;
@@ -134,11 +125,21 @@ footer div div ul {
 /* Dodatkowe */
 .flex-row {
     flex-grow: 1;
-    display: inline-flex;
+    display: flex;
     flex-direction: row;
     gap: 1rem;
 }
 
+.flex-row-reverse {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+}
+
 .fixed25rem {
     min-height: 25rem;
     max-height: 25rem;

assets/js/2137.js

@@ -0,0 +1,172 @@
+class Barka extends HTMLElement  {
+    #odtwarzanie = false;
+
+    constructor() {
+        super();
+        this.shadow = this.attachShadow({ mode: "open" });
+    }
+
+    connectedCallback() {
+        const styl = document.createElement("style");
+        styl.textContent = `
+            :host {
+                width: 100vw;
+                height: 100vh;
+                position: fixed;
+                top: 0px;
+                left: 0px;
+                background: #000000;
+                z-index: 999999;
+            }
+            
+            audio {
+                width: 100%;
+            }
+            
+            canvas {
+                width: 40rem;
+                height: 25rem;
+                margin: auto;
+                border: .3rem solid #ffffff;
+            }
+        `;
+        this.shadow.append(styl)
+    }
+
+    /**
+     * Rozpocznij balange
+     */
+    async start() {
+        if (this.#odtwarzanie) {
+            return;
+        }
+        this.#odtwarzanie = true;
+
+        this.style.display = "none";
+        for (const child of this.children) {
+            child.remove();
+        }
+
+        this.audio = document.createElement("audio");
+        this.audio.controls = true;
+        this.audio.volume = 0.4;
+        {
+            const src = document.createElement("source")
+            src.src = "/assets/sounds/barka.m4a";
+            this.audio.appendChild(src);
+        }
+        this.audio.addEventListener("playing", ev => {
+            if (this.audio.played == 1) {
+            }
+        })
+        try {
+            await this.audio.play();
+        } catch (err) {
+            console.error("Nie udało się puścić barki: ", err)
+            this.#odtwarzanie = false;
+            return;
+        }
+        this.shadow.appendChild(this.audio);
+        this.style.display = "block";
+
+        this.canvas = document.createElement("canvas");
+        this.shadow.appendChild(this.canvas);
+        this.ctx2D = this.canvas.getContext("2d");
+        this.ctx2D.imageSmoothingEnabled = false;
+
+        this.ctxAud = new AudioContext();
+        this.analyser = this.ctxAud.createAnalyser();
+        const src = this.ctxAud.createMediaElementSource(this.audio);
+        src.connect(this.analyser);
+
+        // LINIJKA SKRADZIONA Z YOUVIDEO PITER NIE OBRAŻ SIE ALE DOSŁOWNIE TYLKO TO SKOPIOWAŁEM I TYLE NA RESZTE NIE PATRZYŁEM
+        this.analyser.connect(this.ctxAud.destination);
+
+        this.analyser.fftSize = 2048;
+        this.bufferLength = this.analyser.frequencyBinCount;
+        this.dataArray = new Uint8Array(this.bufferLength);
+
+        this.#ucyucy();
+    }
+
+    stop() {
+        this.b
+        this.#odtwarzanie = false;
+    }
+
+    async #ucyucy() {
+        if (this.#odtwarzanie) {
+            requestAnimationFrame(async () => {
+                await this.#ucyucy()
+            });
+        }
+        this.analyser.getByteTimeDomainData(this.dataArray);
+
+        this.ctx2D.fillStyle = "rgb(13, 13, 24)";
+        this.ctx2D.clearRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
+        
+        this.ctx2D.lineWidth = 2;
+        this.ctx2D.strokeStyle = "rgb(203, 166, 247)";
+        this.ctx2D.beginPath();
+        
+        const sliceWidth = this.canvas.clientWidth / this.bufferLength;
+        const middle = this.canvas.clientHeight / 2;
+
+        let x = 0;
+
+        let peak = 0;
+
+        for (let i = 0; i < this.bufferLength; i++) {
+            const v = this.dataArray[i] / 128.0;
+            if (peak < v) {
+                peak = v;
+            }
+            const y = v * middle * (1 - this.audio.volume) / 2;
+
+            if (i == 0) {
+                this.ctx2D.moveTo(x, y);
+            } else {
+                this.ctx2D.lineTo(x, y);
+            }
+
+            x += sliceWidth;
+        }
+
+        // Finish the line
+        this.ctx2D.lineTo(this.canvas.clientWidth, this.canvas.clientHeight / 2);
+        this.ctx2D.stroke();
+
+        peak -= 0.5;
+        console.log(peak);
+        this.style.backgroundColor = `rgb(${255 * peak}, ${255 * peak}, ${255 * peak}`;
+    }
+}
+
+customElements.define("barka-comp", Barka);
+
+async function start() {
+    
+    const canvas = document.createElement("canvas");
+    canvas.style.width = "40rem";
+    canvas.style.height = "25rem";
+    root.appendChild(canvas);
+    const cvastx = canvas.getContext("2d");
+    cvastx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
+
+
+    await new Promise(resolve => setTimeout(resolve, 38000))
+
+    const kreciol = document.createElement("img")
+    kreciol.src = "https://media1.tenor.com/m/CzW0P5EOQwoAAAAC/jp2gmd-pope.gif";
+    kreciol.style.position = "fixed";
+    kreciol.style.right = ".5rem";
+    kreciol.style.bottom = ".5rem";
+    root.appendChild(kreciol);
+}
+
+/** @type Barka */
+const barka = document.createElement("barka-comp");
+document.body.appendChild(barka);
+document.addEventListener("DOMContentLoaded", () => {
+    barka.start();
+});

assets/js/index.js

@@ -0,0 +1,2 @@
+import "./2137.js"
+import "./nawigacja.js"

assets/js/nawigacja.js

@@ -1,18 +1,36 @@
-const linki = [
+const nawigacjaLinki = [
+    { nazwa: "Tabele", link: "/tabele.html" },
+    { nazwa: "Liczby", link: "/liczby.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" },
-        { nazwa: "Liczby", link: "/liczby.html" },
+    ],
+    [
+        "HTML",
         { nazwa: "Tabele", link: "/tabele.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() {
@@ -27,7 +45,7 @@ class Header extends HTMLElement {
                 <nav>
                     <ul>
                         <li><a href="/index.html">Strona główna</a></li>
-                        ${linki[linki.length - 1].map(value => {
+                        ${nawigacjaLinki.map(value => {
                             return `<li><a href="${value.link}">${value.nazwa}</a></li>`
                         }).join("")}
                     </ul>
@@ -44,13 +62,17 @@ class Footer extends HTMLElement {
     }
 
     connectedCallback() {
+        const obrazek = stopkaObrazki[Math.floor(Math.random() * stopkaObrazki.length)];
         this.innerHTML = `
             <footer>
                 <div>
-                    <div>
+                    <div class="flex-row">
-                        ${linki.map(kategoria => {
+                        ${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>`
@@ -67,7 +89,12 @@ class Footer extends HTMLElement {
                         loading="lazy"
                     >
                     </iframe>
-                    <img src="assets/images/blahaj.png" height="128">
+                    <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>
         `;

galeria.html

@@ -7,7 +7,7 @@
         <link href="/favicon.ico" rel="favicon">
         <link href="/assets/css/main.css" rel="stylesheet">
         <link href="/assets/css/galeria.css" rel="stylesheet">
-        <script src="/assets/js/nawigacja.js"></script>
+        <script type="module" src="/assets/js/index.js"></script>
         <script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
     </head>
     <body>

hobby.html

@@ -6,7 +6,7 @@
         <title>Moje Hobby - MaszToZadanieDomowe.com</title>
         <link href="/favicon.ico" rel="favicon">
         <link href="/assets/css/main.css" rel="stylesheet">
-        <script src="/assets/js/nawigacja.js"></script>
+        <script type="module" src="/assets/js/index.js"></script>
         <script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
     </head>
     <body>

index.html

@@ -6,7 +6,7 @@
         <title>MaszToZadanieDomowe.com</title>
         <link href="/favicon.ico" rel="favicon">
         <link href="assets/css/main.css" rel="stylesheet">
-        <script src="assets/js/nawigacja.js" defer></script>
+        <script type="module" src="assets/js/index.js"></script>
         <script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
     </head>
     <body>

js-podstawy.html

@@ -7,7 +7,7 @@
         <link href="/favicon.ico" rel="favicon">
         <link href="/assets/css/main.css" rel="stylesheet">
         <script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
-        <script src="/assets/js/nawigacja.js"></script>
+        <script type="module" src="/assets/js/index.js"></script>
         <script src="/assets/js/akordeon.js"></script>
         <script src="/assets/js/js-wspolne.js"></script>
         <script src="/assets/js/js-podstawy.js"></script>

js-warunkowe.html

@@ -8,7 +8,7 @@
         <link href="/assets/css/main.css" rel="stylesheet">
         <link href="/assets/css/js-warunkowe.css" rel="stylesheet">
         <script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
-        <script src="/assets/js/nawigacja.js"></script>
+        <script type="module" src="/assets/js/index.js"></script>
         <script src="/assets/js/js-wspolne.js"></script>
         <script src="/assets/js/js-warunkowe.js"></script>
     </head>

tabele.html

@@ -7,7 +7,7 @@
         <link href="/favicon.ico" rel="favicon">
         <link href="/assets/css/main.css" rel="stylesheet">
         <script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
-        <script src="/assets/js/nawigacja.js"></script>
+        <script type="module" src="/assets/js/index.js"></script>
         <script src="/assets/js/akordeon.js"></script>
     </head>
     <body>