diff --git a/static/book.html b/static/book.html
index b25bf00..17c6cf8 100644
--- a/static/book.html
+++ b/static/book.html
@@ -2,59 +2,69 @@
<html lang="pl">
<head>
<meta charset="UTF-8">
- <title>Dark Athenaeum</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Dark Athenæum - Szczegóły książki</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.cdnfonts.com/css/old-english-text-mt" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="dark-theme">
- <nav class="navbar navbar-expand-lg">
- <div class="container">
- <form class="d-flex me-lg-3 flex-grow-1" id="searchForm">
- <input class="me-2"
- type="search"
- placeholder="Szukaj..."
- aria-label="Search"
- id="searchInput">
- </form>
+ <nav class="navbar navbar-expand-lg">
+ <div class="container">
+ <form class="d-flex me-lg-3 flex-grow-1" id="searchForm">
+ <input class="form-control me-2 dark-input"
+ type="search"
+ placeholder="Szukaj książek..."
+ aria-label="Search"
+ id="searchInput">
+ </form>
- <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
+ <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
- <div class="d-flex align-items-center order-lg-2">
- <div class="auth-links">
- <div class="anonymous-links">
- <a class="navbar-link" href="/login.html">Logowanie</a>
- <a class="navbar-link" href="/register.html">Rejestracja</a>
- </div>
-
- <div class="user-links">
- <a class="navbar-link" href="/profile.html">Profil</a>
- <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
- <a class="navbar-link" href="/cart.html">
- <i class="bi bi-basket"></i> Koszyk
- </a>
- </div>
+ <div class="d-flex align-items-center order-lg-2">
+ <div class="auth-links">
+ <div class="anonymous-links">
+ <a class="navbar-link" href="/login.html">Logowanie</a>
+ <a class="navbar-link" href="/register.html">Rejestracja</a>
+ </div>
+ <div class="user-links">
+ <a class="navbar-link" href="/profile.html">Profil</a>
+ <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
+ <a class="navbar-link" href="/cart.html">
+ <i class="bi bi-basket"></i> Koszyk
+ </a>
</div>
</div>
</div>
- </nav>
+ </div>
+ </nav>
- <main class="container py-5">
+ <main class="container my-5">
<div class="row" id="book-details">
<div class="col-md-4">
- <img id="book-cover" class="img-fluid mb-4" alt="Okładka książki">
+ <div class="cover-container mb-4">
+ <img id="book-cover" class="book-cover" alt="Okładka książki">
+ </div>
</div>
<div class="col-md-8">
- <h1 id="book-title" class="mb-4"></h1>
- <h3 id="book-author" class="mb-3"></h3>
- <p id="book-price" class="fs-4 mb-4"></p>
- <div class="card dark-card mb-4">
+ <h1 id="book-title" class="mb-3 fw-bold"></h1>
+ <h3 id="book-author" class="mb-4 text-muted"></h3>
+ <p id="book-price" class="fs-2 mb-4 text-primary fw-bold"></p>
+
+ <div class="card mb-4">
<div class="card-body">
<h4 class="mb-3">Opis</h4>
- <p id="book-description"></p>
+ <p id="book-description" class="card-text"></p>
</div>
</div>
- <button class="btn btn-add-to-cart">Dodaj do koszyka</button>
+
+ <button class="btn btn-add-to-cart">
+ <i class="bi bi-cart-plus me-2"></i> Dodaj do koszyka
+ </button>
</div>
</div>
</main>
@@ -72,6 +82,9 @@
<a href="https://sykorax.eu/">Współpraca</a>
</div>
</div>
+ <div class="text-center mt-4">
+ <p class="text-muted">© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
+ </div>
</div>
</footer>
diff --git a/static/cart.html b/static/cart.html
index 2c64674..82e144a 100644
--- a/static/cart.html
+++ b/static/cart.html
@@ -1,59 +1,82 @@
<!DOCTYPE html>
-<!-- static/cart.html -->
-<html>
+<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Dark Athenaeum</title>
+ <title>Dark Athenæum - Koszyk</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.cdnfonts.com/css/old-english-text-mt" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="dark-theme">
- <nav class="navbar navbar-expand-lg navbar-dark bg-black">
- <div class="container">
- <!-- Lewa strona - wyszukiwanie -->
- <form class="d-flex me-lg-3 flex-grow-1" id="searchForm">
- <input class="form-control me-2 dark-input"
- type="search"
- placeholder="Szukaj książek..."
- aria-label="Search"
- id="searchInput">
- </form>
+ <nav class="navbar navbar-expand-lg">
+ <div class="container">
+ <form class="d-flex me-lg-3 flex-grow-1" id="searchForm">
+ <input class="form-control me-2 dark-input"
+ type="search"
+ placeholder="Szukaj książek..."
+ aria-label="Search"
+ id="searchInput">
+ </form>
- <!-- Środek - logo -->
- <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENAEUM</a>
+ <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
- <!-- Prawa strona - przyciski -->
- <div class="d-flex align-items-center order-lg-2">
- <div class="auth-links">
- <div class="anonymous-links">
- <a class="nav-link" href="/login.html">Logowanie</a>
- <a class="nav-link" href="/register.html">Rejestracja</a>
- </div>
+ <div class="d-flex align-items-center order-lg-2">
+ <div class="auth-links">
+ <div class="user-links">
+ <a class="navbar-link" href="/profile.html">Profil</a>
+ <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
+ <a class="navbar-link" href="/cart.html">
+ <i class="bi bi-basket"></i> Koszyk
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </nav>
- <div class="user-links">
- <a class="nav-link" href="/profile.html">Profil</a>
- <a class="nav-link" href="#" id="logoutLink">Wyloguj</a>
- <a class="nav-link" href="/cart.html">
- <i class="bi bi-basket"></i> Koszyk
- </a>
+ <main class="container my-5">
+ <h1 class="mb-4 fw-bold">Twój koszyk</h1>
+
+ <div class="row">
+ <div class="col-lg-8">
+ <div id="cart-items" class="mb-4">
+ <div class="text-center py-5">
+ <div class="spinner-border text-primary" role="status">
+ <span class="visually-hidden">Ładowanie...</span>
</div>
</div>
</div>
</div>
- </nav>
-
- <main class="container py-5">
- <h2 class="neon-title mb-4">Twój koszyk</h2>
- <div id="cart-items" class="row g-4"></div>
- <div class="text-center mt-5">
- <button id="checkoutBtn" class="btn btn-gothic btn-lg">
- <i class="bi bi-wallet2"></i> Złóż zamówienie
- </button>
- </div>
+
+ <div class="col-lg-4">
+ <div class="card mb-4">
+ <div class="card-body">
+ <h4 class="mb-3">Podsumowanie</h4>
+ <div class="d-flex justify-content-between mb-3">
+ <span>Wartość produktów:</span>
+ <span class="text-primary" id="products-value">0.00 PLN</span>
+ </div>
+ <div class="d-flex justify-content-between mb-3">
+ <span>Dostawa:</span>
+ <span>12.99 PLN</span>
+ </div>
+ <hr>
+ <div class="d-flex justify-content-between fw-bold fs-5">
+ <span>Do zapłaty:</span>
+ <span class="text-primary" id="total-value">0.00 PLN</span>
+ </div>
+ <button id="checkoutBtn" class="btn mt-4 py-3">
+ <i class="bi bi-wallet2 me-2"></i> Złóż zamówienie
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
</main>
<footer>
@@ -69,9 +92,13 @@
<a href="https://sykorax.eu/">Współpraca</a>
</div>
</div>
+ <div class="text-center mt-4">
+ <p class="text-muted">© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
+ </div>
</div>
</footer>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="/js/utils.js"></script>
<script type="module" src="/js/auth.js"></script>
<script type="module" src="/js/cart.js"></script>
diff --git a/static/css/styles.css b/static/css/styles.css
index f1e92b1..e1619c9 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,446 +1,220 @@
+/* static/css/styles.css */
+
:root {
- --green1: #193630;
- --green2: #294640;
- --green3: #395650;
- --green4: #496660;
- --green5: #597670;
- --gold1: #D3BB8A;
- --gold2: #E3CB9A;
- --gold3: #F3DBAA;
- --cyan: #60AEC5;
+ --dark-bg: #121212;
+ --darker-bg: #0a0a0a;
+ --light-text: #f8f9fa;
+ --muted-text: #adb5bd;
+ --primary: #d4af37; /* Złoty - główny kolor */
+ --primary-dark: #b38f2d; /* Ciemniejszy złoty */
+ --secondary: #0a1f0a; /* Ciemnozielony - drugi kolor */
+ --border: #343a40;
+ --accent: #228B22; /* Zielony akcent */
}
.dark-theme {
- background-color: var(--green3);
- color: var(--gold2);
+ background-color: var(--dark-bg);
+ color: var(--light-text);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ font-family: 'Inter', sans-serif;
}
-nav {
- background-color: var(--green2);
-}
-
-nav form input {
- background-color: var(--green1);
- padding-left: 16px;
- border: none;
- border-radius: 8px;
- width: 40%;
- transition: width 0.4s ease-in-out;
-}
-
-nav form input:focus {
- padding-left: 13px;
- border: 3px solid var(--green1);
- width: 100%;
+/* Nagłówek - oryginalny styl */
+.navbar {
+ background-color: #000;
+ padding: 1rem 0;
+ border-bottom: 1px solid var(--border);
}
.navbar-brand {
- font-family: 'Lobster', cursive;
- font-size: 3rem;
- text-shadow: 2px 2px var(--green1);
- color: var(--gold1);
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
+ font-family: 'Old English Text MT', serif;
+ font-size: 2.5rem;
+ color: var(--primary) !important;
+ text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}
.navbar-link {
- color: var(--gold1);
+ color: var(--muted-text) !important;
text-decoration: none;
-}
-
-.navbar-brand:hover, .navbar-link:hover {
- color: var(--gold3);
-}
-
-footer {
- font-weight: bold;
- background-color: var(--green2);
- padding: 0;
- margin-top: 0;
- font-size: 12px;
- font-family: 'Inter', sans-serif;
- color: var(--gold1);
- left: 0;
- bottom: 0;
- width: 100%;
-}
-
-.card {
- background: linear-gradient(145deg, #08352c 0%, #062a23 100%);
- border: 1px solid #1c4d42;
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-}
-
-.card a {
- color: var(--text-gold);
- text-decoration: none;
-}
-
-.btn-gothic {
- background-color: #1c4d42;
- color: var(--text-gold);
- border: 1px solid #2a6b5e;
-}
-
-.btn-gothic:hover {
- background-color: #2a6b5e;
- color: #fff;
-}
-
-.auth-container {
- max-width: 500px;
- margin: 2rem auto;
- padding: 2rem;
- border: 2px solid var(--green5);
- border-radius: 8px;
- background-color: var(--green2);
-}
-
-h1 {
- font-weight: bold;
- font-family: 'Lobster', cursive;
-}
-
-h2 {
- font-family: 'Lobster', cursive;
- text-align: center;
- font-size: 2.5rem;
- margin-bottom: 2rem;
-}
-
-h3, h4 {
- font-family: 'Lobster', cursive;
-}
-
-img {
- border: 2px solid var(--green1);
-}
-
-.auth-container button, #book-details button {
- background-color: var(--green3);
- border: 2px solid var(--green1);
- color: var(--gold3);
-}
-
-.auth-container button:hover, #book-details button:hover {
- background-color: var(--green1);
- border-color: var(--gold2);
- color: var(--gold1);
-}
-
-.auth-container a {
- color: var(--cyan);
-}
-
-.auth-container a:hover {
- text-decoration: underline;
-}
-
-#books-container {
- justify-content: center !important;
-}
-
-.book-card {
- width: 100%; /* Wykorzystaj całą dostępną szerokość */
- height: 100%;
- background: var(--green1);
- border: 2px solid var(--green1);
- transition: transform 0.3s ease;
-}
-
-.cover-container {
- width: 100%;
- aspect-ratio: 5/8; /* Nowoczesne podejście do proporcji */
- overflow: hidden;
- position: relative;
-}
-
-.book-cover {
- width: 100%;
- object-fit: cover;
- object-position: center top;
- transition: transform 0.3s ease;
- transform: scale(1.05);
-}
-
-#profile {
- background: var(--green1);
- border: 1px solid var(--gold1);
- border-radius: 8px;
- color: var(--gold2);
-}
-
-.order {
- background: var(--green2);
- border: 1px solid var(--gold1);
-}
-
-.card {
- color: var(--gold2);
-}
-
-.card-header {
- border: 0;
- color: var(--gold2);
-}
-
-.card-title {
- color: var(--gold2);
-}
-
-.book-cover:hover {
- transform: scale(1.1);
-}
-
-
-.book-title {
- font-size: 1rem;
- line-height: 1.3;
- height: 3.2em; /* Na 2 linie tekstu */
- margin: 0.5rem 0;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- text-align: center;
- padding: 0 0.25rem;
- color: var(--gold1);
- text-decoration: none;
-}
-
-.book-title a:visited {
- text-decoration: none;
-}
-
-.book-info {
- color: var(--text-gold);
- text-align: center;
- padding: 1rem;
-}
-
-footer a {
- color: var(--gold1);
- text-decoration: none;
-}
-
-footer a:hover {
- color: var(--gold3);
-}
-
-.text-accent {
- color: var(--accent-blue) !important;
-}
-
-#book-description {
- line-height: 1.8;
- font-size: 1.1rem;
-}
-
-.card-body {
- background: var(--green1);
- border: 1px solid var(--gold2);
- border-radius: 4px;
-}
-
-#searchInput {
- height: 50px;
- font-size: 1.2rem;
-}
-
-/* W pliku styles.css */
-.navbar-nav {
- gap: 1.5rem !important; /* Odstępy między linkami */
-}
-
-footer a {
- padding: 0.5rem 1rem; /* Większy obszar klikalny */
- display: inline-block; /* Lepsze wyrównanie */
-}
-
-.card-img-top {
- height: 350px;
- object-fit: cover;
- object-position: center top;
-}
-
-#searchInput::placeholder {
- color: #93B8B1;
- opacity: 0.7;
-}
-
-.remove-from-cart {
- transition: all 0.3s ease;
-}
-
-.remove-from-cart:hover {
- transform: scale(1.05);
- box-shadow: 0 0 8px rgba(220, 53, 69, 0.6);
-}
-
-.user-links, .anonymous-links {
- gap: 1rem;
+ margin: 0 0.8rem;
+ transition: color 0.3s;
+ display: flex;
align-items: center;
}
-/* Responsywność */
-@media (max-width: 768px) {
- #books-container {
- grid-template-columns: 1fr;
- }
-
- .navbar-nav {
- flex-direction: column;
- gap: 0.5rem !important;
- }
+.navbar-link:hover, .navbar-link:focus {
+ color: var(--primary) !important;
}
-.btn-outline-gothic:hover {
- background-color: #0ff;
- color: #000;
- box-shadow: 0 0 15px #0ff;
+.navbar-link i {
+ margin-right: 0.3rem;
}
-.order-item {
- background-color: #2a2a2a;
- border-radius: 5px;
- padding: 10px;
- margin-bottom: 10px;
-}
-
-.order-item:last-child {
- margin-bottom: 0;
-}
-
-.hidden {
- display: none !important;
-}
-
-/* Pokazywanie elementów */
-.visible {
- display: flex !important;
-}
-
-.auth-links {
+/* Karty książek - proporcje 5:8 */
+.book-card {
+ height: 100%;
display: flex;
- gap: 1rem;
+ flex-direction: column;
+ background: var(--darker-bg);
+ border: 1px solid var(--border);
+ border-radius: 8px;
+ overflow: hidden;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
}
-.anonymous-links,
-.user-links {
- display: none;
+.book-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
+ border-color: var(--primary);
}
-.anonymous-links.visible,
-.user-links.visible {
- display: flex !important;
- gap: 1rem;
+.cover-container {
+ position: relative;
+ padding-bottom: 160%; /* 5:8 proportion (5/8 = 0.625) */
+ overflow: hidden;
+ background: #000;
}
-
-@media (max-width: 991px) {
- .navbar-brand {
- position: static;
- transform: none;
- order: 0 !important;
- margin: 0.5rem 0;
- }
-
- .navbar-toggler {
- order: 1;
- }
-
- #searchForm {
- order: 2;
- width: 100%;
- margin-top: 1rem;
- }
-
- .auth-links {
- order: 3;
- width: 100%;
- justify-content: center;
- margin-top: 1rem;
- }
+.book-cover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform 0.3s ease;
}
-/* Responsywność formularza wyszukiwania */
-@media (min-width: 992px) {
- #searchForm {
- max-width: 400px;
- }
-
- .navbar-brand {
- position: absolute;
- }
+.cover-container:hover .book-cover {
+ transform: scale(1.05);
}
-a {
- text-decoration: none;
-}
-
-/* Koszyk - nowe style */
-.cart-item-details {
+.book-body {
+ padding: 1.2rem;
+ flex-grow: 1;
display: flex;
flex-direction: column;
}
-.cart-item .card-body {
- padding: 1.5rem;
+.book-title {
+ font-size: 1.1rem;
+ margin-bottom: 0.5rem;
+ color: var(--light-text);
+ font-weight: 600;
+ min-height: 2.8em;
}
-.cart-item-title {
- font-size: 1.4rem;
- font-weight: bold;
+.book-author {
+ font-size: 0.9rem;
+ color: var(--muted-text);
margin-bottom: 0.5rem;
}
-.cart-item-author {
- color: #aaa;
- font-style: italic;
- margin-bottom: 1.5rem;
+.book-price {
+ font-weight: 700;
+ color: var(--primary);
+ margin-top: auto;
+ font-size: 1.2rem;
}
-.cart-item-info {
- display: flex;
- justify-content: space-between;
- gap: 1.5rem;
- margin-bottom: 1.5rem;
- background-color: #222;
- padding: 1.2rem;
- border-radius: 8px;
- border: 1px solid #333;
-}
-
-.cart-item-info > div {
- flex: 1;
- min-width: 120px;
-}
-
-.cart-item-price,
-.cart-item-quantity,
-.cart-item-total {
- display: block;
- margin-bottom: 0.5rem;
- font-size: 0.95rem;
- color: #ddd;
-}
-
-.cart-remove-btn, .decrease-quantity {
- padding: 0.7rem 1rem;
- font-size: 0.95rem;
- transition: all 0.3s ease;
-}
-
-.cart-remove-btn:hover, .decrease-quantity:hover {
- transform: translateY(-3px);
- box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-}
-
-/* Suma całkowita - większy nacisk */
-.total-cart-value {
- font-size: 2rem;
+/* Przyciski i elementy interfejsu */
+.btn {
+ background-color: var(--primary);
+ border: none;
+ color: #000;
+ padding: 0.8rem 1.5rem;
+ border-radius: 5px;
+ font-weight: 500;
+ transition: all 0.3s;
+ text-transform: uppercase;
+ letter-spacing: 1px;
font-weight: bold;
- color: #ffcc00;
- text-shadow: 0 0 8px rgba(255, 204, 0, 0.4);
+}
+
+.btn:hover {
+ background-color: var(--primary-dark);
+ transform: translateY(-2px);
+}
+
+.text-primary {
+ color: var(--primary) !important;
+}
+
+.bg-primary {
+ background-color: var(--primary) !important;
+}
+
+/* Formularze */
+.auth-container {
+ max-width: 500px;
+ margin: 3rem auto;
+ padding: 2.5rem;
+ background: var(--darker-bg);
+ border-radius: 10px;
+ border: 1px solid var(--border);
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
+
+.auth-container h2 {
+ text-align: center;
+ margin-bottom: 1.5rem;
+ font-weight: 700;
+ color: var(--primary);
+}
+
+.dark-input {
+ background-color: #1e1e1e;
+ border: 1px solid var(--border);
+ color: var(--light-text);
+ padding: 0.8rem;
+ border-radius: 5px;
+ margin-bottom: 1.2rem;
+ width: 100%;
+}
+
+.dark-input:focus {
+ background-color: #1e1e1e;
+ color: var(--light-text);
+ border-color: var(--primary);
+ box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
+}
+
+/* Stopka */
+footer {
+ background-color: #000;
+ padding: 2.5rem 0;
+ margin-top: auto;
+ border-top: 1px solid var(--border);
+}
+
+footer a {
+ color: var(--muted-text);
+ text-decoration: none;
+ margin: 0 1rem;
+ transition: color 0.3s;
+}
+
+footer a:hover {
+ color: var(--primary);
+}
+
+footer .text-center {
+ color: var(--muted-text);
+}
+
+/* Responsywność */
+@media (max-width: 768px) {
+ .navbar-brand {
+ font-size: 1.8rem;
+ }
+
+ .cover-container {
+ padding-bottom: 130%;
+ }
+
+ .book-title {
+ min-height: auto;
+ }
}
diff --git a/static/index.html b/static/index.html
index 1b1bbbe..a7f169f 100644
--- a/static/index.html
+++ b/static/index.html
@@ -7,56 +7,67 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.cdnfonts.com/css/old-english-text-mt" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="dark-theme">
- <nav class="navbar navbar-expand-lg">
- <div class="container">
- <form class="d-flex me-lg-3 flex-grow-1" id="searchForm">
- <input class="me-2"
- type="search"
- placeholder="Szukaj..."
- aria-label="Search"
- id="searchInput">
- </form>
+ <nav class="navbar navbar-expand-lg">
+ <div class="container">
+ <div class="d-flex me-lg-3 flex-grow-1"></div>
+
+ <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
- <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
-
- <div class="d-flex align-items-center order-lg-2">
- <div class="auth-links">
- <div class="anonymous-links">
- <a class="navbar-link" href="/login.html">Logowanie</a>
- <a class="navbar-link" href="/register.html">Rejestracja</a>
- </div>
-
- <div class="user-links">
- <a class="navbar-link" href="/cart.html">
- <i class="bi bi-basket"></i>
- </a>
- <a class="navbar-link" href="/profile.html">Profil</a>
- <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
- </div>
- </div>
- </div>
- </div>
- </nav>
-
- <main class="container py-5">
- <h2 class="text-center mb-5">POPULARNE</h2>
-
- <div class="container-fluid">
- <div class="row justify-content-center">
- <div class="col-12 col-xxl-10"> <!-- Adjust max width if needed -->
- <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-4 justify-content-center" id="books-container">
- <!-- Dynamicznie ładowane książki -->
- <div class="col-12 text-center">
- <div class="spinner-border text-danger" role="status">
- <span class="visually-hidden">Ładowanie...</span>
- </div>
- </div>
- </div>
+ <div class="d-flex align-items-center order-lg-2">
+ <div class="auth-links">
+ <div class="anonymous-links">
+ <a class="navbar-link" href="/login.html">Logowanie</a>
+ <a class="navbar-link" href="/register.html">Rejestracja</a>
</div>
+ <div class="user-links">
+ <a class="navbar-link" href="/profile.html">Profil</a>
+ <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
+ <a class="navbar-link" href="/cart.html">
+ <i class="bi bi-basket"></i> Koszyk
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </nav>
+
+ <main class="container my-5">
+ <div class="row mb-4 align-items-center">
+ <div class="col-md-4">
+ <h1 class="display-5 fw-bold">Księgarnia dla wymagających</h1>
+ <p class="lead">Odkryj unikalne dzieła literackie w mrocznej atmosferze</p>
+ </div>
+
+ <!-- Wyszukiwanie przeniesione obok sortowania -->
+ <div class="col-md-5">
+ <input class="form-control dark-input"
+ type="search"
+ placeholder="Szukaj książek..."
+ aria-label="Search"
+ id="searchInput">
+ </div>
+
+ <div class="col-md-3 text-end">
+ <select class="form-select dark-input" id="sortSelect">
+ <option value="default">Sortuj domyślnie</option>
+ <option value="price_asc">Cena: od najniższej</option>
+ <option value="price_desc">Cena: od najwyższej</option>
+ <option value="title_asc">Tytuł A-Z</option>
+ <option value="author_asc">Autor A-Z</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4" id="books-container">
+ <div class="col-12 text-center py-5">
+ <div class="spinner-border text-primary" role="status">
+ <span class="visually-hidden">Ładowanie...</span>
</div>
</div>
</div>
@@ -65,7 +76,7 @@
<footer>
<div class="container">
<div class="row justify-content-center align-items-center text-center">
- <div class="col-auto mb-2 mb-md-0">
+ <div class="col-auto mb-2 mb-md-0">
<a href="https://sykorax.eu/">O Nas</a>
</div>
<div class="col-auto">
@@ -75,11 +86,15 @@
<a href="https://sykorax.eu/">Współpraca</a>
</div>
</div>
+ <div class="text-center mt-4">
+ <p class="text-muted">© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
+ </div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
- <script src="/js/main.js"></script>
+ <script type="module" src="/js/utils.js"></script>
+ <script type="module" src="/js/auth.js"></script>
+ <script type="module" src="/js/books.js"></script>
</body>
</html>
-
diff --git a/static/login.html b/static/login.html
index e0ac19b..84b40a3 100644
--- a/static/login.html
+++ b/static/login.html
@@ -2,62 +2,66 @@
<html lang="pl">
<head>
<meta charset="UTF-8">
- <title>Logowanie</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Dark Athenæum - Logowanie</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.cdnfonts.com/css/old-english-text-mt" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="dark-theme">
-<nav class="navbar navbar-expand-lg">
- <div class="container">
- <form class="d-flex me-lg-3 flex-grow-1" id="searchForm">
- <input class="me-2"
- type="search"
- placeholder="Szukaj..."
- aria-label="Search"
- id="searchInput">
- </form>
+ <nav class="navbar navbar-expand-lg">
+ <div class="container">
+ <div class="d-flex me-lg-3 flex-grow-1"></div>
+
+ <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
- <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
-
- <div class="d-flex align-items-center order-lg-2">
- <div class="auth-links">
- <div class="anonymous-links">
- <a class="navbar-link" href="/login.html">Logowanie</a>
- <a class="navbar-link" href="/register.html">Rejestracja</a>
- </div>
-
- <div class="user-links">
- <a class="navbar-link" href="/profile.html">Profil</a>
- <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
- <a class="navbar-link" href="/cart.html">
- <i class="bi bi-basket"></i> Koszyk
- </a>
- </div>
+ <div class="d-flex align-items-center order-lg-2">
+ <div class="auth-links">
+ <div class="anonymous-links">
+ <a class="navbar-link" href="/login.html">Logowanie</a>
+ <a class="navbar-link" href="/register.html">Rejestracja</a>
+ </div>
+ <div class="user-links">
+ <a class="navbar-link" href="/profile.html">Profil</a>
+ <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
+ <a class="navbar-link" href="/cart.html">
+ <i class="bi bi-basket"></i> Koszyk
+ </a>
</div>
</div>
</div>
- </nav>
-
- <div class="auth-container">
- <h2 class="mb-4">LOGOWANIE</h2>
- <form id="loginForm">
- <div class="mb-3">
- <input type="email" class="form-control dark-input"
- placeholder="Email" required id="loginEmail">
- </div>
- <div class="mb-3">
- <input type="password" class="form-control dark-input"
- placeholder="Hasło" required id="loginPassword">
- </div>
- <button type="submit" class="btn w-100">ZALOGUJ SIĘ</button>
- </form>
- <div class="text-center mt-3">
- Nie masz konta? <a href="/register.html">Zarejestruj się</a>
</div>
- </div>
+ </nav>
+
+ <main class="container my-5">
+ <div class="row justify-content-center">
+ <div class="col-md-6">
+ <div class="auth-container p-4">
+ <h2 class="mb-4 text-center">LOGOWANIE</h2>
+ <form id="loginForm">
+ <div class="mb-3">
+ <input type="email" class="form-control dark-input"
+ placeholder="Email" required id="loginEmail">
+ </div>
+ <div class="mb-3">
+ <input type="password" class="form-control dark-input"
+ placeholder="Hasło" required id="loginPassword">
+ </div>
+ <button type="submit" class="btn w-100 py-3">
+ <i class="bi bi-box-arrow-in-right me-2"></i> ZALOGUJ SIĘ
+ </button>
+ </form>
+ <div class="text-center mt-3">
+ Nie masz konta? <a href="/register.html" class="text-gothic">Zarejestruj się</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </main>
<footer>
<div class="container">
@@ -72,10 +76,14 @@
<a href="https://sykorax.eu/">Współpraca</a>
</div>
</div>
+ <div class="text-center mt-4">
+ <p class="text-muted">© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
+ </div>
</div>
</footer>
- <script src="/js/main.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+ <script type="module" src="/js/utils.js"></script>
+ <script type="module" src="/js/auth.js"></script>
</body>
</html>
-
diff --git a/static/profile.html b/static/profile.html
index dc57710..9eaf305 100644
--- a/static/profile.html
+++ b/static/profile.html
@@ -3,51 +3,47 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Dark Athenaeum</title>
+ <title>Dark Athenæum - Profil</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.cdnfonts.com/css/old-english-text-mt" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="dark-theme">
-<nav class="navbar navbar-expand-lg">
- <div class="container">
- <form class="d-flex me-lg-3 flex-grow-1" id="searchForm">
- <input class="me-2"
- type="search"
- placeholder="Szukaj..."
- aria-label="Search"
- id="searchInput">
- </form>
+ <nav class="navbar navbar-expand-lg">
+ <div class="container">
+ <div class="d-flex me-lg-3 flex-grow-1"></div>
- <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
+ <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
- <div class="d-flex align-items-center order-lg-2">
- <div class="auth-links">
- <div class="anonymous-links">
- <a class="navbar-link" href="/login.html">Logowanie</a>
- <a class="navbar-link" href="/register.html">Rejestracja</a>
- </div>
-
- <div class="user-links">
- <a class="navbar-link" href="/profile.html">Profil</a>
- <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
- <a class="navbar-link" href="/cart.html">
- <i class="bi bi-basket"></i> Koszyk
- </a>
- </div>
+ <div class="d-flex align-items-center order-lg-2">
+ <div class="auth-links">
+ <div class="anonymous-links">
+ <a class="navbar-link" href="/login.html">Logowanie</a>
+ <a class="navbar-link" href="/register.html">Rejestracja</a>
+ </div>
+ <div class="user-links">
+ <a class="navbar-link" href="/profile.html">Profil</a>
+ <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
+ <a class="navbar-link" href="/cart.html">
+ <i class="bi bi-basket"></i> Koszyk
+ </a>
</div>
</div>
</div>
- </nav>
+ </div>
+ </nav>
- <main class="container py-5">
- <h2 class="mb-4">Twój profil</h2>
+
+ <main class="container my-5">
+ <h1 class="mb-4 fw-bold">Twój profil</h1>
- <div id="profile" class="p-4 mb-4">
- <h3 class="mb-3">Historia zamówień</h3>
- <div id="order-history"></div>
+ <div class="card dark-card p-4 mb-4">
+ <h3 class="mb-3 border-bottom pb-2">Historia zamówień</h3>
+ <div id="order-history" class="mt-3"></div>
</div>
</main>
@@ -64,9 +60,13 @@
<a href="https://sykorax.eu/">Współpraca</a>
</div>
</div>
+ <div class="text-center mt-4">
+ <p class="text-muted">© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
+ </div>
</div>
</footer>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="/js/utils.js"></script>
<script type="module" src="/js/auth.js"></script>
<script type="module" src="/js/profile.js"></script>
diff --git a/static/register.html b/static/register.html
index 1ace860..8fe3835 100644
--- a/static/register.html
+++ b/static/register.html
@@ -2,69 +2,74 @@
<html lang="pl">
<head>
<meta charset="UTF-8">
- <title>Rejestracja</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Dark Athenæum - Rejestracja</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.cdnfonts.com/css/old-english-text-mt" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="dark-theme">
-<nav class="navbar navbar-expand-lg">
- <div class="container">
- <form class="d-flex me-lg-3 flex-grow-1" id="searchForm">
- <input class="me-2"
- type="search"
- placeholder="Szukaj..."
- aria-label="Search"
- id="searchInput">
- </form>
+ <nav class="navbar navbar-expand-lg">
+ <div class="container">
+ <div class="d-flex me-lg-3 flex-grow-1"></div>
+
+ <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
- <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
-
- <div class="d-flex align-items-center order-lg-2">
- <div class="auth-links">
- <div class="anonymous-links">
- <a class="navbar-link" href="/login.html">Logowanie</a>
- <a class="navbar-link" href="/register.html">Rejestracja</a>
- </div>
-
- <div class="user-links">
- <a class="navbar-link" href="/profile.html">Profil</a>
- <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
- <a class="navbar-link" href="/cart.html">
- <i class="bi bi-basket"></i> Koszyk
- </a>
- </div>
+ <div class="d-flex align-items-center order-lg-2">
+ <div class="auth-links">
+ <div class="anonymous-links">
+ <a class="navbar-link" href="/login.html">Logowanie</a>
+ <a class="navbar-link" href="/register.html">Rejestracja</a>
+ </div>
+ <div class="user-links">
+ <a class="navbar-link" href="/profile.html">Profil</a>
+ <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
+ <a class="navbar-link" href="/cart.html">
+ <i class="bi bi-basket"></i> Koszyk
+ </a>
</div>
</div>
</div>
- </nav>
+ </div>
+ </nav>
- <div class="auth-container">
- <h2 class="mb-4">REJESTRACJA</h2>
- <form id="registerForm">
- <div class="mb-3">
- <input type="text" class="form-control dark-input"
- placeholder="Imię" required id="registerName">
+ <main class="container my-5">
+ <div class="row justify-content-center">
+ <div class="col-md-6">
+ <div class="auth-container p-4">
+ <h2 class="mb-4 text-center">REJESTRACJA</h2>
+ <form id="registerForm">
+ <div class="mb-3">
+ <input type="text" class="form-control dark-input"
+ placeholder="Imię" required id="registerName">
+ </div>
+ <div class="mb-3">
+ <input type="email" class="form-control dark-input"
+ placeholder="Email" required id="registerEmail">
+ </div>
+ <div class="mb-3">
+ <input type="password" class="form-control dark-input"
+ placeholder="Hasło (min. 8 znaków)" required minlength="8" id="registerPassword">
+ </div>
+ <div class="mb-3">
+ <input type="password" class="form-control dark-input"
+ placeholder="Powtórz hasło" required id="registerConfirmPassword">
+ </div>
+ <button type="submit" class="btn w-100 py-3">
+ <i class="bi bi-person-plus me-2"></i> ZAREJESTRUJ SIĘ
+ </button>
+ </form>
+ <div class="text-center mt-3">
+ Masz już konto? <a href="/login.html" class="text-gothic">Zaloguj się</a>
+ </div>
+ </div>
</div>
- <div class="mb-3">
- <input type="email" class="form-control dark-input"
- placeholder="Email" required id="registerEmail">
- </div>
- <div class="mb-3">
- <input type="password" class="form-control dark-input"
- placeholder="Hasło (min. 8 znaków)" required minlength="8" id="registerPassword">
- </div>
- <div class="mb-3">
- <input type="password" class="form-control dark-input"
- placeholder="Powtórz hasło" required id="registerConfirmPassword">
- </div>
- <button type="submit" class="btn w-100">ZAREJESTRUJ SIĘ</button>
- </form>
- <div class="text-center mt-3">
- Masz już konto? <a href="/login.html">Zaloguj się</a>
- </div>
- </div>
+ </div>
+ </main>
<footer>
<div class="container">
@@ -79,10 +84,14 @@
<a href="https://sykorax.eu/">Współpraca</a>
</div>
</div>
+ <div class="text-center mt-4">
+ <p class="text-muted">© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
+ </div>
</div>
</footer>
- <script src="/js/main.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+ <script type="module" src="/js/utils.js"></script>
+ <script type="module" src="/js/auth.js"></script>
</body>
</html>
-
diff --git a/static/thankyou.html b/static/thankyou.html
index 80ede27..97ea97f 100644
--- a/static/thankyou.html
+++ b/static/thankyou.html
@@ -2,50 +2,76 @@
<html lang="pl">
<head>
<meta charset="UTF-8">
- <title>Podziękowanie - Dark Athenaeum</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Dark Athenæum - Dziękujemy</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.cdnfonts.com/css/old-english-text-mt" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="dark-theme">
- <nav class="navbar navbar-expand-lg navbar-dark bg-black">
- <div class="container">
- <!-- Lewa strona - wyszukiwanie -->
- <form class="d-flex me-lg-3 flex-grow-1" id="searchForm">
- <input class="form-control me-2 dark-input"
- type="search"
- placeholder="Szukaj książek..."
- aria-label="Search"
- id="searchInput">
- </form>
+ <nav class="navbar navbar-expand-lg">
+ <div class="container">
+ <div class="d-flex me-lg-3 flex-grow-1"></div>
+
+ <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
- <!-- Środek - logo -->
- <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENAEUM</a>
-
- <!-- Prawa strona - przyciski -->
- <div class="d-flex align-items-center order-lg-2">
- <div class="auth-links">
- <div class="anonymous-links">
- <a class="nav-link" href="/login.html">Logowanie</a>
- <a class="nav-link" href="/register.html">Rejestracja</a>
- </div>
-
- <div class="user-links">
- <a class="nav-link" href="/profile.html">Profil</a>
- <a class="nav-link" href="#" id="logoutLink">Wyloguj</a>
- <a class="nav-link" href="/cart.html">
- <i class="bi bi-basket"></i> Koszyk
- </a>
- </div>
+ <div class="d-flex align-items-center order-lg-2">
+ <div class="auth-links">
+ <div class="user-links">
+ <a class="navbar-link" href="/profile.html">Profil</a>
+ <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
+ <a class="navbar-link" href="/cart.html">
+ <i class="bi bi-basket"></i> Koszyk
+ </a>
</div>
</div>
</div>
- </nav>
+ </div>
+ </nav>
- <main class="container py-5 text-center">
- <h1 class="neon-title mb-4">Dziękujemy za zakup!</h1>
- <p class="inter-font fs-5">Twoje zamówienie zostało pomyślnie zrealizowane.</p>
- <a href="/profile.html" class="btn btn-gothic">Zobacz historię zamówień</a>
- <a href="/" class="btn btn-outline-gothic ms-2">Strona główna</a>
+ <main class="container my-5 text-center py-5">
+ <div class="row justify-content-center">
+ <div class="col-md-8">
+ <h1 class="display-3 fw-bold mb-4">Dziękujemy za zakup!</h1>
+ <p class="lead fs-4 mb-5">Twoje zamówienie zostało pomyślnie zrealizowane.</p>
+
+ <div class="d-flex justify-content-center gap-3">
+ <a href="/profile.html" class="btn btn-lg btn-gothic">
+ <i class="bi bi-clock-history me-2"></i> Historia zamówień
+ </a>
+ <a href="/" class="btn btn-lg btn-outline-gothic">
+ <i class="bi bi-house-door me-2"></i> Strona główna
+ </a>
+ </div>
+ </div>
+ </div>
</main>
+
+ <footer>
+ <div class="container">
+ <div class="row justify-content-center align-items-center text-center">
+ <div class="col-auto mb-2 mb-md-0">
+ <a href="https://sykorax.eu/">O Nas</a>
+ </div>
+ <div class="col-auto">
+ <a href="https://sykorax.eu/">Kontakt</a>
+ </div>
+ <div class="col-auto">
+ <a href="https://sykorax.eu/">Współpraca</a>
+ </div>
+ </div>
+ <div class="text-center mt-4">
+ <p class="text-muted">© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
+ </div>
+ </div>
+ </footer>
+
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+ <script type="module" src="/js/utils.js"></script>
+ <script type="module" src="/js/auth.js"></script>
</body>
</html>