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='1 2'>The location is</span> <span class='review-span highlight' data-aligned-summaries='1'>excellent</span>, <span class='review-span highlight' data-aligned-summaries='2'>on a quiet side street just off the Piazza della Repubblica, close to the metro and</span> a step-on, step-off city tour bus stop. <span class='review-span highlight' data-aligned-summaries='2'>We were able to easily reach the principal city sights</span> from there. <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='2'>This is a cozy, tucked-away retreat from the busy streets of Rome</span>. Our room was quiet and the owner was attentive and helpful (spoke English well). <span class='review-span highlight' data-aligned-summaries='4'>The breakfast room is a warm and inviting setting 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 were able to walk comfortably to all major sights 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='4'>The breakfast was continental</span>, and very good 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 ask this facility for recommendations for restaurants, side trips, etc., they are more than accommodating. 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. <span class='review-span highlight' data-aligned-summaries='3'>We had a double room that was spotless and also quite spacious</span>. The staff were all very friendly and helpful and answered any questions we had on places to visit etc. <span class='review-span highlight' data-aligned-summaries='6'>The internet access was very useful</span> and was free. <span class='review-span highlight' data-aligned-summaries='4'>Breakfast was lovely - breads, pastries, juices and coffee</span>. <span class='review-span highlight' data-aligned-summaries='1 2'>The hotel is</span> <span class='review-span highlight' data-aligned-summaries='1'>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 <span class='review-span highlight' data-aligned-summaries='0'>Hotel Oceania</span> based on a recommendation from Rick Steves. <span class='review-span highlight' data-aligned-summaries='1'>The location is definately convienent</span> as <span class='review-span highlight' data-aligned-summaries='2'>it is a short walk from the</span> train station which is also thier <span class='review-span highlight' data-aligned-summaries='2'>main center for Rome's subway</span> and bus systems. <span class='review-span highlight' data-aligned-summaries='6'>Internet was available in the lobby</span>, but was not available in the room since the wireless was not working correctly. <span class='review-span highlight' data-aligned-summaries='3'>The room was clean</span> and the hotel <span class='review-span highlight' data-aligned-summaries='0'>was nice but our overall experience was just ok</span>.</div><div class='text-box'>We had a wonderful experience at the Hotel Oceania. The <span class='review-span highlight' data-aligned-summaries='1'>location is excellent</span> with <span class='review-span highlight' data-aligned-summaries='2'>public transportation, great restaurants and shopping very nearby</span>. The <span class='review-span highlight' data-aligned-summaries='3'>rooms were</span> quiet and <span class='review-span highlight' data-aligned-summaries='3'>clean</span>. The staff was very gracious and helpful and the serve really delicious coffee! 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>. Very clean and comfortable. Staff couldn't be nicer or more helpful. Even <span class='review-span highlight' data-aligned-summaries='5'>packed us a take away breakfast because we had to leave early</span>.</div><div class='text-box'>We would stay here again. <span class='review-span highlight' data-aligned-summaries='1'>Great location</span>, <span class='review-span highlight' data-aligned-summaries='3'>spacious rooms</span>, good, friendly service. A <span class='review-span highlight' data-aligned-summaries='0'>bonus was classical music drifting up from the opera school</span> on the level below.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The Hotel Oceania has classical music from the opera school below drifting up, which is very beautiful and atmospheric.</span> <span id="1" class="summary-sentence">The hotel is in an excellent location.</span> <span id="2" class="summary-sentence">It is situated on a quite side street close to Piazza della Repubblica, the metro and the principal sights of the city.</span> <span id="3" class="summary-sentence">The hotel's rooms are clean, spacious and with a renovated bathroom.</span> <span id="4" class="summary-sentence">A continental breakfast including breads, pastries, juices and coffee.</span> <span id="5" class="summary-sentence">There is the option to take away if needed.</span> <span id="6" class="summary-sentence">The hotel provided internet 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> | |