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'>My stay at the Fairmont Queen Elizabeth didn't exceed my expectations, and also didn't disappoint. It was a nice hotel, but didn't blow me away. My room was slightly smaller than average although it was clean and with a slightly more modern decor than a typical Fairmont. My one gripe is with the toilet. It's basically the kind of toilet you'd find in a public bathroom, with a flush that's located under the counter and hard to get to. I do enjoy the Miller Harris citron toiletries, so that is a plus. Overall <span class='review-span highlight' data-aligned-summaries='1'>I'd rather be more centrally located to the main downtown area or closer to Old Montreal</span>. It was fine for business travel and a short trip, but if I was visiting for vacation with the same budget, I'd likely go elsewhere.</div><div class='text-box'>I stayed here whilst attending a conference in the hotel. Arriving from Toronto by train was just about as convenient as it could possibly be since <span class='review-span highlight' data-aligned-summaries='1'>the station is directly beneath the hotel</span>. The room was fine, with <span class='review-span highlight' data-aligned-summaries='1'>a fabulous view up the hill to Mont Royal</span> from the top floor. Service from the check-in <span class='review-span highlight' data-aligned-summaries='0'>staff was polite and efficient</span> and they rapidly corrected some incorrect charges for using the mini bar which I had not done. The hotel does look a little dated and not much of the glamour from when John and Yoko staged their bed in remains, but all in all it's a good value and <span class='review-span highlight' data-aligned-summaries='1'>well-located place to stay in Montreal</span>. Make sure you join the President's club via the fairmont website before arriving so that you get free wi-fi access.</div><div class='text-box'>This is a very nice older, upper end, well maintained hotel. The <span class='review-span highlight' data-aligned-summaries='0'>front desk and concierge staff were very helpful and the housekeeping staff exceptionally friendly and accomodating</span>. John Lennon and Yoko Ono had a suite on the 16th floor that has a plaque that says "Give Peace A Chance". The bed was comfortable. The bathroom was too small. I personally hate any bathroom where my knees block the door from closing when seated. I continually worried that my toiletries would slide off the small shelf for toiletries into the toilet or jewlery would head south for the sink. I had some allergies which I suspect may have been an a/c ducting issue. Beyond these comments it is a nice hotel with very pleasant and helpful staff.</div><div class='text-box'>We spent a night at the Queen E with our grandchildren - <span class='review-span highlight' data-aligned-summaries='1'>it is a very nice place to stay</span> - somewhat expensive but <span class='review-span highlight' data-aligned-summaries='1'>right in the center of Montreal</span>. We upgraded to a suite which turned out to be very nice. The restuarant serves great breakfasts and dinners - again a bit expensive but very well done (the liver is great!). We visited the Biodome (lots of fun) and wondered around old Montreal area. <span class='review-span highlight' data-aligned-summaries='1'>Montreal has some great shopping areas</span> we found.</div><div class='text-box'>I have been to this hotel countless time as part of frequent business travel. <span class='review-span highlight' data-aligned-summaries='1'>The location is great for business</span> (<span class='review-span highlight' data-aligned-summaries='1'>right in financial centre</span>) <span class='review-span highlight' data-aligned-summaries='1'>and for leisure</span> (<span class='review-span highlight' data-aligned-summaries='1'>5 min walk to St Catherine Street where the shopping and restaurants are</span>). <span class='review-span highlight' data-aligned-summaries='0'>I had an encounter of very bad service once. I took the matter to customer service aftewards and was impressed they listened and offered to upgrade my room</span> next time I stay. Overall it is a good hotel and I would recommand to others.</div><div class='text-box'>I recently stayed a w.end at this Hotel,and I could not beleive that at the price they charge they put the coffee maker and the coffee as part of the mini bar!come on,most hotel,leave the coffee maker and the coffee free of charge in the room!</div><div class='text-box'>Was able to upgrade to the Gold floor and worth every penny. Had dinner at the Beaver club and <span class='review-span highlight' data-aligned-summaries='0'>enjoyed the excellent service</span>. It made our stay very memorable. <span class='review-span highlight' data-aligned-summaries='1'>The hotel is beautiful in the winter, a magical place</span>.</div><div class='text-box'>I've stayed here a number of times and this visit was no exception. <span class='review-span highlight' data-aligned-summaries='0'>I find the staff helpful</span> and enjoy the history of the hotel. As well <span class='review-span highlight' data-aligned-summaries='1'>I find the location very convenient</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">At this hotel you will find the staff are really accommodating and friendly.</span> <span id="1" class="summary-sentence">The hotel is also a well-located place to stay in Montreal with some great things to do nearby.</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> | |