From 033b2427346175fd19a37ecaa685eaa782bd6f17 Mon Sep 17 00:00:00 2001
From: AdrianBalunan <adrianbalunan63@gmail.com>
Date: Mon, 16 Mar 2026 22:55:37 +0100
Subject: [PATCH] Fix: Donate button works, container was secretly covering it

---
 .../src/main/resources/fxml/charityPage.fxml  | 939 +++++++++---------
 1 file changed, 463 insertions(+), 476 deletions(-)

diff --git a/helpmehelpapplication/src/main/resources/fxml/charityPage.fxml b/helpmehelpapplication/src/main/resources/fxml/charityPage.fxml
index 205c14b..041b51b 100644
--- a/helpmehelpapplication/src/main/resources/fxml/charityPage.fxml
+++ b/helpmehelpapplication/src/main/resources/fxml/charityPage.fxml
@@ -35,497 +35,484 @@
       <RowConstraints maxHeight="180.0" minHeight="180.0" prefHeight="180.0" />
    </rowConstraints>
 
-   <children>
-
-      <!-- NAVBAR -->
-      <GridPane prefHeight="92.0" prefWidth="1200.0" style="-fx-background-color: #5F9895;" GridPane.columnIndex="0" GridPane.rowIndex="0">
-
-         <padding>
-            <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
-         </padding>
-
-         <columnConstraints>
-            <ColumnConstraints percentWidth="8.0" />
-            <ColumnConstraints percentWidth="24.0" />
-            <ColumnConstraints percentWidth="43.0" />
-            <ColumnConstraints percentWidth="25.0" />
-         </columnConstraints>
-
-         <rowConstraints>
-            <RowConstraints prefHeight="72.0" />
-         </rowConstraints>
-
-         <children>
-
-            <!-- -->
-            <Button mnemonicParsing="false" onAction="#switchToFrontPage" prefHeight="0.0" prefWidth="0.0" style="-fx-background-color: #2f8f8b">
-               <graphic>
-                  <ImageView fitHeight="54.0" fitWidth="67.0" pickOnBounds="true" preserveRatio="true">
-                     <image>
-                        <Image url="@../images/Logo.png" />
-                     </image>
-                     <cursor>
-                        <Cursor fx:constant="HAND" />
-                     </cursor>
-                  </ImageView>
-               </graphic>
-            </Button>
-            <!-- -->
-
-            <HBox alignment="CENTER_LEFT" spacing="0.0" GridPane.columnIndex="1" GridPane.rowIndex="0">
-               <children>
-                  <Label text="Help" textFill="WHITE">
+   <!-- NAVBAR -->
+   <GridPane prefHeight="92.0" prefWidth="1200.0" style="-fx-background-color: #5F9895;" GridPane.columnIndex="0" GridPane.rowIndex="0">
+
+      <padding>
+         <Insets bottom="10.0" left="20.0" right="20.0" top="10.0" />
+      </padding>
+
+      <columnConstraints>
+         <ColumnConstraints percentWidth="8.0" />
+         <ColumnConstraints percentWidth="24.0" />
+         <ColumnConstraints percentWidth="43.0" />
+         <ColumnConstraints percentWidth="25.0" />
+      </columnConstraints>
+
+      <rowConstraints>
+         <RowConstraints prefHeight="72.0" />
+      </rowConstraints>
+
+      <children>
+         <Button mnemonicParsing="false" onAction="#switchToFrontPage" prefHeight="0.0" prefWidth="0.0" style="-fx-background-color: #2f8f8b">
+            <graphic>
+               <ImageView fitHeight="54.0" fitWidth="67.0" pickOnBounds="true" preserveRatio="true">
+                  <image>
+                     <Image url="@../images/Logo.png" />
+                  </image>
+                  <cursor>
+                     <Cursor fx:constant="HAND" />
+                  </cursor>
+               </ImageView>
+            </graphic>
+         </Button>
+
+         <HBox alignment="CENTER_LEFT" spacing="0.0" GridPane.columnIndex="1" GridPane.rowIndex="0">
+            <children>
+               <Label text="Help" textFill="WHITE">
+                  <font>
+                     <Font name="System Bold" size="28.0" />
+                  </font>
+               </Label>
+
+               <Label text="Me" textFill="#C8E6C9">
+                  <font>
+                     <Font name="System Bold" size="28.0" />
+                  </font>
+               </Label>
+
+               <Label text="Help" textFill="WHITE">
+                  <font>
+                     <Font name="System Bold" size="28.0" />
+                  </font>
+               </Label>
+            </children>
+         </HBox>
+
+         <HBox alignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="0">
+            <children>
+               <TextField maxWidth="430.0" prefHeight="48.0" prefWidth="430.0" promptText="Search" style="-fx-background-radius: 24; -fx-border-radius: 24; -fx-font-size: 16px; -fx-padding: 0 0 0 16;" />
+            </children>
+         </HBox>
+
+         <HBox alignment="CENTER_RIGHT" GridPane.columnIndex="3" GridPane.rowIndex="0">
+            <children>
+               <Button prefHeight="48.0" prefWidth="180.0" style="-fx-background-color: #4453D9; -fx-background-radius: 24; -fx-text-fill: white; -fx-font-size: 16px; -fx-font-weight: bold;" text="Login">
+                  <cursor>
+                     <Cursor fx:constant="HAND" />
+                  </cursor>
+               </Button>
+            </children>
+         </HBox>
+
+      </children>
+   </GridPane>
+   <ScrollPane GridPane.rowIndex="1">
+      <content>
+      
+         <!-- MAIN CONTENT -->
+         <GridPane prefHeight="917.0" prefWidth="1245.0" style="-fx-background-color: #F5F5F5;">
+      
+            <columnConstraints>
+               <ColumnConstraints percentWidth="25.0" />
+               <ColumnConstraints percentWidth="75.0" />
+            </columnConstraints>
+      
+            <rowConstraints>
+               <RowConstraints vgrow="ALWAYS" />
+            </rowConstraints>
+      
+            <!-- LEFT SIDE -->
+            <GridPane prefHeight="791.0" prefWidth="0.0" style="-fx-background-color: #F5F5F5;" GridPane.rowIndex="0">
+      
+               <columnConstraints>
+                  <ColumnConstraints />
+               </columnConstraints>
+               <rowConstraints>
+                  <RowConstraints />
+                  <RowConstraints />
+                  <RowConstraints />
+               </rowConstraints>
+      
+               <!-- TOP LEFT INFO -->
+               <GridPane vgap="14.0" GridPane.columnIndex="0" GridPane.rowIndex="0">
+      
+                  <rowConstraints>
+                     <RowConstraints percentHeight="45.0" />
+                     <RowConstraints percentHeight="25.0" />
+                     <RowConstraints percentHeight="30.0" />
+                  </rowConstraints>
+      
+                  <columnConstraints>
+                     <ColumnConstraints />
+                  </columnConstraints>
+      
+                  <Label fx:id="CharityName" prefHeight="90.0" prefWidth="456.0" style="-fx-text-fill:#2D3C8F;" text="[Charity Name]" textAlignment="CENTER" GridPane.rowIndex="0">
                      <font>
