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: 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'>Nowadays, it is so rare that those in the hospitality industry aspire to go above and beyond what is expected. I <span class='review-span highlight' data-aligned-summaries='4'>was warmly greeted with such personalized attention the second I stepped outside the car</span>. I was immediately escorted to a private check-in floor while my bags were being taken to my room. When I entered, I had a personalized message from the manager welcoming me to The Conrad, Istanbul, which just reiterated the same warm verbal welcome I received from the bellman and the staff associated who informed me of the great number of resources available to me while I was a guest of the hotel. <span class='review-span highlight' data-aligned-summaries='3'>While I had a postcard view of the Bosphorous from my room</span>, I could further embrace that beauty and enjoy drinks, snacks, reading material and conversation with fellow guests. <span class='review-span highlight' data-aligned-summaries='0 4'>The Conrad, Istanbul was a breath of fresh air when it comes to the hospitality industry</span>.<span class='review-span highlight' data-aligned-summaries='4'> My requests were handled to my satisfactions, quickly</span> and it was flattering to know that President Obama had also stayed at the hotel in April 2009. The <span class='review-span highlight' data-aligned-summaries='5'>one and only criticism I have of the hotel and its services is the</span> <span class='review-span highlight' data-aligned-summaries='2 5'>exorbitant in-room internet fees</span>.<span class='review-span highlight' data-aligned-summaries='2'> Hopefully those either have been or will be readjusted to a more industry competitive rate.</span></div><div class='text-box'>I stayed here on a business trip. <span class='review-span highlight' data-aligned-summaries='1'>The hotel has a very good location</span>, very close to the shores of the Bosphorus, <span class='review-span highlight' data-aligned-summaries='1'>5 minutes from Yildiz Park</span>. <span class='review-span highlight' data-aligned-summaries='2'>The room was very</span> <span class='review-span highlight' data-aligned-summaries='0 2'>competitively priced</span> <span class='review-span highlight' data-aligned-summaries='0'>relative to other hotels that one might consider for a business trip</span>. My room was fine, although the view of the courtyard was less than inspiring. Explains the cheap (for Istanbul) room rate. <span class='review-span highlight' data-aligned-summaries='0'>The facilities are great for a business traveller</span> - <span class='review-span highlight' data-aligned-summaries='6 7'>great gym</span> etc, quick, efficient and <span class='review-span highlight' data-aligned-summaries='4'>very friendly service</span>. Would recommend the hotel.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Stayed here on business for three nights</span>. <span class='review-span highlight' data-aligned-summaries='4'>Reception very efficient and welcoming</span>. <span class='review-span highlight' data-aligned-summaries='2'>Rooms are a nice size</span> with all facilities you would expect and <span class='review-span highlight' data-aligned-summaries='4'>housekeeping was perfect</span>. <span class='review-span highlight' data-aligned-summaries='3'>The bar on the 14th floor has great views of the Bosporus -</span> you must go up there. Breakfast was plentiful but very busy at peak times. <span class='review-span highlight' data-aligned-summaries='6 7'>Gym is</span> <span class='review-span highlight' data-aligned-summaries='6'>small</span> but <span class='review-span highlight' data-aligned-summaries='7'>sufficient for a quick work out</span>. <span class='review-span highlight' data-aligned-summaries='0'>The area was a bit out of the way but fine for work. Meeting rooms were good and wifi worked</span> ! I would be happy to visit again.</div><div class='text-box'>The hotel has beautiful public spaces, and the meals were delicious. <span class='review-span highlight' data-aligned-summaries='1'>You can walk across the park to many</span> small <span class='review-span highlight' data-aligned-summaries='1'>restaurants</span> favored by young people and university students. The <span class='review-span highlight' data-aligned-summaries='2'>rooms are modern</span> with bathtubs. Istanbul is a huge city and traffic is awful so it is best to stay in a hotel near where you plan to visit. I wanted to go to a Catholic Church (St. Anthony of Padua) and it took me 40 minutes by cab.</div><div class='text-box'>We stayed on the 15th floor. <span class='review-span highlight' data-aligned-summaries='0'>Great view. great food</span>. they do shut down the bar and food right at the designated hour. we were a couple mins late and everything was gone. taking the metro to the golden horn is very easy. I recommend buying an Akbill to make it very simple.</div><div class='text-box'>Ohh my God.I never <span class='review-span highlight' data-aligned-summaries='4'>seen</span> in my life <span class='review-span highlight' data-aligned-summaries='0 4'>Hotel General Manager yelling</span> <span class='review-span highlight' data-aligned-summaries='4'>his Staff</span>. <span class='review-span highlight' data-aligned-summaries='4'>Checking in and out was very ruff</span>. Until 8 floor ,<span class='review-span highlight' data-aligned-summaries='5'>you have to pay for dialup service for internet</span>. <span class='review-span highlight' data-aligned-summaries='0'>And Construction noise</span>. Ohh my God.<span class='review-span highlight' data-aligned-summaries='0'>Dont stay here.</span></div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Thia hotel needs a renovation</span>! <span class='review-span highlight' data-aligned-summaries='2'>Is very very old</span> (my room smells cigaret and the carpet is terrible! My lugagge taks 1:30 to go to my room</div><div class='text-box'>Good location. <span class='review-span highlight' data-aligned-summaries='0 4'>Perfect staff</span>.<span class='review-span highlight' data-aligned-summaries='0'> Excellent hotel for leisure</span> and <span class='review-span highlight' data-aligned-summaries='0'>business</span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is the perfect hotel for both leisure and business stays and is a welcome breath of fresh air for the hospitality industry.</span> <span id="1" class="summary-sentence">You can walk across the park near the hotel to a number of restaurants.</span> <span id="2" class="summary-sentence">The hotel's rooms are modern, adequately sized.and competitively priced.</span> <span id="3" class="summary-sentence">It is even possible to see the Bosphorous from some of the rooms.</span> <span id="4" class="summary-sentence">The staff based at the hotel were generally good, but there were some instances of unprofessional conduct.</span> <span id="5" class="summary-sentence">Unfortunately the dial-up service to access the internet is a paid service.</span> <span id="6" class="summary-sentence">Additionally the gym is pretty small</span> <span id="7" class="summary-sentence">but it's fine for a quick workout.</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> | |