lovodkin93's picture
upload the test html files
122b9cd verified
raw
history blame
13 kB
<!DOCTYPE html>
<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 !important; /* Dark grey for muted text */
cursor: pointer;}
.not-hover-highlight { background-color: lightyellow;
color: #606060 !important; /* 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='1'>The decoration and design is excellent</span>, as are the staff. The roof terrace, lounge and breakfast room have real distinction. The public areas are small. There is a simple lunch menu that they don't publicise and which <span class='review-span highlight' data-aligned-summaries='7'>you can eat in the breakfast room or roof terrace</span>. <span class='review-span highlight' data-aligned-summaries='3 4'>The location is</span> <span class='review-span highlight' data-aligned-summaries='3'>excellent and on the edge of one of the best areas of Venice</span> and is <span class='review-span highlight' data-aligned-summaries='4'>well removed from the tourist hordes</span>. <span class='review-span highlight' data-aligned-summaries='5'>The room was less distinct than the public areas but that is not to complaint</span>. In many other hotels it would be excellent. <span class='review-span highlight' data-aligned-summaries='0'>It is expensive for it's size and services though</span>, but I'm still very glad I stayed there. 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='0'>This is an excellent hotel</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='3'>Good location</span>; enough <span class='review-span highlight' data-aligned-summaries='4'>off the beaten track</span> to be <span class='review-span highlight' data-aligned-summaries='4'>quiet and relaxing</span> but a great <span class='review-span highlight' data-aligned-summaries='4'>short walk to Accademia and other sites</span>. If you like exploring places on foot its ideal. If you don't, the Vaporetto is on the door step 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='1'>good style mixture of</span> <span class='review-span highlight' data-aligned-summaries='1 2'>contemporary</span> <span class='review-span highlight' data-aligned-summaries='1'>blending</span> <span class='review-span highlight' data-aligned-summaries='1 2'>with</span> the <span class='review-span highlight' data-aligned-summaries='1 2'>traditional</span> <span class='review-span highlight' data-aligned-summaries='2'>with a couple of quirky bits thrown in</span> (the light sconces in the lounge!). Very friendly and helpful, low key staff. <span class='review-span highlight' data-aligned-summaries='5'>Room was well maintained</span>, <span class='review-span highlight' data-aligned-summaries='5'>clean</span> and pleasant. <span class='review-span highlight' data-aligned-summaries='7'>Breakfast was simple</span> but <span class='review-span highlight' data-aligned-summaries='7'>excellent</span> (and filling). Would definitely go back there if staying in Venice again.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>The Ca Maria Adele is ideal in every respect</span>. <span class='review-span highlight' data-aligned-summaries='4'>It sits on a quiet little canal</span> 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. <span class='review-span highlight' data-aligned-summaries='7'>Breakfast was especially satisfying</span> in a tall room that spangled with Venetian ornament. The hotel felt very personal, it was like staying at the home of a friend. 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='0'>Recommended without any reservation</span> whatever.</div><div class='text-box'>Just stop searching for <span class='review-span highlight' data-aligned-summaries='0'>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='7'>The breakfast is a delight</span> and can be served wherever suits your mood and the hotel has wonderful touches throughout. <span class='review-span highlight' data-aligned-summaries='6'>Each room is individualised 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.Just ignore the tariff it is worth every penny. Enjoy.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Loved this small hotel</span>, with <span class='review-span highlight' data-aligned-summaries='3'>a great location on the Grand Canal</span> and <span class='review-span highlight' data-aligned-summaries='3'>right next door to the Salute Church</span>. The staff were polite and very helpful, 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. Close to San Marco Square. If you stay on the top floor be ready for a walk up the stairs to your room.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='2'>Paying attention to every detail,</span> <span class='review-span highlight' data-aligned-summaries='0 2'>this hotel was an experience of its own</span>. The White Room on the bottom floor was spectacular, the room service was top notch, <span class='review-span highlight' data-aligned-summaries='0'>the views from all points of the hotel were nearly fantastical</span>! <span class='review-span highlight' data-aligned-summaries='7'>Breakfast was delicious (though one staff member seemed absolutely miserable with her job</span>) and the always stocked minibar was so refershing during the hot summer days!</div><div class='text-box'>We loved the Ca Maria Adele. The hotel staff and owner were so attentive. The room was incredible and so so charming. <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. <span class='review-span highlight' data-aligned-summaries='7'>The breakfast room and the meal itself were just great</span>. 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='0'>This is one of the best deals in Venice</span>. The price is a little high, but well worth it. This boutique <span class='review-span highlight' data-aligned-summaries='4'>hotel is in a relatively quite spot</span> and still only a stop or 2 from San Marco.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is an exquisite hotel that is highly recommended.</span> <span id="1" class="summary-sentence">The decor has an excellent mix of contemporary and traditional design that will appeal to the majority.</span> <span id="2" class="summary-sentence">They have paid attention to every detail when designing this hotel.</span> <span id="3" class="summary-sentence">Great location for those wanting a good base to go on and sight see, as it is close to many of the tourist attractions.</span> <span id="4" class="summary-sentence">Most sites are walking distance from the hotel, yet the hotel itself is in a more remote location that offers guests peace and quiet if they choose it.</span> <span id="5" class="summary-sentence">The rooms are very well maintained and clean and though not as distinct as the public areas is unique in its own right.</span> <span id="6" class="summary-sentence">Some overlook the canal.</span><span id="7" class="summary-sentence">Breakfast is little bit lacking but tasted good.</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>