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'>We stayed at L'Hermitage in Aug. 2008, just two months after it opened. <span class='review-span highlight' data-aligned-summaries='0'>It is a very sleek, modern hotel in a great location in downtown Vancouver</span>. <span class='review-span highlight' data-aligned-summaries='4'>Because it was so new, the staff seemed to still be figuring things out</span>. For example, <span class='review-span highlight' data-aligned-summaries='4'>we weren't able to check into our room the first night for over an hour after the guaranteed check-in time.</span> To make up for this, the staff comped a round of drinks for us at their wonderful guest lounge on the 5th floor. The website did not do this place justice . there's a beautiful rooftop pool and hot tub and <span class='review-span highlight' data-aligned-summaries='2'>the rooms are large</span> and <span class='review-span highlight' data-aligned-summaries='2'>luxuorious</span>. <span class='review-span highlight' data-aligned-summaries='5'>Very nice breakfast and afternoon h'or doeurve buffets are included in the price</span>. <span class='review-span highlight' data-aligned-summaries='3'>The staff was very friendly and made sure that all of our needs were met</span>. <span class='review-span highlight' data-aligned-summaries='0'>I would highly recommend this hotel to anyone looking to be pampered in Vancouver</span>!</div><div class='text-box'>We will use this again. We stayed on 3 separate occasions in quick succession. <span class='review-span highlight' data-aligned-summaries='3'>The staff were always helpful, charming and friendly</span>, <span class='review-span highlight' data-aligned-summaries='2'>the rooms elegant</span> and <span class='review-span highlight' data-aligned-summaries='2'>spacious</span> (<span class='review-span highlight' data-aligned-summaries='2'>wonderful bathrooms</span>) and the location was great, particularly if you are flying in (2 blocks down from Vancouver City Centre station on the Canada Line. Don't even think about a cab, on a Sunday when there is no $5 surcharge it cost under $6 for my wife and me to get to the airport. Heathrow and London Underground hang your heads in shame). <span class='review-span highlight' data-aligned-summaries='5'>Treat yourself to the $17.50 breakfast buffet</span>, <span class='review-span highlight' data-aligned-summaries='0'>it must be the best "posh" value in Vancouver</span> !</div><div class='text-box'>We are a family of 5 and had <span class='review-span highlight' data-aligned-summaries='2'>an extremely comfortable</span> 4 night stay in their <span class='review-span highlight' data-aligned-summaries='2'>2 bedroom suite</span>. <span class='review-span highlight' data-aligned-summaries='3'>Kudos to</span> Jean-michel & Hippo, Raymond, Elaisha, Mitch and <span class='review-span highlight' data-aligned-summaries='3'>a super housekeeping team</span> for being so helpful and friendly. We felt most at home and <span class='review-span highlight' data-aligned-summaries='0'>strongly recommend to all who plan to visit Vancouver</span>. <span class='review-span highlight' data-aligned-summaries='1'>Great location with</span> Japadog and Viet-Sub eateries and Sears, Hudson Bay, Holt Renfrew nearby. <span class='review-span highlight' data-aligned-summaries='1'>Easy access to the main attractions</span>. The team deserves a great pat on their backs for their great work attitude. Special thanks to Jean-michel for going out of your way for us.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>This is a really great hotel</span> - near new, small boutique style, <span class='review-span highlight' data-aligned-summaries='2'>great rooms more like small apartments with full kitchens</span>. Fantastic pool and sun deck. Not a gripe, but you should know this hotel does not have room service - wasn't an issue for me, but may be for some travellers. great location - close to everything! <span class='review-span highlight' data-aligned-summaries='6'>Really reasonably priced compared to the other hotel i stayed in</span> during my stay in Vanvouver.</div><div class='text-box'>My stay at L'Hermitage <span class='review-span highlight' data-aligned-summaries='0'>exceeded that of any other I have ever had in Vancouver</span>. I have stayed at many of the better hotels downtown while visiting this great city over the past 15 years. <span class='review-span highlight' data-aligned-summaries='3'>The staff were extraordinarily friendly and helpful</span> without being overbearing. <span class='review-span highlight' data-aligned-summaries='5'>A great experience I will be recommending</span> to friends, family and business colleagues. Thank you L'Hermitage.</div><div class='text-box'>The front desk was fantastic. <span class='review-span highlight' data-aligned-summaries='4'>Check in and check out were a breeze</span> as they let me spend more time with my family and getting to the wedding. It was the perfect end to our wedding night, the room was top notch! Thanks!</div><div class='text-box'>The amenities, <span class='review-span highlight' data-aligned-summaries='5'>breakfast buffet</span> and <span class='review-span highlight' data-aligned-summaries='3'>service at this hotel are excellent</span>. Concierge helped us reserve a table at a <span class='review-span highlight' data-aligned-summaries='1'>great restaurant nearby (Goldfish)</span> and <span class='review-span highlight' data-aligned-summaries='1'>we used the bikes to see Stanley Park</span>.</div><div class='text-box'>If and when I visit Canada again <span class='review-span highlight' data-aligned-summaries='0'>this hotel will be a definite</span>. It is great!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is the best in Vancouver.</span> <span id="1" class="summary-sentence">This hotel provides really good access to main attractions that are nearby.</span> <span id="2" class="summary-sentence">This hotel has lovely large rooms that felt very luxurious.</span> <span id="3" class="summary-sentence">The housekeeping staff who were all excellent.</span> <span id="4" class="summary-sentence">It seemed like some wrinkles were still being ironed out because this is still a new hotel but check-in and check-out were smooth and easy.</span> <span id="5" class="summary-sentence">This hotel provides a really nice breakfast as well as an afternoon buffet that's included in the price, so it's definitely recommended to take advantage of this.</span> <span id="6" class="summary-sentence">The pricing compared to other hotels makes this a really reasonable hotel.</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> | |