File size: 12,507 Bytes
72f5cb0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

<!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: 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'>Would come back again and again We have been staying</span> at Island Shangri-la once <span class='review-span highlight' data-aligned-summaries='0'>every year for the past 7 years</span>. <span class='review-span highlight' data-aligned-summaries='0'>They have continued to improve their service year after year</span>. The service is impeccable. <span class='review-span highlight' data-aligned-summaries='1 3'>The rooms</span> <span class='review-span highlight' data-aligned-summaries='3'>were renovated a couple of years ago and they added a modern twist</span>. But the <span class='review-span highlight' data-aligned-summaries='1'>level of comfort</span> and 'homeyness' <span class='review-span highlight' data-aligned-summaries='1'>has been retained</span>. With <span class='review-span highlight' data-aligned-summaries='2'>the Pacific Place mall right underneath the hotel</span>, <span class='review-span highlight' data-aligned-summaries='2'>it is so convenient to just go down and shop</span>, knowing that even if you carry a lot of bulky items. There is no worry about riding through the mrt or lining up to get a taxi. You can just catch the elevator and go right up to your room. <span class='review-span highlight' data-aligned-summaries='0'>It is always a perfect experience staying at the hotel</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Good, but not unforgettable</span> This hotel is <span class='review-span highlight' data-aligned-summaries='0'>certainly good enough as a business hotel</span>. <span class='review-span highlight' data-aligned-summaries='0'>However, I really will not stay here for a leisure trip</span>. As mentioned in another review, <span class='review-span highlight' data-aligned-summaries='1'>there are just no personal touches or charm</span>. The staff is polite but the service is more mechanical, rather than from the heart. <span class='review-span highlight' data-aligned-summaries='6'>There is a pool</span>, <span class='review-span highlight' data-aligned-summaries='6'>but</span> it offers a view of skyscrapers nearby. <span class='review-span highlight' data-aligned-summaries='6'>It's really quite hard to relax in this evironment</span>.<span class='review-span highlight' data-aligned-summaries='2'>The location is not bad as it is connected to the subway via a big shopping mall</span>. However, in the morning, a cab ride can take quite long to reach the central business district due to traffic jam.</div><div class='text-box'>OK, not spectacular. I spent a few nights at the Shangri La in August. <span class='review-span highlight' data-aligned-summaries='0'>I found the overall experience lacking</span>.The rooms are bland, all function with surprisingly little style (surprising given the strong feng shui influence in HK). <span class='review-span highlight' data-aligned-summaries='4'>The rooms are also small, even by HK/Toyko standards</span>. <span class='review-span highlight' data-aligned-summaries='5'>Lunch at the cafe was expensive</span> and <span class='review-span highlight' data-aligned-summaries='5'>disappointing</span>. <span class='review-span highlight' data-aligned-summaries='5'>Breakfast was much better</span>, though also very expensive.<span class='review-span highlight' data-aligned-summaries='6'>The pool is really nice</span>, and <span class='review-span highlight' data-aligned-summaries='6'>the gym is good</span>. The staff was OK, but interactions felt rushed and reminded me more of a NYC business hotel than a true 5 star.<span class='review-span highlight' data-aligned-summaries='0'>Don't be afraid to try somewhere else</span>.</div><div class='text-box'>once again, great stay once again, a great stay, upgraded to a harbour view as it was our silver wedding aniversary, flowers, fruit etc as well, <span class='review-span highlight' data-aligned-summaries='0'>i love this hotel so much</span>, such humble and smilley staff considering <span class='review-span highlight' data-aligned-summaries='0'>it is regullaly voted one of the best hotels in the world for everything</span>, fab possition, great rooms, wonderfull staff, do i own it or work for them? no,we just love staying here, well done, shangri- la once again!</div><div class='text-box'>consistently excellent I stay at the island SRL frequently with business, and <span class='review-span highlight' data-aligned-summaries='0'>it isconsistently excellent</span> - <span class='review-span highlight' data-aligned-summaries='0'>staff are always amazing</span>. <span class='review-span highlight' data-aligned-summaries='3'>Isupposethe only picky downside is if you like modern it may be a littlechinzy</span> for you!The service is outstanding.the bar lady in the foyer bar has remembered the drink I have on every visit (as she does with every repeat guest!) and <span class='review-span highlight' data-aligned-summaries='6'>the pool is simply relaxation</span> at <span class='review-span highlight' data-aligned-summaries='0'>its best!Highly recommended</span></div><div class='text-box'>Great hotel, deserves its reputation Really <span class='review-span highlight' data-aligned-summaries='0 2'>great location</span> <span class='review-span highlight' data-aligned-summaries='2'>next to luxury shopping mall</span> and park. We stayed in the lowest category room (deluxe peakview) and had no complaints. <span class='review-span highlight' data-aligned-summaries='0'>Service was excellent</span>, staff couldn't do enough for us and our 2 kids, great welcome. <span class='review-span highlight' data-aligned-summaries='5'>Breakfast amazing</span>, loved the outdoor pool - a great stay.</div><div class='text-box'>Excellent This place is great. The welcome was impressive, <span class='review-span highlight' data-aligned-summaries='2'>the</span> <span class='review-span highlight' data-aligned-summaries='0 2'>location is great</span> <span class='review-span highlight' data-aligned-summaries='2'>above Pacific place and the MTR station</span>.<span class='review-span highlight' data-aligned-summaries='4'>The</span> <span class='review-span highlight' data-aligned-summaries='0 1 4'>rooms</span> <span class='review-span highlight' data-aligned-summaries='4'>were spacious</span>, clean and <span class='review-span highlight' data-aligned-summaries='0 1'>had everything you could ask for</span>. Staff are very polite and efficient.<span class='review-span highlight' data-aligned-summaries='0'>Highly recommended</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>top of the line</span> but you pay for it showReview(3417094, 'full');</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">A well recommended hotel, that is a particularly pleasant experience to visit.</span> <span id="1" class="summary-sentence">Very comfortable to stay in, however there are no unique touches that makes it personal and stand out from other hotels in the area.</span> <span id="2" class="summary-sentence">The location is okay as is near the subway and is atop the Pacific Place Mall, so shopping is very convenient.</span> <span id="3" class="summary-sentence">The recently renovated rooms are decorated to have a modern twist.</span> <span id="4" class="summary-sentence">However, even by Hong Kong and Tokyo standards, they are considerably smaller than other hotels.</span> <span id="5" class="summary-sentence">The cafe can be quite expensive in this hotel at any time of day, however the food is much better for breakfast than it is for lunch.</span> <span id="6" class="summary-sentence">Excellent facilities at this hotel to keep guests busy and entertained.</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>