menu ok

2025-02-27 13:16:01 +01:00
5 changed files with 146 additions and 167 deletions
--- a/css/style.css
+++ b/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;
-  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 */
+  margin: 10px auto;
+  padding: 15px;
+  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; /* Nieco większy tytuł dla lepszej widoczności */
+  font-size: 2.5em;
  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 */
-  transition: background 0.3s, color 0.3s; /* Dodano przejście dla koloru tekstu */
-  border-radius: 4px; /* Zaokrąglone rogi dla spójności */
+  border-radius: 4px;
+  transition: all 0.3s;
 }

 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;
-  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);
+  padding: 20px;
 }

-/* KONTENERY W MAIN */
-.form-section,
-.table-section {
-  flex: 1 1 450px; /* Minimalna szerokość 450px, a reszta elastycznie */
-  border: 1px solid #ddd;
+/* ZAKŁADKI */
+.tab-content {
+  display: none;
  padding: 20px;
  background: #fafafa;
-  border-radius: 4px; /* Zaokrąglone rogi */
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Lekki cień */
+  border: 1px solid #ddd;
+  border-radius: 4px;
 }

-.form-section h2,
-.table-section h2 {
+.tab-content.active {
+  display: block;
+}
+
+.tab-content 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 */
+  font-size: 1.5em;
+  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[type="number"],
-form input[type="text"],
-form select {
-  padding: 8px; /* Większy padding dla lepszej użyteczności */
-  width: 100%;
+form input, form select {
+  padding: 8px;
  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[type="number"]:focus,
-form input[type="text"]:focus,
-form select:focus {
-  border-color: #4CAF50; /* Zielona obwódka przy fokusie */
+form input:focus, form select:focus {
+  border-color: #4CAF50;
  outline: none;
 }

 form button {
-  align-self: flex-start;
-  padding: 10px 20px; /* Większy padding dla lepszej widoczności */
-  background-color: #4CAF50;
+  padding: 10px 20px;
+  background: #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 */
+  transition: all 0.3s;
 }

 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 */
+  background: #45a049;
 }

+/* 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;
  }
 }
+
--- a/index.html
+++ b/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="#dodaj">Dodaj zamówienie</a>
-    <a href="#lista">Lista zamówień</a>
+    <a href="#home" class="tab-link active" data-tab="home">Strona główna</a>
+    <a href="#dodaj" class="tab-link" data-tab="dodaj">Dodaj zamówienie</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 -->
-<section class="form-section">
-  <h2>Dodaj zamówienie</h2>
-  <form id="orderForm">
-    <label>
-      Klient:
-      <select name="name" required>
-        <option value="">Wybierz...</option>
-        <option value="1" selected>Jan Kowalski</option> <!-- Domyślnie wybrany -->
-        <option value="2">Anna Nowak</option>
-      </select>
-    </label>
-    <label>
-      Data zamówienia:
-      <input type="date" name="data_zamowienia" value="2023-10-01" required> <!-- Domyślna data -->
-    </label>
-    <label>
-      Kwota:
-      <input type="number" name="cena" step="0.01" value="100.00" placeholder="0.00" required> <!-- Domyślna kwota -->
-    </label>
-    <button type="submit">Dodaj</button>
-  </form>
-</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 formularza -->
+    <section id="dodaj" class="tab-content">
+      <h2>Dodaj zamówienie</h2>
+      <form id="orderForm">
+        <label>
+          Klient:
+          <select name="name" required>
+            <option value="">Wybierz...</option>
+            <option value="1" selected>Jan Kowalski</option>
+            <option value="2">Anna Nowak</option>
+          </select>
+        </label>
+        <label>
+          Data zamówienia:
+          <input type="date" name="data_zamowienia" value="2023-10-01" required>
+        </label>
+        <label>
+          Kwota:
+          <input type="number" name="cena" step="0.01" value="100.00" placeholder="0.00" required>
+        </label>
+        <button type="submit">Dodaj</button>
+      </form>
+    </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>

--- a/js/.get.js.swp
+++ b/js/.get.js.swp
--- a/php/get.php
+++ b/php/get.php
@ -1,5 +1,5 @@
 <?php
-$polaczenie = mysqli_connect("192.168.238.71", "root", "secret", "db");
+$polaczenie = mysqli_connect("192.168.94.71", "root", "secret", "db");

 $kwerenda = mysqli_query($polaczenie, "SELECT * FROM zamowienia1 ORDER BY id ASC");

--- a/php/post.php
+++ b/php/post.php
@ -1,6 +1,6 @@
 <?php

-$dbhost="192.168.238.71";
+$dbhost="192.168.94.71";
 //$dbhost="172.18.0.2";
 $dbuser="root";
 $dbpass="secret";