311 lines
12 KiB
R
311 lines
12 KiB
R
library(bsicons)
|
|
source("global.R")
|
|
ui <- function() {
|
|
page_fillable(
|
|
h1("Polizeiliche Kriminalstatistik Hamburg",
|
|
style = "color: #003064; background: #dae5ed; padding: 20px 0px 20px 20px; background-clip: padding-box; font-family: Lato,Arial,Helvetica,sans-serif;font-weight: 400", #text-align: center
|
|
class = "display-4"
|
|
),
|
|
tags$head(
|
|
tags$style(
|
|
HTML("
|
|
.selectize-dropdown-content .option {
|
|
border-bottom: 1px solid #dee2e6; /* Die Trennlinie */
|
|
padding: 8px 10px; /* Abstand zwischen Text und Linie */
|
|
}
|
|
.legend {
|
|
background: white !important; /* Der Hintergrund der Legenden-Box */
|
|
opacity: 1 !important; /* Die Box selbst ist nicht transparent */
|
|
}
|
|
/* Erzwingt den Dropdown-Pfeil auch bei Multiple Inputs */
|
|
.selectize-control.multi .selectize-input:after {
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 15px;
|
|
margin-top: -3px;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 5px 5px 0 5px;
|
|
border-color: #333 transparent transparent transparent;
|
|
}
|
|
/* Platz für den Pfeil lassen, damit Text nicht darunter rutscht */
|
|
.selectize-control.multi .selectize-input {
|
|
padding-right: 35px !important;
|
|
}
|
|
/* 1. GRUND-LAYOUT */
|
|
body {
|
|
background-color: #f4f7f9 !important; /* Ganz leichtes Blaugrau für Tiefe */
|
|
}
|
|
/* 2. DIE KARTE (HHMAP) */
|
|
#hhmap {
|
|
border-radius: 20px !important;
|
|
box-shadow: 0 12px 35px rgba(0,0,0,0.1) !important;
|
|
border: 5px solid white !important;
|
|
overflow: hidden !important;
|
|
}
|
|
/* 3. ALLE CARDS (Diagramme & Container) */
|
|
.card {
|
|
border-radius: 20px !important;
|
|
border: none !important;
|
|
box-shadow: 0 10px 30px rgba(149, 157, 165, 0.15) !important;
|
|
background-color: #ffffff !important;
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
.card:hover {
|
|
transform: none !important; /* Sanfter Schwebeprozess beim Hovern */
|
|
}
|
|
/* 4. SIDEBAR & INPUTS */
|
|
.sidebar {
|
|
background-color: #ffffff !important;
|
|
border-right: none !important;
|
|
box-shadow: 5px 0 25px rgba(0,0,0,0.03) !important;
|
|
border-radius: 0 25px 25px 0 !important;
|
|
}
|
|
.selectize-input {
|
|
border-radius: 12px !important;
|
|
border: 1px solid #e2e8f0 !important;
|
|
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.02) !important;
|
|
padding: 10px 15px !important;
|
|
}
|
|
.selectize-input.focus {
|
|
border-color: #3182bd !important;
|
|
box-shadow: 0 0 0 3px rgba(49, 130, 189, 0.1) !important;
|
|
}
|
|
/* 5. BUTTONS (Falls du welche hast) */
|
|
.btn {
|
|
border-radius: 12px !important;
|
|
font-weight: 600 !important;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
|
|
transition: background-color 0.2s, box-shadow 0.2s !important;
|
|
}
|
|
.btn:active {
|
|
transform: scale(0.98); /* Drück-Effekt */
|
|
}
|
|
/* 1. Das gesamte Accordion-Container-Design */
|
|
.accordion {
|
|
border: none !important;
|
|
background: transparent !important;
|
|
}
|
|
/* 2. Die einzelnen Accordion-Items (die 'Streifen') */
|
|
.accordion-item {
|
|
border: none !important;
|
|
margin-bottom: 15px !important; /* Abstand zwischen den Elementen für den Schweb-Effekt */
|
|
border-radius: 15px !important; /* Abgerundete Ecken für jedes Item */
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; /* Weicher Schatten */
|
|
overflow: hidden;
|
|
background-color: #ffffff !important;
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
.accordion-item:hover {
|
|
transform: none !important;
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
|
|
}
|
|
/* Erzeugt dauerhafte Fettschrift für alle Accordion-Titel */
|
|
.accordion-button {
|
|
font-weight: 600 !important; /* Extra fett */
|
|
font-size: 16px !important;
|
|
color: #1a1a1a !important;
|
|
background-color: #ffffff !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
/* Wenn das Accordion ausgeklappt ist */
|
|
.accordion-button:not(.collapsed) {
|
|
font-weight: 600 !important;
|
|
background-color: #fcfcfc !important;
|
|
color: #000000 !important;
|
|
}
|
|
/* 4. Der Inhaltsbereich (wenn es offen ist) */
|
|
.accordion-body {
|
|
padding: 20px !important;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: #555;
|
|
background-color: #ffffff !important;
|
|
border-top: 1px solid #f0f0f0 !important; /* Dezente Trennung zum Header */
|
|
}
|
|
/* Speziell für geschachtelte Accordions (die inneren Ebenen) */
|
|
.accordion .accordion {
|
|
margin-top: 10px;
|
|
padding: 10px;
|
|
background-color: #fcfcfc !important; /* Leichter Kontrast zur äußeren Card */
|
|
border-radius: 15px;
|
|
}
|
|
/* Den Text in den Unterpunkten etwas eleganter machen */
|
|
.accordion-body p {
|
|
color: #444;
|
|
line-height: 1.7;
|
|
font-size: 15px;
|
|
padding: 5px;
|
|
}
|
|
.accordion-button h4 {
|
|
font-weight: 600 !important;
|
|
margin: 0 !important;
|
|
transition: color 0.2s ease; /* Macht den Farbwechsel beim Klicken weicher */
|
|
color: #1a1a1a !important;
|
|
}
|
|
/* Den aktiven Header der Unterpunkte hervorheben */
|
|
.accordion-button:not(.collapsed) h4 {
|
|
color: #2b74a9 !important;
|
|
}
|
|
/* 4. Der Hover-Effekt (Damit es beim Drüberfahren reagiert) */
|
|
.accordion-button:hover,
|
|
.accordion-button:hover h4 {
|
|
color: #666666 !important; /* Ein weiches Dunkelgrau beim Hovern */
|
|
}
|
|
")
|
|
)
|
|
),
|
|
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
|
|
)
|
|
),
|
|
uiOutput("txt_map_selection_bezirk"),
|
|
uiOutput("txt_map_selection_stadtteil"),
|
|
plotOutput("grph_top3"),
|
|
),
|
|
col_widths = c(8, 4),
|
|
),
|
|
sidebar = sidebar(
|
|
radioButtons(
|
|
inputId = "rd_maptype",
|
|
label = "Kartentyp",
|
|
choices = c("Bezirke", "Stadtteile"),
|
|
selected = "Bezirke"
|
|
),
|
|
tags$head(
|
|
tags$style(
|
|
HTML("
|
|
.selectize-dropdown-content .option {
|
|
border-bottom: 1px solid #dee2e6; /* Die Trennlinie */
|
|
padding: 8px 10px; /* Abstand zwischen Text und Linie */
|
|
}
|
|
.legend {
|
|
background: white !important; /* Der Hintergrund der Legenden-Box */
|
|
opacity: 1 !important; /* Die Box selbst ist nicht transparent */
|
|
}"
|
|
)
|
|
)
|
|
),
|
|
selectizeInput(
|
|
inputId = "search",
|
|
label = tags$span(icon("search"),"Suche"),
|
|
choices = NULL,
|
|
selected = NULL,
|
|
multiple = FALSE, # Hier wahrscheinlich nur Einzelauswahl gewünscht
|
|
options = list(
|
|
placeholder = "Anfangen zu tippen...",
|
|
openOnFocus = FALSE,
|
|
allowEmptyOption = TRUE,
|
|
selectOnTab = FALSE,
|
|
plugins = list('dropdown_header')
|
|
)
|
|
),
|
|
div(
|
|
tags$h5(
|
|
"Heatmap zur Häufigkeit der Straftaten:",
|
|
style = "font-weight: bold; margin-bottom: 10px;"
|
|
),
|
|
selectizeInput(
|
|
inputId = "heatmap",
|
|
label = "Wähle eine Straftat:",
|
|
choices = list_of_crimes,
|
|
selected = NULL,
|
|
options = list(
|
|
placeholder = "Keine Auswahl",
|
|
plugins = list('clear_button')
|
|
)
|
|
)
|
|
)
|
|
),
|
|
)
|
|
),
|
|
nav_panel("Interaktiver Vergleich",
|
|
layout_sidebar(
|
|
sidebar = sidebar(
|
|
title = "Vergleichs-Optionen",
|
|
width = 400,
|
|
uiOutput("vergleichs_inputs"),
|
|
selectizeInput(
|
|
"vergleich_location",
|
|
"Zu vergleichende Orte",
|
|
choices = auswahlmöglichkeiten,
|
|
multiple = TRUE
|
|
|
|
),
|
|
|
|
selectizeInput(
|
|
"vergleich_straftat",
|
|
"Zu vergleichende Straftaten",
|
|
choices = list_of_crimes,
|
|
multiple = TRUE
|
|
),
|
|
# 3. Gemeinsamer Input: Das Jahr
|
|
selectizeInput(
|
|
"vergleichs_jahr",
|
|
"Jahr wählen:",
|
|
choices = c(2024, 2023),
|
|
selected = 2024,
|
|
),
|
|
),
|
|
card(
|
|
card_header(uiOutput("vergleichs_titel")), # Dynamischer Titel
|
|
plotOutput("vergleich_balkendiagramm")
|
|
)
|
|
)
|
|
),
|
|
nav_panel("Weiterführende Informationen",
|
|
accordion(
|
|
accordion_panel(
|
|
title = "Raub, räuberische Erpressung, räuberischer Angriff auf Kraftfahrer",
|
|
accordion(
|
|
accordion_panel(
|
|
title = h4("Raub nach § 249 StGB", style = "margin: 0;"),
|
|
value = "raub_249",
|
|
p("Raubdelikte sind Straftaten, bei denen jemand eine fremde bewegliche Sache wegnimmt, indem er Gewalt anwendet oder mit Gewalt droht, um sie sich oder einem Dritten rechtswidrig zuzueignen."),
|
|
),
|
|
),
|
|
accordion(
|
|
accordion_panel(
|
|
title = h4("Räuberische Erpressung nach § 255 StGB", style = "margin: 0;"),
|
|
value = "raub_255",
|
|
p("Räuberische Erpressung ist eine
|
|
schwere Form der Erpressung, bei der Gewalt gegen eine Person oder die Drohung mit gegenwärtiger Lebens- oder Gesundheitsgefahr eingesetzt wird, um eine Vermögensverfügung zu erzwingen, wodurch der Täter wie ein Räuber (§ 249 StGB) bestraft wird, also mit mindestens einem Jahr Freiheitsstrafe."),
|
|
),
|
|
),
|
|
accordion(
|
|
accordion_panel(
|
|
title = h4("Räuberischer Angriff auf Kraftfahrer nach § 316a StGB", style = "margin: 0;"),
|
|
value = "raub_316a",
|
|
p("Ein räuberischer Angriff auf Kraftfahrer ist ein
|
|
Verbrechen, bei dem ein Täter unter Ausnutzung der besonderen Situation im Straßenverkehr Gewalt gegen den Fahrer oder Mitfahrer anwendet, um einen Raub, räuberischen Diebstahl oder eine räuberische Erpressung zu begehen."),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
)
|
|
} |