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'>The decoration and design is excellent, as are the staff. The roof terrace, lounge and breakfast room have real distinction. The public areas are small. <span class='review-span highlight' data-aligned-summaries='5'>There is a simple lunch menu that they don't publicise and which you can eat in the breakfast room or roof terrace</span>. <span class='review-span highlight' data-aligned-summaries='2'>The location is excellent</span> and on the edge of one of the best areas of Venice and is well removed from the tourist hordes. The room was less distinct than the public areas but that is not to complaint. In many other hotels it would be excellent. <span class='review-span highlight' data-aligned-summaries='7'>It is expensive for it's size and services</span> though, but <span class='review-span highlight' data-aligned-summaries='1'>I'm still very glad I stayed there</span>. Don't pre book their river taxi from the airport: it is too expensive and a far more complex arrangement than simply getting a private water taxi at the airport on arrival. <span class='review-span highlight' data-aligned-summaries='1'>This is an excellent hotel</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='2'>Good location</span>; enough off the beaten track to be quiet and relaxing but a great short walk to Accademia and other sites. If you like exploring places on foot its ideal. If you don't, <span class='review-span highlight' data-aligned-summaries='3'>the Vaporetto is on the door step</span> and we had no problem getting anywhere in the city and the islands using it. Hotel was our kind of place; <span class='review-span highlight' data-aligned-summaries='0'>good style mixture of contemporary blending with the traditional</span> with a couple of quirky bits thrown in (the light sconces in the lounge!). Very friendly and helpful, low key staff. <span class='review-span highlight' data-aligned-summaries='4'>Room was</span> well maintained, <span class='review-span highlight' data-aligned-summaries='4'>clean</span> and pleasant. <span class='review-span highlight' data-aligned-summaries='5'>Breakfast was simple</span> but excellent (and filling). Would definitely go back there if staying in Venice again.</div><div class='text-box'>The Ca Maria Adele is ideal in every respect. It sits on a quiet little canal just behind the magnificent Chiesa di Santa Maria and not far from the Accademia. The staff was very friendly, treated its guests with real coridality and were brimming with suggestions and assistance. Breakfast was especially satisfying in a tall room that spangled with Venetian ornament. <span class='review-span highlight' data-aligned-summaries='1'>The hotel felt very personal, it was like staying at the home of a friend</span>. Who should stay here? Couples, old or young, families, no matter the size, single folk, businessmen. I look forward to going back to Venice and when I do so staying at the Ca Maria Adele. <span class='review-span highlight' data-aligned-summaries='1'>Recommended without any reservation whatever</span>.</div><div class='text-box'>Just stop searching for <span class='review-span highlight' data-aligned-summaries='1'>the perfect hotel in Venice</span> because this is the one. Right next to the Salute is an idyllic spot with just twelve rooms. The staff are without exception helpful and no request is too small. <span class='review-span highlight' data-aligned-summaries='5'>The breakfast is a delight and can be served wherever suits your mood</span> and the hotel has wonderful touches throughout. <span class='review-span highlight' data-aligned-summaries='1 2 4'>Each room is individualised</span> <span class='review-span highlight' data-aligned-summaries='2 4'>and ours overlooked the canal</span>. <span class='review-span highlight' data-aligned-summaries='3'>A minute from the vaparetto stop and close to a number of super Art Galleries</span> . Lovely little restaurant was recommended and did not disappoint. Take the Water Taxi transfer - the only way to travel.<span class='review-span highlight' data-aligned-summaries='7'>Just ignore the tariff it is worth every penny</span>. Enjoy.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Loved this small hotel, with</span> <span class='review-span highlight' data-aligned-summaries='1 2'>a great location on the Grand Canal</span> <span class='review-span highlight' data-aligned-summaries='2'>and right next door to the Salute Church</span>. <span class='review-span highlight' data-aligned-summaries='1'>The staff were polite and very helpful</span>, no problems with the English language. Will never forget the Saturday night when the Salute bells were ringing followed by all the church bells around Venice. <span class='review-span highlight' data-aligned-summaries='2'>Close to San Marco Square</span>. If you stay on the top floor be ready for a walk up the stairs to your room.</div><div class='text-box'>Paying attention to every detail, this <span class='review-span highlight' data-aligned-summaries='0'>hotel was an experience</span> of its own. The White Room on the bottom floor was spectacular, the room service was top notch, the views from all points of the hotel were nearly fantastical! Breakfast was delicious (though one staff member seemed absolutely miserable with her job) and the <span class='review-span highlight' data-aligned-summaries='6'>always stocked minibar</span> was so refershing during the hot summer days!</div><div class='text-box'>We loved the Ca Maria Adele. <span class='review-span highlight' data-aligned-summaries='1'>The hotel staff and owner were so attentive. The room was incredible and so so charming</span>. <span class='review-span highlight' data-aligned-summaries='0'>We were greeted by champagne and passion fruit within 5 minutes</span> of walking into our hotel. The breakfast room and the meal itself were just great. All the recommendations given by the hotel staff were awesome. Would LOVE LOVE to go back.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>This is one of the best deals in Venice</span>. <span class='review-span highlight' data-aligned-summaries='7'>The price is a little high</span>, but <span class='review-span highlight' data-aligned-summaries='7'>well worth it</span>. <span class='review-span highlight' data-aligned-summaries='2'>This</span> boutique <span class='review-span highlight' data-aligned-summaries='2'>hotel is</span> in a relatively quite spot and still <span class='review-span highlight' data-aligned-summaries='2'>only a stop or 2 from San Marco</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel was a unique experience with traditional and modern features.</span> <span id="1" class="summary-sentence">A stay at the hotel comes highly recommended.</span> <span id="2" class="summary-sentence">The hotel is situated in an excellent location on the Grand Canal, only a couple of stops to San Marco Square and near to the Salute Church.</span> <span id="3" class="summary-sentence">It is close to a number of art galleries and the Vaporetto.</span> <span id="4" class="summary-sentence">The hotel has rooms overlooking the canal that are nice and clean.</span> <span id="5" class="summary-sentence">The hotel has a simple menu which can be served wherever you like.</span> <span id="6" class="summary-sentence">The minibar is always stocked for guests.</span> <span id="7" class="summary-sentence">Despite being a bit overpriced the hotel did live up to that expectation, so it was worth it.</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> | |