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: 30%; | |
| font-size: 1.0rem; | |
| padding: 10px; | |
| height: 40vh; /* 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: 40vh; /* 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='0 4'>Everything is of superb quality in this hotel</span> <span class='review-span highlight' data-aligned-summaries='4'>and you can really see the thoughts they put into each detail - from the light switch to where the sockets are placed</span>. <span class='review-span highlight' data-aligned-summaries='2'>We went for the highest room (Casa Nova) in the hotel which has a sky window</span> that opens up to see the sky at night, it was very romantic. <span class='review-span highlight' data-aligned-summaries='3'>Breakfast was truly a gem - the croissants are made fresh</span> and they tasted super delicious. There are only two tables that are out on the balcony so <span class='review-span highlight' data-aligned-summaries='3'>people have to wait for the outdoor tables</span>. They offer free water taxi rides to the glass factory on Murano island, but it was a complete waste of time. Transport organized by the hotel to the island was perfect, but the hotel didn't arrange our transportation back and we were stuff with like 10 other people in small boat which made us completely soaked on our way back. The boat did not stop back at our hotel but just dropped us off, all soaked, at St. Mark's Square. It was the worst boat ride. Avoid the hotel's free ticket to Murano at all, you can better spend your time in Venice doing something else.</div><div class='text-box'>We had originally booked our rooms at the Hotel Antiche Figure, however when we arrived at the hotel the manager told us that he had another hotel that they were attempting to fill with guests right down the street, it was another property that they owned that had recently opened up. .He told us that if we wanted to stay there instead of the Antiche Figure he would upgrade everyone's rooms. When we saw the property and the rooms, we just couldn't say no. The manager put us in four <span class='review-span highlight' data-aligned-summaries='0 1'>incredible rooms beautifully decorated in an antique Venetian style</span>,<span class='review-span highlight' data-aligned-summaries='1'> yet with very modern facilities</span>. <span class='review-span highlight' data-aligned-summaries='1'>ie</span> Wireless. <span class='review-span highlight' data-aligned-summaries='1'>flat screen tv's hidden behind mirrors</span> etc, plus the rooms had amazing views onto the canal, or the square. which was wonderfully quiet. This place is beautiful. I would highly reccomend staying here. especially if you are American. <span class='review-span highlight' data-aligned-summaries='4'>the service of the staff is completely up to par with American standards. and on that matter they excel on sevice standards</span>.</div><div class='text-box'>I love it when Tripadvisor reviews point me in the right direction. Venice was one of the stops on my honeymoon and <span class='review-span highlight' data-aligned-summaries='4'>the staff</span>, <span class='review-span highlight' data-aligned-summaries='4'>amenities</span>, <span class='review-span highlight' data-aligned-summaries='4'>and location</span> of Hotel Canal Grande <span class='review-span highlight' data-aligned-summaries='4'>does not disappoint</span>! From the check-in, Gianni welcomed us with a detailed map, suggested walking paths, and a little joke: "call this number and we can come get you. free! if you call after 10pm, we will think you are drunk and we will come get you.for a charge." Here are other highlights: - free wifi - free bottle of prosecco on the house - free <span class='review-span highlight' data-aligned-summaries='3'>hotel breakfast</span> (which you can eat on the terrace, watching the boats go by) - <span class='review-span highlight' data-aligned-summaries='1'>modern amenities which complement</span> seamlessly with <span class='review-span highlight' data-aligned-summaries='1'>the rococco interiors</span> - excellent service (when we couldn't find the local laundromat, they sent an employee of a *sister* hotel to check that it was open and then escort us there- fabulous!)</div><div class='text-box'>Convenient location to everything and easy to find. Make sure to print out directions to the hotel for your arrival. <span class='review-span highlight' data-aligned-summaries='0'>The rooms were elegant and comfortable</span>. <span class='review-span highlight' data-aligned-summaries='3'>Nice breakfast in the morning</span>. <span class='review-span highlight' data-aligned-summaries='4'>The staff were pleasant and very helpful</span>. Our last night there <span class='review-span highlight' data-aligned-summaries='4'>our neighbours were noisy and vulgar, the staff</span> did try and control the situation and <span class='review-span highlight' data-aligned-summaries='4'>more than compensated us</span> the next day. Despite this we wouldn't hesitate to stay again.</div><div class='text-box'>.what the other reviewers say. Just book & enjoy, if you can. The <span class='review-span highlight' data-aligned-summaries='4'>only negative experiences</span> from our 2 nights in the Doge room <span class='review-span highlight' data-aligned-summaries='4'>was a somewhat unpleasant and unhelpful interaction with the night clerk, and a another situation in which some other employee spent ages finding information</span> on the vaporetti schedule <span class='review-span highlight' data-aligned-summaries='4'>that in the end were just plain wrong</span>. Still 4/5 for service, as the rest of the staff were marvelous.</div><div class='text-box'>I stayed 3 nights in Canal Grande. A gem in Venice, near Piazzale Roma where i parked my car, near a vaporetto stop, great staff, <span class='review-span highlight' data-aligned-summaries='3'>great breakfast</span> and great room " Accademia". <span class='review-span highlight' data-aligned-summaries='0'>If you are looking for a hotel to stay in Venice</span>, dont think about it.<span class='review-span highlight' data-aligned-summaries='0'>Stay in Canal Grande</span>. Perfect!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 4'>Simply the best hotel we've ever stayed at</span>! Great location, great room, great view, <span class='review-span highlight' data-aligned-summaries='3'>great breakfast</span>. Unbelievable value. The management and staff made us feel so welcome, without a doubt we would return again. Thank you.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>just brilliant, can't spot one error</span>. <span class='review-span highlight' data-aligned-summaries='4'>every need is looked after</span> a bargain of a hotel and gr8 stuff.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a beautiful hotel and possibly one of the best out there.</span> <span id="1" class="summary-sentence">The rooms in the hotel are decorated in a typical Venetian style, but with modern design twist, such as mirrors housing televisions.</span> <span id="2" class="summary-sentence">The highest room available in the hotel has a sky window which was very quiet too.</span> <span id="3" class="summary-sentence">The breakfasts at the hotel were made fresh and could be enjoyed on the terrace.</span> <span id="4" class="summary-sentence">This is a hotel of high standards and qualities and everything seems to be really thought through such as where the plug sockets are place and even the light switch.</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'); | |
| console.log('entered!'); | |
| } | |
| }); | |
| 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'); | |
| console.log('left!'); | |
| } | |
| 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> | |