refactor html

This commit is contained in:
Lheorvine 2025-05-30 19:04:31 +02:00
parent 1adcd8617a
commit 3957d621a4
8 changed files with 564 additions and 692 deletions

View file

@ -2,59 +2,69 @@
<html lang="pl"> <html lang="pl">
<head> <head>
<meta charset="UTF-8"> <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@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="/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> </head>
<body class="dark-theme"> <body class="dark-theme">
<nav class="navbar navbar-expand-lg"> <nav class="navbar navbar-expand-lg">
<div class="container"> <div class="container">
<form class="d-flex me-lg-3 flex-grow-1" id="searchForm"> <form class="d-flex me-lg-3 flex-grow-1" id="searchForm">
<input class="me-2" <input class="form-control me-2 dark-input"
type="search" type="search"
placeholder="Szukaj..." placeholder="Szukaj książek..."
aria-label="Search" aria-label="Search"
id="searchInput"> id="searchInput">
</form> </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="d-flex align-items-center order-lg-2">
<div class="auth-links"> <div class="auth-links">
<div class="anonymous-links"> <div class="anonymous-links">
<a class="navbar-link" href="/login.html">Logowanie</a> <a class="navbar-link" href="/login.html">Logowanie</a>
<a class="navbar-link" href="/register.html">Rejestracja</a> <a class="navbar-link" href="/register.html">Rejestracja</a>
</div> </div>
<div class="user-links">
<div class="user-links"> <a class="navbar-link" href="/profile.html">Profil</a>
<a class="navbar-link" href="/profile.html">Profil</a> <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
<a class="navbar-link" href="#" id="logoutLink">Wyloguj</a> <a class="navbar-link" href="/cart.html">
<a class="navbar-link" href="/cart.html"> <i class="bi bi-basket"></i> Koszyk
<i class="bi bi-basket"></i> Koszyk </a>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</nav> </div>
</nav>
<main class="container py-5"> <main class="container my-5">
<div class="row" id="book-details"> <div class="row" id="book-details">
<div class="col-md-4"> <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>
<div class="col-md-8"> <div class="col-md-8">
<h1 id="book-title" class="mb-4"></h1> <h1 id="book-title" class="mb-3 fw-bold"></h1>
<h3 id="book-author" class="mb-3"></h3> <h3 id="book-author" class="mb-4 text-muted"></h3>
<p id="book-price" class="fs-4 mb-4"></p> <p id="book-price" class="fs-2 mb-4 text-primary fw-bold"></p>
<div class="card dark-card mb-4">
<div class="card mb-4">
<div class="card-body"> <div class="card-body">
<h4 class="mb-3">Opis</h4> <h4 class="mb-3">Opis</h4>
<p id="book-description"></p> <p id="book-description" class="card-text"></p>
</div> </div>
</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>
</div> </div>
</main> </main>
@ -72,6 +82,9 @@
<a href="https://sykorax.eu/">Współpraca</a> <a href="https://sykorax.eu/">Współpraca</a>
</div> </div>
</div> </div>
<div class="text-center mt-4">
<p class="text-muted">&copy; 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
</div>
</div> </div>
</footer> </footer>

View file

