lovodkin93's picture
upload the test html files
122b9cd verified
raw
history blame
12.7 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'>Everything is of superb quality in this hotel and <span class='review-span highlight' data-aligned-summaries='8'>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='3'>We went for the highest room</span> (Casa Nova) <span class='review-span highlight' data-aligned-summaries='3'>in the hotel which has a sky window that opens up to see the sky at night</span>, it was very romantic. <span class='review-span highlight' data-aligned-summaries='5'>Breakfast was truly a gem</span> - <span class='review-span highlight' data-aligned-summaries='6'>the croissants are made fresh and they tasted super delicious</span>. There are only two tables that are out on the balcony so people have to wait for the outdoor tables. <span class='review-span highlight' data-aligned-summaries='2'>They offer free water taxi rides to the glass factory on Murano island, but it was a complete waste of time</span>. 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. <span class='review-span highlight' data-aligned-summaries='2'>Avoid the hotel's free ticket to Murano</span> 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 <span class='review-span highlight' data-aligned-summaries='7'>the manager told us that</span> 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 <span class='review-span highlight' data-aligned-summaries='7'>he would upgrade everyone's rooms</span>. When we saw the property and the rooms, <span class='review-span highlight' data-aligned-summaries='7'>we just couldn't say no</span>. The manager put us in four <span class='review-span highlight' data-aligned-summaries='3'>incredible rooms beautifully decorated in an antique Venetian style</span>, yet with very modern facilities. ie Wireless. <span class='review-span highlight' data-aligned-summaries='4'>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. <span class='review-span highlight' data-aligned-summaries='0'>This place is beautiful</span>. I would highly reccomend staying here. especially if you are American. the service of <span class='review-span highlight' data-aligned-summaries='5'>the staff</span> is completely up to par with American standards. and on that matter they <span class='review-span highlight' data-aligned-summaries='5'>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 the staff, amenities, <span class='review-span highlight' data-aligned-summaries='1'>and location of Hotel Canal Grande does not disappoint</span>! From the check-in, Gianni welcomed us with a detailed map, <span class='review-span highlight' data-aligned-summaries='1'>suggested walking paths</span>, and a little joke: "call this number and we can come get you. free! if you call after 10pm, <span class='review-span highlight' data-aligned-summaries='7'>we will think you are drunk and we will come get you.for a charge</span>." Here are other highlights: - free wifi - free bottle of prosecco on the house - <span class='review-span highlight' data-aligned-summaries='5'>free hotel breakfast (which you can eat on the terrace</span>, watching the boats go by) - modern amenities which complement seamlessly with the rococco interiors - <span class='review-span highlight' data-aligned-summaries='5'>excellent service</span> (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'><span class='review-span highlight' data-aligned-summaries='0'>Convenient location</span> 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='3'>The rooms were elegant</span> and comfortable. <span class='review-span highlight' data-aligned-summaries='5'>Nice breakfast</span> in the morning. The <span class='review-span highlight' data-aligned-summaries='5'>staff were</span> pleasant and very <span class='review-span highlight' data-aligned-summaries='5'>helpful</span>. Our last night there our neighbours were noisy and vulgar, the staff did try and control the situation and more than compensated us 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 only negative experiences from our 2 nights in the Doge room was a <span class='review-span highlight' data-aligned-summaries='5'>somewhat unpleasant and unhelpful interaction with the night clerk</span>, <span class='review-span highlight' data-aligned-summaries='5'>and</span> a <span class='review-span highlight' data-aligned-summaries='5'>another situation in which some other employee spent ages finding information</span> on the vaporetti schedule <span class='review-span highlight' data-aligned-summaries='5'>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='6'>great</span> <span class='review-span highlight' data-aligned-summaries='5 6'>breakfast</span> and great room " Accademia". If you are looking for a hotel to stay in Venice, dont think about it.Stay in Canal Grande. Perfect!</div><div class='text-box'>Simply the best hotel we've ever stayed at! <span class='review-span highlight' data-aligned-summaries='1'>Great location</span>, great room, great view, great breakfast. 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'>just brilliant, can't spot one error. <span class='review-span highlight' data-aligned-summaries='7'>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">The hotel setting is beautiful but it's an uncomfortable boat ride to get there.</span> <span id="1" class="summary-sentence">Good location with walking paths in close proximity to the hotel.</span> <span id="2" class="summary-sentence">Free water taxis can be taken also, however they are not highly recommended.</span> <span id="3" class="summary-sentence">The Venetian-style rooms are absolutely beautiful and had a sky-window to allow you to view the sky at nighttime.</span> <span id="4" class="summary-sentence">There are flat-screen televisions hidden behind mirrors which is a unique touch.</span> <span id="5" class="summary-sentence">Some of the staff were unhelpful, The complimentary breakfast can be eaten on the terrace and it is an absolute gem.</span> <span id="6" class="summary-sentence">The croissants are clearly made fresh and so they tasted amazing.</span> <span id="7" class="summary-sentence">The hotel will look after guests late at night if you need collection for a charge.</span> <span id="8" class="summary-sentence">The attention to detail goes all the way down simple fixtures like light fittings etc.</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>