Merge pull request #1710 from Pallavi-Mukalla/add-viewButton-function…

…ality

Add view button functionality

travelmap.html

@@ -61,7 +61,7 @@ <h5 class="card-title">Taj Mahal, Agra</h5>
                             <p class="card-text">A stunning symbol of love and architectural marvel.</p>
                             <div class="d-flex justify-content-between align-items-center">
                                 <div class="btn-group">
-                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#tajMahalModal">View</button>
                                     <button type="button" class="btn btn-sm btn-outline-secondary">Book</button>
                                 </div>
                                 <small class="text-muted">⭐⭐⭐⭐⭐</small>
@@ -77,7 +77,7 @@ <h5 class="card-title">City Palace, Jaipur</h5>
                             <p class="card-text">Experience the grandeur of Rajasthani architecture.</p>
                             <div class="d-flex justify-content-between align-items-center">
                                 <div class="btn-group">
-                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#cityPalaceModal">View</button>
                                     <button type="button" class="btn btn-sm btn-outline-secondary">Book</button>
                                 </div>
                                 <small class="text-muted">⭐⭐⭐⭐</small>
@@ -93,7 +93,7 @@ <h5 class="card-title">Kerala Backwaters</h5>
                             <p class="card-text">Serene waterways and lush greenery await you.</p>
                             <div class="d-flex justify-content-between align-items-center">
                                 <div class="btn-group">
-                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
+                                    <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#keralaModal">View</button>
                                     <button type="button" class="btn btn-sm btn-outline-secondary">Book</button>
                                 </div>
                                 <small class="text-muted">⭐⭐⭐⭐⭐</small>
@@ -104,6 +104,81 @@ <h5 class="card-title">Kerala Backwaters</h5>
             </div>
         </section>
 
