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. Leyla at the front desk was so helpful in guiding us as to what to do and never without a big smile on her face. Franco at the valet was so friendly and helpful and since he was our very frist imprerssion of the Residence Inn it certainly was a good one. <span class='review-span highlight' data-aligned-summaries='4'>The breakfast was great</span> but again the staff was wonderful. Kemika (sp) was so helpful and warm and it certainly made for an enjoyable breakfast time with our family. <span class='review-span highlight' data-aligned-summaries='2 3'>The rooms were clean and modern</span>. 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'>I was treated very horribly by the staff at this hotel, 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='0'>I love the location</span>, and <span class='review-span highlight' data-aligned-summaries='3'>the kitchenette in the rooms makes any hotel stay so much more comfortable</span>. Of course, <span class='review-span highlight' data-aligned-summaries='4'>one can never complain about complementary breakfast</span>! The staff has always been super friendly and helpful, 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 <span class='review-span highlight' data-aligned-summaries='2'>were assigned a room on a high floor</span> as requested <span class='review-span highlight' data-aligned-summaries='2'>with a lovely view of the cn tower</span>! <span class='review-span highlight' data-aligned-summaries='0'>The hotel is in the perfect spot</span> for exploring the surrounding area and <span class='review-span highlight' data-aligned-summaries='1'>has lots of pubs and restaurants in close vicinity also</span>! Book it, you won't be dissapointed :)</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Excellent location</span>. 5 Minutes walking distance to both the Rogers Centre and CN Tower. <span class='review-span highlight' data-aligned-summaries='1'>Also walking distance to all the nightclubs in the entertainment district</span>. <span class='review-span highlight' data-aligned-summaries='3'>Rooms are brand new and kept spotlessly clean</span>. 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, staff very polite and <span class='review-span highlight' data-aligned-summaries='3'>room very clean</span>. <span class='review-span highlight' data-aligned-summaries='0 1'>Close to the CN tower and King street</span>,<span class='review-span highlight' data-aligned-summaries='0'> well located</span>. The fact that <span class='review-span highlight' data-aligned-summaries='3'>you have a complete kitchen</span> and a <span class='review-span highlight' data-aligned-summaries='4'>very nice breakfast included</span> 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='0'>Excellent location next to the CN Tower</span>. <span class='review-span highlight' data-aligned-summaries='2 3'>Lovely room</span> <span class='review-span highlight' data-aligned-summaries='3'>with full kitchen - handy with young children</span> - excellent deli round the corner which made preparing meals easier etc. - less stressful than taking youngsters to restaurants. <span class='review-span highlight' data-aligned-summaries='4'>Absolutely superb breakfast each morning</span>. 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='0'>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">This is a hotel located in an excellent place.</span> <span id="1" class="summary-sentence">It is perfect to walk to the entertainment district as well as pubs and restaurants.</span> <span id="2" class="summary-sentence">Rooms on the higher floors are excellent as they can provide a great view.</span> <span id="3" class="summary-sentence">The room itself is of a lovely quality and even had a full kitchen, which is incredibly useful.</span> <span id="4" class="summary-sentence">The hotel's complimentary breakfast was really good.</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> | |