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'><span class='review-span highlight' data-aligned-summaries='1'>Located on the Herengracht, one of the old canal rings encircling the city</span>, the Ambassade is beautifully decorated - we were open-mouthed at the quality of the furnishings. And it was staffed with friendly, knowledgeable, multilingual employees. <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). <span class='review-span highlight' data-aligned-summaries='2'>The breakfast was sumptuous, but seemed a bit pricey</span>, so we only tried it once. WE stayed for 3 nights, and <span class='review-span highlight' data-aligned-summaries='0'>wouldn't hesitate to recommend it.</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='0'>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. <span class='review-span highlight' data-aligned-summaries='0'>The rooms are divine</span>, 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='1'>everything is within walking distance - the museums, 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. The staff was very friendly and professional. <span class='review-span highlight' data-aligned-summaries='0'>The room was very nice and clean</span>. We had a room overlooking the canal so that made it even nicer. Free wireless internet in the room. 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>. It was pretty expensive, but I do believe you get what you pay for - high quality! 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. <span class='review-span highlight' data-aligned-summaries='0'>They rent bicycles</span> 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. They are 100%.</div><div class='text-box'>Spent a night at this very comfortable hotel. <span class='review-span highlight' data-aligned-summaries='0'>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>. <span class='review-span highlight' data-aligned-summaries='1'>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='1'>Right in the center, close (walking distance) to 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='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='0'>can't think of anything critical to say about this hotel</span>. Service, <span class='review-span highlight' data-aligned-summaries='0'>cleanliness</span>, room size, <span class='review-span highlight' data-aligned-summaries='2'>breakfast</span>, location and everything else <span class='review-span highlight' data-aligned-summaries='2'>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</span>,professional <span class='review-span highlight' data-aligned-summaries='0'>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">This is a highly recommended hotel with clean modern rooms.</span> <span id="1" class="summary-sentence">Additionally the hotel is peacefully located but close enough to walk to the centre of the city.</span> <span id="2" class="summary-sentence">The breakfast provided in the hotel was quite good too.</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> | |