asc/walkup
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refresh PWA icons and splash assets

Browse Source
This commit is contained in:
Codex
2026-04-23 14:05:51 -05:00
parent 51ac5b2060
commit 7023199981
12 changed files with 112 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/index.html
View File

@@ -3,7 +3,28 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#132238" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="Walkup" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" /> <link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link
rel="apple-touch-startup-image"
href="/apple-splash-1125x2436.png"
media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
/>
<link
rel="apple-touch-startup-image"
href="/apple-splash-1170x2532.png"
media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3)"
/>
<link
rel="apple-touch-startup-image"
href="/apple-splash-1290x2796.png"
media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3)"
/>
<title>Walkup</title> <title>Walkup</title>
</head> </head>
<body> <body>

BIN
frontend/public/apple-splash-1125x2436.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

BIN
frontend/public/apple-splash-1170x2532.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

BIN
frontend/public/apple-splash-1290x2796.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
frontend/public/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
frontend/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
frontend/public/icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
frontend/public/icon-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

5
frontend/public/icon.svg
View File

@@ -1,8 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="none">
<rect width="256" height="256" rx="48" fill="#132238"/> <rect width="256" height="256" rx="48" fill="#132238" />
<circle cx="128" cy="128" r="80" fill="#F4EDE2"/>
<path <path
fill="#f4ede2"
d="M144 70a14 14 0 1 1-28 0a14 14 0 0 1 28 0m-18.8 26.6a9 9 0 0 1 8.6-6.6h15a9 9 0 0 1 7.4 3.9l15.2 22.7a9 9 0 1 1-15 10.1l-10.1-15.1l-4.7 21.6l20.8 18.1a9 9 0 0 1-11.8 13.6L132 148.4l-12.4 20.7V192a9 9 0 1 1-18 0v-25.4a9 9 0 0 1 1.3-4.6l14.1-23.5l4.4-20.3l-8 9.8a9 9 0 0 1-7 3.3H87a9 9 0 1 1 0-18h15.2z" d="M144 70a14 14 0 1 1-28 0a14 14 0 0 1 28 0m-18.8 26.6a9 9 0 0 1 8.6-6.6h15a9 9 0 0 1 7.4 3.9l15.2 22.7a9 9 0 1 1-15 10.1l-10.1-15.1l-4.7 21.6l20.8 18.1a9 9 0 0 1-11.8 13.6L132 148.4l-12.4 20.7V192a9 9 0 1 1-18 0v-25.4a9 9 0 0 1 1.3-4.6l14.1-23.5l4.4-20.3l-8 9.8a9 9 0 0 1-7 3.3H87a9 9 0 1 1 0-18h15.2z"
fill="#D94F04"
/> />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 533 B

After

Width:  |  Height:  |  Size: 482 B

34
frontend/public/splash-art.svg Normal file
View File

@@ -0,0 +1,34 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1290 2796" fill="none">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1290" y2="2796" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#132238" />
<stop offset="0.55" stop-color="#18324b" />
<stop offset="1" stop-color="#0f1a2a" />
</linearGradient>
<radialGradient id="glow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(645 940) rotate(90) scale(600 520)">
<stop offset="0" stop-color="#f4ede2" stop-opacity="0.18" />
<stop offset="1" stop-color="#f4ede2" stop-opacity="0" />
</radialGradient>
<filter id="shadow" x="0" y="0" width="1290" height="2796" filterUnits="userSpaceOnUse">
<feDropShadow dx="0" dy="42" stdDeviation="46" flood-color="#09111b" flood-opacity="0.42" />
</filter>
</defs>
<rect width="1290" height="2796" fill="url(#bg)" />
<circle cx="645" cy="940" r="560" fill="url(#glow)" />
<circle cx="200" cy="430" r="220" fill="#d94f04" fill-opacity="0.08" />
<circle cx="1090" cy="2260" r="260" fill="#f4ede2" fill-opacity="0.06" />
<g filter="url(#shadow)">
<rect x="220" y="662" width="850" height="850" rx="170" fill="#f4ede2" />
<path
transform="translate(397 839) scale(27.5)"
fill="#132238"
d="M5.25 0a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3Zm-1.91 2.252a.75.75 0 0 0-.69.448l-.5 1.25A.75.75 0 1 0 3.55 4.45l.27-.672l.54.616l-.156 1.501a.75.75 0 0 0 .173.577l1.33 1.52a.75.75 0 1 0 1.13-.988L5.83 6.15l.235-2.25a.75.75 0 0 0-.735-.828H4.43a.75.75 0 0 0-.637.352l-.453.67l.144-1.086a.75.75 0 0 0-.145-.58a.75.75 0 0 0-.571-.226Zm3.875 5.493a.75.75 0 0 0-.207.042a.75.75 0 0 0-.418.965l.44 1.1l.96.96a.75.75 0 1 0 1.06-1.06l-.86-.86l-.413-1.03a.75.75 0 0 0-.562-.117Zm3.69-2.245a.75.75 0 0 0-.53 1.28h.86l-.288-.288l.66.661a.75.75 0 0 0 1.06-1.06l-.98-.98H11.7a.75.75 0 0 0-.487.187Z"
/>
</g>
<text x="645" y="1848" text-anchor="middle" fill="#f4ede2" font-size="108" font-weight="700" letter-spacing="0.02em" font-family="Arial, Helvetica, sans-serif">
Walkup
</text>
<text x="645" y="1920" text-anchor="middle" fill="#b9c6d3" font-size="40" font-weight="500" letter-spacing="0.04em" font-family="Arial, Helvetica, sans-serif">
Offline clip cache for the dugout
</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

44
frontend/src/App.tsx
View File

