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'>The Residence Inn was great. Very central to lots of things but the people working there were what made the stay so enjoybale. <span class='review-span highlight' data-aligned-summaries='0'>Leyla at the front desk was so helpful</span> in guiding us as to what to do and never without a big smile on her face. <span class='review-span highlight' data-aligned-summaries='0'>Franco at the valet was so</span> friendly and <span class='review-span highlight' data-aligned-summaries='0'>helpful</span> and since he was our very frist imprerssion of the Residence Inn it certainly was a good one. The breakfast was great but again the staff was wonderful. <span class='review-span highlight' data-aligned-summaries='0'>Kemika (sp) was so helpful</span> and warm and it certainly made for an enjoyable breakfast time with our family. The rooms were clean and modern. The parking charge was the only downfall at $35 a day. It would be better to include it in the room price.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>I was treated very horribly by the staff at this hotel</span>, I would not recommend it to anyone no matter who you are. Maybe its because they are new they don't know how to treat guests but I can tell you this much they ruined my entire stay and never bothered to do anything about it,until I took action. I am disappointed that a Marriott would act like this, but atleast now you know that they are not capable of effectively dealing with problem resolution during your stay.</div><div class='text-box'>I have stayed at this hotel numerous times since it opened. <span class='review-span highlight' data-aligned-summaries='1'>I love the location</span>, and the kitchenette in the rooms makes any hotel stay so much more comfortable. Of course, one can never complain about complementary breakfast! <span class='review-span highlight' data-aligned-summaries='0'>The staff has always been super friendly and helpful,</span> from the maintenance and housekeeping staff, to the front desk and valet. Every time I go to Toronto I look forward to staying there!</div><div class='text-box'>We stayed in the residence inn over a weekend. After a Long drive from chicago we were assigned a room on a high floor as requested with a lovely view of the cn tower! The <span class='review-span highlight' data-aligned-summaries='1'>hotel is in the perfect spot</span> for exploring the surrounding area and has lots of pubs and restaurants in close vicinity also! Book it, you won't be dissapointed :)</div><div class='text-box'>Excellent location. <span class='review-span highlight' data-aligned-summaries='1'>5 Minutes walking distance to</span> both the Rogers Centre and <span class='review-span highlight' data-aligned-summaries='1'>CN Tower</span>. Also walking distance to all the nightclubs in the entertainment district. Rooms are brand new and kept spotlessly clean. This property is also reasonably priced with the AAA discount. I can't think of a single negative thing to say about this property.</div><div class='text-box'>A thank you party for the clients on our first night, <span class='review-span highlight' data-aligned-summaries='0'>staff very polite</span> and room very clean. <span class='review-span highlight' data-aligned-summaries='1'>Close to the CN tower</span> and King street, well located. The fact that you have a complete kitchen and a very nice breakfast included also are some of the reasons to go back to this hotel.</div><div class='text-box'>Stayed for 3 nights in August. <span class='review-span highlight' data-aligned-summaries='1'>Excellent location next to the CN Tower</span>. Lovely room with full kitchen - handy with young children - excellent deli round the corner which made preparing meals easier etc. - less stressful than taking youngsters to restaurants. Absolutely superb breakfast each morning. Courteous staff throughout.</div><div class='text-box'>I have been staying in Residence Inn for the ast 5 months and its by far the best extended stay hotel I have ever visited. <span class='review-span highlight' data-aligned-summaries='1'>Excelent location</span>,Food and Guest Services</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">While some staff are always so helpful at this hotel, others were not great at fixing any issues that arose.</span> <span id="1" class="summary-sentence">The location is great for visiting the CN Tower, too.</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> | |