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'>Located on the Herengracht, one of the old canal rings encircling the city, <span class='review-span highlight' data-aligned-summaries='4'>the Ambassade is beautifully decorated</span> - we were open-mouthed at the quality of the furnishings. And it <span class='review-span highlight' data-aligned-summaries='5 6'>was staffed with</span> <span class='review-span highlight' data-aligned-summaries='5'>friendly,</span> <span class='review-span highlight' data-aligned-summaries='5 6'>knowledgeable</span>,<span class='review-span highlight' data-aligned-summaries='5'> multilingual</span> <span class='review-span highlight' data-aligned-summaries='5 6'>employees</span>. The location was perfect - we were within walking distance of museums, the Dam, the Red Light District, the Begjinhof, great restaurants and bars (we loved the Five Flies just around the corner, built in 1634). The breakfast was sumptuous, but seemed <span class='review-span highlight' data-aligned-summaries='0'>a bit pricey</span>, so we only tried it once. <span class='review-span highlight' data-aligned-summaries='0'>WE stayed for 3 nights, and</span> <span class='review-span highlight' data-aligned-summaries='0 1'>wouldn't hesitate to recommend it</span>.<span class='review-span highlight' data-aligned-summaries='1'></span></div><div class='text-box'>Stayed in this hotel on Saturday night for a very brief visit to the City. <span class='review-span highlight' data-aligned-summaries='5'>The staff at reception were exceptionally, kind and help and just couldn't do enough for us</span>. Joost Van Der Kwaak led the charge here and was amazing. <span class='review-span highlight' data-aligned-summaries='4'>The rooms are</span> divine, very large and <span class='review-span highlight' data-aligned-summaries='4'>beautifully decorated</span> - the most comfortable beds and pillows - <span class='review-span highlight' data-aligned-summaries='2'>we even managed to get a room with a superb view over the canal</span>. I loved the fact that everything is within walking distance - the museums, flower market etc. Will definitely go back. Yes <span class='review-span highlight' data-aligned-summaries='0'>it's a little pricey</span> but <span class='review-span highlight' data-aligned-summaries='0'>well worth every penny</span>!</div><div class='text-box'>We stayed there for around 5 days in April of this year and would definitely stay there again if finances allow. <span class='review-span highlight' data-aligned-summaries='5'>The staff was very friendly and professional</span>. The room was very nice and clean. We had <span class='review-span highlight' data-aligned-summaries='2'>a room overlooking the canal so that made it even nicer</span>. <span class='review-span highlight' data-aligned-summaries='3 7'>Free wireless internet in the room</span>. Nice clean bathroom. Comfortable bed. The location is also great, it was pretty much walking distance from everything we wanted to do. <span class='review-span highlight' data-aligned-summaries='0'>It was pretty expensive, but I do believe you get what you pay for - high quality</span>! <span class='review-span highlight' data-aligned-summaries='1'>No complaints at all</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='5'>The staff was amazingly handy in every aspect</span>. I simply found the hotel in Trip Advisor, never heard about. They rent bicycles themselves, so you are not attached to the time of rental stores. For example you can return the bike in the middle of dawn. Nice and <span class='review-span highlight' data-aligned-summaries='4'>stylish rooms</span>. They upgraded me to a better <span class='review-span highlight' data-aligned-summaries='2'>room with canal view</span>. They respond to all e-mails, request. They are 100%.</div><div class='text-box'>Spent a night at this very comfortable hotel. One of the most comfortable rooms I have ever been in. <span class='review-span highlight' data-aligned-summaries='0 1'>Everything is perfect</span>. Hotel is centrally located bu quiet. Just be careful ate at night to remember which side of the canal the hotel is on, if you forget, you may be wandering around for a while. <span class='review-span highlight' data-aligned-summaries='3 7'>Free Internet</span> <span class='review-span highlight' data-aligned-summaries='7'>and a printer too if you need it</span>.</div><div class='text-box'>Right in the center, close (walking distance) to everything you had to see in Amsterdam, bathroom is very, very clean. <span class='review-span highlight' data-aligned-summaries='3 7'>Rooms</span> are spacious <span class='review-span highlight' data-aligned-summaries='3 7'>with free internet access</span> if you have a laptop (<span class='review-span highlight' data-aligned-summaries='7'>there is also a free access near the front desk</span>) and.excellent breakfast! PS: <span class='review-span highlight' data-aligned-summaries='5 6'>The staff were incredibly</span> <span class='review-span highlight' data-aligned-summaries='5'>friendly</span> and <span class='review-span highlight' data-aligned-summaries='6'>helpful</span></div><div class='text-box'>We are fussy and can't think of anything critical to say about this hotel. Service, cleanliness, room size, breakfast, location and everything else were wonderful and, <span class='review-span highlight' data-aligned-summaries='0'>considering the quality, the cost was quite reasonable</span>.</div><div class='text-box'>I stayed at the ambassade in Oct <span class='review-span highlight' data-aligned-summaries='5'>staff: respectful,professional</span> location : <span class='review-span highlight' data-aligned-summaries='1'>ideal room</span>: standard.clean,cosy <span class='review-span highlight' data-aligned-summaries='0 1'>price:reasonable</span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The stay at the hotel was quite expensive, but absolutely worth the cost.</span> <span id="1" class="summary-sentence">No complaints.</span> <span id="2" class="summary-sentence">The view from the room was great because it overlooked the canal.</span> <span id="3" class="summary-sentence">The wireless internet in the room was free, which is really useful.</span> <span id="4" class="summary-sentence">Even better though is that the rooms are luxurious and decorated to a lovely standard.</span> <span id="5" class="summary-sentence">All of the staff were lovely because they were friendly but professional at the same time.</span> <span id="6" class="summary-sentence">They were clearly very knowledgeable, which was just wonderful.</span> <span id="7" class="summary-sentence">The hotel provided free internet services and also the use of a printer too if needed.</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> | |