Skip to content

Finalised About Page #125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
raymondchoy14 merged 1 commit into from
Apr 29, 2026
Merged

Finalised About Page #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions 26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import Analytics from "./pages/Analytics";
import Reports from "./pages/Reports";
import ApiDiagnostics from "./pages/ApiDiagnostics";
import ErrorDemo from "./pages/ErrorDemo";
import About from "./pages/About";
import NotFound from "./pages/NotFound";

const queryClient = new QueryClient({
Expand Down Expand Up @@ -83,6 +84,7 @@ export default function App() {
<Route path="/analytics" element={<Analytics />} />
<Route path="/reports" element={<Reports />} />
<Route path="/api-diagnostics" element={<ApiDiagnostics />} />
<Route path="/about" element={<About />} />
<Route path="/error-demo" element={<ErrorDemo />} />
<Route path="/stitch" element={<Index />} />
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
Expand Down
13 changes: 10 additions & 3 deletions .../afl_player_tracking_and_crowd_monitoring/frontend/client/components/MobileNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,12 @@ const navigationItems = [
icon: Terminal,
description: "System monitoring",
},
{
name: "About",
href: "/about",
icon: Zap, // or any icon you like
description: "About this system",
},
];

export default function MobileNavigation() {
Expand Down Expand Up @@ -191,8 +197,8 @@ export default function MobileNavigation() {

{/* Bottom Navigation for Mobile */}
<nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t z-40">
<div className="grid grid-cols-5 gap-1">
{navigationItems.slice(1, 5).map((item) => {
<div className="grid grid-cols-7 gap-10 px-3">
{navigationItems.slice(1, 7).map((item) => {
const Icon = item.icon;
const active = isActive(item.href);

Expand All @@ -201,7 +207,8 @@ export default function MobileNavigation() {
key={item.name}
to={item.href}
className={`flex flex-col items-center py-2 px-1 transition-colors ${
active ? "text-green-600" : "text-gray-500"
active
? "text-green-600" : "text-gray-500 hover:bg-gray-100 hover:shadow-md hover:scale-[1.02] hover:ring-gray-200"
}`}
>
<Icon className="w-5 h-5 mb-1" />
Expand Down
121 changes: 121 additions & 0 deletions 26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import MobileNavigation from "@/components/MobileNavigation";

export default function About() {
return (
<div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-blue-50">
<MobileNavigation />

<div className="lg:ml-64 p-6 space-y-6 max-w-5xl">
{/* Title */}
<h1 className="text-3xl font-bold">About the Project</h1>

{/* Overview */}
<Card>
<CardHeader>
<CardTitle>Project Overview</CardTitle>
</CardHeader>
<CardContent className="text-gray-600 leading-relaxed space-y-3">
<p>
Project 4, RedBack Orion is one of our company's initiatives aimed
at redefining sports engagement.
</p>
<p>
The system focuses on building an intelligent, real-time tracking
platform for athletes across multiple sports—especially AFL
(Footy), one of Australia’s most popular sports.
</p>
<p>
It tracks player performance live while also monitoring crowd
density in stadiums to ensure audience safety during peak times.
</p>
</CardContent>
</Card>

{/* Features */}
<Card>
<CardHeader>
<CardTitle>Features</CardTitle>
</CardHeader>
<CardContent className="space-y-6 text-gray-700">

{/* Player Performance */}
<Card>
<CardHeader>
<CardTitle>Player Performance</CardTitle>
</CardHeader>
<CardContent>
<ul className="list-disc pl-5 space-y-1 text-sm text-gray-700">
<li>Live stats: active players, goals, efficiency, disposals</li>
<li>Player info: name, age, team, position</li>
<li>Detailed stats: kicks, handballs, tackles</li>
<li>Performance ratings</li>
<li>Heatmaps and analytics</li>
<li>Player comparison</li>
</ul>
</CardContent>
</Card>

{/* Crowd Monitoring */}
<Card>
<CardHeader>
<CardTitle>Crowd Monitoring</CardTitle>
</CardHeader>
<CardContent>
<ul className="list-disc pl-5 space-y-1 text-sm text-gray-700">
<li>Total attendance and density tracking</li>
<li>Real-time stadium heatmap</li>
<li>Zone analytics (capacity, flow)</li>
<li>Wait times and movement</li>
<li>Safety alerts and risk detection</li>
</ul>
</CardContent>
</Card>

{/* Analytics */}
<Card>
<CardHeader>
<CardTitle>Analytics</CardTitle>
</CardHeader>
<CardContent>
<ul className="list-disc pl-5 space-y-1 text-sm text-gray-700">
<li>Upload AFL or crowd footage</li>
<li>Automated video analysis</li>
<li>Generated reports</li>
<li>Processing queue tracking</li>
</ul>
</CardContent>
</Card>

{/* Reports */}
<Card>
<CardHeader>
<CardTitle>Reports</CardTitle>
</CardHeader>
<CardContent>
<ul className="list-disc pl-5 space-y-1 text-sm text-gray-700">
<li>Download reports</li>
<li>Quick report generation</li>
<li>Custom report builder</li>
</ul>
</CardContent>
</Card>

{/* API Diagnostics */}
<Card>
<CardHeader>
<CardTitle>API Diagnostics</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-gray-600">
Monitor system performance and debug API interactions in real-time.
</p>
</CardContent>
</Card>

</CardContent>
</Card>
</div>
</div>
);
}
55 changes: 38 additions & 17 deletions 26_T1/afl_player_tracking_and_crowd_monitoring/frontend/client/pages/CrowdMonitor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const generateCrowdData = () => {
capacity: 15000,
current: 13200,
color: "#ef4444", // red-500
coordinates: { x: 50, y: 20, width: 40, height: 15 },
coordinates: { x: 50, y: 12, width: 40, height: 12 },
entryPoints: ["Gate A", "Gate B"],
facilities: ["Toilets", "Food Court", "Merchandise"],
temperature: 24,
Expand All @@ -55,19 +55,24 @@ const generateCrowdData = () => {
capacity: 8000,
current: 6800,
color: "#f97316", // orange-500
coordinates: { x: 50, y: 10, width: 40, height: 10 },
coordinates: { x: 50, y: 0, width: 40, height: 12 },
entryPoints: ["Gate A-Upper"],
facilities: ["Toilets", "Bar"],
temperature: 26,
safety: "normal",
},





{
id: 3,
name: "Southern Stand - Lower",
capacity: 12000,
current: 11400,
color: "#dc2626", // red-600
coordinates: { x: 50, y: 75, width: 40, height: 15 },
coordinates: { x: 50, y: 76, width: 40, height: 12 },
entryPoints: ["Gate C", "Gate D"],
facilities: ["Toilets", "Food Court", "First Aid"],
temperature: 23,
Expand All @@ -79,7 +84,7 @@ const generateCrowdData = () => {
capacity: 6000,
current: 5700,
color: "#dc2626", // red-600
coordinates: { x: 50, y: 90, width: 40, height: 10 },
coordinates: { x: 50, y: 88, width: 40, height: 12 },
entryPoints: ["Gate C-Upper"],
facilities: ["Premium Bar"],
temperature: 25,
Expand Down Expand Up @@ -115,7 +120,7 @@ const generateCrowdData = () => {
capacity: 2000,
current: 1850,
color: "#dc2626", // red-600
coordinates: { x: 50, y: 35, width: 30, height: 8 },
coordinates: { x: 50, y: 25, width: 30, height: 12 },
entryPoints: ["Premium Entrance"],
facilities: ["VIP Lounge", "Premium Dining"],
temperature: 21,
Expand All @@ -127,7 +132,7 @@ const generateCrowdData = () => {
capacity: 1500,
current: 1425,
color: "#dc2626", // red-600
coordinates: { x: 50, y: 57, width: 30, height: 8 },
coordinates: { x: 50, y: 63, width: 30, height: 12 },
entryPoints: ["Premium Entrance"],
facilities: ["VIP Lounge", "Premium Bar"],
temperature: 21,
Expand Down Expand Up @@ -349,10 +354,16 @@ export default function CrowdMonitor() {
<button
key={zone.id}
onClick={() => setSelectedZone(zone)}
className={`absolute transition-all duration-300 hover:opacity-80 border-2 ${
className={`absolute transition-all duration-300 border-2
hover:scale-105 hover:z-10 hover:shadow-xl hover:ring-2 hover:ring-white
border-transparent ${
selectedZone.id === zone.id
? "border-white border-4"
: "border-transparent"
} ${
zone.name.includes("Stand") || zone.name.includes("Premium")
? "-translate-x-1/2"
: ""
}`}
style={{
left: `${zone.coordinates.x}%`,
Expand Down Expand Up @@ -405,13 +416,19 @@ export default function CrowdMonitor() {
<CardTitle>{selectedZone.name}</CardTitle>
<CardDescription className="flex items-center gap-4">
<Badge
variant={
selectedZone.density >= 95
? "destructive"
: selectedZone.density >= 85
? "secondary"
: "default"
}
className={`
${
selectedZone.density >= 95
? "bg-red-600 text-white"
: selectedZone.density >= 85
? "bg-orange-500 text-white"
: selectedZone.density >= 70
? "bg-amber-500 text-white"
: selectedZone.density >= 50
? "bg-yellow-400 text-black"
: "bg-green-500 text-white"
}
`}
>
{getDensityLabel(selectedZone.density)}
</Badge>
Expand Down Expand Up @@ -657,7 +674,9 @@ export default function CrowdMonitor() {
.map((zone, index) => (
<div
key={zone.id}
className="flex justify-between items-center p-2 bg-gray-50 rounded"
className="flex justify-between items-center p-2 bg-gray-50 rounded transition-all
duration-300 cursor-pointer hover:bg-gray-100 hover:shadow-md hover:scale-[1.02]
hover:ring-2 hover:ring-blue-200"
>
<span className="text-sm truncate">
{zone.name}
Expand Down Expand Up @@ -685,7 +704,8 @@ export default function CrowdMonitor() {
<CardContent>
<div className="space-y-3">
{criticalZones.length > 0 && (
<div className="p-3 bg-red-50 border border-red-200 rounded">
<div className="p-3 bg-red-50 border border-red-200 rounded transition-all
duration-300 hover:shadow-lg hover:scale-[1.02] hover:border-red-400 cursor-pointer">
<div className="flex items-center gap-2 mb-2">
<AlertTriangle className="w-5 h-5 text-red-500" />
<span className="font-medium text-red-700">
Expand All @@ -706,7 +726,8 @@ export default function CrowdMonitor() {
)}

{highDensityZones.length > 0 && (
<div className="p-3 bg-orange-50 border border-orange-200 rounded">
<div className="p-3 bg-orange-50 border border-orange-200 rounded transition-all
duration-300 hover:shadow-lg hover:scale-[1.02] hover:border-orange-400 cursor-pointer">
<div className="flex items-center gap-2 mb-2">
<Eye className="w-5 h-5 text-orange-500" />
<span className="font-medium text-orange-700">
Expand Down
2 changes: 0 additions & 2 deletions 26_T1/afl_player_tracking_and_crowd_monitoring/frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 0 additions & 2 deletions 26_T1/afl_player_tracking_and_crowd_monitoring/frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@
"google-auth-library": "^10.3.0",
"jsonwebtoken": "^9.0.2",
"lucide-react": "^0.541.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-loading-skeleton": "^3.5.0",
"react-router-dom": "^7.8.2",
"recharts": "^3.1.2",
Expand Down
Loading