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'><span class='review-span highlight' data-aligned-summaries='0'>My stay at the Fairmont Queen Elizabeth didn't exceed my expectations, and also didn't disappoint</span>. <span class='review-span highlight' data-aligned-summaries='1'>It was a nice hotel</span>, but <span class='review-span highlight' data-aligned-summaries='1'>didn't blow me away</span>. <span class='review-span highlight' data-aligned-summaries='3'>My room</span> was slightly smaller than average although it <span class='review-span highlight' data-aligned-summaries='3'>was clean and with a slightly more modern decor</span> 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. <span class='review-span highlight' data-aligned-summaries='7'>I do enjoy the Miller Harris citron toiletries</span>, <span class='review-span highlight' data-aligned-summaries='7'>so that is a plus</span>. Overall <span class='review-span highlight' data-aligned-summaries='2'>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 <span class='review-span highlight' data-aligned-summaries='6'>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. Arriving from Toronto by train was <span class='review-span highlight' data-aligned-summaries='2'>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='1'>The room was fine</span>, with a fabulous view up the hill to Mont Royal from the top floor. Service from the check-in <span class='review-span highlight' data-aligned-summaries='1'>staff was polite and efficient</span> and they rapidly corrected some incorrect charges for using the mini bar which I had not done. <span class='review-span highlight' data-aligned-summaries='0 1'>The hotel does look a little dated and not much of the glamour from when John and Yoko staged their bed in remains</span>,<span class='review-span highlight' data-aligned-summaries='0'> but all in all</span> <span class='review-span highlight' data-aligned-summaries='0 1 6'>it's a good value</span> <span class='review-span highlight' data-aligned-summaries='0 1'>and well-located place to stay in</span> <span class='review-span highlight' data-aligned-summaries='0'>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 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 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 <span class='review-span highlight' data-aligned-summaries='1'>it is a nice hotel</span> 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 <span class='review-span highlight' data-aligned-summaries='2'>right in the center of Montreal</span>. We upgraded to a suite which <span class='review-span highlight' data-aligned-summaries='0'>turned out to be very nice</span>. <span class='review-span highlight' data-aligned-summaries='4'>The restuarant serves great breakfasts and dinners</span> - again <span class='review-span highlight' data-aligned-summaries='0 5'>a bit expensive</span> <span class='review-span highlight' data-aligned-summaries='0 6'>but very well done</span> (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</span> (right in financial centre) <span class='review-span highlight' data-aligned-summaries='2'>and for leisure</span> (<span class='review-span highlight' data-aligned-summaries='2'>5 min walk to St Catherine Street</span> where the shopping and restaurants are). 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 I would recommand to others.</div><div class='text-box'>I recently stayed a w.end at this Hotel,and I <span class='review-span highlight' data-aligned-summaries='0 5'>could not beleive that at the price they charge</span> 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 <span class='review-span highlight' data-aligned-summaries='5 6'>worth every penny</span>. <span class='review-span highlight' data-aligned-summaries='4'>Had dinner at the Beaver club and enjoyed the excellent service</span>. It made our stay very memorable. <span class='review-span highlight' data-aligned-summaries='0 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. I <span class='review-span highlight' data-aligned-summaries='0'>find the staff helpful and</span> enjoy the history of the hotel. As well I find <span class='review-span highlight' data-aligned-summaries='0 2'>the 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 neither a disappointing hotel or one that will exceed expectations.</span> <span id="1" class="summary-sentence">It can be magical in the winter time and it is definitely a nice hotel, it just won't blow you away.</span> <span id="2" class="summary-sentence">A very convenient location.</span> <span id="3" class="summary-sentence">The bathrooms in the hotel room are quite small but the room itself is clean and modern .</span> <span id="4" class="summary-sentence">The hotel serves very good food at both breakfast and dinner.</span> <span id="5" class="summary-sentence">It is a little expensive</span> <span id="6" class="summary-sentence">but you definitely get what you pay for.</span> <span id="7" class="summary-sentence">The hotel uses Miller Harris citron toiletries which is a nice touch.</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> | |