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'><span class='review-span highlight' data-aligned-summaries='0'>I feel the hotel is slightly overrated</span>. The setting is fine, and <span class='review-span highlight' data-aligned-summaries='2'>there are lovely orange trees in the nice court yards of the smallish complex</span>. However <span class='review-span highlight' data-aligned-summaries='3'>the rooms are noisy with</span> tilen floors and <span class='review-span highlight' data-aligned-summaries='3'>banging doors</span>. The room window gives unto the open tilen pathway leading past the doors. <span class='review-span highlight' data-aligned-summaries='4'>Breakfast is</span> ok but <span class='review-span highlight' data-aligned-summaries='4'>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. <span class='review-span highlight' data-aligned-summaries='0'>The personal touch somehow seems missing</span>, and that really is a pity.</div><div class='text-box'>Hotel Santa Maria is a delightful, cheery & quiet place to stay, tucked away in a small street in Trastevere, Antonio (manager) is molto simpatico - friendly and very helpful. The hotel is not a fancy place, but quite comfy enough, with a <span class='review-span highlight' data-aligned-summaries='4'>good breakfast buffet</span>, which you can eat in the <span class='review-span highlight' data-aligned-summaries='2'>lovely courtyard full of orange trees</span>. The colorful <span class='review-span highlight' data-aligned-summaries='1'>neighborhood is great for walking around</span>, <span class='review-span highlight' data-aligned-summaries='1'>lots of shops & outdoor restaurants</span> that stay open late. You <span class='review-span highlight' data-aligned-summaries='1'>can easily walk to other sites in the city</span>, though we mostly took cabs to centro to save time.</div><div class='text-box'>I found this area of Rome to be very special and <span class='review-span highlight' data-aligned-summaries='0'>the Hotel Santa Maria was more than I had expected</span>. I enjoyed the peace and serentity with the safety gates, beautiful breakfast which could be taken either in the eating area or courtyard and a nice wine bar with appetizers. <span class='review-span highlight' data-aligned-summaries='3'>The rooms were clean and well maintained</span>. Personnel were outstanding to work with. <span class='review-span highlight' data-aligned-summaries='1'>The Trastevere area is near all of the major attractions</span> and yet, <span class='review-span highlight' data-aligned-summaries='1'>it is magical to stroll through a maze of fascinating medieval streets with 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'>An intimate, cozy place</span>-<span class='review-span highlight' data-aligned-summaries='2'>loved the orange-tree courtyard</span>. Front desk personnel was most helpful. Cleaning/cooking staff wonderful-<span class='review-span highlight' data-aligned-summaries='3'>very clean rooms</span>. <span class='review-span highlight' data-aligned-summaries='4'>Breakfasts very filling and tasty</span>-<span class='review-span highlight' data-aligned-summaries='5'>the scrambled eggs</span> and cappuccino <span class='review-span highlight' data-aligned-summaries='5'>were my favorites</span>. Neighborhood not touristy. <span class='review-span highlight' data-aligned-summaries='1'>15-minute walk to the Colosseum; 25 min. to St. Peter's</span>. They arranged driver for airport pickup and dropoff. <span class='review-span highlight' data-aligned-summaries='6'>Bells of neighboring Church could be sleep-disruptive for light sleepers, but earplugs blocked the noise</span>.</div><div class='text-box'>Accomodating people who are always pleasent. <span class='review-span highlight' data-aligned-summaries='4'>Good breakfast</span>. A block from Santa Maria Maggiore and Ponte Sisto but tucked away from all bustle. We <span class='review-span highlight' data-aligned-summaries='1'>walked to the center of Rome</span>, Campo Fiore, Janiculum, all over Trastevere. Close to #8 tram with connections to airport, Tivoli and all of Rome. 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='1'>a great base for exploring Rome</span>; thank heavens we took a taxi - we'd never have found it by ourselves! Right in the middle of Trastevere, <span class='review-span highlight' data-aligned-summaries='1'>ideal for restaurants</span> etc. <span class='review-span highlight' data-aligned-summaries='3'>Nice room</span>, pity <span class='review-span highlight' data-aligned-summaries='3'>next doors plumbing is so noisy</span> though, otherwise very peaceful. Very nice staff - would stay here again.</div><div class='text-box'>Spent 4 restful nights at a <span class='review-span highlight' data-aligned-summaries='3'>lovely oasis of calm</span> in Trastevere. <span class='review-span highlight' data-aligned-summaries='0'>Very well looked after, nothing was too much trouble</span>. <span class='review-span highlight' data-aligned-summaries='1'>Very convenient for all parts of Rome and Vatican</span>. Lovely that <span class='review-span highlight' data-aligned-summaries='3'>rooms opened out into open air of courtyards</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>This was a charming, albeit somewhat pricey, refuge from the overload of Rome</span>. The employees were wonderful and the setting very peaceful. <span class='review-span highlight' data-aligned-summaries='1'>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">The hotel seems to be missing the personal details and it is perhaps slightly overrated.</span> <span id="1" class="summary-sentence">This hotel is beautifully set for walking to great sites of the city as well as shops and outdoor restaurants located close-by.</span> <span id="2" class="summary-sentence">The small complex that the hotel is located within had some beautiful orange trees as well, adding to the colourful neighbourhood.</span> <span id="3" class="summary-sentence">The rooms here are really lovely although were a bit noisy with doors banging.</span> <span id="4" class="summary-sentence">The breakfast buffet was really tasty if a little bit basic.</span> <span id="5" class="summary-sentence">The scrambled eggs are highly recommended.</span> <span id="6" class="summary-sentence">There was some noise coming from the bells of the nearby church therefore it is recommended to bring earplugs.</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> | |