Skip to content

Commit b34a36f

Browse files
birbhCopilot
birbh
and
Copilot
committed
added more customization and yt vdo
Co-authored-by: Copilot <copilot@github.com>
1 parent f2d7583 commit b34a36f

19 files changed

Lines changed: 702 additions & 359 deletions

‎README.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
11
# Interactive Nepal Map
22

3-
Explore Nepal's 7 provinces, 77 districts, and rich cultural heritage with this interactive map project.
3+
Explore Nepal's 7 provinces, 77 districts, and rich cultural heritage with this interactive map project.
44

55
## Features
66

77
- **Interactive SVG Map**: Clickable provinces with color-coded regions.
8-
- **Province Pages**: Detailed info for each province (geography, districts, culture, tourism, economy).
8+
- **Province Pages**: Detailed info for each province (geography, districts, culture, tourism, essentials, economy).
99
- **UNESCO Sites**: Highlights of Nepal's World Heritage Sites.
1010
- **Cultural Highlights**: Major festivals, cuisines, and traditional dress.
11+
- **Tourist Explorer Module**: Search and filter destinations by interest, season, budget, and trip length.
12+
1113
- **Responsive Design**: Works on desktop and mobile.
1214

1315

16+
1417
## How to Use
1518

16-
1. **Open `index.html`** in your browser.
17-
2. **Click on any province** in the map or use the quick links to explore detailed pages.
18-
3. **Browse cultural and UNESCO sections** for more information.
19+
1. Open `index.html` in your browser.
20+
2. Click any province to explore detailed pages.
21+
3. Open `explore/index.html` for the Tourist Explorer planner.
22+
1923

2024
## Credits
2125

‎assets/images/bandipur-hill.jpg‎

1.71 MB
Loading

‎assets/images/namche.jpg‎

88.1 KB
Loading

‎assets/images/pathibhara.jpg‎

325 KB
Loading

‎assets/images/world-peace-pagoda.jpg‎

5.35 MB
Loading

‎css/style.css‎

