From 3957d621a4b1cdc1b868e14f84e78d1dc82d0186 Mon Sep 17 00:00:00 2001 From: Lheorvine Date: Fri, 30 May 2025 19:04:31 +0200 Subject: [PATCH] refactor html --- static/book.html | 83 +++--- static/cart.html | 105 +++++--- static/css/styles.css | 578 +++++++++++++----------------------------- static/index.html | 111 ++++---- static/login.html | 102 ++++---- static/profile.html | 64 ++--- static/register.html | 117 +++++---- static/thankyou.html | 96 ++++--- 8 files changed, 564 insertions(+), 692 deletions(-) diff --git a/static/book.html b/static/book.html index b25bf00..17c6cf8 100644 --- a/static/book.html +++ b/static/book.html @@ -2,59 +2,69 @@ - Dark Athenaeum + + Dark Athenæum - Szczegóły książki + - + + + + - -
+
- Okładka książki +
+ Okładka książki +
-

-

-

-
+

+

+

+ +

Opis

-

+

- + +
@@ -72,6 +82,9 @@ Współpraca +
+

© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.

+
diff --git a/static/cart.html b/static/cart.html index 2c64674..82e144a 100644 --- a/static/cart.html +++ b/static/cart.html @@ -1,59 +1,82 @@ - - + - Dark Athenaeum + Dark Athenæum - Koszyk + + - + - - -
-

Twój koszyk

-
-
- -
+ +
+
+
+

Podsumowanie

+
+ Wartość produktów: + 0.00 PLN +
+
+ Dostawa: + 12.99 PLN +
+
+
+ Do zapłaty: + 0.00 PLN +
+ +
+
+
+
@@ -69,9 +92,13 @@ Współpraca +
+

© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.