-                        <Font name="System Bold" size="28.0" />
+                        <Font name="System Bold" size="50.0" />
                      </font>
+                     <padding>
+                        <Insets left="10.0" />
+                     </padding>
                   </Label>
-
-                  <Label text="Me" textFill="#C8E6C9">
+      
+                  <Label style="-fx-background-color:#C8E6C0; -fx-background-radius:18; -fx-text-fill:#4E7C3F; -fx-padding:8 16 8 16;" text="✓ Verified" GridPane.rowIndex="1">
                      <font>
-                        <Font name="System Bold" size="28.0" />
+                        <Font name="System Bold" size="15.0" />
                      </font>
                   </Label>
-
-                  <Label text="Help" textFill="WHITE">
+      
+                  <StackPane prefHeight="67.0" prefWidth="489.0" translateX="-30" GridPane.rowIndex="2">
+      
+                     <Rectangle arcHeight="30.0" arcWidth="30.0" fill="#F5F5F5" height="60.0" stroke="#4F4F4F" strokeType="INSIDE" width="220.0" />
+      
+      
+                     <Label text="[Category]">
+                        <font>
+                           <Font name="System Bold" size="18.0" />
+                        </font>
+                     </Label>
+                  </StackPane>
+                  <padding>
+                     <Insets left="10.0" />
+                  </padding>
+      
+               </GridPane>
+               <VBox alignment="CENTER" prefHeight="509.0" prefWidth="425.0" spacing="15.0" GridPane.rowIndex="1">
+      
+                  <Hyperlink text="Homepage">
                      <font>
-                        <Font name="System Bold" size="28.0" />
+                        <Font name="System Bold" size="20.0" />
                      </font>
-                  </Label>
-               </children>
-            </HBox>
-
-            <HBox alignment="CENTER" GridPane.columnIndex="2" GridPane.rowIndex="0">
-               <children>
-                  <TextField maxWidth="430.0" prefHeight="48.0" prefWidth="430.0" promptText="Search" style="-fx-background-radius: 24; -fx-border-radius: 24; -fx-font-size: 16px; -fx-padding: 0 0 0 16;" />
-               </children>
-            </HBox>
-
-            <HBox alignment="CENTER_RIGHT" GridPane.columnIndex="3" GridPane.rowIndex="0">
-               <children>
-                  <Button prefHeight="48.0" prefWidth="180.0" style="-fx-background-color: #4453D9; -fx-background-radius: 24; -fx-text-fill: white; -fx-font-size: 16px; -fx-font-weight: bold;" text="Login">
-                     <cursor>
-                        <Cursor fx:constant="HAND" />
-                     </cursor>
-                  </Button>
-               </children>
-            </HBox>
-
-         </children>
-      </GridPane>
-      <ScrollPane GridPane.rowIndex="1">
-         <content>
-      
-            <!-- MAIN CONTENT -->
-            <GridPane prefHeight="628.0" prefWidth="1200.0" style="-fx-background-color: #F5F5F5;">
-      
-               <padding>
-                  <Insets bottom="25.0" left="30.0" right="30.0" top="25.0" />
-               </padding>
-      
-               <columnConstraints>
-                  <ColumnConstraints percentWidth="25.0" />
-                  <ColumnConstraints percentWidth="75.0" />
-               </columnConstraints>
+                  </Hyperlink>
       
