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: 50%; | |
| font-size: 1.0rem; | |
| padding: 10px; | |
| height: 100vh; /* 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: 100vh; /* 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'>Would come back again and again We have been staying at Island Shangri-la once every year for the past 7 years. They have continued to improve their service year after year. The service is impeccable. <span class='review-span highlight' data-aligned-summaries='4'>The rooms were renovated</span> a couple of years ago <span class='review-span highlight' data-aligned-summaries='4'>and they added a modern twist</span>. But the level of comfort and 'homeyness' has been retained. <span class='review-span highlight' data-aligned-summaries='1'>With the Pacific Place mall right underneath the hotel, it is so convenient</span> to just go down and shop, knowing that even if you carry a lot of bulky items. There is no worry about riding through the mrt or lining up to get a taxi. You can just catch the elevator and go right up to your room. It is <span class='review-span highlight' data-aligned-summaries='0'>always a perfect experience staying at the hotel</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Good, but not unforgettable</span> This hotel is certainly good enough as a business hotel. However, I really will not stay here for a leisure trip. As mentioned in another review, <span class='review-span highlight' data-aligned-summaries='0'>there are just no personal touches</span> or charm. The staff is polite but the service is more mechanical, rather than from the heart. <span class='review-span highlight' data-aligned-summaries='7'>There is a pool</span>, but <span class='review-span highlight' data-aligned-summaries='3'>it offers a view of skyscrapers nearby</span>. It's really quite hard to relax in this evironment.<span class='review-span highlight' data-aligned-summaries='1'>The location is not bad</span> as <span class='review-span highlight' data-aligned-summaries='1 2'>it is connected to the</span> <span class='review-span highlight' data-aligned-summaries='2'>subway</span> via a <span class='review-span highlight' data-aligned-summaries='1'>big shopping mall</span>. However, in the morning, a cab ride can take quite long to reach the central business district due to traffic jam.</div><div class='text-box'>OK, not spectacular. I spent a few nights at the Shangri La in August. I <span class='review-span highlight' data-aligned-summaries='0'>found the overall experience lacking</span>.<span class='review-span highlight' data-aligned-summaries='4'>The rooms are bland, all function with surprisingly little style</span> (surprising given the strong feng shui influence in HK). The <span class='review-span highlight' data-aligned-summaries='0'>rooms are</span> <span class='review-span highlight' data-aligned-summaries='0 4'>also small</span>, even by HK/Toyko standards. <span class='review-span highlight' data-aligned-summaries='5'>Lunch at the cafe was expensive and disappointing</span>. <span class='review-span highlight' data-aligned-summaries='6'>Breakfast was much better</span>, though also very expensive.<span class='review-span highlight' data-aligned-summaries='7'>The pool is really nice, and the gym is good</span>. The staff was OK, but interactions felt rushed and reminded me more of a NYC business hotel than a true 5 star.Don't be afraid to try somewhere else.</div><div class='text-box'>once again, great stay once again, a great stay, <span class='review-span highlight' data-aligned-summaries='3'>upgraded to a harbour view</span> as it was our silver wedding aniversary, flowers, fruit etc as well, i love this hotel so much, such humble and smilley staff considering it is <span class='review-span highlight' data-aligned-summaries='0'>regullaly voted one of the best hotels in the world for everything</span>, fab possition, great rooms, wonderfull staff, do i own it or work for them? no,we just love staying here, well done, shangri- la once again!</div><div class='text-box'>consistently excellent I stay at the island SRL frequently with business, and it isconsistently excellent - staff are always amazing. Isupposethe only picky downside is <span class='review-span highlight' data-aligned-summaries='4'>if you like modern it may be a littlechinzy for you!The</span> service is <span class='review-span highlight' data-aligned-summaries='0'>outstanding.the bar lady in the foyer bar has remembered the drink I have on every visit</span> (as she does with every repeat guest!) and <span class='review-span highlight' data-aligned-summaries='7'>the pool is simply relaxation at its</span> <span class='review-span highlight' data-aligned-summaries='0 7'>best!Highly</span> <span class='review-span highlight' data-aligned-summaries='0'>recommended</span></div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Great</span> <span class='review-span highlight' data-aligned-summaries='0 7'>hotel</span>, deserves its reputation Really <span class='review-span highlight' data-aligned-summaries='1'>great location next to luxury shopping mall</span> and park. We stayed in the lowest category room (deluxe peakview) and had no complaints. Service was excellent, staff couldn't do enough for us and our 2 kids, great welcome. <span class='review-span highlight' data-aligned-summaries='6'>Breakfast amazing</span>, <span class='review-span highlight' data-aligned-summaries='7'>loved the outdoor pool</span> - a great stay.</div><div class='text-box'>Excellent <span class='review-span highlight' data-aligned-summaries='0'>This place is great</span>. The welcome was impressive, <span class='review-span highlight' data-aligned-summaries='1 2'>the location is great</span> <span class='review-span highlight' data-aligned-summaries='2'>above</span> Pacific place and <span class='review-span highlight' data-aligned-summaries='2'>the MTR station</span>.<span class='review-span highlight' data-aligned-summaries='4'>The rooms were spacious</span>, clean and <span class='review-span highlight' data-aligned-summaries='4'>had everything you could ask for</span>. <span class='review-span highlight' data-aligned-summaries='0'>Staff are very polite and efficient</span>.Highly recommended.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>top of the line</span> but you pay for it showReview(3417094, 'full');</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a really great hotel, however, it lacks the personal touch.</span> <span id="1" class="summary-sentence">The location is great because not only is it connected via a big shopping mall</span> <span id="2" class="summary-sentence">but it is super easy to get to the subway station.</span> <span id="3" class="summary-sentence">The views aren't so great because really all you see are skyscrapers.</span> <span id="4" class="summary-sentence">The rooms of the hotel were modern and close to the elevator, but they were also on the smaller side and a little simplistic.</span> <span id="5" class="summary-sentence">The food at the hotel is very expensive and not enjoyable.</span> <span id="6" class="summary-sentence">The breakfast was nicer than the lunch.</span> <span id="7" class="summary-sentence">The hotel has very good exercise facilities such a good gym and a nice pool.</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'); | |
| } | |
| }); | |
| 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'); | |
| } | |
| 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> | |