lovodkin93's picture
upload the test html files
122b9cd verified
raw
history blame
12.1 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'>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. There is a simple lunch menu that they don't publicise and which <span class='review-span highlight' data-aligned-summaries='4'>you can eat in the breakfast room or roof terrace</span>. <span class='review-span highlight' data-aligned-summaries='1'>The location is excellent and on the edge of one of the best areas of Venice and is well removed from the tourist hordes</span>. 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='5'>It is expensive for it's size and services</span> though, 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. This is an excellent hotel.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Good location; enough off the beaten track to be quiet and relaxing but</span> <span class='review-span highlight' data-aligned-summaries='1 2'>a great short walk to Accademia and other sites</span>. If you like exploring places on foot its ideal. If you don't, <span class='review-span highlight' data-aligned-summaries='2'>the Vaporetto is on the door step and we had no problem getting anywhere in the city</span> 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='3'>Room was well maintained, clean</span> and pleasant. <span class='review-span highlight' data-aligned-summaries='4'>Breakfast was simple but excellent</span> (and filling). <span class='review-span highlight' data-aligned-summaries='0'>Would definitely go back there</span> if staying in Venice again.</div><div class='text-box'>The Ca Maria Adele is ideal in every respect. <span class='review-span highlight' data-aligned-summaries='1'>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='4'>Breakfast was especially satisfying in a tall room</span> 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. Recommended without any reservation whatever.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Just stop searching for the perfect hotel</span> in Venice because <span class='review-span highlight' data-aligned-summaries='0'>this is the one</span>. <span class='review-span highlight' data-aligned-summaries='1'>Right next to the Salute is an idyllic spot</span> with just twelve rooms. The staff are without exception helpful and no request is too small. The breakfast is a delight and can be served wherever suits your mood and the hotel has wonderful touches throughout. Each room is individualised and ours overlooked the canal. <span class='review-span highlight' data-aligned-summaries='1'>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. <span class='review-span highlight' data-aligned-summaries='2'>Take the Water Taxi transfer - the only way to travel</span>.Just ignore the tariff it is worth every penny. Enjoy.</div><div class='text-box'>Loved this small hotel, with a <span class='review-span highlight' data-aligned-summaries='1 2'>great location</span> on the Grand Canal and right <span class='review-span highlight' data-aligned-summaries='2'>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 <span class='review-span highlight' data-aligned-summaries='3'>be ready for a walk up the stairs to your room</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Paying attention to every detail</span>, this hotel was an experience 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! <span class='review-span highlight' data-aligned-summaries='4'>Breakfast was delicious</span> (though one staff member seemed absolutely miserable with her job) 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 <span class='review-span highlight' data-aligned-summaries='0'>hotel staff and owner were so attentive</span>. The room was incredible and so so charming. We were greeted by champagne and passion fruit within 5 minutes of walking into our hotel. <span class='review-span highlight' data-aligned-summaries='4'>The breakfast room</span> and <span class='review-span highlight' data-aligned-summaries='4'>the meal itself were just great</span>. All the recommendations given by the hotel staff were <span class='review-span highlight' data-aligned-summaries='4'>awesome</span>. Would LOVE LOVE to go back.</div><div class='text-box'>This is one of the best deals in Venice. The <span class='review-span highlight' data-aligned-summaries='5'>price is a little high</span>, but well worth it. This <span class='review-span highlight' data-aligned-summaries='1'>boutique hotel is in a</span> relatively <span class='review-span highlight' data-aligned-summaries='1 2'>quite spot</span> 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">This is a great stylish contemporary hotel that pays attention to every detail and one that cannot be recommended enough.</span> <span id="1" class="summary-sentence">This boutique hotel is perfectly located because it is on the edge of one of the greatest areas and away from tourist hordes, making it quiet.</span> <span id="2" class="summary-sentence">Despite the calm location it isn't too far away from good sight-seeing spots and there is no problem getting around the city.</span> <span id="3" class="summary-sentence">The rooms are well-maintained and clean, but there is quite a walk up to the room if staying on the top floor. .</span> <span id="4" class="summary-sentence">The breakfast is of the highest quality, and there is the option to eat in either the breakfast room or the roof terrace.</span> <span id="5" class="summary-sentence">The stay at the hotel was a little expensive.</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>