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. <span class='review-span highlight' data-aligned-summaries='0'>We loved every minute of our stay</span>. 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='0'></span> <span class='review-span highlight' data-aligned-summaries='0 4'>breakfast buffet</span> <span class='review-span highlight' data-aligned-summaries='0'>and business center</span> <span class='review-span highlight' data-aligned-summaries='0 2'>all</span> <span class='review-span highlight' data-aligned-summaries='0 2 4'>exceeded our expectations</span> <span class='review-span highlight' data-aligned-summaries='0'>for mid-level chain hotel</span>. <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</span> updated and <span class='review-span highlight' data-aligned-summaries='2'>clean</span>. Pretty spacey.the bathroom was HUGE! They also <span class='review-span highlight' data-aligned-summaries='4'>served continental breakfast</span> which is always a plus in my book. 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 and relatively friendly</span>, <span class='review-span highlight' data-aligned-summaries='4'>breakfast was very good</span> and our room was very comfortable. <span class='review-span highlight' data-aligned-summaries='0'>Not too far from the downtown area</span>, it can be walked in about 20 mins or <span class='review-span highlight' data-aligned-summaries='1'>there is 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</span>, people dogs everywhere elevators were painfully slow, <span class='review-span highlight' data-aligned-summaries='0'>and</span> <span class='review-span highlight' data-aligned-summaries='0 4'>the free breakfast was more like a soup kitchen</span>, big lineups no were to sit, and I went back 3 times with no luck. so I just gave up after awhile and went out for food.</div><div class='text-box'>the staff were all very courteous and helpful <span class='review-span highlight' data-aligned-summaries='4'>the complimentary breakfast was very good</span>, lots of good choices, the food/beverages are all laid out well for people to walk through out the room the room was fine, <span class='review-span highlight' data-aligned-summaries='3 5'>one stand out would be the thermostat control</span> <span class='review-span highlight' data-aligned-summaries='3'>for heat/cool</span>.</div><div class='text-box'>Stayed at this hotel for a weekend vacation. <span class='review-span highlight' data-aligned-summaries='0 2'>Rooms were clean</span>. The front desk staff for the most part were friendly and helpful. The <span class='review-span highlight' data-aligned-summaries='0'>hotel is</span> located <span class='review-span highlight' data-aligned-summaries='0'>in an excellent location</span>. 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. <span class='review-span highlight' data-aligned-summaries='0'>I could not have asked for a better hotel</span> for my top 3 concerns: <span class='review-span highlight' data-aligned-summaries='2'>Clean</span>, Price, and Location. I would stay here again even for pleasure.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel was great and comes highly recommended.</span> <span id="1" class="summary-sentence">The hotel is close to transport networks.</span> <span id="2" class="summary-sentence">The modern rooms were really clean.</span> <span id="3" class="summary-sentence">What really stood out was the thermostat that controls the heat and coolness of the room.</span> <span id="4" class="summary-sentence">The complimentary breakfast provided by the hotel was substandard.</span> <span id="5" class="summary-sentence">The hotel has a thermostat control.</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> | |