c2021/AiArk-21.2.2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: c2021:t
Branches Tags
c2021:mpabi
c2021:build
c2021:t
c2021:menu
..
compare: c2021:mpabi
Branches Tags
c2021:build
c2021:t
c2021:menu
c2021:mpabi

No commits in common. "t" and "mpabi" have entirely different histories.
t ... mpabi

7 changed files with 201 additions and 190 deletions
Show Stats Expand all files Collapse all files

34
1 Normal file
View File

@ -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 = '<h3>Znalezieni użytkownicy:</h3><ul>';
data.forEach(user => {
html += `<li>${user.cena}</li>`;
});
html += '</ul>';
resultDiv.innerHTML = html;
})
.catch(error => {
console.error("Wystąpił błąd podczas pobierania danych:", error);
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = '<p>Błąd podczas pobierania danych. Sprawdź konsolę.</p>';
});
}

191
css/style.css
View File

@ -1,4 +1,4 @@
/* RESET I PODSTAWY */ /* RESET / PODSTAWOWE STYLOWANIE */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -7,97 +7,88 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background: #f2f2f2; background-color: #f2f2f2;
color: #333; color: #333;
line-height: 1.6; line-height: 1.6; /* Lepsza czytelność tekstu */
} }
/* LAYOUT GŁÓWNY */ /* LAYOUT GŁÓWNY */
header, nav, main, footer { header, nav, main, footer {
max-width: 1200px; padding: 15px 20px; /* Nieco większy padding dla lepszego wyglądu */
margin: 10px auto; margin: 10px auto;
padding: 15px; max-width: 1200px;
background: #fff; background-color: #fff;
border: 1px solid #ccc; border-radius: 4px; /* Zaokrąglone rogi dla spójności */
border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Lekki cień dla głębi */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} }
/* NAGŁÓWEK */ /* NAGŁÓWEK */
header { header {
border: 1px solid #ccc;
text-align: center; text-align: center;
} }
header h1 { header h1 {
font-size: 2.5em; margin: 15px 0;
font-size: 2.5em; /* Nieco większy tytuł dla lepszej widoczności */
color: #444; color: #444;
font-weight: 700; font-weight: 700; /* Pogrubienie tytułu */
} }
/* NAWIGACJA */ /* NAWIGACJA */
nav { nav {
border: 1px solid #ccc;
margin-top: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
background: #f9f9f9; background: #f9f9f9;
} }
nav a { nav a {
padding: 10px 15px;
margin: 0 5px;
text-decoration: none; text-decoration: none;
color: #333; color: #333;
margin: 0 15px; /* Większy odstęp między linkami */
font-weight: bold; font-weight: bold;
border-radius: 4px; padding: 10px 12px; /* Większy padding dla lepszej interakcji */
transition: all 0.3s; transition: background 0.3s, color 0.3s; /* Dodano przejście dla koloru tekstu */
border-radius: 4px; /* Zaokrąglone rogi dla spójności */
} }
nav a:hover { nav a:hover {
background: #e0e0e0; background: #e0e0e0;
} color: #000; /* Ciemniejszy kolor tekstu przy najechaniu */
nav a.active {
background: #4CAF50;
color: #fff;
} }
/* GŁÓWNA SEKCJA */ /* GŁÓWNA SEKCJA */
main { main {
padding: 20px; 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);
} }
/* ZAKŁADKI */ /* KONTENERY W MAIN */
.tab-content { .form-section,
display: none; .table-section {
flex: 1 1 450px; /* Minimalna szerokość 450px, a reszta elastycznie */
border: 1px solid #ddd;
padding: 20px; padding: 20px;
background: #fafafa; background: #fafafa;
border: 1px solid #ddd; border-radius: 4px; /* Zaokrąglone rogi */
border-radius: 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Lekki cień */
} }
.tab-content.active { .form-section h2,
display: block; .table-section h2 {
}
.tab-content h2 {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 1.5em; font-size: 1.5em; /* Większy nagłówek dla lepszej czytelności */
border-bottom: 2px solid #ccc; border-bottom: 2px solid #ccc; /* Grubsza linia pod nagłówkiem */
padding-bottom: 5px; padding-bottom: 5px;
} color: #444;
/* STRONA GŁÓWNA */
#home ul {
list-style: disc;
margin: 0 0 15px 20px;
}
#home a {
color: #4CAF50;
text-decoration: none;
}
#home a:hover {
text-decoration: underline;
} }
/* FORMULARZ */ /* FORMULARZ */
@ -108,38 +99,66 @@ form {
} }
form label { form label {
display: flex;
flex-direction: column;
font-weight: bold; font-weight: bold;
color: #555; color: #555; /* Ciemniejszy kolor etykiet */
} }
form input, form select { form input[type="date"],
padding: 8px; 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: 1px solid #ddd;
border-radius: 4px; border-radius: 4px; /* Zaokrąglone rogi */
font-size: 1em; font-size: 1em;
transition: border-color 0.3s; transition: border-color 0.3s;
} }
form input:focus, form select:focus { form input[type="date"]:focus,
border-color: #4CAF50; form input[type="number"]:focus,
form input[type="text"]:focus,
form select:focus {
border-color: #4CAF50; /* Zielona obwódka przy fokusie */
outline: none; outline: none;
} }
form button { form button {
padding: 10px 20px; align-self: flex-start;
background: #4CAF50; padding: 10px 20px; /* Większy padding dla lepszej widoczności */
background-color: #4CAF50;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: all 0.3s; font-size: 1.1em; /* Nieco większy tekst przycisku */
transition: background 0.3s, transform 0.2s; /* Dodano transform dla animacji */
} }
form button:hover { form button:hover {
background: #45a049; 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 */
} }
/* TABELA */
.table-header { .table-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -147,44 +166,43 @@ form button:hover {
margin-bottom: 15px; margin-bottom: 15px;
} }
.table-header button { /* TABELA */
padding: 10px 20px;
background: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}
.table-header button:hover {
background: #45a049;
}
#ordersTable { #ordersTable {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-top: 10px;
} }
#ordersTable th, #ordersTable td { #ordersTable th, #ordersTable td {
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 12px; padding: 12px; /* Większy padding dla czytelności */
text-align: left; text-align: left;
} }
#ordersTable th { #ordersTable th {
background: #eee; background-color: #eee;
font-weight: bold; font-weight: bold;
color: #444;
} }
/* STOPKA */ /* STOPKA */
footer { footer {
border: 1px solid #ccc;
text-align: center; text-align: center;
margin-top: 0;
font-size: 1em; /* Większy tekst stopki */
background: #f9f9f9; background: #f9f9f9;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} }
/* RESPONSYWNOŚĆ */ /* RESPONSYWNOŚĆ */
@media (max-width: 768px) { @media (max-width: 768px) {
header, nav, main, footer {
margin: 5px auto;
padding: 10px;
}
header h1 { header h1 {
font-size: 2em; font-size: 2em;
} }
@ -196,21 +214,36 @@ footer {
nav a { nav a {
margin: 5px 0; margin: 5px 0;
padding: 8px 10px;
} }
main, .tab-content { main {
padding: 15px; 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 { #ordersTable th, #ordersTable td {
padding: 8px; padding: 8px;
font-size: 0.9em;
}
form button,
.table-section .table-controls button {
padding: 8px 16px;
font-size: 1em;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
#ordersTable th, #ordersTable td { #ordersTable th, #ordersTable td {
font-size: 0.8em;
padding: 6px; padding: 6px;
font-size: 0.9em;
} }
.table-header { .table-header {
@ -218,8 +251,8 @@ footer {
align-items: flex-start; align-items: flex-start;
} }
.table-header button { .table-controls {
margin-top: 10px; margin-top: 10px;
text-align: left;
} }
} }

118
index.html
View File

@ -3,14 +3,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Panel zamówień</title> <title>Panel zamówień</title>
<!-- Łączenie z plikiem CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Twoje pliki JS (zachowujemy istniejacą logikę i kolejność) -->
<script src="js/post.js" defer></script> <script src="js/post.js" defer></script>
<script src="js/get.js" defer></script> <script src="js/get.js" defer></script>
<script src="js/tabs.js" defer></script> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
@ -21,77 +17,69 @@
<!-- NAWIGACJA --> <!-- NAWIGACJA -->
<nav> <nav>
<a href="#home" class="tab-link active" data-tab="home">Strona główna</a> <a href="#home">Strona główna</a>
<a href="#dodaj" class="tab-link" data-tab="dodaj">Dodaj zamówienie</a> <a href="#dodaj">Dodaj zamówienie</a>
<a href="#lista" class="tab-link" data-tab="lista">Lista zamówień</a> <a href="#lista">Lista zamówień</a>
</nav> </nav>
<!-- GŁÓWNA SEKCJA --> <!-- GŁÓWNA SEKCJA -->
<main> <main>
<!-- Sekcja Strona główna -->
<section id="home" class="tab-content active">
<h2>Witaj w Aplikacji Zamówień</h2>
<p>Ta aplikacja umożliwia zarządzanie zamówieniami w prosty i intuicyjny sposób.</p>
<ul>
<li><strong>Dodaj zamówienie:</strong> Wypełnij formularz, aby dodać nowe zamówienie do systemu.</li>
<li><strong>Lista zamówień:</strong> Przeglądaj wszystkie zapisane zamówienia w formie tabeli.</li>
<li><strong>Informacje:</strong> Aplikacja jest responsywna i działa na różnych urządzeniach.</li>
</ul>
<p>Skontaktuj się z nami pod adresem: <a href="mailto:support@zamowienia.pl">support@zamowienia.pl</a></p>
</section>
<!-- Sekcja formularza --> <!-- Sekcja formularza -->
<section id="dodaj" class="tab-content"> <section class="form-section">
<h2>Dodaj zamówienie</h2> <h2>Dodaj zamówienie</h2>
<form id="orderForm"> <form id="orderForm">
<label> <label>
Klient: Klient:
<select name="name" required> <select name="name" required>
<option value="">Wybierz...</option> <option value="">Wybierz...</option>
<option value="1" selected>Jan Kowalski</option> <option value="1" selected>Jan Kowalski</option> <!-- Domyślnie wybrany -->
<option value="2">Anna Nowak</option> <option value="2">Anna Nowak</option>
</select> </select>
</label> </label>
<label> <label>
Data zamówienia: Data zamówienia:
<input type="date" name="data_zamowienia" value="2023-10-01" required> <input type="date" name="data_zamowienia" value="2023-10-01" required> <!-- Domyślna data -->
</label> </label>
<label> <label>
Kwota: Kwota:
<input type="number" name="cena" step="0.01" value="100.00" placeholder="0.00" required> <input type="number" name="cena" step="0.01" value="100.00" placeholder="0.00" required> <!-- Domyślna kwota -->
</label> </label>
<button type="submit">Dodaj</button> <button type="submit">Dodaj</button>
</form> </form>
</section> </section>
<!-- Sekcja tabeli z zamówieniami -->
<section class="table-section">
<div class="table-header">
<h2>Lista zamówień</h2>
<div class="table-controls">
<button type="submit" onclick="getData()" >Dodaj</button>
</div>
</div>
<table id="ordersTable">
<thead>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Data zamówienia</th>
<th>Kwota</th>
</tr>
</thead>
<tbody>
<!-- Dane będą uzupełniane dynamicznie (Fetch + JS) -->
</tbody>
</table>
</section>
<!-- Sekcja tabeli z zamówieniami -->
<section id="lista" class="tab-content">
<div class="table-header">
<h2>Lista zamówień</h2>
<div class="table-controls">
<button onclick="getData()">Odśwież</button>
</div>
</div>
<table id="ordersTable">
<thead>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Data zamówienia</th>
<th>Kwota</th>
</tr>
</thead>
<tbody>
<!-- Dane będą uzupełniane dynamicznie (Fetch + JS) -->
</tbody>
</table>
</section>
</main> </main>
<!-- STOPKA --> <!-- STOPKA -->
<footer> <footer>
<p>© 2025 Twoje Imię i Nazwisko</p> <p>&copy; 2025 Twoje Imię i Nazwisko</p>
</footer> </footer>
<!-- Tu dołączysz skrypt JS (np. fetch.js) -->
</body> </body>
</html> </html>

BIN
js/.get.js.swp Normal file
View File

Binary file not shown.

44
js/tabs.js
View File

@ -1,44 +0,0 @@
// tabs.js
document.addEventListener('DOMContentLoaded', () => {
// Pobierz wszystkie linki zakładek i sekcje zawartości
const tabLinks = document.querySelectorAll('.tab-link');
const tabContents = document.querySelectorAll('.tab-content');
// Funkcja do przełączania zakładek
function switchTab(event) {
event.preventDefault();
// Usuń klasę 'active' ze wszystkich linków zakładek
tabLinks.forEach(link => link.classList.remove('active'));
// Usuń klasę 'active' ze wszystkich sekcji zawartości
tabContents.forEach(content => content.classList.remove('active'));
// Dodaj klasę 'active' do klikniętego linku
const clickedLink = event.currentTarget;
clickedLink.classList.add('active');
// Pobierz ID sekcji, którą należy aktywować (z atrybutu data-tab)
const tabId = clickedLink.getAttribute('data-tab');
// Aktywuj odpowiednią sekcję zawartości
const activeContent = document.getElementById(tabId);
if (activeContent) {
activeContent.classList.add('active');
}
}
// Dodaj nasłuchiwanie zdarzeń do każdego linku zakładki
tabLinks.forEach(link => {
// Obsługa kliknięcia myszą
link.addEventListener('click', switchTab);
// Obsługa klawiatury (Enter lub Spacja)
link.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
switchTab(event);
}
});
});
});

2
php/get.php
View File

@ -1,5 +1,5 @@
<?php <?php
$polaczenie = mysqli_connect("192.168.175.71", "root", "secret", "db"); $polaczenie = mysqli_connect("192.168.238.71", "root", "secret", "db");
$kwerenda = mysqli_query($polaczenie, "SELECT * FROM zamowienia1 ORDER BY id ASC"); $kwerenda = mysqli_query($polaczenie, "SELECT * FROM zamowienia1 ORDER BY id ASC");

2
php/post.php
View File

@ -1,6 +1,6 @@
<?php <?php
$dbhost="192.168.175.71"; $dbhost="192.168.238.71";
//$dbhost="172.18.0.2"; //$dbhost="172.18.0.2";
$dbuser="root"; $dbuser="root";
$dbpass="secret"; $dbpass="secret";