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'>- First thing is the location, no need for public transport, we could walk from hotel to anywhere. - <span class='review-span highlight' data-aligned-summaries='2'>No need for the expencive hotel breakfast 'cause</span> in the <span class='review-span highlight' data-aligned-summaries='1'>walking distance of 20-50 meters on the Rembrandt square</span> <span class='review-span highlight' data-aligned-summaries='2'>there are cheaper places to eat</span>. - We got a deal in the hotel and got one night for free. - In the same walking distance- on the rembrandt square- there are couple of clubs. I remember one was awesome, one was terrible, and in the third we couldn't enter, the tickets were sold out. And there is a great coffeshop just by the entrance of hotel :D - <span class='review-span highlight' data-aligned-summaries='0'>Very clean, tidy and a safe hotel for reasonable price</span>. <span class='review-span highlight' data-aligned-summaries='0'>-I'm definintely sleeping there again and recommending it</span> to friends.</div><div class='text-box'>Me and my boyfriend stayed here as a 30th Birthday treat and had a great time. <span class='review-span highlight' data-aligned-summaries='0'>The room was immaculate, and the bed amazingly comfortable</span> to the point that we did not leave it until lunch time on the first morning! And was just as hard on day two. Great location too. We paid for a cab from Central St on arrival but felt rather ripped of as it was a20 and was only a 5 minute ride. On the way back we caught a tram which was much cheaper (actually it was free as we did not realise you had to pay the driver when you got on!) and just as quick. <span class='review-span highlight' data-aligned-summaries='0'>Would definitely recommend this hotel</span> and will hopefully be going back in the near future!</div><div class='text-box'>the room was very small, but that's not the biggest problem - the receptionists were. the wifi at the lobby was very slow and the receptionists didnt even know how guests can log on (user name, password and patience required). but the worst was a french-speaking tall male receptionist who was extremely rude and made it very clear that he didnt like being asked about how to connect to the internet. he made condescending remarks in french about american tourists (and i'm not even american!). the carpet is filthy and so is the hotel's surroundings - noisy, crowded, and the street is disgusting after rain.</div><div class='text-box'>I booked this hotel after reading reviews on this site and Expedia, with a real priority for me being its cleanliness and quietness. It didn't disappoint on either count and had the added bonus of being in an excellent location - far enough away from the slightly too brash touristy bits but <span class='review-span highlight' data-aligned-summaries='1'>near enough as not to be a long walk from anywhere useful</span>. <span class='review-span highlight' data-aligned-summaries='0'>The modern room was nice and the bathroom was excellent</span>, although some might be surprised at the European practice of having no shower curtain so the bathroom floor gets a bit wet. <span class='review-span highlight' data-aligned-summaries='0'>I'd definitely book here again</span>.</div><div class='text-box'>The Hotel is perfectly placed for both travel and entertainment on the edge of Rembrandt Square. It is within very easy <span class='review-span highlight' data-aligned-summaries='0 1'>walking distance to everywhere in Central Amsterdam</span>, but sufficiently on the edge for it to be quiet at night. It has a first class seafood Bistro if you wish to eat in. It's main clientele are business and corporate, which should tell you a lot about the overall quality and respect this hotel has. <span class='review-span highlight' data-aligned-summaries='0'>This has been my hotel of choice</span>, even when travelling privately to Amsterdam with family.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>A good hotel bang in the centre of Amsterdam</span>. <span class='review-span highlight' data-aligned-summaries='0'>Rooms are clean</span> and modern and <span class='review-span highlight' data-aligned-summaries='0'>I will be staying there again</span>. A couple of things to note: My room had mosquitos (common for AMS this summer), they were fully booked so could not give me another room but did eventually find some fly spay so problem solved. <span class='review-span highlight' data-aligned-summaries='2'>Breakfast is expensive at EUR15</span>, just take a walk down the street and <span class='review-span highlight' data-aligned-summaries='2'>have a better breakfast in one of the cafes</span>.</div><div class='text-box'>We found our room the be of nice size and bothe the room and bath were easy to navigate in a wheelchair. <span class='review-span highlight' data-aligned-summaries='0'>The beds were compfortable and the room were nicely appointed</span>. The staff was most helpful with directions and other touristy information. The food in the restaurant's food was quite good with a nice selection. <span class='review-span highlight' data-aligned-summaries='0'>We would recommend the Eden Rembrandt Square</span> as our stay was quite good.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>The location of the hotel is excellent</span>. Its 5 mins from the Waterlooplein metro station and hence easily accessible. <span class='review-span highlight' data-aligned-summaries='0'>Room service was mediocre - the staff came to clean the room once in 3 days</span> in spite of a reminder. <span class='review-span highlight' data-aligned-summaries='0'>Hotel rooms were of good size</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> | |