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. <span class='review-span highlight' data-aligned-summaries='0'>The hotel was in the most perfect location</span> to explore Playa del Carmen as well as the Yucatcan. We were given <span class='review-span highlight' data-aligned-summaries='4'>the deluxe room for 105/night, which had a balcony that overlooked 5th ave</span> and a partial view of the ocean. <span class='review-span highlight' data-aligned-summaries='0'>I think the number one reason to stay is for the helpful staff</span>, simple rooms, and amazing locations. 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'><span class='review-span highlight' data-aligned-summaries='0'>We</span> 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='1'>The hotel is conveniently located within walking distance of everything</span>. Everyone at the hotel is helpful and friendly. <span class='review-span highlight' data-aligned-summaries='5'>Henri, the concierge, has lots of good information and is always willing to answer questions</span>, arrange for transportation, etc. Breakfasts at the restaurant were delicious. <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 it was perfect for a young couple. <span class='review-span highlight' data-aligned-summaries='5'>The staff</span> especially Henry and Roberto were amazing. They <span class='review-span highlight' data-aligned-summaries='5'>took care of everything you needed</span> from great local restaurants to <span class='review-span highlight' data-aligned-summaries='6'>setting up taxis to the airport</span>. <span class='review-span highlight' data-aligned-summaries='3 4'>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 4'>a great price</span>. The rooftop has an awesome sunset view and just a great hang out spot. <span class='review-span highlight' data-aligned-summaries='1'>You are right in the middle of the main strip</span> and <span class='review-span highlight' data-aligned-summaries='2'>a minute walk from the beach</span>. It was a great location and <span class='review-span highlight' data-aligned-summaries='0'>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</span>,<span class='review-span highlight' data-aligned-summaries='0'> bright 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. <span class='review-span highlight' data-aligned-summaries='0'>You wont forget this place</span> 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. Hotel Cielo is <span class='review-span highlight' data-aligned-summaries='1'>perfectly located for just about everything</span> and the staff was phenonmenal in meeting our every need. <span class='review-span highlight' data-aligned-summaries='3'>The</span> <span class='review-span highlight' data-aligned-summaries='0 3'>rooms were</span> <span class='review-span highlight' data-aligned-summaries='3'>clean</span> and <span class='review-span highlight' data-aligned-summaries='3'>well kept</span> and <span class='review-span highlight' data-aligned-summaries='4'>very</span> <span class='review-span highlight' data-aligned-summaries='0 4'>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</span> and greatly enhanced the quality of our trip. We will definitely return at some point in the future and have mentioned the hotel to all our friends in Boise, Idaho.</div><div class='text-box'>This was our 2nd stay at Cielo. For slightly more $, you can get one is the larger rooms which we enjoyed. <span class='review-span highlight' data-aligned-summaries='0 1 2'>This is an excellent location</span> <span class='review-span highlight' data-aligned-summaries='1 2'>as 4th street has some of the best non tourist restaurants and is about 100 yards from the beach</span>. While breakfast isn't a big deal me, my wife enjoyed it very much. <span class='review-span highlight' data-aligned-summaries='0 4'>This place is a bargain</span>.</div><div class='text-box'>had a great time , no need for one of those giant hotels, they have it all here.i <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">The hotel was a bargain and comes highly recommended.</span> <span id="1" class="summary-sentence">The hotel is located centrally to the main strip and generally everything is within walking distance.</span> <span id="2" class="summary-sentence">It is a minute's walk to beach and nearby 4th street has a selection of local restaurants too.</span> <span id="3" class="summary-sentence">The rooms were clean and well maintained.</span> <span id="4" class="summary-sentence">They were reasonably priced and the deluxe options have a balcony overlooking 5th Avenue.</span> <span id="5" class="summary-sentence">The staff are incredibly knowledgeable about the local area and will happily spend some time advising on the best places to see.</span> <span id="6" class="summary-sentence">They were even gracious enough to book taxis to the airport, which is a great touch.</span> <span id="7" class="summary-sentence">The hotel is near to Rancho Punto Venado, which provides facilities for many outdoor activities such as horseback riding and ATV driving</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> | |