Spaces:
Sleeping
Sleeping
| <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'><span class='review-span highlight' data-aligned-summaries='0'>You will be comfortable at this hotel</span>. The rooms and baths are large; <span class='review-span highlight' data-aligned-summaries='2'>cleaning service is excellent</span>. It is relatively quiet in busy, central Rome, therefore <span class='review-span highlight' data-aligned-summaries='0'>a very good location to stay for sightseeing</span>. <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 <span class='review-span highlight' data-aligned-summaries='0'>good value for money</span>,on our arrival <span class='review-span highlight' data-aligned-summaries='2'>we did not have the room we booked</span> and were disappointed,<span class='review-span highlight' data-aligned-summaries='2'>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 <span class='review-span highlight' data-aligned-summaries='0'>reviews.i would definately return to this hotel</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Hotel's location is amazing since its 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='2'>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 the <span class='review-span highlight' data-aligned-summaries='2'>staff</span> did not speak unless spoken to, although they <span class='review-span highlight' data-aligned-summaries='2'>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 <span class='review-span highlight' data-aligned-summaries='1'>location</span> if you plan to stay <span class='review-span highlight' data-aligned-summaries='1'>close to Termini rail station</span> is a few minutes walk. 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'><span class='review-span highlight' data-aligned-summaries='0'>We stayed here twice in May and would happily stay again</span>. The rooms were spacious, the breakfast was yum, and <span class='review-span highlight' data-aligned-summaries='2'>the staff were</span> friendly and <span class='review-span highlight' data-aligned-summaries='2'>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'><span class='review-span highlight' data-aligned-summaries='0'>Don't expect t set yur thermostat</span> below 80 degrees. No matter what setting you use, the front desk controls the room temperature and will not set it below 26 Celsius, or 78 Fahrenheit. <span class='review-span highlight' data-aligned-summaries='0'>Disgusting sleeping temperature</span>, and of course does not make for a good vacation. Never again.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>We had a great stay</span>. <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 the staff was makes it extra special.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">A great place to stay.</span> <span id="1" class="summary-sentence">The location is cloes to the main Metro train station.</span> <span id="2" class="summary-sentence">Some of the staff were helpful.</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> | |