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='0'>I'd rather be more centrally located to the main downtown area</span> or closer to Old Montreal. 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 <span class='review-span highlight' data-aligned-summaries='0'>the hotel</span>. Arriving from Toronto by train <span class='review-span highlight' data-aligned-summaries='0'>was just about as convenient as it could possibly be since the station is directly beneath the hotel</span>. The room was fine, with a fabulous view up the hill to Mont Royal from the top floor. Service from the check-in staff was polite and efficient 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='0'>well-located place to stay</span> in Montreal. 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. <span class='review-span highlight' data-aligned-summaries='0'>The front desk and concierge staff were very helpful</span> and the housekeeping staff exceptionally friendly and accomodating. 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 - it is a very nice place to stay - somewhat expensive but right in the center of Montreal. 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!). <span class='review-span highlight' data-aligned-summaries='0'>We visited the Biodome (lots of fun) and wondered around old Montreal area. Montreal has some great shopping areas we found</span>.</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='0'>The location is great for business</span> (right in financial centre) <span class='review-span highlight' data-aligned-summaries='0'>and for leisure</span> (5 min walk to St Catherine Street where the shopping and restaurants are). I <span class='review-span highlight' data-aligned-summaries='0'>had an encounter of very bad service once</span>. <span class='review-span highlight' data-aligned-summaries='0'>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 <span class='review-span highlight' data-aligned-summaries='0'>I could not beleive</span> that at <span class='review-span highlight' data-aligned-summaries='0'>the price they charge they put the coffee maker</span> 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 enjoyed the excellent service. It made our stay very memorable. <span class='review-span highlight' data-aligned-summaries='0'>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='0'>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">The staff at the hotel were incredibly accommodating and the hotel was well located.</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> | |