@ -1,59 +1,82 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- static/cart.html --> <html lang="pl">
<html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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@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="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="/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.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> </head>
<body class="dark-theme"> <body class="dark-theme">
<nav class="navbar navbar-expand-lg navbar-dark bg-black"> <nav class="navbar navbar-expand-lg">
<div class="container"> <div class="container">
<!-- Lewa strona - wyszukiwanie --> <form class="d-flex me-lg-3 flex-grow-1" id="searchForm">
<form class="d-flex me-lg-3 flex-grow-1" id="searchForm"> <input class="form-control me-2 dark-input"
<input class="form-control me-2 dark-input" type="search"
type="search" placeholder="Szukaj książek..."
placeholder="Szukaj książek..." aria-label="Search"
aria-label="Search" id="searchInput">
id="searchInput"> </form>
</form>
<!-- Środek - logo --> <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 ATHENAEUM</a>
<!-- Prawa strona - przyciski --> <div class="d-flex align-items-center order-lg-2">
<div class="d-flex align-items-center order-lg-2"> <div class="auth-links">
<div class="auth-links"> <div class="user-links">
<div class="anonymous-links"> <a class="navbar-link" href="/profile.html">Profil</a>
<a class="nav-link" href="/login.html">Logowanie</a> <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
<a class="nav-link" href="/register.html">Rejestracja</a> <a class="navbar-link" href="/cart.html">
</div> <i class="bi bi-basket"></i> Koszyk
</a>
</div>
</div>
</div>
</div>
</nav>
<div class="user-links"> <main class="container my-5">
<a class="nav-link" href="/profile.html">Profil</a> <h1 class="mb-4 fw-bold">Twój koszyk</h1>
<a class="nav-link" href="#" id="logoutLink">Wyloguj</a>
<a class="nav-link" href="/cart.html"> <div class="row">
<i class="bi bi-basket"></i> Koszyk <div class="col-lg-8">
</a> <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>
</div> </div>
</div> </div>
</nav>
<div class="col-lg-4">
<main class="container py-5"> <div class="card mb-4">
<h2 class="neon-title mb-4">Twój koszyk</h2> <div class="card-body">
<div id="cart-items" class="row g-4"></div> <h4 class="mb-3">Podsumowanie</h4>
<div class="text-center mt-5"> <div class="d-flex justify-content-between mb-3">
<button id="checkoutBtn" class="btn btn-gothic btn-lg"> <span>Wartość produktów:</span>
<i class="bi bi-wallet2"></i> Złóż zamówienie <span class="text-primary" id="products-value">0.00 PLN</span>
</button> </div>
</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> </main>
<footer> <footer>
@ -69,9 +92,13 @@
<a href="https://sykorax.eu/">Współpraca</a> <a href="https://sykorax.eu/">Współpraca</a>
</div> </div>
</div> </div>
<div class="text-center mt-4">
<p class="text-muted">&copy; 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
</div>
</div> </div>
</footer> </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/utils.js"></script>
<script type="module" src="/js/auth.js"></script> <script type="module" src="/js/auth.js"></script>
<script type="module" src="/js/cart.js"></script> <script type="module" src="/js/cart.js"></script>

View file

