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 at the Fairmont Mayakoba at the end of June, the hotel is wonderful. We have 2 <span class='review-span highlight' data-aligned-summaries='0'>small children</span> and they <span class='review-span highlight' data-aligned-summaries='0'>loved the kids club</span>. We came to the Fairmont with a large group to celebrate 3 birthdays, we had asked before hand for a surprise in each room for the birthday guest. This did not happen, <span class='review-span highlight' data-aligned-summaries='4'>after repeated requests nothing was done and no explanation</span>. My 5 year old son whose birthday present was this trip was upset but we made the most of the resort. <span class='review-span highlight' data-aligned-summaries='7'>The pools are amazing</span>, each one offers something different. The room are very well kept, <span class='review-span highlight' data-aligned-summaries='8'>we stayed at the casita and felt like we were living in the rain forest</span>. I would reccomend this resort but I wish management would follow through with requests made.</div><div class='text-box'>We have stayed at least three times at the Fairmont Mayakoba and all of them have proviede us with distinguished experiences. Though a little bit expensive, when in Cancun or Playa del Carmen, this hotel brings you real comfort and amazing views both of the hotel and of the coastal zone. <span class='review-span highlight' data-aligned-summaries='5'>Food is really good, but not all of the dishes served there are to be considered as real Mexican</span>. <span class='review-span highlight' data-aligned-summaries='4'>Generally speaking, personnel is friendly</span> and <span class='review-span highlight' data-aligned-summaries='4'>would help you very much with everything</span>. If <span class='review-span highlight' data-aligned-summaries='8'>money is not an issue</span> for you, do try to <span class='review-span highlight' data-aligned-summaries='8'>stay in any of the Casitas with view to the ponds</span>. Only one major piece of advice: if your go on a honeymoon or so, avoid holiday seasons in Mexico.</div><div class='text-box'>Like most upscale Mexican resorts the landscaping is exceptional. The reception area is open and ample <span class='review-span highlight' data-aligned-summaries='4'>staff is there to greet you</span> and expedite the check-in process. The <span class='review-span highlight' data-aligned-summaries='3'>rooms are very nice</span> and spacious. <span class='review-span highlight' data-aligned-summaries='6'>Internet access is available</span>. The restaurants are <span class='review-span highlight' data-aligned-summaries='1'>convenient from the trams</span> that move everyone around the resort property on a regular basis. We did not play golf but the course looked terrific. There are <span class='review-span highlight' data-aligned-summaries='7'>several pools</span> for all ages as well as <span class='review-span highlight' data-aligned-summaries='7'>plenty of lounge chairs</span>. After my stay, I arranged for my daughter's honeymoon here and they had a terrific time too.</div><div class='text-box'>We spent 8 days at the Fairmont Mayakoba with a 3 year old and a 12 year old, and had an absolutely fantastic stay. <span class='review-span highlight' data-aligned-summaries='3'>Our suite was amazing</span>. <span class='review-span highlight' data-aligned-summaries='7'>The pools</span> and grounds <span class='review-span highlight' data-aligned-summaries='7'>were incredible</span>. And the staff, the staff was was best of any Fairmont hotel that I have stayed at. We loved it! We'll be back again next year. If you can deal with driving in Mexico, I would recommend renting a car if you plan to leave the resort frequently.</div><div class='text-box'>This was a very nice location, <span class='review-span highlight' data-aligned-summaries='5'>the food was great</span>, and <span class='review-span highlight' data-aligned-summaries='4'>the staff was</span> very nice, <span class='review-span highlight' data-aligned-summaries='4'>friendly</span>, and <span class='review-span highlight' data-aligned-summaries='4'>helpful</span>. <span class='review-span highlight' data-aligned-summaries='2'>If you like to be away from the craziness of Cancun, then this would be a great choice</span>. If you like to be surrounded with more things to do, then closer to the tourist part of Cancun would be the better choice. The beach is very narrow, but it is fairly clean.</div><div class='text-box'>I stayed at the hotel for a week in April 2010 for a conference. The <span class='review-span highlight' data-aligned-summaries='8'>hotel has a</span> beautiful <span class='review-span highlight' data-aligned-summaries='8'>property surrounded by lakes</span> and a PGA standard Golf course. The <span class='review-span highlight' data-aligned-summaries='3'>rooms were comfortable with good views</span> all around. The property is huge and we needed special carts to take us around to resteraunts and beach. All in all a great hotel but slightly on the pricier side.</div><div class='text-box'>The Fairmont resort has written service all over it! <span class='review-span highlight' data-aligned-summaries='4'>People are so friendly,</span> and really helpful, that you feel at home from the first day and onwards. Too bad our stay was only for 1 week.</div><div class='text-box'>Fabulous Hotel! <span class='review-span highlight' data-aligned-summaries='4'>Impeccable service</span>, <span class='review-span highlight' data-aligned-summaries='3'>fabulous rooms</span>, amazing walking boardwalk throughout the property. <span class='review-span highlight' data-aligned-summaries='2'>From the Welcome Drink until the check-ou, everything was Amazing</span>! Would love to go back!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel even has a kids' club.</span> <span id="1" class="summary-sentence">The hotel is conveniently near the tram system and there are great views of the coast.</span> <span id="2" class="summary-sentence">An ideal choice for a quieter place to stay.</span> <span id="3" class="summary-sentence">One of the hotel rooms is a suite that is simply superb.</span> <span id="4" class="summary-sentence">The staff were generally friendly, but requests were not always met efficiently.</span> <span id="5" class="summary-sentence">The hotel provides great food, although some of the dishes are perhaps not too authentic to the region.</span> <span id="6" class="summary-sentence">The hotel provides internet access for guests.</span> <span id="7" class="summary-sentence">The hotel premises also have a pool and seating around it.</span> <span id="8" class="summary-sentence">If you upgrade to stay in a Casitas there is a view to the ponds of the grounds.</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> | |