refactor html
This commit is contained in:
parent
1adcd8617a
commit
3957d621a4
8 changed files with 564 additions and 692 deletions
|
|
@ -2,18 +2,23 @@
|
||||||
<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>
|
||||||
|
|
@ -26,7 +31,6 @@
|
||||||
<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>
|
||||||
|
|
@ -39,22 +43,28 @@
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</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">© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
<!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"
|
||||||
|
|
@ -23,21 +23,14 @@
|
||||||
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="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">
|
<div class="user-links">
|
||||||
<a class="nav-link" href="/profile.html">Profil</a>
|
<a class="navbar-link" href="/profile.html">Profil</a>
|
||||||
<a class="nav-link" href="#" id="logoutLink">Wyloguj</a>
|
<a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
|
||||||
<a class="nav-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>
|
||||||
|
|
@ -46,14 +39,44 @@
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main class="container py-5">
|
<main class="container my-5">
|
||||||
<h2 class="neon-title mb-4">Twój koszyk</h2>
|
<h1 class="mb-4 fw-bold">Twój koszyk</h1>
|
||||||
<div id="cart-items" class="row g-4"></div>
|
|
||||||
<div class="text-center mt-5">
|
<div class="row">
|
||||||
<button id="checkoutBtn" class="btn btn-gothic btn-lg">
|
<div class="col-lg-8">
|
||||||
<i class="bi bi-wallet2"></i> Złóż zamówienie
|
<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 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>
|
</button>
|
||||||
</div>
|
</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">© 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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-brand:hover, .navbar-link:hover {
|
.navbar-link:hover, .navbar-link:focus {
|
||||||
color: var(--gold3);
|
color: var(--primary) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
.navbar-link i {
|
||||||
font-weight: bold;
|
margin-right: 0.3rem;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Karty książek - proporcje 5:8 */
|
||||||
.book-card {
|
.book-card {
|
||||||
width: 100%; /* Wykorzystaj całą dostępną szerokość */
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: var(--green1);
|
display: flex;
|
||||||
border: 2px solid var(--green1);
|
flex-direction: column;
|
||||||
transition: transform 0.3s ease;
|
background: var(--darker-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.book-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
|
||||||
|
border-color: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cover-container {
|
.cover-container {
|
||||||
width: 100%;
|
|
||||||
aspect-ratio: 5/8; /* Nowoczesne podejście do proporcji */
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
padding-bottom: 160%; /* 5:8 proportion (5/8 = 0.625) */
|
||||||
|
overflow: hidden;
|
||||||
|
background: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.book-cover {
|
.book-cover {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center top;
|
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cover-container:hover .book-cover {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
#profile {
|
.book-body {
|
||||||
background: var(--green1);
|
padding: 1.2rem;
|
||||||
border: 1px solid var(--gold1);
|
flex-grow: 1;
|
||||||
border-radius: 8px;
|
display: flex;
|
||||||
color: var(--gold2);
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
.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;
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: var(--light-text);
|
||||||
|
font-weight: 600;
|
||||||
|
min-height: 2.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-body {
|
.book-author {
|
||||||
background: var(--green1);
|
font-size: 0.9rem;
|
||||||
border: 1px solid var(--gold2);
|
color: var(--muted-text);
|
||||||
border-radius: 4px;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#searchInput {
|
.book-price {
|
||||||
height: 50px;
|
font-weight: 700;
|
||||||
|
color: var(--primary);
|
||||||
|
margin-top: auto;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* W pliku styles.css */
|
/* Przyciski i elementy interfejsu */
|
||||||
.navbar-nav {
|
.btn {
|
||||||
gap: 1.5rem !important; /* Odstępy między linkami */
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
footer a {
|
||||||
padding: 0.5rem 1rem; /* Większy obszar klikalny */
|
color: var(--muted-text);
|
||||||
display: inline-block; /* Lepsze wyrównanie */
|
text-decoration: none;
|
||||||
|
margin: 0 1rem;
|
||||||
|
transition: color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-img-top {
|
footer a:hover {
|
||||||
height: 350px;
|
color: var(--primary);
|
||||||
object-fit: cover;
|
|
||||||
object-position: center top;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#searchInput::placeholder {
|
footer .text-center {
|
||||||
color: #93B8B1;
|
color: var(--muted-text);
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsywność */
|
/* Responsywność */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
#books-container {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline-gothic:hover {
|
|
||||||
background-color: #0ff;
|
|
||||||
color: #000;
|
|
||||||
box-shadow: 0 0 15px #0ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anonymous-links,
|
|
||||||
.user-links {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anonymous-links.visible,
|
|
||||||
.user-links.visible {
|
|
||||||
display: flex !important;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 991px) {
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
position: static;
|
font-size: 1.8rem;
|
||||||
transform: none;
|
|
||||||
order: 0 !important;
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-toggler {
|
.cover-container {
|
||||||
order: 1;
|
padding-bottom: 130%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#searchForm {
|
.book-title {
|
||||||
order: 2;
|
min-height: auto;
|
||||||
width: 100%;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-links {
|
|
||||||
order: 3;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsywność formularza wyszukiwania */
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
#searchForm {
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Koszyk - nowe style */
|
|
||||||
.cart-item-details {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cart-item .card-body {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cart-item-title {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cart-item-author {
|
|
||||||
color: #aaa;
|
|
||||||
font-style: italic;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #ffcc00;
|
|
||||||
text-shadow: 0 0 8px rgba(255, 204, 0, 0.4);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -7,19 +7,15 @@
|
||||||
<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>
|
||||||
|
|
||||||
|
|
@ -29,37 +25,52 @@
|
||||||
<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="/cart.html">
|
|
||||||
<i class="bi bi-basket"></i>
|
|
||||||
</a>
|
|
||||||
<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">
|
||||||
|
<i class="bi bi-basket"></i> Koszyk
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main class="container py-5">
|
<main class="container my-5">
|
||||||
<h2 class="text-center mb-5">POPULARNE</h2>
|
<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>
|
||||||
|
|
||||||
<div class="container-fluid">
|
<!-- Wyszukiwanie przeniesione obok sortowania -->
|
||||||
<div class="row justify-content-center">
|
<div class="col-md-5">
|
||||||
<div class="col-12 col-xxl-10"> <!-- Adjust max width if needed -->
|
<input class="form-control dark-input"
|
||||||
<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">
|
type="search"
|
||||||
<!-- Dynamicznie ładowane książki -->
|
placeholder="Szukaj książek..."
|
||||||
<div class="col-12 text-center">
|
aria-label="Search"
|
||||||
<div class="spinner-border text-danger" role="status">
|
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>
|
<span class="visually-hidden">Ładowanie...</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
@ -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">© 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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,23 +2,20 @@
|
||||||
<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"
|
|
||||||
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>
|
||||||
|
|
||||||
|
|
@ -28,7 +25,6 @@
|
||||||
<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>
|
||||||
|
|
@ -41,8 +37,11 @@
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="auth-container">
|
<main class="container my-5">
|
||||||
<h2 class="mb-4">LOGOWANIE</h2>
|
<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">
|
<form id="loginForm">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<input type="email" class="form-control dark-input"
|
<input type="email" class="form-control dark-input"
|
||||||
|
|
@ -52,12 +51,17 @@
|
||||||
<input type="password" class="form-control dark-input"
|
<input type="password" class="form-control dark-input"
|
||||||
placeholder="Hasło" required id="loginPassword">
|
placeholder="Hasło" required id="loginPassword">
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn w-100">ZALOGUJ SIĘ</button>
|
<button type="submit" class="btn w-100 py-3">
|
||||||
|
<i class="bi bi-box-arrow-in-right me-2"></i> ZALOGUJ SIĘ
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
<div class="text-center mt-3">
|
<div class="text-center mt-3">
|
||||||
Nie masz konta? <a href="/register.html">Zarejestruj się</a>
|
Nie masz konta? <a href="/register.html" class="text-gothic">Zarejestruj się</a>
|
||||||
</div>
|
</div>
|
||||||
</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">© 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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,23 +3,19 @@
|
||||||
<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>
|
||||||
|
|
||||||
|
|
@ -29,7 +25,6 @@
|
||||||
<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>
|
||||||
|
|
@ -42,12 +37,13 @@
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main class="container py-5">
|
|
||||||
<h2 class="mb-4">Twój profil</h2>
|
|
||||||
|
|
||||||
<div id="profile" class="p-4 mb-4">
|
<main class="container my-5">
|
||||||
<h3 class="mb-3">Historia zamówień</h3>
|
<h1 class="mb-4 fw-bold">Twój profil</h1>
|
||||||
<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>
|
</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">© 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>
|
||||||
|
|
|
||||||
|
|
@ -2,22 +2,20 @@
|
||||||
<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"
|
|
||||||
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>
|
||||||
|
|
||||||
|
|
@ -27,7 +25,6 @@
|
||||||
<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>
|
||||||
|
|
@ -40,8 +37,11 @@
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="auth-container">
|
<main class="container my-5">
|
||||||
<h2 class="mb-4">REJESTRACJA</h2>
|
<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">
|
<form id="registerForm">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<input type="text" class="form-control dark-input"
|
<input type="text" class="form-control dark-input"
|
||||||
|
|
@ -59,12 +59,17 @@
|
||||||
<input type="password" class="form-control dark-input"
|
<input type="password" class="form-control dark-input"
|
||||||
placeholder="Powtórz hasło" required id="registerConfirmPassword">
|
placeholder="Powtórz hasło" required id="registerConfirmPassword">
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="btn w-100">ZAREJESTRUJ SIĘ</button>
|
<button type="submit" class="btn w-100 py-3">
|
||||||
|
<i class="bi bi-person-plus me-2"></i> ZAREJESTRUJ SIĘ
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
<div class="text-center mt-3">
|
<div class="text-center mt-3">
|
||||||
Masz już konto? <a href="/login.html">Zaloguj się</a>
|
Masz już konto? <a href="/login.html" class="text-gothic">Zaloguj się</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<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">© 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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,37 +2,29 @@
|
||||||
<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"
|
|
||||||
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 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="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">
|
<div class="user-links">
|
||||||
<a class="nav-link" href="/profile.html">Profil</a>
|
<a class="navbar-link" href="/profile.html">Profil</a>
|
||||||
<a class="nav-link" href="#" id="logoutLink">Wyloguj</a>
|
<a class="navbar-link" href="#" id="logoutLink">Wyloguj</a>
|
||||||
<a class="nav-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>
|
||||||
|
|
@ -41,11 +33,45 @@
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</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">© 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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue