Lekcja 4 (chyba)

assets/css/galeria.css

@@ -1,12 +1,30 @@
 td img {
     border-radius: .75rem;
+    margin: 5px;
 }
 
 table {
+    width: unset;
+    border: none;
     margin-left: auto;
     margin-right: auto;
 }
 
+.technologia {
+    display: inline-flex;
+    flex-direction: row;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+figcaption {
+    text-align: center;
+}
+
+tr {
+    background-color: transparent !important;
+}
+
 #fagata {
     color: var(--colorRed);
     font-size: 54pt;
@@ -15,4 +33,28 @@ table {
 
 audio, video {
     width: 100%;
+}
+
+.pozycjonowany {
+    background-color: var(--colorSurface1);
+    margin-top: .5rem;
+}
+
+.pozycjonowany h4 {
+    background-color: var(--colorSurface2);
+    border-radius: .5rem;
+    padding: .4rem;
+}
+
+.pozycjonowany img {
+    float: left;
+    margin: .5rem;
+    border-radius: 10px;
+}
+
+.flowing {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1rem;
 }

assets/images/es2266-ecmascript-logo.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+    <g id="Background" transform="matrix(0.925728,0,0,0.998874,-16.7849,-25.5506)">
+        <rect x="18.771" y="24.88" width="432.668" height="402.351" style="fill:rgb(248,220,61);"/>
+    </g>
+    <g transform="matrix(1,0,0,1,-82.9938,8.55603)">
+        <text x="124.14px" y="357.097px" style="font-family:'OpenSans-Bold', 'Open Sans', sans-serif;font-weight:700;font-size:258.257px;fill:black;">ES</text>
+    </g>
+    <g transform="matrix(1,0,0,1,126.381,-193.709)">
+        <text x="124.14px" y="357.097px" style="font-family:'OpenSans-Bold', 'Open Sans', sans-serif;font-weight:700;font-size:50px;fill:black;">2266</text>
+    </g>
+</svg>

assets/js/2137.js

@@ -24,10 +24,14 @@ class Barka extends HTMLElement {
             }
             
             canvas {
-                width: 40rem;
-                height: 25rem;
+                position: fixed;
+                left: 0;
+                right: 0;
+                bottom: 0rem;
+                width: 100svw;
+                height: 12rem;
                 margin: auto;
-                border: .3rem solid #ffffff;
+                /* border: .3rem solid #ffffff; */
             }
         `;
         this.shadow.append(styl)
@@ -44,9 +48,9 @@ class Barka extends HTMLElement {
         const akceptowalneSpoznienie = 600;
 
 
-        console.log("dev");
-        barka.start();
-        return;
+        // console.log("dev");
+        // barka.start();
+        // return;
         if (sekundyDo2137 >= 0) {
             await new Promise(resolve => setTimeout(resolve, sekundyDo2137 * 1000));
             console.log("już czas.");
@@ -130,10 +134,11 @@ class Barka extends HTMLElement {
         }
         this.analyser.getByteTimeDomainData(this.dataArray);
 
-        this.ctx2D.fillStyle = "rgb(13, 13, 24)";
+        this.canvas.width = this.canvas.clientWidth;
+        this.canvas.height = this.canvas.clientHeight;
         this.ctx2D.clearRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight);
         
-        this.ctx2D.lineWidth = 2;
+        this.ctx2D.lineWidth = 5;
         this.ctx2D.strokeStyle = "rgb(203, 166, 247)";
         this.ctx2D.beginPath();
         
@@ -149,14 +154,14 @@ class Barka extends HTMLElement {
             if (peak < v) {
                 peak = v;
             }
-            const y = v * 2 * middle + middle / 4;
+            const y = v * 4 * middle + middle;
 
             if (i == 0) {
                 this.ctx2D.moveTo(x, y);
             } else {
                 this.ctx2D.lineTo(x, y);
             }
-
+        
             x += sliceWidth;
         }
 
@@ -164,9 +169,11 @@ class Barka extends HTMLElement {
         this.ctx2D.lineTo(this.canvas.clientWidth, this.canvas.clientHeight / 2);
         this.ctx2D.stroke();
 
-        if (this.audio.currentTime >= 39) {
+        if (this.audio.currentTime > 39) {
+            this.canvas.style.backgroundColor = "#1e1e2e";
             this.style.backgroundColor = `rgb(${88 + 255 * peak}, ${137 + 255 * peak}, ${194 + 255 * peak}`;
         } else {
+            this.canvas.style.backgroundColor = "";
             this.style.backgroundColor = `rgb(${255 * peak}, ${255 * peak}, ${255 * peak}`;
         }
         this.style.scale = 1 + peak / (peak > 0.1 ? 5 : 10);
@@ -191,4 +198,6 @@ const barka = document.createElement("barka-comp");
 document.body.appendChild(barka);
 document.addEventListener("DOMContentLoaded", () => {
     barka.kontroler();
-});
+});
+
+window.barka = barka;

assets/js/nawigacja.js

@@ -1,6 +1,6 @@
 const nawigacjaLinki = [
     { nazwa: "Tabele", link: "/tabele.html" },
-    { nazwa: "Liczby", link: "/liczby.html" },
+    { nazwa: "Grafika", link: "/grafika.html" },
 ];
 const stopkaLinki = [
     [
@@ -18,6 +18,7 @@ const stopkaLinki = [
     [
         "HTML",
         { nazwa: "Tabele", link: "/tabele.html" },
+        { nazwa: "Grafika", link: "/grafika.html" },
     ],
     [
         "Wszystko",