Spaces:
Sleeping
Sleeping
<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. <span class='review-span highlight' data-aligned-summaries='1'>The staff and the concierge was more than helpful</span>. Well done & thank you 4. <span class='review-span highlight' data-aligned-summaries='0'>The rooms were lovely & 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. I would definitely stay here again</div><div class='text-box'>The hotel was not cheap - almost 200 Canadian dollars (including tax and a buffet breakfast) per night for a standard room. We were shocked by the so-called "standard" room. It was tiny: 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 shower was lukewarm. <span class='review-span highlight' data-aligned-summaries='0'>The only redeeming featrure was the location</span>: not in an attractive part of Toronto, but at least <span class='review-span highlight' data-aligned-summaries='0'>within walking distance of the CN Tower</span> and the main railway station. I thought it was exceptionally bad value for money, and would not recommend it.</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='0'>The room was</span> small and <span class='review-span highlight' data-aligned-summaries='0'>clean</span> with no view at all, 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 a perefectly serviceable hotel if you are looking for a clean room in a great location.</div><div class='text-box'>This place is located right center to all the places we wanted 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. They are <span class='review-span highlight' data-aligned-summaries='0'>in walkin distance from</span> the train station, <span class='review-span highlight' data-aligned-summaries='0'>the cn tower</span>, hockey hall of fame and the AC and the rogers center. It was amazing and being that we were first timers in a hotel <span class='review-span highlight' data-aligned-summaries='1'>they didn't make ya feel like any question was too stupid</span>. I am going back to toronto and I am staying there again!</div><div class='text-box'>Pros: Good location Affordable Cons: Hotel staff (see below) While our stay started out well, it turned into a disaster by the end. 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 class='review-span highlight' data-aligned-summaries='1'>Despite numerous calls to the front desk to remedy the problem, they did absolutely nothing to help</span>. We had two sleepless nights & this put a major damper on what was otherwise a fantastic trip. My advice: Pay the extra money & stay somewhere else!</div><div class='text-box'>My husband and me came for the Monster truck show at Rogers Center on Jan. It was super fun. What the hotel lacks in amenities and services they make up for it by being centralized. Near to the night-club scene, sports arenas; Rogers Center/Air Canada Center. Restaurants, theater, shopping, and best of all, being cheap cheap cheap. 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. If there are only two in your party, this is a very cozy hotel. 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. I would definitely stay there again.</div><div class='text-box'>I booked a Deluxe Room which to be honest was worse than Basic Rooms i have stayed in, in other Hotels. Buffet Breakfast was expensive and we ate at other places. Pub was fine though if you like watching Sport. Ideal location though for Attractions.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">Location was within walking distance to the CN Tower, the rooms are clean.</span> <span id="1" class="summary-sentence">Some of the staff were so courteous and helpful and super friendly, while others were very unhelpful towards their guests.</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> | |