started with ui. made a new app.R for that and made the home page and started with the explore page. Header with baselayout is also done.

app.R

@@ -0,0 +1,58 @@
+shiny::devmode(TRUE)
+
+library(shiny)
+library(bslib)
+theme <- bs_theme(
+  primary = "#7faeff"  # blue-light
+)
+
+source("R/Global.R")
+source("home_page.R")
+source("explore_page.R")
+
+
+    
+    
+inspect_page <- tagList(
+  tags$div(
+    "Hello World – Page C")
+)
+
+optimize_page <- tagList(
+  tags$div(
+    "Hello World – Page D")
+)
+
+# --- UI ---
+
+ui <- page_navbar(
+  title = tags$img(
+    "Plateflow",
+    src = "logo.svg",
+    height = "35px",
+    alt = "InnerAnalyticsLogo"
+  ),
+  header = tags$head(
+    tags$link(rel = "stylesheet", href = "styles.css")
+  ),
+  theme = theme,
+
+  nav_panel("Home", home_page),
+  nav_panel("EXPLORE", explore_page),
+  nav_panel("INSPECT", inspect_page),
+  nav_panel("OPTIMIZE", optimize_page)
+)
+
+# --- Server ---
+
+server <- function(input, output, session) {
+  # input$page holds the currently active tab name if you ever need it
+  # e.g. observeEvent(input$page, { cat("Switched to:", input$page, "\n") })
+  output$sessioninfo <- renderPrint({ sessionInfo()})
+
+  
+}
+
+
+
+shinyApp(ui = ui, server = server)

dev/app.R

