santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: redesign result section

Browse Source
This commit is contained in:
santasri.pachhal
2026-03-10 16:45:54 +05:30
parent 1a14596779
commit c65fb255f9
3 changed files with 26 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/results/[videoId]/page.tsx
View File

@@ -116,7 +116,7 @@ export default function VideoResultsPage() {
} }
return ( return (
<div className="min-h-screen text-gray-900 dark:text-gray-100"> <div className="min-h-screen max-w-340 mx-auto text-gray-900 dark:text-gray-100">
<SidebarNavigation /> <SidebarNavigation />
<main className="ml-20 min-h-screen"> <main className="ml-20 min-h-screen">
<div className="container mx-auto px-6 py-8 max-w-full"> <div className="container mx-auto px-6 py-8 max-w-full">
@@ -130,7 +130,7 @@ export default function VideoResultsPage() {
{session && ( {session && (
<div className="mb-6"> <div className="mb-6">
<div className="flex items-center justify-between p-4 rounded-xl bg-card border border-[var(--border)] shadow-sm backdrop-blur-sm bg-white/60 dark:bg-gray-800/60"> <div className="flex items-center justify-between rounded-md px-4 py-3 bg-white/60 backdrop-blur-sm">
<div className="flex items-center gap-12"> <div className="flex items-center gap-12">
<div className="flex flex-col"> <div className="flex flex-col">
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span> <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground leading-none mb-1.5">Project</span>
@@ -151,7 +151,7 @@ export default function VideoResultsPage() {
</span> </span>
</div> </div>
</div> </div>
<Button onClick={handleNewAnalysis} variant="outline" size="sm" className="text-xs"> <Button onClick={handleNewAnalysis} variant="outline" size="sm" className="btn-blue-gradient">
Start New Start New
</Button> </Button>
</div> </div>

2
app/upload/[videoId]/page.tsx
View File

@@ -168,7 +168,7 @@ export default function VideoProcessingPage() {
</div> </div>
)} )}
<Card className="rounded-2xl overflow-hidden bg-white/60 dark:bg-gray-900/60 backdrop-blur-xl border border-white/40 dark:border-gray-800/40 shadow-2xl flex flex-col items-center justify-center py-12 px-8 min-h-[450px]"> <Card className="rounded-md overflow-hidden bg-white/60 backdrop-blur-xl flex flex-col items-center justify-center py-12 px-8 min-h-[450px]">
<div className="flex flex-col items-center justify-center w-full max-w-4xl space-y-8"> <div className="flex flex-col items-center justify-center w-full max-w-4xl space-y-8">
{/* Visual Spinner Area */} {/* Visual Spinner Area */}
<div className="relative"> <div className="relative">

47
components/video-player-section.tsx
View File

@@ -137,15 +137,13 @@ function DetailedSummarySection({
}) })
return ( return (
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-5 gap-2">
<Card className="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 rounded-xl overflow-hidden flex flex-col lg:col-span-2"> <Card className="bg-white/60 backdrop-blur-md border border-gray-100 rounded-xl overflow-hidden flex flex-col lg:col-span-2">
<CardHeader className="pb-3 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0"> <CardHeader className="pb-3 ">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 rounded-xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center relative overflow-hidden group"> <div className="p-2 rounded-xl bg-linear-to-b from-[#225999] to-[#56A5FF] flex items-center justify-center relative overflow-hidden group">
<div className="absolute inset-0 bg-white/20 opacity-50"></div> <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="min-h-8 min-w-8 text-white relative z-10">
<div className="absolute inset-0 border-2 border-white/30 rounded-xl opacity-30"></div>
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white relative z-10">
<path d="M50 20L85 80H15L50 20Z" stroke="currentColor" strokeWidth="6" strokeLinejoin="round" /> <path d="M50 20L85 80H15L50 20Z" stroke="currentColor" strokeWidth="6" strokeLinejoin="round" />
<path d="M40 80L50 55L60 80" stroke="currentColor" strokeWidth="6" /> <path d="M40 80L50 55L60 80" stroke="currentColor" strokeWidth="6" />
</svg> </svg>
@@ -163,9 +161,9 @@ function DetailedSummarySection({
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => setShowMap(true)} onClick={() => setShowMap(true)}
className="gap-2 border-blue-200 dark:border-blue-800 hover:bg-blue-50 dark:hover:bg-blue-900/50" className="gap-2 btn-blue-gradient"
> >
<MapIcon className="h-4 w-4 text-blue-500" /> <MapIcon className="h-4 w-4 text-white" />
Show Map Show Map
</Button> </Button>
</div> </div>
@@ -212,12 +210,12 @@ function DetailedSummarySection({
</CardContent> </CardContent>
</Card> </Card>
<Card className="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 rounded-xl overflow-hidden flex flex-col lg:col-span-3"> <Card className="bg-white/60 backdrop-blur-md rounded-md overflow-hidden flex flex-col lg:col-span-3">
<CardHeader className="pb-3 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0"> <CardHeader className="pb-3 ">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 rounded-xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center relative overflow-hidden group"> <div className="p-2 rounded-md bg-linear-to-b from-[#225999] to-[#56A5FF] flex items-center justify-center relative overflow-hidden group">
<div className="absolute inset-0 bg-white/10 opacity-40"></div> <div className="absolute inset-0 bg-white/10 opacity-40"></div>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white relative z-10"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-white relative z-10">
<path d="M3 17L9 11L13 15L21 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="M3 17L9 11L13 15L21 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M15 7H21V13" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="M15 7H21V13" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
</svg> </svg>
@@ -355,12 +353,11 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
] ]
return ( return (
<Card className="bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 rounded-xl overflow-hidden"> <Card className="bg-white/60 backdrop-blur-md rounded-xl overflow-hidden">
<CardHeader className="pb-3 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800"> <CardHeader className="">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 rounded-xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-md flex items-center justify-center relative overflow-hidden group"> <div className="p-2 rounded-md bg-linear-to-b from-[#225999] to-[#56A5FF] flex items-center justify-center relative overflow-hidden group">
<div className="absolute inset-0 bg-white/10 opacity-40"></div> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-white relative z-10">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white relative z-10">
<path d="M3 17L9 11L13 15L21 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="M3 17L9 11L13 15L21 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M15 7H21V13" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" /> <path d="M15 7H21V13" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
</svg> </svg>
@@ -382,9 +379,9 @@ function SummarySection({ data, show, detectionType }: { data: DetectionData; sh
return ( return (
<div <div
key={stat.label} key={stat.label}
className="flex flex-col items-center justify-center p-3 rounded-xl border border-gray-100 dark:border-gray-800 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 shadow-sm hover:shadow-md" className="flex flex-col items-center justify-center p-3 rounded-xl bg-white/80 backdrop-blur-md hover:scale-105 cursor-pointer transition-all duration-300 ease-in-out"
> >
<div className={`${stat.bgColor} p-3 rounded-lg mb-2 transition-all shadow-inner`}> <div className={`${stat.bgColor} p-3 rounded-lg mb-2 transition-all`}>
<Icon className={`h-6 w-6 ${stat.color}`} /> <Icon className={`h-6 w-6 ${stat.color}`} />
</div> </div>
<div className={`text-xl font-bold ${stat.color} mb-1`}>{stat.value}</div> <div className={`text-xl font-bold ${stat.color} mb-1`}>{stat.value}</div>
@@ -1022,11 +1019,11 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<Card className="bg-white dark:bg-gray-950 border border-gray-100 dark:border-gray-800 shadow-xl shadow-blue-500/5 rounded-xl overflow-hidden"> <Card className="bg-white/60 backdrop-blur-lg rounded-xl overflow-hidden">
<CardHeader className="bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800"> <CardHeader className="">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 rounded-xl bg-gradient-to-br from-[#9bddeb] to-[#60a5fa] shadow-lg shadow-[#60a5fa]/20"> <div className="p-2 rounded-md bg-linear-to-b from-[#225999] to-[#56A5FF]">
<Film className="h-5 w-5 text-white" /> <Film className="h-8 w-8 text-white" />
</div> </div>
<div> <div>
<CardTitle className="text-lg font-bold text-gray-900 dark:text-white"> <CardTitle className="text-lg font-bold text-gray-900 dark:text-white">
@@ -1142,7 +1139,7 @@ export default function VideoPlayerSection({ data, videoId, videoFile, detection
<div <div
key={`${log.frame}-${index}`} key={`${log.frame}-${index}`}
onClick={() => seekToFrame(log.frame)} onClick={() => seekToFrame(log.frame)}
className="text-xs p-3 bg-white dark:bg-gray-900 rounded-md cursor-pointer hover:bg-accent/50 transition-colors shadow-sm" className="text-xs p-3 rounded-md border border-slate-200 bg-white cursor-pointer transition-colors"
> >
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">