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'><span class='review-span highlight' data-aligned-summaries='1 2'>Ideally located, within minutes of the Blue Mosque, Grand Bazaar</span> <span class='review-span highlight' data-aligned-summaries='1'>etc and in the heart of the old City of Istanbul, close to tram and autobus and the main street in Sultanahmet.</span> Stunning views of the Bosphorus, sunrise and sunset from the rooftop bar area and dining room. <span class='review-span highlight' data-aligned-summaries='7'>Breakfast</span> and dinner <span class='review-span highlight' data-aligned-summaries='7'>can also be taken in the rooftop area which has a glorious panoramic view of the City</span>, especially after dark. Caner, <span class='review-span highlight' data-aligned-summaries='4'>our host on arrival at reception was very knowledgeble and gave good advice re places to visit</span>, all hotel staff were very friendly. <span class='review-span highlight' data-aligned-summaries='8'>Free internet access in the reception area was an unexpected bonus</span>. <span class='review-span highlight' data-aligned-summaries='3'>The bedroom</span> was a little dark and <span class='review-span highlight' data-aligned-summaries='3'>not a lot of space if you have large suitcases</span>, we were here for 7 nights, plenty to chose from at breakfast, although pretty much the same every day, lots of fruit, cheeses, breads, choice of eggs, teas and coffees etc. <span class='review-span highlight' data-aligned-summaries='0'>Overall a fantastic boutique style hotel</span>, THANK YOU CANER, regards, Lyn & Shahbaz</div><div class='text-box'>We spent there 3 nights (celebrated my birthday)- and liked everything: very <span class='review-span highlight' data-aligned-summaries='3'>clean</span> and <span class='review-span highlight' data-aligned-summaries='3'>cosy rooms</span>, <span class='review-span highlight' data-aligned-summaries='5 7'>breakfast on open terrace</span> <span class='review-span highlight' data-aligned-summaries='5'>with breathtaking views of the city&sea</span>. <span class='review-span highlight' data-aligned-summaries='1'>Location is perfect</span> ,managers are very professional and hospitable (special thanks to Mr. Ali Aldemir). We were happy to have some pleasant suprises from the hotel: wine, fruits, transfer to airport :) I'm glad that we stayed at Mina hotel. <span class='review-span highlight' data-aligned-summaries='0 6'>Absolutely recommended</span>!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Excellent situation close to blue mosque at the heart of Sultan Ahmet district</span>. We were lucky to get a good deal in high season. <span class='review-span highlight' data-aligned-summaries='0 3'>Room size is small but well furnished</span>. <span class='review-span highlight' data-aligned-summaries='7'>There's a beautiful roof top and terrace</span> facing the golden horn and the blue mosque; Wonderful night view. <span class='review-span highlight' data-aligned-summaries='0'>The reception staff were polite</span> and room service was acceptable. They also offered us free shuttle service back to the airport.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>i liked this hotel</span> a lot.the reception was perfect, <span class='review-span highlight' data-aligned-summaries='3'>the room good but not spacey</span>( no 208 or 209 i think.also the management should think to put a brush in the toilet for the .you know. there was no brush.a last thing that i d like to say is that the staff of the restaurant wasnt very smiley with you if you didnt leave a tip.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1 2'>Great location</span> <span class='review-span highlight' data-aligned-summaries='1 2'>5 minutes walk to the Grand Bazzar</span> <span class='review-span highlight' data-aligned-summaries='2'>and many other historic and traditional places in Sultanahmet</span>. <span class='review-span highlight' data-aligned-summaries='5 6'>The breakfast is buffet and it's good</span> not too bad. The <span class='review-span highlight' data-aligned-summaries='0'>staff very friendly and always trying to help</span>. The only disadvantage we faced is that <span class='review-span highlight' data-aligned-summaries='8'>there is</span> no <span class='review-span highlight' data-aligned-summaries='8'>wireless internet</span> in the rooms, <span class='review-span highlight' data-aligned-summaries='8'>only in the looby</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Lovely hotel</span> <span class='review-span highlight' data-aligned-summaries='1 2'>in the heart of Sultanahmet</span> <span class='review-span highlight' data-aligned-summaries='1'>with spectacular views</span> from <span class='review-span highlight' data-aligned-summaries='7'>the roof terrace</span>. Excellent value for money with friendly and accommoating staff. <span class='review-span highlight' data-aligned-summaries='3'>Rooms were clean and comfortable</span>, all thats required when visiting a city. <span class='review-span highlight' data-aligned-summaries='0'>I would recommend this hotel to anyone, and i would definately stay at the Mina hotel again</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>This hotel is in the old quarter of Istanbul</span>-<span class='review-span highlight' data-aligned-summaries='2'>it is short walk to all the tourist spots</span>.<span class='review-span highlight' data-aligned-summaries='0 3'>The rooms are small but clean</span>-<span class='review-span highlight' data-aligned-summaries='0 5 6'>breakfast is</span> <span class='review-span highlight' data-aligned-summaries='0'>buffet style and</span> <span class='review-span highlight' data-aligned-summaries='0 5 6'>delicious</span>.<span class='review-span highlight' data-aligned-summaries='5 6'>The view</span> from the breakfast area <span class='review-span highlight' data-aligned-summaries='5 6'>is fantastic</span>.<span class='review-span highlight' data-aligned-summaries='4'>Reception staff are ready to answer any questions you have about the area</span>.<span class='review-span highlight' data-aligned-summaries='0'>We would definitely go back to the Hotel Mina again</span>!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 7'>Not a negative to this place</span>. Easy stay, with <span class='review-span highlight' data-aligned-summaries='5 6'>a breakfast fit for a king</span>!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">It's a good hotel and would definitely recommend as well as return for another stay.</span> <span id="1" class="summary-sentence">The hotel is in a perfect location in the old quarter of Istanbul.</span> <span id="2" class="summary-sentence">The hotel is within minutes of the Blue Mosque and the Grand Bazaar, along with many other traditional and historic places in Sultanahmet.</span> <span id="3" class="summary-sentence">The rooms here are cosy and on the small side but always very clean and comfortable enough.</span> <span id="4" class="summary-sentence">The staff were knowledgeable about the local area.</span> <span id="5" class="summary-sentence">The breakfast was fit for a king</span> <span id="6" class="summary-sentence">so that's definitely recommended.</span> <span id="7" class="summary-sentence">There was nothing not to like especially with breakfast on an open terrace.</span> <span id="8" class="summary-sentence">The hotel provides complimentary internet access in the reception.</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> | |