Kigali Hotels - Kigali Convention Centre<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n background: linear-gradient(135deg, #f5f7fa 0%, #e8f0f7 100%);\r\n color: #1a1a1a;\r\n line-height: 1.6;\r\n }\r\n\r\n :root {\r\n --primary-green: #1a6c38;\r\n --primary-blue: #2897f2;\r\n --dark-green: #145029;\r\n --light-green: #22844a;\r\n --dark-blue: #1a7ad1;\r\n --light-blue: #3ca7ff;\r\n --white: #ffffff;\r\n --light-gray: #f8f9fa;\r\n --medium-gray: #e9ecef;\r\n --dark-gray: #495057;\r\n --text-dark: #1a1a1a;\r\n --shadow-sm: 0 2px 6px rgba(26, 108, 56, 0.08);\r\n --shadow-md: 0 3px 10px rgba(26, 108, 56, 0.12);\r\n --shadow-lg: 0 4px 16px rgba(26, 108, 56, 0.15);\r\n }\r\n\r\n \/* Header *\/\r\n .header {\r\n background: linear-gradient(135deg, var(--primary-green) 0%, var(--dark-green) 100%);\r\n color: white;\r\n padding: 1.5rem 0;\r\n box-shadow: 0 4px 12px rgba(26, 108, 56, 0.3);\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 1rem;\r\n }\r\n\r\n .header-content {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n\r\n .logo-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 1.5rem;\r\n }\r\n\r\n .rwanda-logo {\r\n width: 70px;\r\n height: 70px;\r\n position: relative;\r\n filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));\r\n }\r\n\r\n .rwanda-shape {\r\n width: 100%;\r\n height: 100%;\r\n background: var(--primary-blue);\r\n clip-path: polygon(50% 0%, 60% 20%, 75% 25%, 85% 40%, 80% 55%, 70% 70%, 55% 85%, 40% 90%, 25% 75%, 15% 55%, 20% 35%, 35% 20%);\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 2rem;\r\n }\r\n\r\n .header-text h1 {\r\n font-size: 2rem;\r\n font-weight: 300;\r\n letter-spacing: -0.5px;\r\n margin-bottom: 0.25rem;\r\n }\r\n\r\n .header-text h1 .highlight {\r\n color: var(--primary-blue);\r\n font-weight: 700;\r\n }\r\n\r\n .header-text p {\r\n font-size: 0.95rem;\r\n opacity: 0.9;\r\n color: #e8f4ff;\r\n }\r\n\r\n \/* View Toggle *\/\r\n .view-toggle {\r\n display: flex;\r\n gap: 0.75rem;\r\n }\r\n\r\n .view-btn {\r\n padding: 0.6rem 1.2rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n color: white;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .view-btn.active {\r\n background: var(--primary-blue);\r\n border-color: var(--primary-blue);\r\n color: white;\r\n }\r\n\r\n .view-btn:hover:not(.active) {\r\n background: rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n \/* Filters *\/\r\n .filters-section {\r\n background: white;\r\n margin: -1.5rem auto 1.5rem;\r\n border-radius: 12px;\r\n box-shadow: var(--shadow-lg);\r\n padding: 1.25rem;\r\n position: relative;\r\n z-index: 10;\r\n border-top: 3px solid var(--primary-blue);\r\n }\r\n\r\n .filter-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 1rem;\r\n padding-bottom: 0.75rem;\r\n border-bottom: 1px solid var(--medium-gray);\r\n }\r\n\r\n .filter-title {\r\n font-size: 1.2rem;\r\n color: var(--primary-green);\r\n font-weight: 600;\r\n }\r\n\r\n .filter-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 1rem;\r\n }\r\n\r\n .filter-group {\r\n position: relative;\r\n }\r\n\r\n .filter-label {\r\n display: block;\r\n margin-bottom: 0.4rem;\r\n color: var(--primary-green);\r\n font-weight: 600;\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .filter-input {\r\n width: 100%;\r\n padding: 0.7rem 0.85rem;\r\n border: 1px solid var(--medium-gray);\r\n border-radius: 8px;\r\n font-size: 0.95rem;\r\n transition: all 0.3s ease;\r\n background: white;\r\n }\r\n\r\n .filter-input:focus {\r\n outline: none;\r\n border-color: var(--primary-green);\r\n box-shadow: 0 0 0 3px rgba(26, 108, 56, 0.1);\r\n }\r\n\r\n \/* Stats Dashboard *\/\r\n .stats-dashboard {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\r\n gap: 1rem;\r\n margin-top: 1rem;\r\n padding-top: 1rem;\r\n border-top: 1px solid var(--medium-gray);\r\n }\r\n\r\n .stat-card {\r\n background: var(--light-gray);\r\n padding: 1rem;\r\n border-radius: 10px;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.85rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .stat-card:hover {\r\n transform: translateY(-2px);\r\n box-shadow: var(--shadow-sm);\r\n }\r\n\r\n .stat-icon {\r\n width: 42px;\r\n height: 42px;\r\n background: var(--primary-green);\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.3rem;\r\n color: white;\r\n flex-shrink: 0;\r\n }\r\n\r\n .stat-content {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n .stat-value {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n color: var(--primary-green);\r\n }\r\n\r\n .stat-label {\r\n font-size: 0.75rem;\r\n color: var(--dark-gray);\r\n text-transform: uppercase;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n \/* Hotel Cards *\/\r\n .hotels-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\r\n gap: 1.25rem;\r\n margin: 1.5rem 0;\r\n }\r\n\r\n .hotel-card {\r\n background: white;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: var(--shadow-md);\r\n transition: all 0.3s ease;\r\n animation: slideUp 0.5s ease forwards;\r\n opacity: 0;\r\n }\r\n\r\n @keyframes slideUp {\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n }\r\n\r\n .hotel-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 6px 20px rgba(40, 151, 242, 0.3);\r\n }\r\n\r\n \/* Hotel Image *\/\r\n .hotel-image-wrapper {\r\n position: relative;\r\n height: 200px;\r\n overflow: hidden;\r\n background: var(--primary-green);\r\n }\r\n\r\n .hotel-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n .hotel-card:hover .hotel-image {\r\n transform: scale(1.08);\r\n }\r\n\r\n .hotel-badge {\r\n position: absolute;\r\n top: 0.75rem;\r\n right: 0.75rem;\r\n background: var(--primary-blue);\r\n color: white;\r\n padding: 0.4rem 0.85rem;\r\n border-radius: 20px;\r\n font-weight: 700;\r\n font-size: 0.8rem;\r\n box-shadow: var(--shadow-sm);\r\n }\r\n\r\n .distance-badge {\r\n position: absolute;\r\n bottom: 0.75rem;\r\n left: 0.75rem;\r\n background: rgba(255, 255, 255, 0.95);\r\n padding: 0.4rem 0.85rem;\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.4rem;\r\n font-weight: 600;\r\n color: var(--primary-green);\r\n font-size: 0.85rem;\r\n }\r\n\r\n .stars {\r\n display: flex;\r\n gap: 0.2rem;\r\n position: absolute;\r\n top: 0.75rem;\r\n left: 0.75rem;\r\n background: rgba(255, 255, 255, 0.95);\r\n padding: 0.4rem 0.85rem;\r\n border-radius: 8px;\r\n }\r\n\r\n .star {\r\n color: #ffc107;\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* Hotel Content *\/\r\n .hotel-content {\r\n padding: 1.25rem;\r\n }\r\n\r\n .hotel-header {\r\n margin-bottom: 0.85rem;\r\n }\r\n\r\n .hotel-name {\r\n font-size: 1.25rem!important;\r\n color: var(--primary-green);\r\n font-weight: 700;\r\n margin-bottom: 0.25rem;\r\n }\r\n\r\n .hotel-info {\r\n color: var(--dark-gray);\r\n font-size: 0.85rem;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.3rem;\r\n }\r\n\r\n .info-row {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.4rem;\r\n }\r\n\r\n \/* Price Display *\/\r\n .price-section {\r\n background: var(--light-gray);\r\n padding: 0.85rem;\r\n border-radius: 8px;\r\n margin: 0.85rem 0;\r\n }\r\n\r\n .price-range {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .price-label {\r\n font-size: 0.75rem;\r\n color: var(--dark-gray);\r\n text-transform: uppercase;\r\n font-weight: 600;\r\n }\r\n\r\n .price-value {\r\n font-size: 1.35rem;\r\n font-weight: 700;\r\n color: var(--primary-green);\r\n }\r\n\r\n \/* Hotel Footer *\/\r\n .hotel-footer {\r\n padding: 1.25rem;\r\n background: var(--light-gray);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-top: 1px solid var(--medium-gray);\r\n }\r\n\r\n .cta-buttons {\r\n display: flex;\r\n gap: 0.6rem;\r\n width: 100%;\r\n }\r\n\r\n .btn {\r\n padding: 0.7rem 1.2rem;\r\n border-radius: 8px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n border: none;\r\n font-size: 0.85rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.3px;\r\n text-decoration: none;\r\n display: inline-block;\r\n text-align: center;\r\n flex: 1;\r\n }\r\n\r\n .btn-primary {\r\n background: var(--primary-blue);\r\n color: white;\r\n box-shadow: 0 2px 8px rgba(40, 151, 242, 0.3);\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(40, 151, 242, 0.4);\r\n background: var(--dark-blue);\r\n }\r\n\r\n .btn-secondary {\r\n background: white;\r\n color: var(--primary-green);\r\n border: 2px solid var(--primary-green);\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: var(--primary-green);\r\n color: white;\r\n }\r\n\r\n \/* Map View *\/\r\n .map-view {\r\n display: none;\r\n background: white;\r\n border-radius: 12px;\r\n padding: 2rem;\r\n margin: 1.5rem 0;\r\n box-shadow: var(--shadow-lg);\r\n min-height: 400px;\r\n }\r\n\r\n .map-placeholder {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 400px;\r\n font-size: 1.3rem;\r\n color: var(--primary-green);\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 768px) {\r\n .hotels-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .header-text h1 {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .header-content {\r\n flex-direction: column;\r\n text-align: center;\r\n gap: 1rem;\r\n }\r\n\r\n .filter-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .stats-dashboard {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .hotel-footer {\r\n flex-direction: column;\r\n gap: 1rem;\r\n align-items: stretch;\r\n }\r\n\r\n .cta-buttons {\r\n flex-direction: column;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body> \r\n\r\n <main class=\"container\"> \r\n\r\n \r\n <div id=\"gridView\" class=\"hotels-grid\"><\/div>\r\n\r\n \r\n <div id=\"mapView\" class=\"map-view\">\r\n <div class=\"map-placeholder\">\r\n <p>\ud83d\uddfa\ufe0f Interactive Map View Coming Soon<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <script>\r\n const hotelsData = [\r\n {\r\n id: 1,\r\n name: \"Kigali Serena Hotel\",\r\n stars: 5,\r\n distance: 15,\r\n distanceText: \"15 min to KCC\",\r\n priceMin: 280,\r\n priceMax: 690,\r\n image: \"https:\/\/images.trvl-media.com\/lodging\/3000000\/2230000\/2221600\/2221591\/cfd7002e.jpg?impolicy=resizecrop&rw=575&rh=575&ra=fill\",\r\n description: \"Luxury 5-star hotel located adjacent to Kigali Convention Centre with world-class amenities\",\r\n bookingUrl: \"https:\/\/www.serenahotels.com\/kigali\",\r\n amenities: [\"wifi\", \"pool\", \"spa\", \"gym\", \"restaurant\", \"conference\"]\r\n },\r\n {\r\n id: 2,\r\n name: \"Kigali Marriott Hotel\",\r\n stars: 5,\r\n distance: 8,\r\n distanceText: \"8 min to KCC\",\r\n priceMin: 280,\r\n priceMax: 350,\r\n image: \"https:\/\/cache.marriott.com\/content\/dam\/marriott-digital\/mc\/emea\/hws\/k\/kglmc\/en_us\/photo\/unlimited\/assets\/kglmc-exterior-0030.jpg\",\r\n description: \"Modern 5-star luxury hotel with exceptional service and proximity to convention center\",\r\n bookingUrl: \"https:\/\/www.marriott.com\/en-us\/hotels\/kglmc-kigali-marriott-hotel\/\",\r\n amenities: [\"wifi\", \"pool\", \"spa\", \"gym\", \"restaurant\", \"parking\", \"conference\"]\r\n },\r\n {\r\n id: 3,\r\n name: \"Radisson Blu Hotel & Convention Center\",\r\n stars: 5,\r\n distance: 0,\r\n distanceText: \"Walking Distance\",\r\n priceMin: 230,\r\n priceMax: 510,\r\n image: \"https:\/\/images.trvl-media.com\/lodging\/16000000\/15820000\/15815300\/15815296\/a7d5c437.jpg?impolicy=resizecrop&rw=575&rh=575&ra=fill\",\r\n description: \"Premium hotel with its own convention facilities and stunning city views\",\r\n bookingUrl: \"https:\/\/www.radissonhotels.com\/en-us\/hotels\/radisson-blu-convention-kigali\",\r\n amenities: [\"wifi\", \"pool\", \"spa\", \"gym\", \"restaurant\", \"parking\", \"conference\"]\r\n },\r\n {\r\n id: 4,\r\n name: \"Ubumwe Grande Hotel\",\r\n stars: 4,\r\n distance: 6,\r\n distanceText: \"6 min to KCC\",\r\n priceMin: 150,\r\n priceMax: 500,\r\n image: \"https:\/\/image-tc.galaxy.tf\/wijpeg-3mugz5s7ze1o0hcnk89tekscv\/facade.jpg?width=1920\",\r\n description: \"Elegant 4-star hotel offering comfortable accommodations and excellent facilities\",\r\n bookingUrl: \"https:\/\/www.ubumwegrandehotel.com\",\r\n amenities: [\"wifi\", \"pool\", \"gym\", \"restaurant\", \"parking\", \"conference\"]\r\n },\r\n {\r\n id: 5,\r\n name: \"Hotel des Mille Collines\",\r\n stars: 4,\r\n distance: 10,\r\n distanceText: \"10 min to KCC\",\r\n priceMin: 180,\r\n priceMax: 460,\r\n image: \"https:\/\/dynamic-media-cdn.tripadvisor.com\/media\/photo-o\/1b\/bc\/70\/dc\/swimming-pool-facade.jpg?w=900&h=500&s=1\",\r\n description: \"Historic hotel with beautiful pool area and excellent dining options\",\r\n bookingUrl: \"#\",\r\n amenities: [\"wifi\", \"pool\", \"spa\", \"gym\", \"restaurant\", \"parking\"]\r\n },\r\n {\r\n id: 6,\r\n name: \"Park Inn by Radisson\",\r\n stars: 4,\r\n distance: 18,\r\n distanceText: \"18 min to KCC\",\r\n priceMin: 140,\r\n priceMax: 400,\r\n image: \"https:\/\/dynamic-media-cdn.tripadvisor.com\/media\/photo-o\/0f\/c5\/aa\/66\/park-inn-by-radisson.jpg?w=900&h=500&s=1\",\r\n description: \"Contemporary hotel with modern amenities and professional service\",\r\n bookingUrl: \"https:\/\/www.radissonhotels.com\/en-us\/hotels\/park-inn-kigali\",\r\n amenities: [\"wifi\", \"pool\", \"gym\", \"restaurant\", \"parking\", \"conference\"]\r\n },\r\n {\r\n id: 7,\r\n name: \"Galaxy Hotel\",\r\n stars: 4,\r\n distance: 6,\r\n distanceText: \"6 min to KCC\",\r\n priceMin: 150,\r\n priceMax: 280,\r\n image: \"https:\/\/rwanda.tortoisepath.com\/wp-content\/uploads\/2024\/04\/Galaxy-Hotel-Kigali-Rwanda-TortoisePathcom-jpeg.webp\",\r\n description: \"Modern hotel with spacious rooms and great business facilities\",\r\n bookingUrl: \"#\",\r\n amenities: [\"wifi\", \"gym\", \"restaurant\", \"parking\", \"conference\"]\r\n },\r\n {\r\n id: 8,\r\n name: \"2000 Hotel Downtown\",\r\n stars: 3,\r\n distance: 10,\r\n distanceText: \"10 min to KCC\",\r\n priceMin: 120,\r\n priceMax: 250,\r\n image: \"https:\/\/dynamic-media-cdn.tripadvisor.com\/media\/photo-o\/09\/79\/6b\/b6\/2000-hotel.jpg?w=500&h=-1&s=1\",\r\n description: \"Comfortable downtown hotel with good value and central location\",\r\n bookingUrl: \"#\",\r\n amenities: [\"wifi\", \"restaurant\", \"parking\"]\r\n },\r\n {\r\n id: 9,\r\n name: \"St Famille Hotel\",\r\n stars: 3,\r\n distance: 7,\r\n distanceText: \"7 min to KCC\",\r\n priceMin: 100,\r\n priceMax: 180,\r\n image: \"https:\/\/images.trvl-media.com\/lodging\/46000000\/45020000\/45011100\/45011036\/edf225fa.jpg?impolicy=resizecrop&rw=575&rh=575&ra=fill\",\r\n description: \"Cozy hotel offering comfortable stays with friendly service\",\r\n bookingUrl: \"#\",\r\n amenities: [\"wifi\", \"restaurant\", \"parking\"]\r\n },\r\n {\r\n id: 10,\r\n name: \"Isimbi Hotel\",\r\n stars: 3,\r\n distance: 8,\r\n distanceText: \"8 min to KCC\",\r\n priceMin: 30,\r\n priceMax: 40,\r\n image: \"https:\/\/turkanawildlifesafaris.com\/wp-content\/uploads\/2024\/12\/download.jpg\",\r\n description: \"Budget-friendly hotel with clean rooms and basic amenities\",\r\n bookingUrl: \"#\",\r\n amenities: [\"wifi\", \"parking\"]\r\n },\r\n {\r\n id: 11,\r\n name: \"Urban City Blue\",\r\n stars: 3,\r\n distance: 15,\r\n distanceText: \"15 min to KCC\",\r\n priceMin: 160,\r\n priceMax: 250,\r\n image: \"https:\/\/www.citybluehotels.com\/uploads\/image-slider\/8266e4bfeda1bd42d8f9794eb4ea0a131732107592.png\",\r\n description: \"Modern urban hotel with stylish design and comfort\",\r\n bookingUrl: \"#\",\r\n amenities: [\"wifi\", \"gym\", \"restaurant\", \"parking\"]\r\n },\r\n {\r\n id: 12,\r\n name: \"Inside Afrika Boutique Hotel\",\r\n stars: 0,\r\n distance: 15,\r\n distanceText: \"15 min to KCC\",\r\n priceMin: 100,\r\n priceMax: 180,\r\n image: \"https:\/\/q-xx.bstatic.com\/xdata\/images\/hotel\/max500\/448770126.jpg?k=b047a23ae696a02f6ee49515ec84ccc9953d2ac4542668bccafd51dc12d0b446&o=\",\r\n description: \"Charming boutique hotel with personalized service and unique character\",\r\n bookingUrl: \"#\",\r\n amenities: [\"wifi\", \"restaurant\", \"parking\"]\r\n },\r\n {\r\n id: 13,\r\n name: \"One Click Hotel\",\r\n stars: 0,\r\n distance: 10,\r\n distanceText: \"10 min to KCC\",\r\n priceMin: 80,\r\n priceMax: 150,\r\n image: \"https:\/\/1clickhotel.com\/wp-content\/uploads\/2022\/02\/KaySunHotel_3-1024x6641-1.jpg\",\r\n description: \"Convenient hotel with modern facilities and good location\",\r\n bookingUrl: \"#\",\r\n amenities: [\"wifi\", \"restaurant\", \"parking\"]\r\n },\r\n {\r\n id: 14,\r\n name: \"Step Town Hotel\",\r\n stars: 0,\r\n distance: 15,\r\n distanceText: \"15 min to KCC\",\r\n priceMin: 50,\r\n priceMax: 100,\r\n image: \"https:\/\/q-xx.bstatic.com\/xdata\/images\/hotel\/max1024x768\/43826354.jpg?k=f262886d165e2b11b5b45bbb9c8ae3a58419e9f30ba2732dfd6c82d7a238efde&o=\",\r\n description: \"Affordable hotel option with comfortable accommodations\",\r\n bookingUrl: \"#\",\r\n amenities: [\"wifi\", \"parking\"]\r\n },\r\n {\r\n id: 15,\r\n name: \"Beausejour Hotel\",\r\n stars: 3,\r\n distance: 25,\r\n distanceText: \"25 min to KCC\",\r\n priceMin: 100,\r\n priceMax: 120,\r\n image: \"https:\/\/www.explorerwandatours.com\/wp-content\/uploads\/2024\/02\/DSC_0318-1024x680-1.jpg\",\r\n description: \"Peaceful hotel in a quieter area with good amenities\",\r\n bookingUrl: \"#\",\r\n amenities: [\"wifi\", \"restaurant\", \"parking\"]\r\n },\r\n {\r\n id: 16,\r\n name: \"Chez Lando Hotel\",\r\n stars: 3,\r\n distance: 30,\r\n distanceText: \"30 min to KCC\",\r\n priceMin: 90,\r\n priceMax: 110,\r\n image: \"https:\/\/cf.bstatic.com\/xdata\/images\/hotel\/max1024x768\/161172164.jpg?k=a931afdc2358b23f8bfc94973dfeb8450a0280339ecace9d6ab72da95749422a&o=&hp=1\",\r\n description: \"Comfortable hotel with a relaxed atmosphere and good service\",\r\n bookingUrl: \"#\",\r\n amenities: [\"wifi\", \"restaurant\", \"parking\"]\r\n },\r\n {\r\n id: 17,\r\n name: \"Lemigo Hotel\",\r\n stars: 4,\r\n distance: 8,\r\n distanceText: \"8 min walk to KCC\",\r\n priceMin: 120,\r\n priceMax: 280,\r\n image: \"https:\/\/www.lemigohotel.com\/web\/image\/1170-f630218b\/DSC01103.jpg\",\r\n description: \"Stylish hotel with rooftop pool, multiple dining options and panoramic city views\",\r\n bookingUrl: \"https:\/\/www.lemigohotel.com\/\",\r\n amenities: [\"wifi\", \"pool\", \"spa\", \"gym\", \"restaurant\", \"parking\", \"conference\"]\r\n }\r\n ];\r\n\r\n let filteredHotels = [...hotelsData].sort((a, b) => getDistanceValue(a) - getDistanceValue(b));\r\n let currentView = 'grid';\r\n\r\n function formatPrice(price) {\r\n return `$${price}`;\r\n }\r\n\r\n function getDistanceValue(hotel) {\r\n return hotel.distance === 0 ? 0.5 : hotel.distance;\r\n }\r\n\r\n function createHotelCard(hotel, index) {\r\n const priceRange = `${formatPrice(hotel.priceMin)} \u2013 ${formatPrice(hotel.priceMax)}`;\r\n const starsDisplay = hotel.stars > 0 ? '\u2605'.repeat(hotel.stars) : 'Unrated';\r\n \r\n return `\r\n <div class=\"hotel-card\" style=\"animation-delay: ${index * 0.08}s;\">\r\n <div class=\"hotel-image-wrapper\">\r\n <img decoding=\"async\" src=\"${hotel.image}\" alt=\"${hotel.name}\" class=\"hotel-image\" onerror=\"this.src='https:\/\/images.unsplash.com\/photo-1566073771259-6a8506099945?w=800'\">\r\n ${hotel.stars > 0 ? `\r\n <div class=\"stars\">\r\n ${'<span class=\"star\">\u2605<\/span>'.repeat(hotel.stars)}\r\n <\/div>\r\n ` : ''}\r\n <span class=\"hotel-badge\">${hotel.distanceText}<\/span>\r\n <div class=\"distance-badge\">\r\n <span>\ud83d\ude97<\/span>\r\n <span>${hotel.distance === 0 ? 'Next door' : hotel.distance + ' min'}<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"hotel-content\">\r\n <div class=\"hotel-header\">\r\n <h3 class=\"hotel-name\">${hotel.name}<\/h3>\r\n <div class=\"hotel-info\">\r\n <div class=\"info-row\">\r\n <span>\u2b50<\/span>\r\n <span>${hotel.stars > 0 ? hotel.stars + ' Star Hotel' : 'Boutique Hotel'}<\/span>\r\n <\/div>\r\n <div class=\"info-row\">\r\n <span>\ud83d\udccd<\/span>\r\n <span>${hotel.distanceText} to Kigali Convention Centre<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"price-section\">\r\n <div class=\"price-range\">\r\n <span class=\"price-label\">Price Range<\/span>\r\n <span class=\"price-value\">${priceRange}<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <p style=\"color: var(--dark-gray); font-size: 0.85rem; line-height: 1.5;\">\r\n ${hotel.description}\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"hotel-footer\">\r\n <div class=\"cta-buttons\">\r\n ${hotel.bookingUrl && hotel.bookingUrl !== '#' ? \r\n `<a href=\"${hotel.bookingUrl}\" target=\"_blank\" class=\"btn btn-primary\">Book Now<\/a>` : \r\n `<button class=\"btn btn-primary\" onclick=\"alert('Please contact hotel directly for booking')\">Contact Hotel<\/button>`\r\n }\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n function renderHotels() {\r\n const gridView = document.getElementById('gridView');\r\n \r\n gridView.innerHTML = filteredHotels\r\n .map((hotel, index) => createHotelCard(hotel, index))\r\n .join('');\r\n }\r\n\r\n function updateStats() {\r\n const totalHotels = filteredHotels.length;\r\n \r\n const hotelsWithRating = filteredHotels.filter(h => h.stars > 0);\r\n const avgRating = hotelsWithRating.length > 0\r\n ? (hotelsWithRating.reduce((sum, hotel) => sum + hotel.stars, 0) \/ hotelsWithRating.length).toFixed(1)\r\n : '0';\r\n \r\n const avgDistance = filteredHotels.length > 0\r\n ? Math.round(filteredHotels.reduce((sum, hotel) => sum + hotel.distance, 0) \/ filteredHotels.length)\r\n : 0;\r\n \r\n const avgPrice = filteredHotels.length > 0\r\n ? Math.round(filteredHotels.reduce((sum, hotel) => sum + (hotel.priceMin + hotel.priceMax) \/ 2, 0) \/ filteredHotels.length)\r\n : 0;\r\n\r\n document.getElementById('totalHotels').textContent = totalHotels;\r\n document.getElementById('avgRating').textContent = avgRating;\r\n document.getElementById('avgDistance').textContent = avgDistance + ' min';\r\n document.getElementById('avgPrice').textContent = formatPrice(avgPrice);\r\n }\r\n\r\n function toggleView(view) {\r\n currentView = view;\r\n const gridView = document.getElementById('gridView');\r\n const mapView = document.getElementById('mapView');\r\n const viewBtns = document.querySelectorAll('.view-btn');\r\n \r\n viewBtns.forEach(btn => btn.classList.remove('active'));\r\n event.target.closest('.view-btn').classList.add('active');\r\n \r\n if (view === 'grid') {\r\n gridView.style.display = 'grid';\r\n mapView.style.display = 'none';\r\n } else {\r\n gridView.style.display = 'none';\r\n mapView.style.display = 'block';\r\n }\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n renderHotels();\r\n updateStats();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kigali Hotels – Kigali Convention Centre \ud83d\uddfa\ufe0f Interactive Map View Coming Soon<\/p>\n","protected":false},"author":1,"featured_media":988549,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-988534","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/rwandaminingweek.rw\/index.php\/wp-json\/wp\/v2\/pages\/988534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rwandaminingweek.rw\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rwandaminingweek.rw\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rwandaminingweek.rw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rwandaminingweek.rw\/index.php\/wp-json\/wp\/v2\/comments?post=988534"}],"version-history":[{"count":16,"href":"https:\/\/rwandaminingweek.rw\/index.php\/wp-json\/wp\/v2\/pages\/988534\/revisions"}],"predecessor-version":[{"id":988574,"href":"https:\/\/rwandaminingweek.rw\/index.php\/wp-json\/wp\/v2\/pages\/988534\/revisions\/988574"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rwandaminingweek.rw\/index.php\/wp-json\/wp\/v2\/media\/988549"}],"wp:attachment":[{"href":"https:\/\/rwandaminingweek.rw\/index.php\/wp-json\/wp\/v2\/media?parent=988534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}