+         <!-- Modal for Taj Mahal -->
+         <div class="modal fade" id="tajMahalModal" tabindex="-1" aria-labelledby="tajMahalModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="tajMahalModalLabel">Taj Mahal, Agra</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <img src="https://images.unsplash.com/photo-1524492412937-b28074a5d7da" class="img-fluid" alt="Taj Mahal">
+                        <p class="mt-3"><strong>Architecture:</strong> The Taj Mahal is a white marble mausoleum built in the Indo-Islamic style, known for its balanced aesthetics, symmetry, and harmonious blending of different architectural styles.</p>
+                        <p><strong>History:</strong> Commissioned by Mughal emperor Shah Jahan between 1631 and 1648, the Taj Mahal serves as a memorial for his beloved wife, Mumtaz Mahal. The name "Taj Mahal" is derived from Persian, where "taj" means crown and "mahal" means palace.</p>
+                        <p><strong>Location:</strong> Situated on the right bank of the Yamuna River in Agra, the Taj Mahal is surrounded by a Mughal garden that covers almost 17 hectares.</p>
+                        <p><strong>Size:</strong> The rectangular complex measures roughly 1,860 feet on the north-south axis and 1,000 feet on the east-west axis, showcasing its grand scale.</p>
+                        <p><strong>Gardens:</strong> In front of the Taj Mahal lies a monumental char bagh garden featuring symmetrical waterways and fountains, enhancing its beauty and serenity.</p>
+                        <p><strong>UNESCO World Heritage Site:</strong> Recognized as a UNESCO World Heritage Site, the Taj Mahal is also one of the Seven Wonders of the World.</p>
+                        <p><strong>Symbol of Love:</strong> Often referred to as a symbol of love, the Taj Mahal embodies ideals of solemnity, harmony, purity, and spirituality.</p>
+                        <p><strong>Cultural Events:</strong> The Taj Mahal hosts several cultural events, including Mudiya Purnima, Lathmar Holi, Ram Barat, Sheetla Fair, Taj Mahotsav, Bateshwar Fair, Kailash Fair, and Shahjahan Urs.</p>
+                        <p><strong>Accessibility:</strong> The site is equipped with an assistive hearing loop and is family-friendly, making it accessible to a wide range of visitors.</p>
+                        <p><strong>Transportation:</strong> Visitors can easily reach the Taj Mahal via taxi, tempo, auto-rickshaw, or cycle rickshaw. Additionally, battery-operated buses, horse-driven tongas, and rickshaws are available in the vicinity.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Modal for City Palace -->
+        <div class="modal fade" id="cityPalaceModal" tabindex="-1" aria-labelledby="cityPalaceModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="cityPalaceModalLabel">City Palace, Jaipur</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <img src="https://images.unsplash.com/photo-1477587458883-47145ed94245" class="img-fluid" alt="City Palace">
+                        <p class="mt-3"><strong>Architecture:</strong> The City Palace is a stunning blend of Mughal and Rajput architectural styles, built by Maharaja Sawai Jai Singh II in the 19th century. The complex is spread out over a series of courtyards, showcasing intricate designs and elegant structures.</p>
+                        <p><strong>Museums:</strong> The palace houses the Maharaja Sawai Man Singh II Museum, which displays an impressive collection of royal costumes, Pashmina shawls, Benaras silk saris, and more. Additionally, the Maharani's Palace features Rajput weaponry, including artifacts dating back to the 15th century.</p>
+                        <p><strong>Royal Family:</strong> The last ruling royal family of Jaipur still resides in a private section of the palace, maintaining a connection to the region's rich history.</p>
+                        <p><strong>Events:</strong> The City Palace serves as a place of ritual and worship, with several temples located within its grounds. On festival days, the image of the Goddess is processed through the streets, attracting numerous visitors and devotees.</p>
+                        <p><strong>Accessibility:</strong> The City Palace is equipped with a wheelchair-accessible entrance and parking lot, ensuring that all visitors can explore this historical site comfortably.</p>
+                        <p><strong>Hours:</strong> The City Palace is open to visitors every day from 9:30 AM to 7:30 PM, allowing ample time for exploration.</p>
+                        <p><strong>Guides:</strong> Many visitors recommend hiring a guide, as they provide valuable insights and history about the palace, enhancing the overall experience.</p>
+                        <p><strong>Location:</strong> Nestled in the heart of Jaipur, the City Palace is easily accessible and serves as a gateway to exploring the rich history of Rajasthan.</p>
+                        <p><strong>Transportation:</strong> Convenient transportation options include auto-rickshaws, taxis, and local buses that connect the palace to other parts of the city.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <!-- Modal for Kerala Backwaters -->
+        <div class="modal fade" id="keralaModal" tabindex="-1" aria-labelledby="keralaModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-lg">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="keralaModalLabel">Kerala Backwaters</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <img src="https://images.unsplash.com/photo-1514222134-b57cbb8ce073" class="img-fluid" alt="Kerala Backwaters">
+                        <p class="mt-3"><strong>Architecture:</strong> The houseboats in the Kerala Backwaters showcase traditional Kettuvallam design, made from local materials such as bamboo and coconut palms, reflecting the region's cultural heritage.</p>
+                        <p><strong>History:</strong> The backwaters have been an integral part of Kerala's history, serving as trade routes and supporting local livelihoods for centuries.</p>
+                        <p><strong>Location:</strong> The backwaters stretch across various districts in Kerala, with popular destinations including Alleppey, Kumarakom, and Kollam, each offering unique experiences.</p>
+                        <p><strong>Size:</strong> The backwaters comprise an extensive network of lagoons, lakes, and canals, covering more than 900 km, providing a diverse ecosystem.</p>
+                        <p><strong>Flora and Fauna:</strong> The region is home to diverse wildlife, including numerous species of birds, fish, and aquatic plants, making it a paradise for nature enthusiasts.</p>
+                        <p><strong>Cultural Events:</strong> Visitors can experience local traditions and festivals, including the famous Onam festival, showcasing boat races and traditional dances.</p>
+                        <p><strong>Symbol of Tranquility:</strong> The Kerala Backwaters are often referred to as a symbol of peace and relaxation, attracting tourists seeking solace in nature.</p>
+                        <p><strong>Accessibility:</strong> The backwaters are accessible by various means, including houseboats, canoes, and motorboats, ensuring a unique way to explore the serene environment.</p>
+                        <p><strong>Transportation:</strong> Local transport options such as taxis, auto-rickshaws, and ferries are available to help visitors navigate the region and reach popular attractions.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
         <section class="mb-5">
             <h2 class="mb-4">Explore India</h2>
             <div id="map" class="mb-4" style="height: 400px; background-color: #e9ecef;"></div>