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'>We chose the Hilton Bonaventure for our recent stay in Montreal based on the glowing recommendation of a frequent flying family member. <span class='review-span highlight' data-aligned-summaries='1'>The downtown location proved to be a great</span> starting point for our city explorations. The room was clean, well laid out, and comfortable. The staff was courteous and al spoke flawless English. One evening we decided to sample some local ice wine we had purchased, the hotel quickly brought us glasses, opened, and then served us our wine. <span class='review-span highlight' data-aligned-summaries='4'>The breakfast was delicious, and the selection at the bar was above average</span>. The rooftop garden was beautiful, although we didnat have time to walk though it in its entirety. Over all I give this hotel my full recommendation.</div><div class='text-box'>Hilton Bonaventure definitely provides bang for your buck. The layout for this hotel is very unique. It has many "wings" and each wing has access to its own private pool. It also has many water features and excellent landscaping throughout the outdoor patios that are accessible privately via the rooms. You don't even realize that you are on the 17th floor once you get off the main elevator at the reception level and the view of the city from that floor is breathtaking. The staff is quite friendly and accomodating. The only drawback: <span class='review-span highlight' data-aligned-summaries='3'>wired interenet only available for 1 computer in each room</span>. <span class='review-span highlight' data-aligned-summaries='6'>Wireless internet is only available in the lobby</span>. However, I enjoyed my stay!</div><div class='text-box'>Recently in Montreal to attend a concert with my teen Grand daughter and her friend. We chose the Bonaventure after much consideration due to it's proximity to the bell Centre( concert Venue and also Hockey Game Venue which my husband was attending). The decision could not have been better.<span class='review-span highlight' data-aligned-summaries='2'>The Bonaventure is connected to Montreal's extensive underground City, lots of shopping</span>, a skating rink, <span class='review-span highlight' data-aligned-summaries='2'>movie theatres.we</span> were thrilled. To say nothing of the <span class='review-span highlight' data-aligned-summaries='6'>friendly hotel staff.to a person they were helpful and welcoming</span>. <span class='review-span highlight' data-aligned-summaries='0 6'>This is obviously a very well run facility</span>.<span class='review-span highlight' data-aligned-summaries='0'> The management and staff should be proud</span>.</div><div class='text-box'>There are no elevators and the staff doesn't tell you. I had to drag my bags upstairs and then downstairs. There were no bellmans available when we arrived. It <span class='review-span highlight' data-aligned-summaries='0'>was horrible for $100US per night</span>. When I asked for a closer room, I <span class='review-span highlight' data-aligned-summaries='3'>was given a downgraded room</span>. I've never stayed at a <span class='review-span highlight' data-aligned-summaries='6'>4 star hotel without elevators and no bellmen</span>. Also, the drain in the bathtub was very slow. You end up showering in 4 inches of water.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>hotel in central downtown location</span>. Comfortable, the greatest asset is the garden with swimming pool on the top floor is even heated in winter ! <span class='review-span highlight' data-aligned-summaries='5'>Book a room on the executive floor and enjoy complimentary breakfast and evening appetizers and snacks for a small fee</span>. <span class='review-span highlight' data-aligned-summaries='6'>A perfect hotel</span> to stay in the city.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 6'>Wonderful quality hotel</span>. The garden and pool are a great escape from the city below. <span class='review-span highlight' data-aligned-summaries='3'>The room was clean, comfortable</span> and tastefully renovated - very modern yet so comfy. The staff was very helpful and <span class='review-span highlight' data-aligned-summaries='1'>the location of the hotel is perfect</span> for every sight in Montreal.</div><div class='text-box'>Was participating at a business convention in Montreal. We stayed at this hotel. <span class='review-span highlight' data-aligned-summaries='1 6'>Nice hotel</span> with comfortable beds and nice view of <span class='review-span highlight' data-aligned-summaries='1'>downtown</span> Montreal. Near Place Bonaventure. <span class='review-span highlight' data-aligned-summaries='2'>Closed to</span> Bell centre and all <span class='review-span highlight' data-aligned-summaries='2'>fancy restaurant</span> around.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Everything about this hotel was fine</span>. It is a typical, <span class='review-span highlight' data-aligned-summaries='1 6'>better-than-averagely run downtown Hilton property</span>. I went there for a few days on business and ended up liking it a lot.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel is a well managed business and is a cost effective stay.</span> <span id="1" class="summary-sentence">This hotel is located downtown which is a great location to be.</span> <span id="2" class="summary-sentence">It's easily accessible to lots of fancy restaurants, shopping and even movie theatres.</span> <span id="3" class="summary-sentence">Unfortunately a downgraded room was disappointing and there is wired internet for only one computer per room.</span> <span id="4" class="summary-sentence">The breakfast is absolutely delicious with a great selection of food at the bar.</span> <span id="5" class="summary-sentence">Breakfast can be complimentary if booking a room on the executive floor and the evening appetisers only cost a small fee.</span> <span id="6" class="summary-sentence">Average hotel, and there is limited Wi-Fi available.</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> | |