Spaces:
Running
Running
File size: 9,940 Bytes
dc7152d |
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'>Stayed here for 4 nights with my partner in August '09. <span class='review-span highlight' data-aligned-summaries='0'>The hotel is located 50m around the corner from the famous Campo De 'Fiori</span> which is a wonderful area for eating and drinking as well as having great nightlife. The room itself was beautifully done in a period setting. Bed was large and aircon was fine. <span class='review-span highlight' data-aligned-summaries='0'>Staff extremely passionate and friendly</span> about when and where to see the sights. Location is excellent as only a 5 minute walk to the piazza navona, 10 min walk to the trevi fountain and pantheon and 15 min walk to Vaticano and Colosseum. Also only a 10 min walk to the river and the wonderful trastevere area of eating/nightlife. There is a viewing deck above the top floor which is great to relax and have a few drinks and offers a really nice view of the area as well which was a bonus! No complaints whatsoever here, had a wonderful stay!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>I can't say enough about the wonderful Hotel Campo De Fiori</span>! The location is perfect for sight seeing in Rome. The rooms are typical European sized but beautiful and well-appointed. I was a little concerned about potential noise from the nearby square but with my windows shut I didn't hear a peep. <span class='review-span highlight' data-aligned-summaries='0'>The photos on the web site are accurate and the roof-top deck is a dream</span>! The breakfast was ample with excellent coffee. The best thing about the hotel is the amazing staff - Valentina, Matteo, Barbara, Gabriele, Angelo, Adam, Andrea & Andrew - not only efficient and well-versed on the city, they were kind hearted and lovely. They bent over backwards to make my stay truly special and I can't wait to return!</div><div class='text-box'>My wife and I visited Rome for the first time this past November, and we couldn't be happier with our stay at Hotel Campo de Fiori. <span class='review-span highlight' data-aligned-summaries='0'>The location of the hotel is perfect</span>, 5 minute walk to most of the sites, 20 minute walk to the Vatican City and 20 minutes the other way to the Coliseum. <span class='review-span highlight' data-aligned-summaries='0'>The hotel staff is extremely helpful</span> and make good recommendations on restaurants (La Scalla and The Library were two of our favorites, and will go back for sure to both). The rooms were smaller - but they were loaded with character and the bathrooms were superb.</div><div class='text-box'>After our port intensive Med cruise it was a relief to have such a haven as this hotel to unwind for three nights. We loved our top floor room with it's own terrace and the access to the fabulous large rooftop terrace was right outside our door. The terrace was not only a great 360 degree view of the historic area of Rome but it was such a great social place to join others over wine in the hours leading up to sunset. Magic. <span class='review-span highlight' data-aligned-summaries='0'>The staff is so helpful and made us feel so welcome there</span>. <span class='review-span highlight' data-aligned-summaries='0'>Highly recommend this boutique hotel</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>If you are looking for a place</span> with a central location and superb roofterrace <span class='review-span highlight' data-aligned-summaries='0'>and don't mind being ripped off, this is it</span>. All you need to overlook is the dreadfull breakfast (for instance, the cheese had never seen a cow and the orange juice looks radio-active), the claustrophobic rooms and lack of any extras cq basics in the room (water, toilettries, etc.) that you might expect for the price they charge.</div><div class='text-box'>Thank you very much for your hospitality while we stayed with you during Aug 1 - 4, 2008. <span class='review-span highlight' data-aligned-summaries='0'>My wiffe and I were extremely pleased with the hospitable staff</span>, general cleanliness, quiet rooms, delicious breakfast and all. The overall experience at your hotel was very good and this made Rome even better for us. We would look forward to coming back to Rome to stay in the Hotel Campo de' Fiori. Thank you.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Great hotel with very kind and very helpful personnel</span>. The roof garden is absolutely great! Very nice view over Rome. <span class='review-span highlight' data-aligned-summaries='0'>The rooms are lovely! The location is perfect</span>: at the Campo de' Fiori and near the ancient centre of Rome.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>I would so recommend this hotel for</span> the location, the accomodations, <span class='review-span highlight' data-aligned-summaries='0'>the friendliness of the staff</span> and the amazing roof garden. I thank Travel Advisors for sending us in the right direction in the first place</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is really recommended because the staff are very friendly.</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>
|