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='3'>The Vogue is well located, across from Ogilvy (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='5'>I stayed in a very spacious executive suite</span> with bathtub, two TVs (better choice of channels should be available), very comfortable bed, nice bathrooms. Shower pressure was good but shower itself a bit old fashioned even if well maintained. Service a bit uneven but in general very good. Good room service but a bit expensive. Bar at the lobby looks dated. <span class='review-span highlight' data-aligned-summaries='1'>I have to say that overall it does not feel like a 5 star hotel but still quite good. Recommended</span>.</div><div class='text-box'>What a wonderfu, friendly and beautiful botique <span class='review-span highlight' data-aligned-summaries='2 3'>hotel</span> <span class='review-span highlight' data-aligned-summaries='2'>right in the middle of Montreal's shopping district</span> and <span class='review-span highlight' data-aligned-summaries='3'>nearby McGill Univ</span>. The only negative thing to mention about the hotel is the carpeting in our room definitely needs to be replaced! <span class='review-span highlight' data-aligned-summaries='1'>The staff, service, etc</span>. <span class='review-span highlight' data-aligned-summaries='1'>are all excellent</span>. Leave your car at home or <span class='review-span highlight' data-aligned-summaries='7'>if you drive, park it in the garage</span>. You are in walking distance of everything. You will need to take a cab to old Montreal. So much to see and do there too. <span class='review-span highlight' data-aligned-summaries='3'>A very safe city to walk around</span>. 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</span> in Montreal <span class='review-span highlight' data-aligned-summaries='0'>and it did not disappoint</span>. From the lobby to my room itself <span class='review-span highlight' data-aligned-summaries='1'>it is probably the nicest and most</span> <span class='review-span highlight' data-aligned-summaries='1 5'>luxurious hotels</span> <span class='review-span highlight' data-aligned-summaries='1'>I've stayed in</span>. <span class='review-span highlight' data-aligned-summaries='4 5'>The bathroom was a dream 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 room service for dinner and <span class='review-span highlight' data-aligned-summaries='6'>the food was delicious.</span> <span class='review-span highlight' data-aligned-summaries='0 1 2'>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'>What a <span class='review-span highlight' data-aligned-summaries='1'>great hotel in a wonderful location</span>. <span class='review-span highlight' data-aligned-summaries='0'>We have stayed here many times</span> over the past few years <span class='review-span highlight' data-aligned-summaries='0'>and have never been disappointed</span>. The <span class='review-span highlight' data-aligned-summaries='1 5'>rooms are spacious</span> <span class='review-span highlight' data-aligned-summaries='1'>and VERY quiet</span> and <span class='review-span highlight' data-aligned-summaries='4'>the bathroom has a separate walk-in shower</span>. Everything is spotless and <span class='review-span highlight' data-aligned-summaries='6'>the service</span> (<span class='review-span highlight' data-aligned-summaries='6'>from</span> the front desk to <span class='review-span highlight' data-aligned-summaries='6'>room service</span> 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'><span class='review-span highlight' data-aligned-summaries='0 1'>This is a potentially great boutique hotel</span> - great rooms, excellent staff, very comfortable <span class='review-span highlight' data-aligned-summaries='0 1'>BUT I resent having to pay extra for water and internet</span> which other comparable hotels (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. <span class='review-span highlight' data-aligned-summaries='2'>Otherwise it's a terrific hotel in a great location</span> whether you're <span class='review-span highlight' data-aligned-summaries='2'>in Montreal</span> for business or pleasure.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>We just loved our recent stay at the Vogue!</span> <span class='review-span highlight' data-aligned-summaries='0 1'>The service is always very good,</span> <span class='review-span highlight' data-aligned-summaries='1'>the location is great</span> 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='6'>The breakfast (room service) was delicious</span>. We just can't wait to go back!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Great rooms</span>, big marble bathroom, <span class='review-span highlight' data-aligned-summaries='4'>ipod docking</span> and all the other amenties that you would expect. But it was the <span class='review-span highlight' data-aligned-summaries='1'>staff</span> that really <span class='review-span highlight' data-aligned-summaries='1'>made us feel welcome</span> from the moment we arrived. Thanks to everyone for a fun weekend in Montreal.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Great room and</span> very <span class='review-span highlight' data-aligned-summaries='1'>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">This hotel never disappoints during your stay, whether it's for a shopping weekend or something else</span> <span id="1" class="summary-sentence">it's a great place to stay.</span> <span id="2" class="summary-sentence">The hotel is in the centre of Montreal's shopping district.</span> <span id="3" class="summary-sentence">It is close to McGill University as well as Ogilvy in a safe part of the city.</span> <span id="4" class="summary-sentence">There are some really cool and handy features and amenities included in the rooms such as iPod docking station, a pressure shower, DVD player and television and Jacuzzi tub in the bathroom was great.</span> <span id="5" class="summary-sentence">The rooms were spacious and luxurious at the same time.</span> <span id="6" class="summary-sentence">The breakfast provided via room service was really tasty.</span> <span id="7" class="summary-sentence">There was a garage to park your car.</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> | |