Lekcja 6

assets/css/baza.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 
 /* Paleta kolorów: https://catppuccin.com/palette/ */
 * {
@@ -32,7 +32,8 @@
 
 /* Ważne */
 html {
-    font-family: "Ubuntu", sans-serif;
+    font-family: "Montserrat", sans-serif;
+    text-shadow: 1px 1px 2px var(--colorBase);
     font-weight: 400;
     font-style: normal;
     font-size: 14pt;

assets/css/main.css

@@ -29,6 +29,7 @@ html {
 
 /* Header */
 header {
+    position: relative;
     background-color: var(--colorBase);
     background: linear-gradient(135deg, var(--colorSurface0) 0%, var(--colorSurface1)  100%);
     /* border-bottom-left-radius: 1rem; */
@@ -41,6 +42,32 @@ header {
     padding-bottom: .65rem;
     padding-left: 1rem;
     padding-right: 1rem;
+    z-index: 10;
+}
+
+#snieg {
+    position: absolute;
+    border-radius: 1rem;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 1.35rem;
+    top: 0;
+    left: 0;
+    z-index: -10 !important;
+    user-select: none;
+    pointer-events: none;
+}
+
+#sniezyca {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: -5 !important;
+    user-select: none;
+    pointer-events: none;
 }
 
 header img {
@@ -59,6 +86,8 @@ header nav ul {
 
 /* Treść */
 main {
+    position: relative;
+    z-index: 10;
     background-color: var(--colorSurface0);
     border: .35rem solid var(--colorOverlay0);
     border-radius: 1rem;
@@ -73,6 +102,8 @@ main {
 
 /* Stopka */
 footer {
+    position: relative;
+    z-index: 10;
     display: flex;
     flex-direction: row;
     justify-content: space-between;

assets/js/2137.js

@@ -187,7 +187,7 @@ async function start() {
 
     const kreciol = document.createElement("img")
     kreciol.src = "https://media1.tenor.com/m/CzW0P5EOQwoAAAAC/jp2gmd-pope.gif";
-    kreciol.style.position = "fixed";
+    kreciol.style.position = "relative";
     kreciol.style.right = ".5rem";
     kreciol.style.bottom = ".5rem";
     root.appendChild(kreciol);

assets/js/index.js

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

assets/js/nawigacja.js

@@ -41,8 +41,10 @@ class Header extends HTMLElement {
     }
 
     connectedCallback() {
+        const miesiac = new Date().getMonth();
         this.innerHTML = `
             <header>
+                ${ miesiac < 2 || miesiac == 11 ? `<img src="/assets/images/snieg.png" id="snieg">` : "" }
                 <img src="/favicon.ico" width="64" height="64">
                 <h1>MaszToZadanieDomowe.com</h1>
                 <nav>
@@ -66,8 +68,10 @@ class Footer extends HTMLElement {
 
     connectedCallback() {
         const obrazek = stopkaObrazki[Math.floor(Math.random() * stopkaObrazki.length)];
+        const miesiac = new Date().getMonth();
         this.innerHTML = `
             <footer>
+                ${ miesiac < 2 || miesiac == 11 ? `<img src="/assets/images/snieg.png" id="snieg">` : "" }
                 <div>
                     <div class="flex-row">
                         ${stopkaLinki.map(kategoria => {

assets/js/zima.js

@@ -0,0 +1,28 @@
+function dodajSnieg() {
+    const dziecko = document.querySelector("main");
+    const snieg = document.createElement("img");
+    snieg.id = "snieg";
+    snieg.src = "/assets/images/snieg.png";
+    dziecko.insertBefore(snieg, dziecko.firstChild);
+
+    // const sniezyca = document.createElement("canvas");
+    // sniezyca.id = "sniezyca";
+    // document.body.insertBefore(sniezyca, document.body.firstChild);
+
+    // const ctx2D = sniezyca.getContext("2d");
+    // sniezyca.imageSmoothingEnabled = false;
+
+    // var i = 0;
+    // function renderowanie() {
+    //     ctx2D.
+    //     i++;
+    // }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    const miesiac = new Date().getMonth();
+    console.log(miesiac);
+    if (miesiac < 2 || miesiac == 11) {
+        dodajSnieg();
+    }
+});

tabele.html

@@ -64,6 +64,24 @@
                                 <td>0 sztuk</td>
                                 <td>0zł</td>
                             </tr>
+                            <tr>
+                                <td class="lp">7.</td>
+                                <td>09.2025</td>
+                                <td>0 sztuk</td>
+                                <td>0zł</td>
+                            </tr>
+                            <tr>
+                                <td class="lp">8.</td>
+                                <td>10.2025</td>
+                                <td>0 sztuk</td>
+                                <td>0zł</td>
+                            </tr>
+                            <tr>
+                                <td class="lp">9.</td>
+                                <td>11.2025</td>
+                                <td>0 sztuk</td>
+                                <td>0zł</td>
+                            </tr>
                             <tr>
                                 <td></td>
                                 <td></td>
@@ -171,7 +189,7 @@
                                 <td rowspan="1">
                                     WhaleRunner
                                 </td>
-                                <td rowspan="2">
+                                <td rowspan="3">
                                     Dark Steveneq
                                 </td>
                                 <td rowspan="1" colspan="4"><ul>
@@ -199,6 +217,22 @@
                                     <img alt="Brak zrzutu" width="640" height="480">
                                 </td>
                             </tr>
+
+                            <tr>
+                                <td rowspan="1">
+                                    Button4ME
+                                </td>
+                                <td rowspan="1" colspan="4"><ul>
+                                    <li>Podstawowa implementacja ekranu wraz z identycznym fontem</li>
+                                    <li>Logging</li>
+                                    <li>Uruchamianie wbudowanych skryptów z menu</li>
+                                </ul></td>
+                                <td rowspan="1">Java (J2ME)</td>
+                                <td rowspan="1" colspan="1">Rozwijane</td>
+                                <td rowspan="1" colspan="3">
+                                    <img alt="Brak zrzutu" width="640" height="480">
+                                </td>
+                            </tr>
                         </tbody>
                     </table>
                 </li>