Spaces:
Sleeping
Sleeping
| <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. <span class='review-span highlight' data-aligned-summaries='0'>It was a nice hotel</span>, but didn't blow me away. <span class='review-span highlight' data-aligned-summaries='3'>My room was slightly smaller than average</span> although it was clean and with a slightly more modern decor than a typical Fairmont. My one gripe is with <span class='review-span highlight' data-aligned-summaries='3'>the toilet</span>. It's basically the kind of toilet you'd find in a public bathroom, <span class='review-span highlight' data-aligned-summaries='3'>with a flush that's located under the counter and hard to get to</span>. I do enjoy the Miller Harris citron toiletries, so that is a plus. Overall I'd rather be more centrally located to the main downtown area or closer to Old Montreal. It was fine for business travel and a short trip, but <span class='review-span highlight' data-aligned-summaries='0'>if I was visiting for vacation with the same budget, I'd likely go elsewhere</span>.</div><div class='text-box'>I stayed here whilst attending a conference in the hotel. <span class='review-span highlight' data-aligned-summaries='2'>Arriving from Toronto by train was just about as convenient as it could possibly be since the station is directly beneath the hotel</span>. <span class='review-span highlight' data-aligned-summaries='0'>The room was fine</span>, with a fabulous view up the hill to Mont Royal from the top floor. <span class='review-span highlight' data-aligned-summaries='0'>Service from</span> the check-in staff <span class='review-span highlight' data-aligned-summaries='0'>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 <span class='review-span highlight' data-aligned-summaries='0'>all in all it's a good value and</span> <span class='review-span highlight' data-aligned-summaries='0 2'>well-located</span> <span class='review-span highlight' data-aligned-summaries='2'>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 <span class='review-span highlight' data-aligned-summaries='0'>very nice</span> older, upper end, <span class='review-span highlight' data-aligned-summaries='0'>well maintained hotel</span>. The front desk and concierge staff were very helpful 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. <span class='review-span highlight' data-aligned-summaries='3'>The bathroom was too small</span>. I personally hate any <span class='review-span highlight' data-aligned-summaries='3'>bathroom where my knees block the door from closing when seated</span>. 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='0'>it is a very nice place to stay</span> - <span class='review-span highlight' data-aligned-summaries='0'>somewhat expensive</span> but <span class='review-span highlight' data-aligned-summaries='1'>right in the center</span> of Montreal. We <span class='review-span highlight' data-aligned-summaries='4'>upgraded to a suite which turned out to be very nice</span>. The restuarant serves <span class='review-span highlight' data-aligned-summaries='5'>great breakfasts and dinners</span> - again <span class='review-span highlight' data-aligned-summaries='6'>a bit expensive</span> but very well done (the liver is great!). We visited the Biodome (lots of fun) and wondered around old Montreal area. Montreal has some great shopping areas 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='2'>The location is great for business (right in financial centre) and for leisure (5 min walk to St Catherine Street where the shopping and restaurants are)</span>. 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 next time I stay. <span class='review-span highlight' data-aligned-summaries='0'>Overall it is a good hotel</span> and <span class='review-span highlight' data-aligned-summaries='0'>I would recommand to others</span>.</div><div class='text-box'>I recently stayed a w.end at this Hotel,and <span class='review-span highlight' data-aligned-summaries='0 6'>I could not beleive that at the price they charge</span> they put <span class='review-span highlight' data-aligned-summaries='6'>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</span>!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Was able to</span> <span class='review-span highlight' data-aligned-summaries='0 4'>upgrade to the Gold floor and worth every penny</span>. <span class='review-span highlight' data-aligned-summaries='5'>Had dinner at the Beaver club and enjoyed the excellent service</span>. <span class='review-span highlight' data-aligned-summaries='0'>It made our stay very memorable</span>. The hotel is beautiful in the winter, a magical place.</div><div class='text-box'>I've stayed here a number of times and this visit was no exception. I find <span class='review-span highlight' data-aligned-summaries='0'>the staff helpful</span> and enjoy the history of the hotel. As well I find <span class='review-span highlight' data-aligned-summaries='2'>the</span> <span class='review-span highlight' data-aligned-summaries='0 2'>location very convenient</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a generally good hotel that is slightly expensive but highly recommended for a memorable visit to the area.</span> <span id="1" class="summary-sentence">It is also in close proximity to the city centre, so a lovely place to go for nice walks.</span> <span id="2" class="summary-sentence">This hotel is located in a really convenient area here.</span> <span id="3" class="summary-sentence">The rooms at this hotel are smaller than expected and the toilets are inadequately sized and too small for comfortable use.</span> <span id="4" class="summary-sentence">An upgrade might be an option to consider though as the suites are very nice.</span> <span id="5" class="summary-sentence">The quality of the breakfasts and dinners at this hotel are great.</span> <span id="6" class="summary-sentence">However, they are quite expensive and the coffee in the rooms don't come free as charge like most other hotels.</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> | |