-               <rowConstraints>
-                  <RowConstraints vgrow="ALWAYS" />
-               </rowConstraints>
+                  <Hyperlink text="Socials">
+                     <font>
+                        <Font name="System Bold" size="20.0" />
+                     </font>
+                  </Hyperlink>
       
-               <children>
-      
-                  <!-- LEFT SIDE -->
-                  <GridPane prefWidth="300.0" style="-fx-background-color: #F5F5F5;" translateX="80" translateY="150" GridPane.columnIndex="0" GridPane.rowIndex="0">
-      
-                     <children>
-                        <VBox alignment="TOP_CENTER" spacing="15.0">
-                           <padding>
-                              <Insets top="160.0" />
-                           </padding>
-      
-                           <children>
-                              <Hyperlink text="Homepage">
-                                 <font>
-                                    <Font name="System Bold" size="20.0" />
-                                 </font>
-                              </Hyperlink>
-      
-                              <Hyperlink text="Socials">
-                                 <font>
-                                    <Font name="System Bold" size="20.0" />
-                                 </font>
-                              </Hyperlink>
-      
-                              <Hyperlink text="Verification Report">
-                                 <font>
-                                    <Font name="System Bold" size="20.0" />
-                                 </font>
-                              </Hyperlink>
-      
-                              <VBox spacing="22.0">
-                                 <padding>
-                                    <Insets top="55.0" />
-                                 </padding>
-      
-                                 <children>
-                                    <Button prefHeight="55.0" prefWidth="190.0" style="-fx-background-color:#4453D9; -fx-background-radius:30; -fx-text-fill:white;" text="Favorite">
-                                       <font>
-                                          <Font name="System Bold" size="16.0" />
-                                       </font>
-                                    </Button>
-      
-                                    <Button onAction="#switchToDonationPage" prefHeight="55.0" prefWidth="190.0" style="-fx-background-color:#4E7C3F; -fx-background-radius:30; -fx-text-fill:white;" text="Donate">
-                                       <font>
-                                          <Font name="System Bold" size="16.0" />
-                                       </font>
-                                    </Button>
-                                 </children>
-                              </VBox>
-                           </children>
-                        </VBox>
-                     </children>
-                     <columnConstraints>
-                        <ColumnConstraints />
-                     </columnConstraints>
-                     <rowConstraints>
-                        <RowConstraints />
-                     </rowConstraints>
-                  </GridPane>
-      
-                  <!-- RIGHT SIDE -->
-                  <GridPane hgap="20.0" prefWidth="900.0" style="-fx-background-color: #F5F5F5;" vgap="18.0" GridPane.columnIndex="1" GridPane.rowIndex="0">
-      
-                     <columnConstraints>
-                        <ColumnConstraints percentWidth="55.0" />
-                        <ColumnConstraints percentWidth="45.0" />
-                     </columnConstraints>
-      
-                     <rowConstraints>
-                        <RowConstraints percentHeight="24.0" />
-                        <RowConstraints percentHeight="46.0" />
-                        <RowConstraints percentHeight="30.0" />
-                     </rowConstraints>
-      
-                     <children>
-      
-                        <!-- TOP LEFT INFO -->
-                        <GridPane vgap="14.0" GridPane.columnIndex="0" GridPane.rowIndex="0">
-      
-                           <rowConstraints>
-                              <RowConstraints percentHeight="45.0" />
-                              <RowConstraints percentHeight="25.0" />
-                              <RowConstraints percentHeight="30.0" />
-                           </rowConstraints>
-      
-                           <children>
-      
-                              <Label fx:id="CharityName" style="-fx-text-fill:#2D3C8F;" text="[Charity Name]" translateX="-280" GridPane.rowIndex="0">
-                                 <font>
-                                    <Font name="System Bold" size="62.0" />
-                                 </font>
-                              </Label>
-      
-                              <Label style="-fx-background-color:#C8E6C0; -fx-background-radius:18; -fx-text-fill:#4E7C3F; -fx-padding:8 16 8 16;" text="✓ Verified" translateX="-280" GridPane.rowIndex="1">
-                                 <font>
-                                    <Font name="System Bold" size="15.0" />
-                                 </font>
-                              </Label>
-      
-                              <StackPane prefHeight="80.0" prefWidth="220.0" translateX="-30" GridPane.rowIndex="2">
-      
-                                 <children>
-                                    <Rectangle arcHeight="30.0" arcWidth="30.0" fill="#F5F5F5" height="60.0" stroke="#4F4F4F" strokeType="INSIDE" width="220.0" />
-      
-      
-                                    <Label text="[Category]">
-                                       <font>
-                                          <Font name="System Bold" size="18.0" />
-                                       </font>
-                                    </Label>
-                                 </children>
-                              </StackPane>
-      
-                           </children>
-                           <columnConstraints>
-                              <ColumnConstraints />
-                           </columnConstraints>
-                        </GridPane>
-      
-                        <!-- TOP RIGHT IMAGE -->
-                        <StackPane prefHeight="210.0" prefWidth="420.0" style="-fx-background-color:#F5F5F5;" translateX="-70" GridPane.columnIndex="1" GridPane.rowIndex="0">
-      
-                           <children>
-                              <Rectangle arcHeight="25.0" arcWidth="25.0" fill="#F5F5F5" height="210.0" stroke="#8B8B8B" strokeType="INSIDE" width="420.0" />
-                              <ImageView fitHeight="150.0" fitWidth="220.0" pickOnBounds="true" preserveRatio="true">
-                                 <image>
-                                    <Image url="@../images/leggTilBilde.jpg" />
-                                 </image>
-                              </ImageView>
-                           </children>
-                        </StackPane>
-      
-      
-                        <!-- SUMMARY -->
-                        <StackPane alignment="CENTER" translateX="-20" translateY="60" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="1">
-      
-                           <children>
-      
-                              <!-- Kort-bakgrunn -->
-                              <Rectangle arcHeight="30.0" arcWidth="30.0" fill="#F5F5F5" height="300.0" stroke="#8B8B8B" strokeType="INSIDE" width="700.0">
-                                 <effect>
-                                    <DropShadow offsetY="3.0" radius="8.0">
-                                       <color>
-                                          <Color red="0.0" green="0.0" blue="0.0" opacity="0.2" />
-                                       </color>
-                                    </DropShadow>
-                                 </effect>
-                              </Rectangle>
-      
-                              <!-- Ekte scrollbart innhold -->
-                              <ScrollPane fitToWidth="true" hbarPolicy="NEVER" maxHeight="260.0" maxWidth="650.0" minHeight="260.0" minWidth="650.0" pannable="true" prefHeight="260.0" prefWidth="650.0" style="-fx-background-color: transparent; -fx-background: transparent;" vbarPolicy="ALWAYS">
-      
-                                 <content>
-                                    <VBox fillWidth="true" prefWidth="620.0" style="-fx-padding: 10;">
-                                       <children>
-      
-                                          <Label fx:id="CharityDescription" maxWidth="600.0" prefWidth="600.0" style="-fx-text-fill: black;" text="Summary about the charity.  Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen." wrapText="true">
-                                             <font>
-                                                <Font size="16.0" />
-                                             </font>
-                                          </Label>
-      
-                                       </children>
-                                    </VBox>
-                                 </content>
-                              </ScrollPane>
-      
-                           </children>
-                        </StackPane>
-                        <!-- STATS -->
-                        <GridPane hgap="30.0" style="-fx-padding: 80 0 0 0;" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="2">
-      
-                           <columnConstraints>
-                              <ColumnConstraints percentWidth="33.33" />
-                              <ColumnConstraints percentWidth="33.33" />
-                              <ColumnConstraints percentWidth="33.33" />
-                           </columnConstraints>
-      
-                           <children>
-      
-                              <!-- 97,4 % -->
-                              <VBox alignment="CENTER" spacing="12.0" GridPane.columnIndex="0">
-                                 <children>
-                                    <Label text="Innsamlingsprosent">
-                                       <font>
-                                          <Font name="System Bold" size="16.0" />
-                                       </font>
-                                    </Label>
-      
-                                    <StackPane alignment="CENTER" maxHeight="100.0" maxWidth="100.0" minHeight="100.0" minWidth="100.0" prefHeight="100.0" prefWidth="100.0">
-                                       <children>
-      
-                                          <Pane maxHeight="100.0" maxWidth="100.0" minHeight="100.0" minWidth="100.0" prefHeight="100.0" prefWidth="100.0">
-                                             <children>
-                                                <Circle centerX="50.0" centerY="50.0" fill="TRANSPARENT" radius="38.0" stroke="#F1DADA" strokeWidth="8.0" />
-      
-                                                <Arc centerX="50.0" centerY="50.0" fill="TRANSPARENT" length="-350.64" radiusX="38.0" radiusY="38.0" startAngle="90.0" stroke="#D83A32" strokeLineCap="BUTT" strokeWidth="8.0" type="OPEN" />
-                                             </children>
-                                          </Pane>
-      
-                                          <Label text="97,4%" StackPane.alignment="CENTER">
-                                             <font>
-                                                <Font name="System Bold" size="16.0" />
-                                             </font>
-                                          </Label>
-      
-                                       </children>
-                                    </StackPane>
-                                 </children>
-                              </VBox>
-      
-                              <!-- 3,2 % -->
-                              <VBox alignment="CENTER" spacing="12.0" GridPane.columnIndex="1">
-                                 <children>
-                                    <Label text="Administrasjonsprosent">
-                                       <font>
-                                          <Font name="System Bold" size="16.0" />
-                                       </font>
-                                    </Label>
-      
-                                    <StackPane alignment="CENTER" maxHeight="100.0" maxWidth="100.0" minHeight="100.0" minWidth="100.0" prefHeight="100.0" prefWidth="100.0">
-                                       <children>
-      
-                                          <Pane maxHeight="100.0" maxWidth="100.0" minHeight="100.0" minWidth="100.0" prefHeight="100.0" prefWidth="100.0">
-                                             <children>
-                                                <Circle centerX="50.0" centerY="50.0" fill="TRANSPARENT" radius="38.0" stroke="#F1DADA" strokeWidth="8.0" />
-      
-                                                <Arc centerX="50.0" centerY="50.0" fill="TRANSPARENT" length="-11.52" radiusX="38.0" radiusY="38.0" startAngle="90.0" stroke="#D83A32" strokeLineCap="BUTT" strokeWidth="8.0" type="OPEN" />
-                                             </children>
-                                          </Pane>
-      
-                                          <Label text="3,2%" StackPane.alignment="CENTER">
-                                             <font>
-                                                <Font name="System Bold" size="16.0" />
-                                             </font>
-                                          </Label>
-      
-                                       </children>
-                                    </StackPane>
-                                 </children>
-                              </VBox>
-      
-                              <!-- 93,3 % -->
-                              <VBox alignment="CENTER" spacing="12.0" GridPane.columnIndex="2">
-                                 <children>
-                                    <Label text="Formålsprosent">
-                                       <font>
-                                          <Font name="System Bold" size="16.0" />
-                                       </font>
-                                    </Label>
-      
-                                    <StackPane alignment="CENTER" maxHeight="100.0" maxWidth="100.0" minHeight="100.0" minWidth="100.0" prefHeight="100.0" prefWidth="100.0">
-                                       <children>
-      
-                                          <Pane maxHeight="100.0" maxWidth="100.0" minHeight="100.0" minWidth="100.0" prefHeight="100.0" prefWidth="100.0">
-                                             <children>
-                                                <Circle centerX="50.0" centerY="50.0" fill="TRANSPARENT" radius="38.0" stroke="#F1DADA" strokeWidth="8.0" />
-      
-                                                <Arc centerX="50.0" centerY="50.0" fill="TRANSPARENT" length="-335.88" radiusX="38.0" radiusY="38.0" startAngle="90.0" stroke="#D83A32" strokeLineCap="BUTT" strokeWidth="8.0" type="OPEN" />
-                                             </children>
-                                          </Pane>
-      
-                                          <Label text="93,3%" StackPane.alignment="CENTER">
-                                             <font>
-                                                <Font name="System Bold" size="16.0" />
-                                             </font>
-                                          </Label>
-      
-                                       </children>
-                                    </StackPane>
-                                 </children>
-                              </VBox>
-      
-                           </children>
-                           <rowConstraints>
-                              <RowConstraints />
-                           </rowConstraints>
-                        </GridPane>
-      
-                     </children>
-                  </GridPane>
-      
-               </children>
+                  <Hyperlink text="Verification Report">
+                     <font>
+                        <Font name="System Bold" size="20.0" />
+                     </font>
+                  </Hyperlink>
+      
+                  <VBox alignment="CENTER" prefHeight="89.0" prefWidth="191.0" spacing="22.0">
+                     <Button prefHeight="55.0" prefWidth="190.0" style="-fx-background-color:#4453D9; -fx-background-radius:30; -fx-text-fill:white;" text="Favorite">
+                        <font>
+                           <Font name="System Bold" size="16.0" />
+                        </font>
+                     </Button>
+      
+                     <Button onAction="#switchToDonationPage" prefHeight="55.0" prefWidth="190.0" style="-fx-background-color:#4E7C3F; -fx-background-radius:30; -fx-text-fill:white;" text="Donate">
+                        <font>
+                           <Font name="System Bold" size="16.0" />
+                        </font>
+                     </Button>
+                  </VBox>
+               </VBox>
             </GridPane>
