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: 50%; | |
| font-size: 1.0rem; | |
| padding: 10px; | |
| height: 100vh; /* 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: 100vh; /* 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'>great place We got back a week ago from a week long stay at the Hilton Hawaiian Village. I read some of the reviews before we left, and cannot understand what all of the complaining was for from some of the reviews that I read. We had an absolutely great time. The hotel was completely booked (President's Week), and we estimated that with 3,000 rooms, there were approximately 10,000 guests that week, but you would never know it. You did need to go down early to get a lounger by the superpool, but that was nothing to complain about. <span class='review-span highlight' data-aligned-summaries='2'>The staff was courteous</span>, the rooms were terrific and <span class='review-span highlight' data-aligned-summaries='1'>the view was to die for</span>! <span class='review-span highlight' data-aligned-summaries='1'>The hotel grounds are beautiful</span> and there really is no reason to leave the hotel grounds. We did go on day journeys but also enjoyed the days sitting by the pool or on the beach (which just happens to be the best part of Waikiki Beach.) <span class='review-span highlight' data-aligned-summaries='0'>I would go back to this hotel</span> in a heartbeat <span class='review-span highlight' data-aligned-summaries='0'>and would recommend it without hesitation</span>.</div><div class='text-box'>There's no place like HHV! Just returned from our third visit to Hawaii and the Hilton Hawaiian Village (March 7-13). <span class='review-span highlight' data-aligned-summaries='0'>I cannot imagine staying anywhere other than HHV</span>. It is like visiting an old and cherished friend. Our last two visits have been spent in the Ali Tower and <span class='review-span highlight' data-aligned-summaries='2'>the staff there is wonderful</span>. You can quickly become spoiled to the twice a day maid service and the nightly turn-down service. You would have a wonderful vacation if you never left the Village. Everything you can possibly need or want is there. I even look forward to the almost daily trips to the ABC store! <span class='review-span highlight' data-aligned-summaries='1'>Just steps away from the beach</span>, <span class='review-span highlight' data-aligned-summaries='0'>HHV is truly a part of paradise</span>!</div><div class='text-box'>Excellent Stay Spent only 1 night in the Kahlia tower on the executive floor. <span class='review-span highlight' data-aligned-summaries='2'>I found the staff to be top notch, very friendly and professional</span>. The room in the Kahlia tower was newly built and very luxurious, with a small patio and a great view out to sea. The resort is very large with many shops and a great selection of restaurants. We chose to leave the property and go next door for dinner to Kobe Steakhouse, well worth the walk. Over all this is a great resort for either a stop over before your Hawaiian vacation or even a week long visit. Expect resort prices for food and drink, but good quality.</div><div class='text-box'>Best Hotel on Waikiki Beach! This is my second stay at this hotel. <span class='review-span highlight' data-aligned-summaries='2'>The service is wonderful</span> and <span class='review-span highlight' data-aligned-summaries='1'>they have the</span> nicest, cleanest and <span class='review-span highlight' data-aligned-summaries='1'>widest beach</span>. They try their best to accommodate all guests' requests in spite of being one of the busiest hotels in the area! A wide choice of restaurants and shops. If you have the $$, <span class='review-span highlight' data-aligned-summaries='0'>would definitely recommend it</span>. <span class='review-span highlight' data-aligned-summaries='0'>There's no other hotel like the HHV on Waikiki Beach</span>!</div><div class='text-box'>disappointing Was on the 31st floor of the Rainbow tower. Decor and furnishings are right from the 1970s. Walls are paper-thin - was kept awake by a crying baby next door. Hot water took about 20 mins to arrive. Extractor fan in the ceiling was full of hair. <span class='review-span highlight' data-aligned-summaries='0'>If I had been paying any more than the conference rate, I'd be upset</span>! <span class='review-span highlight' data-aligned-summaries='0'>Very disappointing</span></div><div class='text-box'>loved it We stayed only one night after staying on Maui and loved it. <span class='review-span highlight' data-aligned-summaries='0'>The hotel was expensive but</span> <span class='review-span highlight' data-aligned-summaries='1'>we were on the waikiki</span> side on a high floor <span class='review-span highlight' data-aligned-summaries='1'>and</span> <span class='review-span highlight' data-aligned-summaries='0 1'>the view was incredible</span>. <span class='review-span highlight' data-aligned-summaries='0'>Worth it</span>!</div><div class='text-box'>Loyal Hilton guest says.nice hotel but average resort <span class='review-span highlight' data-aligned-summaries='1'>Beach and ocean view from the 20th floor</span> of <span class='review-span highlight' data-aligned-summaries='1'>Rainbow Tower</span></div><div class='text-box'>The how to save yourself from never leaving the HH Village Guide! Penguins at Hilton Hawaiian</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is highly recommended.</span> <span id="1" class="summary-sentence">The location of this hotel is perfect and not only provides great views but also close to the beach.</span> <span id="2" class="summary-sentence">The staff provide a really great friendly but professional service.</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'); | |
| } | |
| }); | |
| 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'); | |
| } | |
| 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> | |