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. <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</span>, great restaurants and bars (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. The staff at reception were exceptionally, 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, very large and beautifully decorated - the most comfortable beds and pillows</span> - 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>. <span class='review-span highlight' data-aligned-summaries='0'>Will definitely go back</span>. <span class='review-span highlight' data-aligned-summaries='2'>Yes 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 <span class='review-span highlight' data-aligned-summaries='0'>would definitely stay there again</span> 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. The location is also great, it was pretty much <span class='review-span highlight' data-aligned-summaries='0 1'>walking distance from everything we wanted to do</span>. <span class='review-span highlight' data-aligned-summaries='2'>It was pretty expensive, but I do believe you get what you pay for</span> - 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. 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. <span class='review-span highlight' data-aligned-summaries='0'>They upgraded me to a better room</span> with canal view. <span class='review-span highlight' data-aligned-summaries='0'>They respond to all e-mails, request</span>. 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>. Everything is perfect. <span class='review-span highlight' data-aligned-summaries='0'>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, close</span> (<span class='review-span highlight' data-aligned-summaries='1'>walking distance)</span> <span class='review-span highlight' data-aligned-summaries='0 1'>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: <span class='review-span highlight' data-aligned-summaries='0'>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 <span class='review-span highlight' data-aligned-summaries='0'>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, considering the quality, the cost was quite reasonable.</div><div class='text-box'>I stayed at the ambassade in Oct staff: respectful,professional <span class='review-span highlight' data-aligned-summaries='0'>location : ideal</span> room: standard.clean,cosy <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">The rooms of the hotel are clean and the hotel is definitely recommended.</span> <span id="1" class="summary-sentence">The hotel is in walking distance to the sights.</span> <span id="2" class="summary-sentence">Despite being quite pricey the breakfast was super tasty and sumptuous.</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> | |