Spaces:
Running
Running
File size: 10,229 Bytes
122b9cd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
<!DOCTYPE html>
<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 !important; /* Dark grey for muted text */
cursor: pointer;}
.not-hover-highlight { background-color: lightyellow;
color: #606060 !important; /* 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>
|