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'>I feel the hotel is slightly overrated. <span class='review-span highlight' data-aligned-summaries='0'>The setting is fine, and</span> <span class='review-span highlight' data-aligned-summaries='0 2 6'>there are lovely orange trees</span> <span class='review-span highlight' data-aligned-summaries='2 6'>in the nice court yards</span> of the smallish complex. However <span class='review-span highlight' data-aligned-summaries='5'>the rooms are noisy with tilen floors</span> and banging doors. The room window gives unto the open tilen pathway leading past the doors. <span class='review-span highlight' data-aligned-summaries='6'>Breakfast is ok but basic</span>. There is free internet available amidst the breakfast tables. Staff seems a little scarce, with the couple serving breakfast later in the day cleaning the rooms. What is missing however is the loving hand. For instance all flowers are made of plastic, even the azaleas and cyclamen outside in the garden. The personal touch somehow seems missing, and that really is a pity.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 2'>Hotel Santa Maria is a delightful, cheery & quiet place to stay</span>,<span class='review-span highlight' data-aligned-summaries='2'></span> <span class='review-span highlight' data-aligned-summaries='0 2'>tucked away in a small street in Trastevere</span>, Antonio (manager) is molto simpatico - friendly and very helpful. The hotel is not a fancy place, but quite comfy enough, with <span class='review-span highlight' data-aligned-summaries='6'>a good breakfast buffet, which you can eat in the lovely courtyard full of orange trees</span>. <span class='review-span highlight' data-aligned-summaries='3'>The colorful neighborhood is great for</span> walking around, <span class='review-span highlight' data-aligned-summaries='3'>lots of</span> shops & <span class='review-span highlight' data-aligned-summaries='3'>outdoor restaurants</span> that stay open late. You can easily walk to other sites in the city, though we mostly took cabs to centro to save time.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>I found this area of Rome to be very special and the Hotel Santa Maria was more than I had expected</span>. I enjoyed the peace and serentity with the safety gates, <span class='review-span highlight' data-aligned-summaries='6'>beautiful breakfast which could be taken either in the</span> eating area or <span class='review-span highlight' data-aligned-summaries='6'>courtyard</span> and a nice wine bar with appetizers. The rooms were clean and well maintained. Personnel were outstanding to work with. <span class='review-span highlight' data-aligned-summaries='0 3'>The Trastevere area is near</span> <span class='review-span highlight' data-aligned-summaries='0'>all of the major attractions</span> and yet, it is magical to stroll through a maze of fascinating medieval streets with <span class='review-span highlight' data-aligned-summaries='3'>some of the best restaurants in Rome</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Wonderful place to stay!</span> <span class='review-span highlight' data-aligned-summaries='0 2'>An intimate, cozy place</span>-<span class='review-span highlight' data-aligned-summaries='2 6'>loved the orange-tree courtyard</span>. Front desk personnel was most helpful. Cleaning/cooking staff wonderful-very clean rooms. <span class='review-span highlight' data-aligned-summaries='6'>Breakfasts very filling and tasty</span>-the scrambled eggs and cappuccino were my favorites. Neighborhood not touristy. 15-minute walk to the Colosseum; 25 min. to St. Peter's. They arranged driver for airport pickup and dropoff. <span class='review-span highlight' data-aligned-summaries='7'>Bells of neighboring Church could be sleep-disruptive for light sleepers</span>, but earplugs blocked the noise.</div><div class='text-box'>Accomodating people who are always pleasent. <span class='review-span highlight' data-aligned-summaries='6'>Good breakfast</span>. <span class='review-span highlight' data-aligned-summaries='3'>A block from Santa Maria Maggiore</span> and <span class='review-span highlight' data-aligned-summaries='3'>Ponte Sisto</span> but tucked away from all bustle. We walked to the center of Rome, Campo Fiore, Janiculum, all over Trastevere. <span class='review-span highlight' data-aligned-summaries='0 4'>Close to #8 tram with connections to airport</span>, <span class='review-span highlight' data-aligned-summaries='4'>Tivoli</span> and <span class='review-span highlight' data-aligned-summaries='4'>all of Rome</span>. Private courtyard through gated drive. A good refuge for tired feet and bodies. We would go back.</div><div class='text-box'>We stayed here for five nights. <span class='review-span highlight' data-aligned-summaries='0'>a great base for exploring Rome</span>; thank heavens we took a taxi - we'd never have found it by ourselves! <span class='review-span highlight' data-aligned-summaries='3'>Right in the middle of Trastevere, ideal for restaurants</span> etc. Nice room, pity next doors plumbing is so noisy though, otherwise very peaceful. Very nice staff - would stay here again.</div><div class='text-box'>Spent 4 restful nights at a lovely oasis of calm in Trastevere. Very well looked after, nothing was too much trouble. <span class='review-span highlight' data-aligned-summaries='0'>Very convenient for all parts of Rome and Vatican</span>. <span class='review-span highlight' data-aligned-summaries='0 2 5'>Lovely that rooms opened out into open air of courtyards</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='2'>This was a charming</span>, albeit <span class='review-span highlight' data-aligned-summaries='1'>somewhat pricey</span>, <span class='review-span highlight' data-aligned-summaries='2'>refuge</span> from the overload of Rome. <span class='review-span highlight' data-aligned-summaries='0'>The employees were wonderful and the setting very peaceful</span>. <span class='review-span highlight' data-aligned-summaries='3'>The location was also very handy</span>, and I would definitely stay here again.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel provides a wonderful, cosy and convenient place to stay.</span> <span id="1" class="summary-sentence">It is a little pricey</span> <span id="2" class="summary-sentence">however it's really charming.</span> <span id="3" class="summary-sentence">The hotel is ideally situated for local restaurants, being only a stone's throw from Santa Maria Maggiore and Ponte Sisto too.</span> <span id="4" class="summary-sentence">The hotel is close to a tram link to the airport, Tivoli and other areas in Rome.</span> <span id="5" class="summary-sentence">It was great that the rooms opened onto the courtyards but this and the tiled floors made them rather noisy.</span> <span id="6" class="summary-sentence">The hotel's breakfast was adequate but was nice to enjoy in a courtyard of orange trees.</span> <span id="7" class="summary-sentence">It is worth mentioning that the bell chimes from a nearby church can clearly be heard in the rooms, which may be a negative for some guests.</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> | |