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 - we were open-mouthed at the quality of the furnishings. And it was staffed with friendly, knowledgeable, multilingual employees. The <span class='review-span highlight' data-aligned-summaries='0'>location</span> was perfect - we were <span class='review-span highlight' data-aligned-summaries='0'>within walking distance of museums</span>, the Dam, the Red Light District, the Begjinhof, <span class='review-span highlight' data-aligned-summaries='0'>great restaurants</span> and bars (we loved the Five Flies just around the corner, built in 1634). The <span class='review-span highlight' data-aligned-summaries='1'>breakfast was sumptuous</span>, but seemed a bit <span class='review-span highlight' data-aligned-summaries='1'>pricey</span>, so we only tried it once. WE stayed for 3 nights, and <span class='review-span highlight' data-aligned-summaries='2'>wouldn't hesitate to recommend</span> 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='2'>The staff at reception were exceptionally</span>, kind and help and just couldn't do enough for us. Joost Van Der Kwaak led the charge here and was amazing. The rooms are divine, very large and beautifully decorated - the most comfortable beds and pillows - we even managed to get a room with a superb view over the canal. I loved the fact that <span class='review-span highlight' data-aligned-summaries='0 2'>everything is within walking distance</span> - the museums, flower market etc. 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. The staff was very friendly and professional. <span class='review-span highlight' data-aligned-summaries='0'>The room was very</span> nice and <span class='review-span highlight' data-aligned-summaries='0'>clean</span>. We had a room overlooking the canal so that made it even nicer. Free wireless internet in the room. <span class='review-span highlight' data-aligned-summaries='0'>Nice clean bathroom</span>. Comfortable bed. <span class='review-span highlight' data-aligned-summaries='0'>The location is also great, it was pretty much walking distance from everything we wanted to do</span>. It was pretty expensive, but I do believe <span class='review-span highlight' data-aligned-summaries='2'>you get what you pay for - high quality</span>! No complaints at all.</div><div class='text-box'>The staff was amazingly handy in every aspect. 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 room with canal view. They respond to all e-mails, request. <span class='review-span highlight' data-aligned-summaries='2'>They are 100%</span>.</div><div class='text-box'>Spent a night at this very comfortable hotel. <span class='review-span highlight' data-aligned-summaries='2'>One of the most comfortable rooms I have ever been in</span>. Everything is perfect. <span class='review-span highlight' data-aligned-summaries='2'>Hotel is centrally located bu quiet</span>. 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. Free Internet and a printer too if you need it.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Right in the center,</span> <span class='review-span highlight' data-aligned-summaries='0 2'>close</span> <span class='review-span highlight' data-aligned-summaries='0'>(walking distance) to</span> <span class='review-span highlight' data-aligned-summaries='0 2'>everything you had to see in Amsterdam</span>, <span class='review-span highlight' data-aligned-summaries='0'>bathroom is very, very clean</span>. Rooms are spacious with free internet access if you have a laptop (there is also a free access near the front desk) <span class='review-span highlight' data-aligned-summaries='1 2'>and.excellent breakfast</span>! PS: The staff were incredibly friendly and helpful</div><div class='text-box'>We are fussy and <span class='review-span highlight' data-aligned-summaries='2'>can't think of anything critical to say about this hotel</span>. Service, cleanliness, room size, <span class='review-span highlight' data-aligned-summaries='1'>breakfast</span>, location and everything else <span class='review-span highlight' data-aligned-summaries='1'>were wonderful</span> and, considering the quality, the cost was quite reasonable.</div><div class='text-box'>I stayed at the ambassade in Oct <span class='review-span highlight' data-aligned-summaries='2'>staff: respectful,professional location : ideal</span> room: standard.clean,cosy price:reasonable</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The rooms at this hotel are very clean and the location is within walking distance to everywhere you'd want to go.</span> <span id="1" class="summary-sentence">The breakfast here is lovely, however it is quite expensive.</span> <span id="2" class="summary-sentence">Highly recommended.</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> | |