lheor/Athenaeum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor html

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

83
static/book.html
View file

@ -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">&copy; 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
</div>
</div>
</footer>

105
static/cart.html
View file

@ -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">&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>
<script type="module" src="/js/cart.js"></script>

578
static/css/styles.css
View file

@ -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;
}
}

111
static/index.html
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-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">&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 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>

102
static/login.html
View file

@ -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">&copy; 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>

64
static/profile.html
View file

@ -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">&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>
<script type="module" src="/js/profile.js"></script>

117
static/register.html
View file

@ -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">&copy; 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>

96
static/thankyou.html
View file

@ -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">&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>
</html>