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'><span class='review-span highlight' data-aligned-summaries='3'>We stayed at L'Hermitage in Aug. 2008, just two months after it opened</span>. It is a very sleek, modern <span class='review-span highlight' data-aligned-summaries='1'>hotel in a great location in downtown Vancouver</span>. Because it was so new, the staff seemed to still be figuring things out. For example, we weren't able to check into our room the first night for over an hour after the guaranteed check-in time. To make up for this, <span class='review-span highlight' data-aligned-summaries='4'>the staff comped a round of drinks for us at their wonderful guest lounge on the 5th floor</span>. <span class='review-span highlight' data-aligned-summaries='6'>The website did not do this place justice</span> . <span class='review-span highlight' data-aligned-summaries='0'>there's a beautiful rooftop pool and hot tub</span> and <span class='review-span highlight' data-aligned-summaries='0 2'>the rooms are large</span> <span class='review-span highlight' data-aligned-summaries='0'>and luxuorious</span>. <span class='review-span highlight' data-aligned-summaries='4'>Very nice breakfast and afternoon h'or doeurve buffets are included in the price</span>. <span class='review-span highlight' data-aligned-summaries='0 3'>The staff</span> <span class='review-span highlight' data-aligned-summaries='3'>was very friendly and</span> <span class='review-span highlight' data-aligned-summaries='0 3'>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'><span class='review-span highlight' data-aligned-summaries='0'>We will use this again</span>. 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='0 2'>the rooms elegant and spacious</span> (wonderful bathrooms) and the <span class='review-span highlight' data-aligned-summaries='1'>location was great</span>, particularly if you are flying in (<span class='review-span highlight' data-aligned-summaries='1'>2 blocks down from Vancouver City Centre station</span> 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='4'>Treat yourself to the $17.50 breakfast buffet</span>, it must be the best "posh" value in Vancouver !</div><div class='text-box'>We are a family of 5 and had an <span class='review-span highlight' data-aligned-summaries='2'>extremely comfortable</span> 4 night stay in their 2 <span class='review-span highlight' data-aligned-summaries='2'>bedroom suite</span>. Kudos to Jean-michel & Hippo, Raymond, Elaisha, Mitch and <span class='review-span highlight' data-aligned-summaries='3'>a super housekeeping team</span> for being <span class='review-span highlight' data-aligned-summaries='3'>so helpful and friendly</span>. <span class='review-span highlight' data-aligned-summaries='0'>We felt most at home</span> and <span class='review-span highlight' data-aligned-summaries='0'>strongly recommend to all who plan to visit Vancouver</span>. Great location with <span class='review-span highlight' data-aligned-summaries='4'>Japadog and Viet-Sub eateries</span> and Sears, Hudson Bay, Holt Renfrew <span class='review-span highlight' data-aligned-summaries='4'>nearby</span>. <span class='review-span highlight' data-aligned-summaries='1'>Easy access to the main attractions</span>. <span class='review-span highlight' data-aligned-summaries='3'>The team deserves a great pat on their backs for their great work attitude</span>. 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</span> <span class='review-span highlight' data-aligned-summaries='0 3'>hotel</span> <span class='review-span highlight' data-aligned-summaries='3'>- near new</span>, small boutique style, great <span class='review-span highlight' data-aligned-summaries='2'>rooms more like small apartments with full kitchens</span>. Fantastic pool and sun deck. Not a gripe, but you should know <span class='review-span highlight' data-aligned-summaries='0'>this hotel does not have room service</span> - wasn't an issue for me, but may be for some travellers. <span class='review-span highlight' data-aligned-summaries='1'>great location - close to everything</span>! <span class='review-span highlight' data-aligned-summaries='5'>Really reasonably priced compared to the other hotel i stayed in during my stay in Vanvouver</span>.</div><div class='text-box'>My stay at <span class='review-span highlight' data-aligned-summaries='0'>L'Hermitage exceeded that of any other I have ever had</span> in Vancouver. 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 without being overbearing</span>. A great experience I will be recommending to friends, family and business colleagues. Thank you L'Hermitage.</div><div class='text-box'>The <span class='review-span highlight' data-aligned-summaries='0 3'>front desk was fantastic</span>. Check in and check out were a breeze as they let me spend more time with my family and getting to the wedding. It was the perfect end to our wedding night, <span class='review-span highlight' data-aligned-summaries='0'>the room was top notch</span>! Thanks!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>The amenities, breakfast buffet and service at this hotel are excellent</span>. <span class='review-span highlight' data-aligned-summaries='3'>Concierge helped us</span> reserve a table at <span class='review-span highlight' data-aligned-summaries='4'>a great restaurant nearby</span> (Goldfish) and we used the bikes to see Stanley Park.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>If and when I visit</span> Canada again <span class='review-span highlight' data-aligned-summaries='0'>this hotel will be a definite</span>. <span class='review-span highlight' data-aligned-summaries='0'>It is great</span>!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is of average quality, but worth the visit.</span> <span id="1" class="summary-sentence">This hotel is central to some of the major attractions in this area.</span> <span id="2" class="summary-sentence">The rooms here are large and very comfortable.</span> <span id="3" class="summary-sentence">The hotel is relatively new and the housekeeping team was friendly and helpful and everyone had a great attitude.</span> <span id="4" class="summary-sentence">The hotel offers a nice breakfast and buffet inclusive in the costs, a lovely guest lounge to enjoy drinks and nearby restaurants.</span> <span id="5" class="summary-sentence">A very well priced hotel in comparison to others in this area.</span> <span id="6" class="summary-sentence">It is even better to look at in person than on it's website.</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> | |