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 stayed here for one night with our two kids, as they hotel could not accommodate both nights of our stay during a recent road trip. Like just about everything else in Chicago, <span class='review-span highlight' data-aligned-summaries='0'>the prices were steep. We were expecting more for the price we paid</span>, but found only typical accommodations. <span class='review-span highlight' data-aligned-summaries='1'>We liked the location</span>, the friendly and helpful bellhops, the views from our room and the top floor ballroom, and in and out privileges for the parking. <span class='review-span highlight' data-aligned-summaries='3'>We missed not having a mini fridge</span>, and felt that having only one chair in a deluxe room with two queen beds was a miss even though there was plenty of room for more comfortable seating. The valet staff was slow to bring our car at checkout. There were no others waiting, and no new arrivals, yet it took them 20 minutes to get our car to us.</div><div class='text-box'>Stayed here in middle of June 2011. My partner was in Chicago on business and I tagged along for fun. We had both been to Chicago before. Things I really liked about the hotel: <span class='review-span highlight' data-aligned-summaries='1'>the location was amazing</span> and <span class='review-span highlight' data-aligned-summaries='2'>the view was really nice</span>; the bed was very comfortable; the staff was pleasant and helpful; the business center had a printer which was great for printing boarding passes. Our remote controls never really worked, and the noise level from the hallways was surprising. <span class='review-span highlight' data-aligned-summaries='2'>I found the bathroom wasn't very clean when we arrived (hairs in the bathtub, etc)</span> and <span class='review-span highlight' data-aligned-summaries='2'>we sometimes found certain parts of our deluxe room a little unsavoury smelling</span>. For parking, you do have in-and-out privileges, which is quite nice.</div><div class='text-box'>We stayed 3 nights in this beautiful hotel and enjoyed every minute of it. <span class='review-span highlight' data-aligned-summaries='1 2'>Our room</span> <span class='review-span highlight' data-aligned-summaries='1'>located on the 25th floor</span> <span class='review-span highlight' data-aligned-summaries='1 2'>gave us a wonderful view of the Chicago River</span>. This was my kids first time seeing snow fall, so the river was a nice backdrop. Two minor drawbacks: <span class='review-span highlight' data-aligned-summaries='3'>no soda vending machines</span> and <span class='review-span highlight' data-aligned-summaries='3'>the toilet paper seemed a little cheap</span> for such a nice hotel. Also, <span class='review-span highlight' data-aligned-summaries='3'>if you want a refrigerator make sure you request it. Not all rooms have them</span>. The front desk clerks were warm and friendly.</div><div class='text-box'>Were hoping for the best since this isn't a 'brand' name but SOOO HAPPY we tried this boutique hotel. <span class='review-span highlight' data-aligned-summaries='0'>STAFF</span> <span class='review-span highlight' data-aligned-summaries='0 1'>was GREAT</span> <span class='review-span highlight' data-aligned-summaries='0'>as well as EVERYTHING ABOUT THIS PLACE</span>! <span class='review-span highlight' data-aligned-summaries='1'>LOCATION LOCATION LOCATION</span>! Celebrating friends 50th the LADIES had a fab time all around and such a GREAT view of the City! As one other reviewer stated - <span class='review-span highlight' data-aligned-summaries='3'>it would be nice to have a mini fridge</span> but all in all THUMBS UP UP UP!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Hotel 71 a great place to stay</span> <span class='review-span highlight' data-aligned-summaries='1'>very close to all attractions lovely situation on the river</span>.Very pleasant and helpful staff.Enjoyed my stay immensly.Windows can be opened to let in fresh air not like the New York hotel we stayed in very stuffy with the air conditioning .If going to Chicago stay here.Also found a great diner on Clarke st Ronneys Steak House very reasonable and great eggs and bacon</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Great Chicago Location</span>. <span class='review-span highlight' data-aligned-summaries='1 2'>View of the river was beautiful</span>. The <span class='review-span highlight' data-aligned-summaries='2'>rooms were huge</span>, especially compared to other Chicago hotels. The rooms were clean and the staff was friendly. Only negative is the wait for the 1 elevator.sometimes up to 10 minutes. As long as you plan ahead, it isn't too big of a problem. Will stay here again!</div><div class='text-box'>We booked this hotel through TravelZoo, and we had a very nice stay there. <span class='review-span highlight' data-aligned-summaries='2'>Our room had a huge bath</span> with both a shower and a separate tub - plus two separate sinks. <span class='review-span highlight' data-aligned-summaries='2'>Everything was very clean</span>. The check-in process was very smooth, and our room was available for us even at 1 PM. Would definitely stay here again.</div><div class='text-box'>Stayed here for 2 nights for the Neocon conference. <span class='review-span highlight' data-aligned-summaries='1'>The location is excellent</span> for business or pleasure and <span class='review-span highlight' data-aligned-summaries='0'>at a price much less than other hotels nearby</span>. Would definitely stay again.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel was not worth the price paid for it.</span> <span id="1" class="summary-sentence">The hotel is situated in an excellent location on the river.</span> <span id="2" class="summary-sentence">The rooms were very large with a great view of the Chicago River although at times smelt unsavoury and had a dirty bathroom.</span> <span id="3" class="summary-sentence">The hotel did not have a drinks vending machine or fridge and the toilet paper was of a poor quality.</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> | |