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'>Best Hotel we have stayed in! <span class='review-span highlight' data-aligned-summaries='0'>We stayed at the Langham Place</span> for 5 nights in August <span class='review-span highlight' data-aligned-summaries='0'>and were not disappointed</span>. My wife and I both agreed that is probably the best hotel we have ever stayed in.Hotel staff could not be more helpful and <span class='review-span highlight' data-aligned-summaries='3'>the standards of cleanliness in the rooms</span> and elsewhere <span class='review-span highlight' data-aligned-summaries='3'>was excellent</span>.<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='5'>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.<span class='review-span highlight' data-aligned-summaries='2'>We booked one of the Club Rooms which are high up and 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'>Is O K The room booked were for a family of three, they called <span class='review-span highlight' data-aligned-summaries='2'>them Kowloon Room, which supposed to be a bit bigger than the standard room in the Hotel. I still found it to be small for three peoples.The advertised blissful</span> <span class='review-span highlight' data-aligned-summaries='2 3'>bed were no better than any other hotel bed, hence firm and not too comfy</span>.The Hotel is O K as a 4 star Hotel with over priced buffet meals and breckfest.<span class='review-span highlight' data-aligned-summaries='5 6'>The buffet</span> <span class='review-span highlight' data-aligned-summaries='6'>in the morning and</span> <span class='review-span highlight' data-aligned-summaries='5 6'>dinner times are more or less the same every night</span> <span class='review-span highlight' data-aligned-summaries='6'>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</span>.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, <span class='review-span highlight' data-aligned-summaries='0'>all in all the spa facilities make the stay a bit special</span>.</div><div class='text-box'>5 star hotel 2 star attitude 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='2'>Excellent room</span>, good service and though <span class='review-span highlight' data-aligned-summaries='4'>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'>recommend <span class='review-span highlight' data-aligned-summaries='7'>Worth booking</span> into the club floor <span class='review-span highlight' data-aligned-summaries='7'>for the daily cocktail hour</span>,internet access <span class='review-span highlight' data-aligned-summaries='7'>and all day nibbles</span>.<span class='review-span highlight' data-aligned-summaries='4'>Staff excellent</span> and the <span class='review-span highlight' data-aligned-summaries='0'>spa amazing</span> and not 'over the top' expensive.<span class='review-span highlight' data-aligned-summaries='0'>Great</span> couples facilities for massage and <span class='review-span highlight' data-aligned-summaries='0'>treatmentsGreat</span> <span class='review-span highlight' data-aligned-summaries='0 1'>shopping mall attached</span> and centrally located to other attractions.Beware the taxi drivers who take you the extra long route to destinations</div><div class='text-box'>Heaven! <span class='review-span highlight' data-aligned-summaries='1'>The hotel</span> was perfect, really well looked after and the <span class='review-span highlight' data-aligned-summaries='2'>room was lovely with a good view</span>. <span class='review-span highlight' data-aligned-summaries='8'>Free dvds</span> and internet <span class='review-span highlight' data-aligned-summaries='8'>access were also provided</span>. <span class='review-span highlight' data-aligned-summaries='1'>The weather was quite mixed so direct access to</span> <span class='review-span highlight' data-aligned-summaries='0 1'>the mall and</span> <span class='review-span highlight' data-aligned-summaries='1'>cinema</span> <span class='review-span highlight' data-aligned-summaries='0 1'>next door proved very useful</span>! Slightly expensive but i'd definitely stay again.</div><div class='text-box'>Loved The Langham Great hotel.<span class='review-span highlight' data-aligned-summaries='0 4'>Staff excellent</span> <span class='review-span highlight' data-aligned-summaries='0'>can't do enough for you</span>.<span class='review-span highlight' data-aligned-summaries='2'>Lovely room great view</span>.<span class='review-span highlight' data-aligned-summaries='0'>Try the Spa is really lush</span>.Reccommend to all.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Loved the Langham place hotel</span> <span class='review-span highlight' data-aligned-summaries='0 1'>Attached</span> <span class='review-span highlight' data-aligned-summaries='1'>to Langham Place Hotel</span> <span class='review-span highlight' data-aligned-summaries='0 1'>is the brand new Langham place shopping mall</span></div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='2'>Upgrade to Club</span> - you know your worth it! A typical Club <span class='review-span highlight' data-aligned-summaries='2'>Room</span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">Langham Place does not disappoint with its new shopping mall and spa.</span> <span id="1" class="summary-sentence">This hotel is attached to the mall and cinema which was great because sometimes this location has unpredictable weather.</span> <span id="2" class="summary-sentence">Medium sized rooms that are to a high standard with excellent views.</span> <span id="3" class="summary-sentence">Rooms are well maintained, with standard beds.</span> <span id="4" class="summary-sentence">Some of the staff was lack training.</span> <span id="5" class="summary-sentence">A buffet style dinner is offered every evening, and the quality of the multi cultural cuisine is generally well liked amongst guests that visit.</span> <span id="6" class="summary-sentence">The food options can get repetitive if staying for a longer trip, however your money goes a long way when eating at this hotel.</span> <span id="7" class="summary-sentence">The daily cocktail hour is also worth a visit, alongside daily nibbles provided by the hotel.</span> <span id="8" class="summary-sentence">The hotel provided free DVDs for guests to watch.</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> | |