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 girlfriend and I booked Hotel Cielo for a quick 3 night escape of the Boston winter. The hotel was in the most perfect location to explore Playa del Carmen as well as the Yucatcan. We were given <span class='review-span highlight' data-aligned-summaries='3 4'>the deluxe room for 105/night</span>, which <span class='review-span highlight' data-aligned-summaries='3 4'>had a balcony that overlooked 5th ave and a partial view of the ocean</span>. I think the number one reason to stay is for the <span class='review-span highlight' data-aligned-summaries='0 1 5'>helpful staff</span>,<span class='review-span highlight' data-aligned-summaries='0 1'> simple rooms, and amazing locations</span>. We also thought that Carboncitos is also the best mexican food in the area. Thanks to everyone at Hotel Cielo and we will be back hopefully for an extended stay next year. One note: bring your own shampoo as it is not provided.</div><div class='text-box'>We were a group of 4 and <span class='review-span highlight' data-aligned-summaries='0'>enjoyed our stay at Hotel Cielo</span>! <span class='review-span highlight' data-aligned-summaries='2'>The hotel is conveniently located within walking distance of everything</span>. <span class='review-span highlight' data-aligned-summaries='5'>Everyone at the hotel is helpful and friendly</span>. Henri, the concierge, has lots of good information and is <span class='review-span highlight' data-aligned-summaries='5'>always willing to answer questions</span>, arrange for transportation, etc. <span class='review-span highlight' data-aligned-summaries='6'>Breakfasts at the restaurant were delicious</span>. <span class='review-span highlight' data-aligned-summaries='7'>We</span> also <span class='review-span highlight' data-aligned-summaries='7'>enjoyed</span> swimming in a cenote, and <span class='review-span highlight' data-aligned-summaries='7'>horseback riding at Rancho Punto Venado, which also offers a lovely beach, buffet, bar, ATV's, and jeeps</span>. (Henri assisted with the reservation.)</div><div class='text-box'>My husband and I just stayed here and <span class='review-span highlight' data-aligned-summaries='0'>it was perfect for a young couple</span>. <span class='review-span highlight' data-aligned-summaries='5'>The staff especially Henry and Roberto were amazing</span>. <span class='review-span highlight' data-aligned-summaries='1 5'>They took care of everything you needed from great local restaurants to setting up taxis to the airport</span>. <span class='review-span highlight' data-aligned-summaries='0 3'>The rooms were</span> <span class='review-span highlight' data-aligned-summaries='3'>very clean</span> and <span class='review-span highlight' data-aligned-summaries='0 3'>a great price</span>. The rooftop has an awesome sunset view and just a great hang out spot. You are right in the middle of the main strip and <span class='review-span highlight' data-aligned-summaries='2'>a minute walk from the beach</span>. <span class='review-span highlight' data-aligned-summaries='0'>It was a great location and I would go back in a heart beat</span>!</div><div class='text-box'>This trip was a culmination of all the "side trips" we've taken around Playa Del Carmen which ended at Hotel Cielo. I wouldnt have it any other way. <span class='review-span highlight' data-aligned-summaries='0 3'>Beautiful, clean, bright</span> <span class='review-span highlight' data-aligned-summaries='0'>and comfortable</span>. Henery (and everyone else) was friendly and helpful but never were intu rusive and let us enjoy peace and quiet. Carboncitos, the eatery downstairs was tasty with excellent service. Fun location with charm of its own. You wont forget this place any time soon. Thanks Henery, see you next year!</div><div class='text-box'>My wife and I recently visited Playa for the first time and had a wonderful time. <span class='review-span highlight' data-aligned-summaries='2'>Hotel Cielo is perfectly located for just about everything</span> and <span class='review-span highlight' data-aligned-summaries='5'>the staff was phenonmenal in meeting our every need</span>. <span class='review-span highlight' data-aligned-summaries='3'>The rooms were clean and well kept</span> and <span class='review-span highlight' data-aligned-summaries='3'>very reasonably priced</span>. Being first time visitors, <span class='review-span highlight' data-aligned-summaries='5'>the tips and travel advice offered by the hotel staff was invaluable and greatly enhanced the quality of our trip</span>. <span class='review-span highlight' data-aligned-summaries='0'>We will definitely return at some point in the future and have mentioned the hotel to all our friends in Boise, Idaho</span>.</div><div class='text-box'>This was our 2nd stay at Cielo. <span class='review-span highlight' data-aligned-summaries='4'>For slightly more $</span>, <span class='review-span highlight' data-aligned-summaries='4'>you can get</span> one is <span class='review-span highlight' data-aligned-summaries='4'>the larger rooms</span> which we enjoyed. This is an <span class='review-span highlight' data-aligned-summaries='1'>excellent location</span> as 4th street has <span class='review-span highlight' data-aligned-summaries='1'>some of the best</span> non tourist <span class='review-span highlight' data-aligned-summaries='1'>restaurants</span> and <span class='review-span highlight' data-aligned-summaries='2'>is about 100 yards from the beach</span>. While <span class='review-span highlight' data-aligned-summaries='6'>breakfast</span> isn't a big deal me, <span class='review-span highlight' data-aligned-summaries='6'>my wife enjoyed it very much</span>. This place is a bargain.</div><div class='text-box'>had a great time , <span class='review-span highlight' data-aligned-summaries='1'>no need for one of those giant hotels, they have it all</span> <span class='review-span highlight' data-aligned-summaries='0 1'>here.i</span> <span class='review-span highlight' data-aligned-summaries='0'>would recommend to everyone</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Friendly , convient,</span> <span class='review-span highlight' data-aligned-summaries='0 1'>close to everything</span>. resturant on site, little noisy, take your ear plugs.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">Highly recommended, and great value for money.</span> <span id="1" class="summary-sentence">Everything needed to make it a good visit is available to guests.</span> <span id="2" class="summary-sentence">Hotel Cielo's location is only a minute's walk from the beach and within walking distance to nearly everything.</span> <span id="3" class="summary-sentence">Beautiful rooms that are reasonably priced and well maintained.</span> <span id="4" class="summary-sentence">Stunning views from the room's balcony are available to those willing to pay slightly more.</span> <span id="5" class="summary-sentence">The staff here were amazing and took care of every need, from sorting out restaurants and taxies to offering tips and advice on travel which improved the overall quality of the trip greatly.</span> <span id="6" class="summary-sentence">The breakfast served here is of very good quality.</span> <span id="7" class="summary-sentence">Off the hotel grounds, there are activities such as horseback riding, beaches, and jeeps along with ATV's and at Rancho Punto Venado, a bar and buffet.</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> | |