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'>Just spent one night at the Holiday Inn, and to be honest, <span class='review-span highlight' data-aligned-summaries='0'>it's the best option on that price range</span>. <span class='review-span highlight' data-aligned-summaries='1'>Lovely setting, and the Pompidou 'Paris Plages' really suited the setting</span>. Chilled out area by the canal with <span class='review-span highlight' data-aligned-summaries='9'>a fab place to eat opposite the entrance, that served proper French simple food</span>. <span class='review-span highlight' data-aligned-summaries='5'>Room spotless</span>, and although when we went to bed we could still hear music, it didn't really bother us. <span class='review-span highlight' data-aligned-summaries='10'>The breakfast was standard, and there were hot options, they were gone by the time we went down</span>. A previous poster mentioned <span class='review-span highlight' data-aligned-summaries='11'>one of the lifts being shut off</span>, and we experienced this, <span class='review-span highlight' data-aligned-summaries='11'>but it didn't impede our stay any</span> - who cares about waiting an extra minute for a lift - if you're that bothered, then <span class='review-span highlight' data-aligned-summaries='11'>use the stairs</span>! <span class='review-span highlight' data-aligned-summaries='0'>Paris can be pretty bad for accommodation of this standard, and this is a gem</span>. The Metro is less than 5 minutes away, and it's nice to be in a part of Paris that is not touristyy at all.</div><div class='text-box'>The hotel is 4 minutes from the metro with a handy all night store en route. <span class='review-span highlight' data-aligned-summaries='7'>The staff were very friendly and efficient</span> and I would recommend thi hotel with its lovely views and <span class='review-span highlight' data-aligned-summaries='5'>large comfortable rooms</span>. <span class='review-span highlight' data-aligned-summaries='4'>My room looked all the way up the canal towards the rotunda near the Stalingrad metro station and overlooked the houseboats moored in the canal basin</span>. The tree lined avenue alongside was used by the locals to play boules and <span class='review-span highlight' data-aligned-summaries='2'>the two cafe bars nearby were ideal for a late night drink</span>/coffee. Easy access to Paris by metro and a real feeling that you were not surrounded by tourists but were seing a genuine slice of French life. I would not hesitate to recommend the hotel although <span class='review-span highlight' data-aligned-summaries='3'>some people might not like the walk from the station at night</span> as it is quite dark (albeit it is past the police station).</div><div class='text-box'>My wife and myself spent 5 days in this hotel from 12th May 2009 and found it to be <span class='review-span highlight' data-aligned-summaries='0'>an exceptional hotel in a lovely location just outside Paris</span>. <span class='review-span highlight' data-aligned-summaries='4'>Our delightful room was overlooking the canal with a view of boats as they plied their way down he canal</span>. <span class='review-span highlight' data-aligned-summaries='5'>Brilliant shower in the good size bathroom, no bath</span>, but this not important to ourselves. <span class='review-span highlight' data-aligned-summaries='6'>Large and very comfortable bed</span> and <span class='review-span highlight' data-aligned-summaries='6'>room had all the facilities you would expect from this hotel group including internet connection, tea and coffee etc.</span> Very adequate breakfast served in dining room and <span class='review-span highlight' data-aligned-summaries='7'>staff were very helpful</span>. We used the excellent public transport system, always a good way to get about Paris, and there was a very convenient Metro station close to the hotel.</div><div class='text-box'>We booked a room 2 months ago. When we arrived last saterday, <span class='review-span highlight' data-aligned-summaries='7'>they were suddenly 'overbooked'. They said the'll send us to a different hotel, they gave us a map en showed us how to walk</span>. When we came to the other hotel, they didn't no nothing about us. <span class='review-span highlight' data-aligned-summaries='7'>The hotelstaff send us to the wrong hotel</span>! After a whole afternoon walking around the nieghbourhood, we finally checked in at the right hotel. A waste of our afternoon, since we stayed only a view days in Paris. <span class='review-span highlight' data-aligned-summaries='7'>We are certainly not happy with the serive at the hotel, you don't treat your guest like that and only say a simple 'sorry' afterwards.</span></div><div class='text-box'>My wife and I stayed at this hotel for a weekend for our anniversary. <span class='review-span highlight' data-aligned-summaries='0'>The hotel was well located to experience Paris without paying the high prices.</span> We purchased a 3 day Visite Paris pass which allowed us unlimited travel on the metro, RER, Bus etc. to visit all the main attractions. The pass also entitled us to a 20% discount on the Euro Disney tickets and the travel there and back! I highly recommend this hotel for a great weekend away.</div><div class='text-box'>This seemed a brand new hotel. <span class='review-span highlight' data-aligned-summaries='2'>Location is nice</span>. <span class='review-span highlight' data-aligned-summaries='4'>The room has a view over the canal</span>. By metro you is quickly in the centre of Paris. <span class='review-span highlight' data-aligned-summaries='11'>Secured parking below the hotel</span>. There were not enough seats in the restaurant, so be ready to wait for some time during rush hour.</div><div class='text-box'>Who would have thought that a <span class='review-span highlight' data-aligned-summaries='0'>H.I. Express could be so enjoyable</span>. <span class='review-span highlight' data-aligned-summaries='7 8'>The staff were extraordinary</span>, <span class='review-span highlight' data-aligned-summaries='1'>the setting on the canal was really nice</span> and the Metro was real close. We enjoyed our stay here prior to meeting at another hotel for a Globus tour.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Had a beautiful time in Paris thanks to this hotel</span> as well. <span class='review-span highlight' data-aligned-summaries='7'>Staff very helpful</span> , <span class='review-span highlight' data-aligned-summaries='3'>metro close by</span> and <span class='review-span highlight' data-aligned-summaries='4'>the view of the canal</span> it's very romantic. Went there with my partner and loved it. Simple, <span class='review-span highlight' data-aligned-summaries='5'>clean</span> and effective . Thank you .</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is a great option for those visiting Paris with a specific price range in mind, as it is a gem in what can be pretty bad accommodation in regards to this standard.</span> <span id="1" class="summary-sentence">The setting is lovely and really suited to its surroundings, making it a simple yet effective choice.</span> <span id="2" class="summary-sentence">Ideal location just on the outskirts of the main city, with multiple cafe bars close by for guests to enjoy if they fancy leaving the hotel.</span> <span id="3" class="summary-sentence">However, it is not in walking distance from the main station which can be off putting for some.</span> <span id="4" class="summary-sentence">The views from the rooms overlook the canals with its boats and looking onwards to the rotunda near the metro station in Stalingrad.</span> <span id="5" class="summary-sentence">There is also a good-sized bathroom with a great shower, though no bath and the room itself was clean and very large.</span> <span id="6" class="summary-sentence">The bed is comfortable and the rooms included all the expected facilities, an internet connection, and coffee or tea.</span> <span id="7" class="summary-sentence">The service was okay, as the staff generally try to be helpful where they can.</span> <span id="8" class="summary-sentence">But it could be better at times.</span> <span id="9" class="summary-sentence">The French food served nearby the hotel was simple but proper, it was a great place to eat.</span> <span id="10" class="summary-sentence">Sadly the hot but standard breakfast options were gone by a certain time in the morning.</span> <span id="11" class="summary-sentence">The hotel has the option of parking beneath the hotel and it is secured and although there were issues with the lift, stairs were available for use.</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> | |