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'>Ideally located, within minutes of the Blue Mosque, Grand Bazaar etc and in the heart of the old City of Istanbul, close to tram and autobus and the main street in Sultanahmet. Stunning views of the Bosphorus, sunrise and sunset from the rooftop bar area and dining room. <span class='review-span highlight' data-aligned-summaries='6'>Breakfast and dinner can also be taken in the rooftop area</span> which has a glorious panoramic view of the City, especially after dark. Caner, our host on arrival at reception was very knowledgeble and gave good advice re places to visit, <span class='review-span highlight' data-aligned-summaries='5'>all hotel staff were very friendly</span>. <span class='review-span highlight' data-aligned-summaries='7'>Free internet access in the reception area was an unexpected bonus</span>. <span class='review-span highlight' data-aligned-summaries='3 4'>The bedroom</span> <span class='review-span highlight' data-aligned-summaries='3'>was a little dark and</span> <span class='review-span highlight' data-aligned-summaries='3 4'>not a lot of space</span> <span class='review-span highlight' data-aligned-summaries='4'>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: <span class='review-span highlight' data-aligned-summaries='3'>very clean and cosy rooms</span>, <span class='review-span highlight' data-aligned-summaries='6'>breakfast on open terrace with breathtaking views of the city&sea</span>. Location is perfect ,<span class='review-span highlight' data-aligned-summaries='5'>managers are very professional and hospitable</span> (special thanks to Mr. Ali Aldemir). <span class='review-span highlight' data-aligned-summaries='0'>We were happy to have some pleasant suprises from the hotel: wine, fruits, transfer to airport</span> :) I'm glad that we stayed at Mina hotel. <span class='review-span highlight' data-aligned-summaries='1'>Absolutely recommended</span>!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Excellent situation</span> close to blue mosque at the heart of Sultan Ahmet district. We were lucky to get a good deal in high season. <span class='review-span highlight' data-aligned-summaries='1 3'>Room size is small but well furnished</span>. <span class='review-span highlight' data-aligned-summaries='6'>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='5'>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'>i liked this hotel a lot.the <span class='review-span highlight' data-aligned-summaries='1'>reception was perfect</span>, <span class='review-span highlight' data-aligned-summaries='1 3'>the room</span> <span class='review-span highlight' data-aligned-summaries='1'>good but</span> <span class='review-span highlight' data-aligned-summaries='1 3'>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='1'>Great location</span> <span class='review-span highlight' data-aligned-summaries='2'>5 minutes walk to the Grand Bazzar and many other historic and traditional places</span> in Sultanahmet. <span class='review-span highlight' data-aligned-summaries='6'>The breakfast is buffet and it's good</span> not too bad. <span class='review-span highlight' data-aligned-summaries='1 5'>The staff very friendly and always trying to help</span>. The only disadvantage we faced is that <span class='review-span highlight' data-aligned-summaries='4 7'>there is</span> <span class='review-span highlight' data-aligned-summaries='4'>no</span> <span class='review-span highlight' data-aligned-summaries='4 7'>wireless internet</span> <span class='review-span highlight' data-aligned-summaries='4'>in the rooms</span>, <span class='review-span highlight' data-aligned-summaries='7'>only in the looby</span>.</div><div class='text-box'>Lovely hotel in the heart of Sultanahmet with spectacular views from the roof terrace. Excellent value for money with <span class='review-span highlight' data-aligned-summaries='5'>friendly and accommoating staff</span>. <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='1'>I would recommend this hotel to anyone</span>, and i would definately stay at the Mina hotel again.</div><div class='text-box'>This hotel is in the old quarter of Istanbul-<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='1 3'>The rooms are small but clean</span>-<span class='review-span highlight' data-aligned-summaries='1'>breakfast is</span> buffet style and <span class='review-span highlight' data-aligned-summaries='1'>delicious</span>.The view from <span class='review-span highlight' data-aligned-summaries='6'>the breakfast area is fantastic</span>.<span class='review-span highlight' data-aligned-summaries='5'>Reception staff are ready to answer any questions you have</span> about the area.We would definitely go back to the Hotel Mina again!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Not a negative to this place</span>. Easy stay, with a breakfast fit for a king!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel was a wonderful boutique style and there were some pleasant surprises provided such as wines, fresh fruits and transport provided to the hotel.</span> <span id="1" class="summary-sentence">Highly recommended.</span> <span id="2" class="summary-sentence">Everything is within walking distance from the hotel here including the public transportation, which you can take to get to the main street.</span> <span id="3" class="summary-sentence">The rooms in the hotel were a little small but clean and comfortable.</span> <span id="4" class="summary-sentence">There is no WiFi available in the room and not a lot of room for storage.</span> <span id="5" class="summary-sentence">The staff are so helpful and always willing to help out with their polite manners.</span> <span id="6" class="summary-sentence">The hotel provides a great breakfast and both breakfast and dinner can be enjoyed at the rooftop dining area.</span> <span id="7" class="summary-sentence">There was an unexpected bonus to this hotel and that is the reception area provides guests with free internet access.</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> | |