Update app.R

app.R

@@ -2,22 +2,110 @@ library(shiny)
 library(dplyr)
 
 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; }
-  "))),
+  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; }
 
-  # ── Header ───────────────────────────────────────────────────────────────────
+      /* ── Splash ─────────────────────────────────────────────────────────── */
+      #splash {
+        position:fixed; top:0; left:0; width:100%; height:100%;
+        background:#002147;
+        display:flex; flex-direction:column;
+        align-items:center; justify-content:center;
+        z-index:9999;
+        opacity:1;
+        transition:opacity 0.8s ease;
+      }
+      #splash.fade-out {
+        opacity:0;
+        pointer-events:none;
+      }
+      #splash img {
+        width:140px;
+        animation:logoIn 0.7s ease forwards;
+        opacity:0;
+      }
+      #splash h1 {
+        color:white;
+        font-size:28px;
+        font-weight:700;
+        margin:18px 0 6px 0;
+        animation:textIn 0.7s ease 0.3s forwards;
+        opacity:0;
+        letter-spacing:0.5px;
+      }
+      #splash p {
+        color:#aabbcc;
+        font-size:14px;
+        margin:0;
+        animation:textIn 0.7s ease 0.5s forwards;
+        opacity:0;
+      }
+      #splash .bar-track {
+        width:200px;
+        height:3px;
+        background:rgba(255,255,255,0.2);
+        border-radius:2px;
+        margin-top:28px;
+        animation:textIn 0.7s ease 0.6s forwards;
+        opacity:0;
+      }
+      #splash .bar-fill {
+        height:3px;
+        width:0%;
+        background:white;
+        border-radius:2px;
+        animation:barFill 1.8s ease 0.8s forwards;
+      }
+
+      @keyframes logoIn {
+        from { opacity:0; transform:translateY(-20px); }
+        to   { opacity:1; transform:translateY(0); }
+      }
+      @keyframes textIn {
+        from { opacity:0; transform:translateY(10px); }
+        to   { opacity:1; transform:translateY(0); }
+      }
+      @keyframes barFill {
+        from { width:0%; }
+        to   { width:100%; }
+      }
+    ")),
+
+    tags$script(HTML("
+      $(document).ready(function() {
+        setTimeout(function() {
+          $('#splash').addClass('fade-out');
+          setTimeout(function() {
+            $('#splash').remove();
+          }, 800);
+        }, 2800);
+      });
+    "))
+  ),
+
+  # ── Splash screen ───────────────────────────────────────────────────────────
+  tags$div(id="splash",
+    tags$img(src="Butler-Bulldogs-Logo-1990.png"),
+    tags$h1("Butler Baseball Transfer Portal"),
+    tags$p("Butler Baseball Analytics"),
+    tags$div(class="bar-track",
+      tags$div(class="bar-fill")
+    )
+  ),
+
+  # ── Header ──────────────────────────────────────────────────────────────────
   tags$div(class="header",
     tags$div(
       tags$h1("Butler Baseball Transfer Portal Dashboard"),
@@ -26,7 +114,7 @@ ui <- fluidPage(
     tags$img(src="Butler-Bulldogs-Logo-1990.png", height="52px")
   ),
 
-  # ── Filters ──────────────────────────────────────────────────────────────────
+  # ── Filters ─────────────────────────────────────────────────────────────────
   tags$div(class="filters",
     tags$div(
       tags$div("Level", class="filter-label"),