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='0'>the Ambassade is beautifully decorated</span> - we were open-mouthed at the quality of the furnishings. <span class='review-span highlight' data-aligned-summaries='4'>And it was staffed with friendly, knowledgeable, multilingual employees</span>. <span class='review-span highlight' data-aligned-summaries='0'>The location was perfect</span> - <span class='review-span highlight' data-aligned-summaries='1'>we were within walking distance of museums, the Dam, the Red Light District, the Begjinhof, great restaurants and bars</span> (we loved the Five Flies just around the corner, built in 1634). The breakfast was sumptuous, but <span class='review-span highlight' data-aligned-summaries='0'>seemed a bit pricey</span>, so we only tried it once. WE stayed for 3 nights, and wouldn't hesitate to recommend it.</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='4'>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='2'>The rooms are</span> divine, <span class='review-span highlight' data-aligned-summaries='2'>very large</span> and beautifully decorated - the most comfortable beds and pillows - we even managed to get a room <span class='review-span highlight' data-aligned-summaries='2'>with a superb view over the canal</span>. I loved the fact that <span class='review-span highlight' data-aligned-summaries='1'>everything is within walking distance - the museums, flower market etc</span>. Will definitely go back. Yes <span class='review-span highlight' data-aligned-summaries='0'>it's a little pricey but 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='4'>The staff was very friendly and professional</span>. The room was very nice and clean. <span class='review-span highlight' data-aligned-summaries='2'>We had a room overlooking the canal</span> so that made it even nicer. <span class='review-span highlight' data-aligned-summaries='3 5'>Free wireless internet in the room</span>. Nice clean bathroom. Comfortable bed. <span class='review-span highlight' data-aligned-summaries='1'>The location is also great, it was pretty much walking distance from everything we wanted to do</span>. <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='0'>No complaints at all</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='4'>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. <span class='review-span highlight' data-aligned-summaries='0'>Nice and stylish rooms</span>. They upgraded me to a better <span class='review-span highlight' data-aligned-summaries='2'>room with</span> <span class='review-span highlight' data-aligned-summaries='0 2'>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'>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 5'>Free Internet</span> <span class='review-span highlight' data-aligned-summaries='5'>and a printer too if you need it</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Right in the center, close (walking distance) to everything you had to see in Amsterdam</span>, bathroom is very, very clean. <span class='review-span highlight' data-aligned-summaries='2'>Rooms are spacious</span> with <span class='review-span highlight' data-aligned-summaries='3 5'>free internet access</span> if you have a laptop (there is also a free access near the front desk) and.excellent breakfast! PS: <span class='review-span highlight' data-aligned-summaries='4'>The staff were incredibly friendly</span> and helpful</div><div class='text-box'>We are fussy and <span class='review-span highlight' data-aligned-summaries='0'>can't think of anything critical to say about this hotel</span>. Service, cleanliness, <span class='review-span highlight' data-aligned-summaries='2'>room size</span>, breakfast, <span class='review-span highlight' data-aligned-summaries='1'>location</span> and everything else <span class='review-span highlight' data-aligned-summaries='1 2'>were wonderful</span> and, considering the quality, <span class='review-span highlight' data-aligned-summaries='0'>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='4'>staff: respectful,professional</span> <span class='review-span highlight' data-aligned-summaries='1'>location : ideal</span> <span class='review-span highlight' data-aligned-summaries='2'>room</span>: <span class='review-span highlight' data-aligned-summaries='2'>standard.clean,cosy</span> <span class='review-span highlight' data-aligned-summaries='0'>price:reasonable</span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is a little bit pricey however it is well worth it and there is nothing at all to complain about.</span> <span id="1" class="summary-sentence">The location is ideal for those wanting to sight see, as everything is in walking distance from the hotel.</span> <span id="2" class="summary-sentence">The room in the hotel was very spacious and was overlooking the canal.</span> <span id="3" class="summary-sentence">Free wireless internet is also provided for guests.</span> <span id="4" class="summary-sentence">The staff were amiable and very professional, with a number of them able to speak different languages.</span> <span id="5" class="summary-sentence">The hotel offers free internet and also a printer if required.</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> | |