menu ok
This commit is contained in:
rzodkiev
parent
a2f66a381c
commit
0f7635329d
191
css/style.css
191
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
118
index.html
118
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>© 2025 Twoje Imię i Nazwisko</p>
|
||||
<p>© 2025 Twoje Imię i Nazwisko</p>
|
||||
</footer>
|
||||
|
||||
<!-- Tu dołączysz skrypt JS (np. fetch.js) -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
BIN
js/.get.js.swp
BIN
js/.get.js.swp
Binary file not shown.
@ -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");
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<?php
|
||||
|
||||
$dbhost="192.168.238.71";
|
||||
$dbhost="192.168.94.71";
|
||||
//$dbhost="172.18.0.2";
|
||||
$dbuser="root";
|
||||
$dbpass="secret";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user