Spaces:
Running
Running
File size: 9,483 Bytes
72f5cb0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
<!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: 50%;
font-size: 1.0rem;
padding: 10px;
height: 100vh; /* 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: 100vh; /* 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'>You will be comfortable at this hotel</span>. The rooms and baths are large; <span class='review-span highlight' data-aligned-summaries='2'>cleaning service is excellent</span>. It is relatively quiet in busy, central Rome, therefore <span class='review-span highlight' data-aligned-summaries='0'>a very good location to stay for sightseeing</span>. <span class='review-span highlight' data-aligned-summaries='1'>The main Metro terminal is a short walk away</span>. Breakfast is entirely adequate and complimentary. There is a free Internet connection in the lobby and rooms are wired for the Internet. One caution: should you need to telephone the USA, the hotel phones offer a "1508" access code. While the connection is fast and clear, the charge for a timed brief call of two or theee minutes is over $40 usd. Use your ATT card for international calls and save.</div><div class='text-box'>having just returned from a weeks stay at the universo hotel,i found it to be <span class='review-span highlight' data-aligned-summaries='0'>good value for money</span>,on our arrival <span class='review-span highlight' data-aligned-summaries='2'>we did not have the room we booked</span> and were disappointed,<span class='review-span highlight' data-aligned-summaries='2'>when we brought this to the hotels attention our room was changed the next day</span> which we were more than happy with,breakfast was also very good with lots to choose from,don't understand the negative comments regarding breakfast on some <span class='review-span highlight' data-aligned-summaries='0'>reviews.i would definately return to this hotel</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Hotel's location is amazing since its 2 mins walk from the main train station</span> that will take u to airport in 25 mins. 10 mins away from downtown (walking) and around 15-20 from Coloseum ! Central location, with lots of hotels around <span class='review-span highlight' data-aligned-summaries='2'>Friendly staff</span>, and really AMAZING breakfast. The restaurant is not the best you can get. Really nice rooms :)</div><div class='text-box'>We stayed 4 nights, and felt secure and comfortable. This is a fairly impersonal hotel, where the <span class='review-span highlight' data-aligned-summaries='2'>staff</span> did not speak unless spoken to, although they <span class='review-span highlight' data-aligned-summaries='2'>were helpful when requests were made</span>. The breakfast buffet was excellent. Our room was a loft, with the king bed up the stairs from the sitting area and bathroom. Several good restaurants nearby.</div><div class='text-box'>Good <span class='review-span highlight' data-aligned-summaries='1'>location</span> if you plan to stay <span class='review-span highlight' data-aligned-summaries='1'>close to Termini rail station</span> is a few minutes walk. Hotel itself not really impressive the rooms are very small with no drawers and a tiny bathroom with a shower only. Does have air conditioning which is about the only good part .Buffet Breakfast was good but overall I wouldnt stay again at this hotel</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>We stayed here twice in May and would happily stay again</span>. The rooms were spacious, the breakfast was yum, and <span class='review-span highlight' data-aligned-summaries='2'>the staff were</span> friendly and <span class='review-span highlight' data-aligned-summaries='2'>helpful</span>. You could walk to a lot of Rome's attractions from here but we chose to use the hop on hop off bus which had a stop just around the corner.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Don't expect t set yur thermostat</span> below 80 degrees. No matter what setting you use, the front desk controls the room temperature and will not set it below 26 Celsius, or 78 Fahrenheit. <span class='review-span highlight' data-aligned-summaries='0'>Disgusting sleeping temperature</span>, and of course does not make for a good vacation. Never again.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>We had a great stay</span>. <span class='review-span highlight' data-aligned-summaries='1'>Close to the train station</span> and many attractions. We walked all over Rome from here. Great breakfast, clean rooms, but the staff was makes it extra special.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">A great place to stay.</span> <span id="1" class="summary-sentence">The location is cloes to the main Metro train station.</span> <span id="2" class="summary-sentence">Some of the staff were helpful.</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');
}
});
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');
}
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>
|