@@ -441,7 +441,7 @@ server <- function(input, output, session) {
                 numericInput("dilutionFac", "dilution factor", value = NA, min = 0, max = 10),
                 numericInput("NoDil", "no. of dilutions", value = NA, min = 8),
                 numericInput("NoDilSer", "no. of dil. series", value = NA),
-                verbatimTextOutput("dilutions")
+                verbatimTextOutput("dilutions") #TODO_BARBARA Was wird hier ausgegeben? Sehe in ui nichts
               ),
               h4("log-dilutions from settings above"),
               column(

explore_page.R

@@ -0,0 +1,72 @@
+explore_4pl <- tagList(
+  tags$p("hallo")
+)
+
+explore_linear <- tagList(
+  tags$p("linear")
+)
+
+
+
+
+explore_page <- layout_sidebar(
+  sidebar = sidebar(
+    class = "sidebar",
+    tags$div(  class = "sidebar_collector",
+      tags$h5( class = "sidebar_collector_header",
+        "Exploration Settings"
+      ),
+      sliderInput("sdfac", "Variability of lower to upper asymptote [%]:", min = 0, max = 100, value = 50),
+      sliderInput("potencydiff", "Potency of test [%]:", min = 0, max = 200, value = 100),
+      checkboxInput("PureErrMeta","Use pure error", FALSE),
+      checkboxInput("heterosked","Heteroskedastic noise", FALSE),
+    ),
+    tags$div( class = "sidebar_collector",
+      tags$h5( class = "sidebar_collector_header", "Curve Settings"),
+      numericInput("lowAsymptREF", "lower asymptote REF", 10, step = 1, min = 0),
+      numericInput("lowAsymptTEST", "lower asymptote TEST", 10, step = 1, min = 0),
+      numericInput("uppAsymptREF", "upper asymptote REF", 110, step = 1, min = 0),
+      numericInput("uppAsymptTEST", "upper asymptote TEST", 110, step = 1, min = 0),
+      numericInput("slopeREF", "slope REF", 1, step = 0.1, min = -10),
+      numericInput("slopeTEST", "slope TEST", 1, step = 0.1, min = -10),
+      numericInput("EC50", "EC50 REF", -3.5),
+      numericInput("potDiff", "potency difference", 0)
+      ),
+    tags$div( class = "sidebar_collector",
+              tags$h5( class = "sidebar_collector_header", "Dilutions"),
+              numericInput("CONC1", "highest concentration", 0.3, min = -3.5),
+              numericInput("CONC2", "2nd concentration", 0.15),
+              numericInput("CONC3", "3rd concentration", 0.075),
+              numericInput("CONC4", "4th concentration", 0.0375),
+              numericInput("CONC5", "5th concentration", 0.01875),
+              numericInput("CONC6", "6th concentration", 0.00938),
+              numericInput("CONC7", "7th concentration", 0.00469),
+              numericInput("CONC8", "8thd concentration", 0.00235),
+              numericInput("CONC9", "9thd concentration", value = NA),
+              numericInput("CONC10", "10th concentration", value = NA),
+              numericInput("CONC11", "11th concentration", value = NA),
+              numericInput("CONC12", "lowest concentration", NA)
+    ),
+    tags$div( class = "sidebar_collector",
+              tags$h5( class = "sidebar_collector_header", "Geometric Dilution Scheme"),
+              numericInput("ConcStart", "starting concentration", value = NA, min = 0),
+              numericInput("dilutionFac", "dilution factor", value = NA, min = 0, max = 10),
+              numericInput("NoDil", "no. of dilutions", value = NA, min = 8),
+              numericInput("NoDilSer", "no. of dil. series", value = NA, min = 0), #TODO 1?
+    ),
+  ),
+  
+  
+  # Main content goes here (can be multiple elements)
+  navset_pill(
+    id = "tab_menu",
+    nav_panel("4PL", explore_4pl),
+    nav_panel("LINEAR", explore_linear)
+  ),
+  tags$div(
+    box( # TODO
+      title = "Simulated data per log-concentration", solidHeader = TRUE, width = 12, "incl. mean, sd and CV%",
+      DT::dataTableOutput("ConctabMeta") 
+    ),
+  )
+)

home_page.R

@@ -0,0 +1,44 @@
+home_page <- tagList(
+  tags$div( style = "align-self: center",
+            tags$div( class = "home-text-section",
+                      tags$h3("Welcome to Plateflow"),
+                      tags$p("Plateflow allows you to EXPLORE, INSPECT and OPTIMIZE your data in 
+           the context of a 4 PL fit or a linear regression fit. "),
+            ),
+            
+            tags$div( class = "home-text-section",
+                      tags$h4("Readable formats and expected structure"),
+                      tags$p("Plateflow is optimized for uploadfiles in the folowing formats: 
+             .xlsx, .csv and .numbers."),
+                      tags$ul(
+                        tags$li("1 column with the dilution concentrations (first or last column) is expected"),
+                        tags$li("The column name of the dilution concentrations can be as follows: concentration, dose, log_concentration, log_dose (first letter can be capital). 
+                It is assumed, that the concentrations are in anti-log or in natural log mode."), 
+                        tags$li("2 columns of reference and test sample readouts, respectively, in this order, are expected"),
+                        tags$li("The column names for reference and test are free to set, but must differ for all columns"),
+                      ),
+                      tags$p("You can download an example", tags$a("TestFile.xlsx ", target = "self", href = "TestFile.xlsx"), "File here."),
+                      tags$h6("Example filestructure:"),
+                      tags$img(src= "example_file.png", width = "800px",   alt="example filestructure for upload", style = " max-width:800px"),
+                      tags$br(),
+            ),
+            
+            tags$div( class = "home-text-section",
+                      tags$br(),
+                      tags$h4("Information on dilution settings"), #TODO
+                      tags$p("Bend points are calculated according to following formula:",
+                             withMathJax(" $$bp_{1/2} = \\pm\\frac{1.31696}{Hill's slope}$$"),
+                             "Please refer to this",  a(href = "ADONIS.pdf", "Whitepaper", download = NA, target = "_blank"), "for further details.", #TODO this link does not work for me
+                      ),
+                      tags$br(),
+            ),
+            
+            tags$div( class = "home-text-section",
+                      tags$h4("Plateflow Point of Contact"),
+                      tags$p("At InnerAnalytics, we are happy to hear from you. You can contact us under: ",
+                             tags$a("info@inner-analytics.eu", href = "mailto:info@inner-analytics.eu")),
+                      tags$p("If you would like to report a bug, we would appreciate it if you sent us the following infos to help us solve your request as fast as possible: "),
+                      verbatimTextOutput("sessioninfo"), #TODO actually output this
+            ),
+  )
+)

www/styles.css

@@ -0,0 +1,104 @@
+:root {
+  color-scheme: light;
+  --text-dark: #000000;
+  --text-light: #ffffff;
+
+  --grey-900: #1f2937;
+  --grey-800: #2b3441;
+  --grey-200: #b1b9c5;
+  --grey-100: #e7f1ff;
+  --grey-white: #ffffff;
+
+  --blue-light: #7faeff;
+  --blue: #5757fd;
+  --blue-dark: #4545ba;
+
+}
+
+body {
+  background: var(--grey-white);
+  color: var(--text-dark);
+}
+
+/*------------------------header-------------------------------------------*/
+.navbar {
+  background-color: var(--grey-100); 
+  border-bottom: 1px solid var(--blue-light) !important;
+  align-items: center;
+  width: 100;
+}
+
+/* The app title */
+.navbar-brand {
+  color: var(--text-dark);
+  font-size: 1.4rem;
+}
+
+/* Nav container */
+.navbar-nav {
+  display: flex;
+  justify-content: space-evenly;
+  align-self: center;
+}
+
+/*Header buttons*/
+.navbar-nav .nav-link {
+  padding: 0.2rem 1.2rem !important; 
+  margin: 0.4rem 0rem;
+  border: none;
+  border-radius: 5px; 
+} 
+
+/*----------------------------------------------------------------------------*/
+
+.navbar-nav .nav-link.active,
+.tab-button:hover, 
+.navbar-nav .nav-link.focus,
+.tab-button:focus, 
+#tab_menu  .nav-link.active {
+  background-color: var(--blue-light);
+  color: var(--text-light)
+}
+
+/* Center the tab buttons */
+#tab_menu {
+  justify-content: center;
+}
+
+/* Style individual tab buttons */
+#tab_menu  .nav-link {
+  background-color: var(--grey-100);
+  border-radius: 4px;
+  margin: 0rem 1rem;
+  color: var(--text-dark)
+}
+
+
+
+/*----------------------------------------------------------------------------*/
+
+.sidebar {
+  background-color: var(--grey-100) !important;
+  border-right: 1px solid var(--blue-light) !important; 
+}
+
+.sidebar_collector{
+  border: 1px solid var(--blue-light);
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.sidebar_collector_header{
+  border-bottom: 1px dashed var(--blue-light);
+  padding: 0 0 15px 0; 
+}
+/*----------------------------------------------------------------------------*/
+.home-text-section{
+  background-color: var(--grey-white);
+  padding: 10px;
+  border-radius: 4px; 
+  max-width: 900px;
+  align-self: start;
+}
+
+