Skip to content

Commit e741e49

Browse files
saleheenshafiq9saleheenshafiq9
committed
new commit
1 parent 8551595 commit e741e49

File tree

10 files changed

+205
-64
lines changed

10 files changed

+205
-64
lines changed

‎backend/blogs.db

1000 KB
Binary file not shown.

‎backend/mapping_the_world.db

0 Bytes
Binary file not shown.

‎src/Components/Climate/Climate.css

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
1-
body {
2-
overflow-y: hidden;
3-
}
1+
.climatebutton {
2+
-webkit-border-radius: 14;
3+
-moz-border-radius: 14;
4+
border-radius: 14px;
5+
color: #E4DFDA;
6+
font-size: 13px;
7+
background: rgb(4,51,75);
8+
background: radial-gradient(circle, rgba(4,51,75,1) 0%, rgba(0,0,0,1) 100%);
9+
padding: 10px 20px 10px 20px;
10+
border: solid #E4DFDA 4px;
11+
text-decoration: none;
12+
width: 150px;
13+
height: 70px;
14+
margin-top: 20px;
15+
}
416

517
.red{
618
color: 'red';

‎src/Components/Climate/ClimateOption.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const ClimateOption = () => {
2424

2525
return (
2626
<div>
27-
<Button className="btnTravel" onClick={() => handleClick()}>
27+
<Button className="climatebutton" onClick={() => handleClick()}>
2828
Earth's Extreme
2929
</Button>
3030

‎src/Components/Menu/Menu.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ const Menu = () => {
1414
<Link to='/map' className="link-decoration">
1515
<p>Countries</p>
1616
</Link>
17-
<Link to='/ocean' className="link-decoration">
17+
{/* <Link to='/ocean' className="link-decoration">
1818
<p>Ocean</p>
19-
</Link>
19+
</Link> */}
2020
<Link to='/union' className="link-decoration">
2121
<p>Union</p>
2222
</Link>

‎src/Components/Navbar/Navbar.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
}
3232
}
3333

34-
.btn {
34+
.btn-dist {
3535
-webkit-border-radius: 14;
3636
-moz-border-radius: 14;
3737
border-radius: 14px;
@@ -48,7 +48,7 @@
4848
margin-left: 105px;
4949
}
5050

51-
.btn:hover {
51+
.btn-dist:hover {
5252
background: rgb(228,223,218);
5353
background: radial-gradient(circle, rgba(228,223,218,1) 0%, rgba(4,51,75,1) 100%);
5454
border: solid #E4DFDA 4px;

‎src/Components/Space/Space.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -393,7 +393,7 @@ width: 100%;
393393
width: 100%;
394394
}
395395

396-
.btn {
396+
.btn-space {
397397
-webkit-border-radius: 14;
398398
-moz-border-radius: 14;
399399
border-radius: 14px;

‎src/Components/Travel/Travel.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
width: 150px;
1313
height: 70px;
1414
margin-top: 20px;
15-
15+
/* background-image: url(../../../public/baby); */
1616
}
1717

1818
.btn:hover {

‎src/Components/Travel/TravelOption.js

Lines changed: 168 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,195 @@
11
import React, { useState } from 'react';
22
import { Offcanvas, Button } from 'react-bootstrap';
3+
import "./Travel.css";
4+
import { Carousel } from 'react-bootstrap';
5+
import 'react-bootstrap-carousel/dist/react-bootstrap-carousel.css';
36

4-
const ClimateOption = () => {
5-
// State variables for Offcanvas
6-
7-
8-
const [showOffcanvas, setShowOffcanvas] = useState(false);
7+
const TravelOptions = ({ setSelectedWonder }) => {
98
const [isOffcanvasOpen, setIsOffcanvasOpen] = useState(false);
9+
const [activeSlideIndex, setActiveSlideIndex] = useState(0);
10+
11+
const [selectedWonderInfo, setSelectedWonderInfo] = useState({
12+
name: '',
13+
description: ''
14+
});
1015

11-
const handleClick = () => {
12-
16+
const handleClick = (wonder) => {
17+
setSelectedWonder(wonder);
1318
setIsOffcanvasOpen(true);
1419
// Set the selected wonder's name and description
15-
20+
setSelectedWonderInfo(getWonderInfo(wonder));
1621
};
1722

1823
const handleCloseOffcanvas = () => {
19-
24+
setSelectedWonder(null);
25+
setSelectedWonderInfo({ name: '', description: '' }); // Reset selected wonder info
2026
setIsOffcanvasOpen(false);
2127
};
2228

29+
// Define a static dataset of sport information
30+
const wondersData = {
31+
GreatPyramidOfGiza: {
32+
name: 'Great Pyramid of Giza',
33+
description: 'The Great Pyramid of Giza is the oldest and largest of the three pyramids in the Giza pyramid complex in Egypt. It was built as a tomb for the Pharaoh Khufu and is the only remaining ancient wonder of the world.',
34+
imageURL: './giza1.png',
35+
imageURL2: './giza2.png',
36+
imageURL3: './giza3.png',
37+
location: 'Giza, Egypt',
38+
yearBuilt: 'Around 2560 BC',
39+
builder: 'Ancient Egyptians',
40+
},
41+
HangingGardensOfBabylon: {
42+
name: 'Hanging Gardens of Babylon',
43+
description: 'The Hanging Gardens of Babylon were a series of terraced gardens built in ancient Babylon, present-day Iraq. They were considered one of the Seven Wonders of the Ancient World and were renowned for their lush greenery and complex irrigation systems.',
44+
imageURL: './babylon.jpeg',
45+
location: 'Babylon, Iraq',
46+
yearBuilt: 'Around 600 BC',
47+
builder: 'Nebuchadnezzar II',
48+
},
49+
50+
MausoleumAtHalicarnassus: {
51+
name: 'Mausoleum at Halicarnassus',
52+
description: 'The Mausoleum at Halicarnassus was a tomb built for Mausolus, the ruler of Caria, in present-day Bodrum, Turkey. It was known for its impressive architecture and elaborate decorations.',
53+
imageURL: './mausoleum.jpeg',
54+
location: 'Bodrum, Turkey',
55+
yearBuilt: 'Around 350 BC',
56+
builder: 'Various architects',
57+
},
58+
ColossusOfRhodes: {
59+
name: 'Colossus of Rhodes',
60+
description: 'The Colossus of Rhodes was a giant statue of the Greek titan-god Helios, erected in the city of Rhodes, Greece. It was one of the tallest statues of the ancient world and symbolized the city\'s strength and power.',
61+
imageURL: './colossum.jpeg',
62+
location: 'Rhodes, Greece',
63+
yearBuilt: 'Around 280 BC',
64+
builder: 'Chares of Lindos',
65+
},
66+
LighthouseOfAlexandria: {
67+
name: 'Lighthouse of Alexandria',
68+
description: 'The Lighthouse of Alexandria, also known as the Pharos of Alexandria, was a tower built on the island of Pharos in Alexandria, Egypt. It served as a navigational aid for ships in the harbor and was one of the tallest man-made structures of the time.',
69+
imageURL: './lighthouse.jpeg',
70+
location: 'Alexandria, Egypt',
71+
yearBuilt: 'Around 280 BC',
72+
builder: 'Sostratus of Cnidus',
73+
},
74+
TajMahal: {
75+
name: 'Taj Mahal',
76+
description: 'The Taj Mahal is an ivory-white marble mausoleum located in Agra, Uttar Pradesh, India. It was commissioned by the Mughal emperor Shah Jahan in memory of his wife Mumtaz Mahal and is considered one of the most beautiful architectural masterpieces in the world.',
77+
imageURL: './tajmahal.jpeg',
78+
location: 'Agra, Uttar Pradesh, India',
79+
yearBuilt: 'Between 1632 and 1653',
80+
builder: 'Emperor Shah Jahan'
81+
},
82+
MachuPicchu: {
83+
name: 'Machu Picchu',
84+
description: 'Machu Picchu is an ancient Incan citadel located in the Andes Mountains of Peru. It is renowned for its breathtaking mountainous setting and well-preserved ruins, which provide insights into the Inca civilization.',
85+
imageURL: './machu.jpg',
86+
location: 'Cusco Region, Peru',
87+
yearBuilt: 'Around 1450 AD',
88+
builder: 'Inca civilization',
89+
},
90+
GreatWallOfChina: {
91+
name: 'Great Wall of China',
92+
description: 'The Great Wall of China is a monumental fortification that stretches across the northern border of China. It was built to protect the Chinese empire from invasions and is one of the most famous landmarks in the world.',
93+
imageURL: './china.jpeg',
94+
location: 'Northern China',
95+
yearBuilt: 'Started in the 7th century BC (Different sections built over centuries)',
96+
builder: 'Various Chinese dynasties',
97+
},
98+
Petra: {
99+
name: 'Petra',
100+
description: 'Petra is an ancient city carved into the rock face in southern Jordan. It was the capital of the Nabataean Kingdom and is known for its impressive architecture and intricate rock-cut structures, such as the Treasury and the Monastery.',
101+
imageURL: './petra.jpeg',
102+
location: 'Ma\'an Governorate, Jordan',
103+
yearBuilt: 'Established in the 4th century BC',
104+
builder: 'Nabataeans',
105+
},
106+
107+
};
108+
109+
const getWonderInfo = (wonder) => {
110+
return wondersData[wonder];
111+
};
23112

24113
return (
25114
<div>
26-
<Button className="btnTravel" onClick={() => handleClick()}>
27-
Earth's Extreme
115+
<Button className="btnTravel" onClick={() => handleClick('GreatPyramidOfGiza')}>
116+
Great Pyramid Of Giza
117+
</Button>
118+
<Button className="btnTravel" onClick={() => handleClick('HangingGardensOfBabylon')}>
119+
Hanging Gardens Of Babylon
120+
</Button>
121+
<Button className="btnTravel" onClick={() => handleClick('MausoleumAtHalicarnassus')}>
122+
Mausoleum At Halicarnassus
123+
</Button>
124+
<Button className="btnTravel" onClick={() => handleClick('ColossusOfRhodes')}>
125+
Colossus Of Rhodes
126+
</Button>
127+
<Button className="btnTravel" onClick={() => handleClick('LighthouseOfAlexandria')}>
128+
Lighthouse Of Alexandria
129+
</Button>
130+
<Button className="btnTravel" onClick={() => handleClick('TajMahal')}>
131+
Taj Mahal
132+
</Button>
133+
<Button className="btnTravel" onClick={() => handleClick('MachuPicchu')}>
134+
Machu Picchu
135+
</Button>
136+
<Button className="btnTravel" onClick={() => handleClick('GreatWallOfChina')}>
137+
Great Wall Of China
138+
</Button>
139+
<Button className="btnTravel" onClick={() => handleClick('Petra')}>
140+
Petra
28141
</Button>
29142

30143
<Offcanvas show={isOffcanvasOpen} onHide={handleCloseOffcanvas} placement="end" backdrop={false} scroll={false} className="offcanvas">
31-
<Offcanvas.Header closeButton>
32-
<Offcanvas.Title>Most Environment Friendly Countries</Offcanvas.Title>
33-
</Offcanvas.Header>
34-
<Offcanvas.Body>
35-
<div className="row">
36-
<div className="col-12 d-flex align-items-center justify-content-center">
37-
<img src="./environment.png" alt="" width="300px" />
38-
</div>
39-
</div>
144+
<Offcanvas.Header closeButton>
145+
<Offcanvas.Title>{selectedWonderInfo.name}</Offcanvas.Title>
146+
</Offcanvas.Header>
147+
<Offcanvas.Body>
40148

41-
<hr />
42-
<div>
43-
<h3>Green Oasis</h3>
44-
<ol>
45-
<li>Sweden</li>
46-
<li>Denmark</li>
47-
<li>United Kingdom</li>
48-
<li>Finland</li>
49-
<li>Switzerland</li>
50-
<li>France</li>
51-
<li>Costa Rica</li>
52-
<li>Iceland</li>
53-
<li>Norway</li>
54-
<li>Ireland</li>
55-
</ol>
56-
57-
<h3>Toxic Wasteland</h3>
58-
<ol>
59-
<li>Qatar</li>
60-
<li>Iran</li>
61-
<li>Turkey</li>
62-
<li>China</li>
63-
<li>Saudi Arabia</li>
64-
<li>Vietnam</li>
65-
<li>Indonesia</li>
66-
<li>Malaysia</li>
67-
<li>Algeria</li>
68-
<li>Kuwait</li>
149+
<div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
150+
<ol className="carousel-indicators">
151+
<li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
152+
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
153+
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
69154
</ol>
155+
<div className="carousel-inner">
156+
<div className="carousel-item active">
157+
<img className="d-block w-100" src={selectedWonderInfo.imageURL} alt="First slide" />
158+
</div>
159+
<div className="carousel-item">
160+
<img className="d-block w-100" src={selectedWonderInfo.imageURL2} alt="Second slide" />
161+
</div>
162+
<div className="carousel-item">
163+
<img className="d-block w-100" src={selectedWonderInfo.imageURL3}alt="Third slide" />
164+
</div>
165+
</div>
166+
<a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
167+
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
168+
<span className="sr-only"></span>
169+
</a>
170+
<a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
171+
<span className="carousel-control-next-icon" aria-hidden="true"></span>
172+
<span className="sr-only"></span>
173+
</a>
70174
</div>
71-
</Offcanvas.Body>
72-
</Offcanvas>
73175

176+
<hr />
177+
<div className="row">
178+
<div className="col-6">
179+
<p className="modal-p">{selectedWonderInfo.description}</p>
74180

75-
{/* Rest of your code... */}
181+
</div>
182+
<div className="col-6">
183+
<h5>Facts</h5>
184+
<hr></hr>
185+
<h6>Location: </h6> <p className='modal-p'>{selectedWonderInfo.location}</p>
186+
<h6>Year Built: </h6> <p className='modal-p'>{selectedWonderInfo.yearBuilt}</p>
187+
<h6>Builder: </h6> <p className='modal-p'>{selectedWonderInfo.builder}</p>
188+
</div>
189+
</div>
190+
</Offcanvas.Body>
191+
</Offcanvas>
76192
</div>
77193
);
78194
};
79-
80-
export default ClimateOption;
195+
export default TravelOptions;

‎src/Components/UnionMap/UnionMap.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ import Popover from "react-bootstrap/Popover";
1212
import LoggedNav from "../Navbar/LoggedNav";
1313
import UnionOptions from "./UnionOptions";
1414
import { Modal } from 'react-bootstrap';
15+
import Container from "react-bootstrap/Container";
16+
import Navbar from "react-bootstrap/Navbar";
17+
import { TbArrowBackUp } from "react-icons/tb";
18+
import { Link } from "react-router-dom";
1519

1620
const geoUrl =
1721
"https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json";
@@ -312,8 +316,18 @@ const UnionMap = () => {
312316

313317
return (
314318
<>
315-
<LoggedNav />
316319
<div className="world-map">
320+
<Navbar>
321+
<Container>
322+
<Navbar.Brand href="#home">
323+
<Link to="/">
324+
<button className="login-btn mt-2 arrow-back-btn">
325+
<TbArrowBackUp size="40px" />
326+
</button>
327+
</Link>
328+
</Navbar.Brand>
329+
</Container>
330+
</Navbar>
317331
<div className="text-country">
318332
<p>Country: {content !== "" && <text>{content}</text>}</p>
319333
</div>

0 commit comments

Comments
 (0)