Spaces:
Running
Running
File size: 12,059 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'>The best part of this hotel is the staff. We were greeted by the ubiquitous doorman and all staff every time we entered the hotel. <span class='review-span highlight' data-aligned-summaries='0'>We felt as if we were the most important guests</span> in the hotel and the staff were constantly concerned about our needs. The breakfast was a lavish buffet and again the wait staff was outstanding This is <span class='review-span highlight' data-aligned-summaries='0'>a beautiful hotel</span> in the old part of Montreal and close to good restaurants, art galleries, and shopping. <span class='review-span highlight' data-aligned-summaries='1 4 5'>The room was</span> <span class='review-span highlight' data-aligned-summaries='4'>luxurious</span>, beautifully appointed, <span class='review-span highlight' data-aligned-summaries='1 5'>comfortable and spotless</span>. <span class='review-span highlight' data-aligned-summaries='2'>It is just around the corner from</span> a major theater and <span class='review-span highlight' data-aligned-summaries='2'>the cathedral and the river</span>. <span class='review-span highlight' data-aligned-summaries='3'>It is short cab ride to the cultural center</span> where they have the symphony, ballet and etc. <span class='review-span highlight' data-aligned-summaries='2'>The metro station is about a 10 minute walk</span>.</div><div class='text-box'>We stayed at the Saint Sulpice in early October. The <span class='review-span highlight' data-aligned-summaries='0 2'>hotel has a perfect location</span> right in the heart of the Old Quarter. Lots of restaurants and attractions in the surrounding area. The hotel <span class='review-span highlight' data-aligned-summaries='0'>staff is excellent</span>, <span class='review-span highlight' data-aligned-summaries='4'>the rooms are beautiful with great bathrooms</span>. <span class='review-span highlight' data-aligned-summaries='8'>Restaurant us good quality and group members enjoyed meals</span> there. Concierge and front desk staff was warm and helpful. The doorman are always there to help and offer a smile. Stop reading these reviews and book it! There is nothing not to like with the Saint Sulpice. We travel and book hotels all over the world, this one is a keeper!</div><div class='text-box'>I rely heavily on reviews for visiting all over the world. <span class='review-span highlight' data-aligned-summaries='0'>This hotel was hands down one of the nicest and most beautiful places</span>. It was a <span class='review-span highlight' data-aligned-summaries='4'>extremely spacious room</span>, with a queen bed, couch, fire place, large fridge, stove and sink and a window that opened toward the street and a good size bathroom. Everyone that worked there was very helpful and nice and we felt very welcomed. <span class='review-span highlight' data-aligned-summaries='2'>The location is perfect</span> and very central to a grocery store, liquor store, restaurants, etc. <span class='review-span highlight' data-aligned-summaries='0'>I would highly recommend this Hotel</span> and really enjoyed our stay because of it.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>Cozy, comfortable</span>,<span class='review-span highlight' data-aligned-summaries='0'> elegant and reasonably priced</span> the Saint-Sulpice is <span class='review-span highlight' data-aligned-summaries='2'>in the heart of old Montreal between just behind the cathedral</span>. It is quiet, friendly and pet friendly. Although we were in Montreal on the shortest days of the year <span class='review-span highlight' data-aligned-summaries='6'>our first floor room next to a courtyard garden was sunny and welcoming</span>. <span class='review-span highlight' data-aligned-summaries='0'>One of our favorite hotels anywhere</span>.</div><div class='text-box'>Vacation with 3 sisters and Mom for Mother's Day. The only place I could find where <span class='review-span highlight' data-aligned-summaries='4'>the suite could accomodate 4 of us nicely</span>. <span class='review-span highlight' data-aligned-summaries='0 1'>Clean</span>, <span class='review-span highlight' data-aligned-summaries='0'>bright,</span> <span class='review-span highlight' data-aligned-summaries='0 1'>and comfortable</span> <span class='review-span highlight' data-aligned-summaries='0'>plus and</span> <span class='review-span highlight' data-aligned-summaries='0 2'>it is right in the Old City</span> (which was good for my mother). <span class='review-span highlight' data-aligned-summaries='7'>There outdoor dining area was great for lunch</span>! <span class='review-span highlight' data-aligned-summaries='0'>Good staff, too</span>.</div><div class='text-box'>Great service, beautiful stylish contemporary decor! And even a Tassimo espresso maker in every room. <span class='review-span highlight' data-aligned-summaries='9'>L'Occitane bath products were amazing</span>! Plus <span class='review-span highlight' data-aligned-summaries='9'>free Wi-Fi</span> ! Central as <span class='review-span highlight' data-aligned-summaries='2'>it is located right next to Notre Dame Cathedral</span>! <span class='review-span highlight' data-aligned-summaries='0'>Would definitely recommend this hotel to the most finicky of people</span>!</div><div class='text-box'>I love montreal, <span class='review-span highlight' data-aligned-summaries='0'>this hotel was available at a good value</span> and came <span class='review-span highlight' data-aligned-summaries='0'>highly recommended</span>. <span class='review-span highlight' data-aligned-summaries='2'>Very pleased with the location</span> and hotel in general although slightly disappointed with saunda and fitness centre. I think there are better values out there.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Love this hotel</span>. <span class='review-span highlight' data-aligned-summaries='0 2'>Perfect location</span> <span class='review-span highlight' data-aligned-summaries='2'>to explore old town</span>. Wouldn't even consider any other hotel in town. Our third visit and certainly will return again. The comp. breakfasts alone would bring us back.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">Excellent hotel that is highly recommended in this area.</span> <span id="1" class="summary-sentence">It's very clean and a comfortable place to stay.</span> <span id="2" class="summary-sentence">The hotel is in a great location only a ten minute walk from the metro station and near to the cathedral and the river.</span> <span id="3" class="summary-sentence">The cultural centre is a short taxi ride away.</span> <span id="4" class="summary-sentence">The rooms were large and luxurious, perfectly able to house four guests as requested.</span> <span id="5" class="summary-sentence">The room was comfortable and clean.</span> <span id="6" class="summary-sentence">Rooms on the first floor have access to a lovely courtyard garden.</span> <span id="7" class="summary-sentence">The hotel has a lovely outdoor dining area for lunch.</span> <span id="8" class="summary-sentence">The meals served at the restaurants are a good quality too.</span> <span id="9" class="summary-sentence">The hotel had lovely toiletries available and there was free Wi-Fi available.</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>
|