update the explorer button

Co-authored-by: Copilot <copilot@github.com>

Author: birbh

README.md

@@ -4,28 +4,24 @@ Explore Nepal's 7 provinces, 77 districts, and rich cultural heritage with this
 
 ## Features
 
-- **Interactive SVG Map**: Clickable provinces with color-coded regions.
-- **Province Pages**: Detailed info for each province (geography, districts, culture, tourism, essentials, economy).
-- **UNESCO Sites**: Highlights of Nepal's World Heritage Sites.
-- **Cultural Highlights**: Major festivals, cuisines, and traditional dress.
-- **Tourist Explorer Module**: Search and filter destinations by interest, season, budget, and trip length.
+- **Interactive Map**: Clickable color-coded provinces and districts
+- **Province Pages**: Geography, districts, culture, tourism, essentials, and economy info
+- **Tourist Explorer**: Search and filter destinations by interest, season, budget, and trip length
+- **Cultural Content**: UNESCO sites, festivals, cuisines, and traditional dress
+- **Responsive Design**: Optimized for desktop, tablet, and mobile
+- **Navigation**: Floating action button and back-to-top button for easy browsing
 
-- **Responsive Design**: Works on desktop and mobile.
-
-
-
-## How to Use
-
-1. Open `index.html` in your browser.
-2. Click any province to explore detailed pages.
-3. Open `explore/index.html` for the Tourist Explorer planner.
+## Quick Start
 
+1. Open `index.html` in your browser
+2. Click any province to explore detailed information
+3. Use the Tourist Explorer button to search destinations
+4. Navigate with floating action and back-to-top buttons
 
 ## Credits
 
