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, the Ambassade is beautifully decorated - <span class='review-span highlight' data-aligned-summaries='0'>we were open-mouthed at the quality of the furnishings</span>. <span class='review-span highlight' data-aligned-summaries='5'>And it was staffed with friendly, knowledgeable, multilingual employees</span>. <span class='review-span highlight' data-aligned-summaries='1'>The location was perfect -</span> <span class='review-span highlight' data-aligned-summaries='1 2'>we were within walking distance of museums, the Dam, the Red Light District, the Begjinhof</span>,<span class='review-span highlight' data-aligned-summaries='2'> great restaurants and bars</span> (we loved the Five Flies just around the corner, built in 1634). The breakfast was sumptuous, but seemed a bit pricey, 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='5'>The staff at reception were exceptionally, kind and help</span> and just couldn't do enough for us. Joost Van Der Kwaak led the charge here and was amazing. <span class='review-span highlight' data-aligned-summaries='3'>The</span> <span class='review-span highlight' data-aligned-summaries='0 3'>rooms are</span> <span class='review-span highlight' data-aligned-summaries='0'>divine,</span> <span class='review-span highlight' data-aligned-summaries='0 3'>very large</span> <span class='review-span highlight' data-aligned-summaries='0'>and beautifully decorated</span> - <span class='review-span highlight' data-aligned-summaries='0 3'>the most comfortable beds</span> <span class='review-span highlight' data-aligned-summaries='0'>and pillows</span> - we even managed to get <span class='review-span highlight' data-aligned-summaries='3'>a room with a superb view over the canal</span>. I loved the fact that <span class='review-span highlight' data-aligned-summaries='1 2'>everything is within walking distance - the museums</span>,<span class='review-span highlight' data-aligned-summaries='1'> flower market etc</span>. Will definitely go back. Yes it's a little pricey but well worth every penny!</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>. <span class='review-span highlight' data-aligned-summaries='3'>The room was</span> very nice and clean. We had a room <span class='review-span highlight' data-aligned-summaries='3'>overlooking the canal</span> so that made it even nicer. <span class='review-span highlight' data-aligned-summaries='6'>Free wireless internet in the room</span>. Nice clean bathroom. <span class='review-span highlight' data-aligned-summaries='0 3'>Comfortable bed</span>. <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>! No complaints at all.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 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 stylish rooms. They upgraded me to a better <span class='review-span highlight' data-aligned-summaries='3'>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 <span class='review-span highlight' data-aligned-summaries='0'>very comfortable hotel. One of the most comfortable rooms I have ever been in</span>. <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='4 6'>Free Internet</span> <span class='review-span highlight' data-aligned-summaries='6'>and a printer too</span> <span class='review-span highlight' data-aligned-summaries='4 6'>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='3'>Rooms are spacious</span> with <span class='review-span highlight' data-aligned-summaries='4 6'>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='5'>The staff were incredibly friendly and helpful</span></div><div class='text-box'>We are fussy and can't think of anything critical to say about this hotel. Service, cleanliness, <span class='review-span highlight' data-aligned-summaries='3'>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 3'>were wonderful</span> 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='0'>staff: respectful,professional</span> <span class='review-span highlight' data-aligned-summaries='0 1'>location : ideal</span> <span class='review-span highlight' data-aligned-summaries='0'>room: standard.clean,cosy price:reasonable</span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">Although it is quite an expensive hotel, it is great value for money as it is of high quality and makes for a really comfortable stay.</span> <span id="1" class="summary-sentence">For ease of sightseeing this hotel's location is perfect.</span> <span id="2" class="summary-sentence">All within walking distances are the Dam, museums, the Begjinhot, restaurants and bars and the Red Light District.</span> <span id="3" class="summary-sentence">The room was spacious and overlooking the canal and very comfortable beds.</span> <span id="4" class="summary-sentence">It also came with free internet access.</span> <span id="5" class="summary-sentence">The staff were very helpful and friendly.</span> <span id="6" class="summary-sentence">The hotel does offer free internet and if you need it you can use their printer.</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> | |