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, the prices were steep. We were expecting more for the price we paid, but found only typical accommodations. We liked the location, 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='4'>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 <span class='review-span highlight' data-aligned-summaries='2'>there was plenty of room for more comfortable seating</span>. 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='0'>the location was amazing and 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. I found <span class='review-span highlight' data-aligned-summaries='3'>the bathroom wasn't very clean when we arrived</span> (hairs in the bathtub, etc) <span class='review-span highlight' data-aligned-summaries='3'>and 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'><span class='review-span highlight' data-aligned-summaries='0'>We stayed 3 nights in this beautiful hotel</span> and enjoyed every minute of it. <span class='review-span highlight' data-aligned-summaries='2'>Our room</span> located on the 25th floor <span class='review-span highlight' data-aligned-summaries='2'>gave us a wonderful view of the Chicago River</span>. This was my kids first time seeing snow fall, so <span class='review-span highlight' data-aligned-summaries='1'>the river was a nice backdrop</span>. Two minor drawbacks: <span class='review-span highlight' data-aligned-summaries='4'>no soda vending machines</span> and the toilet paper seemed a little cheap for such a nice hotel. Also, <span class='review-span highlight' data-aligned-summaries='4'>if you want a refrigerator make sure you request it</span>. Not all rooms have them. 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. STAFF was GREAT as well as EVERYTHING ABOUT THIS PLACE! LOCATION LOCATION LOCATION! Celebrating friends 50th the LADIES had a fab time all around and <span class='review-span highlight' data-aligned-summaries='1'>such a GREAT view of the City</span>! As one other reviewer stated - it <span class='review-span highlight' data-aligned-summaries='4'>would be nice to have a mini fridge</span> but all in all THUMBS UP UP UP!</div><div class='text-box'>Hotel 71 a great place to stay very close to all attractions <span class='review-span highlight' data-aligned-summaries='1'>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'>Great Chicago Location. <span class='review-span highlight' data-aligned-summaries='0 1'>View</span> <span class='review-span highlight' data-aligned-summaries='1'>of the river</span> <span class='review-span highlight' data-aligned-summaries='0 1'>was beautiful</span>. The <span class='review-span highlight' data-aligned-summaries='2'>rooms were huge</span>, especially compared to other Chicago hotels. The <span class='review-span highlight' data-aligned-summaries='3'>rooms were clean</span> 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='0'>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='0 3'>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. The location is excellent for business or pleasure and at <span class='review-span highlight' data-aligned-summaries='0'>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">Considerably expensive for what was provided, however overall it is a beautiful place to visit.</span> <span id="1" class="summary-sentence">The location is being near the river and it offers great views of the city.</span> <span id="2" class="summary-sentence">Large, spacious rooms with excellent views of the Chicago River in some.</span> <span id="3" class="summary-sentence">However, the cleanliness isn't a high quality and could be improved.</span> <span id="4" class="summary-sentence">There were no vending machines with soda and no mini-fridge.</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> | |