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'>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='5'>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='4'>Rooms are not huge but of a very high standard</span>.<span class='review-span highlight' data-aligned-summaries='6'>Food quality is also superb and multi-cultural</span>.<span class='review-span highlight' data-aligned-summaries='2'>The only slight negative point was the hotel's location</span>, in that it is in a working class area of Kowloon that <span class='review-span highlight' data-aligned-summaries='2'>is not the most pleasant area to walk around (especially late at night)</span>. The MTR (Tube) is very close and efficient and Hong Kong island is about 15 minutes away.<span class='review-span highlight' data-aligned-summaries='3'>We booked one of the Club Rooms which are high up and give an excellent view</span> of the City. 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'>Is O K <span class='review-span highlight' data-aligned-summaries='3 4'>The room</span> 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. I still found it to <span class='review-span highlight' data-aligned-summaries='0'>be</span> <span class='review-span highlight' data-aligned-summaries='0 3 4'>small for three peoples</span>.<span class='review-span highlight' data-aligned-summaries='0 4'>The advertised blissful bed were</span> <span class='review-span highlight' data-aligned-summaries='0'>no better than any other hotel bed</span>, hence <span class='review-span highlight' data-aligned-summaries='4'>firm and</span> <span class='review-span highlight' data-aligned-summaries='3 4'>not too comfy</span>.The Hotel is O K as a 4 star Hotel with <span class='review-span highlight' data-aligned-summaries='6'>over priced buffet meals</span> and breckfest.The buffet <span class='review-span highlight' data-aligned-summaries='6'>in the morning and dinner times are more or less the same every night</span> 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 <span class='review-span highlight' data-aligned-summaries='1'>the spa facilities make the stay a bit special</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>5 star hotel 2 star attitude</span> Good Hotel to start with, 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='0 3 4 5'>Excellent room</span>,<span class='review-span highlight' data-aligned-summaries='0 5'> good service and though staff's are not highly trained</span> <span class='review-span highlight' data-aligned-summaries='5'>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='0'>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 5'>Staff excellent</span> <span class='review-span highlight' data-aligned-summaries='0'>and the</span> <span class='review-span highlight' data-aligned-summaries='0 1'>spa amazing</span> and not 'over the top' expensive.<span class='review-span highlight' data-aligned-summaries='0 1'>Great couples facilities</span> 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'>Heaven! The hotel was perfect, really well looked after</span> and <span class='review-span highlight' data-aligned-summaries='3 4'>the room was lovely</span> <span class='review-span highlight' data-aligned-summaries='3'>with a good view</span>. Free dvds and internet access were also provided. 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='0'>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='5'>Staff excellent</span> can't do enough for you.<span class='review-span highlight' data-aligned-summaries='3 4'>Lovely room</span> <span class='review-span highlight' data-aligned-summaries='3'>great view</span>.Try <span class='review-span highlight' data-aligned-summaries='1'>the Spa is really lush</span>.<span class='review-span highlight' data-aligned-summaries='0'>Reccommend to all</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Loved the Langham place hotel</span> Attached to Langham Place Hotel is the brand new Langham place shopping mall</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='3'>Upgrade to Club</span> - you know your worth it! A typical Club <span class='review-span highlight' data-aligned-summaries='3'>Room</span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel was a great place to stay and comes highly recommended.</span> <span id="1" class="summary-sentence">The spa was incredible.</span> <span id="2" class="summary-sentence">The area the hotel is located in is not very nice to walk in.</span> <span id="3" class="summary-sentence">Generally a really nice room with great views.</span> <span id="4" class="summary-sentence">The bed was a bit firm but the room itself was lovely.</span> <span id="5" class="summary-sentence">It is clear that some of the staff need more training and a more professional attitude in dealing with problems.</span> <span id="6" class="summary-sentence">The food at the hotel offered a multi cultural selection .</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> | |