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='0'>Everything is of superb quality in this hotel</span> <span class='review-span highlight' data-aligned-summaries='9'>and 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 (Casa Nova) in the hotel which has a sky window that opens up to see the sky at night, it was very romantic</span>. <span class='review-span highlight' data-aligned-summaries='6'>Breakfast was truly a gem</span> <span class='review-span highlight' data-aligned-summaries='7'>- the croissants are made fresh</span> and they <span class='review-span highlight' data-aligned-summaries='6'>tasted super delicious</span>. There are only two tables that are out on the balcony so people have to wait for the outdoor tables. They offer free water taxi rides to the glass factory on Murano island, but it was a complete waste of time. 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. Avoid the hotel's free ticket to Murano 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 the manager told us that 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 he would upgrade everyone's rooms. When we saw the property and the rooms, we just couldn't say no. <span class='review-span highlight' data-aligned-summaries='0'>The manager put us in four</span> <span class='review-span highlight' data-aligned-summaries='0 2 4'>incredible rooms beautifully</span> <span class='review-span highlight' data-aligned-summaries='2 4'>decorated in an antique Venetian style, yet with very modern facilities. ie Wireless. flat screen tv's hidden behind mirrors etc</span>,<span class='review-span highlight' data-aligned-summaries='2'></span> plus <span class='review-span highlight' data-aligned-summaries='2'>the</span> <span class='review-span highlight' data-aligned-summaries='0 2'>rooms had amazing views onto the canal</span>, or the square. which was wonderfully quiet. <span class='review-span highlight' data-aligned-summaries='0 1'>This place is beautiful</span>.<span class='review-span highlight' data-aligned-summaries='0'> I would highly reccomend staying here</span>. especially if you are American. <span class='review-span highlight' data-aligned-summaries='8'>the service of the staff is completely up to par with American standards. and on that matter they 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 <span class='review-span highlight' data-aligned-summaries='5'>the staff, amenities</span>, and location of Hotel Canal Grande <span class='review-span highlight' data-aligned-summaries='5'>does not disappoint</span>! From the check-in, <span class='review-span highlight' data-aligned-summaries='1'>Gianni welcomed us with a detailed map, suggested walking paths</span>, and a little joke: "call this number and we can come get you. free! if you call after 10pm, we will think you are drunk and we will come get you.for a charge." Here are other highlights: - free wifi - <span class='review-span highlight' data-aligned-summaries='7'>free bottle of prosecco on the house</span> - free hotel breakfast (which you can eat on the terrace, watching the boats go by) - <span class='review-span highlight' data-aligned-summaries='4'>modern amenities which complement seamlessly with the rococco interiors - 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'>Convenient location to everything and easy to find. Make sure to <span class='review-span highlight' data-aligned-summaries='1'>print out directions to the hotel for your arrival</span>. <span class='review-span highlight' data-aligned-summaries='2'>The rooms were elegant</span> and comfortable. Nice breakfast in the morning. <span class='review-span highlight' data-aligned-summaries='5'>The staff were</span> pleasant and <span class='review-span highlight' data-aligned-summaries='5'>very 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 somewhat unpleasant and unhelpful interaction with the night clerk, and a another situation in which some other employee spent ages finding information on the vaporetti schedule that in the end were just plain wrong. Still <span class='review-span highlight' data-aligned-summaries='5'>4/5 for service</span>, as <span class='review-span highlight' data-aligned-summaries='5'>the rest of the staff were marvelous</span>.</div><div class='text-box'>I stayed 3 nights in Canal Grande. <span class='review-span highlight' data-aligned-summaries='0'>A gem in Venice</span>, near Piazzale Roma where i parked my car, near a vaporetto stop, great staff, great breakfast and great room " Accademia". If you are looking for a hotel to stay in Venice, dont think about it.<span class='review-span highlight' data-aligned-summaries='0'>Stay in Canal Grande. Perfect</span>!</div><div class='text-box'>Simply <span class='review-span highlight' data-aligned-summaries='0'>the best hotel we've ever stayed at</span>! Great location, <span class='review-span highlight' data-aligned-summaries='2'>great room, great view</span>, great breakfast. <span class='review-span highlight' data-aligned-summaries='8'>Unbelievable value</span>. <span class='review-span highlight' data-aligned-summaries='5'>The management and staff made us feel so welcome</span>, 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='5'>every need is looked after</span> <span class='review-span highlight' data-aligned-summaries='0'>a bargain of a hotel</span> and gr8 stuff.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is an average hotel to stay at, however it is in a beautiful area that has lots for tourists to see.</span> <span id="1" class="summary-sentence">The hotel was a little difficult to get to but they will provide a nicely detailed map for walking paths nearby, because it is located in a lovely place.</span> <span id="2" class="summary-sentence">The rooms are to a very high standard, with exceptional views overlooking some of the popular attractions in this area.</span> <span id="3" class="summary-sentence">The upgraded rooms in particular are wonderful, with a sky window that opens up at night.</span> <span id="4" class="summary-sentence">They are beautifully decorated and provide all amenities for a good stay.</span> <span id="5" class="summary-sentence">The staff occasional go above and beyond to help their guests.</span> <span id="6" class="summary-sentence">The food was delicious.</span> <span id="7" class="summary-sentence">Freshly made croissants and a free bottle of Prosecco, excellent.</span> <span id="8" class="summary-sentence">A bargain hotel that provides good quality service.</span> <span id="9" class="summary-sentence">You can see there has been great efforts put in place to decorate all aspects of this hotel, down to the small details.</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>