diff --git a/Lekcja_04/index.html b/Lekcja_04/index.html
new file mode 100644
index 0000000..e1f9d28
--- /dev/null
+++ b/Lekcja_04/index.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="pl">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Saperrro</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: Arial, Helvetica, sans-serif;
+        }
+
+        body {
+            background-color: darkslategray;
+        }
+
+        main {
+            margin: 1em auto;
+            width: fit-content;
+            padding: 1em;
+            background-color: rgb(40, 40, 45);
+            color: white;
+        }
+
+        hr {
+            margin: .5em 0;
+        }
+
+        .settings>p {
+            font-weight: bold;
+        }
+
+        .setting {
+            display: flex;
+            justify-content: space-between;
+            margin-top: .5em;
+        }
+
+        .setting>input {
+            margin-left: 8em;
+        }
+
+        #start {
+            border: none;
+            width: 100%;
+            padding: .5em;
+        }
+
+        #start:hover {
+            background-color: darkslateblue;
+            cursor: pointer;
+            color: white;
+        }
+
+        table {
+            border-collapse: collapse;
+        }
+
+        td {
+            width: 40px;
+            height: 40px;
+            margin: 0;
+            border: 1px solid white;
+            text-align: center;
+            font-family: monospace;
+            user-select: none;
+        }
+
+        .nieodkryte-pole {
+            background-color: gray;
+        }
+
+        .nieodkryte-pole:hover {
+            cursor: pointer;
+            background-color: darkslateblue;
+        }
+
+        .odkryte-pole {
+            background-color: transparent;
+        }
+
+        #message {
+            text-align: center;
+        }
+
+        .debug-czerwony {
+            background-color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <main>
+        <h1>Saperrro</h1>
+        <div class="settings">
+            <hr>
+            <p>Ustawienia</p>
+            <div class="setting">
+                <label for="width">Szerokość planszy</label>
+                <input type="number" name="width" id="width" size="2" value="10">
+            </div>
+            <div class="setting">
+                <label for="height">Wysokość planszy</label>
+                <input type="number" name="height" id="height" size="2" value="10">
+            </div>
+            <div class="setting">
+                <label for="mines">Ilość min</label>
+                <input type="number" name="mines" id="mines" size="2" value="10">
+            </div>
+            <div class="setting">
+                <button id="start">Graj</button>
+            </div>
+            <hr>
+        </div>
+        <div class="game">
+            <table id="plansza">
+            </table>
+        </div>
+        <div class="messages">
+            <hr>
+            <p id="message">Podaj wymiary planszy i rozpocznij grę.</p>
+        </div>
+    </main>
+
+    <script>
+        // wymiary gry
+        let w = 0
+        let h = 0
+        let m = 0
+
+        let gra = true
+        let odkryte_pola = 0
+
+        // tablica z polami
+        let plansza = [] // tablice obiektów (pól) { x: int, y: int, mina: true/false, sasiednie_miny: int }
+        const kolorki = ["red", "green", "blue", "darkseagreen", "cornflowerblue", "beige", "orange", "navy"]
+
+        function flaga() {
+            console.log(this, this.dataset.x, this.dataset.y)
+
+            let x = this.dataset.x
+            let y = this.dataset.y
+
+            if (!gra) { return }
+            event.preventDefault()
+
+            console.log(`Oflagowano pole (${x}, ${y})`)
+        }
+
+        function klik() {
+            console.log(this, this.dataset.x, this.dataset.y)
+
+            let x = this.dataset.x
+            let y = this.dataset.y
+
+            if (!gra) { return }
+            console.log(`Kliknięto pole (${x}, ${y})`)
+
+            if (plansza[y][x].mina) {
+                alert("xdddd No i kurna przegrałeś")
+                gra = false
+            }
+        }
+
+        function przygotuj() {
+            plansza = []
+
+
+            const plansza_table = document.getElementById("plansza")
+            plansza_table.innerHTML = ''
+
+            // wypełnij planszę na razie bez min
+            let n_html = ''
+            for (let i = 0; i < h; i++) {
+                plansza.push([])
+                n_html += '<tr>'
+                for (let j = 0; j < w; j++) {
+                    plansza[i].push({ x: j, y: i, mina: false, sasiednie_miny: 0 })
+                    n_html += `<td class="nieodkryte-pole" id="p${j}${i}" onclick="klik" oncontextmenu="flaga" data-x="${j}" data-y="${j}"></td>`
+                }
+                n_html += '</tr>'
+            }
+            plansza_table.innerHTML += n_html
+        }
+
+        function losuj_miny() {
+            let max = w * h;
+            let miny = []
+            let wspolrzedne_min = []
+
+            while (miny.length < 10) {
+                let losowa = Math.floor(Math.random() * max)
+                if (miny.find(mina => mina == losowa) == undefined) {
+                    miny.push(losowa)
+                }
+            }
+
+            miny.forEach(mina => {
+                let w_m = Math.floor(mina / w)
+                let h_m = mina % h
+
+                wspolrzedne_min.push({ x: w_m, y: h_m })
+
+                // debug
+                document.getElementById(`p${w_m}${h_m}`).classList.add("debug-czerwony")
+            })
+
+            wspolrzedne_min.forEach(wspolrzedna => {
+                // znajdz pole
+                plansza[wspolrzedna.y][wspolrzedna.x].mina = true
+
+                // znajdz pola sasiadujace
+                for (let i = wspolrzedna.y - 1; i <= wspolrzedna.y + 1; i++) {
+                    if (i < 0) { continue }
+                    if (i >= h) { continue }
+
+                    for (let j = wspolrzedna.x - 1; j <= wspolrzedna.x + 1; j++) {
+                        if (j < 0) { continue }
+                        if (j >= w) { continue }
+
+                        if (j == wspolrzedna.x && i == wspolrzedna.y) { continue }
+
+                        plansza[i][j].sasiednie_miny += 1
+
+                        document.getElementById(`p${j}${i}`).innerText = plansza[i][j].sasiednie_miny
+                    }
+                }
+            })
+        }
+
+        // funkcja startu gry
+        document.getElementById("start").onclick = function () {
+            let w_t = parseInt(document.getElementById("width").value);
+            let h_t = parseInt(document.getElementById("height").value);
+            let m_t = parseInt(document.getElementById("mines").value);
+
+            // walidacja
+            if (
+                isNaN(w_t) |
+                isNaN(h_t) |
+                isNaN(m_t)
+            ) {
+                document.getElementById("message").innerText = "Podaj właściwe wymiary!"
+                return
+            }
+
+            w = w_t
+            h = h_t
+            m = m_t
+
+            przygotuj()
+            losuj_miny()
+
+
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file