Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document Review</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| display: flex; | |
| justify-content: center; /* This will center the .reviews container on the screen */ | |
| align-items: flex-start; | |
| height: 100vh; | |
| margin: 2px; /* Remove default margin */ | |
| } | |
| .highlight { background-color: yellow; | |
| color: black ; /* Dark grey for muted text */ | |
| cursor: pointer;} | |
| .not-hover-highlight { background-color: lightyellow; | |
| color: #606060 ; /* Dark grey for muted text */} | |
| .summary { | |
| width: 30%; | |
| font-size: 1.0rem; | |
| padding: 10px; | |
| height: 40vh; /* Maximum height to a third of the viewport height */ | |
| background-color: #9e9e9e0a; | |
| } | |
| .reviews { | |
| width: 50%; | |
| font-size: 0.7rem; | |
| display: flex; | |
| flex-wrap: wrap; | |
| padding: 10px; | |
| max-height: 40vh; /* Maximum height to a third of the viewport height */ | |
| overflow-y: auto; /* Enable vertical scrolling */ | |
| background-color: #9e9e9e0a; /* Light grey background */ | |
| } | |
| .text-box { | |
| width: calc(100% - 20px); /* Adjust based on padding */ | |
| margin: 10px; | |
| padding: 10px; | |
| background-color: #9e9e9e0a; /* Light grey background */ | |
| color: #606060bf; | |
| border: 2px solid #ddd; /* Cartoonish border */ | |
| border-radius: 20px; /* Rounded corners for cartoonish effect */ | |
| position: relative; | |
| box-shadow: 3px 3px #bbb; /* Soft shadow for depth */ | |
| } | |
| .text-box:before { | |
| content: ''; | |
| position: absolute; | |
| right: 100%; | |
| bottom: 20%; | |
| border-top: 10px solid transparent; | |
| border-bottom: 10px solid transparent; | |
| border-right: 10px solid #ddd; /* Arrow matching the border */ | |
| } | |
| .summary-box { | |
| padding: 10px; | |
| margin: 10px 0; | |
| background-color: #e6e6fa; /* Lavender background for a pleasant look */ | |
| border: 1px solid #ddd; /* Light border for definition */ | |
| border-radius: 5px; /* Slightly rounded corners */ | |
| box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */ | |
| cursor: pointer; | |
| } | |
| h4 { margin-top: 0; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='column reviews'><h2>Reviews</h2><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>The Metropark Kowloon is a good hotel with very good price</span>-quality ratio. Make sure you get a room in the Club floor, as some of the lower levels seem to be a bit outdated. <span class='review-span highlight' data-aligned-summaries='3'>The rooms are clean, comfortable and we couldn't hear any noises at any point so it was perfect for resting.</span> Kowloon wasn't a beautiful area of Hong Kong, going back we would stay somewhere else, particularly if you are not into shopping (and you prefer cultural and walking activities). The staff weren't overly nice but they were helpful and alerted us that we were leaving our phone behind in the room straight away, which was particularly efficient. <span class='review-span highlight' data-aligned-summaries='2'>We found the shuttle bus</span> to Mongkok and the harbour area extremely helpful and convenient and saved us a lot of time an money. Knowing more about Hong Kong now, I would not book a hotel with a swimming pool given the weather doesn't always permit swimming or sunbaking.</div><div class='text-box'>Stayed at this <span class='review-span highlight' data-aligned-summaries='1'>hotel</span> for a week and apart from the <span class='review-span highlight' data-aligned-summaries='1'>location</span>, which <span class='review-span highlight' data-aligned-summaries='1'>was a bit disappointing</span>, I have no real complaints about the hotel. Upon arrival the staff were very helpful and took care of our luggage whilst we went to check in, at which we were quickly dealt with. <span class='review-span highlight' data-aligned-summaries='3'>The double</span> <span class='review-span highlight' data-aligned-summaries='3 4'>room</span> <span class='review-span highlight' data-aligned-summaries='3'>we stayed in was clean</span> and the <span class='review-span highlight' data-aligned-summaries='4'>size was comfortable</span>. We visited the hotel's two restaurants. <span class='review-span highlight' data-aligned-summaries='6'>The food in the restaurant was excellent</span> and varied and is worth trying. <span class='review-span highlight' data-aligned-summaries='6'>The Sip Sip bar (which had a sporty theme) offered a good variety of cocktails</span> and provided an opportunity to catch up with Premiership football matches. One tip I would suggest is that if you ever get a taxi back to the hotel make sure you tell the driver that you want to go to the Metropark Hotel Kowloon, as there is another Metropark Hotel nearby.</div><div class='text-box'>Right from the check-in to check-out, the staff and their service was prompt and excellent. The staff's compliance to our special requests within the reasonable limits is very highly commendable. The rooms were adequate except in the lighting level which we have found even in highly priced hotels - our personal preference is well/brightly lit room. <span class='review-span highlight' data-aligned-summaries='4'>The amenities</span> in the bathroom/toilet <span class='review-span highlight' data-aligned-summaries='4'>was sufficient</span>. <span class='review-span highlight' data-aligned-summaries='5'>The buffet breakfast included in the package was a nice spread and more than adequate to start the day off</span>. <span class='review-span highlight' data-aligned-summaries='7'>Hats off to their free shuttle service</span> to the main points from where we could get the MTR to any place we needed to go. Overall <span class='review-span highlight' data-aligned-summaries='0'>the best hotel at the best price for the one who needs to shower and hit the bed after a full day of sightseeing/shopping</span>.</div><div class='text-box'>The staff were very helpful and <span class='review-span highlight' data-aligned-summaries='5'>the complimentary breakfasts</span> for the period we were there <span class='review-span highlight' data-aligned-summaries='5'>were an unexpected bonus</span>. <span class='review-span highlight' data-aligned-summaries='7'>The Internet connection wasa free as was the</span> <span class='review-span highlight' data-aligned-summaries='2 7'>excellent 30 minute mini-bus service</span>. We did not eat at the hotel except for breakfast prefering to take in the local eateries. <span class='review-span highlight' data-aligned-summaries='1'>We found that Langham Place in Mong Kok was quite good and was only a pleasant walk from the hotel</span> although the hotel bus route took us close. The Ladies Market is in the same location as Langham Place and made for some happy bargaining. All in all, we enjoyed our stay there.</div><div class='text-box'>On our first trip to Hong Kong we stayed here at the Metro Park Kowloon, we only had a few days so spent most of it out of hotel, but <span class='review-span highlight' data-aligned-summaries='4'>the facilities seemed very good</span>, <span class='review-span highlight' data-aligned-summaries='4'>lost available shop/florist/bar/snacks/pool</span>. <span class='review-span highlight' data-aligned-summaries='5'>Buffet</span> was very well presented and <span class='review-span highlight' data-aligned-summaries='5'>had wonderful variety</span>. <span class='review-span highlight' data-aligned-summaries='3'>Rooms well kept, clean</span> and modern. Air conditioning worked well, sometimes a little too well in the public places such as reception/lobbies etc, bit chilly compared to the humdity outside. Interesting Hong Kong traditions such as not using floor 13.i like superstitions!</div><div class='text-box'>Stayed for 3 nights in march and 1 night in april 2012. I stayed in the Club area of the hotel and found the lounge to be very <span class='review-span highlight' data-aligned-summaries='4'>quite and comfortable with coffee/tea and newspapers</span> and a 'happy hour' each evening with drinks and snacks. <span class='review-span highlight' data-aligned-summaries='5'>Buffet breakfast was excellent with a wide range of choices available</span>. Staff were very friendly. <span class='review-span highlight' data-aligned-summaries='1 2'>Hotel is located slightly away from the the CBD but was easily reached by MTR</span>.</div><div class='text-box'>Cannot fault hotel in any way. <span class='review-span highlight' data-aligned-summaries='5'>Breakfast very good, lots of variety</span>. <span class='review-span highlight' data-aligned-summaries='2 7'>Hotel shuttle bus is brilliant</span>. First visit to Hong Kong for my 83yr old mother so we made good use of the shuttle bus. Would definitely stay here again and have no hesitation in recommending this hotel.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Avoid if you can</span>. <span class='review-span highlight' data-aligned-summaries='1'>It's not in a good location</span>, <span class='review-span highlight' data-aligned-summaries='0 3'>it's smelly and a bit scruffy</span>.<span class='review-span highlight' data-aligned-summaries='3'></span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The Metropark Kowloon is very cost effective and ideal for those who need to crash after a hard day's sightseeing and travelling.</span> <span id="1" class="summary-sentence">This hotel isn't in the best location but there were some bargains to be found at a nearby market.</span> <span id="2" class="summary-sentence">There are bus routes however so that is a bonus.</span> <span id="3" class="summary-sentence">The hotel room was spotless and quiet therefore peaceful.</span> <span id="4" class="summary-sentence">All amenities were sufficient enough for all needs and the size was fine.</span> <span id="5" class="summary-sentence">TThe breakfast buffet provided at the hotel had a lot of variety.</span> <span id="6" class="summary-sentence">The food in the restaurant is good and the Sip Sip bar had a wide range of cocktails on offer.</span> <span id="7" class="summary-sentence">There was free internet connection provided here and the 30 minute minibus service was really great and also free.</span></div></div> | |
| <script> | |
| document.querySelectorAll('.summary-sentence').forEach(sentence => { | |
| sentence.addEventListener('mouseenter', function() { | |
| const summaryId = this.getAttribute('id'); | |
| document.querySelectorAll('.review-span').forEach(span => { | |
| if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) { | |
| span.classList.remove('highlight'); | |
| span.classList.add('not-hover-highlight'); | |
| console.log('entered!'); | |
| } | |
| }); | |
| this.classList.add('highlight'); | |
| }); | |
| sentence.addEventListener('mouseleave', function() { | |
| const summaryId = this.getAttribute('id'); | |
| document.querySelectorAll('.review-span').forEach(span => { | |
| if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) { | |
| span.classList.remove('not-hover-highlight'); | |
| span.classList.add('highlight'); | |
| console.log('left!'); | |
| } | |
| this.classList.remove('highlight'); | |
| }); | |
| }); | |
| }); | |
| document.querySelectorAll('.review-span').forEach(span => { | |
| span.addEventListener('mouseenter', function() { | |
| document.querySelectorAll('.review-span').forEach(span => { | |
| if (span !== this) { | |
| span.classList.remove('highlight'); | |
| span.classList.add('not-hover-highlight'); | |
| } | |
| }); | |
| const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' '); | |
| document.querySelectorAll('.summary-sentence').forEach(sentence => { | |
| if (AlignSummariesId.includes(sentence.getAttribute('id'))) { | |
| sentence.classList.add('highlight'); | |
| } | |
| }); | |
| }); | |
| }); | |
| document.querySelectorAll('.review-span').forEach(span => { | |
| span.addEventListener('mouseleave', function() { | |
| const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' '); | |
| document.querySelectorAll('.review-span').forEach(span => { | |
| if (span !== this) { | |
| span.classList.remove('not-hover-highlight'); | |
| span.classList.add('highlight'); | |
| } | |
| }); | |
| document.querySelectorAll('.summary-sentence').forEach(sentence => { | |
| if (AlignSummariesId.includes(sentence.getAttribute('id'))) { | |
| sentence.classList.remove('highlight'); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |