spaaać mi sie chceeee

2025-09-26 16:43:05 +02:00
parent 0cceffbd49
commit dae754f993
13 changed files with 225 additions and 23 deletions
--- a/assets/css/main.css
+++ b/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;
--- a/assets/images/960px-Neko_Wikipe-tan.png
+++ b/assets/images/960px-Neko_Wikipe-tan.png
--- a/assets/images/rurex.webp
+++ b/assets/images/rurex.webp
--- a/assets/js/2137.js
+++ b/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();
+});
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -0,0 +1,2 @@
+import "./2137.js"
+import "./nawigacja.js"
--- a/assets/js/nawigacja.js
+++ b/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>
-                        ${linki.map(kategoria => {
+                    <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>`
@@ -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>
        `;
--- a/assets/sounds/barka.m4a
+++ b/assets/sounds/barka.m4a
--- a/galeria.html
+++ b/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>
--- a/hobby.html
+++ b/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>
--- a/index.html
+++ b/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>
--- a/js-podstawy.html
+++ b/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>
--- a/js-warunkowe.html
+++ b/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>
--- a/tabele.html
+++ b/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>