+
+ diff --git a/static/css/styles.css b/static/css/styles.css index f1e92b1..e1619c9 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -1,446 +1,220 @@ +/* static/css/styles.css */ + :root { - --green1: #193630; - --green2: #294640; - --green3: #395650; - --green4: #496660; - --green5: #597670; - --gold1: #D3BB8A; - --gold2: #E3CB9A; - --gold3: #F3DBAA; - --cyan: #60AEC5; + --dark-bg: #121212; + --darker-bg: #0a0a0a; + --light-text: #f8f9fa; + --muted-text: #adb5bd; + --primary: #d4af37; /* Złoty - główny kolor */ + --primary-dark: #b38f2d; /* Ciemniejszy złoty */ + --secondary: #0a1f0a; /* Ciemnozielony - drugi kolor */ + --border: #343a40; + --accent: #228B22; /* Zielony akcent */ } .dark-theme { - background-color: var(--green3); - color: var(--gold2); + background-color: var(--dark-bg); + color: var(--light-text); + min-height: 100vh; + display: flex; + flex-direction: column; + font-family: 'Inter', sans-serif; } -nav { - background-color: var(--green2); -} - -nav form input { - background-color: var(--green1); - padding-left: 16px; - border: none; - border-radius: 8px; - width: 40%; - transition: width 0.4s ease-in-out; -} - -nav form input:focus { - padding-left: 13px; - border: 3px solid var(--green1); - width: 100%; +/* Nagłówek - oryginalny styl */ +.navbar { + background-color: #000; + padding: 1rem 0; + border-bottom: 1px solid var(--border); } .navbar-brand { - font-family: 'Lobster', cursive; - font-size: 3rem; - text-shadow: 2px 2px var(--green1); - color: var(--gold1); - position: absolute; - left: 50%; - transform: translateX(-50%); + font-family: 'Old English Text MT', serif; + font-size: 2.5rem; + color: var(--primary) !important; + text-shadow: 0 0 5px rgba(212, 175, 55, 0.5); } .navbar-link { - color: var(--gold1); + color: var(--muted-text) !important; text-decoration: none; -} - -.navbar-brand:hover, .navbar-link:hover { - color: var(--gold3); -} - -footer { - font-weight: bold; - background-color: var(--green2); - padding: 0; - margin-top: 0; - font-size: 12px; - font-family: 'Inter', sans-serif; - color: var(--gold1); - left: 0; - bottom: 0; - width: 100%; -} - -.card { - background: linear-gradient(145deg, #08352c 0%, #062a23 100%); - border: 1px solid #1c4d42; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); -} - -.card a { - color: var(--text-gold); - text-decoration: none; -} - -.btn-gothic { - background-color: #1c4d42; - color: var(--text-gold); - border: 1px solid #2a6b5e; -} - -.btn-gothic:hover { - background-color: #2a6b5e; - color: #fff; -} - -.auth-container { - max-width: 500px; - margin: 2rem auto; - padding: 2rem; - border: 2px solid var(--green5); - border-radius: 8px; - background-color: var(--green2); -} - -h1 { - font-weight: bold; - font-family: 'Lobster', cursive; -} - -h2 { - font-family: 'Lobster', cursive; - text-align: center; - font-size: 2.5rem; - margin-bottom: 2rem; -} - -h3, h4 { - font-family: 'Lobster', cursive; -} - -img { - border: 2px solid var(--green1); -} - -.auth-container button, #book-details button { - background-color: var(--green3); - border: 2px solid var(--green1); - color: var(--gold3); -} - -.auth-container button:hover, #book-details button:hover { - background-color: var(--green1); - border-color: var(--gold2); - color: var(--gold1); -} - -.auth-container a { - color: var(--cyan); -} - -.auth-container a:hover { - text-decoration: underline; -} - -#books-container { - justify-content: center !important; -} - -.book-card { - width: 100%; /* Wykorzystaj całą dostępną szerokość */ - height: 100%; - background: var(--green1); - border: 2px solid var(--green1); - transition: transform 0.3s ease; -} - -.cover-container { - width: 100%; - aspect-ratio: 5/8; /* Nowoczesne podejście do proporcji */ - overflow: hidden; - position: relative; -} - -.book-cover { - width: 100%; - object-fit: cover; - object-position: center top; - transition: transform 0.3s ease; - transform: scale(1.05); -} - -#profile { - background: var(--green1); - border: 1px solid var(--gold1); - border-radius: 8px; - color: var(--gold2); -} - -.order { - background: var(--green2); - border: 1px solid var(--gold1); -} - -.card { - color: var(--gold2); -} - -.card-header { - border: 0; - color: var(--gold2); -} - -.card-title { - color: var(--gold2); -} - -.book-cover:hover { - transform: scale(1.1); -} - - -.book-title { - font-size: 1rem; - line-height: 1.3; - height: 3.2em; /* Na 2 linie tekstu */ - margin: 0.5rem 0; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-align: center; - padding: 0 0.25rem; - color: var(--gold1); - text-decoration: none; -} - -.book-title a:visited { - text-decoration: none; -} - -.book-info { - color: var(--text-gold); - text-align: center; - padding: 1rem; -} - -footer a { - color: var(--gold1); - text-decoration: none; -} - -footer a:hover { - color: var(--gold3); -} - -.text-accent { - color: var(--accent-blue) !important; -} - -#book-description { - line-height: 1.8; - font-size: 1.1rem; -} - -.card-body { - background: var(--green1); - border: 1px solid var(--gold2); - border-radius: 4px; -} - -#searchInput { - height: 50px; - font-size: 1.2rem; -} - -/* W pliku styles.css */ -.navbar-nav { - gap: 1.5rem !important; /* Odstępy między linkami */ -} - -footer a { - padding: 0.5rem 1rem; /* Większy obszar klikalny */ - display: inline-block; /* Lepsze wyrównanie */ -} - -.card-img-top { - height: 350px; - object-fit: cover; - object-position: center top; -} - -#searchInput::placeholder { - color: #93B8B1; - opacity: 0.7; -} - -.remove-from-cart { - transition: all 0.3s ease; -} - -.remove-from-cart:hover { - transform: scale(1.05); - box-shadow: 0 0 8px rgba(220, 53, 69, 0.6); -} - -.user-links, .anonymous-links { - gap: 1rem; + margin: 0 0.8rem; + transition: color 0.3s; + display: flex; align-items: center; } -/* Responsywność */ -@media (max-width: 768px) { - #books-container { - grid-template-columns: 1fr; - } - - .navbar-nav { - flex-direction: column; - gap: 0.5rem !important; - } +.navbar-link:hover, .navbar-link:focus { + color: var(--primary) !important; } -.btn-outline-gothic:hover { - background-color: #0ff; - color: #000; - box-shadow: 0 0 15px #0ff; +.navbar-link i { + margin-right: 0.3rem; } -.order-item { - background-color: #2a2a2a; - border-radius: 5px; - padding: 10px; - margin-bottom: 10px; -} - -.order-item:last-child { - margin-bottom: 0; -} - -.hidden { - display: none !important; -} - -/* Pokazywanie elementów */ -.visible { - display: flex !important; -} - -.auth-links { +/* Karty książek - proporcje 5:8 */ +.book-card { + height: 100%; display: flex; - gap: 1rem; + flex-direction: column; + background: var(--darker-bg); + border: 1px solid var(--border); + border-radius: 8px; + overflow: hidden; + transition: transform 0.3s ease, box-shadow 0.3s ease; } -.anonymous-links, -.user-links { - display: none; +.book-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2); + border-color: var(--primary); } -.anonymous-links.visible, -.user-links.visible { - display: flex !important; - gap: 1rem; +.cover-container { + position: relative; + padding-bottom: 160%; /* 5:8 proportion (5/8 = 0.625) */ + overflow: hidden; + background: #000; } - -@media (max-width: 991px) { - .navbar-brand { - position: static; - transform: none; - order: 0 !important; - margin: 0.5rem 0; - } - - .navbar-toggler { - order: 1; - } - - #searchForm { - order: 2; - width: 100%; - margin-top: 1rem; - } - - .auth-links { - order: 3; - width: 100%; - justify-content: center; - margin-top: 1rem; - } +.book-cover { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; } -/* Responsywność formularza wyszukiwania */ -@media (min-width: 992px) { - #searchForm { - max-width: 400px; - } - - .navbar-brand { - position: absolute; - } +.cover-container:hover .book-cover { + transform: scale(1.05); } -a { - text-decoration: none; -} - -/* Koszyk - nowe style */ -.cart-item-details { +.book-body { + padding: 1.2rem; + flex-grow: 1; display: flex; flex-direction: column; } -.cart-item .card-body { - padding: 1.5rem; +.book-title { + font-size: 1.1rem; + margin-bottom: 0.5rem; + color: var(--light-text); + font-weight: 600; + min-height: 2.8em; } -.cart-item-title { - font-size: 1.4rem; - font-weight: bold; +.book-author { + font-size: 0.9rem; + color: var(--muted-text); margin-bottom: 0.5rem; } -.cart-item-author { - color: #aaa; - font-style: italic; - margin-bottom: 1.5rem; +.book-price { + font-weight: 700; + color: var(--primary); + margin-top: auto; + font-size: 1.2rem; } -.cart-item-info { - display: flex; - justify-content: space-between; - gap: 1.5rem; - margin-bottom: 1.5rem; - background-color: #222; - padding: 1.2rem; - border-radius: 8px; - border: 1px solid #333; -} - -.cart-item-info > div { - flex: 1; - min-width: 120px; -} - -.cart-item-price, -.cart-item-quantity, -.cart-item-total { - display: block; - margin-bottom: 0.5rem; - font-size: 0.95rem; - color: #ddd; -} - -.cart-remove-btn, .decrease-quantity { - padding: 0.7rem 1rem; - font-size: 0.95rem; - transition: all 0.3s ease; -} - -.cart-remove-btn:hover, .decrease-quantity:hover { - transform: translateY(-3px); - box-shadow: 0 4px 12px rgba(0,0,0,0.3); -} - -/* Suma całkowita - większy nacisk */ -.total-cart-value { - font-size: 2rem; +/* Przyciski i elementy interfejsu */ +.btn { + background-color: var(--primary); + border: none; + color: #000; + padding: 0.8rem 1.5rem; + border-radius: 5px; + font-weight: 500; + transition: all 0.3s; + text-transform: uppercase; + letter-spacing: 1px; font-weight: bold; - color: #ffcc00; - text-shadow: 0 0 8px rgba(255, 204, 0, 0.4); +} + +.btn:hover { + background-color: var(--primary-dark); + transform: translateY(-2px); +} + +.text-primary { + color: var(--primary) !important; +} + +.bg-primary { + background-color: var(--primary) !important; +} + +/* Formularze */ +.auth-container { + max-width: 500px; + margin: 3rem auto; + padding: 2.5rem; + background: var(--darker-bg); + border-radius: 10px; + border: 1px solid var(--border); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); +} + +.auth-container h2 { + text-align: center; + margin-bottom: 1.5rem; + font-weight: 700; + color: var(--primary); +} + +.dark-input { + background-color: #1e1e1e; + border: 1px solid var(--border); + color: var(--light-text); + padding: 0.8rem; + border-radius: 5px; + margin-bottom: 1.2rem; + width: 100%; +} + +.dark-input:focus { + background-color: #1e1e1e; + color: var(--light-text); + border-color: var(--primary); + box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25); +} + +/* Stopka */ +footer { + background-color: #000; + padding: 2.5rem 0; + margin-top: auto; + border-top: 1px solid var(--border); +} + +footer a { + color: var(--muted-text); + text-decoration: none; + margin: 0 1rem; + transition: color 0.3s; +} + +footer a:hover { + color: var(--primary); +} + +footer .text-center { + color: var(--muted-text); +} + +/* Responsywność */ +@media (max-width: 768px) { + .navbar-brand { + font-size: 1.8rem; + } + + .cover-container { + padding-bottom: 130%; + } + + .book-title { + min-height: auto; + } } diff --git a/static/index.html b/static/index.html index 1b1bbbe..a7f169f 100644 --- a/static/index.html +++ b/static/index.html @@ -7,56 +7,67 @@ + + - + - + +
+
+
+

Księgarnia dla wymagających

+

Odkryj unikalne dzieła literackie w mrocznej atmosferze

+
+ + +
+ +
+ +
+ +
+
+ +
+
+
@@ -65,7 +76,7 @@
-
+
O Nas
@@ -75,11 +86,15 @@ Współpraca
+
+

© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.

+
- + + + - diff --git a/static/login.html b/static/login.html index e0ac19b..84b40a3 100644 --- a/static/login.html +++ b/static/login.html @@ -2,62 +2,66 @@ - Logowanie + + Dark Athenæum - Logowanie + + - + - + +
+
+
+
+

LOGOWANIE

+
+
+ +
+
+ +
+ +
+
+ Nie masz konta? Zarejestruj się +
+
+
+
+
@@ -72,10 +76,14 @@ Współpraca
+
+

© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.

+
- + + + - diff --git a/static/profile.html b/static/profile.html index dc57710..9eaf305 100644 --- a/static/profile.html +++ b/static/profile.html @@ -3,51 +3,47 @@ - Dark Athenaeum + Dark Athenæum - Profil + + - + - -
-

Twój profil

+ +
+

Twój profil

-
-

Historia zamówień

-
+
+

Historia zamówień

+
@@ -64,9 +60,13 @@ Współpraca +
+

© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.

+
+ diff --git a/static/register.html b/static/register.html index 1ace860..8fe3835 100644 --- a/static/register.html +++ b/static/register.html @@ -2,69 +2,74 @@ - Rejestracja + + Dark Athenæum - Rejestracja - + + + + - -
-

REJESTRACJA

-
-
- +
+
+
+
+

REJESTRACJA

+ +
+ +
+
+ +
+
+ +
+
+ +
+ + +
+ Masz już konto? Zaloguj się +
+
-
- -
-
- -
-
- -
- - -
- Masz już konto? Zaloguj się -
-
+
+
@@ -79,10 +84,14 @@ Współpraca
+
+

© 2023 Dark Athenæum. Wszelkie prawa zastrzeżone.

+
- + + + - diff --git a/static/thankyou.html b/static/thankyou.html index 80ede27..97ea97f 100644 --- a/static/thankyou.html +++ b/static/thankyou.html @@ -2,50 +2,76 @@ - Podziękowanie - Dark Athenaeum + + Dark Athenæum - Dziękujemy + + + + + - -
-

Dziękujemy za zakup!

-

Twoje zamówienie zostało pomyślnie zrealizowane.

- Zobacz historię zamówień - Strona główna +
+
+
+

Dziękujemy za zakup!

+

Twoje zamówienie zostało pomyślnie zrealizowane.

+ +
+ + Historia zamówień + + + Strona główna + +
+
+
+ + + + + +