-- Created by **Biraj Bhattarai** 
-- Icons and images: [Pixabay](https://pixabay.com/) and project assets
+Created by Biraj Bhattarai | Icons & images: [Pixabay](https://pixabay.com/) and project assets
 
 ---
 
-Enjoy exploring Nepal!
+Explore Nepal today!

css/style.css

@@ -243,6 +243,24 @@ a {
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
 }
 
+/* Tourist Explorer Button */
+.navbar a[href*="explore"] {
+  background: var(--primary-red);
+  color: white;
+  padding: 0.6rem 1.2rem;
+  border-radius: 6px;
+  font-weight: 600;
+  box-shadow: var(--shadow);
+  position: relative;
+  overflow: hidden;
+}
+
+.navbar a[href*="explore"]:hover, .navbar a[href*="explore"]:focus {
+  background: #B81130;
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-hover);
+}
+
 .navbar a:focus-visible,
 .back-button:focus-visible,
 .reset-btn:focus-visible,
@@ -268,18 +286,19 @@ body[class*="province-"] .navbar a.is-active {
   right: 1rem;
   bottom: 1rem;
   border: 0;
-  border-radius: 999px;
+  border-radius: 6px;
   background: var(--primary-blue);
   color: #fff;
-  font-weight: 700;
-  padding: 0.65rem 1rem;
+  font-weight: 600;
+  padding: 0.6rem 1rem;
+  font-size: 0.9rem;
   box-shadow: var(--shadow);
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transform: translateY(8px);
   transition: var(--transition);
-  z-index: 60;
+  z-index: 70;
 }
 
 .back-to-top.visible {
@@ -288,15 +307,115 @@ body[class*="province-"] .navbar a.is-active {
   transform: translateY(0);
 }
 
-/* ============================================= */
-/* Main Page Styles */
-/* ============================================= */
+.back-to-top:hover, .back-to-top:focus {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-hover);
+}
+
+/* Floating Explorer Button */
+.floating-action-btn {
+  position: fixed;
+  bottom: 5rem;
+  right: 1rem;
+  width: 55px;
+  height: 55px;
+  background: var(--primary-red);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  font-size: 1.6rem;
+  box-shadow: var(--shadow);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  z-index: 60;
+  transition: all 0.3s ease;
+  animation: float-gentle 3s ease-in-out infinite;
+}
+
+.floating-action-btn:hover, .floating-action-btn:focus {
+  transform: translateY(-5px);
+  box-shadow: var(--shadow-hover);
+  animation: none;
+}
+
+@keyframes float-gentle {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@media (max-width: 768px) {
+  .floating-action-btn {
+    width: 50px;
+    height: 50px;
+    font-size: 1.4rem;
+    bottom: 4.5rem;
+    right: 0.8rem;
+  }
+  
+  .back-to-top {
+    bottom: 0.8rem;
+    right: 0.8rem;
+    padding: 0.5rem 0.8rem;
+    font-size: 0.85rem;
+  }
+}
+
 .map-container {
   max-width: 1200px;
   margin: 2rem auto;
   padding: 0 1rem;
 }
 
+/* Featured Explorer Section */
+.featured-explorer {
+  background-color: var(--card-bg);
+  border-radius: 8px;
+  padding: 2rem;
+  margin: 2rem 0;
+  box-shadow: var(--shadow);
+}
+
+.featured-explorer h3 {
+  color: var(--primary-red);
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+}
+
+.featured-explorer p {
+  color: var(--text-dark);
+  max-width: 80ch;
+  margin-bottom: 1.5rem;
+  line-height: 1.6;
+}
+
+.featured-cta {
+  display: inline-block;
+  padding: 0.8rem 1.5rem;
+  background: var(--primary-red);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  cursor: pointer;
+  text-decoration: none;
+  transition: var(--transition);
+  box-shadow: var(--shadow);
+}
+
+.featured-cta:hover, .featured-cta:focus {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-hover);
+  background: #B81130;
+}
+
 .about-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -729,9 +848,8 @@ body[class*="province-"] .navbar a.is-active {
   display: block;
 }
 
-/* ============================================= */
+
 /* Culture Section */
-/* ============================================= */
 .culture-tabs {
   margin-top: 2rem;
 }
@@ -1271,9 +1389,9 @@ body[class*="province-"] .navbar a.is-active {
     padding-top: 0.5rem;
 }
 
-/* ============================================= */
+
 /* Footer Styles */
-/* ============================================= */
+
 .footer {
   background-color: var(--primary-blue);
   color: var(--primary-white);
@@ -1481,3 +1599,5 @@ body[class*="province-"] .navbar a.is-active {
   }
 }
 
+
+

index.html

@@ -80,6 +80,15 @@ <h3>Did You Know?</h3>
             </div>
         </section>
 
+        <!-- Featured Travel Explorer -->
+        <section class="featured-explorer">
+            <div class="container">
+                <h3>Explore Beyond the Map</h3>
+                <p>The Tourist Explorer helps you plan your trip based on season, budget, and travel interests. Complement the interactive map with practical destination recommendations.</p>
+                <a href="explore/index.html" class="featured-cta">Visit Tourist Explorer</a>
+            </div>
+        </section>
+
         <section id="map" class="section map-section">
             <div class="container">
                 <h2>Interactive Map of Nepal</h2>
@@ -316,6 +325,10 @@ <h3>Provinces</h3>
             <p>&copy;  Interactive Nepal Map Project | Designed for Nepal</p>
         </div>
     </footer>
+    
+    
+    <a href="explore/index.html" class="floating-action-btn" title="Plan your Nepal trip - Tourist Explorer" aria-label="Go to Tourist Explorer">🗺️</a>
+    
     <button class="back-to-top" type="button" aria-label="Back to top">Top</button>
     <script>
         (async function loadNepalMap() {

provinces/province1.html

@@ -16,7 +16,10 @@
         }
 
         /* Province-specific colors */
-        .highlight-card h4,
+        .highlight-card h4 {
+            color: #B8860B !important;
+        }
+        
         .tourism-content h3 {
             color: var(--province-1);
         }
@@ -349,6 +352,11 @@ <h3>Key Attractions</h3>
         </div>
     </footer>
     <script src="province-enhancements.js" defer></script>
+    
+    <!-- Floating Explorer Button -->
+    <a href="../explore/index.html" class="floating-action-btn" title="Plan your Nepal trip - Tourist Explorer" aria-label="Go to Tourist Explorer">🗺️</a>
+    
+    <button class="back-to-top" type="button" aria-label="Back to top">Top</button>
 </body>
 </html>
 

provinces/province2.html

@@ -345,5 +345,10 @@ <h3>Key Attractions</h3>
         </div>
     </footer>
     <script src="province-enhancements.js" defer></script>
+    
+    <!-- Floating Explorer Button -->
+    <a href="../explore/index.html" class="floating-action-btn" title="Plan your Nepal trip - Tourist Explorer" aria-label="Go to Tourist Explorer">🗺️</a>
+    
+    <button class="back-to-top" type="button" aria-label="Back to top">Top</button>
 </body>
 </html>

provinces/province3.html

@@ -349,5 +349,10 @@ <h3>Key Attractions</h3>
         </div>
     </footer>
     <script src="province-enhancements.js" defer></script>
+    
+    <!-- Floating Explorer Button -->
+    <a href="../explore/index.html" class="floating-action-btn" title="Plan your Nepal trip - Tourist Explorer" aria-label="Go to Tourist Explorer">🗺️</a>
+    
+    <button class="back-to-top" type="button" aria-label="Back to top">Top</button>
 </body>
 </html>

provinces/province4.html

@@ -16,7 +16,10 @@
         }
 
         /* Province-specific colors */
-        .highlight-card h4,
+        .highlight-card h4 {
+            color: #7CB342 !important; /* Darker green for better readability */
+        }
+        
         .tourism-content h3 {
             color: var(--province-4);
         }
@@ -347,5 +350,10 @@ <h3>Key Attractions</h3>
         </div>
     </footer>
     <script src="province-enhancements.js" defer></script>
+    
+    <!-- Floating Explorer Button -->
+    <a href="../explore/index.html" class="floating-action-btn" title="Plan your Nepal trip - Tourist Explorer" aria-label="Go to Tourist Explorer">🗺️</a>
+    
+    <button class="back-to-top" type="button" aria-label="Back to top">Top</button>
 </body>
 </html>

provinces/province5.html

@@ -348,5 +348,10 @@ <h3>Key Attractions</h3>
         </div>
     </footer>
     <script src="province-enhancements.js" defer></script>
+    
+    <!-- Floating Explorer Button -->
+    <a href="../explore/index.html" class="floating-action-btn" title="Plan your Nepal trip - Tourist Explorer" aria-label="Go to Tourist Explorer">🗺️</a>
+    
+    <button class="back-to-top" type="button" aria-label="Back to top">Top</button>
 </body>
 </html>

provinces/province6.html

@@ -347,5 +347,10 @@ <h3>Key Attractions</h3>
         </div>
     </footer>
     <script src="province-enhancements.js" defer></script>
+    
+    <!-- Floating Explorer Button -->
+    <a href="../explore/index.html" class="floating-action-btn" title="Plan your Nepal trip - Tourist Explorer" aria-label="Go to Tourist Explorer">🗺️</a>
+    
+    <button class="back-to-top" type="button" aria-label="Back to top">Top</button>
 </body>
 </html>

provinces/province7.html

@@ -345,5 +345,10 @@ <h3>Key Attractions</h3>
         </div>
     </footer>
     <script src="province-enhancements.js" defer></script>
+    
+    <!-- Floating Explorer Button -->
+    <a href="../explore/index.html" class="floating-action-btn" title="Plan your Nepal trip - Tourist Explorer" aria-label="Go to Tourist Explorer">🗺️</a>
+    
+    <button class="back-to-top" type="button" aria-label="Back to top">Top</button>
 </body>
 </html>