@ -1,446 +1,220 @@
/* static/css/styles.css */
:root { :root {
--green1: #193630; --dark-bg: #121212;
--green2: #294640; --darker-bg: #0a0a0a;
--green3: #395650; --light-text: #f8f9fa;
--green4: #496660; --muted-text: #adb5bd;
--green5: #597670; --primary: #d4af37; /* Złoty - główny kolor */
--gold1: #D3BB8A; --primary-dark: #b38f2d; /* Ciemniejszy złoty */
--gold2: #E3CB9A; --secondary: #0a1f0a; /* Ciemnozielony - drugi kolor */
--gold3: #F3DBAA; --border: #343a40;
--cyan: #60AEC5; --accent: #228B22; /* Zielony akcent */
} }
.dark-theme { .dark-theme {
background-color: var(--green3); background-color: var(--dark-bg);
color: var(--gold2); color: var(--light-text);
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Inter', sans-serif;
} }
nav { /* Nagłówek - oryginalny styl */
background-color: var(--green2); .navbar {
} background-color: #000;
padding: 1rem 0;
nav form input { border-bottom: 1px solid var(--border);
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%;
} }
.navbar-brand { .navbar-brand {
font-family: 'Lobster', cursive; font-family: 'Old English Text MT', serif;
font-size: 3rem; font-size: 2.5rem;
text-shadow: 2px 2px var(--green1); color: var(--primary) !important;
color: var(--gold1); text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
position: absolute;
left: 50%;
transform: translateX(-50%);
} }
.navbar-link { .navbar-link {
color: var(--gold1); color: var(--muted-text) !important;
text-decoration: none; text-decoration: none;
} margin: 0 0.8rem;
transition: color 0.3s;
.navbar-brand:hover, .navbar-link:hover { display: flex;
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;
align-items: center; align-items: center;
} }
/* Responsywność */ .navbar-link:hover, .navbar-link:focus {
@media (max-width: 768px) { color: var(--primary) !important;
#books-container {
grid-template-columns: 1fr;
}
.navbar-nav {
flex-direction: column;
gap: 0.5rem !important;
}
} }
.btn-outline-gothic:hover { .navbar-link i {
background-color: #0ff; margin-right: 0.3rem;
color: #000;
box-shadow: 0 0 15px #0ff;
} }
.order-item { /* Karty książek - proporcje 5:8 */
background-color: #2a2a2a; .book-card {
border-radius: 5px; height: 100%;
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 {
display: flex; 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, .book-card:hover {
.user-links { transform: translateY(-5px);
display: none; box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
border-color: var(--primary);
} }
.anonymous-links.visible, .cover-container {
.user-links.visible { position: relative;
display: flex !important; padding-bottom: 160%; /* 5:8 proportion (5/8 = 0.625) */
gap: 1rem; overflow: hidden;
background: #000;
} }
.book-cover {
@media (max-width: 991px) { position: absolute;
.navbar-brand { top: 0;
position: static; left: 0;
transform: none; width: 100%;
order: 0 !important; height: 100%;
margin: 0.5rem 0; object-fit: cover;
} transition: transform 0.3s ease;
.navbar-toggler {
order: 1;
}
#searchForm {
order: 2;
width: 100%;
margin-top: 1rem;
}
.auth-links {
order: 3;
width: 100%;
justify-content: center;
margin-top: 1rem;
}
} }
/* Responsywność formularza wyszukiwania */ .cover-container:hover .book-cover {
@media (min-width: 992px) { transform: scale(1.05);
#searchForm {
max-width: 400px;
}
.navbar-brand {
position: absolute;
}
} }
a { .book-body {
text-decoration: none; padding: 1.2rem;
} flex-grow: 1;
/* Koszyk - nowe style */
.cart-item-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.cart-item .card-body { .book-title {
padding: 1.5rem; font-size: 1.1rem;
margin-bottom: 0.5rem;
color: var(--light-text);
font-weight: 600;
min-height: 2.8em;
} }
.cart-item-title { .book-author {
font-size: 1.4rem; font-size: 0.9rem;
font-weight: bold; color: var(--muted-text);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.cart-item-author { .book-price {
color: #aaa; font-weight: 700;
font-style: italic; color: var(--primary);
margin-bottom: 1.5rem; margin-top: auto;
font-size: 1.2rem;
} }
.cart-item-info { /* Przyciski i elementy interfejsu */
display: flex; .btn {
justify-content: space-between; background-color: var(--primary);
gap: 1.5rem; border: none;
margin-bottom: 1.5rem; color: #000;
background-color: #222; padding: 0.8rem 1.5rem;
padding: 1.2rem; border-radius: 5px;
border-radius: 8px; font-weight: 500;
border: 1px solid #333; transition: all 0.3s;
} text-transform: uppercase;
letter-spacing: 1px;
.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;
font-weight: bold; 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;
}
} }

View file

@ -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@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="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="/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.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> </head>
<body class="dark-theme"> <body class="dark-theme">
<nav class="navbar navbar-expand-lg"> <nav class="navbar navbar-expand-lg">
<div class="container"> <div class="container">
<form class="d-flex me-lg-3 flex-grow-1" id="searchForm"> <div class="d-flex me-lg-3 flex-grow-1"></div>
<input class="me-2"
type="search" <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
placeholder="Szukaj..."
aria-label="Search"
id="searchInput">
</form>
<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="d-flex align-items-center order-lg-2"> <div class="anonymous-links">
<div class="auth-links"> <a class="navbar-link" href="/login.html">Logowanie</a>
<div class="anonymous-links"> <a class="navbar-link" href="/register.html">Rejestracja</a>
<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> </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> </div>
</div> </div>
@ -65,7 +76,7 @@
<footer> <footer>
<div class="container"> <div class="container">
<div class="row justify-content-center align-items-center text-center"> <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> <a href="https://sykorax.eu/">O Nas</a>
</div> </div>
<div class="col-auto"> <div class="col-auto">
@ -75,11 +86,15 @@
<a href="https://sykorax.eu/">Współpraca</a> <a href="https://sykorax.eu/">Współpraca</a>
</div> </div>
</div> </div>
<div class="text-center mt-4">
<p class="text-muted">&copy; 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
</div>
</div> </div>
</footer> </footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <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> </body>
</html> </html>

View file

@ -2,62 +2,66 @@
<html lang="pl"> <html lang="pl">
<head> <head>
<meta charset="UTF-8"> <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@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="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="/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.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> </head>
<body class="dark-theme"> <body class="dark-theme">
<nav class="navbar navbar-expand-lg"> <nav class="navbar navbar-expand-lg">
<div class="container"> <div class="container">
<form class="d-flex me-lg-3 flex-grow-1" id="searchForm"> <div class="d-flex me-lg-3 flex-grow-1"></div>
<input class="me-2"
type="search" <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
placeholder="Szukaj..."
aria-label="Search"
id="searchInput">
</form>
<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="d-flex align-items-center order-lg-2"> <div class="anonymous-links">
<div class="auth-links"> <a class="navbar-link" href="/login.html">Logowanie</a>
<div class="anonymous-links"> <a class="navbar-link" href="/register.html">Rejestracja</a>
<a class="navbar-link" href="/login.html">Logowanie</a> </div>
<a class="navbar-link" href="/register.html">Rejestracja</a> <div class="user-links">
</div> <a class="navbar-link" href="/profile.html">Profil</a>
<a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
<div class="user-links"> <a class="navbar-link" href="/cart.html">
<a class="navbar-link" href="/profile.html">Profil</a> <i class="bi bi-basket"></i> Koszyk
<a class="navbar-link" href="#" id="logoutLink">Wyloguj</a> </a>
<a class="navbar-link" href="/cart.html">
<i class="bi bi-basket"></i> Koszyk
</a>
</div>
</div> </div>
</div> </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>
</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> <footer>
<div class="container"> <div class="container">
@ -72,10 +76,14 @@
<a href="https://sykorax.eu/">Współpraca</a> <a href="https://sykorax.eu/">Współpraca</a>
</div> </div>
</div> </div>
<div class="text-center mt-4">
<p class="text-muted">&copy; 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
</div>
</div> </div>
</footer> </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> </body>
</html> </html>

View file

@ -3,51 +3,47 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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@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="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="/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.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> </head>
<body class="dark-theme"> <body class="dark-theme">
<nav class="navbar navbar-expand-lg"> <nav class="navbar navbar-expand-lg">
<div class="container"> <div class="container">
<form class="d-flex me-lg-3 flex-grow-1" id="searchForm"> <div class="d-flex me-lg-3 flex-grow-1"></div>
<input class="me-2"
type="search"
placeholder="Szukaj..."
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="d-flex align-items-center order-lg-2">
<div class="auth-links"> <div class="auth-links">
<div class="anonymous-links"> <div class="anonymous-links">
<a class="navbar-link" href="/login.html">Logowanie</a> <a class="navbar-link" href="/login.html">Logowanie</a>
<a class="navbar-link" href="/register.html">Rejestracja</a> <a class="navbar-link" href="/register.html">Rejestracja</a>
</div> </div>
<div class="user-links">
<div class="user-links"> <a class="navbar-link" href="/profile.html">Profil</a>
<a class="navbar-link" href="/profile.html">Profil</a> <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
<a class="navbar-link" href="#" id="logoutLink">Wyloguj</a> <a class="navbar-link" href="/cart.html">
<a class="navbar-link" href="/cart.html"> <i class="bi bi-basket"></i> Koszyk
<i class="bi bi-basket"></i> Koszyk </a>
</a>
</div>
</div> </div>
</div> </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"> <div class="card dark-card p-4 mb-4">
<h3 class="mb-3">Historia zamówień</h3> <h3 class="mb-3 border-bottom pb-2">Historia zamówień</h3>
<div id="order-history"></div> <div id="order-history" class="mt-3"></div>
</div> </div>
</main> </main>
@ -64,9 +60,13 @@
<a href="https://sykorax.eu/">Współpraca</a> <a href="https://sykorax.eu/">Współpraca</a>
</div> </div>
</div> </div>
<div class="text-center mt-4">
<p class="text-muted">&copy; 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
</div>
</div> </div>
</footer> </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/utils.js"></script>
<script type="module" src="/js/auth.js"></script> <script type="module" src="/js/auth.js"></script>
<script type="module" src="/js/profile.js"></script> <script type="module" src="/js/profile.js"></script>

View file

@ -2,69 +2,74 @@
<html lang="pl"> <html lang="pl">
<head> <head>
<meta charset="UTF-8"> <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@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="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="/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> </head>
<body class="dark-theme"> <body class="dark-theme">
<nav class="navbar navbar-expand-lg"> <nav class="navbar navbar-expand-lg">
<div class="container"> <div class="container">
<form class="d-flex me-lg-3 flex-grow-1" id="searchForm"> <div class="d-flex me-lg-3 flex-grow-1"></div>
<input class="me-2"
type="search" <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
placeholder="Szukaj..."
aria-label="Search"
id="searchInput">
</form>
<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="d-flex align-items-center order-lg-2"> <div class="anonymous-links">
<div class="auth-links"> <a class="navbar-link" href="/login.html">Logowanie</a>
<div class="anonymous-links"> <a class="navbar-link" href="/register.html">Rejestracja</a>
<a class="navbar-link" href="/login.html">Logowanie</a> </div>
<a class="navbar-link" href="/register.html">Rejestracja</a> <div class="user-links">
</div> <a class="navbar-link" href="/profile.html">Profil</a>
<a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
<div class="user-links"> <a class="navbar-link" href="/cart.html">
<a class="navbar-link" href="/profile.html">Profil</a> <i class="bi bi-basket"></i> Koszyk
<a class="navbar-link" href="#" id="logoutLink">Wyloguj</a> </a>
<a class="navbar-link" href="/cart.html">
<i class="bi bi-basket"></i> Koszyk
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</nav> </div>
</nav>
<div class="auth-container"> <main class="container my-5">
<h2 class="mb-4">REJESTRACJA</h2> <div class="row justify-content-center">
<form id="registerForm"> <div class="col-md-6">
<div class="mb-3"> <div class="auth-container p-4">
<input type="text" class="form-control dark-input" <h2 class="mb-4 text-center">REJESTRACJA</h2>
placeholder="Imię" required id="registerName"> <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>
<div class="mb-3"> </div>
<input type="email" class="form-control dark-input" </main>
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>
<footer> <footer>
<div class="container"> <div class="container">
@ -79,10 +84,14 @@
<a href="https://sykorax.eu/">Współpraca</a> <a href="https://sykorax.eu/">Współpraca</a>
</div> </div>
</div> </div>
<div class="text-center mt-4">
<p class="text-muted">&copy; 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
</div>
</div> </div>
</footer> </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> </body>
</html> </html>

View file

@ -2,50 +2,76 @@
<html lang="pl"> <html lang="pl">
<head> <head>
<meta charset="UTF-8"> <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@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="/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> </head>
<body class="dark-theme"> <body class="dark-theme">
<nav class="navbar navbar-expand-lg navbar-dark bg-black"> <nav class="navbar navbar-expand-lg">
<div class="container"> <div class="container">
<!-- Lewa strona - wyszukiwanie --> <div class="d-flex me-lg-3 flex-grow-1"></div>
<form class="d-flex me-lg-3 flex-grow-1" id="searchForm">
<input class="form-control me-2 dark-input" <a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENÆUM</a>
type="search"
placeholder="Szukaj książek..."
aria-label="Search"
id="searchInput">
</form>
<!-- Środek - logo --> <div class="d-flex align-items-center order-lg-2">
<a class="navbar-brand mx-lg-auto order-lg-1" href="/">DARK ATHENAEUM</a> <div class="auth-links">
<div class="user-links">
<!-- Prawa strona - przyciski --> <a class="navbar-link" href="/profile.html">Profil</a>
<div class="d-flex align-items-center order-lg-2"> <a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
<div class="auth-links"> <a class="navbar-link" href="/cart.html">
<div class="anonymous-links"> <i class="bi bi-basket"></i> Koszyk
<a class="nav-link" href="/login.html">Logowanie</a> </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> </div>
</div> </div>
</div> </div>
</nav> </div>
</nav>
<main class="container py-5 text-center"> <main class="container my-5 text-center py-5">
<h1 class="neon-title mb-4">Dziękujemy za zakup!</h1> <div class="row justify-content-center">
<p class="inter-font fs-5">Twoje zamówienie zostało pomyślnie zrealizowane.</p> <div class="col-md-8">
<a href="/profile.html" class="btn btn-gothic">Zobacz historię zamówień</a> <h1 class="display-3 fw-bold mb-4">Dziękujemy za zakup!</h1>
<a href="/" class="btn btn-outline-gothic ms-2">Strona główna</a> <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> </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">&copy; 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> </body>
</html> </html>