diff --git a/assets/css/main.css b/assets/css/main.css index 5a550c6..7666b2b 100644 --- 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; diff --git a/assets/images/960px-Neko_Wikipe-tan.png b/assets/images/960px-Neko_Wikipe-tan.png new file mode 100644 index 0000000..34e72d5 Binary files /dev/null and b/assets/images/960px-Neko_Wikipe-tan.png differ diff --git a/assets/images/rurex.webp b/assets/images/rurex.webp new file mode 100644 index 0000000..063bd6c Binary files /dev/null and b/assets/images/rurex.webp differ diff --git a/assets/js/2137.js b/assets/js/2137.js new file mode 100644 index 0000000..7dc687c --- /dev/null +++ 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(); +}); \ No newline at end of file diff --git a/assets/js/index.js b/assets/js/index.js new file mode 100644 index 0000000..05206c6 --- /dev/null +++ b/assets/js/index.js @@ -0,0 +1,2 @@ +import "./2137.js" +import "./nawigacja.js" \ No newline at end of file diff --git a/assets/js/nawigacja.js b/assets/js/nawigacja.js index 361c3e3..5296a8b 100644 --- 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 w:User:Kasuga~enwiki
Praca własna, CC BY-SA 3.0, Link', 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 {