main padding

wciecie listy
u
2025-09-04 13:12:02 +02:00 · 2025-09-04 13:09:35 +02:00 · 2025-09-04 13:08:20 +02:00 · 2025-09-04 13:07:01 +02:00 · 2025-09-04 13:06:05 +02:00 · 2025-09-04 13:00:25 +02:00
9 changed files with 77 additions and 186 deletions
--- a/css/layout.css
+++ b/css/layout.css
@ -14,6 +14,14 @@ header img {
    width: 100%;
 }

+/* 
+    position: absolute – wyrzuca tekst z normalnego przepływu strony i umieszcza go nad obrazkiem.
+    top: 50%; left: 50% – zaczyna od środka nagłówka.
+    transform: translate(-50%, -50%) – przesuwa tekst o połowę jego szerokości/wysokości, by był idealnie wyśrodkowany.
+    color: white – biały tekst na ciemnym tle obrazka.
+    font-size: 48px – duży tekst. 
+*/
+
 .header-text {
    position: absolute;
    top: 50%;
@ -24,6 +32,10 @@ header img {
    font-weight: bold;
 }

+/* 
+nav (menu) i footer (stopka) mają ciemnoszare tło (#625B5B), biały tekst i padding.
+text-align: center – centruje zawartość. 
+*/
 nav, footer {
    background-color: #625B5B;
    color: white;
@ -31,6 +43,16 @@ nav, footer {
    text-align: center;
 }

+/* 
+a w nav to linki:
+font-weight: bold – pogrubienie
+background-color: #EAEAEA – jasny tło przycisków
+color: #625B5B – ciemny kolor tekstu
+padding: 10px – przestrzeń wewnątrz przycisku
+margin: 50px – duża przestrzeń między linkami
+border-radius: 20px – zaokrąglone rogi
+text-decoration: none – usuwa podkreślenie linków 
+*/
 nav a {
    font-weight: bold;
    background-color: #EAEAEA;
@ -41,17 +63,29 @@ nav a {
    text-decoration: none;
 }

+/* Efekt po najechaniu myszą:
+Tło staje się ciemne, tekst jasny → efekt "przełączania"
+border: 1px solid – dodaje obramowanie */
+
 nav a:hover {
    background-color: #625B5B;
    color: #EAEAEA;
    border: 1px solid #EAEAEA;
 }

+/* margin-left: 40px – wcięcie listy
+list-style-type: circle – kropki jako kółka */
+
 ul {
    margin-left: 40px;
    list-style-type: circle;
 }

+/* border: 1px dashed – przerywana linia wokół tabeli
+width: 60% – tabela zajmuje 60% szerokości kontenera
+margin-left: 40px – wcięcie od lewej
+text-align: center – tekst w tabeli jest wyśrodkowany */
+
 table {
    border: 1px dashed #625B5B;
    width: 60%;
@ -59,10 +93,13 @@ table {
    text-align: center;
 }

+/* Klasa .kontrolki – np. dla przycisków, daje mały margines. */
 .kontrolki {
    margin: 5px;
 }

+/* main – główna treść strony ma wewnętrzny odstęp 20px od brzegów. */
+
 main {
    padding: 20px;
 }
--- a/i1.html
+++ b/i1.html
@ -4,22 +4,24 @@
    <meta charset="UTF-8">
    <title>Kursy komputerowe</title>
    <link rel="stylesheet" href="css/layout.css">
-    <script src="js/script.js" defer> </script>
-
 </head>
 <body>
+
    <header>
        <img src="imgs/baner.png" alt="kursy komputerowe">
-        <div class="header-text">hello</div>
+        <div class="header-text">Kursy komputerowe</div>
    </header>
+
+
    <nav>
        <a href="i1.html">Strona główna</a>
        <a href="raty.html">Koszt rat</a>
        <a href="https://moje-szkolenia.pl/">Nasz partner</a>
    </nav>
+    
    <main>
        <h3>Kursy komputerowe - programowanie</h3>
-                <table id="tab">
+        <table>
            <tr>
                <th>Kurs</th>
                <th>Czas trwania</th>
--- a/imgs/baner.png
+++ b/imgs/baner.png
--- a/js/script.js
+++ b/js/script.js
@ -1,44 +1,37 @@
 document.addEventListener('DOMContentLoaded', function() {
-    console.log("ok");
-
-    const fetchData = () => {
-        return fetch('./php/get.php')
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error('Błąd pobierania danych');
-                }
-                return response.json();
-            })
-            .then(data => {
-                console.log("Dane załadowane:", data);
-                renderTable(data); // Wywołaj funkcję renderującą tabelę
-            })
-            .catch(error => {
-                console.error("Błąd:", error);
-            });
-    };
-
-    // Funkcja do renderowania danych w tabeli
-    const renderTable = (data) => {
-        const table = document.getElementById('tab');
-
-        // Usuń wszystkie rzędy po nagłówku (czyli od drugiego)
-        while (table.rows.length > 1) {
-            table.deleteRow(1);
-        }
-
-        // Dodaj nowe wiersze dla każdego kursu
-        data.forEach(row => {
-            const tr = document.createElement('tr');
-            tr.innerHTML = `
-                <td>${row.kurs}</td>
-                <td>${row.czas_trwania}</td>
-                <td>${row.cena}</td>
-            `;
-            table.appendChild(tr);
+    document.getElementById('oblicz').addEventListener('click', function() {
+        // Pobieranie wybranych kursów
+        const wybraneKursy = document.querySelectorAll('input[name="kurs"]:checked');
+        // Ceny kursów
+        const cenaReact = 1500;
+        const cenaJavaScript = 1200;
+        
+        // Obliczanie całkowitej kwoty
+        let calkowitaKwota = 0;
+        wybraneKursy.forEach(kurs => {
+            if (kurs.value === 'React.js') {
+                calkowitaKwota += cenaReact;
+            } else if (kurs.value === 'JavaScript') {
+                calkowitaKwota += cenaJavaScript;
+            }
        });
-    };
-
-    // Uruchom pobieranie danych
-    fetchData();
+        
+        // Pobieranie liczby rat
+        const iloscRat = parseInt(document.getElementById('raty').value);
+        // Pobieranie miasta
+        const miasto = document.getElementById('miasto').value;
+        
+        // Sprawdzanie poprawności danych
+        if (wybraneKursy.length === 0 || isNaN(iloscRat) || iloscRat <= 0) {
+            document.getElementById('wynik').textContent = 'Proszę wybrać przynajmniej jeden kurs i podać poprawną liczbę rat.';
+            return;
+        }
+        
+        // Obliczanie miesięcznej raty
+        const rata = calkowitaKwota / iloscRat;
+        
+        // Wyświetlanie wyniku
+        document.getElementById('wynik').textContent = 
+            `Kurs odbędzie się w ${miasto}. Koszt całkowity: ${calkowitaKwota} zł. Płacisz ${iloscRat} rat po ${rata.toFixed(2)} zł`;
+    });
 });
--- a/php/get.php
+++ b/php/get.php
@ -1,16 +0,0 @@
-<?php
-$polaczenie = mysqli_connect("172.18.0.2", "root", "secret", "szkolenia");
-
-$kwerenda = mysqli_query($polaczenie, "SELECT REPLACE(k.nazwa, 'Kurs ', '') AS kurs, k.czas_trwania AS czas_trwania, CONCAT(k.cena, ' zł') AS cena FROM kursy k ORDER BY k.id");
-
-$json = array();
-
-while ($row = mysqli_fetch_assoc($kwerenda)) {
-    $json[] = $row;
-}
-
-mysqli_close($polaczenie);
-
-echo json_encode($json );
-?>
-
--- a/sql/k1.sql
+++ b/sql/k1.sql
@ -1 +0,0 @@
-SELECT REPLACE(k.nazwa, 'Kurs ', '') AS kurs, k.czas_trwania AS czas_trwania, CONCAT(k.cena, ' zł') AS cena FROM kursy k ORDER BY k.id
--- a/sql/s1.sql
+++ b/sql/s1.sql
@ -1,51 +0,0 @@
-- Utwórz bazę danych dla firmy szkoleniowej
-CREATE DATABASE IF NOT EXISTS szkolenia CHARACTER SET utf8 COLLATE utf8_unicode_ci;
-
-- Wybierz bazę danych do pracy
-USE szkolenia;
-
-- Tabela: kategorie_kursow
-- Przechowuje informacje o poziomach kursów (np. podstawowy, średni, zaawansowany)
-CREATE TABLE IF NOT EXISTS kategorie_kursow (
-    id INT AUTO_INCREMENT PRIMARY KEY,
-    nazwa VARCHAR(50) NOT NULL UNIQUE,
-    opis TEXT
-);
-
-- Wstaw dane do tabeli kategorii
-INSERT INTO kategorie_kursow (nazwa, opis) VALUES
-('podstawowy', 'Kurs przeznaczony dla początkujących'),
-('średni', 'Kurs dla osób mających podstawową wiedzę'),
-('zaawansowany', 'Kurs dla osób posiadających zaawansowaną wiedzę');
-
-- Tabela: kursy
-- Przechowuje informacje o konkretnych kursach
-CREATE TABLE IF NOT EXISTS kursy (
-    id INT AUTO_INCREMENT PRIMARY KEY,
-    nazwa VARCHAR(255) NOT NULL,
-    cena DECIMAL(10, 2) NOT NULL,
-    id_kategorii INT,
-    FOREIGN KEY (id_kategorii) REFERENCES kategorie_kursow(id),
-    UNIQUE KEY unique_nazwa (nazwa)
-);
-
-- Wstaw dane do tabeli kursy (zgodnie z ilustracją 4)
-INSERT INTO kursy (nazwa, cena, id_kategorii) VALUES
-('Kurs HTML i CSS', 500.00, 1), -- podstawowy
-('Kurs JavaScript', 700.00, 2), -- średni
-('Kurs React.js', 900.00, 3); -- zaawansowany
-
-- Tabela: miasta
-- Przechowuje listę miast, w których odbywają się kursy
-CREATE TABLE IF NOT EXISTS miasta (
-    id INT AUTO_INCREMENT PRIMARY KEY,
-    nazwa VARCHAR(100) NOT NULL UNIQUE
-);
-
-- Wstaw dane do tabeli miasta
-INSERT INTO miasta (nazwa) VALUES
-('Warszawa'),
-('Katowice'),
-('Gdańsk');
-
-
--- a/sql/s2.sql
+++ b/sql/s2.sql
@ -1,10 +0,0 @@
-- Zapytanie 3: Tworzenie użytkownika 'Marek'
-CREATE USER IF NOT EXISTS 'Marek'@'localhost' IDENTIFIED BY 'M@reK';
-
-- Zapytanie 4: Nadanie uprawnień
-- Użytkownik Marek ma prawo do przeglądania i aktualizowania danych tylko w tabeli `kursy`
-GRANT SELECT, UPDATE ON szkolenia.kursy TO 'Marek'@'localhost';
-
-- Odświeżenie uprawnień
-FLUSH PRIVILEGES;
-
--- a/sql/s3.sql
+++ b/sql/s3.sql
@ -1,63 +0,0 @@
-- Utwórz bazę danych dla firmy szkoleniowej
-CREATE DATABASE IF NOT EXISTS szkolenia CHARACTER SET utf8 COLLATE utf8_unicode_ci;
-
-- Wybierz bazę danych do pracy
-USE szkolenia;
-
-- Tabela: kategorie_kursow
-CREATE TABLE IF NOT EXISTS kategorie_kursow (
-    id INT AUTO_INCREMENT PRIMARY KEY,
-    nazwa VARCHAR(50) NOT NULL UNIQUE,
-    opis TEXT
-);
-
-- Wstaw dane do tabeli kategorii
-INSERT INTO kategorie_kursow (nazwa, opis) VALUES
-('podstawowy', 'Kurs przeznaczony dla początkujących'),
-('średni', 'Kurs dla osób mających podstawową wiedzę'),
-('zaawansowany', 'Kurs dla osób posiadających zaawansowaną wiedzę');
-
-- Tabela: kursy (z dodanym czasem trwania)
-CREATE TABLE IF NOT EXISTS kursy (
-    id INT AUTO_INCREMENT PRIMARY KEY,
-    nazwa VARCHAR(255) NOT NULL,
-    cena DECIMAL(10, 2) NOT NULL,
-    czas_trwania VARCHAR(50) NOT NULL DEFAULT '2 miesiące',
-    id_kategorii INT,
-    FOREIGN KEY (id_kategorii) REFERENCES kategorie_kursow(id),
-    UNIQUE KEY unique_nazwa (nazwa)
-);
-
-- Wstaw dane do tabeli kursy z czasem trwania
-INSERT INTO kursy (nazwa, cena, czas_trwania, id_kategorii) VALUES
-('Kurs HTML i CSS', 500.00, '2 miesiące', 1),
-('Kurs JavaScript', 700.00, '3 miesiące', 2),
-('Kurs React.js', 900.00, '4 miesiące', 3);
-
-- Tabela: miasta
-CREATE TABLE IF NOT EXISTS miasta (
-    id INT AUTO_INCREMENT PRIMARY KEY,
-    nazwa VARCHAR(100) NOT NULL UNIQUE
-);
-
-- Wstaw dane do tabeli miasta
-INSERT INTO miasta (nazwa) VALUES
-('Warszawa'),
-('Katowice'),
-('Gdańsk');
-
-- Tabela: kursy_miasta (relacja wiele-do-wielu: kurs może być w wielu miastach)
-CREATE TABLE IF NOT EXISTS kursy_miasta (
-    id_kursu INT NOT NULL,
-    id_miasta INT NOT NULL,
-    PRIMARY KEY (id_kursu, id_miasta),
-    FOREIGN KEY (id_kursu) REFERENCES kursy(id) ON DELETE CASCADE,
-    FOREIGN KEY (id_miasta) REFERENCES miasta(id) ON DELETE CASCADE
-);
-
-- Przykładowe przypisanie kursów do miast (każdy kurs w każdym mieście)
-INSERT INTO kursy_miasta (id_kursu, id_miasta)
-SELECT k.id, m.id
-FROM kursy k
-CROSS JOIN miasta m;
-
Author	SHA1	Message	Date
baiobelfer	86863e1fd9	main padding	2025-09-04 13:12:02 +02:00
baiobelfer	db80169e66	wciecie listy	2025-09-04 13:09:35 +02:00
baiobelfer	d850ff8029	u	2025-09-04 13:08:20 +02:00
baiobelfer	e717d96683	hover	2025-09-04 13:07:01 +02:00
baiobelfer	10a2452ad3	nav a	2025-09-04 13:06:05 +02:00
baiobelfer	a9e4b4bafb	add comments	2025-09-04 13:00:25 +02:00
baiobelfer	63060a9db8	pozycjonowaanie textu na png@header	2025-09-04 12:54:12 +02:00
baiobelfer	e26fa89233	replace png	2025-09-04 12:41:35 +02:00
baiobelfer	63c9e396b9	style body	2025-09-04 12:25:24 +02:00
				`@ -1 +0,0 @@`
				`SELECT REPLACE(k.nazwa, 'Kurs ', '') AS kurs, k.czas_trwania AS czas_trwania, CONCAT(k.cena, ' zł') AS cena FROM kursy k ORDER BY k.id`