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'>I was completely blown away by the whole complex of Marina sands but just let me share my thoughts. Skypark is a must we went up at dusk and watched the city light up - <span class='review-span highlight' data-aligned-summaries='1'>best views of Singapore</span>. Feel very sorry for the residents of this hotel, as they swim in the pool the visitors to the skypark are continually looking through every available area. The foyer of the hotel is a bit like a first class airline checkin area but queues to check in or out - people everywhere just milling around. Foodhall downstairs is overpriced very busy and not very good - ate there twice and wished I hadn't both times. Did live in Singapore for 4 years and there are plenty of excellent hawkers around a shame this wasn't one of them. Without a doubt it is an amazing building and a must see in Singapore.</div><div class='text-box'>Check in was efficient, and the <span class='review-span highlight' data-aligned-summaries='0'>welcome drink was a nice touch</span>. <span class='review-span highlight' data-aligned-summaries='0'>They allowed me to check in slightly early which was great</span> as I was travelling with a small child. Rooms are large and very nice. Loads of facilities, shopping etc in and around the complex, we spent an entire day just exploring the area (ice skating, sampan rides, skypark, infinity pool etc). Check out was also efficient. I had read a lot of bad reviews, but didn't have any negative experiences during my stay here. Absolutely recommend staying here!</div><div class='text-box'>I have read the negative reviews here and had some mixed feelings before I checked in. But I have to admit that there was nothing that was really bad. I used the laundry service and some other Concierge services and they were all satisfying. <span class='review-span highlight' data-aligned-summaries='0'>The staff was also friendly</span>, so all-in-all very ok. The only thing is the location. Marina Bay Sands is a bit from the city and I haven't found a convenience store at the mall just next to the hotel.</div><div class='text-box'>Room was very spacious and decor contemporary. The kids love the Skypark pool and the bathtub in the room. <span class='review-span highlight' data-aligned-summaries='1'>View was good</span>; better to come when the Gardens by the Bay is open. Linked to shopping mall of designer brands. Mall layout is kinda confusing though. Only tried the Fuse lounge for a nightcap, where there was live music. Relaxing. Very conveniently linked to Bayfront MRT station.</div><div class='text-box'>its one of the best hotel i have ever seen. Simply amazingly made. specially the shape massive rooms awesome food classy sky bar <span class='review-span highlight' data-aligned-summaries='1'>at the top floor</span> from there <span class='review-span highlight' data-aligned-summaries='1'>we can see whole Singapore</span> <span class='review-span highlight' data-aligned-summaries='0'>incredible and so polite staff</span> and the shopping area is huge with all possible world best brands and the casino is mind boggling with all games.i wish to visit twice a year.</div><div class='text-box'>We were lucky to score a free up grade to a club room which was a bit noisey from traffic alongside but overall the room was fantastic. <span class='review-span highlight' data-aligned-summaries='0'>Allowed late chck out and a glass of champagne leaving the hotel</span>. Obviously the pool complex is one of the main draw cards for this hotel.</div><div class='text-box'>Big "Vegas Style" hotel with the shopping mall and convention centre attached. I paid a little more for the <span class='review-span highlight' data-aligned-summaries='1'>premium room</span> but it <span class='review-span highlight' data-aligned-summaries='1'>was worth it for the city view</span>. Room was large with big bathroom and separate shower. Always busy, especially the skypark over the hotel which was wonderful</div><div class='text-box'>went there because of the breathtaking rooftop infinity pool which is really special. the hotel itself is modern, huge, bright, <span class='review-span highlight' data-aligned-summaries='0'>has friendly staff but the hotel is</span> too big and therefore <span class='review-span highlight' data-aligned-summaries='0'>much too impersonal.</span> You have to do it once - but there are more personal hotels in Singapore.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The staff at this hotel is very friendly.</span> <span id="1" class="summary-sentence">The hotel has a beautiful view.</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> | |