From a2f66a381c618ee12d16ccd7cb782a8a15d9238d Mon Sep 17 00:00:00 2001 From: rzodkiev Date: Wed, 26 Feb 2025 14:22:01 +0100 Subject: [PATCH] nara --- 1 | 34 +++++ css/style.css | 372 +++++++++++++++++++++++++++++++++---------------- index.html | 41 +++--- js/.get.js.swp | Bin 0 -> 12288 bytes js/get.js | 36 +++++ php/get.php | 16 +++ php/post.php | 2 +- sql/init.sql | 7 + 8 files changed, 367 insertions(+), 141 deletions(-) create mode 100644 1 create mode 100644 js/.get.js.swp create mode 100644 js/get.js create mode 100644 php/get.php create mode 100644 sql/init.sql diff --git a/1 b/1 new file mode 100644 index 0000000..6abbf5f --- /dev/null +++ b/1 @@ -0,0 +1,34 @@ +const listOfUsers = []; + +function getData() { + + fetch('./php/get.php') + .then(response => { + return response.json(); + }) + .then(data => { + // Dodaj pobrane dane do tablicy + + listOfUsers.push(...data); + + // Wyświetl dane w konsoli + console.log("Lista użytkowników:", listOfUsers); + + // Wyświetl imiona na stronie + const resultDiv = document.getElementById('orderTables'); + + + let html = '

Znalezieni użytkownicy:

'; + resultDiv.innerHTML = html; + }) + .catch(error => { + console.error("Wystąpił błąd podczas pobierania danych:", error); + const resultDiv = document.getElementById('result'); + resultDiv.innerHTML = '

Błąd podczas pobierania danych. Sprawdź konsolę.

'; + }); +} diff --git a/css/style.css b/css/style.css index 585e1b6..58b7eb8 100644 --- a/css/style.css +++ b/css/style.css @@ -1,132 +1,258 @@ - /* RESET / PODSTAWOWE STYLOWANIE */ - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - body { - font-family: Arial, sans-serif; - background-color: #f2f2f2; - color: #333; - } +/* RESET / PODSTAWOWE STYLOWANIE */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} - /* LAYOUT GŁÓWNY */ - header, nav, main, footer { - padding: 10px 20px; - margin: 10px auto; - max-width: 1200px; - background-color: #fff; - } +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + color: #333; + line-height: 1.6; /* Lepsza czytelność tekstu */ +} - /* NAGŁÓWEK */ - header { - border: 1px solid #ccc; - text-align: center; - } - header h1 { - margin: 10px 0; - font-size: 2em; - color: #444; - } +/* LAYOUT GŁÓWNY */ +header, nav, main, footer { + padding: 15px 20px; /* Nieco większy padding dla lepszego wyglądu */ + margin: 10px auto; + max-width: 1200px; + background-color: #fff; + border-radius: 4px; /* Zaokrąglone rogi dla spójności */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Lekki cień dla głębi */ +} - /* NAWIGACJA */ - nav { - border: 1px solid #ccc; - margin-top: 0; - display: flex; - justify-content: center; - background: #f9f9f9; - } - nav a { - text-decoration: none; - color: #333; - margin: 0 10px; - font-weight: bold; - padding: 8px; - transition: background 0.3s; - } - nav a:hover { - background: #e0e0e0; - } +/* NAGŁÓWEK */ +header { + border: 1px solid #ccc; + text-align: center; +} - /* GŁÓWNA SEKCJA */ - main { - border: 1px solid #ccc; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: 20px; - padding: 20px; - } +header h1 { + margin: 15px 0; + font-size: 2.5em; /* Nieco większy tytuł dla lepszej widoczności */ + color: #444; + font-weight: 700; /* Pogrubienie tytułu */ +} - /* KONTENERY W MAIN */ - .form-section, - .table-section { - flex: 1 1 450px; /* minimalna szerokość 450px, a reszta elastycznie */ - border: 1px solid #ddd; - padding: 15px; - background: #fafafa; - } - .form-section h2, - .table-section h2 { - margin-bottom: 10px; - font-size: 1.2em; - border-bottom: 1px solid #ccc; - } +/* NAWIGACJA */ +nav { + border: 1px solid #ccc; + margin-top: 0; + display: flex; + justify-content: center; + background: #f9f9f9; +} - /* FORMULARZ */ - form { - display: flex; - flex-direction: column; - gap: 10px; - } - form label { - display: flex; - flex-direction: column; - font-weight: bold; - } - form input[type="date"], - form input[type="number"], - form input[type="text"], - form select { - padding: 5px; - width: 100%; - } - form button { - align-self: flex-start; - padding: 8px 12px; - background-color: #4CAF50; - color: #fff; - border: none; - cursor: pointer; - transition: background 0.3s; - font-size: 1em; - } - form button:hover { - background-color: #45a049; - } +nav a { + text-decoration: none; + color: #333; + margin: 0 15px; /* Większy odstęp między linkami */ + font-weight: bold; + padding: 10px 12px; /* Większy padding dla lepszej interakcji */ + transition: background 0.3s, color 0.3s; /* Dodano przejście dla koloru tekstu */ + border-radius: 4px; /* Zaokrąglone rogi dla spójności */ +} - /* TABELA */ - table { - width: 100%; - border-collapse: collapse; - margin-top: 10px; - } - table th, table td { - border: 1px solid #ccc; - padding: 8px; - text-align: left; - } - table th { - background-color: #eee; - } +nav a:hover { + background: #e0e0e0; + color: #000; /* Ciemniejszy kolor tekstu przy najechaniu */ +} - /* STOPKA */ - footer { - border: 1px solid #ccc; - text-align: center; - margin-top: 0; - font-size: 0.9em; - background: #f9f9f9; - } +/* GŁÓWNA SEKCJA */ +main { + border: 1px solid #ccc; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 25px; /* Większy odstęp między sekcjami */ + padding: 25px; + border-radius: 4px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} +/* KONTENERY W MAIN */ +.form-section, +.table-section { + flex: 1 1 450px; /* Minimalna szerokość 450px, a reszta elastycznie */ + border: 1px solid #ddd; + padding: 20px; + background: #fafafa; + border-radius: 4px; /* Zaokrąglone rogi */ + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Lekki cień */ +} + +.form-section h2, +.table-section h2 { + margin-bottom: 15px; + font-size: 1.5em; /* Większy nagłówek dla lepszej czytelności */ + border-bottom: 2px solid #ccc; /* Grubsza linia pod nagłówkiem */ + padding-bottom: 5px; + color: #444; +} + +/* FORMULARZ */ +form { + display: flex; + flex-direction: column; + gap: 15px; +} + +form label { + display: flex; + flex-direction: column; + font-weight: bold; + color: #555; /* Ciemniejszy kolor etykiet */ +} + +form input[type="date"], +form input[type="number"], +form input[type="text"], +form select { + padding: 8px; /* Większy padding dla lepszej użyteczności */ + width: 100%; + border: 1px solid #ddd; + border-radius: 4px; /* Zaokrąglone rogi */ + font-size: 1em; + transition: border-color 0.3s; +} + +form input[type="date"]:focus, +form input[type="number"]:focus, +form input[type="text"]:focus, +form select:focus { + border-color: #4CAF50; /* Zielona obwódka przy fokusie */ + outline: none; +} + +form button { + align-self: flex-start; + padding: 10px 20px; /* Większy padding dla lepszej widoczności */ + background-color: #4CAF50; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 1.1em; /* Nieco większy tekst przycisku */ + transition: background 0.3s, transform 0.2s; /* Dodano transform dla animacji */ +} + +form button:hover { + background-color: #45a049; + transform: scale(1.05); /* Nieznaczne powiększenie przy najechaniu */ +} + +/* TABELA I PRZYCISK W SEKCJI TABELI */ +.table-section .table-controls button { + padding: 10px 20px; /* Większy padding dla spójności z formularzem */ + background-color: #4CAF50; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 1.1em; + transition: background 0.3s, transform 0.2s; +} + +.table-section .table-controls button:hover { + background-color: #45a049; + transform: scale(1.05); /* Powiększenie przy najechaniu */ +} + +.table-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; +} + +/* TABELA */ +#ordersTable { + width: 100%; + border-collapse: collapse; + margin-top: 10px; +} + +#ordersTable th, #ordersTable td { + border: 1px solid #ccc; + padding: 12px; /* Większy padding dla czytelności */ + text-align: left; +} + +#ordersTable th { + background-color: #eee; + font-weight: bold; + color: #444; +} + +/* STOPKA */ +footer { + border: 1px solid #ccc; + text-align: center; + margin-top: 0; + font-size: 1em; /* Większy tekst stopki */ + background: #f9f9f9; + border-radius: 4px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +/* RESPONSYWNOŚĆ */ +@media (max-width: 768px) { + header, nav, main, footer { + margin: 5px auto; + padding: 10px; + } + + header h1 { + font-size: 2em; + } + + nav { + flex-direction: column; + align-items: center; + } + + nav a { + margin: 5px 0; + padding: 8px 10px; + } + + main { + padding: 15px; + gap: 15px; + } + + .form-section, + .table-section { + flex: 1 1 100%; /* Pełna szerokość na małych ekranach */ + margin-bottom: 15px; + } + + #ordersTable th, #ordersTable td { + padding: 8px; + font-size: 0.9em; + } + + form button, + .table-section .table-controls button { + padding: 8px 16px; + font-size: 1em; + } +} + +@media (max-width: 480px) { + #ordersTable th, #ordersTable td { + font-size: 0.8em; + padding: 6px; + } + + .table-header { + flex-direction: column; + align-items: flex-start; + } + + .table-controls { + margin-top: 10px; + text-align: left; + } +} diff --git a/index.html b/index.html index 2a6d0fd..2dc6130 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ Panel zamówień + @@ -48,23 +49,29 @@ - -
-

Lista zamówień

- - - - - - - - - - - - -
ImięNazwiskoData zamówieniaKwota
-
+ +
+
+

Lista zamówień

+
+ +
+
+ + + + + + + + + + + + +
ImięNazwiskoData zamówieniaKwota
+
+ diff --git a/js/.get.js.swp b/js/.get.js.swp new file mode 100644 index 0000000000000000000000000000000000000000..e4424185dc74e63ed87a5928a9e34677042a07e3 GIT binary patch literal 12288 zcmeI2O;6N77{>>$3K-FwhjAfk@ns52FbZW41QJOgVgxY~6K304TIf!jcIsv!iwOz( z8PpG7x3aU`^FYyR*odkWdBTeI`i-I{O0L_>=efzE-uqMY=S_$ zK*+VBPg})7n@rs&BuzxDhkG?w6n!px%_3x98(IM`N0z6`ffeO%u{_I<=clag#M%;y zZ7025a0U`U0;eXBs?yEd17tEkF|OB+ur=OFO& zAo%^i{r~^ZAwqtDzJb1i-h*C&5|9U40gZripx=Xp`~rOey#PH2ZGbL=E`f$Y-v_`8 z^aivKlAtnZ1!RH@&=pWW=q3on4+lU-U)HrO&C$ zW!3Q*eGtXG;?_UVolquWaP*SdR#Y&u4{+d~It~#6b3-RB3#k~K1zre*zMQKrx~9?0 z!#I(hHV6a3L>z~)nOmgX`?>j$*hBf{z24cb`M<;Wba9M5bF)7b*u>yWICkmRFXC#*={sZQG#+_YO!W*knjOJVGac$F6e zk(}Hr%cASm`s<1>R6zZ*A4*Q)lc+e9zQ}@UZ)*^4nYkrDQM@bGozL$odiMetzgJp= ztdp)i)C@C^f`SyZ(keqglUU|UmmQ1J#4{OVnlE@~=7ITq=<;n{^ic9bS3LX)se-ft zWM?u{o{*-t_^Xy^w#7oFvDEKD1obT7416ffuAG`q?c2w0C85jJU{>Tsjl=WM8&IjG eR5}U(Q+SEy;rZqmlrm{ { + return response.json(); + }) + .then(data => { + // Dodaj pobrane dane do tablicy + + listOfUsers.push(...data); + + // Wyświetl dane w konsoli + console.log("Lista użytkowników:", listOfUsers); + + // Wyświetl imiona na stronie + const resultDiv = document.getElementById('ordersTable'); + + + let html = '

Znalezieni użytkownicy:

    '; + + data.forEach(user => { + html += `
  • Id: ${user.id}, nazwa: ${user.nazwa}, cena: ${user.cena}
    • `; + }); + + html += '
'; + resultDiv.innerHTML = html; + + }) + .catch(error => { + console.error("Wystąpił błąd podczas pobierania danych:", error); + const resultDiv = document.getElementById('result'); + resultDiv.innerHTML = '

Błąd podczas pobierania danych. Sprawdź konsolę.

'; + }); +} diff --git a/php/get.php b/php/get.php new file mode 100644 index 0000000..c62e476 --- /dev/null +++ b/php/get.php @@ -0,0 +1,16 @@ + + diff --git a/php/post.php b/php/post.php index 9a1dc66..28cd582 100644 --- a/php/post.php +++ b/php/post.php @@ -1,6 +1,6 @@