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: 30%; | |
| font-size: 1.0rem; | |
| padding: 10px; | |
| height: 40vh; /* 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: 40vh; /* 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='1'>The Vogue is well located, across from</span> Ogilvy (<span class='review-span highlight' data-aligned-summaries='1'>the nicest department store in the city in my opinion</span>) which also means very close to Ste. Catherine, Sherbrooke and Crescent Streets. <span class='review-span highlight' data-aligned-summaries='2'>I stayed in a very</span> <span class='review-span highlight' data-aligned-summaries='2 3'>spacious executive suite</span> <span class='review-span highlight' data-aligned-summaries='2'>with bathtub,</span> <span class='review-span highlight' data-aligned-summaries='2 3'>two TVs</span> <span class='review-span highlight' data-aligned-summaries='2'>(better choice of channels should be available), very comfortable bed, nice bathrooms. Shower pressure</span> was good but <span class='review-span highlight' data-aligned-summaries='6'>shower itself a bit old fashioned even if well maintained</span>. Service a bit uneven but in general very good. <span class='review-span highlight' data-aligned-summaries='4'>Good room service</span> but a bit expensive. Bar at the lobby looks dated. I have to say that overall it does not feel like a 5 star hotel but still quite good. Recommended.</div><div class='text-box'>What a <span class='review-span highlight' data-aligned-summaries='0'>wonderfu, friendly and beautiful botique hotel</span> <span class='review-span highlight' data-aligned-summaries='0 1'>right in the middle of Montreal's shopping district</span> and nearby McGill Univ. The only negative thing to mention about the hotel is the carpeting in our room definitely needs to be replaced! The staff, service, etc. are all excellent. Leave your car at home or <span class='review-span highlight' data-aligned-summaries='5'>if you drive, park it in the garage</span>. <span class='review-span highlight' data-aligned-summaries='1'>You are in walking distance of everything</span>. You will need to take a cab to old Montreal. So much to see and do there too. A very safe city to walk around. Montreal is very very expensive due to the low value of the US dollar, but it was still worth the tri</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>I stayed at Hotel Vogue for a shopping weekend in Montreal and it did not disappoint</span>. From the lobby to my room itself it is probably the nicest and most luxurious hotels I've stayed in. <span class='review-span highlight' data-aligned-summaries='2'>The bathroom was</span> a dream <span class='review-span highlight' data-aligned-summaries='2'>equipped with tv and jacuzzi tub</span>. The service was excellent when the moment I stepped in. Everyone was very friendly and polite. I ordered <span class='review-span highlight' data-aligned-summaries='4'>room service for dinner</span> and the food <span class='review-span highlight' data-aligned-summaries='4'>was delicious</span>. <span class='review-span highlight' data-aligned-summaries='0'>shopping is just steps away</span> which is great. nice to have a dvd in the room too. For a luxury shopping weekend in Montreal or a romantic getaway I would definitely recommend Hotel Vogue.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>What a great hotel</span> in a wonderful location. We have stayed here many times over the past few years and have never been disappointed. <span class='review-span highlight' data-aligned-summaries='2'>The rooms are spacious</span> and VERY quiet and the bathroom has a separate walk-in shower. Everything is spotless and the service (from the front desk to room service to the doorman and valet) is top notch. We return to find the same friendly faces working in this hotel, which definitely says something about the way Loews treats their employees. We can't wait to go back! Superb.</div><div class='text-box'>This is <span class='review-span highlight' data-aligned-summaries='0'>a potentially great boutique hotel</span> - great rooms, excellent staff, very comfortable <span class='review-span highlight' data-aligned-summaries='0'>BUT I resent having to pay extra for water and internet which other comparable hotels</span> (The Nelligan, Le Germain) throw in. It just feels like I'm being nickled and dimed to death. Other posters have made the same comments and I'm hoping that Le Vogue is listening - I'm heading back there tonight. Otherwise it's a terrific hotel in a great location whether you're in Montreal for business or pleasure.</div><div class='text-box'>We just loved our recent stay at the Vogue! The service is always very good, the location is great and they have those small attentions that make a difference (they let a bag in our car with 2 apples and 2 bottles of water for the road). <span class='review-span highlight' data-aligned-summaries='4'>The breakfast (room service) was delicious</span>. We just can't wait to go back!</div><div class='text-box'>Great rooms, big marble bathroom, <span class='review-span highlight' data-aligned-summaries='2'>ipod docking and all the other amenties that you would expect</span>. But it was the staff that really made us feel welcome from the moment we arrived. Thanks to everyone for <span class='review-span highlight' data-aligned-summaries='0'>a fun weekend in Montreal</span>.</div><div class='text-box'>Great room and <span class='review-span highlight' data-aligned-summaries='4'>very good service</span>. Nicely located in Montreal. We've stayed there the last 3 or 4 times we were in Montreal and will visit again.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The Hotel Vogue is the perfect hotel for a shopping weekend in Montreal or a romantic trip with a loved one.</span> <span id="1" class="summary-sentence">This is a hotel located in a safe area within walking distance of pretty much everything you could need.</span> <span id="2" class="summary-sentence">The rooms in the hotel are a good size, with lots of amenities such as iPod docking stations, a television and even a Jacuzzi hot tub.</span> <span id="3" class="summary-sentence">The executive suites are particular spacious with two televisions too.</span> <span id="4" class="summary-sentence">The breakfast food provided by the hotel's room service was very good.</span> <span id="5" class="summary-sentence">You can park your car in the garage if you prefer to drive here.</span> <span id="6" class="summary-sentence">The shower was a little old but the water pressure was great.</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'); | |
| console.log('entered!'); | |
| } | |
| }); | |
| 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'); | |
| console.log('left!'); | |
| } | |
| 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> | |