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'>The Metropark Kowloon is a <span class='review-span highlight' data-aligned-summaries='0'>good hotel with very good price-quality ratio</span>. <span class='review-span highlight' data-aligned-summaries='1'>Make sure you get a room in the Club floor</span>, as some of the lower levels seem to be a bit outdated. <span class='review-span highlight' data-aligned-summaries='0 4'>The rooms</span> <span class='review-span highlight' data-aligned-summaries='4'>are clean</span>, <span class='review-span highlight' data-aligned-summaries='4'>comfortable and</span> <span class='review-span highlight' data-aligned-summaries='0 4'>we couldn't hear any noises at any point so it was perfect for resting</span>. <span class='review-span highlight' data-aligned-summaries='2 3'>Kowloon wasn't a beautiful area of Hong Kong</span>, <span class='review-span highlight' data-aligned-summaries='2'>going back we would stay somewhere else, particularly if you are not into shopping (and you prefer cultural and walking activities)</span>. 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='8'>We found the shuttle bus to Mongkok and the harbour area extremely helpful and convenient and saved us a lot of time an money</span>. 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 hotel for a week and <span class='review-span highlight' data-aligned-summaries='3'>apart from the location, which 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='4'>The double room we stayed in was clean and the size was comfortable</span>. <span class='review-span highlight' data-aligned-summaries='0'>We visited the hotel's two restaurants</span>. <span class='review-span highlight' data-aligned-summaries='7'>The food in the restaurant was excellent</span> and varied and is worth trying. The Sip Sip bar (which had a sporty theme) offered a good variety of cocktails 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. <span class='review-span highlight' data-aligned-summaries='5'>The rooms were adequate except in the lighting level</span> which we have found even in highly priced hotels - <span class='review-span highlight' data-aligned-summaries='5'>our personal preference is well/brightly lit room.</span> <span class='review-span highlight' data-aligned-summaries='4'>The amenities in the bathroom/toilet was sufficient.</span> <span class='review-span highlight' data-aligned-summaries='6'>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='8'>Hats off to their free shuttle service to the main points from where we could get the MTR to any place we needed to go</span>. <span class='review-span highlight' data-aligned-summaries='0'>Overall 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 the complimentary breakfasts for the period we were there were an unexpected bonus. <span class='review-span highlight' data-aligned-summaries='8'>The Internet connection wasa free as was the excellent 30 minute mini-bus service</span>. <span class='review-span highlight' data-aligned-summaries='6'>We did not eat at the hotel except for breakfast</span> prefering to take in the local eateries. We found that <span class='review-span highlight' data-aligned-summaries='3'>Langham Place in Mong Kok was</span> quite good and was <span class='review-span highlight' data-aligned-summaries='3'>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='2'>the facilities seemed very good, lost available shop/florist/bar/snacks/pool.</span> Buffet was very well presented and had wonderful variety. <span class='review-span highlight' data-aligned-summaries='4'>Rooms well kept, clean</span> and modern. <span class='review-span highlight' data-aligned-summaries='4'>Air conditioning worked well</span>, 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 <span class='review-span highlight' data-aligned-summaries='1'>Club area of the hotel</span> and found the lounge to be very <span class='review-span highlight' data-aligned-summaries='1'>quite</span> and <span class='review-span highlight' data-aligned-summaries='1'>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='6'>Buffet breakfast was excellent with a wide range of choices available</span>. Staff were very friendly. <span class='review-span highlight' data-aligned-summaries='3'>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='6'>Breakfast very good, lots of variety</span>. <span class='review-span highlight' data-aligned-summaries='8'>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'>Avoid if you can. <span class='review-span highlight' data-aligned-summaries='3'>It's not in a good location</span>, it's smelly and <span class='review-span highlight' data-aligned-summaries='5'>a bit scruffy</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel has two restaurants, is perfect for resting, is great quality and a good price.</span> <span id="1" class="summary-sentence">The hotel has a Club area which is comfortable and offers tea or coffee and newspapers on offer.</span> <span id="2" class="summary-sentence">Great for sightseeing or shopping but the facilities at the hotel are good too.</span> <span id="3" class="summary-sentence">The location is okay, it is not the nicest of areas but there are some attractions that are walking distance from the hotel.</span> <span id="4" class="summary-sentence">This hotel's rooms are clean and comfortable and include amenities in the bathrooms.</span> <span id="5" class="summary-sentence">The lighting isn't as bright as it could be.</span> <span id="6" class="summary-sentence">The hotel buffet looks very nice and the breakfast was plentiful.</span> <span id="7" class="summary-sentence">Coffee, tea, and drinks were also available and the restaurant food was delicious.</span> <span id="8" class="summary-sentence">The hotel provides many amenities for its guests, including free Wi-Fi and a mini bus shuttle service.</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> | |