Spaces:
Running
Running
File size: 14,088 Bytes
122b9cd | 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 137 138 |
<!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'>We were searching for a place to stay, having never been to Montreal before. After reading several reviews we opted for this hotel and contacted them directly for a booking. At this time they beat the expedia rate and offered us a 10% CAA discount. That took our room rate to $117/night for Thurs - Sun. <span class='review-span highlight' data-aligned-summaries='3 5'>The hotel</span> <span class='review-span highlight' data-aligned-summaries='5'>is a converted bank</span> and <span class='review-span highlight' data-aligned-summaries='3'>is located in central Old Montreal</span>. <span class='review-span highlight' data-aligned-summaries='3'>There is a metro stop within a couple blocks, which easily gets you some prime shopping and restaurant areas</span>. The staff were very helpful, recommending great restaurants and providing directions. The <span class='review-span highlight' data-aligned-summaries='7'>rooms are not large, but the very high ceilings make the rooms feel roomy</span>. And, the lobby bar has 2 for 1 drinks every evening. We would stay here again.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 2'>This hotel is a real treasure</span>. <span class='review-span highlight' data-aligned-summaries='3'>It is a very short walk from the subway and the restaurants of Old Montreal</span>. The greeting upon our arrival was very warm and we found all staff (Cleaning Lady to Bartender) bent over backwards to make us feel welcome. <span class='review-span highlight' data-aligned-summaries='2'>The lobby is very comfortable</span> with free WiFi. <span class='review-span highlight' data-aligned-summaries='6 7 8'>The rooms are elegant</span> <span class='review-span highlight' data-aligned-summaries='7 8'>with</span> <span class='review-span highlight' data-aligned-summaries='8'>free WiFi and</span> <span class='review-span highlight' data-aligned-summaries='7 8'>comfortable beds</span>. <span class='review-span highlight' data-aligned-summaries='7'>The bathroom</span> is nice and it <span class='review-span highlight' data-aligned-summaries='7'>and the bedroom were very clean</span>. <span class='review-span highlight' data-aligned-summaries='11'>There was no street noise</span>. We unfortunately had noisy, inconsiderate neighbours the first night however the hotel staff immediately offered to move us. This boutique hotel made our weekend getaway very special.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Fabulous location, & wonderful service in an</span> <span class='review-span highlight' data-aligned-summaries='0 10'>extraordinary hotel environment</span>. <span class='review-span highlight' data-aligned-summaries='2'>Lovely warm</span> <span class='review-span highlight' data-aligned-summaries='1 2'>lobby</span> <span class='review-span highlight' data-aligned-summaries='1'>with</span> <span class='review-span highlight' data-aligned-summaries='1 11'>live bossa-nova music</span> <span class='review-span highlight' data-aligned-summaries='1'>, a nice bar and impressive art</span>. <span class='review-span highlight' data-aligned-summaries='7'>The rooms are</span> charming, <span class='review-span highlight' data-aligned-summaries='7'>comfy</span>,& with beautifully design antique furniture. <span class='review-span highlight' data-aligned-summaries='5'>Formerly an 18 century bank</span> , <span class='review-span highlight' data-aligned-summaries='6'>each room is slightly different with some elegant remnants of its bank days</span>:( suite 318 is the old vault. renovated) <span class='review-span highlight' data-aligned-summaries='1'>The art throughout the halls are worthy of any Contemporary or Modern art museum</span>. We look forward to a return visit to Montreal and to the charming L Hotel.</div><div class='text-box'>My Partner and I stayed 7 nights at L'Hotel in Montreal. <span class='review-span highlight' data-aligned-summaries='0'>The service was impeccable,</span> <span class='review-span highlight' data-aligned-summaries='0 7'>the rooms very comfortable</span>, the staff very attentive and hospitable, and the location was perfect. <span class='review-span highlight' data-aligned-summaries='1 2'>The artwork contained within the hotel put the Museum of Contemporary Art to shame</span>! If you are traveling to Montreal, <span class='review-span highlight' data-aligned-summaries='0'>this is the hotel to stay at</span>. <span class='review-span highlight' data-aligned-summaries='11'>Friday and Saturday evening</span> <span class='review-span highlight' data-aligned-summaries='1 11'>had a bosso nova group in the bar area.a</span> <span class='review-span highlight' data-aligned-summaries='9 10'>great place to have a glass or two of wine and listen to some great music</span>.<span class='review-span highlight' data-aligned-summaries='9'></span></div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>This is a nice</span> <span class='review-span highlight' data-aligned-summaries='0 3'>hotel</span> <span class='review-span highlight' data-aligned-summaries='3'>in the Old Port part of Montreal</span>. <span class='review-span highlight' data-aligned-summaries='7'>Rooms are nice, everything is very clean</span>, breakfast (included in some room rates) is rather good, valet parking is convenient (included in some room rates). <span class='review-span highlight' data-aligned-summaries='2'>Service is friendly (</span>wiill help with restaurant bookings, etc). <span class='review-span highlight' data-aligned-summaries='0'>Have stayed there several time and will happily stay there again.</span></div><div class='text-box'>This was an <span class='review-span highlight' data-aligned-summaries='0'>extremely well-located hotel</span>. <span class='review-span highlight' data-aligned-summaries='4'>We were there during the Montreal Jazz Festival and</span> <span class='review-span highlight' data-aligned-summaries='3 4'>could walk</span> <span class='review-span highlight' data-aligned-summaries='4'>to it as well as to</span> <span class='review-span highlight' data-aligned-summaries='3 4'>everywhere in the entire Old Town</span> <span class='review-span highlight' data-aligned-summaries='3'>and it's also close to the subway</span>. The staff was friendly, <span class='review-span highlight' data-aligned-summaries='0'>rooms very nice</span>, and breakfast very good. There really wasn't anything to complain about.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 10'>Great</span> boutique <span class='review-span highlight' data-aligned-summaries='0 10'>hotel</span> and <span class='review-span highlight' data-aligned-summaries='3'>perfect location</span> in old montreal.Very friendly and helpful staff.<span class='review-span highlight' data-aligned-summaries='2 6 7'>Rooms are</span> <span class='review-span highlight' data-aligned-summaries='2 6'>unique</span> ,<span class='review-span highlight' data-aligned-summaries='7'>comfortable</span> and <span class='review-span highlight' data-aligned-summaries='8'>if you appreciate modern art its</span> <span class='review-span highlight' data-aligned-summaries='2 8'>like staying in an art gallery</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 2 7'>The hotel had</span> <span class='review-span highlight' data-aligned-summaries='0 2'>huge</span> <span class='review-span highlight' data-aligned-summaries='0 2 7'>rooms that were very clean</span> <span class='review-span highlight' data-aligned-summaries='7'>and comfortable</span>. <span class='review-span highlight' data-aligned-summaries='0 2'>The staff was friendly and helpful</span> and their breakfasts were wonderful!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a great hotel to stay at over and over.</span> <span id="1" class="summary-sentence">They have live bossa-nova music, a bar, and very impressive art on display worthy of being in a museum.</span> <span id="2" class="summary-sentence">The lobby is welcoming and lovely but the hotel overall is very special.</span> <span id="3" class="summary-sentence">This hotel is conveniently located within walking distance of shops, the restaurants of Old Montreal and even the subway.</span> <span id="4" class="summary-sentence">The Montreal Jazz Festival, as well as the entire Old Town, are also located within easy walking distance.</span> <span id="5" class="summary-sentence">This hotel was formally a bank.</span> <span id="6" class="summary-sentence">Rooms differ from one another but retain the elegant touches of its past.</span> <span id="7" class="summary-sentence">They are clean, comfortable and individual but not large, though the high ceilings give the illusion of spaciousness.</span> <span id="8" class="summary-sentence">There is free WiFi and comfortable beds and have been decorated with modern art.</span> <span id="9" class="summary-sentence">Have a seat, listen to some music, and drink some wine.</span> <span id="10" class="summary-sentence">Excellent.</span> <span id="11" class="summary-sentence">No street noise but the bar area comes alive with a bossa nova group on Friday and Saturday nights.</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>
|