From 75accc1cd29b3d4aa777099ee2bb80ed8b2bd7e7 Mon Sep 17 00:00:00 2001
From: Jasmin <2211581@stud.hs-mannheim.de>
Date: Tue, 13 Jun 2023 22:54:41 +0200
Subject: [PATCH] Erstellt, wird vielleicht noch zusammengefasst

---
 reservierung.css | 130 ++++++++++++++++++++++++++++
 warenkorb.css    | 217 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 347 insertions(+)
 create mode 100644 reservierung.css
 create mode 100644 warenkorb.css

diff --git a/reservierung.css b/reservierung.css
new file mode 100644
index 0000000..cb136f5
--- /dev/null
+++ b/reservierung.css
@@ -0,0 +1,130 @@
+/*TODO: Hintergrundfarben entfernen*/
+
+
+.hauptcontainer {
+    /*Einzelne Elemente untereinander anzeigen.*/
+    flex-direction: column;
+}
+
+#reservationConfirmation_heading {
+    /* background-color: #70AD47; */
+    margin-top: 30px;
+    margin-left: 30px;
+    margin-bottom: 25px;
+    margin-right: 50px;
+    font-weight: 500;
+}
+
+#reservationConfirmation_subHeading {
+    margin-left: 45px;
+    margin-bottom: 20px;
+    font-weight: 500;
+    font-size: 20px;
+}
+
+/*Container wird mit Daten aus der Datenbank gefüllt.*/
+#booksToReserve_container {
+    padding-left: 45px;
+    padding-right: 50px;
+    padding-bottom: 30px;
+}
+
+.book_container {
+    /* background-color: blueviolet; */
+    display: flex;
+    /*Einzelne Elemente nebeneinander anzeigen.*/
+    flex-direction: row;
+    cursor: pointer;
+}
+
+.bookCover_container {
+    /*background-color: blue;*/
+    display: flex;
+    /*Verbietet dem Container, seine Standardgröße (px) zu ändern.*/
+    flex: 0 0 75px;
+    align-items: center;
+    height: auto;
+}
+
+.bookCover {
+    /*Bild passt sich seinem Container an.*/
+    max-width:100%;
+    max-height:100%;
+}
+
+.bookDetails_container {
+    /* background-color: aquamarine; */
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.bookTitle {
+    margin-bottom: 10px;
+    font-weight: 500;
+    font-size: 16px;
+}
+
+.available_container {
+    width: fit-content;
+    /*Hintergrundfarbe wird an Inhalt angepasst.*/
+    background-color: #70AD47;
+    /*background-color: #F34343;*/
+    /*Element immer an der unteren Seite des Containers platzieren.*/
+    margin-top: auto;
+}
+
+.available {
+    color: white;
+    margin: 10px 25px;
+}
+
+.divider {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    background-color: #987554;
+    width: 100%;
+    height: 1px;
+}
+
+#reservationConfirmationText {
+    margin-left: 45px;
+    margin-right: 50px;
+}
+
+#meinebuecher_link {
+    color: inherit;
+}
+
+#button_container {
+    margin-top: 20px;
+    padding-left: 45px;
+    padding-right: 50px;
+    margin-bottom: 50px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.reserve_button {
+    background-color: #664220;
+    color:white;
+    text-align: center;
+    border-radius: 10px;
+    font-size: medium;
+    border-width: 0px;
+    padding: 15px;
+}
+
+#backToCart_button {
+    margin-right: auto;
+    cursor: pointer;
+}
+
+#confirm_button {
+    margin-left: auto;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/warenkorb.css b/warenkorb.css
new file mode 100644
index 0000000..ed742d0
--- /dev/null
+++ b/warenkorb.css
@@ -0,0 +1,217 @@
+/*TODO: Hintergrundfarben entfernen*/
+
+.hauptcontainer {
+    /*Einzelne Elemente untereinander anzeigen.*/
+    flex-direction: column;
+    background-color: #987554;
+}
+
+#shoppingCart_heading {
+    /* background-color: #70AD47; */
+    margin-top: 30px;
+    margin-left: 30px;
+    margin-right: 50px;
+    font-weight: 500;
+    color: white;
+}
+
+#secondary_container {
+    display: flex;
+    flex-direction: row;
+    margin-left: 30px;
+    margin-right: 50px;
+    margin-bottom: 50px;
+}
+
+/*Container wird mit Daten aus der Datenbank gefüllt.*/
+#cartItems_container {
+    padding: 15px;
+    background-color: #E5D3B3;
+    overflow-y:auto
+}
+
+.book_container {
+    /* background-color: blueviolet; */
+    display: flex;
+    /*Einzelne Elemente nebeneinander anzeigen.*/
+    flex-direction: row;
+    cursor: pointer;
+    min-width: 0;
+}
+
+.bookCover_container {
+    /* background-color: blue; */
+    display: flex;
+    /*Verbietet dem Container, seine Standardgröße (px) zu ändern.*/
+    flex: 0 0 150px;
+    align-items: center;
+    height: auto;
+}
+
+.bookCover {
+    /*Bild passt sich seinem Container an.*/
+    max-width:100%;
+    max-height:100%;
+}
+
+.bookDetails_container {
+    /* background-color: aquamarine; */
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.bookTitle {
+    margin-bottom: 10px;
+    font-weight: 400;
+}
+
+.bookDetails {
+    margin-bottom: 10px;
+}
+
+.available_container {
+    width: fit-content;
+    /*Hintergrundfarbe wird an Inhalt angepasst.*/
+    background-color: #70AD47;
+    /*background-color: #F34343;*/
+    /*Element immer an der unteren Seite des Containers platzieren.*/
+    margin-top: auto;
+}
+
+.available {
+    color: white;
+    margin: 10px 25px;
+}
+
+.quantity_container {
+    /* background-color: chartreuse; */
+    display: flex;
+    margin-left: auto;
+    margin-top: auto;
+    flex: 0 0 40px;   
+}
+
+.reduce_container {
+    /* background-color: coral; */
+    display: flex;
+    align-items: center;
+}
+
+.reduce {
+    background-image: url('pictures/remove.png');
+    width: 30px;
+    height: 30px;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.reduce:hover {
+    background-image: url('pictures/remove_hover.png');
+    cursor: pointer;
+}
+
+.quantityText_container {
+    width: 30px;
+    background-color: white;
+    border-color: black;
+    border-style: solid;
+    border-width: 1px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: default;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.add_container {
+    /* background-color: coral; */
+    display: flex;
+    align-items: center;
+}
+
+.add {
+    background-image: url('pictures/add.png');
+    width: 30px;
+    height: 30px;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.add:hover {
+    background-image: url('pictures/add_hover.png');
+    cursor: pointer;
+}
+
+.trashCan_container {
+    /* background-color: chartreuse; */
+    padding-left: 20px;
+    margin-left: auto;
+    margin-top: auto;
+    flex: 0 0 30px;   
+}
+
+.trashCan {
+    background-image: url('pictures/bin.png');
+    width: 30px;
+    height: 30px;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.trashCan:hover {
+    background-image: url('pictures/bin_hover.png');
+    cursor: pointer;
+}
+
+.divider {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    background-color: #987554;
+    width: 100%;
+    height: 1px;
+}
+
+#totalQuantity_container {
+    background-color: #E5D3B3;
+    margin-left: 25px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    /* TODO: Elegantere Lösung finden */
+    min-width: 200px;
+    max-width: 200px;
+    min-height: 70px;
+    max-height: 70px;
+    padding: 15px;
+}
+
+#reserveNow {
+    margin-top: 10px;
+    background-color: #664220;
+    width: 160px;
+    height: 40px;
+    color:white;
+    text-align: center;
+    border-radius: 50px;
+    font-size: medium;
+    border-width: 0px;
+    cursor: pointer;
+}
+
+/*----------------------------------------------------------------------------*/
+
+@media screen and (max-width: 800px) {
+    #secondary_container {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    #totalQuantity_container {
+        margin-top: 30px;
+        margin-left: 0px;
+    }
+  }
\ No newline at end of file