Skip to content
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

Added Filtering Functionality in Trekking page #223

Closed
wants to merge 1 commit into from
Closed

Added Filtering Functionality in Trekking page #223

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
55 changes: 44 additions & 11 deletions src/app/trekking/location-detail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
export const trekDetails = [
{
title: "Roopkund Trek",
title: "ROOPKUND TREK",
difficultyLevel: "HIGH RISK",
altitude: 4536,
district: "CHAMOLI",
introduction:
"The Roopkund Trek is a mesmerizing journey through the pristine wilderness of the Himalayas, famously known as the 'Skeleton Lake.' This trek is shrouded in mystery and folklore, as the lake is home to human skeletal remains that date back centuries. Surrounded by majestic mountains and verdant meadows, the trek offers not just adventure but also a unique glimpse into the region's rich history and culture. As you traverse the rugged terrain, you'll encounter breathtaking landscapes that change with every turn, making this an unforgettable experience for every nature enthusiast.",
overview:
Expand Down Expand Up @@ -37,7 +40,10 @@ export const trekDetails = [
image : 'https://upload.wikimedia.org/wikipedia/commons/2/24/Roopkund_Lake.jpg'
},
{
title: "Valley of Flowers Trek",
title: "VALLEY OF FLOWERS TREK",
difficultyLevel: "MODERATE",
altitude: 3658,
district: "CHAMOLI",
introduction:
"The Valley of Flowers Trek is a breathtaking expedition into one of India's most spectacular national parks. Known for its vibrant meadows filled with a stunning array of endemic flowers, this UNESCO World Heritage site is a paradise for nature lovers and photographers alike. As you trek through the valley, you’ll be greeted by a colorful landscape that comes alive during the monsoon season. The blend of beautiful flora and the majestic backdrop of snow-capped mountains creates a visual feast that captivates all who visit. The Valley of Flowers is not just a visual delight; it’s an opportunity to connect with nature at its most vibrant and enchanting.",
overview:
Expand Down Expand Up @@ -74,7 +80,10 @@ export const trekDetails = [
image : "https://upload.wikimedia.org/wikipedia/commons/6/63/Valley_of_flowers_uttaranchal_full_view.JPG"
},
{
title: "Har Ki Dun Trek",
title: "HAR KI DUN TREK",
difficultyLevel: "MODERATE",
altitude: 3566,
district: "UTTARKASHI",
introduction:
"The Har Ki Dun Trek offers a mesmerizing blend of natural beauty and rich cultural heritage, often referred to as the 'Valley of Gods.' This picturesque valley is steeped in mythological significance and is surrounded by magnificent snow-capped peaks, dense forests, and lush meadows. The trek is an ideal escape for those looking to immerse themselves in the tranquility of nature while exploring the rich history and traditions of the local people. Trekking in Har Ki Dun allows you to connect with the serene landscapes and delve into the stories that the mountains hold.",
overview:
Expand Down Expand Up @@ -111,7 +120,10 @@ export const trekDetails = [
image : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Har_Ki_Dun.jpg/1200px-Har_Ki_Dun.jpg"
},
{
title: "Kedarkantha Trek",
title: "KEDARKANTHA TREK",
difficultyLevel: "EASY TO MODERATE",
altitude: 3810,
district: "UTTARKASHI",
introduction:
"Experience the thrilling Kedarkantha Trek, renowned for its stunning winter landscapes and breathtaking summit views. This trek is especially popular during the winter months when the entire region is blanketed in snow, creating a picturesque setting for adventure seekers.",
overview:
Expand Down Expand Up @@ -148,7 +160,10 @@ export const trekDetails = [
},

{
title: "Nanda Devi Base Camp Trek",
title: "NANDA DEVI BASE CAMP TREK",
difficultyLevel: "MODERATE TO DIFFICULT",
altitude: 4000,
district: "CHAMOLI",
introduction:
"Discover the untouched beauty of Nanda Devi Base Camp, a majestic trek that offers a glimpse into the heart of the Himalayas. This trek is an adventure through one of India's most scenic and lesser-known trails, perfect for nature lovers and adventure seekers alike.",
overview:
Expand Down Expand Up @@ -184,7 +199,10 @@ export const trekDetails = [
image : "https://upload.wikimedia.org/wikipedia/commons/d/d2/Mt._Nanda_Devi.jpg"
},
{
title: "Pindari Glacier Trek",
title: "PINDARI GLACIER TREK",
difficultyLevel: "MODERATE",
altitude: 3660,
district: "BAGESHWAR",
introduction:
"Venture to the Pindari Glacier, a mesmerizing trek that offers breathtaking views of the majestic glacier and surrounding peaks. This trek is renowned for its pristine natural beauty and serene atmosphere.",
overview:
Expand Down Expand Up @@ -218,7 +236,10 @@ export const trekDetails = [
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Pindari_glacier%2C_Uttarakhand%2C_India.jpg/1200px-Pindari_glacier%2C_Uttarakhand%2C_India.jpg"
},
{
title: "Bali Pass Trek",
title: "BALI PASS TREK",
difficultyLevel: "DEMANDING",
altitude: 4950,
district: "UTTARKASHI",
introduction:
"Embark on an extraordinary journey through the Bali Pass, a high-altitude trek that connects the Har Ki Dun and Yamunotri valleys. This trek offers a perfect blend of adventure and breathtaking natural beauty.",
overview:
Expand Down Expand Up @@ -254,7 +275,10 @@ export const trekDetails = [
},

{
title: "Kumaon Himalayas Trek",
title: "KUMAON HIMALAYAS TREK",
difficultyLevel: "MODERATE",
altitude: 4200,
district: "KUMAON",
introduction:
"Explore the pristine beauty of the Kumaon Himalayas, where adventure and nature come together in perfect harmony. This trek promises an unforgettable experience for nature lovers and adventure seekers, offering an immersive journey through one of India's most scenic regions.",
overview:
Expand Down Expand Up @@ -289,7 +313,10 @@ export const trekDetails = [
},

{
title: "Chopta Tungnath Trek",
title: "TUNGNATH CHOPTA TREK",
difficultyLevel: "EASY",
altitude: 3680,
district: "CHAMOLI",
introduction:
"Experience the breathtaking beauty of the Chopta Tungnath Trek, known for its stunning landscapes and rich cultural heritage. This trek, leading to the highest Shiva temple in the world, combines adventure with spiritual significance, making it a unique experience for trekkers. Nestled in the heart of the Himalayas, Chopta is often referred to as the 'Mini Switzerland of India' due to its picturesque meadows and panoramic views of the surrounding peaks. The trek not only offers mesmerizing views but also a deep connection to the spiritual essence of the region, making it a favorite among both adventure seekers and those seeking solace.",
overview:
Expand Down Expand Up @@ -325,7 +352,10 @@ export const trekDetails = [
image : "https://trisoj.com/travel-guide/wp-content/uploads/2022/11/Chandrashila.png"
},
{
title: "Rupin Pass Trek",
title: "RUPIN PASS TREK",
difficultyLevel: "DEMANDING",
altitude: 4650,
district: "UTTARKASHI",
introduction:
"Challenge yourself with the Rupin Pass trek, a breathtaking adventure that showcases the stunning beauty of the Himalayas. Known for its dramatic landscapes, this trek offers a unique opportunity to explore the diverse terrains and experience the rich culture of the region.",
overview:
Expand Down Expand Up @@ -360,7 +390,10 @@ export const trekDetails = [
image : "https://trekthehimalayas.com/images/RupinPassTrek/GalleryDesktop/Winter/625ce941-4dcc-46d4-a5b7-015e4d037005_Rupin-Pass-6.webp"
},
{
title: "Chopta to Tungnath and Back",
title: "CHOPTA TO TUNGNATH AND BACK",
difficultyLevel: "EASY",
altitude: 3680,
district: "CHAMOLI",
introduction:
"Embark on a scenic trek from Chopta to Tungnath, a journey filled with natural beauty and spiritual significance. This trek not only offers stunning vistas but also allows you to connect with the sacred heritage of the region.",
overview:
Expand Down
43 changes: 43 additions & 0 deletions src/app/trekking/page.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,49 @@
justify-content: center;
}

.filter-section {
margin-top: 4rem; /* Space above the filter section */
}

.search-container {
display: flex; /* Use flexbox for layout */
justify-content: space-between; /* Distribute space between items */
align-items: center; /* Center items vertically */
}

.item {
flex: 1; /* Allow items to grow equally */
margin: 0 0.5rem; /* Margin between items */
position: relative; /* Relative positioning for label */
}

.item label {
display: block; /* Make label a block element */
margin-bottom: 0.25rem; /* Space below the label */
font-weight: 500; /* Medium font weight */
color: #333; /* Dark gray for good contrast */
font-size: 0.9rem; /* Slightly smaller font size */
}

.item select {
padding: 0.5rem; /* Padding inside the select box */
border-radius: 5px; /* Rounded corners for select box */
border: 1px solid #ccc; /* Light gray border */
font-size: 0.75rem; /* Font size for select box */
color: #333; /* Dark text color */
background-color: #fff; /* White background for select box */
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transition */
}
.not-available {
text-align: center; /* Center the text */
color: #555; /* Gray text color */
font-size: 1rem; /* Adjust font size */
margin: 20px 0; /* Space around the message */
}







Expand Down
Loading
Loading