Update app.R

app.R

@@ -1,80 +1,65 @@
 library(shiny)
-library(bslib)
+library(dplyr)
 
-ui <- page_fluid(
-  theme = bs_theme(
-    bg        = "#ffffff",
-    fg        = "#002147",
-    primary   = "#002147",
-    base_font = font_google("Inter")
-  ),
+ui <- fluidPage(
+  tags$head(tags$style(HTML("
+    body { margin:0; font-family:'Segoe UI',Arial,sans-serif; background:#f5f5f5; }
+    .header { background:#002147; padding:14px 24px;
+              display:flex; align-items:center; justify-content:space-between; }
+    .header h1 { color:white; margin:0; font-size:26px; font-weight:700; }
+    .header p  { color:#aabbcc; margin:0; font-size:13px; }
+    .filters { display:flex; gap:24px; align-items:flex-end;
+               padding:16px 24px; background:white;
+               border-bottom:1px solid #e0e0e0; flex-wrap:wrap; }
+    .filter-label { font-weight:600; font-size:11px; text-transform:uppercase;
+                    letter-spacing:0.4px; color:#555; margin-bottom:4px; }
+    .main { padding:20px 24px; }
+    .form-control { border:1px solid #d0d0d0; border-radius:4px; }
+  "))),
 
-div(
-    style = "background-color:#002147; padding:14px 24px;
-             display:flex; align-items:center; justify-content:space-between;
-             margin-bottom:20px;",
-    div(
-      tags$h1("Butler Baseball Analytics", style="color:white; margin:0; font-size:26px; font-weight:700;"),
-      tags$p("Trackman Dashboard",
-             style="color:#aabbcc; margin:0; font-size:13px;")
+  # ── Header ───────────────────────────────────────────────────────────────────
+  tags$div(class="header",
+    tags$div(
+      tags$h1("Butler Baseball Analytics"),
+      tags$p("Trackman Dashboard")
     ),
-    tags$img(
-      src    = "Butler-Bulldogs-Logo-1990.png",
-      height = "52px"
-    )
+    tags$img(src="Butler-Bulldogs-Logo-1990.png", height="52px")
   ),
 
-  # ── Filters ─────────────────────────────────────────────────────────────────
-  div(
-    style = "display:flex; gap:24px; align-items:flex-end;
-             padding:0 8px 20px 8px; flex-wrap:wrap;",
-
-    div(
-      style = "min-width:160px;",
-      tags$label("Level", style="font-weight:600; font-size:12px;
-                                 text-transform:uppercase; letter-spacing:0.4px;
-                                 color:#555; display:block; margin-bottom:4px;"),
+  # ── Filters ──────────────────────────────────────────────────────────────────
+  tags$div(class="filters",
+    tags$div(
+      tags$div("Level", class="filter-label"),
       selectInput("level", label=NULL,
                   choices  = c("All","D1","D2","D3","JUCO","Other"),
                   selected = "All",
-                  width    = "100%")
+                  width    = "160px")
     ),
-
-    div(
-      style = "min-width:160px;",
-      tags$label("Position", style="font-weight:600; font-size:12px;
-                                    text-transform:uppercase; letter-spacing:0.4px;
-                                    color:#555; display:block; margin-bottom:4px;"),
+    tags$div(
+      tags$div("Position", class="filter-label"),
       selectInput("position", label=NULL,
                   choices  = c("Pitcher","Hitter"),
                   selected = "Pitcher",
-                  width    = "100%")
+                  width    = "160px")
     ),
-
-    div(
-      style = "min-width:160px;",
-      tags$label("Min Pitches", style="font-weight:600; font-size:12px;
-                                       text-transform:uppercase; letter-spacing:0.4px;
-                                       color:#555; display:block; margin-bottom:4px;"),
+    tags$div(
+      tags$div("Min Pitches", class="filter-label"),
       numericInput("min_pitches", label=NULL,
-                   value=100, min=1, max=1000, step=25,
-                   width="100%")
+                   value = 100, min = 1, max = 1000, step = 25,
+                   width = "160px")
     )
   ),
 
-  # ── Main content placeholder ─────────────────────────────────────────────────
-  div(
-    id    = "main_content",
-    style = "padding:0 8px;",
+  # ── Main content ─────────────────────────────────────────────────────────────
+  tags$div(class="main",
     uiOutput("main_ui")
   )
 )
 
 server <- function(input, output, session) {
   output$main_ui <- renderUI({
-    div(style="color:#888; font-size:14px; padding:20px;",
-        "Content will load here.")
+    tags$p("Content will load here.", style="color:#888;")
   })
 }
 
-shinyApp(ui, server)
+shinyApp(ui, server)