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'>I travel to Vancouver regularly on business and always stay at the Sutton Place Hotel. It is truly a top end hotel from the well appointed lobby, <span class='review-span highlight' data-aligned-summaries='0'>excellent restaurant</span>, <span class='review-span highlight' data-aligned-summaries='0'>beautiful guest suites</span> and most important of all 5 star pulse customer service. Every staff member greets you with a pleasant smile and no request is considered too small. I stay in La Grande Residence where <span class='review-span highlight' data-aligned-summaries='4'>the one and two bedroom fully equipped suites make your stay</span>, wether it is only a few days or a couple of weeks, <span class='review-span highlight' data-aligned-summaries='4'>relaxed and stress-free</span>. The staff are so customer oriented that they always greet yu by name when you call the front desk and make you feel welcome on arrival by saying "Welcome back to the Sutton Place". <span class='review-span highlight' data-aligned-summaries='3'>The beds are very comfortable</span>, <span class='review-span highlight' data-aligned-summaries='3'>you get an excellent sleep</span>. <span class='review-span highlight' data-aligned-summaries='2'>The hotel is the preferred location for many</span> Hollywood actors and crew shooting in Vancouver but the hotel staff treat every guest just as if they were an Oscar winner!</div><div class='text-box'>Sutton Place <span class='review-span highlight' data-aligned-summaries='1'>hotel was a great stay</span>! <span class='review-span highlight' data-aligned-summaries='2'>The location at Burrard and Robson makes it super convenient for shopping and eating - lots of great locations around</span>. Service was spot-on from all the staff. <span class='review-span highlight' data-aligned-summaries='0'>The hotel is a bit old</span> but everything was still clean and renovated. <span class='review-span highlight' data-aligned-summaries='4'>Rooms were roomy</span> and <span class='review-span highlight' data-aligned-summaries='3'>beds really comfortable</span>. I only have 2 complaints - <span class='review-span highlight' data-aligned-summaries='0 6'>the parking is outrageous (40$ per night</span>)<span class='review-span highlight' data-aligned-summaries='0'>, and the hotel charges for internet (20$ per day)</span>. I think <span class='review-span highlight' data-aligned-summaries='0 1'>the hotel would be much better value if they would eliminate or lower some of these charges</span>! Can definitely recommend this hotel for anyone wanting to stay in downtown Vancouver!</div><div class='text-box'>I stayed at the Sutton Place Vancouver for a 4-night business trip. During my stay I, unfortunately, <span class='review-span highlight' data-aligned-summaries='6'>came down with a really bad cold, so I used</span> <span class='review-span highlight' data-aligned-summaries='1 6'>Room Service</span>,<span class='review-span highlight' data-aligned-summaries='6'> which</span> <span class='review-span highlight' data-aligned-summaries='1 6'>was excellent</span>.<span class='review-span highlight' data-aligned-summaries='6'> I</span> <span class='review-span highlight' data-aligned-summaries='0 6'>also ate in the dining room (excellent service)</span>.<span class='review-span highlight' data-aligned-summaries='6'> The "gift shop" is really more of a convenience store than a gift shop</span>, but <span class='review-span highlight' data-aligned-summaries='2'>there are plenty of</span> other <span class='review-span highlight' data-aligned-summaries='2'>souvenir-type shops around</span>. <span class='review-span highlight' data-aligned-summaries='2'>Convenient walk to shops, restaurants and the stunningly beautiful Vancouver Convention Centre.</span> <span class='review-span highlight' data-aligned-summaries='1 3'>Very, very comfortable bed</span>.<span class='review-span highlight' data-aligned-summaries='1'> (No back pain, yay</span>!)</div><div class='text-box'>We stayed here for 5 nights in <span class='review-span highlight' data-aligned-summaries='0'>a grand suite</span>. <span class='review-span highlight' data-aligned-summaries='0'>The rooms were lovely</span> - <span class='review-span highlight' data-aligned-summaries='4'>plenty of room for three of us</span>, beautiful views, very quiet. <span class='review-span highlight' data-aligned-summaries='4'>We had wi-fi and continental breakfast included in our rate</span> - the wi-fi worked flawlessly and <span class='review-span highlight' data-aligned-summaries='5'>the morning pastries were delicious</span>. Service in this hotel is top rate - the concierges helped us with car rental, spa and restaurant reservations. <span class='review-span highlight' data-aligned-summaries='2'>And the location couldn't be better. We were able to walk everywhere downtown</span>. We highly recommend Sutton Place.</div><div class='text-box'>This was my third time staying at Sutton Place and love staying here. <span class='review-span highlight' data-aligned-summaries='2'>Great location</span>, <span class='review-span highlight' data-aligned-summaries='3'>clean rooms, comfortable beds</span>, friendly/helpful staff. However, <span class='review-span highlight' data-aligned-summaries='5'>I don't recommend eating breakfast at the restaurant, pretty spendy for what you get. Maybe the buffet is the better way to go</span>. <span class='review-span highlight' data-aligned-summaries='6'>Parking is spendy but hotel usually has a deal that helps cover the cost of parking</span>. But this is my hotel of choice when I come to Vancouver!</div><div class='text-box'>First the service at Sutton Place was great and the staff was very friendly and helpful. <span class='review-span highlight' data-aligned-summaries='2'>The location is also great</span>. Unfortunately the hotel itself is outdated and <span class='review-span highlight' data-aligned-summaries='4'>the</span> <span class='review-span highlight' data-aligned-summaries='0 4'>rooms are in need of an upgrade</span>. <span class='review-span highlight' data-aligned-summaries='0 1'>The price was very reasonable</span>, but it <span class='review-span highlight' data-aligned-summaries='0'>would be nice to see this hotel receive a much needed makeover</span>.</div><div class='text-box'>We were pleased with the location of this Hotel as it is only <span class='review-span highlight' data-aligned-summaries='2'>a 10 minute downhill walk from Canada Place from where the Cruise Ships depart</span>. <span class='review-span highlight' data-aligned-summaries='3'>Our room was clean and comfortable</span>. The Hotel is very <span class='review-span highlight' data-aligned-summaries='2'>close to the main shopping area and across the road we were able to catch the Hop-on Hop-off Trolley Tour</span>.</div><div class='text-box'>It is central to all downtown activities and the staff are friendly,and helpful. <span class='review-span highlight' data-aligned-summaries='0 5'>The restaurant is great</span> <span class='review-span highlight' data-aligned-summaries='5'>with always a little chef's surprise</span>. We also enjoy the pool which has good hours for use. <span class='review-span highlight' data-aligned-summaries='1'>I have stayed</span> with friends and family and for business <span class='review-span highlight' data-aligned-summaries='1'>and never been disappointed</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This reasonably priced hotel may be older and may need a makeover but the restaurant is great and it does have beautiful suites.</span> <span id="1" class="summary-sentence">Some of the charges could stand to be dropped to improve the hotel experience but it is not disappointing here.</span> <span id="2" class="summary-sentence">Perfect location as it is walking distance to all amenities and major attractions in the area.</span> <span id="3" class="summary-sentence">The rooms at this hotel are very clean and the beds in particular are very comfortable; perfect for a good night's sleep.</span> <span id="4" class="summary-sentence">They are also spacious and fully equipped for your stay, making the visit relaxed and stress-free, however they are in need of an upgrade.</span> <span id="5" class="summary-sentence">The food at this hotel is delicious, and is particularly pricey if you choose to eat in the restaurant as opposed to the buffet style breakfast on offer.</span> <span id="6" class="summary-sentence">Great facilities on site at this hotel, and although the parking can be quite expensive, a deal is usually provided to help with the cost.</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> | |