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, <span class='review-span highlight' data-aligned-summaries='0'>the hotel is wonderful</span>. <span class='review-span highlight' data-aligned-summaries='0'>We have 2 small children and they 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, after repeated requests nothing was done and no explanation. 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='6'>The pools are amazing</span>, each one offers something different. The room are very well kept, we stayed at the casita and felt like we were living in the rain forest. I would reccomend this resort but <span class='review-span highlight' data-aligned-summaries='4'>I wish management would follow through with requests made</span>.</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 <span class='review-span highlight' data-aligned-summaries='2'>real comfort and amazing views</span> both of the hotel and <span class='review-span highlight' data-aligned-summaries='2'>of the coastal zone</span>. <span class='review-span highlight' data-aligned-summaries='5'>Food is really good</span>, <span class='review-span highlight' data-aligned-summaries='5'>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 and would help you very much with everything</span>. If money is not an issue for you, do try to stay in any of the Casitas with view to the ponds. Only one major piece of advice: if your go on a honeymoon or so, avoid holiday seasons in Mexico.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Like most upscale Mexican resorts the landscaping is exceptional</span>. The reception area is open and <span class='review-span highlight' data-aligned-summaries='0'>ample staff is there to greet</span> you and expedite the check-in process. <span class='review-span highlight' data-aligned-summaries='0'>The rooms are very nice</span> and spacious. Internet access is available. <span class='review-span highlight' data-aligned-summaries='1'>The restaurants are convenient from the trams that move everyone around the resort property on a regular basis</span>. We did not play golf but the course looked terrific. <span class='review-span highlight' data-aligned-summaries='6'>There are several pools</span> for all ages <span class='review-span highlight' data-aligned-summaries='6'>as well as 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='6'>The pools</span> and grounds <span class='review-span highlight' data-aligned-summaries='6'>were incredible</span>. And the staff, <span class='review-span highlight' data-aligned-summaries='4'>the staff was was best of any Fairmont hotel that I have stayed at</span>. We loved it! We'll be back again next year. <span class='review-span highlight' data-aligned-summaries='7'>If you can deal with driving in Mexico, I would recommend renting a car</span> if you plan to leave the resort frequently.</div><div class='text-box'>This was <span class='review-span highlight' data-aligned-summaries='0'>a very nice location</span>, <span class='review-span highlight' data-aligned-summaries='5'>the food was great</span>, <span class='review-span highlight' data-aligned-summaries='0'>and</span> <span class='review-span highlight' data-aligned-summaries='0 4'>the staff was</span> <span class='review-span highlight' data-aligned-summaries='0'>very nice</span>, <span class='review-span highlight' data-aligned-summaries='4'>friendly, and helpful</span>. <span class='review-span highlight' data-aligned-summaries='2'>If you like to be</span> <span class='review-span highlight' data-aligned-summaries='1 2'>away from the craziness of Cancun</span>,<span class='review-span highlight' data-aligned-summaries='2'> 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 hotel has a beautiful property surrounded by lakes and a PGA standard Golf course. The rooms were comfortable with good views all around. The property is huge and we needed <span class='review-span highlight' data-aligned-summaries='1'>special carts to take us</span> around <span class='review-span highlight' data-aligned-summaries='1'>to resteraunts and beach</span>. All in all a <span class='review-span highlight' data-aligned-summaries='0'>great hotel</span> 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 <span class='review-span highlight' data-aligned-summaries='4'>helpful</span>, 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'><span class='review-span highlight' data-aligned-summaries='0'>Fabulous Hotel!</span> <span class='review-span highlight' data-aligned-summaries='0 4'>Impeccable service</span>, fabulous rooms, amazing walking boardwalk throughout the property. From the Welcome Drink until the check-ou, everything was Amazing! Would love to go back!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">Wonderful hotel with various activities available for kids via the kids club.</span> <span id="1" class="summary-sentence">Away from the hustle-bustle of Cancun with trams available when necessary and close to restaurants and the coast.</span> <span id="2" class="summary-sentence">A really great location.</span> <span id="3" class="summary-sentence">The suite in this hotel was fantastic.</span> <span id="4" class="summary-sentence">In general, the staff is very friendly and helpful but management could work on their follow-through.</span> <span id="5" class="summary-sentence">The food here is good but not always authentic Mexican food.</span> <span id="6" class="summary-sentence">There are plenty of lounge chairs available at the many pools.</span> <span id="7" class="summary-sentence">And you can rent a car to experience driving in Mexico.</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> | |