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'>Great Location Stayed at the Brunelleschi in late December. <span class='review-span highlight' data-aligned-summaries='0'>The location was terrific, the breakfast hearty, and the rooms large</span> and above average for Italy for the price. Turn two corners and you are in the piazza next to Giotto's campanile. As an american who speaks fluent italian, and a mother of 3, I never go to Italy to sleep in 5 star resort hotels. <span class='review-span highlight' data-aligned-summaries='0'>This hotel could never be compared to the Four Seasons, but,</span> <span class='review-span highlight' data-aligned-summaries='0 1'>in Florence, it was the perfect place</span> <span class='review-span highlight' data-aligned-summaries='1'>to start and end each day</span>.</div><div class='text-box'>Lovely hotel We stayed here for my husband's birthday weekend. We're ususally more 3* hotel people so this was a bit of a treat, but it was worth every penny. <span class='review-span highlight' data-aligned-summaries='0'>The hotel is beautiful</span> - such a lovely building and a GREAT location. The staff were unfailingly polite as we checked in and went to the bar. Our room was a good size with an ENORMOUS bathroom, and views of the campanile. Breakfast was excellent.<span class='review-span highlight' data-aligned-summaries='0 1'>I found the hotel pretty much faultless</span>.<span class='review-span highlight' data-aligned-summaries='1'> And Florence? Just beautiful</span>.</div><div class='text-box'>Great location, great staff! <span class='review-span highlight' data-aligned-summaries='0 1'>This hotel was a real find</span>! We loved the location and the front desk staff was the friendliest in Italy! The breakfast buffet was also excellent! This hotel was in a quiet alley, just steps from the Duomo and the best shopping in Florence! <span class='review-span highlight' data-aligned-summaries='0 4'>The only negative was the multiple levels on the different floors</span>,<span class='review-span highlight' data-aligned-summaries='4'> making it difficult to get around in the hotel</span>. A minor inconvenience for an otherwise excellent hotel.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Wonderful stay in</span> Florence Hotel Brunelleschi is <span class='review-span highlight' data-aligned-summaries='0 1'>a lovely hotel in an excellent location in the heart of Florence</span>. The rooms are brilliant , although <span class='review-span highlight' data-aligned-summaries='2'>the bells of the Duomo wake you up early in the morning</span>! All the staff are very helpful and can make good suggestions for eating out - I had the best sea bass I have ever had from one of their recommendations. <span class='review-span highlight' data-aligned-summaries='1'>I would thoroughly recommend a stay</span> at this delightful hotel.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>great location,if a little noisy lovely hotel</span>,very friendly helpful staffright in the middle of all the actionwe had a suite,which had a separete bedroom(very handy)clean,very good choice on buffet breakfastonly down side was our room was on the front of the hotelwhich is on one of the main streets.so bin men and road sweepers could be heard ealy in the morninggood value more money</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Great experience</span>! My friend and I stayed for 4 nights. <span class='review-span highlight' data-aligned-summaries='0 1'>We had no complaints whatsoever</span>. The service, staff, cleanliness, comfort etc were all exemplary. Special tip: <span class='review-span highlight' data-aligned-summaries='3'>bring a picnic lunch up to the rooftop terrace and get a breathtaking view of the city</span>. The view of the Duomo there by sunrise is sublime.</div><div class='text-box'>only <span class='review-span highlight' data-aligned-summaries='0 1'>Brunelleschi is the only one who could have build something better</span>! a portion of our large room</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>Brunelleschi was Perfect</span>! <span class='review-span highlight' data-aligned-summaries='3'>View from Rooftop</span> Patio</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The stay at the hotel was a brilliant experience and there were no faults .</span> <span id="1" class="summary-sentence">It was an impeccable choice to stay in Florence and was highly recommended.</span> <span id="2" class="summary-sentence">It is worth noting that you can clearly hear the bells from the Duomo in the morning, which may be a negative for some.</span> <span id="3" class="summary-sentence">Eating lunch on the rooftop terrace is a nice way to get a gorgeous view of the city.</span> <span id="4" class="summary-sentence">There were multiple levels on different levels, which could often make it difficult to get around the hotel.</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> | |