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: 50%; | |
| font-size: 1.0rem; | |
| padding: 10px; | |
| height: 100vh; /* 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: 100vh; /* 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'>You will be comfortable at this hotel. The rooms and baths are large; cleaning service is excellent. It is relatively quiet in busy, central Rome, therefore a very good location to stay for sightseeing. <span class='review-span highlight' data-aligned-summaries='1'>The main Metro terminal is a short walk away</span>. Breakfast is entirely adequate and complimentary. There is a free Internet connection in the lobby and rooms are wired for the Internet. One caution: should you need to telephone the USA, the hotel phones offer a "1508" access code. While the connection is fast and clear, the charge for a timed brief call of two or theee minutes is over $40 usd. Use your ATT card for international calls and save.</div><div class='text-box'>having just returned from a weeks stay at the universo hotel,i found it to be good value for money,<span class='review-span highlight' data-aligned-summaries='0'>on our arrival we did not have the room we booked</span> and were disappointed,<span class='review-span highlight' data-aligned-summaries='0'>when we brought this to the hotels attention our room was changed the next day</span> which we were more than happy with,breakfast was also very good with lots to choose from,don't understand the negative comments regarding breakfast on some reviews.i would definately return to this hotel.</div><div class='text-box'>Hotel's location is amazing since its <span class='review-span highlight' data-aligned-summaries='1'>2 mins walk from the main train station</span> that will take u to airport in 25 mins. 10 mins away from downtown (walking) and around 15-20 from Coloseum ! Central location, with lots of hotels around <span class='review-span highlight' data-aligned-summaries='0'>Friendly staff</span>, and really AMAZING breakfast. The restaurant is not the best you can get. Really nice rooms :)</div><div class='text-box'>We stayed 4 nights, and felt secure and comfortable. This is a fairly impersonal hotel, where <span class='review-span highlight' data-aligned-summaries='0'>the staff</span> did not speak unless spoken to, although they <span class='review-span highlight' data-aligned-summaries='0'>were helpful when requests were made</span>. The breakfast buffet was excellent. Our room was a loft, with the king bed up the stairs from the sitting area and bathroom. Several good restaurants nearby.</div><div class='text-box'>Good location if you plan to stay close to <span class='review-span highlight' data-aligned-summaries='1'>Termini rail station is a few minutes walk</span>. Hotel itself not really impressive the rooms are very small with no drawers and a tiny bathroom with a shower only. Does have air conditioning which is about the only good part .Buffet Breakfast was good but overall I wouldnt stay again at this hotel</div><div class='text-box'>We stayed here twice in May and would happily stay again. The rooms were spacious, the breakfast was yum, and <span class='review-span highlight' data-aligned-summaries='0'>the staff were friendly and helpful</span>. You could walk to a lot of Rome's attractions from here but we chose to use the hop on hop off bus which had a stop just around the corner.</div><div class='text-box'>Don't expect t set yur thermostat below 80 degrees. No matter what setting you use, <span class='review-span highlight' data-aligned-summaries='0'>the front desk controls the room temperature and will not set it below 26 Celsius</span>, or 78 Fahrenheit. Disgusting sleeping temperature, and of course does not make for a good vacation. Never again.</div><div class='text-box'>We had a great stay. <span class='review-span highlight' data-aligned-summaries='1'>Close to the train station</span> and many attractions. We walked all over Rome from here. Great breakfast, clean rooms, but <span class='review-span highlight' data-aligned-summaries='0'>the staff</span> was <span class='review-span highlight' data-aligned-summaries='0'>makes it extra special</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">Some of the staff at the hotel were helpful.</span> <span id="1" class="summary-sentence">If you want to go a little further afield there is a train station close-by.</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'); | |
| } | |
| }); | |
| 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'); | |
| } | |
| 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> | |