Lines changed: 49 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
:root {
32
/* Colors */
43
--primary-red: #DC143C;
@@ -244,6 +243,51 @@ a {
244243
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
245244
}
246245

246+
.navbar a:focus-visible,
247+
.back-button:focus-visible,
248+
.reset-btn:focus-visible,
249+
.card-links a:focus-visible {
250+
outline: 3px solid rgba(255, 255, 255, 0.85);
251+
outline-offset: 2px;
252+
}
253+
254+
body[class*="province-"] .navbar {
255+
position: sticky;
256+
top: 0;
257+
z-index: 40;
258+
backdrop-filter: blur(6px);
259+
}
260+
261+
body[class*="province-"] .navbar a.is-active {
262+
background-color: rgba(255, 255, 255, 0.3);
263+
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
264+
}
265+
266+
.back-to-top {
267+
position: fixed;
268+
right: 1rem;
269+
bottom: 1rem;
270+
border: 0;
271+
border-radius: 999px;
272+
background: var(--primary-blue);
273+
color: #fff;
274+
font-weight: 700;
275+
padding: 0.65rem 1rem;
276+
box-shadow: var(--shadow);
277+
cursor: pointer;
278+
opacity: 0;
279+
visibility: hidden;
280+
transform: translateY(8px);
281+
transition: var(--transition);
282+
z-index: 60;
283+
}
284+
285+
.back-to-top.visible {
286+
opacity: 1;
287+
visibility: visible;
288+
transform: translateY(0);
289+
}
290+
247291
/* ============================================= */
248292
/* Main Page Styles */
249293
/* ============================================= */
@@ -565,17 +609,15 @@ a {
565609
left: 100%;
566610
}
567611

568-
.province-1-bg { background-color: var(--province-1); }
612+
.province-1-bg { background-color: var(--province-1); color: var(--text-dark);}
569613
.province-2-bg { background-color: var(--province-2); }
570614
.province-3-bg { background-color: var(--province-3); }
571-
.province-4-bg { background-color: var(--province-4); }
615+
.province-4-bg { background-color: var(--province-4); color: var(--text-dark);}
572616
.province-5-bg { background-color: var(--province-5); }
573617
.province-6-bg { background-color: var(--province-6); }
574618
.province-7-bg { background-color: var(--province-7); }
575619

576-
/* ============================================= */
577-
/* UNESCO Section */
578-
/* ============================================= */
620+
579621
.unesco-grid {
580622
display: grid;
581623
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -1016,7 +1058,7 @@ a {
10161058
display: inline-block;
10171059
padding: 1rem 2rem;
10181060
background-color: var(--province-1);
1019-
color: white;
1061+
color: rgb(0, 0, 0);
10201062
border-radius: 30px;
10211063
font-weight: 600;
10221064
transition: var(--transition);

‎explore/css/explore.css‎

Lines changed: 130 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,31 @@
22
padding-top: 1.5rem;
33
}
44

5+
.explore-page .navbar {
6+
position: sticky;
7+
top: 0;
8+
z-index: 40;
9+
backdrop-filter: blur(6px);
10+
}
11+
512
.explore-page .hero-content {
13+
display: grid;
14+
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
15+
gap: 1.5rem;
16+
align-items: stretch;
617
background: linear-gradient(120deg, rgba(255, 255, 255, 0.92), rgba(240, 246, 255, 0.92));
718
border: 1px solid rgba(0, 56, 147, 0.15);
819
border-radius: 16px;
920
box-shadow: var(--shadow);
1021
padding: 2rem;
1122
}
1223

24+
.explore-page .hero-copy {
25+
display: grid;
26+
align-content: start;
27+
gap: 0.75rem;
28+
}
29+
1330
.explore-page .eyebrow {
1431
margin-bottom: 0.4rem;
1532
color: var(--primary-blue);
@@ -21,13 +38,106 @@
2138

2239
.explore-page .hero h2 {
2340
margin: 0;
24-
font-size: clamp(1.7rem, 3vw, 2.5rem);
41+
font-size: clamp(1.9rem, 3.2vw, 2.95rem);
42+
line-height: 1.08;
2543
}
2644

2745
.explore-page .hero-text {
28-
margin-top: 0.65rem;
46+
margin-top: 0.25rem;
2947
color: #4e5f67;
30-
max-width: 68ch;
48+
max-width: 62ch;
49+
font-size: 1.05rem;
50+
}
51+
52+
.explore-page .hero-points {
53+
display: grid;
54+
grid-template-columns: repeat(3, minmax(0, 1fr));
55+
gap: 0.8rem;
56+
margin-top: 0.5rem;
57+
}
58+
59+
.explore-page .hero-point,
60+
.explore-page .hero-mini-card {
61+
background: rgba(255, 255, 255, 0.75);
62+
border: 1px solid rgba(0, 56, 147, 0.12);
63+
border-radius: 12px;
64+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
65+
}
66+
67+
.explore-page .hero-point {
68+
padding: 0.9rem;
69+
display: grid;
70+
gap: 0.25rem;
71+
}
72+
73+
.explore-page .hero-point-label,
74+
.explore-page .hero-mini-card span,
75+
.explore-page .hero-card-kicker {
76+
color: var(--primary-blue);
77+
font-size: 0.76rem;
78+
font-weight: 700;
79+
text-transform: uppercase;
80+
letter-spacing: 0.06em;
81+
}
82+
83+
.explore-page .hero-point-value {
84+
color: #263238;
85+
font-weight: 600;
86+
line-height: 1.4;
87+
}
88+
89+
.explore-page .hero-aside {
90+
display: grid;
91+
gap: 0.8rem;
92+
}
93+
94+
.explore-page .hero-card {
95+
margin: 0;
96+
overflow: hidden;
97+
border-radius: 14px;
98+
border: 1px solid rgba(0, 56, 147, 0.12);
99+
background: #fff;
100+
box-shadow: var(--shadow);
101+
}
102+
103+
.explore-page .hero-card-image {
104+
width: 100%;
105+
aspect-ratio: 16 / 10;
106+
object-fit: cover;
107+
display: block;
108+
}
109+
110+
.explore-page .hero-card figcaption {
111+
padding: 0.95rem 1rem 1rem;
112+
display: grid;
113+
gap: 0.25rem;
114+
}
115+
116+
.explore-page .hero-card strong {
117+
color: #1f2933;
118+
font-size: 1.05rem;
119+
}
120+
121+
.explore-page .hero-card span:last-child {
122+
color: #54616a;
123+
}
124+
125+
.explore-page .hero-mini-grid {
126+
display: grid;
127+
grid-template-columns: repeat(3, minmax(0, 1fr));
128+
gap: 0.7rem;
129+
}
130+
131+
.explore-page .hero-mini-card {
132+
padding: 0.8rem 0.9rem;
133+
display: grid;
134+
gap: 0.15rem;
135+
}
136+
137+
.explore-page .hero-mini-card strong {
138+
color: #1f2933;
139+
font-size: 0.95rem;
140+
line-height: 1.35;
31141
}
32142

33143
.explore-page .control-grid {
@@ -69,6 +179,12 @@
69179
align-self: end;
70180
}
71181

182+
.explore-page .reset-btn:focus-visible,
183+
.explore-page .card-links a:focus-visible {
184+
outline: 3px solid rgba(0, 56, 147, 0.35);
185+
outline-offset: 2px;
186+
}
187+
72188
.explore-page .results-header {
73189
display: flex;
74190
justify-content: space-between;
@@ -185,6 +301,15 @@
185301
}
186302

187303
@media (max-width: 680px) {
304+
.explore-page .hero-content {
305+
grid-template-columns: 1fr;
306+
}
307+
308+
.explore-page .hero-points,
309+
.explore-page .hero-mini-grid {
310+
grid-template-columns: 1fr;
311+
}
312+
188313
.explore-page .control-grid {
189314
grid-template-columns: 1fr 1fr;
190315
}
@@ -193,3 +318,5 @@
193318
padding: 1.2rem;
194319
}
195320
}
321+
322+

‎explore/data/destinations.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"highlights": ["Phewa Lake", "Sarangkot", "World Peace Pagoda"],
2727
"transport": "Tourist bus or 25-minute flight from Kathmandu",
2828
"budgetRange": "NPR 4,500-9,000 per day",
29-
"image": "../assets/images/photo-placeholder.svg",
29+
"image": "../assets/images/phewa-lake.jpg",
3030
"provincePage": "../provinces/province4.html"
3131
},
3232
{
@@ -41,7 +41,7 @@
4141
"highlights": ["Lukla", "Namche Bazaar", "Tengboche"],
4242
"transport": "Flight to Lukla followed by multi-day trek",
4343
"budgetRange": "NPR 8,000-18,000 per day",
44-
"image": "../assets/images/everest.jpg",
44+
"image": "../assets/images/namche.jpg",
4545
"provincePage": "../provinces/province1.html"
4646
},
4747
{
@@ -101,7 +101,7 @@
101101
"highlights": ["Rara National Park", "Lake Loop", "Mountain vistas"],
102102
"transport": "Domestic flight + jeep + short trek",
103103
"budgetRange": "NPR 7,500-15,000 per day",
104-
"image": "../assets/images/photo-placeholder.svg",
104+
"image": "../assets/images/rara-lake.jpg",
105105
"provincePage": "../provinces/province6.html"
106106
},
107107
{
@@ -146,7 +146,7 @@
146146
"highlights": ["Old Bazaar", "Tundikhel", "Sunrise viewpoint"],
147147
"transport": "Road stop between Kathmandu and Pokhara",
148148
"budgetRange": "NPR 4,000-7,500 per day",
149-
"image": "../assets/images/photo-placeholder.svg",
149+
"image": "../assets/images/bandipur-hill.jpg",
150150
"provincePage": "../provinces/province4.html"
151151
},
152152
{
@@ -161,7 +161,7 @@
161161
"highlights": ["Lo Manthang", "Cave monasteries", "Arid valleys"],
162162
"transport": "Flight/road to Jomsom with restricted area permit",
163163
"budgetRange": "NPR 10,000-22,000 per day",
164-
"image": "../assets/images/photo-placeholder.svg",
164+
"image": "../assets/images/lo-manthang.jpg",
165165
"provincePage": "../provinces/province4.html"
166166
},
167167
{
@@ -176,7 +176,7 @@
176176
"highlights": ["Tiger habitat", "River safari", "Birdwatching"],
177177
"transport": "Road/flight to Nepalgunj then transfer",
178178
"budgetRange": "NPR 5,500-11,000 per day",
179-
"image": "../assets/images/photo-placeholder.svg",
179+
"image": "../assets/images/bardiya-national-park.jpg",
180180
"provincePage": "../provinces/province5.html"
181181
},
182182
{
@@ -206,7 +206,7 @@
206206
"highlights": ["Pathibhara shrine", "Cable car route", "Mountain views"],
207207
"transport": "Road to Taplejung then trek/cable car",
208208
"budgetRange": "NPR 4,000-8,500 per day",
209-
"image": "../assets/images/photo-placeholder.svg",
209+
"image": "../assets/images/pathibhara.jpg",
210210
"provincePage": "../provinces/province1.html"
211211
}
212212
]

0 commit comments

Comments
 (0)