Skip to content

Commit 125de17

Browse files
BOT-DeepakBOT-Deepak
committed
main
1 parent 14241bc commit 125de17

23 files changed

+1413
-442
lines changed

‎package-lock.json

+529-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@
1515
"jquery": "^3.6.0",
1616
"mdb-ui-kit": "^4.2.0",
1717
"react": "^18.2.0",
18+
"react-bootstrap": "^2.4.0",
1819
"react-dom": "^18.2.0",
1920
"react-router-dom": "^6.3.0",
2021
"react-scripts": "5.0.1",
2122
"sass": "^1.53.0",
23+
"styled-components": "^5.3.5",
2224
"web-vitals": "^2.1.4"
2325
},
2426
"scripts": {

‎public/CoolUnsplash.jpg

82.9 KB
Loading

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link rel="stylesheet" href="style.css">
77
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=McLaren|Montserrat&display=swap">
88
</head>
9-
<body>
9+
<body style="background-image: url(./CoolUnsplash.jpg);">
1010
<div id="root"></div>
1111
<script src="../src/index.js" type="text/jsx"></script>
1212
</body>

‎src/App.css

+29-6
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,30 @@
1-
.App {
2-
text-align: center;
1+
2+
.nav-main {
3+
margin-left: 40px;
4+
margin-right: 50px;
5+
margin-top: 20px;
6+
}
7+
8+
.path-body {
9+
margin-left: 40px;
10+
margin-right: 50px;
11+
margin-top: 20px;
312
}
413

5-
.navbar {
6-
margin: 10px 50px 10px;
7-
background-color: #61C0BF;
8-
border-radius: 10px;
14+
.back-image {
15+
opacity: 0.9;
916
}
1017

1118
.webName {
1219
margin-left: 20px;
20+
font-size: 1.6rem;
1321
font-family: "McLaren", cursive;
22+
color:lightseagreen;
23+
}
24+
25+
.webName:hover {
26+
color: lightseagreen;
27+
text-shadow: 100px;
1428
}
1529

1630
.webBars {
@@ -21,4 +35,13 @@
2135

2236
.bar {
2337
margin-right: 40px;
38+
}
39+
40+
.nav-link {
41+
color: floralwhite;
42+
}
43+
44+
.nav-link:hover {
45+
text-shadow: 100px;
46+
color: floralwhite;
2447
}

‎src/App.js

+73-40
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,95 @@
11
import React from "react";
2-
import {BrowserRouter as Router,Routes,Route,Link} from "react-router-dom";
2+
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
33
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
44
import { faHouse, faHandSparkles, faMap, faRoute, faDownload } from "@fortawesome/free-solid-svg-icons";
5-
import Visualizer from "./visualizers/Visualizer";
5+
66
import 'bootstrap/dist/css/bootstrap.min.css'
77
import 'bootstrap/dist/js/bootstrap.min.js'
88
import 'jquery/dist/jquery.min.js'
99
import "./App.css";
1010

11-
export default function App() {
12-
return (
13-
<Router>
14-
<nav class="navbar navbar-expand-lg">
15-
<a class="navbar-brand webName" href="#"><FontAwesomeIcon icon={faRoute}></FontAwesomeIcon> Path Finding Visualizer</a>
16-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
17-
<span class="navbar-toggler-icon"></span>
18-
</button>
19-
<div class="collapse navbar-collapse" id="navbarNav">
20-
<ul class="navbar-nav webBars">
21-
<li class="nav-item active bar">
22-
<Link to="/" class="nav-link"><FontAwesomeIcon icon={faHouse}></FontAwesomeIcon> Home</Link>
23-
</li>
24-
<li class="nav-item bar">
25-
<Link to="/tutorial" class="nav-link"><FontAwesomeIcon icon={faHandSparkles}></FontAwesomeIcon> Tutorial</Link>
26-
</li>
27-
<li class="nav-item bar">
28-
<Link to="/path" class="nav-link"><FontAwesomeIcon icon={faMap}></FontAwesomeIcon> Path Finder</Link>
29-
</li>
30-
<li class="nav-item bar">
31-
<a class="nav-link disabled" href="#"><FontAwesomeIcon icon={faDownload}></FontAwesomeIcon> Download</a>
32-
</li>
33-
</ul>
11+
import Home from "./Home";
12+
import Visualizer from "./visualizers/Visualizer";
13+
14+
export default class App extends React.Component {
15+
16+
render() {
17+
18+
return (
19+
20+
<Router>
21+
22+
<div id="top-bar" class="back-image">
23+
24+
<nav class="navbar navbar-expand-lg">
25+
26+
<a class="navbar-brand webName" href="#"><FontAwesomeIcon icon={faRoute}></FontAwesomeIcon> Path Finding <br />Visualizer</a>
27+
28+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
29+
<span class="navbar-toggler-icon"></span>
30+
</button>
31+
32+
<div class="collapse navbar-collapse" id="navbarNav">
33+
34+
<ul class="navbar-nav webBars">
35+
36+
<li class="nav-item active bar">
37+
<Link to="/" class="nav-link"><FontAwesomeIcon icon={faHouse}></FontAwesomeIcon> Home</Link>
38+
</li>
39+
40+
<li class="nav-item bar">
41+
<Link to="/tutorial" class="nav-link"><FontAwesomeIcon icon={faHandSparkles}></FontAwesomeIcon> Tutorial</Link>
42+
</li>
43+
44+
<li class="nav-item bar">
45+
<Link to="/path" class="nav-link"><FontAwesomeIcon icon={faMap}></FontAwesomeIcon> Path Finder</Link>
46+
</li>
47+
48+
<li class="nav-item bar">
49+
<a class="nav-link" target="_blank" href="https://github.com/BOT-Deepak/PathFindingVisualizer"><FontAwesomeIcon icon={faDownload}></FontAwesomeIcon> Download</a>
50+
</li>
51+
52+
</ul>
53+
54+
</div>
55+
56+
</nav>
57+
3458
</div>
35-
</nav>
36-
37-
<div>
38-
<Routes>
39-
<Route path="/" element={<Home />} />
40-
<Route path="/tutorial" element={<Tut />} />
41-
<Route path="/path" element={<Path />} />
42-
</Routes>
43-
</div>
44-
</Router>
45-
);
59+
60+
<div>
61+
62+
<Routes>
63+
64+
<Route path="/" element={<Main />} />
65+
<Route path="/tutorial" element={<Tut />} />
66+
<Route path="/path" element={<Path />} />
67+
68+
</Routes>
69+
70+
</div>
71+
72+
</Router>
73+
);
74+
};
4675
}
4776

48-
function Home() {
49-
return <h2>Home</h2>;
77+
function Main() {
78+
return <Home />;
5079
}
5180

5281
function Tut() {
53-
return <h2>Tutorial</h2>;
82+
return (
83+
<h2>Tutorial</h2>
84+
);
5485
}
5586

5687
function Path() {
5788
return (
58-
<div className="App">
89+
90+
<div className="shadow-lg p-4 mb-5 rounded">
5991
<Visualizer />
6092
</div>
93+
6194
);
6295
}

‎src/Home.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
2+
.carousel-control {
3+
width: 50%;
4+
}
5+
6+
.content {
7+
position: relative;
8+
left: 17%;
9+
width: 60%;
10+
margin-top: 180px;
11+
margin-bottom: 200px;
12+
text-align: center;
13+
}
14+
15+
.top-heading {
16+
margin-bottom: 100px;
17+
}
18+
19+
img {
20+
position: absolute;
21+
width: 40%;
22+
right: -5%;
23+
opacity: 0.3;
24+
margin-top: 90px;
25+
transform: rotate(-23deg);
26+
27+
animation-name: mapAnimation;
28+
animation-duration: 8s;
29+
animation-play-state: running;
30+
animation-delay: 0;
31+
animation-iteration-count: infinite;
32+
animation-direction: alternate;
33+
animation-fill-mode: forwards;
34+
}
35+
36+
@keyframes mapAnimation {
37+
0%{ opacity: 0.3; }
38+
25%{ opacity: 1; }
39+
75%{ opacity: 1; }
40+
100%{ opacity: 0.3; }
41+
}

‎src/Home.jsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from "react";
2+
import { Carousel } from "react-bootstrap";
3+
4+
import 'bootstrap/dist/css/bootstrap.min.css'
5+
import 'bootstrap/dist/js/bootstrap.min.js'
6+
import 'jquery/dist/jquery.min.js'
7+
import "./Home.css";
8+
9+
import MapImg from "./images/path_map.jpg";
10+
import { AboutAnimation, FirstAnimation, SecondAnimation, ThirdAnimation, FourthAnimation } from "./animations/TextAnimation";
11+
12+
export default class Home extends React.Component {
13+
14+
render() {
15+
16+
const iconStyle = {
17+
height: "700px",
18+
};
19+
20+
return (
21+
22+
<div class="main-body">
23+
24+
<div className='container-fluid'>
25+
26+
<img src={MapImg} type="image" />
27+
28+
<Carousel className="carousel-control" interval={7000} keyboard={false} pauseOnHover={true}>
29+
30+
<Carousel.Item className="carousel-item" style={iconStyle}>
31+
<div className="content"><AboutAnimation /></div>
32+
<Carousel.Caption><h3>About</h3></Carousel.Caption>
33+
</Carousel.Item>
34+
35+
<Carousel.Item className="carousel-item" style={iconStyle}>
36+
<div className="content"><FirstAnimation /></div>
37+
<Carousel.Caption><h3>Algorithms Used</h3></Carousel.Caption>
38+
</Carousel.Item>
39+
40+
<Carousel.Item className="carousel-item" style={iconStyle}>
41+
<div className="content"><SecondAnimation /></div>
42+
<Carousel.Caption><h3>Algorithms Used</h3></Carousel.Caption>
43+
</Carousel.Item>
44+
45+
<Carousel.Item className="carousel-item" style={iconStyle}>
46+
<div className="content"><ThirdAnimation /></div>
47+
<Carousel.Caption><h3>Algorithms Used</h3></Carousel.Caption>
48+
</Carousel.Item>
49+
50+
<Carousel.Item className="carousel-item" style={iconStyle}>
51+
<div className="content"><FourthAnimation /></div>
52+
<Carousel.Caption><h3>Algorithms Used</h3></Carousel.Caption>
53+
</Carousel.Item>
54+
55+
</Carousel>
56+
57+
</div>
58+
</div>
59+
);
60+
}
61+
}

0 commit comments

Comments
 (0)