lovodkin93's picture
upload the test html files
122b9cd verified
raw
history blame
13.1 kB
<!DOCTYPE html>
<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 !important; /* Dark grey for muted text */
cursor: pointer;}
.not-hover-highlight { background-color: lightyellow;
color: #606060 !important; /* 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'>The Metropark Kowloon is a good <span class='review-span highlight' data-aligned-summaries='1'>hotel</span> with very good price-quality ratio. <span class='review-span highlight' data-aligned-summaries='3'>Make sure you get a room in the Club floor, as some of the lower levels seem to be a bit outdated</span>. <span class='review-span highlight' data-aligned-summaries='3'>The rooms are clean</span>, comfortable and we couldn't hear any noises at any point so it was perfect for resting. Kowloon <span class='review-span highlight' data-aligned-summaries='1'>wasn't a beautiful area of Hong Kong</span>, going back we would stay somewhere else, particularly if you are not into shopping (and you prefer cultural and walking activities). <span class='review-span highlight' data-aligned-summaries='4'>The staff weren't overly nice but they were helpful and alerted us that we were leaving our phone behind in the room straight away</span>, which was particularly efficient. <span class='review-span highlight' data-aligned-summaries='7'>We found the shuttle bus</span> to Mongkok and the harbour area extremely helpful and convenient and saved us a lot of time an money. Knowing more about Hong Kong now, <span class='review-span highlight' data-aligned-summaries='8'>I would not book a hotel with a swimming pool given the weather doesn't always permit swimming</span> or sunbaking.</div><div class='text-box'>Stayed at this hotel for a week and apart from <span class='review-span highlight' data-aligned-summaries='1'>the location, which was a bit disappointing</span>, I have no real complaints about the hotel. Upon arrival the staff were very helpful and took care of our luggage whilst we went to check in, at which we were quickly dealt with. <span class='review-span highlight' data-aligned-summaries='2 3'>The double room we stayed in was clean</span> <span class='review-span highlight' data-aligned-summaries='2'>and the size was comfortable</span>. We visited the hotel's two restaurants. <span class='review-span highlight' data-aligned-summaries='6'>The food in the restaurant was excellent and varied and is worth trying</span>. The Sip Sip bar (which had a sporty theme) offered a good variety of cocktails and provided an opportunity to catch up with Premiership football matches. One tip I would suggest is that if you ever get a taxi back to the hotel make sure you tell the driver that you want to go to the Metropark Hotel Kowloon, as there is another Metropark Hotel nearby.</div><div class='text-box'>Right from the check-in to check-out, the staff and their service was prompt and excellent. <span class='review-span highlight' data-aligned-summaries='4'>The staff's compliance to our special requests within the reasonable limits is very highly commendable</span>. <span class='review-span highlight' data-aligned-summaries='2'>The rooms were adequate except in the lighting level</span> which we have found even in highly priced hotels - our personal preference is well/<span class='review-span highlight' data-aligned-summaries='2'>brightly lit room</span>. The amenities in the bathroom/toilet was sufficient. <span class='review-span highlight' data-aligned-summaries='5'>The buffet breakfast included in the package was a nice spread and more than adequate to start the day off</span>. <span class='review-span highlight' data-aligned-summaries='7'>Hats off to their free shuttle service</span> to the main points from where we could get the MTR to any place we needed to go. Overall the best hotel at the best price for the one who needs to shower and hit the bed after a full day of sightseeing/shopping.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='4'>The staff were very helpful</span> and <span class='review-span highlight' data-aligned-summaries='0'>the complimentary breakfasts for the period we were there were an unexpected bonus. The Internet connection wasa</span> <span class='review-span highlight' data-aligned-summaries='0 7'>free</span> <span class='review-span highlight' data-aligned-summaries='0'>as was the</span> <span class='review-span highlight' data-aligned-summaries='0 7'>excellent 30 minute mini-bus service</span>.<span class='review-span highlight' data-aligned-summaries='0'></span> We did not eat at the hotel except for breakfast prefering to take in the local eateries. We found that Langham Place in Mong Kok was quite good and was only a pleasant walk from the hotel although the hotel bus route took us close. The Ladies Market is in the same location as Langham Place and made for some happy bargaining. <span class='review-span highlight' data-aligned-summaries='0'>All in all, we enjoyed our stay there</span>.</div><div class='text-box'>On our first trip to Hong Kong we stayed here at the Metro Park Kowloon, we only had a few days so spent most of it out of hotel, but <span class='review-span highlight' data-aligned-summaries='0'>the facilities seemed very good</span>, lost available shop/florist/bar/snacks/pool. <span class='review-span highlight' data-aligned-summaries='6'>Buffet was very well presented and had wonderful variety</span>. <span class='review-span highlight' data-aligned-summaries='2 3'>Rooms well kept, clean</span> <span class='review-span highlight' data-aligned-summaries='2'>and modern. Air conditioning worked well</span>, sometimes a little too well in the public places such as reception/lobbies etc, bit chilly compared to the humdity outside. Interesting Hong Kong traditions such as not using floor 13.i like superstitions!</div><div class='text-box'>Stayed for 3 nights in march and 1 night in april 2012. I stayed in <span class='review-span highlight' data-aligned-summaries='0'>the Club area of the hotel</span> and found the lounge to be <span class='review-span highlight' data-aligned-summaries='0'>very quite and comfortable with coffee/tea and newspapers</span> and a 'happy hour' each evening with drinks and snacks. <span class='review-span highlight' data-aligned-summaries='5'>Buffet breakfast was excellent with a wide range of choices available</span>. Staff were very friendly. Hotel is located slightly away from the the CBD but was easily reached by MTR.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Cannot fault hotel in any way</span>. <span class='review-span highlight' data-aligned-summaries='5'>Breakfast very good</span>, lots of variety. <span class='review-span highlight' data-aligned-summaries='7'>Hotel shuttle bus</span> is brilliant. First visit to Hong Kong for my 83yr old mother so we made good use of the shuttle bus. Would definitely stay here again and have no hesitation in recommending this hotel.</div><div class='text-box'>Avoid if you can. <span class='review-span highlight' data-aligned-summaries='1'>It's</span> <span class='review-span highlight' data-aligned-summaries='0 1'>not in a good location</span>, <span class='review-span highlight' data-aligned-summaries='0 2 3'>it's smelly and</span> <span class='review-span highlight' data-aligned-summaries='2 3'>a bit</span> <span class='review-span highlight' data-aligned-summaries='0 2 3'>scruffy</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The facilities of this hotel are really great and therefore it's one of the most enjoyable stays.</span> <span id="1" class="summary-sentence">The location of the hotel was rather disappointing and not a very scenic area of Hong Kong.</span> <span id="2" class="summary-sentence">The hotel's rooms are adequate, although perhaps a little darkly lit.</span> <span id="3" class="summary-sentence">The rooms are clean and quiet, although for a more updated room it is worth booking a room on the Club floor.</span> <span id="4" class="summary-sentence">There is nothing the staff find to be too much trouble.</span> <span id="5" class="summary-sentence">The buffet breakfast is absolutely amazing and really varied.</span> <span id="6" class="summary-sentence">In addition the restaurant provides some really good food that's worth trying.</span> <span id="7" class="summary-sentence">The hotel has a bi-hourly bus shuttle service available to guests.</span> <span id="8" class="summary-sentence">It is not worth getting a hotel with a pool as it is often not the climate for swimming etc.</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>