AiArk-21.2.2025/index.html
2025-02-26 14:22:01 +01:00

86 lines
1.9 KiB
HTML

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Panel zamówień</title>
<script src="js/post.js" defer></script>
<script src="js/get.js" defer></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- NAGŁÓWEK -->
<header>
<h1>Aplikacja Zamówień</h1>
</header>
<!-- NAWIGACJA -->
<nav>
<a href="#home">Strona główna</a>
<a href="#dodaj">Dodaj zamówienie</a>
<a href="#lista">Lista zamówień</a>
</nav>
<!-- GŁÓWNA SEKCJA -->
<main>
<!-- 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>
</main>
<!-- STOPKA -->
<footer>
<p>&copy; 2025 Twoje Imię i Nazwisko</p>
</footer>
<!-- Tu dołączysz skrypt JS (np. fetch.js) -->
</body>
</html>