@

@@ -0,0 +1,37 @@
+document.addEventListener('DOMContentLoaded', function() {
+
+    //const imieSelect = document.getElementById('imie');
+
+    let usersData = [];
+
+    imieSelect.addEventListener('focus', function() {
+        fetch('php/gget.php')
+            .then(response => response.json())
+            .then(data => {
+ /*
+                usersData = data; 
+                imieSelect.innerHTML = "";
+                data.forEach(dane => {
+                    const option = document.createElement('option');
+                    option.value = dane.id;
+                    option.textContent = dane.imie + " " + dane.nazwisko;
+                    imieSelect.appendChild(option);
+                });
+*/
+
+                console.log(data);
+    })
+            .catch(error => console.error('Error fetching data:', error));
+    });
+/*
+    imieSelect.addEventListener('change', function() {
+        const selectedId = imieSelect.value;
+        const selectedPerson = usersData.find(dane => dane.id == selectedId);
+        if (selectedPerson && selectedPerson.photo) {
+            photoDisplay.src = 'data:image/jpeg;base64,' + selectedPerson.photo;
+        } else {
+            photoDisplay.src = '';
+        }
+    });
+*/
+});

ark/baza.sql

@@ -0,0 +1,374 @@
+-- phpMyAdmin SQL Dump
+-- version 4.7.4
+-- https://www.phpmyadmin.net/
+--
+-- Host: 127.0.0.1
+-- Czas generowania: 19 Lut 2018, 10:39
+-- Wersja serwera: 10.1.28-MariaDB
+-- Wersja PHP: 7.1.10
+
+SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
+SET AUTOCOMMIT = 0;
+START TRANSACTION;
+SET time_zone = "+00:00";
+
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8mb4 */;
+
+--
+-- Baza danych: `wedkowanie`
+--
+
+-- --------------------------------------------------------
+
+--
+-- Struktura tabeli dla tabeli `lowisko`
+--
+
+CREATE TABLE `lowisko` (
+  `id` int(10) UNSIGNED NOT NULL,
+  `Ryby_id` int(10) UNSIGNED NOT NULL,
+  `akwen` text,
+  `wojewodztwo` text,
+  `rodzaj` int(10) UNSIGNED DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Zrzut danych tabeli `lowisko`
+--
+
+INSERT INTO `lowisko` (`id`, `Ryby_id`, `akwen`, `wojewodztwo`, `rodzaj`) VALUES
+(1, 2, 'Zalew Wegrowski', 'Mazowieckie', 4),
+(2, 3, 'Zbiornik Bukowka', 'Dolnoslaskie', 2),
+(3, 2, 'Jeziorko Bartbetowskie', 'Warminsko-Mazurskie', 2),
+(4, 1, 'Warta-Obrzycko', 'Wielkopolskie', 3),
+(5, 2, 'Stawy Milkow', 'Podkarpackie', 5),
+(6, 7, 'Przemsza k. Okradzinowa', 'Slaskie', 3);
+
+-- --------------------------------------------------------
+
+--
+-- Struktura tabeli dla tabeli `okres_ochronny`
+--
+
+CREATE TABLE `okres_ochronny` (
+  `id` int(10) UNSIGNED NOT NULL,
+  `Ryby_id` int(10) UNSIGNED NOT NULL,
+  `od_miesiaca` int(10) UNSIGNED DEFAULT NULL,
+  `do_miesiaca` int(10) UNSIGNED DEFAULT NULL,
+  `wymiar_ochronny` int(10) UNSIGNED DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Zrzut danych tabeli `okres_ochronny`
+--
+
+INSERT INTO `okres_ochronny` (`id`, `Ryby_id`, `od_miesiaca`, `do_miesiaca`, `wymiar_ochronny`) VALUES
+(1, 1, 1, 4, 50),
+(2, 2, 0, 0, 30),
+(3, 3, 1, 5, 50),
+(4, 4, 0, 0, 15),
+(5, 5, 11, 6, 70),
+(6, 6, 0, 0, 0),
+(7, 7, 0, 0, 0),
+(8, 8, 0, 0, 25);
+
+-- --------------------------------------------------------
+
+--
+-- Struktura tabeli dla tabeli `ryby`
+--
+
+CREATE TABLE `ryby` (
+  `id` int(10) UNSIGNED NOT NULL,
+  `nazwa` text,
+  `wystepowanie` text,
+  `styl_zycia` int(11) DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Zrzut danych tabeli `ryby`
+--
+
+INSERT INTO `ryby` (`id`, `nazwa`, `wystepowanie`, `styl_zycia`) VALUES
+(1, 'Szczupak', 'stawy, rzeki', 1),
+(2, 'Karp', 'stawy, jeziora', 2),
+(3, 'Sandacz', 'stawy, jeziora, rzeki', 1),
+(4, 'Okon', 'rzeki', 1),
+(5, 'Sum', 'jeziora, rzeki', 1),
+(6, 'Dorsz', 'morza, oceany', 1),
+(7, 'Leszcz', 'jeziora', 2),
+(8, 'Lin', 'jeziora', 2);
+
+-- --------------------------------------------------------
+
+--
+-- Struktura tabeli dla tabeli `samochody`
+--
+
+CREATE TABLE `samochody` (
+  `id` int(10) UNSIGNED NOT NULL,
+  `marka` text,
+  `model` text,
+  `rocznik` year(4) DEFAULT NULL,
+  `kolor` text,
+  `stan` text
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Zrzut danych tabeli `samochody`
+--
+
+INSERT INTO `samochody` (`id`, `marka`, `model`, `rocznik`, `kolor`, `stan`) VALUES
+(1, 'Fiat', 'Punto', 2016, 'czerwony', 'bardzo dobry'),
+(2, 'Fiat', 'Punto', 2002, 'czerwony', 'dobry'),
+(3, 'Fiat', 'Punto', 2007, 'niebieski', 'bardzo bobry'),
+(4, 'Opel', 'Corsa', 2016, 'grafitowy', 'bardzo dobry'),
+(5, 'Opel', 'Astra', 2003, 'niebieski', 'porysowany lakier'),
+(6, 'Toyota', 'Corolla', 2016, 'czerwony', 'bardzo dobry'),
+(7, 'Toyota', 'Corolla', 2014, 'szary', 'dobry'),
+(8, 'Toyota', 'Yaris', 2004, 'granatowy', 'dobry');
+
+-- --------------------------------------------------------
+
+--
+-- Struktura tabeli dla tabeli `typy`
+--
+
+CREATE TABLE `typy` (
+  `id` int(10) UNSIGNED NOT NULL,
+  `kategoria` text
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Zrzut danych tabeli `typy`
+--
+
+INSERT INTO `typy` (`id`, `kategoria`) VALUES
+(1, 'Procesor'),
+(2, 'RAM'),
+(5, 'karta graficzna'),
+(6, 'HDD');
+
+-- --------------------------------------------------------
+
+--
+-- Struktura tabeli dla tabeli `uczniowie`
+--
+
+CREATE TABLE `uczniowie` (
+  `imie` text,
+  `nazwisko` text,
+  `wiek` int(11) DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Zrzut danych tabeli `uczniowie`
+--
+
+INSERT INTO `uczniowie` (`imie`, `nazwisko`, `wiek`) VALUES
+('Kamil', 'Ryba', 11),
+('Karolina', 'Witecka', 8),
+('Karol', 'Rybacki', 9),
+('Marina', 'Damiencka', 9);
+
+-- --------------------------------------------------------
+
+--
+-- Struktura tabeli dla tabeli `uzytkownik`
+--
+
+CREATE TABLE `uzytkownik` (
+  `id` int(10) UNSIGNED NOT NULL,
+  `imie` text,
+  `nazwisko` text,
+  `telefon` text,
+  `email` text
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Zrzut danych tabeli `uzytkownik`
+--
+
+INSERT INTO `uzytkownik` (`id`, `imie`, `nazwisko`, `telefon`, `email`) VALUES
+(1, 'Anna', 'Kowalska', '601601601', 'anna@poczta.pl'),
+(2, 'Jan', 'Nowak', '608608608', 'jan@poczta.pl'),
+(3, 'Jolanta', 'Jasny', '606606606', 'jolanta@poczta.pl'),
+(4, 'qqq', 'www', '345', 'dsfsdklfs@daskl');
+
+-- --------------------------------------------------------
+
+--
+-- Struktura tabeli dla tabeli `wyniki`
+--
+
+CREATE TABLE `wyniki` (
+  `id` int(10) UNSIGNED NOT NULL,
+  `dyscyplina_id` int(10) UNSIGNED NOT NULL,
+  `sportowiec_id` int(10) UNSIGNED NOT NULL,
+  `wynik` decimal(5,2) DEFAULT NULL,
+  `dataUstanowienia` date DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Zrzut danych tabeli `wyniki`
+--
+
+INSERT INTO `wyniki` (`id`, `dyscyplina_id`, `sportowiec_id`, `wynik`, `dataUstanowienia`) VALUES
+(1, 1, 1, '12.40', '2015-10-14'),
+(2, 1, 1, '12.00', '2015-10-06'),
+(3, 1, 2, '11.80', '2015-10-14'),
+(4, 1, 2, '11.90', '2015-10-06'),
+(5, 1, 3, '11.50', '2015-10-14'),
+(6, 1, 3, '11.56', '2015-10-06'),
+(7, 1, 4, '11.70', '2015-10-14'),
+(8, 1, 4, '11.67', '2015-10-06'),
+(9, 1, 5, '11.30', '2015-10-14'),
+(10, 1, 5, '11.52', '2015-10-06'),
+(11, 1, 6, '12.10', '2015-10-14'),
+(12, 1, 6, '12.00', '2015-10-06'),
+(13, 3, 1, '63.00', '2015-11-11'),
+(14, 3, 1, '63.60', '2015-10-13'),
+(15, 3, 2, '64.00', '2015-11-11'),
+(16, 3, 2, '63.60', '2015-10-13'),
+(17, 3, 3, '60.00', '2015-11-11'),
+(18, 3, 3, '61.60', '2015-10-13'),
+(19, 3, 4, '63.50', '2015-11-11'),
+(20, 3, 4, '63.60', '2015-10-13'),
+(21, 3, 5, '70.00', '2015-10-07'),
+(22, 3, 6, '68.00', '2015-10-07');
+
+-- --------------------------------------------------------
+
+--
+-- Struktura tabeli dla tabeli `zamowienia`
+--
+
+CREATE TABLE `zamowienia` (
+  `id` int(10) UNSIGNED NOT NULL,
+  `Samochody_id` int(10) UNSIGNED NOT NULL,
+  `Klient` text,
+  `telefon` text,
+  `dataZam` date DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=latin1;
+
+--
+-- Zrzut danych tabeli `zamowienia`
+--
+
+INSERT INTO `zamowienia` (`id`, `Samochody_id`, `Klient`, `telefon`, `dataZam`) VALUES
+(1, 3, 'Anna Kowalska', '111222333', '2016-02-15'),
+(2, 6, 'Jan Nowakowski', '222111333', '2016-02-15'),
+(3, 8, 'Marcin Kolwal', '333111222', '2016-02-15');
+
+--
+-- Indeksy dla zrzutów tabel
+--
+
+--
+-- Indexes for table `lowisko`
+--
+ALTER TABLE `lowisko`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `okres_ochronny`
+--
+ALTER TABLE `okres_ochronny`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `ryby`
+--
+ALTER TABLE `ryby`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `samochody`
+--
+ALTER TABLE `samochody`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `typy`
+--
+ALTER TABLE `typy`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `uzytkownik`
+--
+ALTER TABLE `uzytkownik`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `wyniki`
+--
+ALTER TABLE `wyniki`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Indexes for table `zamowienia`
+--
+ALTER TABLE `zamowienia`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- AUTO_INCREMENT for dumped tables
+--
+
+--
+-- AUTO_INCREMENT dla tabeli `lowisko`
+--
+ALTER TABLE `lowisko`
+  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
+
+--
+-- AUTO_INCREMENT dla tabeli `okres_ochronny`
+--
+ALTER TABLE `okres_ochronny`
+  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
+
+--
+-- AUTO_INCREMENT dla tabeli `ryby`
+--
+ALTER TABLE `ryby`
+  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
+
+--
+-- AUTO_INCREMENT dla tabeli `samochody`
+--
+ALTER TABLE `samochody`
+  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
+
+--
+-- AUTO_INCREMENT dla tabeli `typy`
+--
+ALTER TABLE `typy`
+  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
+
+--
+-- AUTO_INCREMENT dla tabeli `uzytkownik`
+--
+ALTER TABLE `uzytkownik`
+  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
+
+--
+-- AUTO_INCREMENT dla tabeli `wyniki`
+--
+ALTER TABLE `wyniki`
+  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=23;
+
+--
+-- AUTO_INCREMENT dla tabeli `zamowienia`
+--
+ALTER TABLE `zamowienia`
+  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
+COMMIT;
+
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

css/style.css

@@ -0,0 +1,93 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f8f8f8;
+    margin: 0;
+    padding: 0;
+}
+
+.header {
+    background-color: #800040;
+    color: #ffffff;
+    padding: 20px;
+    text-align: center;
+    font-size: 2em;
+}
+
+.nav {
+    display: flex;
+    justify-content: center;
+    background-color: #d40054;
+    padding: 10px;
+}
+
+.nav img {
+    width: 50px;
+    height: 50px;
+    margin: 0 20px;
+    cursor: pointer;
+}
+
+.main-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 40px;
+    background-color: #fff1f4;
+}
+
+.form-container {
+    text-align: center;
+    padding: 20px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    width: 300px;
+}
+
+.form-container h2 {
+    color: #6b8e23;
+    font-size: 1.5em;
+}
+
+.form-container label {
+    display: block;
+    margin: 10px 0 5px;
+    color: #333;
+}
+
+.form-container input[type="text"] {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.form-container input[type="submit"] {
+    background-color: #800040;
+    color: white;
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    width: 100%;
+}
+
+.footer {
+    background-color: #800040;
+    color: white;
+    text-align: center;
+    padding: 10px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+.car-image {
+    margin-left: 30px;
+}
+
+.car-image img {
+    width: 150px;
+}
+

get.js

@@ -1,12 +0,0 @@
-	fetch('sample.json')
-		.then(response => response.json())
-		.then(data => {
-		
-		console.log(data);
-
-                return response.json();
-
-});
-
-
-

index.html

@@ -1,9 +1,51 @@
+<!DOCTYPE html>
+<html lang="pl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Całodobowa stacja paliw</title>
+    <link rel="stylesheet" href="css/style.css">
+    
+    <script type="module" src="js/script.js"></script>
 
-
-
+</head>
 <body>
-<h1>Siema</h1>
+    <div class="header">
+        Całodobowa stacja paliw
+    </div>
 
+    <div class="nav">
+        <a href="#"><img src="imgs/home.png" alt="Home"></a>
+        <a href="#"><img src="imgs/znak.png" alt="Documents"></a>
+    </div>
 
-<script src="get.js"></script>
+    <div class="main-content">
+        <div class="form-container">
+            <h2>Orientacyjny koszt paliwa</h2>
+
+                <form action="obliczenia.html" method="POST">
+                    <label for="fuel-type">Rodzaj paliwa:</label>
+
+                    <select id="fuel-type" name="fuel-type">
+                    </select>
+                    
+                    <label id="cena">Calculate ...</label>
+
+                    <label for="liters">Ile litrów?</label>
+                    <input type="text" id="liters" name="liters">
+                    
+                    <input type="submit" value="OBLICZ">
+                </form>
+
+        </div>
+        <div class="car-image">
+            <img src="imgs/samochod.jpg" alt="Car">
+        </div>
+    </div>
+
+    <div class="footer">
+        Stronę opracował: 000000000000
+    </div>
 </body>
+</html>
+

js/get.js

@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const imieSelect = document.getElementById('imie');
+    const photoDisplay = document.createElement('img');
+    photoDisplay.style.width = "200px";
+    photoDisplay.style.height = "auto";
+    document.getElementById('prawy').appendChild(photoDisplay);
+
+    let usersData = [];
+
+    imieSelect.addEventListener('focus', function() {
+        fetch('get.php')
+            .then(response => response.json())
+            .then(data => {
+                usersData = data; 
+                imieSelect.innerHTML = "";
+                data.forEach(dane => {
+                    const option = document.createElement('option');
+                    option.value = dane.id;
+                    option.textContent = dane.imie + " " + dane.nazwisko;
+                    imieSelect.appendChild(option);
+                });
+            })
+            .catch(error => console.error('Error fetching data:', error));
+    });
+
+    imieSelect.addEventListener('change', function() {
+        const selectedId = imieSelect.value;
+        const selectedPerson = usersData.find(dane => dane.id == selectedId);
+        if (selectedPerson && selectedPerson.photo) {
+            photoDisplay.src = 'data:image/jpeg;base64,' + selectedPerson.photo;
+        } else {
+            photoDisplay.src = '';
+        }
+    });
+});

js/script.js

@@ -0,0 +1,42 @@
+const fuelType = document.getElementById('fuel-type');
+
+const cena = document.getElementById("cena");
+
+let usersData = [];
+
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('php/gget.php')
+        .then(response => response.json())
+        .then(data => {
+            usersData = data;
+
+            data.forEach(row => {
+                const option = document.createElement('option');
+                option.value = row["nazwa"];
+                option.textContent = row["nazwa"];
+                fuelType.appendChild(option);
+
+                console.log(row);
+            });
+
+            console.log(data);
+        })
+        .catch(error => console.error('Error fetching data:', error));
+});
+
+fuelType.addEventListener('change', function() {
+    console.log("Zmiana wybranego paliwa");
+    const selectedId = fuelType.value;
+
+    const selectedFuel = usersData.find(dane => dane.nazwa === selectedId);
+
+    cena.textContent = selectedFuel["cena"];
+    console.log("mati");
+    if (selectedFuel) {
+        const cena = selectedFuel.cena;
+        console.log("Cena wybranego paliwa:", cena);
+    } else {
+        console.error("Nie znaleziono ceny dla wybranego paliwa");
+    }
+});
+

php/gget.php

@@ -0,0 +1,15 @@
+<?php
+
+$polaczenie = mysqli_connect("172.19.0.2", "root", "secret", "db");
+
+$kwerenda = mysqli_query($polaczenie, "SELECT * FROM paliwa ORDER BY id DESC LIMIT 3;");
+
+$json = array();
+
+while($row = mysqli_fetch_assoc($kwerenda)) {
+    $json [] = $row;
+};
+
+echo json_encode($json);
+
+?>

sample.json

@@ -1 +0,0 @@
-{ "stadion": "cos", "name": "rzodkiew" }

sql/s1.sql

@@ -0,0 +1,12 @@
+CREATE TABLE paliwa (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    nazwa VARCHAR(50) NOT NULL,
+    cena DECIMAL(5, 2) NOT NULL
+);
+
+INSERT INTO paliwa (nazwa, cena) VALUES
+('E10', 5.49),
+('Diesel', 6.19),
+('E98', 6.49),
+('E95', 5.99);
+