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>. We have 2 small children and they loved the kids club. 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='2 3'>after repeated requests nothing was done</span> <span class='review-span highlight' data-aligned-summaries='3'>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='5'>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='2 3'>I wish management would follow through</span> <span class='review-span highlight' data-aligned-summaries='2'>with requests made</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>We have stayed at least three times at the Fairmont Mayakoba and all of them have proviede us with distinguished experiences</span>. 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='4'>Food is really good, but not all of the dishes served there are to be considered as real Mexican</span>. Generally speaking, <span class='review-span highlight' data-aligned-summaries='2 3'>personnel</span> <span class='review-span highlight' data-aligned-summaries='3'>is friendly and</span> <span class='review-span highlight' data-aligned-summaries='2 3'>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'>Like most upscale Mexican resorts the landscaping is exceptional. The reception area is open and <span class='review-span highlight' data-aligned-summaries='3'>ample staff is there to greet you and expedite the check-in process</span>. <span class='review-span highlight' data-aligned-summaries='0'>The rooms are very nice and spacious</span>. <span class='review-span highlight' data-aligned-summaries='5'>Internet access is available</span>. <span class='review-span highlight' data-aligned-summaries='0 1'>The restaurants are convenient</span> <span class='review-span highlight' data-aligned-summaries='1'>from the trams that move everyone around the resort</span> property on a regular basis. We did not play golf but the course looked terrific. <span class='review-span highlight' data-aligned-summaries='5'>There are several pools for all ages 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. Our <span class='review-span highlight' data-aligned-summaries='0'>suite was amazing</span>. <span class='review-span highlight' data-aligned-summaries='5'>The pools</span> and grounds <span class='review-span highlight' data-aligned-summaries='5'>were incredible</span>. And the staff, <span class='review-span highlight' data-aligned-summaries='0 3'>the staff was was best of any Fairmont hotel</span> 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'><span class='review-span highlight' data-aligned-summaries='0'>This was a very nice location</span>, <span class='review-span highlight' data-aligned-summaries='4'>the food was great</span>, and <span class='review-span highlight' data-aligned-summaries='0 3'>the staff was very</span> <span class='review-span highlight' data-aligned-summaries='3'>nice, friendly, and</span> <span class='review-span highlight' data-aligned-summaries='0 3'>helpful</span>. <span class='review-span highlight' data-aligned-summaries='1'>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 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 <span class='review-span highlight' data-aligned-summaries='1'>we needed special carts to take us around to resteraunts</span> and beach. <span class='review-span highlight' data-aligned-summaries='0'>All in all a 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='3'>People are so friendly, and really helpful</span>, that <span class='review-span highlight' data-aligned-summaries='0'>you feel at home from the first day and onwards</span>. <span class='review-span highlight' data-aligned-summaries='0'>Too bad our stay was only for 1 week</span>.</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='2'>Impeccable service</span>, fabulous rooms, amazing walking boardwalk throughout the property. From the Welcome Drink until the check-ou, everything was Amazing! <span class='review-span highlight' data-aligned-summaries='0'>Would love to go back</span>!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a really great and fabulous hotel that will have you coming back again and again.</span> <span id="1" class="summary-sentence">This is a conveniently located hotel because there are trams nearby to take you to restaurants, while the hotel is a good distance away from the craziness of the city.</span> <span id="2" class="summary-sentence">Requests made to staff and even management are not always followed through despite repeating them.</span> <span id="3" class="summary-sentence">Overall though the staff are friendly and try to help out as much as they can.</span> <span id="4" class="summary-sentence">Whilst the food served in this hotel is undeniably tasty they should reconsider whether some of the items on offer are really authentic Mexican dishes.</span> <span id="5" class="summary-sentence">The hotel provides access to the internet and the pools are really great.</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> | |