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 3'>The location is excellent</span>,<span class='review-span highlight' data-aligned-summaries='3'> on a quiet side street just off the Piazza della Repubblica, close to the metro and a step-on, step-off city tour bus stop. We were able to easily reach the principal city sights from there</span>. <span class='review-span highlight' data-aligned-summaries='1'>Our room was large and very well appointed</span> (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). The <span class='review-span highlight' data-aligned-summaries='5'>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. <span class='review-span highlight' data-aligned-summaries='0'>This is a typical 2-3 star hotel and makes up for its lack of "grandness" by having a fantastically helpful and friendly staff</span>.</div><div class='text-box'>We stayed two nights at this hotel. <span class='review-span highlight' data-aligned-summaries='0'>We found the staff very friendly, and helpful</span>. <span class='review-span highlight' data-aligned-summaries='1'>Our room was clean</span> and of a good size. 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 and ample</span>. 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. We <span class='review-span highlight' data-aligned-summaries='4'>had a double room that was spotless</span> and also quite spacious. The <span class='review-span highlight' data-aligned-summaries='0'>staff were all very friendly</span> and helpful and answered any questions we had on places to visit etc. <span class='review-span highlight' data-aligned-summaries='7'>The internet access was</span> very <span class='review-span highlight' data-aligned-summaries='7'>useful</span> and was free. <span class='review-span highlight' data-aligned-summaries='5'>Breakfast was</span> lovely - <span class='review-span highlight' data-aligned-summaries='5'>breads</span>, <span class='review-span highlight' data-aligned-summaries='5'>pastries</span>, <span class='review-span highlight' data-aligned-summaries='5'>juices</span> and <span class='review-span highlight' data-aligned-summaries='5'>coffee</span>. The <span class='review-span highlight' data-aligned-summaries='2'>hotel is in an ideal location</span>, close to all the main sites and <span class='review-span highlight' data-aligned-summaries='1'>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 <span class='review-span highlight' data-aligned-summaries='3'>it is 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 since the wireless was not working correctly</span>. <span class='review-span highlight' data-aligned-summaries='1 4'>The room was clean</span> and the hotel was nice but our overall experience was just ok.</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='0 4'>The rooms</span> <span class='review-span highlight' data-aligned-summaries='0'>were quiet and</span> <span class='review-span highlight' data-aligned-summaries='0 4'>clean</span>. <span class='review-span highlight' data-aligned-summaries='0'>The staff was very gracious and helpful</span> and the serve really <span class='review-span highlight' data-aligned-summaries='5'>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. Large <span class='review-span highlight' data-aligned-summaries='4'>old room with great renovated bathroom</span>. <span class='review-span highlight' data-aligned-summaries='1 4'>Very clean</span> <span class='review-span highlight' data-aligned-summaries='1'>and comfortable</span>. Staff couldn't be nicer or more helpful. <span class='review-span highlight' data-aligned-summaries='6'>Even 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='2'>Great location</span>, spacious rooms, 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">The Oceania is a 2 - 3 star hotel but where it lacks in its grandeur it makes up for it with its staff.</span> <span id="1" class="summary-sentence">There is also the enjoyable music in the air from the nearby opera school and the hotel is not only comfortable but clean.</span> <span id="2" class="summary-sentence">The hotel's location is excellent.</span> <span id="3" class="summary-sentence">It lies just off of the Piazza della Repubblica on a quiet street and is close to buses and trains to allow reaching the city and sights easily.</span> <span id="4" class="summary-sentence">The hotel had a spotlessly clean, old double room with a great renovated bathroom.</span> <span id="5" class="summary-sentence">Breakfast was an ample continental breakfast with bread, pastries, juices, and coffee.</span> <span id="6" class="summary-sentence">it was lovely and you can get it to take away if you need to leave early.</span> <span id="7" class="summary-sentence">The Internet was 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> | |