Spaces:
Running
Running
<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 ; /* Dark grey for muted text */ | |
cursor: pointer;} | |
.not-hover-highlight { background-color: lightyellow; | |
color: #606060 ; /* 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'>1. The Strathcona is right in the heart of Toronto. Everything was at hand 2. I am used to the European Hotel of "getting the arm in" for a safe deposit box. Therefore it was a great enhancement that the safe deposit box was pro bono 3. The staff and the concierge was more than helpful. Well done & thank you 4. <span class='review-span highlight' data-aligned-summaries='2'>The rooms were</span> lovely & <span class='review-span highlight' data-aligned-summaries='2'>clean</span> & well maintained over our four night stay 5. The rooms were bijou, however we were comfortable because my wife & I are slim. If you are a disgusting big rotund(s); either lose weight or get another hotel 6. <span class='review-span highlight' data-aligned-summaries='0'>I would definitely stay here again</span></div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='4'>The hotel was not cheap</span> - almost <span class='review-span highlight' data-aligned-summaries='4'>200 Canadian dollars (including</span> tax and <span class='review-span highlight' data-aligned-summaries='4'>a buffet breakfast</span>) per night for a standard room. We were shocked by the so-called "<span class='review-span highlight' data-aligned-summaries='0'>standard"</span> <span class='review-span highlight' data-aligned-summaries='0 2'>room</span>. It <span class='review-span highlight' data-aligned-summaries='0 2'>was tiny</span>: to do some ironing on the ironing board, or to have access to the electric power points, one literally had to move the furniture around. Cupboard space was inadequate. The <span class='review-span highlight' data-aligned-summaries='0'>shower was lukewarm</span>. The only redeeming featrure was the location: not in an attractive part of Toronto, but at least <span class='review-span highlight' data-aligned-summaries='1'>within walking distance of the CN Tower</span> and the main railway station. I thought it was exceptionally bad value for money, and <span class='review-span highlight' data-aligned-summaries='0'>would not recommend it.</span></div><div class='text-box'>The location of this hotel is its best attribute. I was in Toronto for an Argos football game August 12 and stayed at the Strathcona (for the second time). I paid $83USD for a Friday night. This is cheap by downtown T.O. standards. <span class='review-span highlight' data-aligned-summaries='2'>The room was small and clean with no view at all</span>, but I did not care because I was noe in town for the view or the size of the room. Parking is two blocks down Wellington St. and cost $15CDN for a night - again not bad by T.O. standards. Overall <span class='review-span highlight' data-aligned-summaries='0'>a perefectly serviceable hotel</span> if you are looking for a <span class='review-span highlight' data-aligned-summaries='0'>clean room in a great location</span>.</div><div class='text-box'>This place is <span class='review-span highlight' data-aligned-summaries='0'>located right center to all the places we wanted</span> to see. My friend and I went to see a concert and when I called to book they were the only hotel I found who did not talk down to you about not owning a credit card. <span class='review-span highlight' data-aligned-summaries='1'>They are in walkin distance from</span> the train station, <span class='review-span highlight' data-aligned-summaries='1'>the cn tower, hockey hall of fame</span> and the AC <span class='review-span highlight' data-aligned-summaries='1'>and the rogers center</span>. <span class='review-span highlight' data-aligned-summaries='0'>It was amazing</span> and being that we were first timers in a hotel they didn't make ya feel like any question was too stupid. I am going back to toronto and I am staying there again!</div><div class='text-box'>Pros: Good location <span class='review-span highlight' data-aligned-summaries='4'>Affordable</span> Cons: Hotel staff (see below) <span class='review-span highlight' data-aligned-summaries='0'>While our stay started out well, it turned into a disaster by the end</span>. <span class='review-span highlight' data-aligned-summaries='3'>We were situated across from about 2-4 rooms of American college students who were in Toronto to drink heavily, smoke and make as much noise as they possible could</span>. Despite numerous calls to the front desk to remedy the problem, they did absolutely nothing to help. <span class='review-span highlight' data-aligned-summaries='0 3'>We had two sleepless nights</span> <span class='review-span highlight' data-aligned-summaries='0'>& this put a major damper on what was otherwise a fantastic trip</span>. <span class='review-span highlight' data-aligned-summaries='0'>My advice: Pay the extra money & stay somewhere else</span>!</div><div class='text-box'>My husband and me came for the Monster truck show at Rogers Center on Jan. It was super fun. <span class='review-span highlight' data-aligned-summaries='0'>What the hotel lacks in amenities and services they make up for it by being centralized</span>. <span class='review-span highlight' data-aligned-summaries='1'>Near to the</span> night-club scene, sports arenas; <span class='review-span highlight' data-aligned-summaries='1'>Rogers Center</span>/Air Canada Center. Restaurants, theater, shopping, and best of all, <span class='review-span highlight' data-aligned-summaries='4'>being cheap cheap cheap</span>. Did I mention cheap? The weekend was fun and exciting. Thanks Gravedigger for tarin' the place up!</div><div class='text-box'>My wife and I stayed at the Strathcona while attending the Toronto Film Festival this past weekend. <span class='review-span highlight' data-aligned-summaries='2'>If there are only two in your party, this is a very cozy hotel</span>. Our room was very comfortable and the location was great. You are one block away from the train terminal and the Airport Express shuttle picks you up right across the street. <span class='review-span highlight' data-aligned-summaries='0'>I would definitely stay there again</span>.</div><div class='text-box'>I booked <span class='review-span highlight' data-aligned-summaries='0'>a Deluxe Room</span> which to be honest <span class='review-span highlight' data-aligned-summaries='0'>was worse than Basic Rooms i have stayed in</span>, in other Hotels. <span class='review-span highlight' data-aligned-summaries='0 4'>Buffet Breakfast was expensive</span> and we ate at other places. <span class='review-span highlight' data-aligned-summaries='0'>Pub was fine</span> though if you like watching Sport. <span class='review-span highlight' data-aligned-summaries='0'>Ideal location though for Attractions</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is great and pretty amazing, and you would definitely want to return.</span> <span id="1" class="summary-sentence">The hotel is located close to the CN Tower, the hockey Hall of Fame and the Rogers Centre for example.</span> <span id="2" class="summary-sentence">The deluxe room was quite small and didn't have a view at all, but it was pretty clean.</span> <span id="3" class="summary-sentence">There was a lot of noise that could be heard from the room, as well.</span> <span id="4" class="summary-sentence">The hotel's breakfast is in included in the room's price, but a little expensive.</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> | |