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 1'>Best Hotel we have stayed in</span>! We stayed at the Langham Place for 5 nights in August and were not disappointed. My wife and I both agreed that is probably the best hotel we have ever stayed in.<span class='review-span highlight' data-aligned-summaries='3'>Hotel staff could not be more helpful</span> and the standards of cleanliness in the rooms and elsewhere was excellent.<span class='review-span highlight' data-aligned-summaries='2'>Rooms are not huge but of a very high standard</span>.<span class='review-span highlight' data-aligned-summaries='4'>Food quality is also superb and multi-cultural</span>.The only slight negative point was the hotel's location, in that it is in a working class area of Kowloon that is not the most pleasant area to walk around (especially late at night). The MTR (Tube) is very close and efficient and Hong Kong island is about 15 minutes away.We booked one of <span class='review-span highlight' data-aligned-summaries='2'>the Club Rooms</span> which are high up and <span class='review-span highlight' data-aligned-summaries='2'>give an excellent view of the City</span>. Also the Club Rooms enable 24hr access the Hotel's Club lounge which entitles you to free breakfast (which is excellent) and free snacks and drinks at any time.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Is O K</span> The room booked were for a family of three, they called them Kowloon Room, which supposed to be a bit bigger than the standard room in the Hotel. <span class='review-span highlight' data-aligned-summaries='2'>I still found it to be small</span> for three peoples.The advertised blissful bed were no better than any other hotel bed, hence firm and not too comfy.The Hotel is O K as a 4 star Hotel with over priced buffet meals and breckfest.The buffet in the morning and dinner times are more or less the same every night and you soon get sick of what's there.I would recommand to sample the local eateria and your money will go a long way.The gym and swimming pool are very good, especially the spa facilities, you will get all the steam room and sauna with in the changing room area and also a hot tub, all in all the spa facilities make the stay a bit special.</div><div class='text-box'>5 star hotel 2 star attitude <span class='review-span highlight' data-aligned-summaries='0'>Good Hotel to start with</span>, but was astonished when they could not accept my visa debit card and instead wanted a credit card.! Debit card means you have the money in bank and not taking a loan like credit card.! Had to keep a 1000$ security deposit instead.<span class='review-span highlight' data-aligned-summaries='2'>Excellent room, good service</span> and though <span class='review-span highlight' data-aligned-summaries='3'>staff's are not highly trained but very much co-operative</span>. My hassle was to pay them all bills at the end of the day throughout my 7 days stay, as due to some strange reasons they were unable to believe that I do not carry a credit card, and probably wanted to make sure that I do not catch my flight back to Dubai after seven days with all bills unpaid.I have stayed in Conrad and Peninsula in HK on my earlier visits, and have never faced such a issue.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>recommend</span> Worth booking into the club floor for the daily cocktail hour,internet access and all day nibbles.<span class='review-span highlight' data-aligned-summaries='0'>Staff excellent</span> and the spa amazing <span class='review-span highlight' data-aligned-summaries='0'>and not 'over the top' expensive</span>.Great couples facilities for massage and treatmentsGreat shopping mall attached and centrally located to other attractions.Beware the taxi drivers who take you the extra long route to destinations</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>Heaven! The hotel was perfect</span>, really well looked after and <span class='review-span highlight' data-aligned-summaries='2'>the room was lovely with a good view</span>. <span class='review-span highlight' data-aligned-summaries='5'>Free dvds</span> and internet access <span class='review-span highlight' data-aligned-summaries='5'>were also provided</span>. The weather was quite mixed so direct access to the mall and cinema next door proved very useful! <span class='review-span highlight' data-aligned-summaries='1'>Slightly expensive but i'd definitely stay again</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Loved The Langham Great hotel</span>.<span class='review-span highlight' data-aligned-summaries='3'>Staff excellent can't do enough for you</span>.<span class='review-span highlight' data-aligned-summaries='0 1'>Lovely room</span> <span class='review-span highlight' data-aligned-summaries='0 1 2'>great view</span>.Try the Spa is really lush.<span class='review-span highlight' data-aligned-summaries='1'>Reccommend to all</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>Loved the Langham place hotel</span> Attached to Langham Place Hotel is the brand new Langham place shopping mall</div><div class='text-box'>Upgrade to Club - you know your worth it! <span class='review-span highlight' data-aligned-summaries='2'>A typical Club Room</span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is such a great hotel</span> <span id="1" class="summary-sentence">it's highly recommended and you won't regret booking again and again.</span> <span id="2" class="summary-sentence">The rooms are a good size and with a good view.</span> <span id="3" class="summary-sentence">Some of the staff were not highly trained or had a bad attitude.</span> <span id="4" class="summary-sentence">The multicultural food was really welcomed as it was of great quality and taste.</span> <span id="5" class="summary-sentence">The hotel provided free DVDs for guests.</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> | |