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;
@@ -16,3 +34,27 @@ 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,7 +154,7 @@ 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);
@@ -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);
@@ -192,3 +199,5 @@ 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",

grafika.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="pl">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Grafika - MaszToZadanieDomowe.com</title>
+        <link href="/favicon.ico" rel="favicon">
+        <link href="/assets/css/main.css" rel="stylesheet">
+        <link href="/assets/css/galeria.css" rel="stylesheet">
+        <script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
+        <script type="module" src="/assets/js/index.js"></script>
+    </head>
+    <body>
+        <header-comp></header-comp>
+        <main>
+            <h2>HTML Grafika</h2>
+            <hr>
+            <ol>
+                <li>
+                    <h4>Technologia strony</h4>
+                    <h6>Także pasuje pod zadanie 2</h6>
+                    <hr>
+                    <div class="flex-col">
+                        <div class="technologia">
+                            <figure>
+                                <img width="192" height="192" src="/assets/images/html6.webp" alt="Koncepcja loga następnej wersji HTMLa która nigdy nie powstanie">
+                                <figcaption>
+                                    HTML6
+                                </figcaption>
+                            </figure>
+                            <figure>
+                                <img width="192" height="192" src="/assets/images/purple-css-logo.webp" alt="Nowe logo CSSa">
+                                <figcaption>
+                                    <span style="color: rebeccapurple; text-shadow: 0px 0px 5px white, 0 0 5px white, 0 0 5px white; font-weight: bold;">
+                                    CSS 4
+                                    </span>
+                                    <br>
+                                    🖕♋
+                                </figcaption>
+                            </figure>
+                            <figure>
+                                <img width="192" height="192" src="/assets/images/es2266-ecmascript-logo.svg" alt="Parodia loga ECMAScript">
+                                <figcaption>
+                                    ECMAScript
+                                    <br>
+                                    <a href="https://github.com/wingsuitist/ecmascript-logo">Źródło</a>
+                                </figcaption>
+                            </figure>
+                        </div>
+                    </div>
+                </li>
+                <br>
+                <li value="3">
+                    <h4>Projekty w rozwoju</h4>
+                    <hr>
+                    <div class="flex-col">
+                        <div class="pozycjonowany">
+                            <a href="https://hazzy.nonamesoft.xyz/ghostfox/qyouradio"><h4>QYouRadio</h4></a>
+                            <img width="433" height="243" src="/assets/images/qyouradio.png" alt="Interfejs QYouRadio">
+                            Desktopowy klient YouRadio napisany w Qt i QMLu. Bardzo wygodny w używaniu (mimo obecnej niedorbóki).
+                        </div>
+                        <div class="pozycjonowany">
+                            <a href="https://hazzy.nonamesoft.xyz/ghostfox/qyouvideo"><h4>QYouVideo</h4></a>
+                            <img width="433" height="243" src="/assets/images/qyouvideo.png" alt="Interfejs QYouVideo">
+                            QYouVideo to bazujący na QYouRadio klient YouVideo zrobiony dla jaj (widać po commitach) w praktycznie 2 dni. Powstał tylko dlatego że Youpiter wział się za tworzenie nowej strony YouVideo i chciałem zobaczyć ile czasu zajeło by mi stworzenie wszystkiego. Obecnie interfejs ma buga że nowo otwarte listy filmów nie mogą otwierać filmów.
+                        </div>
+                        <div class="pozycjonowany">
+                            <h4>Yerner</h4>
+                            <img width="433" height="243" src="/assets/images/screenshot000.png" alt="Interfejs Yernera">
+                            Yerner to miniaturowe ISO Linuxa (kastracja pingwina zajeła całkiem dużo czasu ale było warto) które w założeniu ma mieć zawarte w
+                            sobie wszystko potrzebne
+                            do szybkiego rozpoczęcia kopania Monero. Jak coś to nie, nie chce kopać krypto na masową skale. Yerner powstał z tego że chciałem
+                            sprawdzić ile
+                            wszystkie moje komputery mogą wykopać ale zamiast rozsądnie manualnie zainstalować koparki i je uruchomić (na przykład w trybie testowym),
+                            postanowiłem zrobić własne ISO z wszystkim :3. Na razie mam same podstawowe ISO (bez sieci i Mesy, sterowników od grafiki) sam plik zajmuje
+                            jedynie 265mb. Dlaczego zrobiłem je tak
+                            małe? Żeby szybko mogło się do skopiować do RAMu aby można było tym samym nośnikiem uruchomić kopie na wszystkich komputerach. Aby
+                            całość była jeszcze bardziej profesjonalna, zamierzam obudować wszystko interfejsem graficznym (i całkowicie wywalić TTY) zrobionym (jak na razie)
+                            C++ie ze wsparciem Rayliba i ImGui działającym w stu procentach na Linuxowym DRMie! Nie, nie chodzi mi o TEGO DRMa. Zrzut ekranu pokazuje obecny stan interfejsu (żaden).
+                        </div>
+                    </div>
+                </li>
+                <br>
+                <li>
+                    <h4>Galeria czegokolwiek co znajde</h4>
+                    <hr>
+                    <a href="https://store.steampowered.com/app/2999060/Sejm_The_Game/?l=polish">Sejm the Game</a> wyjdzie 22 października o 16:00. Serdecznie polecam. Kto by nie chciał założyć własnej partii poltycznej i dojść do władzy (zgaduje) krok po kroku... kłamstwo po kłamstwie oraz pięść po pięści.
+                    <br>
+                    <br>
+                    <div class="flowing">
+                        <a href="https://babylonbee.com/news/parents-worried-non-violent-video-games-turning-kids-into-sissies" target="_blank"><img src="/assets/images/Tak_sie_konczy_walka_z_przemocaw_grach_1760436288.jpg"></a>
+                        <a><img src="/assets/images/kaczka.png"></a>
+                        <a><img src="/assets/images/portret.png"></a>
+                        <a><img src="/assets/images/kawusia.png"></a>
+                        <a><img src="/assets/images/spokoj.png"></a>
+                    </table>
+                </li>
+                <br>
+            </ol>
+        </main>
+        <footer-comp></footer-comp>
+    </body>
+</html>