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'>My husband, son and daughter-in-law recently stayed four nights here and <span class='review-span highlight' data-aligned-summaries='0'>EVERYTHING was just great</span>! We flew into Midway, <span class='review-span highlight' data-aligned-summaries='1'>caught the EL in and walked 1 1/2 blocks to the hotel</span>. We were guided each time out to what was the fastest/easiest way to either bus, train or told to take a taxi by the hotel staff. We loved every minute of our stay. The ONLY snafu was the outside flags mounted to the window of the room during a really windy time around 3-4am kept banging. Everything was clean, neat and the folks were super, super nice!</div><div class='text-box'>Traveled to Chicago for baseball, Cubs vs Giants. After an exhaustive search chose the La Quinta for both location and cost. We were not disappointed. <span class='review-span highlight' data-aligned-summaries='0 2'>Clean modern rooms</span>, <span class='review-span highlight' data-aligned-summaries='3'>breakfast buffet</span> <span class='review-span highlight' data-aligned-summaries='0'>and business center all exceeded our expectations</span> for mid-level chain hotel. <span class='review-span highlight' data-aligned-summaries='1'>Public transportation is readily assessable</span> and the hotel is within walking distance to most sights within the downtown loop. Would definitely stay there again.</div><div class='text-box'>Love, <span class='review-span highlight' data-aligned-summaries='0'>loved this place</span>! Great location.it was within walking distance to the Taste of Chicago and other attractions. <span class='review-span highlight' data-aligned-summaries='2'>The rooms were updated</span> and clean. Pretty spacey.the bathroom was HUGE! <span class='review-span highlight' data-aligned-summaries='3'>They also served continental breakfast which is always a plus in my book</span>. There was a lot of food choices and the staff was SO friendly! Definately will stay again!</div><div class='text-box'>We spent 3 nights at this hotel. <span class='review-span highlight' data-aligned-summaries='0'>Staff were helpful</span> and relatively friendly, <span class='review-span highlight' data-aligned-summaries='3'>breakfast was very good</span> and <span class='review-span highlight' data-aligned-summaries='0'>our room was very comfortable</span>. Not too far from the downtown area, it can be walked in about 20 mins or there is <span class='review-span highlight' data-aligned-summaries='1'>easy transport within a block or two</span>. Would stay there again . . and Chicago was great!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Hotel was very crowded, people dogs everywhere</span> elevators were painfully slow, and <span class='review-span highlight' data-aligned-summaries='3'>the free</span> <span class='review-span highlight' data-aligned-summaries='0 3'>breakfast was more like a soup kitchen</span>,<span class='review-span highlight' data-aligned-summaries='3'> big lineups no were to sit, and I went back 3 times with no luck</span>. so I just gave up after awhile and went out for food.</div><div class='text-box'>the <span class='review-span highlight' data-aligned-summaries='0'>staff were all very courteous and helpful</span> <span class='review-span highlight' data-aligned-summaries='3'>the complimentary</span> <span class='review-span highlight' data-aligned-summaries='0 3'>breakfast was very good</span>,<span class='review-span highlight' data-aligned-summaries='3'> lots of good choices</span>, the food/beverages are all laid out well for people to walk through out <span class='review-span highlight' data-aligned-summaries='2'>the room the room was fine,</span> <span class='review-span highlight' data-aligned-summaries='2 4'>one stand out would be the thermostat control for heat/cool</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Stayed at this hotel for a</span> weekend <span class='review-span highlight' data-aligned-summaries='0'>vacation</span>. Rooms were clean. The front desk staff for the most part were friendly and helpful. The hotel is located in an excellent location. Close to many area attractions such as the Willis Tower.</div><div class='text-box'>I stayed 2 nights for business and my conference was 3 blocks away. I <span class='review-span highlight' data-aligned-summaries='0'>could not have asked for a better hotel</span> for my top 3 concerns: Clean, Price, and Location. I <span class='review-span highlight' data-aligned-summaries='0'>would stay here</span> again <span class='review-span highlight' data-aligned-summaries='0'>even for pleasure</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">You could stay here for pleasure or otherwise because it's such a great hotel.</span> <span id="1" class="summary-sentence">The public transportation is incredibly close.</span> <span id="2" class="summary-sentence">The hotel has modern rooms, even having a thermostat control for the room's temperature.</span> <span id="3" class="summary-sentence">Whilst the breakfast was free it felt a lot more like a soup kitchen with massive lines and nowhere to even sit.</span> <span id="4" class="summary-sentence">There was a thermostat that was useful for controlling how hot or cool you would like it to be.</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> | |