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. <span class='review-span highlight' data-aligned-summaries='0'>The staff and the concierge was more than helpful</span>. Well done & thank you 4. The rooms were lovely & clean & 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. The only redeeming featrure was <span class='review-span highlight' data-aligned-summaries='1'>the location</span>: 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 would not recommend it.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>The location of this hotel is its best attribute</span>. 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. The room was small and clean 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 in walkin distance from the train station, the cn tower, hockey hall of fame and the AC and the rogers center. It was amazing and <span class='review-span highlight' data-aligned-summaries='0'>being that we were first timers in a hotel 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: <span class='review-span highlight' data-aligned-summaries='1'>Good location</span> 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='0'>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. <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 night-club scene, sports arenas</span>; 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 <span class='review-span highlight' data-aligned-summaries='1'>the location was great</span>. 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. <span class='review-span highlight' data-aligned-summaries='1'>Ideal location</span> though <span class='review-span highlight' data-aligned-summaries='1'>for Attractions</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">While some staff are always so helpful at this hotel, others were not great at fixing any issues that arose.</span> <span id="1" class="summary-sentence">The location is great for visiting the CN Tower, too.</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> | |