feat: made DonationPageView

src/main/java/edu/group5/app/control/donationpage/DonationPageController.java

@@ -0,0 +1,16 @@
+package edu.group5.app.control.donationpage;
+
+import edu.group5.app.control.MainController;
+
+public class DonationPageController {
+  private final MainController controller;
+
+  public DonationPageController(MainController controller) {
+    this.controller = controller;
+  }
+  public void handleDonationBtn() {
+    System.out.println("Donating");
+    controller.showPaymentCompletePage();
+  }
+
+}

src/main/java/edu/group5/app/control/donationpage/PaymentCompleteController.java

@@ -0,0 +1,4 @@
+package edu.group5.app.control.donationpage;
+
+public class PaymentCompleteController {
+}

src/main/java/edu/group5/app/view/donationpage/DonationPageView.java

@@ -0,0 +1,106 @@
+package edu.group5.app.view.donationpage;
+
+import edu.group5.app.control.HeaderController;
+import edu.group5.app.control.donationpage.DonationPageController;
+import edu.group5.app.view.Header;
+import javafx.geometry.Insets;
+import javafx.geometry.Pos;
+import javafx.scene.control.Button;
+import javafx.scene.control.TextField;
+import javafx.scene.layout.BorderPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.TilePane;
+import javafx.scene.layout.VBox;
+import javafx.scene.text.Text;
+import javafx.scene.text.TextAlignment;
+
+public class DonationPageView extends BorderPane {
+  private final DonationPageController controller;
+
+  public DonationPageView(DonationPageController donationPageController, HeaderController headerController) {
+    this.controller = donationPageController;
+    getStylesheets().add(getClass().getResource("/donationpage/donation.css").toExternalForm());
+
+    Header headerView = new Header(headerController);
+    setTop(headerView);
+
+    VBox content = new VBox();
+    content.getChildren().addAll(createDonationGrid(), createDonateSection());
+    setCenter(content);
+
+  }
+  private TilePane createDonationGrid(){
+    TilePane body = new TilePane();
+    body.setAlignment(Pos.CENTER);
+    body.setPrefColumns(3);
+    body.setPrefRows(2);
+    body.setPrefTileWidth(300);
+    body.setPrefTileHeight(150);
+    body.setHgap(20);
+    body.setVgap(20);
+    body.setPadding(new Insets(40, 40, 20, 40));
+
+    String[][] labels = {
+        {"Tiny", "50 kr"},
+        {"Small", "100 kr"},
+        {"Medium", "250 kr"},
+        {"Big", "500 kr"},
+        {"Grandiose", "1000 kr"},
+    };
+    for (String[] label : labels) {
+      body.getChildren().add(createDonationButton(label[0], label[1]));
+    }
+    body.getChildren().add(createCustomButton());
+
+    return body;
+  }
+
+  public Button createDonationButton(String title, String amount) {
+    Button button = new Button(title + "\n" + amount);
+    button.setWrapText(true);
+    button.setTextAlignment(TextAlignment.CENTER);
+    button.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
+    button.getStyleClass().add("donation-button");
+    button.setOnAction(e -> {
+      if (button.getStyleClass().contains("donation-button-selected")) {
+        button.getStyleClass().remove("donation-button-selected");
+      } else {
+        button.getStyleClass().add("donation-button-selected");
+      }
+    });
+    return button;
+  }
+  private VBox createCustomButton() {
+    Text titleText = new Text("Custom Donation");
+    titleText.getStyleClass().add("donation-title");
+
+    HBox amountRow = new HBox(4);
+    amountRow.setAlignment(Pos.CENTER);
+
+    Text krText = new Text("kr");
+    krText.getStyleClass().add("donation-amount");
+
+    TextField amountField = new TextField();
+    amountField.getStyleClass().add("donation-input");
+
+    amountRow.getChildren().addAll(amountField, krText);
+
+    VBox box = new VBox(6, titleText, amountRow);
+    box.setAlignment(Pos.CENTER);
+    box.getStyleClass().add("donation-button");
+
+    return box;
+  }
+  private HBox createDonateSection() {
+    Button donateBtn = new Button("Donate");
+    donateBtn.getStyleClass().add("donate-button");
+    donateBtn.setOnAction(e -> controller.handleDonationBtn());
+
+    HBox section = new HBox(donateBtn);
+    section.setAlignment(Pos.CENTER);
+    section.setPadding(new Insets(20, 0, 30, 0));
+    return section;
+
+  }
+
+}

src/main/java/edu/group5/app/view/donationpage/PaymentCompletePageView.java

@@ -0,0 +1,4 @@
+package edu.group5.app.view.donationpage;
+
+public class PaymentCompletePageView {
+}

src/main/resources/donationpage/donation.css

@@ -0,0 +1,53 @@
+.donation-button {
+    -fx-background-color: white;
+    -fx-border-color: #ccc;
+    -fx-border-width: 2px;
+    -fx-border-radius: 8;
+    -fx-background-radius: 8;
+    -fx-cursor: hand;
+    -fx-font-size: 18px;
+    -fx-font-weight: bold;
+}
+
+.donation-button:hover {
+    -fx-border-color: #f0f0f0;
+}
+
+.donation-button-selected {
+    -fx-background-color: #111;
+    -fx-text-fill: white;
+    -fx-border-color: #111;
+}
+.donation-title {
+    -fx-font-size: 18px;
+    -fx-font-weight: bold;
+    -fx-fill: #111;
+}
+.donation-amount {
+    -fx-font-size: 18px;
+    -fx-fill: #111;
+}
+.donation-input {
+    -fx-font-size:16px;
+    -fx-pref-width: 140px;
+    -fx-background-color: transparent;
+    -fx-border-color: transparent transparent #333 transparent;
+    -fx-alignment: center;
+}
+.donation-input:focused {
+    -fx-border-color: transparent transparent #4a90d9 transparent;
+}
+.donate-button {
+    -fx-pref-height: 55px;
+    -fx-background-color: #e03030;
+    -fx-text-fill: white;
+    -fx-font-size: 22px;
+    -fx-font-weight: bold;
+    -fx-background-radius: 8;
+    -fx-cursor: hand;
+    -fx-padding: 0 40 0 40;
+}
+.donate-button:hover {
+    -fx-background-color: #c02020;
+}
+