@@ -1,5 +1,5 @@
import { Component, useEffect, useState, type ErrorInfo, type ReactElement, type ReactNode } from "react"; import { Component, useEffect, useState, type ErrorInfo, type ReactElement, type ReactNode } from "react";
import { NavLink, Navigate, Route, Routes, useLocation } from "react-router-dom"; import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
import { WalkupProvider, useWalkupContext } from "./hooks/useWalkupContext"; import { WalkupProvider, useWalkupContext } from "./hooks/useWalkupContext";
import { useSession } from "./hooks/useSession"; import { useSession } from "./hooks/useSession";
@@ -228,6 +228,7 @@ function ShellLayout() {
const [navOpen, setNavOpen] = useState(false); const [navOpen, setNavOpen] = useState(false);
const walkup = useWalkupContext(); const walkup = useWalkupContext();
const location = useLocation(); const location = useLocation();
const navigate = useNavigate();
const isOnline = useOnlineStatus(); const isOnline = useOnlineStatus();
const currentPageLabel = getNavbarPageLabel(location.pathname); const currentPageLabel = getNavbarPageLabel(location.pathname);
const showNavbar = walkup.sessionQuery.data?.authenticated === true; const showNavbar = walkup.sessionQuery.data?.authenticated === true;
@@ -250,12 +251,17 @@ function ShellLayout() {
}; };
}, [showTeamSelectionModal]); }, [showTeamSelectionModal]);
function goTo(pathname: string) {
setNavOpen(false);
navigate(pathname);
}
return ( return (
<div className={shellClassName}> <div className={shellClassName}>
{showNavbar ? ( {showNavbar ? (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm sticky-top px-3 py-2" aria-label="Primary"> <nav className="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm sticky-top px-3 py-2" aria-label="Primary">
<div className="container-fluid"> <div className="container-fluid">
<NavLink to="/" className="navbar-brand d-flex align-items-center gap-3 mb-0"> <button type="button" className="navbar-brand d-flex align-items-center gap-3 mb-0 btn btn-link p-0 text-decoration-none" onClick={() => goTo("/")}>
<span className="site-brand-mark" aria-hidden="true"> <span className="site-brand-mark" aria-hidden="true">
<i className="bi bi-person-walking" /> <i className="bi bi-person-walking" />
</span> </span>
@@ -265,7 +271,7 @@ function ShellLayout() {
<span className="navbar-text d-lg-none small lh-1 text-white-50">{currentPageLabel}</span> <span className="navbar-text d-lg-none small lh-1 text-white-50">{currentPageLabel}</span>
) : null} ) : null}
</span> </span>
</NavLink> </button>
<button <button
type="button" type="button"
className="navbar-toggler ms-auto" className="navbar-toggler ms-auto"
@@ -279,24 +285,40 @@ function ShellLayout() {
<div id="primary-nav" className={`navbar-collapse collapse${navOpen ? " show" : ""}`}> <div id="primary-nav" className={`navbar-collapse collapse${navOpen ? " show" : ""}`}>
<ul className="navbar-nav ms-auto gap-2"> <ul className="navbar-nav ms-auto gap-2">
<li className="nav-item"> <li className="nav-item">
<NavLink to="/" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}> <button
type="button"
className={`nav-link btn btn-link${location.pathname === "/" ? " active" : ""}`}
onClick={() => goTo("/")}
>
Home Home
</NavLink> </button>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<NavLink to="/library" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}> <button
type="button"
className={`nav-link btn btn-link${location.pathname === "/library" ? " active" : ""}`}
onClick={() => goTo("/library")}
>
Walkup Clips Walkup Clips
</NavLink> </button>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<NavLink to="/gameday" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}> <button
type="button"
className={`nav-link btn btn-link${location.pathname === "/gameday" ? " active" : ""}`}
onClick={() => goTo("/gameday")}
>
Gameday Gameday
</NavLink> </button>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<NavLink to="/profile" className={({ isActive }) => `nav-link${isActive ? " active" : ""}`}> <button
type="button"
className={`nav-link btn btn-link${location.pathname === "/profile" ? " active" : ""}`}
onClick={() => goTo("/profile")}
>
Profile Profile
</NavLink> </button>
</li> </li>
</ul> </ul>
</div> </div>

26
frontend/vite.config.ts
View File

@@ -11,7 +11,16 @@ export default defineConfig(({ mode }) => {
react(), react(),
VitePWA({ VitePWA({
registerType: "autoUpdate", registerType: "autoUpdate",
includeAssets: ["icon.svg"], includeAssets: [
"icon.svg",
"favicon.ico",
"apple-touch-icon.png",
"icon-192.png",
"icon-512.png",
"apple-splash-1125x2436.png",
"apple-splash-1170x2532.png",
"apple-splash-1290x2796.png",
],
workbox: { workbox: {
runtimeCaching: [ runtimeCaching: [
{ {
@@ -31,18 +40,27 @@ export default defineConfig(({ mode }) => {
], ],
}, },
manifest: { manifest: {
id: "/",
name: "Walkup", name: "Walkup",
short_name: "Walkup", short_name: "Walkup",
description: "Collaborative baseball walk-up songs.", description: "Collaborative baseball walk-up songs.",
theme_color: "#132238", theme_color: "#132238",
background_color: "#f4ede2", background_color: "#f4ede2",
display: "standalone", display: "standalone",
display_override: ["standalone", "minimal-ui"],
scope: "/",
start_url: "/", start_url: "/",
icons: [ icons: [
{ {
src: "/icon.svg", src: "/icon-192.png",
sizes: "any", sizes: "192x192",
type: "image/svg+xml", type: "image/png",
purpose: "any maskable",
},
{
src: "/icon-512.png",
sizes: "512x512",
type: "image/png",
purpose: "any maskable" purpose: "any maskable"
} }
] ]