diff --git a/src/client/saveplates/_src/index.ts b/src/client/saveplates/_src/index.ts
index f4977f9..0f38886 100644
--- a/src/client/saveplates/_src/index.ts
+++ b/src/client/saveplates/_src/index.ts
@@ -35,4 +35,27 @@ changeListButton?.addEventListener("click", () => {
element.style.width = "100%";
element.style.maxWidth = "none";
});
+});
+
+const savePlateItems = document.querySelectorAll(".saveplates-item");
+
+savePlateItems.forEach(item => {
+ item.addEventListener("click", () => {
+ const clickedItemId = item.id;
+
+ const modalItemId = clickedItemId + "-modal";
+ const modalElement = document.getElementById(modalItemId);
+
+ if (modalElement) {
+ modalElement.style.display = "flex";
+
+ const closeButton = modalElement.querySelector(".close-button");
+
+ if (closeButton) {
+ closeButton.addEventListener("click", () => {
+ modalElement.style.display = "none";
+ });
+ }
+ }
+ });
});
\ No newline at end of file
diff --git a/src/client/saveplates/_styles/index.scss b/src/client/saveplates/_styles/index.scss
index 22cef7e..b3f93d4 100644
--- a/src/client/saveplates/_styles/index.scss
+++ b/src/client/saveplates/_styles/index.scss
@@ -16,12 +16,277 @@
}
}
+.view-plate-modal-container {
+ display: none;
+ justify-content: center;
+
+ .view-plate-modal {
+ position: absolute;
+ background-color: var(--surface);
+
+ width: 98%;
+ height: fit-content;
+
+ border: 2px solid var(--dark-2);
+ border-radius: var(--border-radius);
+
+ padding: var(--small-gap);
+ margin: 4px;
+
+ .modal-top-wrapper {
+ display: flex;
+ justify-content: space-between;
+ gap: var(--small-gap);
+ flex-wrap: wrap;
+
+ .modal-top-left {
+ display: flex;
+ flex-wrap: wrap;
+
+ .modal-name {
+ color: var(--text);
+ padding-right: var(--small-gap);
+ }
+
+ .time-difficulty-wrapper {
+ display: flex;
+ gap: var(--small-gap);
+ }
+ }
+
+ .modal-top-right {
+ display: flex;
+ gap: var(--gap);
+ flex-wrap: wrap;
+ justify-content: right;
+ }
+ }
+
+ .content-container {
+ gap: var(--gap);
+ padding: var(--gap) 0;
+
+ display: grid;
+ grid-template-columns: 300px .8fr 2fr;
+
+ @media (max-width: 1100px) {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ align-content: center;
+ }
+
+ .content-info-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-self: center;
+ border: 2px solid var(--dark-3);
+ border-radius: var(--border-radius);
+ height: fit-content;
+ padding: var(--small-gap);
+ gap: var(--gap);
+
+ .content-info-top {
+ display: flex;
+ justify-content: space-between;
+
+ .portions-wrapper {
+ border: 2px solid var(--dark-3);
+ border-radius: var(--border-radius);
+ display: flex;
+ height: 32px;
+ width: fit-content;
+
+ .portions-input {
+ max-width: 50px;
+ outline: none;
+ background-color: transparent;
+ color: var(--text);
+ border: none;
+ padding: 1px 4px 1px var(--gap);
+ font-size: 16px;
+ }
+
+ .portions-text {
+ background-color: var(--secondary);
+ border-radius: 0 var(--border-radius) var(--border-radius) 0;
+ border-left: 2px solid var(--dark-3);
+ color: var(--text);
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ padding: 1px 8px;
+ cursor: pointer;
+
+ .material-symbols-outlined {
+ font-size: 16px;
+ }
+ }
+ }
+ }
+
+ .modal-info-content {
+ display: flex;
+ flex-direction: column;
+
+ border: 2px solid var(--dark-4);
+ border-radius: var(--border-radius);
+
+ padding: var(--small-gap);
+ gap: var(--small-gap);
+
+ .modal-info-content-head {
+ color: var(--text);
+ font-weight: bold;
+ }
+
+ .modal-info-items {
+ display: flex;
+ flex-direction: column;
+
+ gap: 4px;
+ color: var(--text);
+
+ padding-left: var(--small-gap);
+
+ & > * {
+ position: relative;
+ display: flex;
+ gap: var(--gap);
+
+ &::before {
+ position: absolute;
+ top: calc(var(--small-gap) * -0.5);
+ bottom: calc(var(--small-gap) * -0.5);
+ left: -15px;
+ content: '';
+ width: 1px;
+ background-color: var(--secondary);
+ }
+ }
+
+ .modal-info-item {
+ border: 2px solid var(--dark-3);
+ color: var(--text);
+ background-color: var(--dark-4);
+ border-radius: var(--border-radius);
+ padding: 2px var(--gap) 2px 14px;
+ width: fit-content;
+ display: flex;
+ gap: var(--small-gap);
+
+ margin-left: 20px;
+ }
+ }
+ }
+ }
+
+ .content-description-steps-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height: fit-content;
+ background-color: var(--dark-4);
+ border-radius: var(--border-radius);
+
+ @media (max-width: 1100px) {
+ background-color: transparent;
+ }
+
+ .content-description-steps {
+ background-color: var(--dark-4);
+ border-radius: var(--border-radius);
+ padding: var(--small-gap);
+ display: flex;
+ flex-direction: column;
+ gap: var(--small-gap);
+ width: 100%;
+
+ @media (max-width: 1100px) {
+ width: 300px;
+ }
+
+ .step {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--small-gap);
+
+ border: 2px solid var(--dark-3);
+ padding: var(--small-gap);
+ border-radius: var(--border-radius);
+ width: 100%;
+
+ .step-head {
+ color: var(--primary);
+ padding: 4px 0;
+ border-bottom: 2px solid var(--dark-3);
+ }
+
+ .step-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2px;
+ color: var(--text);
+
+ .light-step {
+ color: var(--dark-text);
+ }
+ }
+ }
+ }
+ }
+
+ .description-area-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-self: flex-start;
+ background-color: var(--dark-4);
+ border-radius: var(--border-radius);
+ height: fit-content;
+ width: 100%;
+ padding: var(--small-gap);
+
+ .description-area {
+ display: flex;
+ flex-direction: column;
+ gap: var(--small-gap);
+
+ .description {
+ display: flex;
+ flex-direction: column;
+ color: var(--text);
+ border: 2px solid var(--dark-3);
+ border-radius: var(--border-radius);
+ padding: var(--small-gap);
+
+ .description-head {
+ color: var(--primary);
+ padding-bottom: var(--small-gap);
+
+ }
+
+ .description-content {
+ padding-left: var(--gap);
+ font-size: 15px;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+
+
.saveplates {
display: flex;
justify-content: center;
.saveplates-container {
- max-width: 1100px;
+ max-width: 1300px;
display: flex;
flex-direction: column;
padding: var(--gap);
diff --git a/src/client/saveplates/index.html b/src/client/saveplates/index.html
index 17883cc..cb10a05 100644
--- a/src/client/saveplates/index.html
+++ b/src/client/saveplates/index.html
@@ -15,9 +15,139 @@
+
+
+
+
+
+
Kartoffelbrei und Lachs
+
+
+
+
+
+
+
+ sync
+ Portions
+
+
+
+
Ingredients
+
+
+ 10
+ kg
+ Kartoffeln
+
+
+ 2
+ L
+ Milch
+
+
+ 2
+ stk.
+ Lachse
+
+
+
+
+
Drinks
+
+
+ Wasser
+
+
+ Cola
+
+
+
+
+
Equipment
+
+
+ Messer
+
+
+ Pfanne
+
+
+ Topf
+
+
+ Löffel
+
+
+
+
+
+
+
1. Step
+
+ Kartoffeln Schälen
+ 7min
+
+
+
+
2. Step
+
+ Kartoffeln kochen
+ 15min
+
+
+
+
3. Step
+
+ Lachs in den Ofen
+ 200 Grad
+ 8min
+
+
+
+
+
+
+
1. Step Description
+
+ Die Kartoffeln schälen und gründlich abwaschen.
+
+
+
+
2. Step Description
+
+ Danach die Kartoffeln in kochendes und gesalzenes Wasser geben. Nach etwas 15min sind die Kartoffeln fertig. Man kann auch mit einer Gabel überprüfen, ob die Kartoffeln gut sind.
+
+
+
+
3. Step Description
+
+ Als nächstes den Lachs in den Ofen tun. Diesen vorher auf 200 Grad Umluft vorheizen. Den Ofen auf 8min einstellen. Während der Lachs im Ofen ist, mit Step 4 weitermachen.
+
+
+
+
+