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'>We were searching for a place to stay, having never been to Montreal before. After reading several reviews we opted for this hotel and contacted them directly for a booking. At this time they beat the expedia rate and offered us a 10% CAA discount. That took our room rate to $117/night for Thurs - Sun. The hotel is a converted bank and is located in central Old Montreal. <span class='review-span highlight' data-aligned-summaries='2'>There is a metro stop within a couple blocks, which easily gets you some prime shopping and restaurant areas</span>. The staff were very helpful, recommending great restaurants and providing directions. <span class='review-span highlight' data-aligned-summaries='3'>The rooms are not large</span>, but <span class='review-span highlight' data-aligned-summaries='3'>the very high ceilings make the rooms feel roomy</span>. And, the lobby bar has 2 for 1 drinks every evening. We would stay here again.</div><div class='text-box'>This hotel is a real treasure. It is a very short walk from the subway and the restaurants of Old Montreal. The greeting upon our arrival was very warm and we found all staff (Cleaning Lady to Bartender) bent over backwards to make us feel welcome. The lobby is very comfortable with free WiFi. <span class='review-span highlight' data-aligned-summaries='4'>The rooms are elegant</span> with free WiFi and comfortable beds. The bathroom is nice and it and the bedroom were very clean. <span class='review-span highlight' data-aligned-summaries='6'>There was no street noise</span>. We unfortunately had noisy, inconsiderate neighbours the first night however the hotel staff immediately offered to move us. This boutique hotel made our weekend getaway very special.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='2'>Fabulous location</span>, & wonderful service in an extraordinary hotel environment. <span class='review-span highlight' data-aligned-summaries='0 1 6 7'>Lovely warm</span> <span class='review-span highlight' data-aligned-summaries='0 1 5 6 7'>lobby with</span> <span class='review-span highlight' data-aligned-summaries='1 5 6 7'>live bossa-nova music</span> <span class='review-span highlight' data-aligned-summaries='1'>, a nice bar</span> <span class='review-span highlight' data-aligned-summaries='6'>and</span> <span class='review-span highlight' data-aligned-summaries='0 6'>impressive art</span>. <span class='review-span highlight' data-aligned-summaries='4'>The rooms are charming</span>, comfy,& <span class='review-span highlight' data-aligned-summaries='4'>with beautifully design antique furniture</span>. Formerly an 18 century bank , each room is slightly different with some elegant remnants of its bank days:( suite 318 is the old vault. renovated) The art throughout the halls are worthy of any Contemporary or Modern art museum. We look forward to a return visit to Montreal and to the charming L Hotel.</div><div class='text-box'>My Partner and I stayed 7 nights at L'Hotel in Montreal. The service was impeccable, the rooms very comfortable, the staff very attentive and hospitable, and <span class='review-span highlight' data-aligned-summaries='2'>the location was perfect</span>. <span class='review-span highlight' data-aligned-summaries='0'>The artwork contained within the hotel put the Museum of Contemporary Art to shame</span>! If you are traveling to Montreal, this is the hotel to stay at. <span class='review-span highlight' data-aligned-summaries='1 7'>Friday and Saturday evening had a bosso nova group in the bar area.a</span> <span class='review-span highlight' data-aligned-summaries='1 5'>great place to have a glass or two of wine</span> <span class='review-span highlight' data-aligned-summaries='5'>and listen to some great music</span>.</div><div class='text-box'>This is a nice <span class='review-span highlight' data-aligned-summaries='2'>hotel in the Old Port part of Montreal</span>. Rooms are nice, everything is very clean, breakfast (included in some room rates) is rather good, valet parking is convenient (included in some room rates). Service is friendly (wiill help with restaurant bookings, etc). Have stayed there several time and will happily stay there again.</div><div class='text-box'>This was an extremely well-located hotel. We were there during the Montreal Jazz Festival and <span class='review-span highlight' data-aligned-summaries='2'>could walk</span> to it as well as to <span class='review-span highlight' data-aligned-summaries='2'>everywhere in the entire Old Town</span> and it's also <span class='review-span highlight' data-aligned-summaries='2'>close to the subway</span>. The staff was friendly, rooms very nice, and breakfast very good. There really wasn't anything to complain about.</div><div class='text-box'>Great boutique hotel and <span class='review-span highlight' data-aligned-summaries='2'>perfect location in old montreal</span>.Very friendly and helpful staff.Rooms are unique ,comfortable and if you appreciate modern art its like staying in an art gallery.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='3'>The hotel had huge rooms</span> that were very clean and comfortable. The staff was friendly and helpful and their breakfasts were wonderful!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel is decorated with lots of desirable artwork.</span> <span id="1" class="summary-sentence">There is also a lobby that is home to live bossa nova music and a good bar for guests.</span> <span id="2" class="summary-sentence">This hotel is ideally situated to explore the Old Town on foot and the metro stop is easily accessible by walking a few blocks, which can take you to some great shopping locations as well as restaurants.</span> <span id="3" class="summary-sentence">The tall ceilings in the rooms provide a larger feel to an otherwise average-sized room.</span> <span id="4" class="summary-sentence">However the furnishings are elegant and stylish therefore provide quite a charming feel to the room.</span> <span id="5" class="summary-sentence">This hotel is a great place to drink some wine and appreciate the great music they play here.</span> <span id="6" class="summary-sentence">The atmosphere at the hotel was very good as there was no street noise.</span> <span id="7" class="summary-sentence">There was also a bossa nova group that played the hotel on weekend evenings too.</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> | |