-         </content>
-      </ScrollPane>
-
-      <!-- FOOTER -->
-      <HBox alignment="BOTTOM_CENTER" prefHeight="180.0" prefWidth="1200.0" style="-fx-background-color: #5F9895;" GridPane.columnIndex="0" GridPane.rowIndex="2">
-
-         <children>
-            <GridPane prefHeight="180.0" prefWidth="1200.0" HBox.hgrow="ALWAYS">
-
+      
+            <!-- RIGHT SIDE -->
+            <GridPane hgap="20.0" prefWidth="900.0" style="-fx-background-color: #F5F5F5;" vgap="18.0" GridPane.columnIndex="1" GridPane.rowIndex="0">
+      
                <columnConstraints>
-                  <ColumnConstraints percentWidth="60.0" />
-                  <ColumnConstraints percentWidth="40.0" />
+                  <ColumnConstraints percentWidth="55.0" />
                </columnConstraints>
-
+      
                <rowConstraints>
-                  <RowConstraints prefHeight="180.0" />
+                  <RowConstraints percentHeight="24.0" />
+                  <RowConstraints percentHeight="46.0" />
+                  <RowConstraints percentHeight="30.0" />
                </rowConstraints>
-
-               <children>
-
-                  <!-- LEFT FOOTER SIDE -->
-                  <StackPane prefHeight="180.0" prefWidth="720.0" GridPane.columnIndex="0" GridPane.rowIndex="0">
-
-                     <children>
-
-                        <HBox alignment="CENTER_LEFT" spacing="0.0" translateX="60.0">
-                           <children>
-                              <Label text="Help" textFill="WHITE">
-                                 <font>
-                                    <Font name="System Bold" size="36.0" />
-                                 </font>
-                              </Label>
-
-                              <Label text="Me" textFill="#C8E6C9">
-                                 <font>
-                                    <Font name="System Bold" size="36.0" />
-                                 </font>
-                              </Label>
-
-                              <Label text="Help" textFill="WHITE">
-                                 <font>
-                                    <Font name="System Bold" size="36.0" />
-                                 </font>
-                              </Label>
-                           </children>
-                        </HBox>
-
-                        <Rectangle fill="WHITE" height="90.0" translateX="-20.0" width="2.0" />
-
-                        <VBox alignment="CENTER" spacing="5.0" translateX="120.0">
-                           <children>
-                              <Label text="About us" textFill="WHITE">
-                                 <font>
-                                    <Font name="System Bold" size="18.0" />
-                                 </font>
-                                 <cursor>
-                                    <Cursor fx:constant="HAND" />
-                                 </cursor>
-                              </Label>
-
-                              <Label text="Something else" textFill="WHITE">
-                                 <font>
-                                    <Font name="System Bold" size="18.0" />
-                                 </font>
-                                 <cursor>
-                                    <Cursor fx:constant="HAND" />
-                                 </cursor>
-                              </Label>
-
-                              <Label text="Third Link" textFill="WHITE">
-                                 <font>
-                                    <Font name="System Bold" size="18.0" />
-                                 </font>
-                                 <cursor>
-                                    <Cursor fx:constant="HAND" />
-                                 </cursor>
-                              </Label>
-                           </children>
-                        </VBox>
-
-                     </children>
-                  </StackPane>
-
-                  <!-- RIGHT FOOTER SIDE -->
-                  <StackPane alignment="CENTER" prefHeight="180.0" prefWidth="480.0" GridPane.columnIndex="1" GridPane.rowIndex="0">
-
-                     <children>
-
-                        <VBox alignment="CENTER" spacing="10.0">
-                           <children>
-                              <ImageView fitHeight="80.0" fitWidth="150.0" pickOnBounds="true" preserveRatio="true">
-                                 <image>
-                                    <Image url="@../images/img.png" />
-                                 </image>
-                              </ImageView>
-
-                              <Label maxWidth="250.0" text="All data is consistently updated and reverified" textAlignment="CENTER" textFill="WHITE" wrapText="true">
-                                 <font>
-                                    <Font name="System Bold" size="17.0" />
-                                 </font>
-                              </Label>
-                           </children>
-                        </VBox>
-
-                     </children>
-                  </StackPane>
-
-               </children>
+      
+               <!-- TOP RIGHT IMAGE -->
+               <StackPane prefHeight="210.0" prefWidth="420.0" style="-fx-background-color:#F5F5F5;" translateX="-70" GridPane.rowIndex="0">
+      
+                  <Rectangle arcHeight="25.0" arcWidth="25.0" fill="#F5F5F5" height="210.0" stroke="#8B8B8B" strokeType="INSIDE" width="420.0" />
+                  <ImageView fitHeight="150.0" fitWidth="220.0" pickOnBounds="true" preserveRatio="true">
+                     <image>
+                        <Image url="@../images/leggTilBilde.jpg" />
+                     </image>
+                  </ImageView>
+                  <GridPane.margin>
+                     <Insets top="20.0" />
+                  </GridPane.margin>
+               </StackPane>
+      
+      
+               <!-- SUMMARY -->
+               <StackPane alignment="CENTER" translateX="-20" translateY="60" GridPane.columnIndex="0" GridPane.columnSpan="1" GridPane.rowIndex="1">
+      
+                  <children>
+      
+                     <!-- Kort-bakgrunn -->
+                     <Rectangle arcHeight="30.0" arcWidth="30.0" fill="#F5F5F5" height="300.0" stroke="#8B8B8B" strokeType="INSIDE" width="700.0">
+                        <effect>
+                           <DropShadow offsetY="3.0" radius="8.0">
+                              <color>
+                                 <Color red="0.0" green="0.0" blue="0.0" opacity="0.2" />
+                              </color>
+                           </DropShadow>
+                        </effect>
+                     </Rectangle>
+      
+                     <!-- Ekte scrollbart innhold -->
+                     <ScrollPane fitToWidth="true" hbarPolicy="NEVER" maxHeight="260.0" maxWidth="650.0" minHeight="260.0" minWidth="650.0" pannable="true" prefHeight="260.0" prefWidth="650.0" style="-fx-background-color: transparent; -fx-background: transparent;" vbarPolicy="ALWAYS">
+      
+                        <content>
+                           <VBox fillWidth="true" prefWidth="620.0" style="-fx-padding: 10;">
+                              <children>
+      
+                                 <Label fx:id="CharityDescription" maxWidth="600.0" prefWidth="600.0" style="-fx-text-fill: black;" text="Summary about the charity.  Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen. Dette er en lengre testtekst for å sjekke at summary-feltet faktisk kan scrolle. Poenget er at teksten må bli høyere enn selve boksen." wrapText="true">
+                                    <font>
+                                       <Font size="16.0" />
+                                    </font>
+                                 </Label>
+      
+                              </children>
+                           </VBox>
+                        </content>
+                     </ScrollPane>
+      
+                  </children>
+               </StackPane>
+               <!-- STATS -->
+               <GridPane hgap="30.0" style="-fx-padding: 80 0 0 0;" GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="2">
+      
+                  <columnConstraints>
+                     <ColumnConstraints percentWidth="33.33" />
+                     <ColumnConstraints percentWidth="33.33" />
+                     <ColumnConstraints percentWidth="33.33" />
+                  </columnConstraints>
+      
+                  <children>
+                     <GridPane hgap="10.0">
+                        <columnConstraints>
+                           <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
+                           <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                           <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
+                        </columnConstraints>
+                        <rowConstraints>
+                           <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
+                        </rowConstraints>
+                        <children>
+            
+                                 <!-- 97,4 % -->
+                           <VBox alignment="CENTER_LEFT" spacing="12.0">
+                              <children>
+                                 <Label text="Innsamlingsprosent">
+                                    <font>
+                                       <Font name="System Bold" size="16.0" />
+                                    </font>
+                                 </Label>
+            
+                                       <StackPane alignment="CENTER" maxHeight="100.0" maxWidth="100.0" minHeight="100.0" minWidth="100.0" prefHeight="100.0" prefWidth="100.0">
+                                    <children>
+            
+                                             <Pane maxHeight="100.0" maxWidth="100.0" minHeight="100.0" minWidth="100.0" prefHeight="100.0" prefWidth="100.0">
+                                          <children>
+                                             <Circle centerX="50.0" centerY="50.0" fill="TRANSPARENT" radius="38.0" stroke="#F1DADA" strokeWidth="8.0" />
+            
+                                                   <Arc centerX="50.0" centerY="50.0" fill="TRANSPARENT" length="-350.64" radiusX="38.0" radiusY="38.0" startAngle="90.0" stroke="#D83A32" strokeLineCap="BUTT" strokeWidth="8.0" type="OPEN" />
+                                          </children>
+                                       </Pane>
+            
+                                             <Label text="97,4%" StackPane.alignment="CENTER">
+                                          <font>
+                                             <Font name="System Bold" size="16.0" />
+                                          </font>
+                                       </Label>
+            
+                                          </children>
+                                 </StackPane>
+                              </children>
+                           </VBox>
+            
+                                 <!-- 3,2 % -->
+                           <VBox alignment="CENTER" prefWidth="144.0" spacing="12.0" GridPane.columnIndex="1">
+                              <children>
+                                 <Label text="Administrasjonsprosent">
+                                    <font>
+                                       <Font name="System Bold" size="16.0" />
+                                    </font>
+                                 </Label>
+            
+                                       <StackPane alignment="CENTER" maxHeight="100.0" maxWidth="100.0" minHeight="100.0" minWidth="100.0" prefHeight="100.0" prefWidth="100.0">
+                                    <children>
+            
+                                             <Pane maxHeight="100.0" maxWidth="100.0" minHeight="100.0" minWidth="100.0" prefHeight="100.0" prefWidth="100.0">
+                                          <children>
+                                             <Circle centerX="50.0" centerY="50.0" fill="TRANSPARENT" radius="38.0" stroke="#F1DADA" strokeWidth="8.0" />
+            
+                                                   <Arc centerX="50.0" centerY="50.0" fill="TRANSPARENT" length="-11.52" radiusX="38.0" radiusY="38.0" startAngle="90.0" stroke="#D83A32" strokeLineCap="BUTT" strokeWidth="8.0" type="OPEN" />
+                                          </children>
+                                       </Pane>
+            
+                                             <Label text="3,2%" StackPane.alignment="CENTER">
+                                          <font>
+                                             <Font name="System Bold" size="16.0" />
+                                          </font>
+                                       </Label>
+            
+                                          </children>
+                                 </StackPane>
+                              </children>
+                           </VBox>
+            
+                                 <!-- 93,3 % -->
+                           <VBox alignment="CENTER_RIGHT" spacing="12.0" GridPane.columnIndex="2">
+                              <children>
+                                 <Label text="Formålsprosent">
+                                    <font>
+                                       <Font name="System Bold" size="16.0" />
+                                    </font>
+                                 </Label>
+            
+                                       <StackPane alignment="CENTER" maxHeight="100.0" maxWidth="100.0" minHeight="100.0" minWidth="100.0" prefHeight="100.0" prefWidth="100.0">
+                                    <children>
+            
+                                             <Pane maxHeight="100.0" maxWidth="100.0" minHeight="100.0" minWidth="100.0" prefHeight="100.0" prefWidth="100.0">
+                                          <children>
+                                             <Circle centerX="50.0" centerY="50.0" fill="TRANSPARENT" radius="38.0" stroke="#F1DADA" strokeWidth="8.0" />
+            
+                                                   <Arc centerX="50.0" centerY="50.0" fill="TRANSPARENT" length="-335.88" radiusX="38.0" radiusY="38.0" startAngle="90.0" stroke="#D83A32" strokeLineCap="BUTT" strokeWidth="8.0" type="OPEN" />
+                                          </children>
+                                       </Pane>
+            
+                                             <Label text="93,3%" StackPane.alignment="CENTER">
+                                          <font>
+                                             <Font name="System Bold" size="16.0" />
+                                          </font>
+                                       </Label>
+            
+                                          </children>
+                                 </StackPane>
+                              </children>
+                           </VBox>
+                        </children>
+                     </GridPane>
+      
+                  </children>
+                  <rowConstraints>
+                     <RowConstraints />
+                  </rowConstraints>
+               </GridPane>
+      
             </GridPane>
