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'>We spent two nights here in May, 2011 and really enjoyed it. <span class='review-span highlight' data-aligned-summaries='2'>The location is excellent, on a quiet side street</span> just off the Piazza della Repubblica, <span class='review-span highlight' data-aligned-summaries='2'>close to the metro and a step-on, step-off city tour bus stop</span>. <span class='review-span highlight' data-aligned-summaries='2'>We were able to easily reach the principal city sights from there</span>. <span class='review-span highlight' data-aligned-summaries='3'>Our room was large</span> and very well appointed (and I love that 1940s style elevator to get you there!) The staff was excellent, very helpful. (I had trouble backing up some photos from my camera to a flash drive and they assisted me.) There are a number of very good restaurants nearby so you dont have to fight the tourist hordes around the Spanish Steps or the Fountain of Trevi. Well go back when were in Rome.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>This is a cozy</span>, <span class='review-span highlight' data-aligned-summaries='2'>tucked-away</span> <span class='review-span highlight' data-aligned-summaries='0 2'>retreat</span> <span class='review-span highlight' data-aligned-summaries='2'>from the busy streets of Rome</span>. Our room was quiet and <span class='review-span highlight' data-aligned-summaries='4'>the owner was</span> attentive and <span class='review-span highlight' data-aligned-summaries='4'>helpful</span> (spoke English well). The <span class='review-span highlight' data-aligned-summaries='5'>breakfast</span> room is a warm and inviting setting <span class='review-span highlight' data-aligned-summaries='5'>with a decent variety of food</span>. The bed was not very comfortable (although I am extremely picky) but every other part of our stay was enjoyable. We stayed at this location three nights and <span class='review-span highlight' data-aligned-summaries='2'>were able to walk comfortably to all major sights</span> without problem. I will not rave about this hotel, but I found nothing materially wrong with it either. This is a typical 2-3 star hotel and makes up for its lack of "grandness" by having a fantastically helpful and friendly staff.</div><div class='text-box'>We stayed two nights at this hotel. We found the staff very friendly, and helpful. <span class='review-span highlight' data-aligned-summaries='3'>Our room was clean and of a good size</span>. If you want to experience true italian culture, then this family is for you. <span class='review-span highlight' data-aligned-summaries='5'>The breakfast was continental, and very good</span> and ample. If you want scrambled eggs and bacon when you are in Europe, then stay home. If you want to enjoy the culture you are in then <span class='review-span highlight' data-aligned-summaries='4'>ask this facility for recommendations for restaurants, side trips, etc., they are more than accommodating</span>. We will definately use this hotel on our next visit.</div><div class='text-box'>We couldn't have been more pleased with our stay in Oceania. We had a <span class='review-span highlight' data-aligned-summaries='3'>double room</span> that <span class='review-span highlight' data-aligned-summaries='3'>was spotless and also quite spacious</span>. <span class='review-span highlight' data-aligned-summaries='4'>The staff were all very friendly and helpful and answered any questions we had</span> on places to visit etc. <span class='review-span highlight' data-aligned-summaries='7'>The internet access was very useful and was free</span>. <span class='review-span highlight' data-aligned-summaries='5'>Breakfast was lovely - breads, pastries, juices and coffee</span>. <span class='review-span highlight' data-aligned-summaries='2'>The hotel is in an ideal location</span>, <span class='review-span highlight' data-aligned-summaries='2'>close to all the main sites</span> and <span class='review-span highlight' data-aligned-summaries='2'>on a nice quiet street</span>. Would love to go back!</div><div class='text-box'>I booked a 3 night stay at Hotel Oceania based on a recommendation from Rick Steves. <span class='review-span highlight' data-aligned-summaries='2'>The location is definately convienent</span> as it is <span class='review-span highlight' data-aligned-summaries='2'>a short walk from the train station which is also thier main center for Rome's subway and bus systems</span>. <span class='review-span highlight' data-aligned-summaries='7'>Internet was available in the lobby, but was not available in the room</span> since the wireless was not working correctly. <span class='review-span highlight' data-aligned-summaries='0'>The room was clean and the hotel was nice but our overall experience was just ok</span>.</div><div class='text-box'>We had a wonderful experience at the Hotel Oceania. <span class='review-span highlight' data-aligned-summaries='2'>The location is excellent</span> with public transportation, great restaurants and shopping very nearby. <span class='review-span highlight' data-aligned-summaries='3'>The rooms were</span> quiet and <span class='review-span highlight' data-aligned-summaries='3'>clean</span>. <span class='review-span highlight' data-aligned-summaries='4'>The staff was</span> very gracious and <span class='review-span highlight' data-aligned-summaries='4'>helpful</span> and the <span class='review-span highlight' data-aligned-summaries='5'>serve really delicious coffee</span>! Rick Steves (2012) certainly didn't disappoint.</div><div class='text-box'>We stayed just one night but will surely stay here when again in Rome. <span class='review-span highlight' data-aligned-summaries='3'>Large</span> old <span class='review-span highlight' data-aligned-summaries='3'>room</span> with <span class='review-span highlight' data-aligned-summaries='3'>great renovated bathroom</span>. <span class='review-span highlight' data-aligned-summaries='0 3'>Very</span> <span class='review-span highlight' data-aligned-summaries='3'>clean</span> and <span class='review-span highlight' data-aligned-summaries='0'>comfortable</span>. <span class='review-span highlight' data-aligned-summaries='4'>Staff couldn't be</span> nicer or <span class='review-span highlight' data-aligned-summaries='4'>more helpful</span>. Even <span class='review-span highlight' data-aligned-summaries='6'>packed us a take away breakfast</span> because we had to leave early.</div><div class='text-box'>We would stay here again. <span class='review-span highlight' data-aligned-summaries='2'>Great location</span>, <span class='review-span highlight' data-aligned-summaries='3'>spacious rooms</span>, good, friendly service. <span class='review-span highlight' data-aligned-summaries='1'>A bonus was classical music drifting up from the opera school on the level below</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">It was such a comfortable experience here at this hotel and nice bonus</span> <span id="1" class="summary-sentence">there was classical music that came from a nearby opera school.</span> <span id="2" class="summary-sentence">Excellent location for that is on a quiet street, but also allow easy reach for principal city sights; the metro and city tour bus stop are really close.</span> <span id="3" class="summary-sentence">Clean and large room with a great renovated bathroom.</span> <span id="4" class="summary-sentence">The staff are a wealth of knowledge about the nearby restaurants , side trips, which was was super helpful.</span> <span id="5" class="summary-sentence">The breakfast not only has lots of choice but the quality of the continental foods and drinks on offer was great.</span> <span id="6" class="summary-sentence">They also provide take away breakfast.</span> <span id="7" class="summary-sentence">No wireless internet in the rooms, only available in the lobby.</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> | |