From bfd329bdf86316d182698b78fd6a2957b6298da8 Mon Sep 17 00:00:00 2001
From: Millicool <milena.j.schneeberger@gmail.com>
Date: Sun, 14 Dec 2025 14:03:30 +0100
Subject: [PATCH] Add Styling to right card

---
 IT Shiny App.R | 35 ++++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/IT Shiny App.R b/IT Shiny App.R
index 0bfe279..801ef76 100644
--- a/IT Shiny App.R	
+++ b/IT Shiny App.R	
@@ -55,18 +55,47 @@ auswahlmöglichkeiten <- crime_json %>%
 #User interface definitions
 ui <- function() {
   page_fillable(
+    h1("Kriminalstatistik Hamburg",
+       style = "color: #006400;",
+       class = "ms-4 display-4"),# ms-4 sorgt für den Abstand links
     navset_card_tab(
       nav_panel("Karte",
         page_sidebar(
           layout_columns(
             leafletOutput("hhmap"),
             card(
+              div(
+                # h3 oder div dient als Block-Element und richtet seinen Inhalt (das span) rechtsbündig aus
+                style = "text-align: right; width: 100%; ", 
+                
+                # Der Text wird in ein span verpackt und erhält die Border. 
+                # Ein span nimmt nur den Platz ein, den der Inhalt benötigt (inline).
+                tags$span(
+                  "2024", 
+                  style = "
+                    border: 1px solid rgba(40,70,94,0.1);
+                    border-radius: 5px;
+                    padding: 5px 10px 5px 10px;
+                    background-color: #eeeeee;
+                  "
+                  # padding ist der abstand an leerer Fläche in der reihenfolge top right bottom left
+                  # farbe rgba ist die exakte Farbe der Trennlinien und Card-Umrandungen aus der App
+                )
+              ),
+              div(
+                class = "d-flex align-items-end gap-2",
+                h5(strong("Bezirk:"), style = "margin-bottom: 0;"),
               textOutput("txt_map_selection_bezirk"),
+              ),
+              div(
+                class = "d-flex align-items-end gap-2",
+                h5(strong("Stadtteil:"), style = "margin-bottom: 0;"),
               textOutput("txt_map_selection_stadtteil"),
-              "2024",
-              tableOutput("tbl_2024"),
+              ),
+              plotOutput("grph_top3"),
+              #tableOutput("tbl_2024"),
             ),
-            col_widths = c(7, 5),
+            col_widths = c(8, 4),
           ),
           sidebar = sidebar(
             radioButtons(