-         </children>
-      </HBox>
+      
+         </GridPane>
+      </content>
+   </ScrollPane>
+
+   <!-- FOOTER -->
+   <HBox alignment="BOTTOM_CENTER" prefHeight="180.0" prefWidth="1200.0" style="-fx-background-color: #5F9895;" GridPane.columnIndex="0" GridPane.rowIndex="2">
+
+      <children>
+         <GridPane prefHeight="180.0" prefWidth="1200.0" HBox.hgrow="ALWAYS">
+
+            <columnConstraints>
+               <ColumnConstraints percentWidth="60.0" />
+               <ColumnConstraints percentWidth="40.0" />
+            </columnConstraints>
+
+            <rowConstraints>
+               <RowConstraints prefHeight="180.0" />
+            </rowConstraints>
+
+            <children>
+
+               <!-- LEFT FOOTER SIDE -->
+               <StackPane prefHeight="180.0" prefWidth="720.0" GridPane.columnIndex="0" GridPane.rowIndex="0">
+
+                  <children>
+
+                     <HBox alignment="CENTER_LEFT" spacing="0.0" translateX="60.0">
+                        <children>
+                           <Label text="Help" textFill="WHITE">
+                              <font>
+                                 <Font name="System Bold" size="36.0" />
+                              </font>
+                           </Label>
+
+                           <Label text="Me" textFill="#C8E6C9">
+                              <font>
+                                 <Font name="System Bold" size="36.0" />
+                              </font>
+                           </Label>
+
+                           <Label text="Help" textFill="WHITE">
+                              <font>
+                                 <Font name="System Bold" size="36.0" />
+                              </font>
+                           </Label>
+                        </children>
+                     </HBox>
+
+                     <Rectangle fill="WHITE" height="90.0" translateX="-20.0" width="2.0" />
+
+                     <VBox alignment="CENTER" spacing="5.0" translateX="120.0">
+                        <children>
+                           <Label text="About us" textFill="WHITE">
+                              <font>
+                                 <Font name="System Bold" size="18.0" />
+                              </font>
+                              <cursor>
+                                 <Cursor fx:constant="HAND" />
+                              </cursor>
+                           </Label>
+
+                           <Label text="Something else" textFill="WHITE">
+                              <font>
+                                 <Font name="System Bold" size="18.0" />
+                              </font>
+                              <cursor>
+                                 <Cursor fx:constant="HAND" />
+                              </cursor>
+                           </Label>
+
+                           <Label text="Third Link" textFill="WHITE">
+                              <font>
+                                 <Font name="System Bold" size="18.0" />
+                              </font>
+                              <cursor>
+                                 <Cursor fx:constant="HAND" />
+                              </cursor>
+                           </Label>
+                        </children>
+                     </VBox>
+
+                  </children>
+               </StackPane>
+
+               <!-- RIGHT FOOTER SIDE -->
+               <StackPane alignment="CENTER" prefHeight="180.0" prefWidth="480.0" GridPane.columnIndex="1" GridPane.rowIndex="0">
+
+                  <children>
+
+                     <VBox alignment="CENTER" spacing="10.0">
+                        <children>
+                           <ImageView fitHeight="80.0" fitWidth="150.0" pickOnBounds="true" preserveRatio="true">
+                              <image>
+                                 <Image url="@../images/img.png" />
+                              </image>
+                           </ImageView>
+
+                           <Label maxWidth="250.0" text="All data is consistently updated and reverified" textAlignment="CENTER" textFill="WHITE" wrapText="true">
+                              <font>
+                                 <Font name="System Bold" size="17.0" />
+                              </font>
+                           </Label>
+                        </children>
+                     </VBox>
+
+                  </children>
+               </StackPane>
+
+            </children>
+         </GridPane>
+      </children>
+   </HBox>
 
-   </children>
 </GridPane>