tabs

1

@@ -1,34 +0,0 @@
-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>';
-        });
-}

css/style.css

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

index.html

@@ -3,10 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <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/get.js" defer></script>
 
-  <link rel="stylesheet" href="css/style.css">
+  <script src="js/tabs.js" defer></script> 
 
 </head>
 <body>
@@ -17,69 +21,77 @@
 
   <!-- NAWIGACJA -->
   <nav>
-    <a href="#home">Strona główna</a>
+    <a href="#home" class="tab-link active" data-tab="home">Strona główna</a>
-    <a href="#dodaj">Dodaj zamówienie</a>
+    <a href="#dodaj" class="tab-link" data-tab="dodaj">Dodaj zamówienie</a>
-    <a href="#lista">Lista zamówień</a>
+    <a href="#lista" class="tab-link" data-tab="lista">Lista zamówień</a>
   </nav>
 
   <!-- GŁÓWNA SEKCJA -->
   <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 class="form-section">
+    <section id="dodaj" class="tab-content">
-  <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> <!-- Domyślnie wybrany -->
+            <option value="1" selected>Jan Kowalski</option>
-        <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> <!-- Domyślna data -->
+          <input type="date" name="data_zamowienia" value="2023-10-01" required>
-    </label>
+        </label>
-    <label>
+        <label>
-      Kwota:
+          Kwota:
-      <input type="number" name="cena" step="0.01" value="100.00" placeholder="0.00" required> <!-- Domyślna kwota -->
+          <input type="number" name="cena" step="0.01" value="100.00" placeholder="0.00" required>
-    </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>
 
   <!-- STOPKA -->
   <footer>
-    <p>&copy; 2025 Twoje Imię i Nazwisko</p>
+    <p>© 2025 Twoje Imię i Nazwisko</p>
   </footer>
-
-  <!-- Tu dołączysz skrypt JS (np. fetch.js) -->
 </body>
 </html>
 

js/tabs.js

@@ -0,0 +1,44 @@
+// 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);
+      }
+    });
+  });
+});

php/get.php

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

php/post.php

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