Skip to content

Commit fc3f96b

Browse files
CipherYuvrajCipherYuvraj
authored
Merge pull request #54 from MohdShayan/feature/404-page-enhancement
Enhance 404 page with responsive design, animations, and algorithm-themed content , Fixes #53
2 parents c989f8b + d819acc commit fc3f96b

2 files changed

Lines changed: 139 additions & 41 deletions

File tree

‎frontend/src/pages/GraphVisualizer.jsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
22
import { Play, Pause, RotateCcw, Zap, Settings, ChevronDown, ChevronUp, BookOpen, Network, Download, Search, Moon, Sun, User, Palette } from 'lucide-react';
33
import toast from 'react-hot-toast';
44
import { useTheme } from '../contexts/ThemeContext';
5+
import { AlgorithmSettingsProvider } from '../contexts/AlgorithmSettingsContext';
56
import GraphCanvas from '../components/Graph/GraphCanvas';
67
import GraphInput from '../components/Graph/GraphInput';
78
import ControlPanel from '../components/Sorting/ControlPanel';
@@ -525,9 +526,10 @@ const GraphVisualizer = () => {
525526
const [darkMode,setDarkMode]=useState(false);
526527

527528
return (
528-
<div className={`min-h-screen transition-all duration-500 ${classes.bgGradient}`}>
529-
{/* Conditional Particle Background */}
530-
{showParticles && !timeoutDetected && (
529+
<AlgorithmSettingsProvider>
530+
<div className={`min-h-screen transition-all duration-500 ${classes.bgGradient}`}>
531+
{/* Conditional Particle Background */}
532+
{showParticles && !timeoutDetected && (
531533
<canvas
532534
ref={particleCanvasRef}
533535
className="fixed inset-0 pointer-events-none z-0"
@@ -985,7 +987,8 @@ const GraphVisualizer = () => {
985987
to { opacity: 1; transform: translateY(0); }
986988
}
987989
`}} />
988-
</div>
990+
</div>
991+
</AlgorithmSettingsProvider>
989992
);
990993
};
991994

‎frontend/src/pages/NotFoundPage.jsx‎

Lines changed: 132 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,144 @@
11
import { Link } from "react-router-dom";
2-
import { AlertCircle, Cpu, ArrowLeft } from "lucide-react";
2+
import { ArrowLeft, Home, BookOpen, GitBranch, Activity } from "lucide-react";
33
import { useTheme } from "../contexts/ThemeContext";
4+
import { motion } from "framer-motion";
5+
import { useState, useEffect } from "react";
46

57
const NotFoundPage = () => {
6-
const { isDark, classes, getThemedGradient } = useTheme();
8+
const { isDark, classes } = useTheme();
9+
const [pathSearching, setPathSearching] = useState(true);
10+
11+
useEffect(() => {
12+
const timer = setTimeout(() => setPathSearching(false), 3000);
13+
return () => clearTimeout(timer);
14+
}, []);
15+
16+
// Quick links for algorithm visualizer platform
17+
const quickLinks = [
18+
{ to: "/", icon: Home, label: "Home", color: "blue" },
19+
{ to: "/sorting", icon: Activity, label: "Sorting Visualizer", color: "purple" },
20+
{ to: "/graph", icon: GitBranch, label: "Graph Algorithms", color: "teal" },
21+
{ to: "/tutorials", icon: BookOpen, label: "Tutorials", color: "green" },
22+
];
723

824
return (
9-
<div
10-
className={`relative flex-1 flex flex-col items-center justify-center p-6 transition-all duration-500 ${classes.bgGradient} ${classes.textPrimary}`}
25+
<main
26+
role="main"
27+
className={`min-h-[calc(100vh-80px)] flex items-center justify-center px-4 py-4 sm:px-6 sm:py-6 transition-all duration-500 ${classes.bgGradient} ${classes.textPrimary}`}
1128
>
12-
{/* Floating icons for tech vibe */}
13-
<div className="absolute top-20 left-10 opacity-40 animate-bounce-slow">
14-
<AlertCircle
15-
className={`${classes.textSecondary} w-12 h-12`}
16-
/>
17-
</div>
18-
<div className="absolute bottom-20 right-32 opacity-40 animate-spin-slow">
19-
<Cpu
20-
className={`${classes.textSecondary} w-20 h-20`}
21-
/>
22-
</div>
29+
<div className="w-full max-w-4xl mx-auto">
30+
<div className={`p-6 sm:p-8 md:p-10 rounded-2xl shadow-2xl ${classes.card}`}>
31+
<motion.div
32+
className="text-center space-y-5"
33+
initial={{ opacity: 0, y: 20 }}
34+
animate={{ opacity: 1, y: 0 }}
35+
transition={{ duration: 0.6 }}
36+
>
37+
{/* 404 Title Section */}
38+
<div className="space-y-2">
39+
<motion.h1
40+
className={`text-6xl sm:text-7xl font-extrabold ${classes.brandPrimary}`}
41+
animate={{
42+
scale: [1, 1.02, 1],
43+
}}
44+
transition={{
45+
duration: 2,
46+
repeat: Infinity,
47+
ease: "easeInOut"
48+
}}
49+
>
50+
404
51+
</motion.h1>
52+
<motion.div
53+
className={`h-1.5 w-32 mx-auto rounded-full ${isDark ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-600 to-purple-600'}`}
54+
initial={{ width: 0, opacity: 0 }}
55+
animate={{ width: 128, opacity: 1 }}
56+
transition={{ duration: 0.8, delay: 0.3 }}
57+
/>
58+
</div>
59+
60+
{/* Error Message Section */}
61+
<div className="space-y-2 max-w-2xl mx-auto">
62+
<h2 className={`text-xl sm:text-2xl font-bold ${classes.textPrimary}`}>
63+
Path Not Found
64+
</h2>
65+
<p className={`text-sm sm:text-base ${classes.textSecondary} leading-relaxed`}>
66+
{pathSearching
67+
? "Searching through the algorithm tree..."
68+
: "No valid path exists to this route. The algorithm couldn't find a solution here."}
69+
</p>
70+
<motion.p
71+
className={`text-sm ${classes.textTertiary} font-mono italic`}
72+
initial={{ opacity: 0 }}
73+
animate={{ opacity: 1 }}
74+
transition={{ delay: 0.8 }}
75+
>
76+
Error Code: ROUTE_NOT_FOUND | Stack Trace: /404
77+
</motion.p>
78+
</div>
79+
80+
{/* Primary CTA Buttons */}
81+
<div className="flex flex-col sm:flex-row gap-3 justify-center items-center">
82+
<Link
83+
to="/"
84+
className={`${classes.btnPrimary} gap-2 min-w-[160px] justify-center`}
85+
aria-label="Return to home page"
86+
>
87+
<ArrowLeft className="w-5 h-5" aria-hidden />
88+
Back to Home
89+
</Link>
90+
<Link
91+
to="/docs"
92+
className={`${classes.btnSecondary} min-w-[160px] justify-center`}
93+
>
94+
<BookOpen className="w-5 h-5 inline mr-2" aria-hidden />
95+
View Docs
96+
</Link>
97+
</div>
98+
99+
{/* Quick Navigation Section */}
100+
<div className="pt-4 space-y-2.5">
101+
<div className={`h-px w-full max-w-md mx-auto ${classes.borderPrimary}`} />
102+
<p className={`text-xs sm:text-sm font-semibold ${classes.textSecondary}`}>
103+
Explore Our Visualizers
104+
</p>
105+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 max-w-2xl mx-auto">
106+
{quickLinks.map((link) => (
107+
<Link
108+
key={link.to}
109+
to={link.to}
110+
className={`flex items-center gap-2.5 p-2.5 rounded-lg border-2 transition-all duration-300 hover:scale-105 hover:shadow-lg ${
111+
isDark
112+
? 'border-gray-700 hover:border-blue-500 hover:bg-gray-800/70'
113+
: 'border-gray-200 hover:border-blue-400 hover:bg-blue-50/50'
114+
}`}
115+
>
116+
<div className={`p-1.5 rounded-lg ${isDark ? 'bg-gray-700' : 'bg-gray-100'}`}>
117+
<link.icon className={`w-5 h-5 ${classes.brandPrimary}`} aria-hidden />
118+
</div>
119+
<span className={`text-sm font-semibold ${classes.textPrimary}`}>
120+
{link.label}
121+
</span>
122+
</Link>
123+
))}
124+
</div>
125+
</div>
23126

24-
{/* Main content */}
25-
<div className="relative z-10 text-center max-w-xl">
26-
<h1 className="text-7xl font-extrabold mb-4 animate-pulse">404</h1>
27-
<p className="text-2xl mb-6">
28-
Uh-oh! This algorithm didn't find a solution here.
29-
</p>
30-
<p className="text-lg mb-8">
31-
Looks like this page isn't in the visualization. Try going back and
32-
exploring!
33-
</p>
34-
<Link
35-
to="/"
36-
className={`inline-flex items-center gap-2 px-6 py-4 rounded-lg font-semibold shadow-lg transition-transform transform hover:scale-105 ${
37-
isDark
38-
? "bg-blue-600 hover:bg-blue-700 text-white"
39-
: "bg-blue-500 hover:bg-blue-600 text-white"
40-
}`}
41-
>
42-
<ArrowLeft className="w-5 h-5" />
43-
Go Back to Visualizer
44-
</Link>
127+
{/* Bottom Hint */}
128+
<motion.div
129+
className="pt-3"
130+
initial={{ opacity: 0 }}
131+
animate={{ opacity: 1 }}
132+
transition={{ duration: 0.6, delay: 1.2 }}
133+
>
134+
<p className={`text-sm ${classes.textTertiary}`}>
135+
💡 Tip: Use breadth-first search to navigate back to familiar routes
136+
</p>
137+
</motion.div>
138+
</motion.div>
139+
</div>
45140
</div>
46-
</div>
141+
</main>
47142
);
48143
};
49144

0 commit comments

Comments
 (0)