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 <span class='review-span highlight' data-aligned-summaries='0'>we opted for this hotel and contacted them directly for a booking</span>. 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. <span class='review-span highlight' data-aligned-summaries='4'>The hotel is a converted bank</span> 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</span> shopping and <span class='review-span highlight' data-aligned-summaries='2'>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 the very high ceilings make the rooms feel roomy. And, <span class='review-span highlight' data-aligned-summaries='6'>the lobby bar has 2 for 1 drinks every evening</span>. We would stay here again.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>This hotel is a real treasure</span>. <span class='review-span highlight' data-aligned-summaries='2'>It is a very short walk from the subway and the restaurants of Old Montreal.</span> 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='5'>The rooms are</span> elegant <span class='review-span highlight' data-aligned-summaries='5'>with free WiFi</span> and comfortable beds. The bathroom is nice and it and the <span class='review-span highlight' data-aligned-summaries='3'>bedroom were very clean</span>. <span class='review-span highlight' data-aligned-summaries='7'>There was no street noise</span>. We unfortunately had noisy, inconsiderate neighbours the first night however the hotel staff immediately offered to move us. <span class='review-span highlight' data-aligned-summaries='0'>This</span> boutique <span class='review-span highlight' data-aligned-summaries='0'>hotel made our weekend getaway very special</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>Fabulous location, & wonderful service in an extraordinary hotel environment</span>. <span class='review-span highlight' data-aligned-summaries='6'>Lovely warm lobby with</span> <span class='review-span highlight' data-aligned-summaries='6 7'>live bossa-nova music , a nice bar</span> <span class='review-span highlight' data-aligned-summaries='6'>and impressive art</span>. <span class='review-span highlight' data-aligned-summaries='3'>The rooms</span> are charming, comfy,& <span class='review-span highlight' data-aligned-summaries='3'>with beautifully design antique furniture</span>. <span class='review-span highlight' data-aligned-summaries='4'>Formerly an 18 century bank , each room is slightly different with</span> <span class='review-span highlight' data-aligned-summaries='3 4'>some elegant remnants of its bank days</span>:( suite 318 is the old vault. renovated) <span class='review-span highlight' data-aligned-summaries='5'>The art throughout the halls are worthy of any Contemporary or Modern art museum</span>. 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 the location was perfect. <span class='review-span highlight' data-aligned-summaries='0'>The artwork contained within the hotel put the Museum of Contemporary Art to shame!</span> <span class='review-span highlight' data-aligned-summaries='0 1'>If</span> <span class='review-span highlight' data-aligned-summaries='1'>you are traveling to Montreal, this is the hotel to stay at.</span> <span class='review-span highlight' data-aligned-summaries='7'>Friday and Saturday evening had a</span> <span class='review-span highlight' data-aligned-summaries='6 7'>bosso nova group in the bar area.a</span> <span class='review-span highlight' data-aligned-summaries='6'>great place to have a glass or two of wine and listen to some great music</span>.</div><div class='text-box'>This is <span class='review-span highlight' data-aligned-summaries='0 1'>a nice hotel</span> <span class='review-span highlight' data-aligned-summaries='1'>in</span> the <span class='review-span highlight' data-aligned-summaries='1'>Old Port part of Montreal</span>. <span class='review-span highlight' data-aligned-summaries='3'>Rooms are</span> nice, everything is very <span class='review-span highlight' data-aligned-summaries='3'>clean</span>, 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 <span class='review-span highlight' data-aligned-summaries='1'>an extremely well-located hotel</span>. <span class='review-span highlight' data-aligned-summaries='2'>We were there during the Montreal Jazz Festival and could walk to it as well as to 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 <span class='review-span highlight' data-aligned-summaries='1'>wasn't anything to complain about</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>Great boutique hotel and perfect location in old montreal</span>.Very friendly and helpful staff.Rooms are unique ,comfortable and <span class='review-span highlight' data-aligned-summaries='5'>if you appreciate modern art its like staying in an art gallery</span>.</div><div class='text-box'>The <span class='review-span highlight' data-aligned-summaries='3'>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">After booking directly with the hotel it was really impressive and made for a very special weekend.</span> <span id="1" class="summary-sentence">This is the place to be.</span> <span id="2" class="summary-sentence">The hotel was situated close to a metro station, allowing travel to the restaurants of Old Montreal and within walking distance of the Montreal Jazz Festival.</span> <span id="3" class="summary-sentence">The rooms are adequately sized but are clean and with elegant furnishings.</span> <span id="4" class="summary-sentence">The rooms retain some history from its previous incarnation as a bank.</span> <span id="5" class="summary-sentence">The rooms have free WiFi available with lovely modern art too.</span> <span id="6" class="summary-sentence">The hotel has a good bar that is ideal for relaxing whilst listening to some live music.</span> <span id="7" class="summary-sentence">The hotel had no street noise at all and on Friday and Saturday evenings there was a music group playing at the bar area.</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> | |