Hugging Face's logo

Spaces:
lovodkin93
/
FuseReviews
Running

App Files Community
1
lovodkin93 commited on
Commit
dc7152d
·
verified ·
1 Parent(s): b68f1aa

Upload 99 files

Browse files
This view is limited to 50 files because it contains too many changes.   See raw diff
Files changed (50) hide show
  1. html_files/dev/CocoTrip-dev_comm-inst_0_a_summ_0.html +135 -0
  2. html_files/dev/CocoTrip-dev_comm-inst_0_a_summ_1.html +135 -0
  3. html_files/dev/CocoTrip-dev_comm-inst_0_a_summ_2.html +135 -0
  4. html_files/dev/CocoTrip-dev_comm-inst_0_b_summ_0.html +135 -0
  5. html_files/dev/CocoTrip-dev_comm-inst_0_b_summ_1.html +135 -0
  6. html_files/dev/CocoTrip-dev_comm-inst_0_b_summ_2.html +135 -0
  7. html_files/dev/CocoTrip-dev_comm-inst_3_a_summ_0.html +135 -0
  8. html_files/dev/CocoTrip-dev_comm-inst_3_a_summ_1.html +135 -0
  9. html_files/dev/CocoTrip-dev_comm-inst_3_a_summ_2.html +135 -0
  10. html_files/dev/CocoTrip-dev_comm-inst_3_b_summ_0.html +135 -0
  11. html_files/dev/CocoTrip-dev_comm-inst_3_b_summ_1.html +135 -0
  12. html_files/dev/CocoTrip-dev_comm-inst_3_b_summ_2.html +135 -0
  13. html_files/dev/CocoTrip-dev_comm-inst_5_a_summ_0.html +135 -0
  14. html_files/dev/CocoTrip-dev_comm-inst_5_a_summ_1.html +135 -0
  15. html_files/dev/CocoTrip-dev_comm-inst_5_a_summ_2.html +135 -0
  16. html_files/dev/CocoTrip-dev_comm-inst_5_b_summ_0.html +135 -0
  17. html_files/dev/CocoTrip-dev_comm-inst_5_b_summ_1.html +135 -0
  18. html_files/dev/CocoTrip-dev_comm-inst_5_b_summ_2.html +135 -0
  19. html_files/dev/CocoTrip-dev_comm-inst_6_a_summ_0.html +135 -0
  20. html_files/dev/CocoTrip-dev_comm-inst_6_a_summ_1.html +135 -0
  21. html_files/dev/CocoTrip-dev_comm-inst_6_a_summ_2.html +135 -0
  22. html_files/dev/CocoTrip-dev_comm-inst_6_b_summ_0.html +135 -0
  23. html_files/dev/CocoTrip-dev_comm-inst_6_b_summ_1.html +135 -0
  24. html_files/dev/CocoTrip-dev_comm-inst_6_b_summ_2.html +135 -0
  25. html_files/dev/CocoTrip-dev_comm-inst_7_a_summ_0.html +135 -0
  26. html_files/dev/CocoTrip-dev_comm-inst_7_a_summ_1.html +135 -0
  27. html_files/dev/CocoTrip-dev_comm-inst_7_a_summ_2.html +135 -0
  28. html_files/dev/CocoTrip-dev_comm-inst_7_b_summ_0.html +135 -0
  29. html_files/dev/CocoTrip-dev_comm-inst_7_b_summ_1.html +135 -0
  30. html_files/dev/CocoTrip-dev_comm-inst_7_b_summ_2.html +135 -0
  31. html_files/dev/CocoTrip-dev_cont-inst_0_a_summ_0.html +135 -0
  32. html_files/dev/CocoTrip-dev_cont-inst_0_a_summ_1.html +135 -0
  33. html_files/dev/CocoTrip-dev_cont-inst_0_a_summ_2.html +135 -0
  34. html_files/dev/CocoTrip-dev_cont-inst_0_b_summ_0.html +135 -0
  35. html_files/dev/CocoTrip-dev_cont-inst_0_b_summ_1.html +135 -0
  36. html_files/dev/CocoTrip-dev_cont-inst_0_b_summ_2.html +135 -0
  37. html_files/dev/CocoTrip-dev_cont-inst_3_a_summ_0.html +135 -0
  38. html_files/dev/CocoTrip-dev_cont-inst_3_a_summ_1.html +135 -0
  39. html_files/dev/CocoTrip-dev_cont-inst_3_a_summ_2.html +135 -0
  40. html_files/dev/CocoTrip-dev_cont-inst_3_b_summ_0.html +135 -0
  41. html_files/dev/CocoTrip-dev_cont-inst_3_b_summ_1.html +135 -0
  42. html_files/dev/CocoTrip-dev_cont-inst_3_b_summ_2.html +135 -0
  43. html_files/dev/CocoTrip-dev_cont-inst_5_a_summ_0.html +135 -0
  44. html_files/dev/CocoTrip-dev_cont-inst_5_a_summ_1.html +135 -0
  45. html_files/dev/CocoTrip-dev_cont-inst_5_a_summ_2.html +135 -0
  46. html_files/dev/CocoTrip-dev_cont-inst_5_b_summ_0.html +135 -0
  47. html_files/dev/CocoTrip-dev_cont-inst_5_b_summ_1.html +135 -0
  48. html_files/dev/CocoTrip-dev_cont-inst_5_b_summ_2.html +135 -0
  49. html_files/dev/CocoTrip-dev_cont-inst_6_a_summ_0.html +135 -0
  50. html_files/dev/CocoTrip-dev_cont-inst_6_a_summ_1.html +135 -0
html_files/dev/CocoTrip-dev_comm-inst_0_a_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Our company has rented conference rooms and held many meetings and corporate events at Place D'Armes and we were extremely satisfied with their service. There was always someone to greet and help with the setup and make sure we have everything we needed. More importantly, technical service was efficient and really went out of their way (even when it is your own equipment). The rooms are clean and beautiful and <span class='review-span highlight' data-aligned-summaries='0'>staff is great</span>. The only negative thing is that they charge for the conference room for the whole day regardless if you only need it for half a day or an hour.</div><div class='text-box'>The <span class='review-span highlight' data-aligned-summaries='0'>hotel is located in the OLD Town</span> part of Montreal by the Notre Dame Cathedral and short walking distance to the rivers edge. This hotel was a great value and the staff and location were excellent. There are 2 restaurants in the hotel that are very highly rated. The <span class='review-span highlight' data-aligned-summaries='0'>staff and service were excellent</span>. The rooms are specious and nicely decorated The bathrooms are very nice with very big bathtubs. There is also a roof terrace to have drinks and enjoy the views. Couldn't use because it was raining.</div><div class='text-box'>We just returned from a mid-winter weekend get away to Montreal. <span class='review-span highlight' data-aligned-summaries='0'>We picked this hotel due to its location in Old Montreal, close to restaurants, Notre Dame and the cobblestone streets</span>. From the moment we arrived when the valet service looked after the car until we checked out <span class='review-span highlight' data-aligned-summaries='0'>the service of the staff was top notch</span>. The rooms were nice with hardwood floors and exposed brick. The bar, Suite701, is the perfect spot for a night cap. We would definately return.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Absolutely one of the best places to stay</span> while visiting old city Montreal. <span class='review-span highlight' data-aligned-summaries='0'>Staff was very friendly and accommodating</span>. The rooftop bar and restaurant was beautiful <span class='review-span highlight' data-aligned-summaries='0'>with a view of Notre Dame Basilica</span>. We stayed in Junior Suite 3402 and really appreciated the ambiance and decor. If I were to visit again I would think of staying in 3602 (second digit is the floor). The street noise was not bad however you will have early morning local truck deliveries.</div><div class='text-box'>Lovely <span class='review-span highlight' data-aligned-summaries='0'>hotel</span> in an historic building <span class='review-span highlight' data-aligned-summaries='0'>with a fantastic location</span>. Nice rooms, very friendly and <span class='review-span highlight' data-aligned-summaries='0'>service-oriented staff</span>. Great little touches like chocolates on the pillow and turn-down service. Very helpful concierge. I was in Laval for business and went to Montreal for the weekend. I walked to restaurants, bars, the river, shopping. Close enough to walk to Mont Royal.</div><div class='text-box'>Stayed in one of the Suites which we got using one of the major credit card upgrades. Amazing bathroom with rain shower and a large tub. Modern room, clean bathroom, <span class='review-span highlight' data-aligned-summaries='0'>great service</span>, great beds and blankets. The only thing that it lacks it is a pool but it can be overlooked. <span class='review-span highlight' data-aligned-summaries='0'>Location is great</span>, the old Montreal.</div><div class='text-box'>Le Place D'Armes is an amazingly elegant hotel with <span class='review-span highlight' data-aligned-summaries='0'>staff that have a beautiful authenticity about them</span>. The comfort and design of the rooms is worth the price and is a great fit for both business or personal occasions. If you are planning a trip to Montreal you simply need to check out this hotel.</div><div class='text-box'>Well I have nothing but good things to say about this hotel, it was just wonderful in every way. <span class='review-span highlight' data-aligned-summaries='0'>Perfect location</span>, spotless, <span class='review-span highlight' data-aligned-summaries='0'>nice staff</span>. Possibly the nicest place I have ever stayed. If you go to montreal and dont stay here you're missing out!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The staff at the hotel were incredibly accommodating and the hotel was well located.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_0_a_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Our company has rented conference rooms and held many meetings and corporate events at Place D'Armes and we were extremely satisfied with their service. There was always someone to greet and help with the setup and make sure we have everything we needed. More importantly, technical service was efficient and really went out of their way (even when it is your own equipment). The rooms are clean and beautiful and <span class='review-span highlight' data-aligned-summaries='0'>staff is great</span>. The only negative thing is that they charge for the conference room for the whole day regardless if you only need it for half a day or an hour.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>The hotel is located in the OLD Town part of Montreal by the Notre Dame Cathedral and short walking distance to the rivers edge</span>. This hotel was a great value and the staff and location were excellent. There are 2 restaurants in the hotel that are very highly rated. <span class='review-span highlight' data-aligned-summaries='0'>The staff and service were excellent</span>. The rooms are specious and nicely decorated The bathrooms are very nice with very big bathtubs. There is also a roof terrace to have drinks and enjoy the views. Couldn't use because it was raining.</div><div class='text-box'>We just returned from a mid-winter weekend get away to Montreal. We picked this <span class='review-span highlight' data-aligned-summaries='1'>hotel</span> due to its location <span class='review-span highlight' data-aligned-summaries='1'>in Old Montreal, close to restaurants, Notre Dame and the cobblestone streets</span>. From the moment we arrived when the valet service looked after the car until we checked out the service of <span class='review-span highlight' data-aligned-summaries='0'>the staff was top notch</span>. The rooms were nice with hardwood floors and exposed brick. The bar, Suite701, is the perfect spot for a night cap. We would definately return.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Absolutely one of the best places to stay while visiting old city Montreal</span>. <span class='review-span highlight' data-aligned-summaries='0'>Staff was very friendly and accommodating</span>. <span class='review-span highlight' data-aligned-summaries='1'>The rooftop bar and restaurant was beautiful</span> with a view of Notre Dame Basilica. We stayed in Junior Suite 3402 and really appreciated the ambiance and decor. If I were to visit again I would think of staying in 3602 (second digit is the floor). The street noise was not bad however you will have early morning local truck deliveries.</div><div class='text-box'>Lovely hotel in an historic building with a fantastic location. Nice rooms, <span class='review-span highlight' data-aligned-summaries='0'>very friendly and service-oriented staff</span>. Great little touches like chocolates on the pillow and turn-down service. Very helpful concierge. I was in Laval for business and went to Montreal for the weekend. <span class='review-span highlight' data-aligned-summaries='1'>I walked to restaurants, bars, the river, shopping</span>. Close enough to walk to Mont Royal.</div><div class='text-box'>Stayed in one of the Suites which we got using one of the major credit card upgrades. Amazing bathroom with rain shower and a large tub. Modern room, clean bathroom, <span class='review-span highlight' data-aligned-summaries='0'>great service</span>, great beds and blankets. The only thing that it lacks it is a pool but it can be overlooked. <span class='review-span highlight' data-aligned-summaries='1'>Location is great, the old Montreal</span>.</div><div class='text-box'>Le Place D'Armes is an amazingly elegant hotel with <span class='review-span highlight' data-aligned-summaries='0'>staff that have a beautiful authenticity about them</span>. The comfort and design of the rooms is worth the price and is a great fit for both business or personal occasions. If you are planning a trip to Montreal you simply need to check out this hotel.</div><div class='text-box'>Well I have nothing but good things to say about this hotel, it was just wonderful in every way. <span class='review-span highlight' data-aligned-summaries='1'>Perfect location</span>, spotless, <span class='review-span highlight' data-aligned-summaries='0'>nice staff</span>. Possibly the nicest place I have ever stayed. If you go to montreal and dont stay here you're missing out!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">At this hotel you will find the staff are really accommodating and friendly.</span> <span id="1" class="summary-sentence">The hotel is also a well-located place to stay in Montreal with some great things to do nearby.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_0_a_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Our company has rented conference rooms and held many meetings and corporate events at Place D'Armes and we were extremely satisfied with their service. There was always someone to greet and help with the setup and make sure we have everything we needed. More importantly, technical service was efficient and really went out of their way (even when it is your own equipment). The rooms are clean and beautiful and <span class='review-span highlight' data-aligned-summaries='0'>staff is great</span>. The only negative thing is that they charge for the conference room for the whole day regardless if you only need it for half a day or an hour.</div><div class='text-box'>The hotel is located in the OLD Town part of Montreal by the Notre Dame Cathedral and short walking distance to the rivers edge. This hotel was a great value and <span class='review-span highlight' data-aligned-summaries='0'>the staff</span> and location <span class='review-span highlight' data-aligned-summaries='0'>were excellent</span>. There are 2 restaurants in the hotel that are very highly rated. The staff and service were excellent. The rooms are specious and nicely decorated The bathrooms are very nice with very big bathtubs. There is also a roof terrace to have drinks and enjoy the views. Couldn't use because it was raining.</div><div class='text-box'>We just returned from a mid-winter weekend get away to Montreal. We picked this hotel due to its location in Old Montreal, close to restaurants, Notre Dame and the cobblestone streets. From the moment we arrived when the valet service looked after the car until we checked out the <span class='review-span highlight' data-aligned-summaries='0'>service of the staff was top notch</span>. The rooms were nice with hardwood floors and exposed brick. The bar, Suite701, is the perfect spot for a night cap. We would definately return.</div><div class='text-box'>Absolutely one of the best places to stay while visiting old city Montreal. <span class='review-span highlight' data-aligned-summaries='0'>Staff was very friendly and accommodating</span>. The rooftop bar and restaurant was beautiful with a view of Notre Dame Basilica. We stayed in Junior Suite 3402 and really appreciated the ambiance and decor. If I were to visit again I would think of staying in 3602 (second digit is the floor). The street noise was not bad however you will have early morning local truck deliveries.</div><div class='text-box'>Lovely hotel in an historic building with a fantastic location. Nice rooms, <span class='review-span highlight' data-aligned-summaries='0'>very friendly</span> and service-oriented <span class='review-span highlight' data-aligned-summaries='0'>staff</span>. Great little touches like chocolates on the pillow and turn-down service. Very helpful concierge. I was in Laval for business and went to Montreal for the weekend. I walked to restaurants, bars, the river, shopping. Close enough to walk to Mont Royal.</div><div class='text-box'>Stayed in one of the Suites which we got using one of the major credit card upgrades. Amazing bathroom with rain shower and a large tub. Modern room, clean bathroom, <span class='review-span highlight' data-aligned-summaries='0'>great service</span>, <span class='review-span highlight' data-aligned-summaries='0'>great beds and blankets</span>. The only thing that it lacks it is a pool but it can be overlooked. Location is great, the old Montreal.</div><div class='text-box'>Le Place D'Armes is an amazingly elegant hotel with <span class='review-span highlight' data-aligned-summaries='0'>staff that have a beautiful authenticity about them</span>. The comfort and design of the rooms is worth the price and is a great fit for both business or personal occasions. If you are planning a trip to Montreal you simply need to check out this hotel.</div><div class='text-box'>Well I have nothing but good things to say about this hotel, it was just wonderful in every way. Perfect location, spotless, <span class='review-span highlight' data-aligned-summaries='0'>nice staff</span>. Possibly the nicest place I have ever stayed. If you go to montreal and dont stay here you're missing out!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The staff at the hotel are friendly and helpful and the beds are great.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_0_b_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>My stay at the Fairmont Queen Elizabeth didn't exceed my expectations, and also didn't disappoint. It was a nice hotel, but didn't blow me away. My room was slightly smaller than average although it was clean and with a slightly more modern decor than a typical Fairmont. My one gripe is with the toilet. It's basically the kind of toilet you'd find in a public bathroom, with a flush that's located under the counter and hard to get to. I do enjoy the Miller Harris citron toiletries, so that is a plus. Overall <span class='review-span highlight' data-aligned-summaries='0'>I'd rather be more centrally located to the main downtown area</span> or closer to Old Montreal. It was fine for business travel and a short trip, but if I was visiting for vacation with the same budget, I'd likely go elsewhere.</div><div class='text-box'>I stayed here whilst attending a conference in <span class='review-span highlight' data-aligned-summaries='0'>the hotel</span>. Arriving from Toronto by train <span class='review-span highlight' data-aligned-summaries='0'>was just about as convenient as it could possibly be since the station is directly beneath the hotel</span>. The room was fine, with a fabulous view up the hill to Mont Royal from the top floor. Service from the check-in staff was polite and efficient and they rapidly corrected some incorrect charges for using the mini bar which I had not done. The hotel does look a little dated and not much of the glamour from when John and Yoko staged their bed in remains, but all in all it's a good value and <span class='review-span highlight' data-aligned-summaries='0'>well-located place to stay</span> in Montreal. Make sure you join the President's club via the fairmont website before arriving so that you get free wi-fi access.</div><div class='text-box'>This is a very nice older, upper end, well maintained hotel. <span class='review-span highlight' data-aligned-summaries='0'>The front desk and concierge staff were very helpful</span> and the housekeeping staff exceptionally friendly and accomodating. John Lennon and Yoko Ono had a suite on the 16th floor that has a plaque that says "Give Peace A Chance". The bed was comfortable. The bathroom was too small. I personally hate any bathroom where my knees block the door from closing when seated. I continually worried that my toiletries would slide off the small shelf for toiletries into the toilet or jewlery would head south for the sink. I had some allergies which I suspect may have been an a/c ducting issue. Beyond these comments it is a nice hotel with very pleasant and helpful staff.</div><div class='text-box'>We spent a night at the Queen E with our grandchildren - it is a very nice place to stay - somewhat expensive but right in the center of Montreal. We upgraded to a suite which turned out to be very nice. The restuarant serves great breakfasts and dinners - again a bit expensive but very well done (the liver is great!). <span class='review-span highlight' data-aligned-summaries='0'>We visited the Biodome (lots of fun) and wondered around old Montreal area. Montreal has some great shopping areas we found</span>.</div><div class='text-box'>I have been to this hotel countless time as part of frequent business travel. <span class='review-span highlight' data-aligned-summaries='0'>The location is great for business</span> (right in financial centre) <span class='review-span highlight' data-aligned-summaries='0'>and for leisure</span> (5 min walk to St Catherine Street where the shopping and restaurants are). I <span class='review-span highlight' data-aligned-summaries='0'>had an encounter of very bad service once</span>. <span class='review-span highlight' data-aligned-summaries='0'>I took the matter to customer service aftewards and was impressed they listened and offered to upgrade my room</span> next time I stay. Overall it is a good hotel and I would recommand to others.</div><div class='text-box'>I recently stayed a w.end at this Hotel,and <span class='review-span highlight' data-aligned-summaries='0'>I could not beleive</span> that at <span class='review-span highlight' data-aligned-summaries='0'>the price they charge they put the coffee maker</span> and the coffee as part of the mini bar!come on,most hotel,leave the coffee maker and the coffee free of charge in the room!</div><div class='text-box'>Was able to upgrade to the Gold floor and worth every penny. Had dinner at the Beaver club and enjoyed the excellent service. It made our stay very memorable. <span class='review-span highlight' data-aligned-summaries='0'>The hotel is beautiful in the winter, a magical place</span>.</div><div class='text-box'>I've stayed here a number of times and this visit was no exception. <span class='review-span highlight' data-aligned-summaries='0'>I find the staff helpful</span> and enjoy the history of the hotel. As well <span class='review-span highlight' data-aligned-summaries='0'>I find the location very convenient</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The staff at the hotel were incredibly accommodating and the hotel was well located.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_0_b_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>My stay at the Fairmont Queen Elizabeth didn't exceed my expectations, and also didn't disappoint. It was a nice hotel, but didn't blow me away. My room was slightly smaller than average although it was clean and with a slightly more modern decor than a typical Fairmont. My one gripe is with the toilet. It's basically the kind of toilet you'd find in a public bathroom, with a flush that's located under the counter and hard to get to. I do enjoy the Miller Harris citron toiletries, so that is a plus. Overall <span class='review-span highlight' data-aligned-summaries='1'>I'd rather be more centrally located to the main downtown area or closer to Old Montreal</span>. It was fine for business travel and a short trip, but if I was visiting for vacation with the same budget, I'd likely go elsewhere.</div><div class='text-box'>I stayed here whilst attending a conference in the hotel. Arriving from Toronto by train was just about as convenient as it could possibly be since <span class='review-span highlight' data-aligned-summaries='1'>the station is directly beneath the hotel</span>. The room was fine, with <span class='review-span highlight' data-aligned-summaries='1'>a fabulous view up the hill to Mont Royal</span> from the top floor. Service from the check-in <span class='review-span highlight' data-aligned-summaries='0'>staff was polite and efficient</span> and they rapidly corrected some incorrect charges for using the mini bar which I had not done. The hotel does look a little dated and not much of the glamour from when John and Yoko staged their bed in remains, but all in all it's a good value and <span class='review-span highlight' data-aligned-summaries='1'>well-located place to stay in Montreal</span>. Make sure you join the President's club via the fairmont website before arriving so that you get free wi-fi access.</div><div class='text-box'>This is a very nice older, upper end, well maintained hotel. The <span class='review-span highlight' data-aligned-summaries='0'>front desk and concierge staff were very helpful and the housekeeping staff exceptionally friendly and accomodating</span>. John Lennon and Yoko Ono had a suite on the 16th floor that has a plaque that says "Give Peace A Chance". The bed was comfortable. The bathroom was too small. I personally hate any bathroom where my knees block the door from closing when seated. I continually worried that my toiletries would slide off the small shelf for toiletries into the toilet or jewlery would head south for the sink. I had some allergies which I suspect may have been an a/c ducting issue. Beyond these comments it is a nice hotel with very pleasant and helpful staff.</div><div class='text-box'>We spent a night at the Queen E with our grandchildren - <span class='review-span highlight' data-aligned-summaries='1'>it is a very nice place to stay</span> - somewhat expensive but <span class='review-span highlight' data-aligned-summaries='1'>right in the center of Montreal</span>. We upgraded to a suite which turned out to be very nice. The restuarant serves great breakfasts and dinners - again a bit expensive but very well done (the liver is great!). We visited the Biodome (lots of fun) and wondered around old Montreal area. <span class='review-span highlight' data-aligned-summaries='1'>Montreal has some great shopping areas</span> we found.</div><div class='text-box'>I have been to this hotel countless time as part of frequent business travel. <span class='review-span highlight' data-aligned-summaries='1'>The location is great for business</span> (<span class='review-span highlight' data-aligned-summaries='1'>right in financial centre</span>) <span class='review-span highlight' data-aligned-summaries='1'>and for leisure</span> (<span class='review-span highlight' data-aligned-summaries='1'>5 min walk to St Catherine Street where the shopping and restaurants are</span>). <span class='review-span highlight' data-aligned-summaries='0'>I had an encounter of very bad service once. I took the matter to customer service aftewards and was impressed they listened and offered to upgrade my room</span> next time I stay. Overall it is a good hotel and I would recommand to others.</div><div class='text-box'>I recently stayed a w.end at this Hotel,and I could not beleive that at the price they charge they put the coffee maker and the coffee as part of the mini bar!come on,most hotel,leave the coffee maker and the coffee free of charge in the room!</div><div class='text-box'>Was able to upgrade to the Gold floor and worth every penny. Had dinner at the Beaver club and <span class='review-span highlight' data-aligned-summaries='0'>enjoyed the excellent service</span>. It made our stay very memorable. <span class='review-span highlight' data-aligned-summaries='1'>The hotel is beautiful in the winter, a magical place</span>.</div><div class='text-box'>I've stayed here a number of times and this visit was no exception. <span class='review-span highlight' data-aligned-summaries='0'>I find the staff helpful</span> and enjoy the history of the hotel. As well <span class='review-span highlight' data-aligned-summaries='1'>I find the location very convenient</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">At this hotel you will find the staff are really accommodating and friendly.</span> <span id="1" class="summary-sentence">The hotel is also a well-located place to stay in Montreal with some great things to do nearby.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_0_b_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>My stay at the Fairmont Queen Elizabeth didn't exceed my expectations, and also didn't disappoint. It was a nice hotel, but didn't blow me away. My room was slightly smaller than average although it was clean and with a slightly more modern decor than a typical Fairmont. My one gripe is with the toilet. It's basically the kind of toilet you'd find in a public bathroom, with a flush that's located under the counter and hard to get to. I do enjoy the Miller Harris citron toiletries, so that is a plus. Overall I'd rather be more centrally located to the main downtown area or closer to Old Montreal. It was fine for business travel and a short trip, but if I was visiting for vacation with the same budget, I'd likely go elsewhere.</div><div class='text-box'>I stayed here whilst attending a conference in the hotel. Arriving from Toronto by train was just about as convenient as it could possibly be since the station is directly beneath the hotel. The room was fine, with a fabulous view up the hill to Mont Royal from the top floor. <span class='review-span highlight' data-aligned-summaries='0'>Service from the check-in staff was polite and efficient</span> and they rapidly corrected some incorrect charges for using the mini bar which I had not done. The hotel does look a little dated and not much of the glamour from when John and Yoko staged their bed in remains, but all in all it's a good value and well-located place to stay in Montreal. Make sure you join the President's club via the fairmont website before arriving so that you get free wi-fi access.</div><div class='text-box'>This is a very nice older, upper end, well maintained hotel. The <span class='review-span highlight' data-aligned-summaries='0'>front desk and concierge staff were very helpful and the housekeeping staff exceptionally friendly</span> and accomodating. John Lennon and Yoko Ono had a suite on the 16th floor that has a plaque that says "Give Peace A Chance". <span class='review-span highlight' data-aligned-summaries='0'>The bed was comfortable</span>. The bathroom was too small. I personally hate any bathroom where my knees block the door from closing when seated. I continually worried that my toiletries would slide off the small shelf for toiletries into the toilet or jewlery would head south for the sink. I had some allergies which I suspect may have been an a/c ducting issue. Beyond these comments it is a nice hotel with very pleasant and helpful staff.</div><div class='text-box'>We spent a night at the Queen E with our grandchildren - it is a very nice place to stay - somewhat expensive but right in the center of Montreal. We upgraded to a suite which turned out to be very nice. The restuarant serves great breakfasts and dinners - again a bit expensive but very well done (the liver is great!). We visited the Biodome (lots of fun) and wondered around old Montreal area. Montreal has some great shopping areas we found.</div><div class='text-box'>I have been to this hotel countless time as part of frequent business travel. The location is great for business (right in financial centre) and for leisure (5 min walk to St Catherine Street where the shopping and restaurants are). I <span class='review-span highlight' data-aligned-summaries='0'>had</span> an encounter of very <span class='review-span highlight' data-aligned-summaries='0'>bad service once</span>. I took the matter to customer service aftewards and was impressed they listened and offered to upgrade my room next time I stay. Overall it is a good hotel and I would recommand to others.</div><div class='text-box'>I recently stayed a w.end at this Hotel,and <span class='review-span highlight' data-aligned-summaries='0'>I could not beleive</span> that at <span class='review-span highlight' data-aligned-summaries='0'>the price they charge</span> they put <span class='review-span highlight' data-aligned-summaries='0'>the coffee maker</span> and the coffee as part of the mini bar!come on,most hotel,leave the coffee maker and the coffee free of charge in the room!</div><div class='text-box'>Was able to upgrade to the Gold floor and worth every penny. Had dinner at the Beaver club and <span class='review-span highlight' data-aligned-summaries='0'>enjoyed the excellent service</span>. It made our stay very memorable. The hotel is beautiful in the winter, a magical place.</div><div class='text-box'>I've stayed here a number of times and this visit was no exception. <span class='review-span highlight' data-aligned-summaries='0'>I find the staff helpful</span> and enjoy the history of the hotel. As well I find the location very convenient.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The staff at the hotel are friendly and helpful and the beds are great.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_3_a_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>I travel to Vancouver regularly on business and always stay at the Sutton Place Hotel. It is truly a top end hotel from the well appointed lobby, excellent restaurant, beautiful guest suites and most important of all 5 star pulse customer service. <span class='review-span highlight' data-aligned-summaries='1'>Every staff member greets you with a pleasant smile</span> and <span class='review-span highlight' data-aligned-summaries='1'>no request is considered too small</span>. I stay in La Grande Residence where the one and two bedroom fully equipped suites make your stay, wether it is only a few days or a couple of weeks, relaxed and stress-free. The staff are so customer oriented that they always greet yu by name when you call the front desk and make you feel welcome on arrival by saying "Welcome back to the Sutton Place". The beds are very comfortable, you get an excellent sleep. <span class='review-span highlight' data-aligned-summaries='0'>The hotel is the preferred location for many Hollywood actors and crew shooting in Vancouver</span> but <span class='review-span highlight' data-aligned-summaries='1'>the hotel staff treat every guest just as if they were an Oscar winner</span>!</div><div class='text-box'>Sutton Place hotel was a great stay! <span class='review-span highlight' data-aligned-summaries='1'>The location at Burrard and Robson makes it super convenient</span> for shopping and eating - lots of great locations around. <span class='review-span highlight' data-aligned-summaries='1'>Service was spot-on from all the staff</span>. The hotel is a bit old but everything was still clean and renovated. Rooms were roomy and beds really comfortable. I only have 2 complaints - the parking is outrageous (40$ per night), and the hotel charges for internet (20$ per day). I think the hotel would be much better value if they would eliminate or lower some of these charges! <span class='review-span highlight' data-aligned-summaries='0'>Can definitely recommend this hotel</span> for anyone wanting to stay in downtown Vancouver!</div><div class='text-box'>I stayed at the Sutton Place Vancouver for a 4-night business trip. During my stay I, unfortunately, came down with a really bad cold, so I used <span class='review-span highlight' data-aligned-summaries='0 1'>Room Service</span>, which <span class='review-span highlight' data-aligned-summaries='0 1'>was excellent</span>. I also ate in the dining room (excellent service). The "gift shop" is really more of a convenience store than a gift shop, but there are plenty of other souvenir-type shops around. <span class='review-span highlight' data-aligned-summaries='0 1'>Convenient walk to shops, restaurants and the stunningly beautiful Vancouver Convention Centre</span>. Very, very comfortable bed. (No back pain, yay!)</div><div class='text-box'>We stayed here for 5 nights in a grand suite. The rooms were lovely - plenty of room for three of us, beautiful views, very quiet. We had wi-fi and continental breakfast included in our rate - the wi-fi worked flawlessly and the morning pastries were delicious. <span class='review-span highlight' data-aligned-summaries='0 1'>Service in this hotel is top rate</span> <span class='review-span highlight' data-aligned-summaries='1'>- the concierges helped us with car rental, spa and restaurant reservations</span>. And <span class='review-span highlight' data-aligned-summaries='1'>the location couldn't be better</span>. We were able to walk everywhere downtown. <span class='review-span highlight' data-aligned-summaries='0'>We highly recommend Sutton Place</span>.</div><div class='text-box'>This was my third time staying at Sutton Place and love staying here. <span class='review-span highlight' data-aligned-summaries='1'>Great location</span>, clean rooms, comfortable beds, <span class='review-span highlight' data-aligned-summaries='1'>friendly/helpful staff</span>. However, I don't recommend eating breakfast at the restaurant, pretty spendy for what you get. Maybe the buffet is the better way to go. Parking is spendy but hotel usually has a deal that helps cover the cost of parking. But this is my hotel of choice when I come to Vancouver!</div><div class='text-box'>First the service at Sutton Place was great and <span class='review-span highlight' data-aligned-summaries='1'>the staff was very friendly and helpful. The location is also great</span>. Unfortunately the hotel itself is outdated and the rooms are in need of an upgrade. The price was very reasonable, but it would be nice to see this hotel receive a much needed makeover.</div><div class='text-box'>We were pleased with the location of this Hotel as it is only a 10 minute downhill walk from Canada Place from where the Cruise Ships depart. Our room was clean and comfortable. The <span class='review-span highlight' data-aligned-summaries='1'>Hotel is very close to the main shopping area</span> and across the road we were able to catch the Hop-on Hop-off Trolley Tour.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>It is central to all downtown activities</span> and <span class='review-span highlight' data-aligned-summaries='1'>the staff are friendly,and helpful</span>. The restaurant is great with always a little chef's surprise. We also enjoy the pool which has good hours for use. <span class='review-span highlight' data-aligned-summaries='0'>I have</span> stayed with friends and family and for business and <span class='review-span highlight' data-aligned-summaries='0'>never been disappointed.</span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel is highly recommended.</span> <span id="1" class="summary-sentence">It is in a great location and the staff at the hotel are very amiable and helpful to guests' needs.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_3_a_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>I travel to Vancouver regularly on business and always stay at the Sutton Place Hotel. It is truly a top end hotel from the well appointed lobby, excellent restaurant, beautiful guest suites and most important of all 5 star pulse customer service. Every staff member greets you with a pleasant smile and no request is considered too small. I stay in La Grande Residence where the one and two bedroom fully equipped suites make your stay, wether it is only a few days or a couple of weeks, relaxed and stress-free. The staff are so customer oriented that they always greet yu by name when you call the front desk and make you feel welcome on arrival by saying "Welcome back to the Sutton Place". The beds are very comfortable, you get an excellent sleep. The hotel is the preferred location for many Hollywood actors and crew shooting in Vancouver but <span class='review-span highlight' data-aligned-summaries='0 1'>the hotel staff treat every guest just as if they were an Oscar winner</span>!</div><div class='text-box'>Sutton Place hotel was a great stay! <span class='review-span highlight' data-aligned-summaries='0'>The location at Burrard and Robson makes it super convenient for shopping and eating - lots of great locations around</span>. <span class='review-span highlight' data-aligned-summaries='1'>Service was spot-on from all the staff</span>. The hotel is a bit old but everything was still clean and renovated. Rooms were roomy and beds really comfortable. I only have 2 complaints - the parking is outrageous (40$ per night), and the hotel charges for internet (20$ per day). I think the hotel would be much better value if they would eliminate or lower some of these charges! <span class='review-span highlight' data-aligned-summaries='0'>Can definitely recommend this hotel</span> for anyone wanting to stay in downtown Vancouver!</div><div class='text-box'>I stayed at the Sutton Place Vancouver for a 4-night business trip. During my stay I, unfortunately, came down with a really bad cold, so I used <span class='review-span highlight' data-aligned-summaries='0 1'>Room Service</span>, which <span class='review-span highlight' data-aligned-summaries='0 1'>was excellent</span>. I also ate in the dining room (excellent service). The "gift shop" is really more of a convenience store than a gift shop, but there are plenty of other souvenir-type shops around. <span class='review-span highlight' data-aligned-summaries='0'>Convenient walk to shops, restaurants and the stunningly beautiful Vancouver Convention Centre</span>. Very, very comfortable bed. (No back pain, yay!)</div><div class='text-box'>We stayed here for 5 nights in a grand suite. The rooms were lovely - plenty of room for three of us, beautiful views, very quiet. We had wi-fi and continental breakfast included in our rate - the wi-fi worked flawlessly and the morning pastries were delicious. Service in this hotel is top rate - <span class='review-span highlight' data-aligned-summaries='1'>the concierges helped us with car rental, spa and restaurant reservations</span>. And <span class='review-span highlight' data-aligned-summaries='0'>the location couldn't be better</span>. <span class='review-span highlight' data-aligned-summaries='0'>We were able to walk everywhere downtown</span>. <span class='review-span highlight' data-aligned-summaries='0'>We highly recommend Sutton Place</span>.</div><div class='text-box'>This was my third time staying at Sutton Place and love staying here. <span class='review-span highlight' data-aligned-summaries='0'>Great location</span>, clean rooms, comfortable beds, <span class='review-span highlight' data-aligned-summaries='1'>friendly/helpful staff</span>. However, I don't recommend eating breakfast at the restaurant, pretty spendy for what you get. Maybe the buffet is the better way to go. <span class='review-span highlight' data-aligned-summaries='0'>Parking is spendy but</span> hotel usually has a deal that helps cover the cost of parking. But <span class='review-span highlight' data-aligned-summaries='0'>this is my hotel of choice when I come to Vancouver</span>!</div><div class='text-box'>First <span class='review-span highlight' data-aligned-summaries='0'>the service at Sutton Place was great</span> and <span class='review-span highlight' data-aligned-summaries='1'>the staff was very friendly and helpful</span>. <span class='review-span highlight' data-aligned-summaries='0'>The location is also great</span>. Unfortunately the hotel itself is outdated and the rooms are in need of an upgrade. The price was very reasonable, but it would be nice to see this hotel receive a much needed makeover.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>We were pleased with the location</span> of this Hotel as it is only a 10 minute downhill walk from Canada Place from where the Cruise Ships depart. Our room was clean and comfortable. <span class='review-span highlight' data-aligned-summaries='0'>The Hotel is very close to the main shopping area</span> and across the road we were able to catch the Hop-on Hop-off Trolley Tour.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>It is central to all downtown activities</span> and <span class='review-span highlight' data-aligned-summaries='1'>the staff are friendly</span>,and <span class='review-span highlight' data-aligned-summaries='1'>helpful</span>. The restaurant is great with always a little chef's surprise. We also enjoy the pool which has good hours for use. I have stayed with friends and family and for business and never been disappointed.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel cannot be recommended highly enough because the location is so great and close to everything downtown.</span> <span id="1" class="summary-sentence">Not only this but the hotel staff were friendly and so helpful when catering to every need.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_3_a_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>I travel to Vancouver regularly on business and always stay at the Sutton Place Hotel. It is truly a top end hotel from the well appointed lobby, excellent restaurant, beautiful guest suites and most important of all 5 star pulse customer service. Every staff member greets you with a pleasant smile and no request is considered too small. I stay in La Grande Residence where the one and two bedroom fully equipped suites make your stay, wether it is only a few days or a couple of weeks, relaxed and stress-free. The staff are so customer oriented that they always greet yu by name when you call the front desk and make you feel welcome on arrival by saying "Welcome back to the Sutton Place". The beds are very comfortable, you get an excellent sleep. <span class='review-span highlight' data-aligned-summaries='0'>The hotel is the preferred location for many Hollywood actors</span> and crew shooting in Vancouver but <span class='review-span highlight' data-aligned-summaries='0 1'>the hotel staff treat every guest just as if they were an Oscar winner</span>!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Sutton Place hotel was a great stay</span>! The location at Burrard and Robson makes it super convenient for shopping and eating - lots of great locations around. <span class='review-span highlight' data-aligned-summaries='1'>Service was spot-on from all the staff</span>. The hotel is a bit old but everything was still clean and renovated. Rooms were roomy and beds really comfortable. I only have 2 complaints - the parking is outrageous (40$ per night), and the hotel charges for internet (20$ per day). I think the hotel would be much better value if they would eliminate or lower some of these charges! <span class='review-span highlight' data-aligned-summaries='0'>Can definitely recommend this hotel for anyone wanting to stay in downtown Vancouver</span>!</div><div class='text-box'>I stayed at the Sutton Place Vancouver for a 4-night business trip. During my stay I, unfortunately, came down with a really bad cold, <span class='review-span highlight' data-aligned-summaries='1'>so I used Room Service, which was excellent</span>. I also ate in the dining room (excellent service). The "gift shop" is really more of a convenience store than a gift shop, but there are plenty of other souvenir-type shops around. Convenient walk to shops, restaurants and the stunningly beautiful Vancouver Convention Centre. Very, very comfortable bed. (No back pain, yay!)</div><div class='text-box'>We stayed here for 5 nights in a grand suite. The rooms were lovely - plenty of room for three of us, beautiful views, very quiet. We had wi-fi and continental breakfast included in our rate - the wi-fi worked flawlessly and the morning pastries were delicious. Service in this hotel is top rate - the <span class='review-span highlight' data-aligned-summaries='1'>concierges helped us with car rental</span>, spa and restaurant reservations. And the <span class='review-span highlight' data-aligned-summaries='0'>location couldn't be better</span>. We were able to walk everywhere downtown. We <span class='review-span highlight' data-aligned-summaries='0'>highly recommend Sutton Place</span>.</div><div class='text-box'>This was my third time staying at Sutton Place and love staying here. <span class='review-span highlight' data-aligned-summaries='0'>Great location</span>, clean rooms, comfortable beds, <span class='review-span highlight' data-aligned-summaries='1'>friendly/helpful staff</span>. However, <span class='review-span highlight' data-aligned-summaries='0'>I don't recommend eating breakfast at the restaurant, pretty spendy</span> for what you get. Maybe the buffet is the better way to go. Parking is spendy but hotel usually has a deal that helps cover the cost of parking. But this is my hotel of choice when I come to Vancouver!</div><div class='text-box'>First the service at Sutton Place was great and <span class='review-span highlight' data-aligned-summaries='1'>the staff was very friendly and helpful</span>. <span class='review-span highlight' data-aligned-summaries='0'>The location is also great</span>. Unfortunately the <span class='review-span highlight' data-aligned-summaries='0'>hotel itself is outdated and the rooms are in need of an upgrade</span>. The price was very reasonable, but it would be nice to see this hotel receive a much needed makeover.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>We were pleased with the location of this Hotel</span> as it is only a 10 minute downhill walk from Canada Place from where the Cruise Ships depart. Our room was clean and comfortable. The Hotel is <span class='review-span highlight' data-aligned-summaries='0'>very close to the main shopping area</span> and across the road we were able to catch the Hop-on Hop-off Trolley Tour.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>It is central to all downtown activities</span> and <span class='review-span highlight' data-aligned-summaries='0 1'>the staff are friendly,and helpful</span>. The restaurant is great with always a little chef's surprise. We also enjoy the pool which has good hours for use. I have stayed with friends and family and for business and never been disappointed.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is in a great downtown location and it is highly recommended.</span> <span id="1" class="summary-sentence">The staff are friendly and helpful.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_3_b_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>We stayed at L'Hermitage in Aug. 2008, just two months after it opened. It is a very sleek, <span class='review-span highlight' data-aligned-summaries='1'>modern hotel in a great location</span> in downtown Vancouver. Because it was so new, the staff seemed to still be figuring things out. For example, we weren't able to check into our room the first night for over an hour after the guaranteed check-in time. To make up for this, the staff comped a round of drinks for us at their wonderful guest lounge on the 5th floor. The website did not do this place justice . there's a beautiful rooftop pool and hot tub and the rooms are large and luxuorious. Very nice breakfast and afternoon h'or doeurve buffets are included in the price. <span class='review-span highlight' data-aligned-summaries='1'>The staff was very friendly and made sure that all of our needs were met</span>. <span class='review-span highlight' data-aligned-summaries='0'>I would highly recommend this hotel</span> to anyone looking to be pampered in Vancouver!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>We will use this again</span>. We stayed on 3 separate occasions in quick succession. <span class='review-span highlight' data-aligned-summaries='1'>The staff were always helpful</span>, charming and friendly, the rooms elegant and spacious (wonderful bathrooms) and <span class='review-span highlight' data-aligned-summaries='1'>the location was great</span>, particularly if you are flying in (2 blocks down from Vancouver City Centre station on the Canada Line. Don't even think about a cab, on a Sunday when there is no $5 surcharge it cost under $6 for my wife and me to get to the airport. Heathrow and London Underground hang your heads in shame). Treat yourself to the $17.50 breakfast buffet, it <span class='review-span highlight' data-aligned-summaries='0'>must be the best "posh" value in Vancouver !</span></div><div class='text-box'>We are a family of 5 and had an extremely comfortable 4 night stay in their 2 bedroom suite. Kudos to Jean-michel & Hippo, Raymond, Elaisha, Mitch and a super housekeeping team for being <span class='review-span highlight' data-aligned-summaries='1'>so helpful and friendly</span>. <span class='review-span highlight' data-aligned-summaries='0'>We felt most at home and strongly recommend to all who plan to visit Vancouver</span>. <span class='review-span highlight' data-aligned-summaries='1'>Great location</span> with Japadog and Viet-Sub eateries and Sears, Hudson Bay, Holt Renfrew nearby. Easy access to the main attractions. <span class='review-span highlight' data-aligned-summaries='0 1'>The team deserves a great pat on their backs</span> for their great work attitude. Special thanks to Jean-michel for going out of your way for us.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>This is a really great hotel</span> - near new, small boutique style, great rooms more like small apartments with full kitchens. Fantastic pool and sun deck. Not a gripe, but you should know this <span class='review-span highlight' data-aligned-summaries='0 1'>hotel does not have room service</span> - wasn't an issue for me, but may be for some travellers. <span class='review-span highlight' data-aligned-summaries='1'>great location - close to everything</span>! Really reasonably priced compared to the other hotel i stayed in during my stay in Vanvouver.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>My stay at L'Hermitage exceeded that of any other</span> I have ever had in Vancouver. I have stayed at many of the better hotels <span class='review-span highlight' data-aligned-summaries='1'>downtown</span> while visiting <span class='review-span highlight' data-aligned-summaries='1'>this great city</span> over the past 15 years. <span class='review-span highlight' data-aligned-summaries='1'>The staff were extraordinarily friendly and helpful</span> without being overbearing. A great experience <span class='review-span highlight' data-aligned-summaries='0'>I will be recommending to friends</span>, family and business colleagues. Thank you L'Hermitage.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>The front desk was fantastic</span>. <span class='review-span highlight' data-aligned-summaries='1'>Check in and check out were a breeze</span> as they let me spend more time with my family and getting to the wedding. <span class='review-span highlight' data-aligned-summaries='0'>It was the perfect end to our wedding night</span>, the room was top notch! Thanks!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>The amenities, breakfast buffet and service at this hotel are excellent</span>. <span class='review-span highlight' data-aligned-summaries='1'>Concierge helped us reserve a table at a great restaurant nearby</span> (Goldfish) and we used the bikes to see Stanley Park.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>If and when I visit Canada again this hotel will be a definite</span>. It is great!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel is highly recommended.</span> <span id="1" class="summary-sentence">It is in a great location and the staff at the hotel are very amiable and helpful to guests' needs.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_3_b_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>We stayed at L'Hermitage in Aug. 2008, just two months after it opened. It is a very sleek, modern <span class='review-span highlight' data-aligned-summaries='0'>hotel in a great location in downtown Vancouver</span>. Because it was so new, <span class='review-span highlight' data-aligned-summaries='1'>the staff seemed to still be figuring things out</span>. For example, we weren't able to check into our room the first night for over an hour after the guaranteed check-in time. To make up for this, the staff comped a round of drinks for us at their wonderful guest lounge on the 5th floor. The website did not do this place justice . there's a beautiful rooftop pool and hot tub and the rooms are large and luxuorious. Very nice breakfast and afternoon h'or doeurve buffets are included in the price. <span class='review-span highlight' data-aligned-summaries='1'>The staff was very friendly and made sure that all of our needs were met</span>. <span class='review-span highlight' data-aligned-summaries='0'>I would highly recommend this hotel</span> to anyone looking to be pampered in Vancouver!</div><div class='text-box'>We will use this again. We stayed on 3 separate occasions in quick succession. The <span class='review-span highlight' data-aligned-summaries='1'>staff were</span> always helpful, charming and <span class='review-span highlight' data-aligned-summaries='1'>friendly</span>, the rooms elegant and spacious (wonderful bathrooms) and the <span class='review-span highlight' data-aligned-summaries='0'>location was great</span>, particularly if you are flying in (2 blocks down from Vancouver City Centre station on the Canada Line. Don't even think about a cab, on a Sunday when there is no $5 surcharge it cost under $6 for my wife and me to get to the airport. Heathrow and London Underground hang your heads in shame). Treat yourself to the $17.50 breakfast buffet, it must be the best "posh" value in Vancouver !</div><div class='text-box'>We are a family of 5 and had an extremely comfortable 4 night stay in their 2 bedroom suite. Kudos to Jean-michel & Hippo, Raymond, Elaisha, Mitch and a super housekeeping team for being <span class='review-span highlight' data-aligned-summaries='1'>so helpful and friendly</span>. We felt most at home and <span class='review-span highlight' data-aligned-summaries='0'>strongly recommend to all</span> who plan to visit Vancouver. <span class='review-span highlight' data-aligned-summaries='0'>Great location</span> with Japadog and Viet-Sub eateries and Sears, Hudson Bay, Holt Renfrew nearby. Easy access to the main attractions. The team deserves a great pat on their backs for their great work attitude. Special thanks to Jean-michel for going out of your way for us.</div><div class='text-box'>This is a really great hotel - near new, small boutique style, great rooms more like small apartments with full kitchens. Fantastic pool and sun deck. Not a gripe, but you should know <span class='review-span highlight' data-aligned-summaries='1'>this hotel does not have room service</span> - wasn't an issue for me, but may be for some travellers. <span class='review-span highlight' data-aligned-summaries='0'>great location - close to everything</span>! <span class='review-span highlight' data-aligned-summaries='0'>Really reasonably priced</span> compared to the other hotel i stayed in during my stay in Vanvouver.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>My stay at L'Hermitage exceeded that of any other</span> I have ever had in Vancouver. I have stayed at many of the better hotels <span class='review-span highlight' data-aligned-summaries='0'>downtown</span> while visiting <span class='review-span highlight' data-aligned-summaries='0'>this great city</span> over the past 15 years. <span class='review-span highlight' data-aligned-summaries='1'>The staff were extraordinarily friendly and helpful</span> without being overbearing. A great experience <span class='review-span highlight' data-aligned-summaries='0'>I will be recommending</span> to friends, family and business colleagues. Thank you L'Hermitage.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>The front desk was fantastic</span>. <span class='review-span highlight' data-aligned-summaries='1'>Check in and check out were a breeze</span> as they let me spend more time with my family and getting to the wedding. <span class='review-span highlight' data-aligned-summaries='0'>It was the perfect end to our wedding night</span>, the room was top notch! Thanks!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>The amenities</span>, breakfast buffet <span class='review-span highlight' data-aligned-summaries='0'>and</span> <span class='review-span highlight' data-aligned-summaries='0 1'>service at this hotel are excellent</span>. <span class='review-span highlight' data-aligned-summaries='1'>Concierge helped us reserve a table at a great restaurant nearby</span> (Goldfish) and we used the bikes to see Stanley Park.</div><div class='text-box'>If and when I visit Canada again <span class='review-span highlight' data-aligned-summaries='0'>this hotel will be a definite</span>. <span class='review-span highlight' data-aligned-summaries='0'>It is great</span>!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel cannot be recommended highly enough because the location is so great and close to everything downtown.</span> <span id="1" class="summary-sentence">Not only this but the hotel staff were friendly and so helpful when catering to every need.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_3_b_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>We stayed at L'Hermitage in Aug. 2008, just two months after it opened. It is a very sleek, modern <span class='review-span highlight' data-aligned-summaries='0'>hotel in a great location in downtown Vancouver</span>. Because it was so new, the staff seemed to still be figuring things out. For example, we weren't able to check into our room the first night for over an hour after the guaranteed check-in time. To make up for this, the staff comped a round of drinks for us at their wonderful guest lounge on the 5th floor. The website did not do this place justice . there's a beautiful rooftop pool and hot tub and the rooms are large and luxuorious. Very nice breakfast and afternoon h'or doeurve buffets are included in the price. <span class='review-span highlight' data-aligned-summaries='1'>The staff was very friendly and made sure that all of our needs were met</span>. <span class='review-span highlight' data-aligned-summaries='0'>I would highly recommend this hotel</span> to anyone looking to be pampered in Vancouver!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>We will use this again</span>. We stayed on 3 separate occasions in quick succession. <span class='review-span highlight' data-aligned-summaries='1'>The staff were always helpful, charming and friendly</span>, the rooms elegant and spacious (wonderful bathrooms) and the <span class='review-span highlight' data-aligned-summaries='0'>location was great</span>, particularly if you are flying in (2 blocks down from Vancouver City Centre station on the Canada Line. Don't even think about a cab, on a Sunday when there is no $5 surcharge it cost under $6 for my wife and me to get to the airport. Heathrow and London Underground hang your heads in shame). Treat yourself to the $17.50 breakfast buffet, it must be the best "posh" value in Vancouver !</div><div class='text-box'>We are a family of 5 and had an extremely comfortable 4 night stay in their 2 bedroom suite. <span class='review-span highlight' data-aligned-summaries='1'>Kudos to Jean-michel & Hippo, Raymond, Elaisha, Mitch and a super housekeeping team for being so helpful and friendly</span>. <span class='review-span highlight' data-aligned-summaries='0'>We felt most at home and strongly recommend to all who plan to visit Vancouver</span>. <span class='review-span highlight' data-aligned-summaries='0'>Great location</span> with Japadog and Viet-Sub eateries and Sears, Hudson Bay, Holt Renfrew nearby. Easy access to the main attractions. The team deserves a great pat on their backs for their great work attitude. Special thanks to Jean-michel for going out of your way for us.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>This is a really great hotel</span> - near new, small boutique style, great rooms more like small apartments with full kitchens. Fantastic pool and sun deck. Not a gripe, but you should know this hotel does not have room service - wasn't an issue for me, but may be for some travellers. <span class='review-span highlight' data-aligned-summaries='0'>great location - close to everything! Really reasonably priced</span> compared to the other hotel i stayed in during my stay in Vanvouver.</div><div class='text-box'>My stay at L'Hermitage <span class='review-span highlight' data-aligned-summaries='0'>exceeded</span> that of <span class='review-span highlight' data-aligned-summaries='0'>any other</span> I have ever had in Vancouver. I have stayed at many of the better hotels <span class='review-span highlight' data-aligned-summaries='0'>downtown</span> while visiting <span class='review-span highlight' data-aligned-summaries='0'>this great city</span> over the past 15 years. <span class='review-span highlight' data-aligned-summaries='1'>The staff were extraordinarily friendly and helpful</span> without being overbearing. A great experience <span class='review-span highlight' data-aligned-summaries='0'>I will be recommending to friends</span>, family and business colleagues. Thank you L'Hermitage.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>The front desk was fantastic</span>. <span class='review-span highlight' data-aligned-summaries='1'>Check in and check out were a breeze</span> as they let me spend more time with my family and getting to the wedding. <span class='review-span highlight' data-aligned-summaries='0'>It was the perfect end to our wedding night</span>, the room was top notch! Thanks!</div><div class='text-box'>The amenities, breakfast buffet and <span class='review-span highlight' data-aligned-summaries='1'>service at this hotel are excellent</span>. <span class='review-span highlight' data-aligned-summaries='1'>Concierge helped us reserve a table at a great restaurant</span> nearby (Goldfish) and <span class='review-span highlight' data-aligned-summaries='0'>we used the bikes to see Stanley Park</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>If and when I visit Canada again this hotel will be a definite</span>. It is great!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is in a great downtown location and it is highly recommended.</span> <span id="1" class="summary-sentence">The staff are friendly and helpful.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_5_a_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>- First thing is the location, no need for public transport, we could walk from hotel to anywhere. - <span class='review-span highlight' data-aligned-summaries='2'>No need for the expencive hotel breakfast 'cause</span> in the <span class='review-span highlight' data-aligned-summaries='1'>walking distance of 20-50 meters on the Rembrandt square</span> <span class='review-span highlight' data-aligned-summaries='2'>there are cheaper places to eat</span>. - We got a deal in the hotel and got one night for free. - In the same walking distance- on the rembrandt square- there are couple of clubs. I remember one was awesome, one was terrible, and in the third we couldn't enter, the tickets were sold out. And there is a great coffeshop just by the entrance of hotel :D - <span class='review-span highlight' data-aligned-summaries='0'>Very clean, tidy and a safe hotel for reasonable price</span>. <span class='review-span highlight' data-aligned-summaries='0'>-I'm definintely sleeping there again and recommending it</span> to friends.</div><div class='text-box'>Me and my boyfriend stayed here as a 30th Birthday treat and had a great time. <span class='review-span highlight' data-aligned-summaries='0'>The room was immaculate, and the bed amazingly comfortable</span> to the point that we did not leave it until lunch time on the first morning! And was just as hard on day two. Great location too. We paid for a cab from Central St on arrival but felt rather ripped of as it was a20 and was only a 5 minute ride. On the way back we caught a tram which was much cheaper (actually it was free as we did not realise you had to pay the driver when you got on!) and just as quick. <span class='review-span highlight' data-aligned-summaries='0'>Would definitely recommend this hotel</span> and will hopefully be going back in the near future!</div><div class='text-box'>the room was very small, but that's not the biggest problem - the receptionists were. the wifi at the lobby was very slow and the receptionists didnt even know how guests can log on (user name, password and patience required). but the worst was a french-speaking tall male receptionist who was extremely rude and made it very clear that he didnt like being asked about how to connect to the internet. he made condescending remarks in french about american tourists (and i'm not even american!). the carpet is filthy and so is the hotel's surroundings - noisy, crowded, and the street is disgusting after rain.</div><div class='text-box'>I booked this hotel after reading reviews on this site and Expedia, with a real priority for me being its cleanliness and quietness. It didn't disappoint on either count and had the added bonus of being in an excellent location - far enough away from the slightly too brash touristy bits but <span class='review-span highlight' data-aligned-summaries='1'>near enough as not to be a long walk from anywhere useful</span>. <span class='review-span highlight' data-aligned-summaries='0'>The modern room was nice and the bathroom was excellent</span>, although some might be surprised at the European practice of having no shower curtain so the bathroom floor gets a bit wet. <span class='review-span highlight' data-aligned-summaries='0'>I'd definitely book here again</span>.</div><div class='text-box'>The Hotel is perfectly placed for both travel and entertainment on the edge of Rembrandt Square. It is within very easy <span class='review-span highlight' data-aligned-summaries='0 1'>walking distance to everywhere in Central Amsterdam</span>, but sufficiently on the edge for it to be quiet at night. It has a first class seafood Bistro if you wish to eat in. It's main clientele are business and corporate, which should tell you a lot about the overall quality and respect this hotel has. <span class='review-span highlight' data-aligned-summaries='0'>This has been my hotel of choice</span>, even when travelling privately to Amsterdam with family.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>A good hotel bang in the centre of Amsterdam</span>. <span class='review-span highlight' data-aligned-summaries='0'>Rooms are clean</span> and modern and <span class='review-span highlight' data-aligned-summaries='0'>I will be staying there again</span>. A couple of things to note: My room had mosquitos (common for AMS this summer), they were fully booked so could not give me another room but did eventually find some fly spay so problem solved. <span class='review-span highlight' data-aligned-summaries='2'>Breakfast is expensive at EUR15</span>, just take a walk down the street and <span class='review-span highlight' data-aligned-summaries='2'>have a better breakfast in one of the cafes</span>.</div><div class='text-box'>We found our room the be of nice size and bothe the room and bath were easy to navigate in a wheelchair. <span class='review-span highlight' data-aligned-summaries='0'>The beds were compfortable and the room were nicely appointed</span>. The staff was most helpful with directions and other touristy information. The food in the restaurant's food was quite good with a nice selection. <span class='review-span highlight' data-aligned-summaries='0'>We would recommend the Eden Rembrandt Square</span> as our stay was quite good.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>The location of the hotel is excellent</span>. Its 5 mins from the Waterlooplein metro station and hence easily accessible. <span class='review-span highlight' data-aligned-summaries='0'>Room service was mediocre - the staff came to clean the room once in 3 days</span> in spite of a reminder. <span class='review-span highlight' data-aligned-summaries='0'>Hotel rooms were of good size</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The rooms of the hotel are clean and the hotel is definitely recommended.</span> <span id="1" class="summary-sentence">The hotel is in walking distance to the sights.</span> <span id="2" class="summary-sentence">Despite being quite pricey the breakfast was super tasty and sumptuous.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_5_a_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>- First thing is the location, no need for public transport, we could walk from hotel to anywhere. - <span class='review-span highlight' data-aligned-summaries='2'>No need for the expencive hotel breakfast 'cause</span> in <span class='review-span highlight' data-aligned-summaries='0 1'>the walking distance of 20-50 meters on the Rembrandt square</span> <span class='review-span highlight' data-aligned-summaries='2'>there are cheaper places to eat</span>. - We got a deal in the hotel and got one night for free. - In the same walking distance- on the rembrandt square- there are couple of clubs. I remember one was awesome, one was terrible, and in the third we couldn't enter, the tickets were sold out. And there is a great coffeshop just by the entrance of hotel :D - Very clean, tidy and a safe hotel for reasonable price. <span class='review-span highlight' data-aligned-summaries='0'>-I'm definintely sleeping there again and recommending it</span> to friends.</div><div class='text-box'>Me and my boyfriend stayed here as a 30th Birthday treat and had a great time. <span class='review-span highlight' data-aligned-summaries='0'>The room was immaculate</span>, and the bed amazingly comfortable to the point that we did not leave it until lunch time on the first morning! And was just as hard on day two. Great location too. We paid for a cab <span class='review-span highlight' data-aligned-summaries='1'>from Central St</span> on arrival but felt rather ripped of as it was a20 and <span class='review-span highlight' data-aligned-summaries='1'>was only a 5 minute ride</span>. On the way back we caught a tram which was much cheaper (actually it was free as we did not realise you had to pay the driver when you got on!) and just as quick. <span class='review-span highlight' data-aligned-summaries='0'>Would definitely recommend this hotel</span> and will hopefully be going back in the near future!</div><div class='text-box'>the room was very small, but that's not the biggest problem - the receptionists were. the wifi at the lobby was very slow and the receptionists didnt even know how guests can log on (user name, password and patience required). but the worst was a french-speaking tall male receptionist who was extremely rude and made it very clear that he didnt like being asked about how to connect to the internet. he made condescending remarks in french about american tourists (and i'm not even american!). the carpet is filthy and so is the hotel's surroundings - noisy, crowded, and the street is disgusting after rain.</div><div class='text-box'>I booked this hotel after reading reviews on this site and Expedia, with a real priority for me being <span class='review-span highlight' data-aligned-summaries='0'>its cleanliness and quietness</span>. It <span class='review-span highlight' data-aligned-summaries='0'>didn't disappoint</span> on either count and had the added bonus of being <span class='review-span highlight' data-aligned-summaries='0 1'>in an excellent location</span> - far enough away from the slightly too brash touristy bits but <span class='review-span highlight' data-aligned-summaries='1'>near enough as not to be a long walk from anywhere useful</span>. <span class='review-span highlight' data-aligned-summaries='0'>The modern room was</span> nice and the bathroom was excellent, although some might be surprised at the European practice of having no shower curtain so the bathroom floor gets a bit wet. I'd definitely book here again.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>The Hotel is perfectly placed</span> <span class='review-span highlight' data-aligned-summaries='0'>for both travel and entertainment</span> on the edge of Rembrandt Square. It is <span class='review-span highlight' data-aligned-summaries='1'>within very easy walking distance to everywhere in Central Amsterdam</span>, but sufficiently on the edge for it to be quiet at night. It has a first class seafood Bistro if you wish to eat in. It's main clientele are business and corporate, which should tell you a lot about the overall quality and respect this hotel has. <span class='review-span highlight' data-aligned-summaries='0'>This has been my hotel of choice</span>, even when travelling privately to Amsterdam with family.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>A good hotel bang in the centre of Amsterdam</span>. <span class='review-span highlight' data-aligned-summaries='0'>Rooms are clean and modern</span> and <span class='review-span highlight' data-aligned-summaries='0'>I will be staying there again</span>. A couple of things to note: My room had mosquitos (common for AMS this summer), they were fully booked so could not give me another room but did eventually find some fly spay so problem solved. <span class='review-span highlight' data-aligned-summaries='2'>Breakfast is expensive at EUR15, just take a walk down the street and have a better breakfast in one of the cafes</span>.</div><div class='text-box'>We found our room the be of nice size and bothe the room and bath were easy to navigate in a wheelchair. The beds were compfortable and the room were nicely appointed. The staff was most helpful with directions and other touristy information. The food in the restaurant's food was quite good with a nice selection. <span class='review-span highlight' data-aligned-summaries='0'>We would recommend the Eden Rembrandt Square as our stay was quite good</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>The location of the hotel is excellent</span>. Its 5 mins from the Waterlooplein metro station and hence easily accessible. Room service was mediocre - <span class='review-span highlight' data-aligned-summaries='0'>the staff came to clean the room once in 3 days</span> in spite of a reminder. <span class='review-span highlight' data-aligned-summaries='0'>Hotel rooms were of good size</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a highly recommended hotel with clean modern rooms.</span> <span id="1" class="summary-sentence">Additionally the hotel is peacefully located but close enough to walk to the centre of the city.</span> <span id="2" class="summary-sentence">The breakfast provided in the hotel was quite good too.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_5_a_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>- First thing is the location, no need for public transport, we could walk from hotel to anywhere. - No need for <span class='review-span highlight' data-aligned-summaries='1'>the expencive hotel breakfast</span> 'cause in the <span class='review-span highlight' data-aligned-summaries='0'>walking distance of 20-50 meters on the Rembrandt square</span> there are cheaper places to eat. - We got a deal in the hotel and got one night for free. - In the same walking distance- on the rembrandt square- there are couple of clubs. I remember one was awesome, one was terrible, and in the third we couldn't enter, the tickets were sold out. And there is a great coffeshop just by the entrance of hotel :D - <span class='review-span highlight' data-aligned-summaries='0 2'>Very clean, tidy and a safe hotel</span> <span class='review-span highlight' data-aligned-summaries='2'>for reasonable price</span>. <span class='review-span highlight' data-aligned-summaries='2'>-I'm definintely sleeping there again and recommending it</span> to friends.</div><div class='text-box'>Me and my boyfriend stayed here as a 30th Birthday treat and had a great time. <span class='review-span highlight' data-aligned-summaries='0 2'>The room was immaculate</span>,<span class='review-span highlight' data-aligned-summaries='2'> and the bed amazingly comfortable</span> to the point that we did not leave it until lunch time on the first morning! And was just as hard on day two. Great location too. We paid for a cab from Central St on arrival but felt rather ripped of as it was a20 and was only a 5 minute ride. On the way back we caught a tram which was much cheaper (actually it was free as we did not realise you had to pay the driver when you got on!) and just as quick. <span class='review-span highlight' data-aligned-summaries='2'>Would definitely recommend this hotel</span> and will hopefully be going back in the near future!</div><div class='text-box'>the room was very small, but that's not the biggest problem - the receptionists were. the wifi at the lobby was very slow and the receptionists didnt even know how guests can log on (user name, password and patience required). but the worst was a french-speaking tall male <span class='review-span highlight' data-aligned-summaries='2'>receptionist</span> who <span class='review-span highlight' data-aligned-summaries='2'>was extremely rude</span> and made it very clear that he didnt like being asked about how to connect to the internet. he made condescending remarks in french about american tourists (and i'm not even american!). the carpet is filthy and so is <span class='review-span highlight' data-aligned-summaries='2'>the hotel's surroundings - noisy, crowded, and</span> the street is <span class='review-span highlight' data-aligned-summaries='2'>disgusting after rain.</span></div><div class='text-box'>I booked this hotel after reading reviews on this site and Expedia, with a real <span class='review-span highlight' data-aligned-summaries='0'>priority for me being its cleanliness</span> and quietness. It didn't disappoint on either count and had the added bonus of being in an excellent <span class='review-span highlight' data-aligned-summaries='0'>location</span> - far enough away from the slightly too brash touristy bits but <span class='review-span highlight' data-aligned-summaries='0'>near enough as not to be a long walk from anywhere</span> useful. The modern room was nice and the bathroom was excellent, although some might be surprised at the European practice of having no shower curtain so the bathroom floor gets a bit wet. <span class='review-span highlight' data-aligned-summaries='2'>I'd</span> definitely <span class='review-span highlight' data-aligned-summaries='2'>book here</span> again<span class='review-span highlight' data-aligned-summaries='2'>.</span></div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='2'>The Hotel is perfectly placed for both travel and entertainment</span> on the edge of Rembrandt Square. <span class='review-span highlight' data-aligned-summaries='0'>It is within very easy walking distance to everywhere in Central Amsterdam</span>, but sufficiently on the edge for it to be quiet at night. It has a first class seafood Bistro if you wish to eat in. It's main clientele are business and corporate, which should tell you a lot about the overall quality and respect this hotel has. <span class='review-span highlight' data-aligned-summaries='2'>This has been my hotel of choice</span>, even when travelling privately to Amsterdam with family.</div><div class='text-box'>A good hotel bang in the centre of Amsterdam. <span class='review-span highlight' data-aligned-summaries='0'>Rooms are clean</span> and modern and I will be staying there again. A couple of things to note: My room had mosquitos (common for AMS this summer), they were fully booked so could not give me another room but did eventually find some fly spay so problem solved. <span class='review-span highlight' data-aligned-summaries='1'>Breakfast is expensive</span> at EUR15, just take a walk down the street and have a better breakfast in one of the cafes.</div><div class='text-box'>We found our room the be of nice size and bothe the room and bath were easy to navigate in a wheelchair. <span class='review-span highlight' data-aligned-summaries='2'>The beds were compfortable and the room were nicely appointed</span>. The staff was most helpful with directions and other touristy information. The food in the restaurant's food was quite good with a nice selection. <span class='review-span highlight' data-aligned-summaries='2'>We would recommend</span> the Eden Rembrandt Square as our stay was quite good.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 2'>The location of the hotel is excellent</span>.<span class='review-span highlight' data-aligned-summaries='0'> Its 5 mins from the Waterlooplein metro station and hence easily accessible</span>. Room service was mediocre - <span class='review-span highlight' data-aligned-summaries='0 2'>the staff came to clean the room once in 3 days</span> <span class='review-span highlight' data-aligned-summaries='0'>in spite of a reminder</span>. Hotel rooms were of good size.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The rooms at this hotel are very clean and the location is within walking distance to everywhere you'd want to go.</span> <span id="1" class="summary-sentence">The breakfast here is lovely, however it is quite expensive.</span> <span id="2" class="summary-sentence">Highly recommended.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_5_b_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Located on the Herengracht, one of the old canal rings encircling the city, the Ambassade is beautifully decorated - we were open-mouthed at the quality of the furnishings. And it was staffed with friendly, knowledgeable, multilingual employees. <span class='review-span highlight' data-aligned-summaries='0'>The location was perfect</span> - <span class='review-span highlight' data-aligned-summaries='1'>we were within walking distance of museums, the Dam, the Red Light District, the Begjinhof</span>, great restaurants and bars (we loved the Five Flies just around the corner, built in 1634). <span class='review-span highlight' data-aligned-summaries='2'>The breakfast was sumptuous, but seemed a bit pricey</span>, so we only tried it once. WE stayed for 3 nights, and <span class='review-span highlight' data-aligned-summaries='0'>wouldn't hesitate to recommend it</span>.</div><div class='text-box'>Stayed in this hotel on Saturday night for a very brief visit to the City. The staff at reception were exceptionally, kind and help and just couldn't do enough for us. Joost Van Der Kwaak led the charge here and was amazing. <span class='review-span highlight' data-aligned-summaries='0'>The rooms are divine, very large and beautifully decorated - the most comfortable beds and pillows</span> - we even managed to get a room with a superb view over the canal. I loved the fact that <span class='review-span highlight' data-aligned-summaries='1'>everything is within walking distance - the museums, flower market etc</span>. <span class='review-span highlight' data-aligned-summaries='0'>Will definitely go back</span>. <span class='review-span highlight' data-aligned-summaries='2'>Yes it's a little pricey but well worth every penny</span>!</div><div class='text-box'>We stayed there for around 5 days in April of this year and <span class='review-span highlight' data-aligned-summaries='0'>would definitely stay there again</span> if finances allow. The staff was very friendly and professional. <span class='review-span highlight' data-aligned-summaries='0'>The room was very nice and clean</span>. We had a room overlooking the canal so that made it even nicer. Free wireless internet in the room. Nice clean bathroom. Comfortable bed. The location is also great, it was pretty much <span class='review-span highlight' data-aligned-summaries='0 1'>walking distance from everything we wanted to do</span>. <span class='review-span highlight' data-aligned-summaries='2'>It was pretty expensive, but I do believe you get what you pay for</span> - high quality! No complaints at all.</div><div class='text-box'>The staff was amazingly handy in every aspect. I simply found the hotel in Trip Advisor, never heard about. They rent bicycles themselves, so you are not attached to the time of rental stores. For example you can return the bike in the middle of dawn. Nice and stylish rooms. <span class='review-span highlight' data-aligned-summaries='0'>They upgraded me to a better room</span> with canal view. <span class='review-span highlight' data-aligned-summaries='0'>They respond to all e-mails, request</span>. They are 100%.</div><div class='text-box'>Spent a night at this very comfortable hotel. <span class='review-span highlight' data-aligned-summaries='0'>One of the most comfortable rooms I have ever been in</span>. Everything is perfect. <span class='review-span highlight' data-aligned-summaries='0'>Hotel is centrally located bu quiet</span>. Just be careful ate at night to remember which side of the canal the hotel is on, if you forget, you may be wandering around for a while. Free Internet and a printer too if you need it.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Right in the center, close</span> (<span class='review-span highlight' data-aligned-summaries='1'>walking distance)</span> <span class='review-span highlight' data-aligned-summaries='0 1'>to everything you had to see in Amsterdam</span>, <span class='review-span highlight' data-aligned-summaries='0'>bathroom is very, very clean</span>. Rooms are spacious with free internet access if you have a laptop (there is also a free access near the front desk) <span class='review-span highlight' data-aligned-summaries='2'>and.excellent breakfast</span>! PS: <span class='review-span highlight' data-aligned-summaries='0'>The staff were incredibly friendly and helpful</span></div><div class='text-box'>We are fussy and can't think of anything critical to say about <span class='review-span highlight' data-aligned-summaries='0'>this hotel</span>. Service, <span class='review-span highlight' data-aligned-summaries='0'>cleanliness</span>, room size, <span class='review-span highlight' data-aligned-summaries='2'>breakfast</span>, location and everything else <span class='review-span highlight' data-aligned-summaries='2'>were wonderful</span> and, considering the quality, the cost was quite reasonable.</div><div class='text-box'>I stayed at the ambassade in Oct staff: respectful,professional <span class='review-span highlight' data-aligned-summaries='0'>location : ideal</span> room: standard.clean,cosy <span class='review-span highlight' data-aligned-summaries='0'>price:reasonable</span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The rooms of the hotel are clean and the hotel is definitely recommended.</span> <span id="1" class="summary-sentence">The hotel is in walking distance to the sights.</span> <span id="2" class="summary-sentence">Despite being quite pricey the breakfast was super tasty and sumptuous.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_5_b_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Located on the Herengracht, one of the old canal rings encircling the city</span>, the Ambassade is beautifully decorated - we were open-mouthed at the quality of the furnishings. And it was staffed with friendly, knowledgeable, multilingual employees. <span class='review-span highlight' data-aligned-summaries='0'>The location was perfect</span> - <span class='review-span highlight' data-aligned-summaries='1'>we were within walking distance of museums, the Dam, the Red Light District, the Begjinhof, great restaurants and bars</span> (we loved the Five Flies just around the corner, built in 1634). <span class='review-span highlight' data-aligned-summaries='2'>The breakfast was sumptuous, but seemed a bit pricey</span>, so we only tried it once. WE stayed for 3 nights, and <span class='review-span highlight' data-aligned-summaries='0'>wouldn't hesitate to recommend it.</span></div><div class='text-box'>Stayed in this hotel on Saturday night for a very brief visit to the City. <span class='review-span highlight' data-aligned-summaries='0'>The staff at reception were exceptionally</span>, kind and help and just couldn't do enough for us. Joost Van Der Kwaak led the charge here and was amazing. <span class='review-span highlight' data-aligned-summaries='0'>The rooms are divine</span>, very large and beautifully decorated - the most comfortable beds and pillows - we even managed to get a room with a superb view over the canal. I loved the fact that <span class='review-span highlight' data-aligned-summaries='1'>everything is within walking distance - the museums, flower market etc</span>. Will definitely go back. Yes it's a little pricey but well worth every penny!</div><div class='text-box'>We stayed there for around 5 days in April of this year and would definitely stay there again if finances allow. The staff was very friendly and professional. <span class='review-span highlight' data-aligned-summaries='0'>The room was very nice and clean</span>. We had a room overlooking the canal so that made it even nicer. Free wireless internet in the room. Nice clean bathroom. Comfortable bed. <span class='review-span highlight' data-aligned-summaries='1'>The location is also great, it was pretty much walking distance from everything we wanted to do</span>. It was pretty expensive, but I do believe you get what you pay for - high quality! No complaints at all.</div><div class='text-box'>The staff was amazingly handy in every aspect. I simply found the hotel in Trip Advisor, never heard about. <span class='review-span highlight' data-aligned-summaries='0'>They rent bicycles</span> themselves, so you are not attached to the time of rental stores. For example you can return the bike in the middle of dawn. <span class='review-span highlight' data-aligned-summaries='0'>Nice and stylish rooms</span>. They upgraded me to a better room with canal view. They respond to all e-mails, request. They are 100%.</div><div class='text-box'>Spent a night at this very comfortable hotel. <span class='review-span highlight' data-aligned-summaries='0'>One of the most comfortable rooms I have ever been in</span>. <span class='review-span highlight' data-aligned-summaries='0'>Everything is perfect</span>. <span class='review-span highlight' data-aligned-summaries='1'>Hotel is centrally located bu quiet</span>. Just be careful ate at night to remember which side of the canal the hotel is on, if you forget, you may be wandering around for a while. Free Internet and a printer too if you need it.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Right in the center, close (walking distance) to everything you had to see in Amsterdam</span>, <span class='review-span highlight' data-aligned-summaries='0'>bathroom is very, very clean</span>. Rooms are spacious with free internet access if you have a laptop (there is also a free access near the front desk) <span class='review-span highlight' data-aligned-summaries='2'>and.excellent breakfast</span>! PS: The staff were incredibly friendly and helpful</div><div class='text-box'>We are fussy and <span class='review-span highlight' data-aligned-summaries='0'>can't think of anything critical to say about this hotel</span>. Service, <span class='review-span highlight' data-aligned-summaries='0'>cleanliness</span>, room size, <span class='review-span highlight' data-aligned-summaries='2'>breakfast</span>, location and everything else <span class='review-span highlight' data-aligned-summaries='2'>were wonderful</span> and, <span class='review-span highlight' data-aligned-summaries='0'>considering the quality, the cost was quite reasonable</span>.</div><div class='text-box'>I stayed at the ambassade in Oct <span class='review-span highlight' data-aligned-summaries='0'>staff: respectful</span>,professional <span class='review-span highlight' data-aligned-summaries='0'>location : ideal</span> room: standard.clean,cosy price:reasonable</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a highly recommended hotel with clean modern rooms.</span> <span id="1" class="summary-sentence">Additionally the hotel is peacefully located but close enough to walk to the centre of the city.</span> <span id="2" class="summary-sentence">The breakfast provided in the hotel was quite good too.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_5_b_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Located on the Herengracht, one of the old canal rings encircling the city, the Ambassade is beautifully decorated - we were open-mouthed at the quality of the furnishings. And it was staffed with friendly, knowledgeable, multilingual employees. The <span class='review-span highlight' data-aligned-summaries='0'>location</span> was perfect - we were <span class='review-span highlight' data-aligned-summaries='0'>within walking distance of museums</span>, the Dam, the Red Light District, the Begjinhof, <span class='review-span highlight' data-aligned-summaries='0'>great restaurants</span> and bars (we loved the Five Flies just around the corner, built in 1634). The <span class='review-span highlight' data-aligned-summaries='1'>breakfast was sumptuous</span>, but seemed a bit <span class='review-span highlight' data-aligned-summaries='1'>pricey</span>, so we only tried it once. WE stayed for 3 nights, and <span class='review-span highlight' data-aligned-summaries='2'>wouldn't hesitate to recommend</span> it.</div><div class='text-box'>Stayed in this hotel on Saturday night for a very brief visit to the City. <span class='review-span highlight' data-aligned-summaries='2'>The staff at reception were exceptionally</span>, kind and help and just couldn't do enough for us. Joost Van Der Kwaak led the charge here and was amazing. The rooms are divine, very large and beautifully decorated - the most comfortable beds and pillows - we even managed to get a room with a superb view over the canal. I loved the fact that <span class='review-span highlight' data-aligned-summaries='0 2'>everything is within walking distance</span> - the museums, flower market etc. Will definitely go back. Yes it's a little pricey but well worth every penny!</div><div class='text-box'>We stayed there for around 5 days in April of this year and would definitely stay there again if finances allow. The staff was very friendly and professional. <span class='review-span highlight' data-aligned-summaries='0'>The room was very</span> nice and <span class='review-span highlight' data-aligned-summaries='0'>clean</span>. We had a room overlooking the canal so that made it even nicer. Free wireless internet in the room. <span class='review-span highlight' data-aligned-summaries='0'>Nice clean bathroom</span>. Comfortable bed. <span class='review-span highlight' data-aligned-summaries='0'>The location is also great, it was pretty much walking distance from everything we wanted to do</span>. It was pretty expensive, but I do believe <span class='review-span highlight' data-aligned-summaries='2'>you get what you pay for - high quality</span>! No complaints at all.</div><div class='text-box'>The staff was amazingly handy in every aspect. I simply found the hotel in Trip Advisor, never heard about. They rent bicycles themselves, so you are not attached to the time of rental stores. For example you can return the bike in the middle of dawn. <span class='review-span highlight' data-aligned-summaries='0'>Nice and stylish rooms</span>. They upgraded me to a better room with canal view. They respond to all e-mails, request. <span class='review-span highlight' data-aligned-summaries='2'>They are 100%</span>.</div><div class='text-box'>Spent a night at this very comfortable hotel. <span class='review-span highlight' data-aligned-summaries='2'>One of the most comfortable rooms I have ever been in</span>. Everything is perfect. <span class='review-span highlight' data-aligned-summaries='2'>Hotel is centrally located bu quiet</span>. Just be careful ate at night to remember which side of the canal the hotel is on, if you forget, you may be wandering around for a while. Free Internet and a printer too if you need it.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Right in the center,</span> <span class='review-span highlight' data-aligned-summaries='0 2'>close</span> <span class='review-span highlight' data-aligned-summaries='0'>(walking distance) to</span> <span class='review-span highlight' data-aligned-summaries='0 2'>everything you had to see in Amsterdam</span>, <span class='review-span highlight' data-aligned-summaries='0'>bathroom is very, very clean</span>. Rooms are spacious with free internet access if you have a laptop (there is also a free access near the front desk) <span class='review-span highlight' data-aligned-summaries='1 2'>and.excellent breakfast</span>! PS: The staff were incredibly friendly and helpful</div><div class='text-box'>We are fussy and <span class='review-span highlight' data-aligned-summaries='2'>can't think of anything critical to say about this hotel</span>. Service, cleanliness, room size, <span class='review-span highlight' data-aligned-summaries='1'>breakfast</span>, location and everything else <span class='review-span highlight' data-aligned-summaries='1'>were wonderful</span> and, considering the quality, the cost was quite reasonable.</div><div class='text-box'>I stayed at the ambassade in Oct <span class='review-span highlight' data-aligned-summaries='2'>staff: respectful,professional location : ideal</span> room: standard.clean,cosy price:reasonable</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The rooms at this hotel are very clean and the location is within walking distance to everywhere you'd want to go.</span> <span id="1" class="summary-sentence">The breakfast here is lovely, however it is quite expensive.</span> <span id="2" class="summary-sentence">Highly recommended.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_6_a_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'><span class='review-span highlight' data-aligned-summaries='2'>Terrible disappointment Maybe a 1 or 2 star, but NOT 4</span>! <span class='review-span highlight' data-aligned-summaries='1'>The staff was exceptional. Very helpful and thoughtful</span>.The rooms were a disappointment. They are all run down (at least the 3 we saw), items are missing and not replaced, i.e. soap dishes, etc. The carpeting is torn and worn. The Air conditioners barely work, and are rusty and noisy. <span class='review-span highlight' data-aligned-summaries='2'>All the rooms we saw smell from odor</span>. We had to pay to Upgrade to the top floor to get a halfway decent room, which is still 2 star in my opinion. The elevator is not large enough for a surfboard to fit in it (kind of ironic don't you think), so you have to leave your board in a lockup room in the lobby.</div><div class='text-box'>Great little hotel! We stayed here for two days before leaving the islands after getting married on Kaua`i in August, 2004. We booked with the Entertainment Card discount, so the price ?even with daily parking ?was great. I prefer being at the eastern end of Waikiki (where the Beachside is) and it's proximity to <span class='review-span highlight' data-aligned-summaries='0 2'>the beach itself, right ACROSS THE STREET</span>, is perfect. <span class='review-span highlight' data-aligned-summaries='2'>The room was small but nice</span>. Upon hearing that we just got married, the desk clerk upgraded us to <span class='review-span highlight' data-aligned-summaries='0'>a full ocean view room</span> and sent up a split of champagne ?a very nice touch. Needless to say, the view was spectacular and we enjoyed having a glass of wine on the balcony before heading out to dinner both nights.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='2'>Would recommend this hotel</span>. We stayed at this hotel in October of 2005 for 7 days. The hotel was small but we knew that when we made our reservations. <span class='review-span highlight' data-aligned-summaries='1'>We found that the stafff was extremely helpful</span> and gave us advice on the various activities that we should participate in and would help us to sign up for them. If your looking for full on resort than this is not your place but it was perfect for what we needed. The rooms are small and there is no pool on site. <span class='review-span highlight' data-aligned-summaries='0'>Being across the street from the beach</span> we wouldn't have used the pool anyways. <span class='review-span highlight' data-aligned-summaries='0'>We thought that is was in the perfect location</span>, we were able to walk to everything. I would recommend this hotel and would also stay here again.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 2'>Fab Location Literally across the road from Waikik beach</span>, easy walk to all Waikik has to offer. Understand hotel has recently been bought by Aqua chain and looks as if <span class='review-span highlight' data-aligned-summaries='2'>it will be undergoing renovation in the near future</span> - scaffolding all around hotel during my stay with workmen there friom 9 - 5. Interior does need updating and is rather worn and dated - however, location compensates for this.Breakfast is a bit of a joke though and unless you are there when it goes out forget it, my 1st morning there I arrived at about 8.15am to be told there was nothing left! Even when there there is food left it's poor quality muffins only.</div><div class='text-box'>Great Staff, superb location - will be back ! First time visit to Hawaii - <span class='review-span highlight' data-aligned-summaries='0'>this hotel's location could not be beaten - just cross the road and you are on Waikiki beach</span> and the International Market Place is a few yards down the road. <span class='review-span highlight' data-aligned-summaries='1 2'>Staff are very friendly and cannot do enough to help</span>. Rooms are spotlessly clean - <span class='review-span highlight' data-aligned-summaries='2'>will definitely stay there again without hesitation</span>.</div><div class='text-box'>Very oriental The rooms are not large, but decorated beautifullly with antiques. Breakfast in the atrium with the Kona coffee was great. <span class='review-span highlight' data-aligned-summaries='0 2'>Short walk across the stree to the beach</span>. <span class='review-span highlight' data-aligned-summaries='2'>I would recommed it to anyone</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='2'>Excellent for the price</span> <span class='review-span highlight' data-aligned-summaries='0'>This was taken from the beach</span>, the brown building to the left of the blue signed building is the</div><div class='text-box'>Small room.<span class='review-span highlight' data-aligned-summaries='0'>Great view</span> View from the balcony.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a hotel resort that's in a good location for seeing the nearby ocean and beach and a good view of Hawaii.</span> <span id="1" class="summary-sentence">The staff at the hotel were very professional.</span> <span id="2" class="summary-sentence">Would definitely recommend the hotel.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_6_a_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Terrible disappointment Maybe a 1 or 2 star</span>, but NOT 4! <span class='review-span highlight' data-aligned-summaries='2'>The staff was exceptional. Very helpful and thoughtful</span>.The rooms were a disappointment. They are all run down (at least the 3 we saw), items are missing and not replaced, i.e. soap dishes, etc. The carpeting is torn and worn. The Air conditioners barely work, and are rusty and noisy. <span class='review-span highlight' data-aligned-summaries='0'>All the rooms we saw smell from odor</span>. We had to pay to Upgrade to the top floor to get a halfway decent room, which is still 2 star in my opinion. The elevator is not large enough for a surfboard to fit in it (kind of ironic don't you think), so you have to leave your board in a lockup room in the lobby.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Great little hotel</span>! We stayed here for two days before leaving the islands after getting married on Kaua`i in August, 2004. We booked with the Entertainment Card discount, so the price ?even with daily parking ?was great. I prefer being at the eastern end of Waikiki (where the Beachside is) and it's proximity to the <span class='review-span highlight' data-aligned-summaries='0 1'>beach</span> itself, <span class='review-span highlight' data-aligned-summaries='0 1'>right ACROSS THE STREET</span>,<span class='review-span highlight' data-aligned-summaries='1'> is perfect</span>. The room was small but nice. Upon hearing that we just got married, <span class='review-span highlight' data-aligned-summaries='2'>the desk clerk upgraded us to</span> <span class='review-span highlight' data-aligned-summaries='1 2'>a full ocean view room</span> <span class='review-span highlight' data-aligned-summaries='2'>and sent up a split of champagne</span> ?a very nice touch. Needless to say, the view was spectacular and we enjoyed having a glass of wine on the balcony before heading out to dinner both nights.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Would recommend this hotel</span>. We stayed at this hotel in October of 2005 for 7 days. The hotel was small but we knew that when we made our reservations. We found that <span class='review-span highlight' data-aligned-summaries='2'>the stafff was extremely helpful and gave us advice on the various activities</span> that we should participate in and would help us to sign up for them. If your looking for full on resort than this is not your place but it was perfect for what we needed. The rooms are small and there is no pool on site. <span class='review-span highlight' data-aligned-summaries='1'>Being across the street from the beach</span> we wouldn't have used the pool anyways. We thought that <span class='review-span highlight' data-aligned-summaries='1'>is was in the perfect location</span>, we were able to walk to everything. I would recommend this hotel <span class='review-span highlight' data-aligned-summaries='0'>and would also stay here again</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Fab Location Literally across the road from Waikik beach</span>, easy walk to all Waikik has to offer. Understand hotel has recently been bought by Aqua chain and looks as if it will be undergoing renovation in the near future - scaffolding all around hotel during my stay with workmen there friom 9 - 5. <span class='review-span highlight' data-aligned-summaries='0'>Interior does need updating and is rather worn and dated</span> - however, <span class='review-span highlight' data-aligned-summaries='0'>location compensates for this</span>.<span class='review-span highlight' data-aligned-summaries='2'>Breakfast is a bit of a joke</span> though and <span class='review-span highlight' data-aligned-summaries='2'>unless you are there when it goes out</span> forget it, my 1st morning there I arrived at about 8.15am to be told there was nothing left! Even when there there is food left it's poor quality muffins only.</div><div class='text-box'>Great Staff, superb location - will be back ! First time visit to Hawaii - <span class='review-span highlight' data-aligned-summaries='0 1'>this hotel's location could not be beaten</span> <span class='review-span highlight' data-aligned-summaries='1'>- just cross the road and you are on Waikiki beach</span> and the International Market Place is a few yards down the road. <span class='review-span highlight' data-aligned-summaries='2'>Staff are very friendly and cannot do enough to help</span>. Rooms are spotlessly clean - <span class='review-span highlight' data-aligned-summaries='0'>will definitely stay there again without hesitation</span>.</div><div class='text-box'>Very oriental The rooms are not large, but decorated beautifullly with antiques. Breakfast in the atrium with the Kona coffee was great. <span class='review-span highlight' data-aligned-summaries='1'>Short walk</span> across the stree <span class='review-span highlight' data-aligned-summaries='1'>to the beach</span>. I <span class='review-span highlight' data-aligned-summaries='0'>would recommed it to</span> anyone.</div><div class='text-box'>Excellent for the price <span class='review-span highlight' data-aligned-summaries='1'>This was taken from the beach</span>, the brown building to the left of the blue signed building is the</div><div class='text-box'>Small room.<span class='review-span highlight' data-aligned-summaries='0 1'>Great view</span> View <span class='review-span highlight' data-aligned-summaries='0 1'>from the balcony</span>.<span class='review-span highlight' data-aligned-summaries='1'></span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is highly recommended.</span> <span id="1" class="summary-sentence">The location of this hotel is perfect and not only provides great views but also close to the beach.</span> <span id="2" class="summary-sentence">The staff provide a really great friendly but professional service.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_6_a_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Terrible disappointment Maybe a 1 or 2 star, but NOT 4</span>! <span class='review-span highlight' data-aligned-summaries='2'>The staff was exceptional. Very helpful and thoughtful</span>.The rooms were a disappointment. They are all run down (at least the 3 we saw), items are missing and not replaced, i.e. soap dishes, etc. The carpeting is torn and worn. The Air conditioners barely work, and are rusty and noisy. All the rooms we saw smell from odor. We had to pay to Upgrade to the top floor to get a halfway decent room, which is still 2 star in my opinion. The elevator is not large enough for a surfboard to fit in it (kind of ironic don't you think), so you have to leave your board in a lockup room in the lobby.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Great little hotel</span>! We stayed here for two days before leaving the islands after getting married on Kaua`i in August, 2004. We booked with the Entertainment Card discount, so the price ?even with daily parking ?was great. I prefer being at the eastern end of Waikiki (where the Beachside is) and it's proximity to the <span class='review-span highlight' data-aligned-summaries='0 1'>beach</span> itself, <span class='review-span highlight' data-aligned-summaries='0 1'>right ACROSS THE STREET</span>,<span class='review-span highlight' data-aligned-summaries='0'> is perfect</span>. The room was small but nice. Upon hearing that we just got married, <span class='review-span highlight' data-aligned-summaries='2'>the desk clerk upgraded us to a full ocean view room and sent up a split of champagne</span> ?a very nice touch. Needless to say, the view was spectacular and we enjoyed having a glass of wine on the balcony before heading out to dinner both nights.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Would recommend this hotel</span>. We stayed at this hotel in October of 2005 for 7 days. The hotel was small but we knew that when we made our reservations. We found that <span class='review-span highlight' data-aligned-summaries='0 2'>the stafff was extremely helpful</span> <span class='review-span highlight' data-aligned-summaries='2'>and gave us advice on the various activities</span> that we should participate in and would help us to sign up for them. If your looking for full on resort than this is not your place but it was perfect for what we needed. The rooms are small and there is no pool on site. Being <span class='review-span highlight' data-aligned-summaries='1'>across the street from the beach</span> we wouldn't have used the pool anyways. We thought that is was in the perfect location, we were able to walk to everything. I would recommend this hotel and would also stay here again.</div><div class='text-box'>Fab Location <span class='review-span highlight' data-aligned-summaries='0 1'>Literally across the road from Waikik beach</span>, easy walk to all Waikik has to offer. Understand hotel has recently been bought by Aqua chain and looks as if <span class='review-span highlight' data-aligned-summaries='0'>it will be undergoing renovation in the near future</span> - scaffolding all around hotel during my stay with workmen there friom 9 - 5. Interior does need updating and is rather worn and dated - however, location compensates for this.Breakfast is a bit of a joke though and unless you are there when it goes out forget it, my 1st morning there I arrived at about 8.15am to be told there was nothing left! Even when there there is food left it's poor quality muffins only.</div><div class='text-box'>Great Staff, superb location - will be back ! First time visit to Hawaii - <span class='review-span highlight' data-aligned-summaries='0'>this hotel's location could not be beaten</span> - <span class='review-span highlight' data-aligned-summaries='1'>just cross the road and you are on Waikiki beach</span> and the International Market Place is a few yards down the road. <span class='review-span highlight' data-aligned-summaries='2'>Staff are very friendly and cannot do enough to help</span>. Rooms are spotlessly clean - <span class='review-span highlight' data-aligned-summaries='0'>will definitely stay there again without hesitation</span>.</div><div class='text-box'>Very oriental The rooms are not large, but decorated beautifullly with antiques. Breakfast in the atrium with the Kona coffee was great. <span class='review-span highlight' data-aligned-summaries='1'>Short walk across the stree to the beach</span>. <span class='review-span highlight' data-aligned-summaries='0'>I would recommed it to anyone</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Excellent for the price</span> This was taken from the beach, the brown building to the left of the blue signed building is the</div><div class='text-box'>Small room.Great view View from the balcony.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is highly recommended.</span> <span id="1" class="summary-sentence">It is just across the road from Waikiki beach.</span> <span id="2" class="summary-sentence">The staff are really helpful and incredibly thoughtful.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_6_b_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>great place We got back a week ago from a week long stay at the Hilton Hawaiian Village. I read some of the reviews before we left, and cannot understand what all of the complaining was for from some of the reviews that I read. We had an absolutely great time. The hotel was completely booked (President's Week), and we estimated that with 3,000 rooms, there were approximately 10,000 guests that week, but you would never know it. You did need to go down early to get a lounger by the superpool, but that was nothing to complain about. <span class='review-span highlight' data-aligned-summaries='1'>The staff was courteous</span>, the rooms were terrific and <span class='review-span highlight' data-aligned-summaries='0'>the view was to die for</span>! <span class='review-span highlight' data-aligned-summaries='2'>The hotel grounds are beautiful and there really is no reason to leave</span> the hotel grounds. We did go on day journeys but also enjoyed the days sitting by the pool or on the beach (which just happens to be the best part of Waikiki Beach.) I would go back to this hotel in a heartbeat and <span class='review-span highlight' data-aligned-summaries='2'>would recommend it without hesitation</span>.</div><div class='text-box'>There's no place like HHV! Just returned from our third visit to Hawaii and the Hilton Hawaiian Village (March 7-13). I cannot imagine staying anywhere other than HHV. It is like visiting an old and cherished friend. Our last two visits have been spent in the Ali Tower and <span class='review-span highlight' data-aligned-summaries='1'>the staff there is wonderful</span>. You can quickly become spoiled to the twice a day maid service and the nightly turn-down service. You would have a wonderful vacation if you never left the Village. Everything you can possibly need or want is there. I even look forward to the almost daily trips to the ABC store! <span class='review-span highlight' data-aligned-summaries='0 2'>Just steps away from the beach</span>,<span class='review-span highlight' data-aligned-summaries='2'> HHV is truly a part of paradise</span>!</div><div class='text-box'>Excellent Stay Spent only 1 night in the Kahlia tower on the executive floor. <span class='review-span highlight' data-aligned-summaries='1 2'>I found the staff to be top notch</span>,<span class='review-span highlight' data-aligned-summaries='1'> very friendly and professional</span>. The room in the Kahlia tower was newly built and very luxurious, with <span class='review-span highlight' data-aligned-summaries='0'>a small patio and</span> <span class='review-span highlight' data-aligned-summaries='0 2'>a great view out to sea</span>. The resort is very large with many shops and a great selection of restaurants. We chose to leave the property and go next door for dinner to Kobe Steakhouse, well worth the walk. Over all this is a great resort for either a stop over before your Hawaiian vacation or even a week long visit. Expect resort prices for food and drink, but good quality.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 2'>Best Hotel on Waikiki Beach</span>! This is my second stay at this hotel. The service is wonderful and they have the nicest, cleanest and widest beach. <span class='review-span highlight' data-aligned-summaries='1'>They try their best to accommodate all guests' requests in spite of being one of the busiest hotels</span> in the area! A wide choice of restaurants and shops. If you have the $$, <span class='review-span highlight' data-aligned-summaries='2'>would definitely recommend it</span>. There's no other hotel like the HHV on Waikiki Beach!</div><div class='text-box'>disappointing Was on the 31st floor of the Rainbow tower. Decor and furnishings are right from the 1970s. Walls are paper-thin - was kept awake by a crying baby next door. Hot water took about 20 mins to arrive. Extractor fan in the ceiling was full of hair. If I had been paying any more than the conference rate, I'd be upset! Very disappointing</div><div class='text-box'>loved it We stayed only one night after staying on Maui and loved it. The <span class='review-span highlight' data-aligned-summaries='0'>hotel</span> was <span class='review-span highlight' data-aligned-summaries='2'>expensive but</span> we were <span class='review-span highlight' data-aligned-summaries='0'>on the waikiki side</span> on a high floor and <span class='review-span highlight' data-aligned-summaries='0'>the view was incredible</span>. <span class='review-span highlight' data-aligned-summaries='2'>Worth it!</span></div><div class='text-box'>Loyal Hilton guest says.nice <span class='review-span highlight' data-aligned-summaries='0'>hotel</span> but <span class='review-span highlight' data-aligned-summaries='0'>average resort Beach and ocean view</span> from the 20th floor of Rainbow Tower</div><div class='text-box'>The how to save yourself from never leaving the HH Village Guide! Penguins at Hilton Hawaiian</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a hotel resort that's in a good location for seeing the nearby ocean and beach and a good view of Hawaii.</span> <span id="1" class="summary-sentence">The staff at the hotel were very professional.</span> <span id="2" class="summary-sentence">Would definitely recommend the hotel.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_6_b_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>great place We got back a week ago from a week long stay at the Hilton Hawaiian Village. I read some of the reviews before we left, and cannot understand what all of the complaining was for from some of the reviews that I read. We had an absolutely great time. The hotel was completely booked (President's Week), and we estimated that with 3,000 rooms, there were approximately 10,000 guests that week, but you would never know it. You did need to go down early to get a lounger by the superpool, but that was nothing to complain about. <span class='review-span highlight' data-aligned-summaries='2'>The staff was courteous</span>, the rooms were terrific and <span class='review-span highlight' data-aligned-summaries='1'>the view was to die for</span>! <span class='review-span highlight' data-aligned-summaries='1'>The hotel grounds are beautiful</span> and there really is no reason to leave the hotel grounds. We did go on day journeys but also enjoyed the days sitting by the pool or on the beach (which just happens to be the best part of Waikiki Beach.) <span class='review-span highlight' data-aligned-summaries='0'>I would go back to this hotel</span> in a heartbeat <span class='review-span highlight' data-aligned-summaries='0'>and would recommend it without hesitation</span>.</div><div class='text-box'>There's no place like HHV! Just returned from our third visit to Hawaii and the Hilton Hawaiian Village (March 7-13). <span class='review-span highlight' data-aligned-summaries='0'>I cannot imagine staying anywhere other than HHV</span>. It is like visiting an old and cherished friend. Our last two visits have been spent in the Ali Tower and <span class='review-span highlight' data-aligned-summaries='2'>the staff there is wonderful</span>. You can quickly become spoiled to the twice a day maid service and the nightly turn-down service. You would have a wonderful vacation if you never left the Village. Everything you can possibly need or want is there. I even look forward to the almost daily trips to the ABC store! <span class='review-span highlight' data-aligned-summaries='1'>Just steps away from the beach</span>, <span class='review-span highlight' data-aligned-summaries='0'>HHV is truly a part of paradise</span>!</div><div class='text-box'>Excellent Stay Spent only 1 night in the Kahlia tower on the executive floor. <span class='review-span highlight' data-aligned-summaries='2'>I found the staff to be top notch, very friendly and professional</span>. The room in the Kahlia tower was newly built and very luxurious, with a small patio and a great view out to sea. The resort is very large with many shops and a great selection of restaurants. We chose to leave the property and go next door for dinner to Kobe Steakhouse, well worth the walk. Over all this is a great resort for either a stop over before your Hawaiian vacation or even a week long visit. Expect resort prices for food and drink, but good quality.</div><div class='text-box'>Best Hotel on Waikiki Beach! This is my second stay at this hotel. <span class='review-span highlight' data-aligned-summaries='2'>The service is wonderful</span> and <span class='review-span highlight' data-aligned-summaries='1'>they have the</span> nicest, cleanest and <span class='review-span highlight' data-aligned-summaries='1'>widest beach</span>. They try their best to accommodate all guests' requests in spite of being one of the busiest hotels in the area! A wide choice of restaurants and shops. If you have the $$, <span class='review-span highlight' data-aligned-summaries='0'>would definitely recommend it</span>. <span class='review-span highlight' data-aligned-summaries='0'>There's no other hotel like the HHV on Waikiki Beach</span>!</div><div class='text-box'>disappointing Was on the 31st floor of the Rainbow tower. Decor and furnishings are right from the 1970s. Walls are paper-thin - was kept awake by a crying baby next door. Hot water took about 20 mins to arrive. Extractor fan in the ceiling was full of hair. <span class='review-span highlight' data-aligned-summaries='0'>If I had been paying any more than the conference rate, I'd be upset</span>! <span class='review-span highlight' data-aligned-summaries='0'>Very disappointing</span></div><div class='text-box'>loved it We stayed only one night after staying on Maui and loved it. <span class='review-span highlight' data-aligned-summaries='0'>The hotel was expensive but</span> <span class='review-span highlight' data-aligned-summaries='1'>we were on the waikiki</span> side on a high floor <span class='review-span highlight' data-aligned-summaries='1'>and</span> <span class='review-span highlight' data-aligned-summaries='0 1'>the view was incredible</span>. <span class='review-span highlight' data-aligned-summaries='0'>Worth it</span>!</div><div class='text-box'>Loyal Hilton guest says.nice hotel but average resort <span class='review-span highlight' data-aligned-summaries='1'>Beach and ocean view from the 20th floor</span> of <span class='review-span highlight' data-aligned-summaries='1'>Rainbow Tower</span></div><div class='text-box'>The how to save yourself from never leaving the HH Village Guide! Penguins at Hilton Hawaiian</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is highly recommended.</span> <span id="1" class="summary-sentence">The location of this hotel is perfect and not only provides great views but also close to the beach.</span> <span id="2" class="summary-sentence">The staff provide a really great friendly but professional service.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_6_b_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>great place We got back a week ago from a week long stay at the Hilton Hawaiian Village. I read some of the reviews before we left, and cannot understand what all of the complaining was for from some of the reviews that I read. We had an absolutely great time. The hotel was completely booked (President's Week), and we estimated that with 3,000 rooms, there were approximately 10,000 guests that week, but you would never know it. You did need to go down early to get a lounger by the superpool, but that was nothing to complain about. <span class='review-span highlight' data-aligned-summaries='2'>The staff was courteous</span>, the rooms were terrific and the view was to die for! <span class='review-span highlight' data-aligned-summaries='0'>The hotel grounds are beautiful and there really is no reason to leave</span> the hotel grounds. We did go on day journeys but also enjoyed the days sitting by the pool or on the beach (which just happens to be the best part of Waikiki Beach.) <span class='review-span highlight' data-aligned-summaries='0'>I would go back to this hotel in a heartbeat and would recommend it without hesitation</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>There's no place like HHV</span>! Just returned from our third visit to Hawaii and the Hilton Hawaiian Village (March 7-13). I cannot imagine staying anywhere other than HHV. It is like visiting an old and cherished friend. Our last two visits have been spent in the Ali Tower and <span class='review-span highlight' data-aligned-summaries='2'>the staff there is wonderful</span>. You can quickly become spoiled to the twice a day maid service and the nightly turn-down service. You would have a wonderful vacation if you never left the Village. Everything you can possibly need or want is there. I even look forward to the almost daily trips to the ABC store! Just steps away from the beach, <span class='review-span highlight' data-aligned-summaries='0'>HHV is truly a part of paradise</span>!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Excellent Stay</span> Spent only 1 night in the Kahlia tower on the executive floor. <span class='review-span highlight' data-aligned-summaries='2'>I found the staff to be top notch, very friendly and professional</span>. The room in the Kahlia tower was newly built and very luxurious, with a small patio and a great view out to sea. The resort is very large with many shops and a great selection of restaurants. We chose to leave the property and go next door for dinner to Kobe Steakhouse, well worth the walk. Over all this is a great resort for either a stop over before your Hawaiian vacation or even a week long visit. Expect resort prices for food and drink, but good quality.</div><div class='text-box'>Best Hotel on Waikiki Beach! This is my second stay at this hotel. <span class='review-span highlight' data-aligned-summaries='2'>The service is wonderful</span> and they have the nicest, cleanest and widest beach. <span class='review-span highlight' data-aligned-summaries='2'>They try their best to accommodate all guests' requests</span> in spite of being one of the busiest hotels in the area! A wide choice of restaurants and shops. If you have the $$, <span class='review-span highlight' data-aligned-summaries='0'>would definitely recommend it</span>. <span class='review-span highlight' data-aligned-summaries='0'>There's no other hotel like the HHV on Waikiki Beach!</span></div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>disappointing</span> Was on the 31st floor of the Rainbow tower. <span class='review-span highlight' data-aligned-summaries='0'>Decor and furnishings are right from the 1970s</span>. Walls are paper-thin - was kept awake by a crying baby next door. Hot water took about 20 mins to arrive. Extractor fan in the ceiling was full of hair. If I had been paying any more than the conference rate, I'd be upset! Very disappointing</div><div class='text-box'>loved it We stayed only one night after staying on Maui and loved it. <span class='review-span highlight' data-aligned-summaries='0'>The hotel was expensive but</span> we were on the waikiki side on a high floor and <span class='review-span highlight' data-aligned-summaries='0'>the view was incredible. Worth it!</span></div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Loyal Hilton guest says.nice hotel but average resort</span> Beach and ocean view from the 20th floor of Rainbow Tower</div><div class='text-box'>The how to save yourself from never leaving the HH Village Guide! Penguins at Hilton Hawaiian</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is highly recommended.</span> <span id="1" class="summary-sentence">It is just across the road from Waikiki beach.</span> <span id="2" class="summary-sentence">The staff are really helpful and incredibly thoughtful.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_7_a_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Like the other reviewers, I have to say <span class='review-span highlight' data-aligned-summaries='0'>this hotel is close to perfect</span>. The rooms aren't as large as I would have liked (we were upgraded for an 8 night stay from a deluxe to one of the Richard Meier ultra-modern rooms on the two "executive" floors). I had been to Rome once before and, on <span class='review-span highlight' data-aligned-summaries='0'>the recommendation of friends</span>, <span class='review-span highlight' data-aligned-summaries='0'>stayed in a fancy hotel</span> on the Via Veneto. The Via Veneto area is sterile and not fun and <span class='review-span highlight' data-aligned-summaries='0'>we didn't really enjoy</span> our stay there. <span class='review-span highlight' data-aligned-summaries='0'>But</span> <span class='review-span highlight' data-aligned-summaries='0 1'>the Raphael</span>,<span class='review-span highlight' data-aligned-summaries='1'> just off Piazza Navona in the historical center</span>, <span class='review-span highlight' data-aligned-summaries='0'>is a whole other story</span>. You walk out the door and you're right there, in the midst of everything. As befits a Relais & Chateaux hotel, everything is elegant and the staff and service are the best. Really, the only problem is paying the bill at the end!</div><div class='text-box'>Our second stay here in 12 months and <span class='review-span highlight' data-aligned-summaries='0'>the service from this hotel is enough to make me want to return to Rome</span>, just so I can stay here again! The location is second to none and we have been able to walk to all the main sights from here. We have stayed in three different rooms at this hotel and they have all been fabulous. The buffet breakfast is very good and the rooftop is a pleasant area to enjoy a drink or two after a long day of sight seeing. We were left 'tasty treats' on our room every day and we love the adjustable beds.<span class='review-span highlight' data-aligned-summaries='0'>The staff at the front desk are very helpful</span> and friendly and the doorman was a delight! <span class='review-span highlight' data-aligned-summaries='0'>Hopefully we'll see you again next year</span>!</div><div class='text-box'>We stayed at the Raphael for 3 nights and we had an enjoyable stay there. Upon arrival we were upgraded to one of the newly renovated Richard Meier rooms, which was very nice, with a spacious bathroom and clever use of the available space. The hotel corridors could benefit from a decoration as they were a bit plain, and the elevator needs a small facelift, but nonetheless it was fuctional and the guest doesn't spend any time there. Breakfast was quite good, especially for Italy, and <span class='review-span highlight' data-aligned-summaries='1'>the location just off piazza Navona, ideal</span>. <span class='review-span highlight' data-aligned-summaries='0'>The only downside is the staff, which while friendly and kind, didn't go beyond their duties for advice etc</span>.</div><div class='text-box'>Hotel Raphael is absolutely gorgeous! It is very comfortable, clean and quiet. A reasonable journey from Campiano Airport should cost you no more than 40 euro. Our sheets were changed every day and the delicious chocolates on our bed every night were fantastic. The Bulgari toiletries smell gorgeous so enjoyed several long soaks in the bath. Breakfast is amazing, made extra special by starting the day with a refreshing 'Bucks Fizz' Everything about <span class='review-span highlight' data-aligned-summaries='0'>the hotel is perfect the staff are very courteous and are most helpful</span>. <span class='review-span highlight' data-aligned-summaries='0'>Would highly recommend</span> and would most definately visit again. - Mike and Alison</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>A beautiful hotel in a very bustling area of Rome</span>. You expect everything to be perfect at an R&C but <span class='review-span highlight' data-aligned-summaries='0'>this is an entire staff taking service to whole new level</span>. Arrangements for cars, tours and restaurants via email.way before you get there. Thanks Anna. A glass of prosecco delivered anywhere in the hotel at the direction of Stephen in the restaurant. I can't say enough about this hotel</div><div class='text-box'>Selected hotel via Australian website. Very good value. Great location - could walk to all main places and sights in Rome. Brekky was a good size buffet and on roof top garden at level 6. Rooms not huge but good and nice bathroom. Wifi worked and was free. Loved having pre-dinner wine on roof top while seeing the sun go down on St Peter's basilica.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Highly recommend</span> Hotel Raphael as it was perfect for my solo holiday. <span class='review-span highlight' data-aligned-summaries='0'>Hotel Staff were excellent in making my stay comfortable</span>. <span class='review-span highlight' data-aligned-summaries='0 1'>The hotel is perfectly situated in Piazza Navona</span> so close to dining and shopping and of course historic sites.</div><div class='text-box'>We were upgraded to a suite upon our arrival, and it only got better each day. <span class='review-span highlight' data-aligned-summaries='0'>The location is perfect</span> for accessing all the historic sights on foot, and there were <span class='review-span highlight' data-aligned-summaries='0'>tons of fantastic restaurants right nearby</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel is recommended and the staff were really helpful.</span> <span id="1" class="summary-sentence">The location is just near to the Piazza Navona.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_7_a_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Like the other reviewers, I have to say <span class='review-span highlight' data-aligned-summaries='0'>this hotel is close to perfect.</span> The rooms aren't as large as I would have liked (we were upgraded for an 8 night stay from a deluxe to one of the Richard Meier ultra-modern rooms on the two "executive" floors). I had been to Rome once before and, on the recommendation of friends, stayed in a fancy hotel on the Via Veneto. The Via Veneto area is sterile and not fun and we didn't really enjoy our stay there. But the Raphael, just off Piazza Navona in the historical center, is a whole other story. You walk out the door and you're right there, in the midst of everything. As befits a Relais & Chateaux hotel, everything is elegant and <span class='review-span highlight' data-aligned-summaries='0'>the staff and service are the best</span>. Really, the only problem is paying the bill at the end!</div><div class='text-box'>Our second stay here in 12 months and the service from <span class='review-span highlight' data-aligned-summaries='0'>this hotel is enough to make me want to return to Rome</span>, just so I can stay here again! The location is second to none and we have been able to walk to all the main sights from here. We have stayed in three different <span class='review-span highlight' data-aligned-summaries='0'>rooms at this hotel</span> and they <span class='review-span highlight' data-aligned-summaries='0'>have all been fabulous</span>. The buffet breakfast is very good and the rooftop is a pleasant area to enjoy a drink or two after a long day of sight seeing. We were left 'tasty treats' on our room every day and we love the adjustable beds.<span class='review-span highlight' data-aligned-summaries='0'>The staff at the front desk are very helpful and friendly</span> and the doorman was a delight! Hopefully we'll see you again next year!</div><div class='text-box'>We stayed at the Raphael for 3 nights and we had an enjoyable stay there. Upon arrival we were upgraded to one of the newly renovated Richard Meier rooms, which was very nice, with a spacious bathroom and clever use of the available space. The hotel corridors could benefit from a decoration as they were a bit plain, and the elevator needs a small facelift, but nonetheless it was fuctional and the guest doesn't spend any time there. Breakfast was quite good, especially for Italy, and the location just off piazza Navona, ideal. The only downside is <span class='review-span highlight' data-aligned-summaries='0'>the staff, which while friendly</span> and kind, didn't go beyond their duties for advice etc.</div><div class='text-box'>Hotel Raphael is absolutely gorgeous! It is very comfortable, clean and quiet. A reasonable journey from Campiano Airport should cost you no more than 40 euro. Our sheets were changed every day and the delicious chocolates on our bed every night were fantastic. The Bulgari toiletries smell gorgeous so enjoyed several long soaks in the bath. Breakfast is amazing, made extra special by starting the day with a refreshing 'Bucks Fizz' Everything about the <span class='review-span highlight' data-aligned-summaries='0'>hotel is perfect the staff are very courteous and are most helpful</span>. <span class='review-span highlight' data-aligned-summaries='0'>Would highly recommend and would most definately visit again</span>. - Mike and Alison</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>A beautiful hotel in a very bustling area of Rome</span>. You expect everything to be perfect at an R&C but <span class='review-span highlight' data-aligned-summaries='0'>this is an entire staff taking service to whole new level</span>. Arrangements for cars, tours and restaurants via email.way before you get there. Thanks Anna. A glass of prosecco delivered anywhere in the hotel at the direction of Stephen in the restaurant. <span class='review-span highlight' data-aligned-summaries='0'>I can't say enough about this hotel</span></div><div class='text-box'>Selected hotel via Australian website. <span class='review-span highlight' data-aligned-summaries='0'>Very good value</span>. <span class='review-span highlight' data-aligned-summaries='0'>Great location</span> - could walk to all main places and sights in Rome. Brekky was a good size buffet and on roof top garden at level 6. Rooms not huge but good and nice bathroom. Wifi worked and was free. Loved having pre-dinner wine on roof top while seeing the sun go down on St Peter's basilica.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Highly recommend Hotel Raphael</span> as it was perfect for my solo holiday. <span class='review-span highlight' data-aligned-summaries='0'>Hotel Staff were excellent in making my stay comfortable</span>. The hotel is perfectly situated in Piazza Navona so close to dining and shopping and of course historic sites.</div><div class='text-box'>We were upgraded to a suite upon our arrival, and it only got better each day. <span class='review-span highlight' data-aligned-summaries='0'>The location is perfect</span> for accessing all the historic sights on foot, and there were <span class='review-span highlight' data-aligned-summaries='0'>tons of fantastic restaurants right nearby</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is really recommended because the staff are very friendly.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_7_a_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Like the other reviewers, <span class='review-span highlight' data-aligned-summaries='0'>I have to say this hotel is close to perfect</span>. The rooms aren't as large as I would have liked (we were upgraded for an 8 night stay from a deluxe to one of the Richard Meier ultra-modern rooms on the two "executive" floors). I had been to Rome once before and, on the recommendation of friends, stayed in a fancy hotel on the Via Veneto. The Via Veneto area is sterile and not fun and we didn't really enjoy our stay there. But the Raphael, just off Piazza Navona in the historical center, is a whole other story. You walk out the door and you're right there, in the midst of everything. As befits a Relais & Chateaux hotel, everything is elegant and <span class='review-span highlight' data-aligned-summaries='0'>the staff and service are the best</span>. Really, the only problem is paying the bill at the end!</div><div class='text-box'>Our second stay here in 12 months and the service from <span class='review-span highlight' data-aligned-summaries='0'>this hotel is enough to make me want to return to Rome</span>, just so I can stay here again! The location is second to none and we have been able to walk to all the main sights from here. We have stayed in three different <span class='review-span highlight' data-aligned-summaries='0'>rooms</span> at this hotel and <span class='review-span highlight' data-aligned-summaries='0'>they have all been fabulous</span>. The buffet breakfast is very good and the rooftop is a pleasant area to enjoy a drink or two after a long day of sight seeing. We were left 'tasty treats' on our room every day and we love the adjustable beds.<span class='review-span highlight' data-aligned-summaries='0'>The staff at the front desk are very helpful and friendly and the doorman was a delight</span>! Hopefully we'll see you again next year!</div><div class='text-box'>We stayed at the Raphael for 3 nights and <span class='review-span highlight' data-aligned-summaries='0'>we had an enjoyable stay there</span>. Upon arrival we were upgraded to one of the newly renovated Richard Meier rooms, which was very nice, with a spacious bathroom and clever use of the available space. The hotel corridors could benefit from a decoration as they were a bit plain, and the elevator needs a small facelift, but nonetheless it was fuctional and the guest doesn't spend any time there. Breakfast was quite good, especially for Italy, and the location just off piazza Navona, ideal. <span class='review-span highlight' data-aligned-summaries='0'>The only downside is the staff, which while friendly and kind, didn't go beyond their duties</span> for advice etc.</div><div class='text-box'>Hotel Raphael is absolutely gorgeous! It is very comfortable, clean and quiet. A reasonable journey from Campiano Airport should cost you no more than 40 euro. Our sheets were changed every day and the delicious chocolates on our bed every night were fantastic. The Bulgari toiletries smell gorgeous so enjoyed several long soaks in the bath. Breakfast is amazing, made extra special by starting the day with a refreshing 'Bucks Fizz' Everything about the hotel is perfect <span class='review-span highlight' data-aligned-summaries='0'>the staff are very courteous and are most helpful</span>. <span class='review-span highlight' data-aligned-summaries='0'>Would highly recommend and would most definately visit again</span>. - Mike and Alison</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>A beautiful hotel in a very bustling area of Rome</span>. You expect everything to be perfect at an R&C but this is <span class='review-span highlight' data-aligned-summaries='0'>an entire staff taking service to whole new level</span>. Arrangements for cars, tours and restaurants via email.way before you get there. Thanks Anna. A glass of prosecco delivered anywhere in the hotel at the direction of Stephen in the restaurant. <span class='review-span highlight' data-aligned-summaries='0'>I can't say enough about this hotel</span></div><div class='text-box'>Selected hotel via Australian website. <span class='review-span highlight' data-aligned-summaries='0'>Very good value</span>. <span class='review-span highlight' data-aligned-summaries='0'>Great location - could walk to all main places and sights in Rome</span>. Brekky was a good size buffet and on roof top garden at level 6. Rooms not huge but good and nice bathroom. Wifi worked and was free. Loved having pre-dinner wine on roof top while seeing the sun go down on St Peter's basilica.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Highly recommend Hotel Raphael</span> as it was perfect for my solo holiday. Hotel Staff were excellent in making my stay comfortable. The hotel is <span class='review-span highlight' data-aligned-summaries='0'>perfectly situated in Piazza Navona</span> so close to dining and shopping and of course historic sites.</div><div class='text-box'>We were upgraded to a suite upon our arrival, and it only got better each day. <span class='review-span highlight' data-aligned-summaries='0'>The location is perfect</span> for accessing all the historic sights on foot, and <span class='review-span highlight' data-aligned-summaries='0'>there were tons of fantastic restaurants right nearby</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is highly recommended and most of the staff is very helpful.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_7_b_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Stayed here for 4 nights with my partner in August '09. The hotel is located 50m around the corner from the famous Campo De 'Fiori which is a wonderful area for eating and drinking as well as having great nightlife. The room itself was beautifully done in a period setting. <span class='review-span highlight' data-aligned-summaries='0'>Bed was large and aircon was fine</span>. <span class='review-span highlight' data-aligned-summaries='0'>Staff extremely passionate and friendly about when and where to see the sights</span>. <span class='review-span highlight' data-aligned-summaries='0 1'>Location is excellent as only a 5 minute walk to the piazza navona</span>, 10 min walk to the trevi fountain and pantheon and 15 min walk to Vaticano and Colosseum. Also only a 10 min walk to the river and the wonderful trastevere area of eating/nightlife. There is a viewing deck above the top floor which is great to relax and have a few drinks and offers a really nice view of the area as well which was a bonus! No complaints whatsoever here, had a wonderful stay!</div><div class='text-box'>I can't say enough about the wonderful Hotel Campo De Fiori! The location is perfect for sight seeing in Rome. The rooms are typical European sized but beautiful and well-appointed. I was a little concerned about potential noise from the nearby square but with my windows shut I didn't hear a peep. The photos on the web site are accurate and the roof-top deck is a dream! The breakfast was ample with excellent coffee. <span class='review-span highlight' data-aligned-summaries='0'>The best thing about the hotel is the amazing staff</span> - Valentina, Matteo, Barbara, Gabriele, Angelo, Adam, Andrea & Andrew - not only efficient and well-versed on the city, they were kind hearted and lovely. <span class='review-span highlight' data-aligned-summaries='0'>They bent over backwards to make my stay truly special and I can't wait to return</span>!</div><div class='text-box'>My wife and I visited Rome for the first time this past November, and we couldn't be happier with our stay at Hotel Campo de Fiori. <span class='review-span highlight' data-aligned-summaries='0'>The location of the hotel is perfect</span>, 5 minute walk to most of the sites, 20 minute walk to the Vatican City and 20 minutes the other way to the Coliseum. <span class='review-span highlight' data-aligned-summaries='0'>The hotel staff is extremely helpful</span> and make good recommendations on restaurants (La Scalla and The Library were two of our favorites, and will go back for sure to both). The rooms were smaller - but they were loaded with character and the bathrooms were superb.</div><div class='text-box'>After our port intensive Med cruise it was a relief to have such a haven as this hotel to unwind for three nights. We loved our top floor room with it's own terrace and the access to the fabulous large rooftop terrace was right outside our door. The terrace was not only a great 360 degree view of the historic area of Rome but it was such a great social place to join others over wine in the hours leading up to sunset. Magic. The <span class='review-span highlight' data-aligned-summaries='0'>staff is</span> so <span class='review-span highlight' data-aligned-summaries='0'>helpful</span> and made us feel so welcome there. Highly <span class='review-span highlight' data-aligned-summaries='0'>recommend this</span> boutique <span class='review-span highlight' data-aligned-summaries='0'>hotel</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>If you</span> are looking for a place with a central location and superb roofterrace and <span class='review-span highlight' data-aligned-summaries='0'>don't mind being ripped off, this is it</span>. All you need to overlook is the dreadfull breakfast (for instance, the cheese had never seen a cow and the orange juice looks radio-active), the claustrophobic rooms and lack of any extras cq basics in the room (water, toilettries, etc.) that you might expect for the price they charge.</div><div class='text-box'>Thank you very much for your hospitality while we stayed with you during Aug 1 - 4, 2008. My wiffe and I were <span class='review-span highlight' data-aligned-summaries='0'>extremely pleased with the hospitable staff</span>, general cleanliness, quiet rooms, delicious breakfast and all. <span class='review-span highlight' data-aligned-summaries='0'>The overall experience at your hotel was very good</span> and this made Rome even better for us. We would look forward to coming back to Rome to stay in the Hotel Campo de' Fiori. Thank you.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Great hotel</span> with <span class='review-span highlight' data-aligned-summaries='0'>very kind and very helpful personnel</span>. The roof garden is absolutely great! <span class='review-span highlight' data-aligned-summaries='0'>Very nice view over Rome</span>. The rooms are lovely! The location is perfect: at the Campo de' Fiori and near the ancient centre of Rome.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>I would so recommend this hotel for</span> <span class='review-span highlight' data-aligned-summaries='1'>the location</span>, the accomodations, <span class='review-span highlight' data-aligned-summaries='0'>the friendliness of the staff</span> and the amazing roof garden. I thank Travel Advisors for sending us in the right direction in the first place</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel is recommended and the staff were really helpful.</span> <span id="1" class="summary-sentence">The location is just near to the Piazza Navona.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_7_b_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Stayed here for 4 nights with my partner in August '09. <span class='review-span highlight' data-aligned-summaries='0'>The hotel is located 50m around the corner from the famous Campo De 'Fiori</span> which is a wonderful area for eating and drinking as well as having great nightlife. The room itself was beautifully done in a period setting. Bed was large and aircon was fine. <span class='review-span highlight' data-aligned-summaries='0'>Staff extremely passionate and friendly</span> about when and where to see the sights. Location is excellent as only a 5 minute walk to the piazza navona, 10 min walk to the trevi fountain and pantheon and 15 min walk to Vaticano and Colosseum. Also only a 10 min walk to the river and the wonderful trastevere area of eating/nightlife. There is a viewing deck above the top floor which is great to relax and have a few drinks and offers a really nice view of the area as well which was a bonus! No complaints whatsoever here, had a wonderful stay!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>I can't say enough about the wonderful Hotel Campo De Fiori</span>! The location is perfect for sight seeing in Rome. The rooms are typical European sized but beautiful and well-appointed. I was a little concerned about potential noise from the nearby square but with my windows shut I didn't hear a peep. <span class='review-span highlight' data-aligned-summaries='0'>The photos on the web site are accurate and the roof-top deck is a dream</span>! The breakfast was ample with excellent coffee. The best thing about the hotel is the amazing staff - Valentina, Matteo, Barbara, Gabriele, Angelo, Adam, Andrea & Andrew - not only efficient and well-versed on the city, they were kind hearted and lovely. They bent over backwards to make my stay truly special and I can't wait to return!</div><div class='text-box'>My wife and I visited Rome for the first time this past November, and we couldn't be happier with our stay at Hotel Campo de Fiori. <span class='review-span highlight' data-aligned-summaries='0'>The location of the hotel is perfect</span>, 5 minute walk to most of the sites, 20 minute walk to the Vatican City and 20 minutes the other way to the Coliseum. <span class='review-span highlight' data-aligned-summaries='0'>The hotel staff is extremely helpful</span> and make good recommendations on restaurants (La Scalla and The Library were two of our favorites, and will go back for sure to both). The rooms were smaller - but they were loaded with character and the bathrooms were superb.</div><div class='text-box'>After our port intensive Med cruise it was a relief to have such a haven as this hotel to unwind for three nights. We loved our top floor room with it's own terrace and the access to the fabulous large rooftop terrace was right outside our door. The terrace was not only a great 360 degree view of the historic area of Rome but it was such a great social place to join others over wine in the hours leading up to sunset. Magic. <span class='review-span highlight' data-aligned-summaries='0'>The staff is so helpful and made us feel so welcome there</span>. <span class='review-span highlight' data-aligned-summaries='0'>Highly recommend this boutique hotel</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>If you are looking for a place</span> with a central location and superb roofterrace <span class='review-span highlight' data-aligned-summaries='0'>and don't mind being ripped off, this is it</span>. All you need to overlook is the dreadfull breakfast (for instance, the cheese had never seen a cow and the orange juice looks radio-active), the claustrophobic rooms and lack of any extras cq basics in the room (water, toilettries, etc.) that you might expect for the price they charge.</div><div class='text-box'>Thank you very much for your hospitality while we stayed with you during Aug 1 - 4, 2008. <span class='review-span highlight' data-aligned-summaries='0'>My wiffe and I were extremely pleased with the hospitable staff</span>, general cleanliness, quiet rooms, delicious breakfast and all. The overall experience at your hotel was very good and this made Rome even better for us. We would look forward to coming back to Rome to stay in the Hotel Campo de' Fiori. Thank you.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Great hotel with very kind and very helpful personnel</span>. The roof garden is absolutely great! Very nice view over Rome. <span class='review-span highlight' data-aligned-summaries='0'>The rooms are lovely! The location is perfect</span>: at the Campo de' Fiori and near the ancient centre of Rome.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>I would so recommend this hotel for</span> the location, the accomodations, <span class='review-span highlight' data-aligned-summaries='0'>the friendliness of the staff</span> and the amazing roof garden. I thank Travel Advisors for sending us in the right direction in the first place</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is really recommended because the staff are very friendly.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_comm-inst_7_b_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Stayed here for 4 nights with my partner in August '09. The hotel is <span class='review-span highlight' data-aligned-summaries='0'>located 50m around the corner from the famous Campo De 'Fiori</span> which is a wonderful area for eating and drinking as well as having great nightlife. The room itself was beautifully done in a period setting. Bed was large and aircon was fine. <span class='review-span highlight' data-aligned-summaries='0'>Staff extremely passionate and friendly about when and where to see the sights</span>. Location is excellent as only a 5 minute walk to the piazza navona, 10 min walk to the trevi fountain and pantheon and 15 min walk to Vaticano and Colosseum. Also only a 10 min walk to the river and the wonderful trastevere area of eating/nightlife. There is a viewing deck above the top floor which is great to relax and have a few drinks and offers a really nice view of the area as well which was a bonus! No complaints whatsoever here, had a wonderful stay!</div><div class='text-box'>I can't say enough about the wonderful Hotel Campo De Fiori! The location is perfect for sight seeing in Rome. The rooms are typical European sized but beautiful and well-appointed. I was a little concerned about potential noise from the nearby square but with my windows shut I didn't hear a peep. The photos on the web site are accurate and the roof-top deck is a dream! The breakfast was ample with excellent coffee. <span class='review-span highlight' data-aligned-summaries='0'>The best thing about the hotel is the amazing staff</span> - Valentina, Matteo, Barbara, Gabriele, Angelo, Adam, Andrea & Andrew - not only efficient and well-versed on the city, they were kind hearted and lovely. <span class='review-span highlight' data-aligned-summaries='0'>They bent over backwards to make my stay truly special</span> and I can't wait to return!</div><div class='text-box'>My wife and I visited Rome for the first time this past November, and <span class='review-span highlight' data-aligned-summaries='0'>we couldn't be happier with our stay</span> at Hotel Campo de Fiori. The location of the hotel is perfect, 5 minute walk to most of the sites, 20 minute walk to the Vatican City and 20 minutes the other way to the Coliseum. <span class='review-span highlight' data-aligned-summaries='0'>The hotel staff is extremely helpful</span> and make good recommendations on restaurants (La Scalla and The Library were two of our favorites, and will go back for sure to both). The rooms were smaller - but they were loaded with character and the bathrooms were superb.</div><div class='text-box'>After our port intensive Med cruise it was a relief to have such a haven as this hotel to unwind for three nights. We loved our top floor room with it's own terrace and the access to the fabulous large rooftop terrace was right outside our door. The terrace was not only a great 360 degree view of the historic area of Rome but it was such a great social place to join others over wine in the hours leading up to sunset. Magic. <span class='review-span highlight' data-aligned-summaries='0'>The staff is so helpful</span> and made us feel so welcome there. <span class='review-span highlight' data-aligned-summaries='0'>Highly recommend this</span> boutique <span class='review-span highlight' data-aligned-summaries='0'>hotel</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>If you</span> are looking for a place with a central location and superb roofterrace and <span class='review-span highlight' data-aligned-summaries='0'>don't mind being ripped off, this is it</span>. All you need to overlook is the dreadfull breakfast (for instance, the cheese had never seen a cow and the orange juice looks radio-active), the claustrophobic rooms and lack of any extras cq basics in the room (water, toilettries, etc.) that you might expect for the price they charge.</div><div class='text-box'>Thank you very much for your hospitality while we stayed with you during Aug 1 - 4, 2008. <span class='review-span highlight' data-aligned-summaries='0'>My wiffe and I were extremely pleased with the hospitable staff</span>, general cleanliness, quiet rooms, delicious breakfast and all. <span class='review-span highlight' data-aligned-summaries='0'>The overall experience at your hotel was very good</span> and this made Rome even better for us. We would look forward to coming back to Rome to stay in the Hotel Campo de' Fiori. Thank you.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Great hotel with very kind and very helpful personnel</span>. The roof garden is absolutely great! <span class='review-span highlight' data-aligned-summaries='0'>Very nice view over Rome</span>. The rooms are lovely! The location is perfect: at the Campo de' Fiori and near the ancient centre of Rome.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>I would so recommend this hotel for the location</span>, the accomodations, <span class='review-span highlight' data-aligned-summaries='0'>the friendliness of the staff</span> and the amazing roof garden. I thank Travel Advisors for sending us in the right direction in the first place</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is highly recommended and most of the staff is very helpful.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_0_a_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Our company has <span class='review-span highlight' data-aligned-summaries='0'>rented conference rooms</span> and held many meetings <span class='review-span highlight' data-aligned-summaries='0'>and corporate events</span> at Place D'Armes and we were extremely satisfied with their service. There was always someone to greet and help with the setup and make sure we have everything we needed. More importantly, technical service was efficient and really went out of their way (even when it is your own equipment). <span class='review-span highlight' data-aligned-summaries='2'>The rooms are</span> clean and <span class='review-span highlight' data-aligned-summaries='2'>beautiful</span> and staff is great. The only negative thing is that they charge for the conference room for the whole day regardless if you only need it for half a day or an hour.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>The hotel is located</span> in the OLD Town part of Montreal by the Notre Dame Cathedral and <span class='review-span highlight' data-aligned-summaries='1'>short walking distance to the rivers edge</span>. This hotel was a great value and the staff and location were excellent. <span class='review-span highlight' data-aligned-summaries='1'>There are 2 restaurants in the hotel</span> that are very highly rated. The staff and service were excellent. <span class='review-span highlight' data-aligned-summaries='2'>The rooms are specious and nicely decorated</span> <span class='review-span highlight' data-aligned-summaries='3'>The bathrooms are very nice with very big bathtubs</span>. <span class='review-span highlight' data-aligned-summaries='5'>There is also a roof terrace to have drinks</span> and enjoy the views. Couldn't use because it was raining.</div><div class='text-box'>We just returned from a mid-winter weekend get away to Montreal. <span class='review-span highlight' data-aligned-summaries='1'>We picked this hotel due to its location</span> in Old Montreal, <span class='review-span highlight' data-aligned-summaries='1'>close to restaurants</span>, Notre Dame and the cobblestone streets. From the moment we arrived when the valet service looked after the car until we checked out the service of the staff was top notch. <span class='review-span highlight' data-aligned-summaries='2'>The rooms were nice with hardwood floors and exposed brick</span>. The bar, Suite701, is the perfect spot for a night cap. We would definately return.</div><div class='text-box'>Absolutely one of the best places to stay while visiting old city Montreal. Staff was very friendly and accommodating. <span class='review-span highlight' data-aligned-summaries='5'>The rooftop bar</span> and restaurant <span class='review-span highlight' data-aligned-summaries='5'>was beautiful</span> with a view of Notre Dame Basilica. We <span class='review-span highlight' data-aligned-summaries='2'>stayed in Junior Suite 3402 and really appreciated the</span> ambiance and <span class='review-span highlight' data-aligned-summaries='2'>decor</span>. If I were to visit again I would think of staying in 3602 (second digit is the floor). The street noise was not bad however you will have early morning local truck deliveries.</div><div class='text-box'>Lovely hotel in an historic building with a fantastic location. Nice rooms, very friendly and service-oriented staff. <span class='review-span highlight' data-aligned-summaries='4'>Great little touches like chocolates on the pillow</span> and turn-down service. Very helpful concierge. I was in Laval for business and went to Montreal for the weekend. I <span class='review-span highlight' data-aligned-summaries='1'>walked to restaurants</span>, bars, <span class='review-span highlight' data-aligned-summaries='1'>the river</span>, <span class='review-span highlight' data-aligned-summaries='1'>shopping</span>. Close enough to walk to Mont Royal.</div><div class='text-box'>Stayed in one of the Suites which we got using one of the major credit card upgrades. Amazing bathroom with rain shower and a <span class='review-span highlight' data-aligned-summaries='3'>large tub</span>. Modern room, clean bathroom, great service, great beds and blankets. <span class='review-span highlight' data-aligned-summaries='6'>The only thing that it lacks it is a pool</span> but it can be overlooked. Location is great, the old Montreal.</div><div class='text-box'>Le Place D'Armes is an amazingly elegant hotel with staff that have a beautiful authenticity about them. The comfort and design of the rooms is worth the price and <span class='review-span highlight' data-aligned-summaries='0'>is a great fit for both business or personal occasions</span>. If you are planning a trip to Montreal you simply need to check out this hotel.</div><div class='text-box'>Well I have nothing but good things to say about this hotel, it was just wonderful in every way. <span class='review-span highlight' data-aligned-summaries='1'>Perfect location</span>, spotless, nice staff. Possibly the nicest place I have ever stayed. If you go to montreal and dont stay here you're missing out!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel has conference rooms available to rent out for conferences and corporate events.</span> <span id="1" class="summary-sentence">The location of this hotel makes it easy to access restaurants, the river and shops.</span> <span id="2" class="summary-sentence">The rooms are a good size and well decorated.</span> <span id="3" class="summary-sentence">The bathroom in the hotel was large and with a large bathtub.</span> <span id="4" class="summary-sentence">Small touches like a chocolate on the pillow are also nice.</span> <span id="5" class="summary-sentence">The hotel has a roof terrace for drinks.</span> <span id="6" class="summary-sentence">Unfortunately the hotel is missing the availability of a pool.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_0_a_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Our company has rented conference rooms and held many meetings and corporate events at Place D'Armes and <span class='review-span highlight' data-aligned-summaries='1'>we were extremely satisfied</span> with their service. <span class='review-span highlight' data-aligned-summaries='0'>There was always someone to greet and help</span> with the setup and make sure we have everything we needed. More importantly, <span class='review-span highlight' data-aligned-summaries='0'>technical service was efficient and really went out of their way</span> (even when it is your own equipment). <span class='review-span highlight' data-aligned-summaries='3'>The rooms are clean and beautiful</span> and staff is great. The only negative thing is that they charge for the conference room for the whole day regardless if you only need it for half a day or an hour.</div><div class='text-box'>The hotel is located in the OLD Town part of Montreal by the Notre Dame Cathedral and short walking distance to the rivers edge. This hotel was a great value and the <span class='review-span highlight' data-aligned-summaries='0 1'>staff and location were excellent</span>. <span class='review-span highlight' data-aligned-summaries='5'>There are 2 restaurants in the hotel that are very highly rated</span>. The staff and service were excellent. <span class='review-span highlight' data-aligned-summaries='0 1 3'>The rooms</span> <span class='review-span highlight' data-aligned-summaries='0 1'>are specious</span> and <span class='review-span highlight' data-aligned-summaries='3'>nicely decorated</span> <span class='review-span highlight' data-aligned-summaries='4'>The bathrooms are very nice with very big bathtubs</span>. <span class='review-span highlight' data-aligned-summaries='5'>There is also a roof terrace to have drinks</span> and enjoy the views. Couldn't use because it was raining.</div><div class='text-box'>We just returned from a mid-winter weekend get away to Montreal. We picked this hotel due to its <span class='review-span highlight' data-aligned-summaries='2'>location</span> in Old Montreal, <span class='review-span highlight' data-aligned-summaries='2'>close to restaurants</span>, Notre Dame and the cobblestone streets. From the moment we arrived when the valet service looked after the car until we checked out the <span class='review-span highlight' data-aligned-summaries='0'>service of the staff was top notch</span>. <span class='review-span highlight' data-aligned-summaries='3'>The</span> <span class='review-span highlight' data-aligned-summaries='0 3'>rooms were nice</span> <span class='review-span highlight' data-aligned-summaries='3'>with hardwood floors and exposed brick</span>. <span class='review-span highlight' data-aligned-summaries='5'>The bar, Suite701, is the perfect spot for a night cap</span>. <span class='review-span highlight' data-aligned-summaries='1'>We would definately return</span>.</div><div class='text-box'>Absolutely <span class='review-span highlight' data-aligned-summaries='0 1'>one of the best places to stay</span> while visiting old city Montreal. Staff was very friendly and accommodating. <span class='review-span highlight' data-aligned-summaries='5'>The rooftop bar and restaurant was beautiful</span> with a view of Notre Dame Basilica. We stayed in Junior Suite 3402 and <span class='review-span highlight' data-aligned-summaries='3'>really appreciated the ambiance and decor</span>. If I were to visit again I would think of staying in 3602 (second digit is the floor). The street noise was not bad however you will have early morning local truck deliveries.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Lovely hotel</span> in an historic building with a <span class='review-span highlight' data-aligned-summaries='0'>fantastic location</span>. <span class='review-span highlight' data-aligned-summaries='0'>Nice rooms</span>, <span class='review-span highlight' data-aligned-summaries='0'>very friendly and service-oriented staff</span>. <span class='review-span highlight' data-aligned-summaries='0 4'>Great little touches</span> <span class='review-span highlight' data-aligned-summaries='4'>like</span> <span class='review-span highlight' data-aligned-summaries='4 5'>chocolates on the pillow</span> and turn-down service. Very helpful concierge. I was in Laval for business and went to Montreal for the weekend. <span class='review-span highlight' data-aligned-summaries='2'>I walked to restaurants, bars</span>, the river, shopping. <span class='review-span highlight' data-aligned-summaries='2'>Close enough to walk to Mont Royal</span>.</div><div class='text-box'>Stayed in one of the Suites which we got using one of the major credit card upgrades. <span class='review-span highlight' data-aligned-summaries='4'>Amazing bathroom with rain shower and a large tub.</span> <span class='review-span highlight' data-aligned-summaries='0 3'>Modern room</span>, clean bathroom, great service, <span class='review-span highlight' data-aligned-summaries='3'>great beds and blankets</span>. The <span class='review-span highlight' data-aligned-summaries='6'>only thing that it lacks it is a pool</span> but it can be overlooked. <span class='review-span highlight' data-aligned-summaries='0'>Location is great</span>, the old Montreal.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Le Place D'Armes is an amazingly elegant hotel</span> with staff that have a beautiful authenticity about them. <span class='review-span highlight' data-aligned-summaries='3'>The comfort and design of the rooms</span> is worth the price and <span class='review-span highlight' data-aligned-summaries='3'>is a great fit for both business or personal occasions</span>. If you are planning a trip to Montreal you simply need to check out this hotel.</div><div class='text-box'>Well I have nothing but good things to say about this hotel, <span class='review-span highlight' data-aligned-summaries='0'>it was just wonderful in every way</span>. Perfect location, spotless, nice staff. <span class='review-span highlight' data-aligned-summaries='0 1'>Possibly the nicest place</span> I have ever stayed. If you go to montreal and dont stay here you're missing out!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a lovely place that was wonderful in all ways.</span> <span id="1" class="summary-sentence">It is definitely a place you will want to return again.</span> <span id="2" class="summary-sentence">The hotel is in walking condition to local restaurants, bars and even the Mont Royal.</span> <span id="3" class="summary-sentence">Beautifully decorated hotel rooms that are well designed and comfortable for all occasions.</span> <span id="4" class="summary-sentence">Very spacious in size with luxurious amenities in the bathroom, and it's the little touches such as chocolates on the pillow that make these rooms even more memorable.</span> <span id="5" class="summary-sentence">The hotel features some good places to have drinks and food, and there were even great chocolates left on the pillow.</span> <span id="6" class="summary-sentence">This hotel could do with a pool as that is the only thing it is really lacking.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_0_a_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Our company has rented conference rooms and held many meetings and corporate events <span class='review-span highlight' data-aligned-summaries='0'>at Place D'Armes</span> and <span class='review-span highlight' data-aligned-summaries='0 11'>we were extremely satisfied with their service</span>. There was always someone to greet and help with the setup and make sure we have everything we needed. More importantly, technical service was efficient and really went out of their way (even when it is your own equipment). <span class='review-span highlight' data-aligned-summaries='7'>The rooms are</span> clean and <span class='review-span highlight' data-aligned-summaries='7'>beautiful</span> and <span class='review-span highlight' data-aligned-summaries='10'>staff is great</span>. The only negative thing is that they charge for the conference room for the whole day regardless if you only need it for half a day or an hour.</div><div class='text-box'>The hotel is located <span class='review-span highlight' data-aligned-summaries='6'>in the OLD Town part of Montreal by the Notre Dame Cathedral</span> and <span class='review-span highlight' data-aligned-summaries='5'>short walking distance to the rivers edge</span>. <span class='review-span highlight' data-aligned-summaries='3'>This hotel was a great</span> value and <span class='review-span highlight' data-aligned-summaries='10 11'>the staff</span> and <span class='review-span highlight' data-aligned-summaries='6'>location</span> <span class='review-span highlight' data-aligned-summaries='6 10 11'>were excellent</span>. <span class='review-span highlight' data-aligned-summaries='12'>There are 2 restaurants in the hotel that are very highly rated</span>. <span class='review-span highlight' data-aligned-summaries='0'>The staff and service were excellent</span>. <span class='review-span highlight' data-aligned-summaries='0 1 2 7'>The rooms are specious and nicely decorated</span> <span class='review-span highlight' data-aligned-summaries='8'>The bathrooms are very nice with very big bathtubs</span>. <span class='review-span highlight' data-aligned-summaries='12'>There is also a roof terrace to have drinks and enjoy the views</span>. Couldn't use because it was raining.</div><div class='text-box'>We just returned from a mid-winter weekend get away to Montreal. We picked this hotel due to <span class='review-span highlight' data-aligned-summaries='6'>its location in Old Montreal, close to restaurants, Notre Dame and the cobblestone streets</span>. <span class='review-span highlight' data-aligned-summaries='11'>From the moment we arrived when</span> <span class='review-span highlight' data-aligned-summaries='0 11'>the valet service looked after the car</span> <span class='review-span highlight' data-aligned-summaries='11'>until we checked out the service of</span> <span class='review-span highlight' data-aligned-summaries='0 10 11'>the staff was top notch</span>. <span class='review-span highlight' data-aligned-summaries='2 7'>The rooms were nice</span> <span class='review-span highlight' data-aligned-summaries='2'>with hardwood floors and exposed brick</span>. <span class='review-span highlight' data-aligned-summaries='0'>The bar, Suite701, is the perfect spot for a night cap</span>. We would definately return.</div><div class='text-box'>Absolutely one of the best places to stay while visiting old city Montreal. <span class='review-span highlight' data-aligned-summaries='0 10 11'>Staff was very friendly and accommodating</span>. <span class='review-span highlight' data-aligned-summaries='0 6 12'>The rooftop</span> <span class='review-span highlight' data-aligned-summaries='0 12'>bar and restaurant was beautiful with a</span> <span class='review-span highlight' data-aligned-summaries='0 6 12'>view of Notre Dame Basilica</span>. <span class='review-span highlight' data-aligned-summaries='2 7'>We stayed in Junior Suite 3402 and really appreciated the</span> <span class='review-span highlight' data-aligned-summaries='2'>ambiance and</span> <span class='review-span highlight' data-aligned-summaries='2 7'>decor</span>. If I were to visit again I would think of staying in 3602 (second digit is the floor). The street noise was not bad however you will have early morning local truck deliveries.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1 3'>Lovely hotel</span> <span class='review-span highlight' data-aligned-summaries='0 1'>in an historic building</span> <span class='review-span highlight' data-aligned-summaries='0'>with</span> <span class='review-span highlight' data-aligned-summaries='0 6'>a fantastic location</span>. <span class='review-span highlight' data-aligned-summaries='2 7'>Nice rooms</span>, <span class='review-span highlight' data-aligned-summaries='10'>very friendly and service-oriented staff</span>. <span class='review-span highlight' data-aligned-summaries='9 11'>Great little touches like chocolates on the pillow and turn-down service</span>. Very helpful concierge. I was in Laval <span class='review-span highlight' data-aligned-summaries='3'>for business</span> and went to Montreal for the weekend. <span class='review-span highlight' data-aligned-summaries='4 5'>I walked to</span> <span class='review-span highlight' data-aligned-summaries='4'>restaurants, bars</span>, <span class='review-span highlight' data-aligned-summaries='5'>the river</span>, <span class='review-span highlight' data-aligned-summaries='4'>shopping</span>. <span class='review-span highlight' data-aligned-summaries='5'>Close enough to walk to Mont Royal</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='2'>Stayed in one of the Suites</span> which we got <span class='review-span highlight' data-aligned-summaries='2'>using</span> one of the major <span class='review-span highlight' data-aligned-summaries='2'>credit card upgrades</span>. <span class='review-span highlight' data-aligned-summaries='8'>Amazing bathroom with rain shower and a large tub</span>. <span class='review-span highlight' data-aligned-summaries='0 2 3 7'>Modern room</span>,<span class='review-span highlight' data-aligned-summaries='0 3 7'> clean bathroom</span>,<span class='review-span highlight' data-aligned-summaries='0 3'></span> <span class='review-span highlight' data-aligned-summaries='0 3 10 11'>great service</span>, great beds and blankets. The only thing that it lacks it is a pool but it can be overlooked. <span class='review-span highlight' data-aligned-summaries='6'>Location is great</span>, the old Montreal.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>Le Place D'Armes is an amazingly elegant hotel</span> with <span class='review-span highlight' data-aligned-summaries='10 11'>staff that have a beautiful authenticity about them</span>. <span class='review-span highlight' data-aligned-summaries='2 7'>The comfort and design of the rooms is worth the price</span> and <span class='review-span highlight' data-aligned-summaries='3'>is a great fit for</span> both <span class='review-span highlight' data-aligned-summaries='3'>business</span> or personal occasions. If you are planning a trip to Montreal you simply need to check out this hotel.</div><div class='text-box'>Well <span class='review-span highlight' data-aligned-summaries='0'>I have nothing but good things to say about this hotel</span>, <span class='review-span highlight' data-aligned-summaries='0'>it was just wonderful in every way</span>. <span class='review-span highlight' data-aligned-summaries='6'>Perfect location</span>, spotless, <span class='review-span highlight' data-aligned-summaries='10'>nice staff.</span> Possibly the nicest place I have ever stayed. If you go to montreal and dont stay here you're missing out!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel, Le Place D'Armes, is amazing.</span> <span id="1" class="summary-sentence">It is elegant.</span> <span id="2" class="summary-sentence">The rooms are very nice and upgrades are available.</span> <span id="3" class="summary-sentence">This is a great place to stay on business as well.</span> <span id="4" class="summary-sentence">The hotel is within easy walking distance to restaurants, bars, and shopping.</span> <span id="5" class="summary-sentence">You can also walk to the Mont Royal or the river.</span> <span id="6" class="summary-sentence">Fantastic location.</span> <span id="7" class="summary-sentence">The rooms are nice and spacious with good decoration too.</span> <span id="8" class="summary-sentence">The bathrooms are really great because there are massive bathtubs and lovely rainfall showers.</span> <span id="9" class="summary-sentence">A nice touch is the turn-down service with cute chocolates left on the pillows.</span> <span id="10" class="summary-sentence">The staff at Le Place D'Armes is great.</span> <span id="11" class="summary-sentence">Really good service overall.</span> <span id="12" class="summary-sentence">The two restaurants at this hotel are highly recommended, and there is also the option to eat and have a few drinks on the roof terrace to enjoy the views.</span> </div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_0_b_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>My stay at the Fairmont Queen Elizabeth didn't exceed my expectations, and also didn't disappoint. It was a nice hotel, but didn't blow me away. <span class='review-span highlight' data-aligned-summaries='1 2'>My room was slightly smaller than average</span> <span class='review-span highlight' data-aligned-summaries='1'>although it was clean</span> and with <span class='review-span highlight' data-aligned-summaries='3'>a slightly more modern decor</span> than a typical Fairmont. <span class='review-span highlight' data-aligned-summaries='6'>My one gripe is with the toilet</span>. It's basically the kind of toilet you'd find in a public bathroom, with a flush that's located under the counter and hard to get to<span class='review-span highlight' data-aligned-summaries='6'>. I do enjoy the Miller Harris citron toiletries, so that is a plus</span>. Overall I'd rather be more centrally located to the main downtown area or closer to Old Montreal. It was fine for business travel and a short trip, but if I was visiting for vacation with the same budget, I'd likely go elsewhere.</div><div class='text-box'>I stayed here whilst attending a conference in the hotel. Arriving from Toronto by train was just about as convenient as it could possibly be since the station is directly beneath the hotel. <span class='review-span highlight' data-aligned-summaries='1'>The room was fine</span>, with <span class='review-span highlight' data-aligned-summaries='3'>a fabulous view</span> up the hill to Mont Royal from the top floor. Service from the check-in staff was polite and efficient and they rapidly corrected some incorrect charges for using the mini bar which I had not done. The hotel does look a little dated and <span class='review-span highlight' data-aligned-summaries='0'>not much of the glamour from when John and Yoko staged their bed in remains</span>, but all in all it's a good value and well-located place to stay in Montreal. Make sure you join the President's club via the fairmont website before arriving so that you get free wi-fi access.</div><div class='text-box'>This is a very nice older, upper end, well maintained hotel. The front desk and concierge staff were very helpful and the housekeeping staff exceptionally friendly and accomodating. <span class='review-span highlight' data-aligned-summaries='0'>John Lennon and Yoko Ono had a suite on the 16th floor</span> that has a plaque that says "Give Peace A Chance". The <span class='review-span highlight' data-aligned-summaries='1'>bed was comfortable</span>. <span class='review-span highlight' data-aligned-summaries='2'>The</span> <span class='review-span highlight' data-aligned-summaries='1 2'>bathroom was too small</span>. I personally hate any bathroom where my knees block the door from closing when seated. I continually <span class='review-span highlight' data-aligned-summaries='6'>worried that my toiletries would slide off the small shelf for toiletries into the toilet</span> or jewlery would head south for the sink. I had some allergies which I suspect may have been an a/c ducting issue. Beyond these comments it is a nice hotel with very pleasant and helpful staff.</div><div class='text-box'>We spent a night at the Queen E with our grandchildren - it is a very nice place to stay - somewhat expensive but right in the center of Montreal. <span class='review-span highlight' data-aligned-summaries='3'>We</span> <span class='review-span highlight' data-aligned-summaries='1 3'>upgraded to a suite which turned out to be very nice</span>. <span class='review-span highlight' data-aligned-summaries='4'>The restuarant serves great breakfasts and dinners - again a bit expensive but very well done (the liver is great</span>!). We visited the Biodome (lots of fun) and wondered around old Montreal area. Montreal has some great shopping areas we found.</div><div class='text-box'>I have been to this hotel countless time as part of frequent business travel. The location is great for business (right in financial centre) and for leisure (5 min walk to St Catherine Street where the shopping and restaurants are). <span class='review-span highlight' data-aligned-summaries='0'>I had an encounter of very bad service once</span>. I took the matter to customer service aftewards <span class='review-span highlight' data-aligned-summaries='0'>and was impressed they listened and offered to upgrade my room</span> next time I stay. Overall it is a good hotel and I would recommand to others.</div><div class='text-box'>I recently stayed a w.end at this Hotel,and <span class='review-span highlight' data-aligned-summaries='5'>I could not beleive that</span> at the price they charge <span class='review-span highlight' data-aligned-summaries='5'>they put the coffee maker and the coffee as part of the mini bar!come on</span>,most hotel,leave the coffee maker and the coffee free of charge in the room!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='3'>Was able to upgrade to the Gold floor and worth every penny</span>. <span class='review-span highlight' data-aligned-summaries='4'>Had dinner</span> at the Beaver club and <span class='review-span highlight' data-aligned-summaries='4'>enjoyed the excellent service</span>. <span class='review-span highlight' data-aligned-summaries='0'>It made our stay very memorable</span>. <span class='review-span highlight' data-aligned-summaries='0'>The hotel is beautiful in the winter</span>, a magical place.</div><div class='text-box'>I've stayed here a number of times and this visit was no exception. I find the staff helpful and enjoy the history of the hotel. As well I find the location very convenient.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel is especially memorable during a winter stay.</span> <span id="1" class="summary-sentence">The room was okay</span> <span id="2" class="summary-sentence">but on the small side including the bathroom as well.</span> <span id="3" class="summary-sentence">After upgrading rooms to a suite this was absolutely fine and had a great view with modern decor.</span> <span id="4" class="summary-sentence">Whilst the breakfast and dinners are both quite expensive they're really great and tasty.</span> <span id="5" class="summary-sentence">But a coffee maker and coffee was not free of charge, which is unusual.</span> <span id="6" class="summary-sentence">Whilst the toiletries were really great there was an issue with the toilet.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_0_b_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>My stay at the Fairmont Queen Elizabeth didn't exceed my expectations, and also didn't disappoint</span>. <span class='review-span highlight' data-aligned-summaries='1'>It was a nice hotel</span>, but <span class='review-span highlight' data-aligned-summaries='1'>didn't blow me away</span>. <span class='review-span highlight' data-aligned-summaries='3'>My room</span> was slightly smaller than average although it <span class='review-span highlight' data-aligned-summaries='3'>was clean and with a slightly more modern decor</span> than a typical Fairmont. My one gripe is with the toilet. It's basically the kind of toilet you'd find in a public bathroom, with a flush that's located under the counter and hard to get to. <span class='review-span highlight' data-aligned-summaries='7'>I do enjoy the Miller Harris citron toiletries</span>, <span class='review-span highlight' data-aligned-summaries='7'>so that is a plus</span>. Overall <span class='review-span highlight' data-aligned-summaries='2'>I'd rather be more centrally located to the main downtown area or closer to Old Montreal</span>. It was fine for business travel and a short trip, but if I was visiting for vacation <span class='review-span highlight' data-aligned-summaries='6'>with the same budget, I'd likely go elsewhere</span>.</div><div class='text-box'>I stayed here whilst attending a conference in the hotel. Arriving from Toronto by train was <span class='review-span highlight' data-aligned-summaries='2'>just about as convenient as it could possibly be since the station is directly beneath the hotel</span>. <span class='review-span highlight' data-aligned-summaries='1'>The room was fine</span>, with a fabulous view up the hill to Mont Royal from the top floor. Service from the check-in <span class='review-span highlight' data-aligned-summaries='1'>staff was polite and efficient</span> and they rapidly corrected some incorrect charges for using the mini bar which I had not done. <span class='review-span highlight' data-aligned-summaries='0 1'>The hotel does look a little dated and not much of the glamour from when John and Yoko staged their bed in remains</span>,<span class='review-span highlight' data-aligned-summaries='0'> but all in all</span> <span class='review-span highlight' data-aligned-summaries='0 1 6'>it's a good value</span> <span class='review-span highlight' data-aligned-summaries='0 1'>and well-located place to stay in</span> <span class='review-span highlight' data-aligned-summaries='0'>Montreal</span>. Make sure you join the President's club via the fairmont website before arriving so that you get free wi-fi access.</div><div class='text-box'>This is a very nice older, upper end, well maintained hotel. The front desk and concierge staff were very helpful and the housekeeping staff exceptionally friendly and accomodating. John Lennon and Yoko Ono had a suite on the 16th floor that has a plaque that says "Give Peace A Chance". The bed was comfortable. <span class='review-span highlight' data-aligned-summaries='3'>The bathroom was too small</span>. I personally hate any bathroom where my knees block the door from closing when seated. I continually worried that my toiletries would slide off the small shelf for toiletries into the toilet or jewlery would head south for the sink. I had some allergies which I suspect may have been an a/c ducting issue. Beyond these comments <span class='review-span highlight' data-aligned-summaries='1'>it is a nice hotel</span> with very pleasant and helpful staff.</div><div class='text-box'>We spent a night at the Queen E with our grandchildren - it is a very nice place to stay - somewhat expensive but <span class='review-span highlight' data-aligned-summaries='2'>right in the center of Montreal</span>. We upgraded to a suite which <span class='review-span highlight' data-aligned-summaries='0'>turned out to be very nice</span>. <span class='review-span highlight' data-aligned-summaries='4'>The restuarant serves great breakfasts and dinners</span> - again <span class='review-span highlight' data-aligned-summaries='0 5'>a bit expensive</span> <span class='review-span highlight' data-aligned-summaries='0 6'>but very well done</span> (the liver is great!). We visited the Biodome (lots of fun) and wondered around old Montreal area. Montreal has some great shopping areas we found.</div><div class='text-box'>I have been to this hotel countless time as part of frequent business travel. <span class='review-span highlight' data-aligned-summaries='2'>The location is great for business</span> (right in financial centre) <span class='review-span highlight' data-aligned-summaries='2'>and for leisure</span> (<span class='review-span highlight' data-aligned-summaries='2'>5 min walk to St Catherine Street</span> where the shopping and restaurants are). I had an encounter of very bad service once. I took the matter to customer service aftewards and was impressed they listened and offered to upgrade my room next time I stay. <span class='review-span highlight' data-aligned-summaries='0'>Overall it is a good hotel</span> and I would recommand to others.</div><div class='text-box'>I recently stayed a w.end at this Hotel,and I <span class='review-span highlight' data-aligned-summaries='0 5'>could not beleive that at the price they charge</span> they put the coffee maker and the coffee as part of the mini bar!come on,most hotel,leave the coffee maker and the coffee free of charge in the room!</div><div class='text-box'>Was able to upgrade to the Gold floor and <span class='review-span highlight' data-aligned-summaries='5 6'>worth every penny</span>. <span class='review-span highlight' data-aligned-summaries='4'>Had dinner at the Beaver club and enjoyed the excellent service</span>. It made our stay very memorable. <span class='review-span highlight' data-aligned-summaries='0 1'>The hotel is beautiful in the winter, a magical place</span>.</div><div class='text-box'>I've stayed here a number of times and this visit was no exception. I <span class='review-span highlight' data-aligned-summaries='0'>find the staff helpful and</span> enjoy the history of the hotel. As well I find <span class='review-span highlight' data-aligned-summaries='0 2'>the location very convenient</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is neither a disappointing hotel or one that will exceed expectations.</span> <span id="1" class="summary-sentence">It can be magical in the winter time and it is definitely a nice hotel, it just won't blow you away.</span> <span id="2" class="summary-sentence">A very convenient location.</span> <span id="3" class="summary-sentence">The bathrooms in the hotel room are quite small but the room itself is clean and modern .</span> <span id="4" class="summary-sentence">The hotel serves very good food at both breakfast and dinner.</span> <span id="5" class="summary-sentence">It is a little expensive</span> <span id="6" class="summary-sentence">but you definitely get what you pay for.</span> <span id="7" class="summary-sentence">The hotel uses Miller Harris citron toiletries which is a nice touch.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_0_b_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>My stay at the Fairmont Queen Elizabeth didn't exceed my expectations, and also didn't disappoint. <span class='review-span highlight' data-aligned-summaries='0'>It was a nice hotel</span>, but didn't blow me away. <span class='review-span highlight' data-aligned-summaries='3'>My room was slightly smaller than average</span> although it was clean and with a slightly more modern decor than a typical Fairmont. My one gripe is with <span class='review-span highlight' data-aligned-summaries='3'>the toilet</span>. It's basically the kind of toilet you'd find in a public bathroom, <span class='review-span highlight' data-aligned-summaries='3'>with a flush that's located under the counter and hard to get to</span>. I do enjoy the Miller Harris citron toiletries, so that is a plus. Overall I'd rather be more centrally located to the main downtown area or closer to Old Montreal. It was fine for business travel and a short trip, but <span class='review-span highlight' data-aligned-summaries='0'>if I was visiting for vacation with the same budget, I'd likely go elsewhere</span>.</div><div class='text-box'>I stayed here whilst attending a conference in the hotel. <span class='review-span highlight' data-aligned-summaries='2'>Arriving from Toronto by train was just about as convenient as it could possibly be since the station is directly beneath the hotel</span>. <span class='review-span highlight' data-aligned-summaries='0'>The room was fine</span>, with a fabulous view up the hill to Mont Royal from the top floor. <span class='review-span highlight' data-aligned-summaries='0'>Service from</span> the check-in staff <span class='review-span highlight' data-aligned-summaries='0'>was polite and efficient</span> and they rapidly corrected some incorrect charges for using the mini bar which I had not done. The hotel does look a little dated and not much of the glamour from when John and Yoko staged their bed in remains, but <span class='review-span highlight' data-aligned-summaries='0'>all in all it's a good value and</span> <span class='review-span highlight' data-aligned-summaries='0 2'>well-located</span> <span class='review-span highlight' data-aligned-summaries='2'>place to stay in Montreal</span>. Make sure you join the President's club via the fairmont website before arriving so that you get free wi-fi access.</div><div class='text-box'>This is a <span class='review-span highlight' data-aligned-summaries='0'>very nice</span> older, upper end, <span class='review-span highlight' data-aligned-summaries='0'>well maintained hotel</span>. The front desk and concierge staff were very helpful and the housekeeping staff exceptionally friendly and accomodating. John Lennon and Yoko Ono had a suite on the 16th floor that has a plaque that says "Give Peace A Chance". The bed was comfortable. <span class='review-span highlight' data-aligned-summaries='3'>The bathroom was too small</span>. I personally hate any <span class='review-span highlight' data-aligned-summaries='3'>bathroom where my knees block the door from closing when seated</span>. I continually worried that my toiletries would slide off the small shelf for toiletries into the toilet or jewlery would head south for the sink. I had some allergies which I suspect may have been an a/c ducting issue. Beyond these comments it is a nice hotel with very pleasant and helpful staff.</div><div class='text-box'>We spent a night at the Queen E with our grandchildren - <span class='review-span highlight' data-aligned-summaries='0'>it is a very nice place to stay</span> - <span class='review-span highlight' data-aligned-summaries='0'>somewhat expensive</span> but <span class='review-span highlight' data-aligned-summaries='1'>right in the center</span> of Montreal. We <span class='review-span highlight' data-aligned-summaries='4'>upgraded to a suite which turned out to be very nice</span>. The restuarant serves <span class='review-span highlight' data-aligned-summaries='5'>great breakfasts and dinners</span> - again <span class='review-span highlight' data-aligned-summaries='6'>a bit expensive</span> but very well done (the liver is great!). We visited the Biodome (lots of fun) and wondered around old Montreal area. Montreal has some great shopping areas we found.</div><div class='text-box'>I have been to this hotel countless time as part of frequent business travel. <span class='review-span highlight' data-aligned-summaries='2'>The location is great for business (right in financial centre) and for leisure (5 min walk to St Catherine Street where the shopping and restaurants are)</span>. I had an encounter of very bad service once. I took the matter to customer service aftewards and was impressed they listened and offered to upgrade my room next time I stay. <span class='review-span highlight' data-aligned-summaries='0'>Overall it is a good hotel</span> and <span class='review-span highlight' data-aligned-summaries='0'>I would recommand to others</span>.</div><div class='text-box'>I recently stayed a w.end at this Hotel,and <span class='review-span highlight' data-aligned-summaries='0 6'>I could not beleive that at the price they charge</span> they put <span class='review-span highlight' data-aligned-summaries='6'>the coffee maker and the coffee as part of the mini bar!come on,most hotel,leave the coffee maker and the coffee free of charge in the room</span>!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Was able to</span> <span class='review-span highlight' data-aligned-summaries='0 4'>upgrade to the Gold floor and worth every penny</span>. <span class='review-span highlight' data-aligned-summaries='5'>Had dinner at the Beaver club and enjoyed the excellent service</span>. <span class='review-span highlight' data-aligned-summaries='0'>It made our stay very memorable</span>. The hotel is beautiful in the winter, a magical place.</div><div class='text-box'>I've stayed here a number of times and this visit was no exception. I find <span class='review-span highlight' data-aligned-summaries='0'>the staff helpful</span> and enjoy the history of the hotel. As well I find <span class='review-span highlight' data-aligned-summaries='2'>the</span> <span class='review-span highlight' data-aligned-summaries='0 2'>location very convenient</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a generally good hotel that is slightly expensive but highly recommended for a memorable visit to the area.</span> <span id="1" class="summary-sentence">It is also in close proximity to the city centre, so a lovely place to go for nice walks.</span> <span id="2" class="summary-sentence">This hotel is located in a really convenient area here.</span> <span id="3" class="summary-sentence">The rooms at this hotel are smaller than expected and the toilets are inadequately sized and too small for comfortable use.</span> <span id="4" class="summary-sentence">An upgrade might be an option to consider though as the suites are very nice.</span> <span id="5" class="summary-sentence">The quality of the breakfasts and dinners at this hotel are great.</span> <span id="6" class="summary-sentence">However, they are quite expensive and the coffee in the rooms don't come free as charge like most other hotels.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_3_a_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>I travel to Vancouver regularly on business and always stay at the Sutton Place Hotel. It is truly a top end <span class='review-span highlight' data-aligned-summaries='0'>hotel</span> from the <span class='review-span highlight' data-aligned-summaries='0'>well appointed lobby</span>, excellent restaurant, beautiful guest suites and most important of all 5 star pulse customer service. Every staff member greets you with a pleasant smile and no request is considered too small. I stay in La Grande Residence where <span class='review-span highlight' data-aligned-summaries='3'>the one and two bedroom fully equipped suites make your stay, wether it is only a few days or a couple of weeks</span>, relaxed and <span class='review-span highlight' data-aligned-summaries='3'>stress-free</span>. The staff are so customer oriented that they always greet yu by name when you call the front desk and make you feel welcome on arrival by saying "Welcome back to the Sutton Place". <span class='review-span highlight' data-aligned-summaries='4'>The beds are very comfortable</span>, <span class='review-span highlight' data-aligned-summaries='4'>you get an excellent sleep</span>. The hotel is the preferred location for many Hollywood actors and crew shooting in Vancouver but the hotel staff treat every guest just as if they were an Oscar winner!</div><div class='text-box'>Sutton Place hotel was a great stay! <span class='review-span highlight' data-aligned-summaries='2'>The location at Burrard and Robson makes it super convenient for shopping and eating</span> - lots of great locations around. Service was spot-on from all the staff. <span class='review-span highlight' data-aligned-summaries='0 1 5'>The hotel is</span> <span class='review-span highlight' data-aligned-summaries='1 5'>a bit old</span> but everything <span class='review-span highlight' data-aligned-summaries='5'>was</span> still <span class='review-span highlight' data-aligned-summaries='0'>clean</span> and <span class='review-span highlight' data-aligned-summaries='5'>renovated</span>. <span class='review-span highlight' data-aligned-summaries='3'>Rooms were roomy</span> and <span class='review-span highlight' data-aligned-summaries='4'>beds really comfortable</span>. I only have 2 complaints - <span class='review-span highlight' data-aligned-summaries='0 8'>the parking is outrageous (40$ per night)</span>,<span class='review-span highlight' data-aligned-summaries='0'> and the hotel charges for internet (20$ per day)</span>. I think <span class='review-span highlight' data-aligned-summaries='1'>the hotel would be much better value if they would eliminate or lower some of these charges</span>! Can definitely recommend this hotel for anyone wanting to stay in downtown Vancouver!</div><div class='text-box'>I stayed at the Sutton Place Vancouver for a 4-night business trip. During my stay I, unfortunately, came down with a really bad cold, so I used Room Service, which was excellent. I also ate in the dining room (excellent service). The "gift shop" is really more of a convenience store than a gift shop, but there are plenty of other souvenir-type shops around. <span class='review-span highlight' data-aligned-summaries='2'>Convenient walk to shops</span>, restaurants <span class='review-span highlight' data-aligned-summaries='2'>and the stunningly beautiful Vancouver Convention Centre</span>. <span class='review-span highlight' data-aligned-summaries='4'>Very, very comfortable bed</span>. (<span class='review-span highlight' data-aligned-summaries='4'>No back pain, yay</span>!)</div><div class='text-box'>We stayed here for 5 nights in a grand suite. <span class='review-span highlight' data-aligned-summaries='3'>The rooms</span> were lovely - <span class='review-span highlight' data-aligned-summaries='3'>plenty of room for three of us</span>, beautiful views, very quiet. We had wi-fi and <span class='review-span highlight' data-aligned-summaries='6'>continental breakfast included in our rate</span> - the wi-fi worked flawlessly and <span class='review-span highlight' data-aligned-summaries='6'>the morning pastries were delicious</span>. Service in this hotel is top rate - the concierges helped us with car rental, spa and restaurant reservations. And <span class='review-span highlight' data-aligned-summaries='2'>the location couldn't be better</span>. <span class='review-span highlight' data-aligned-summaries='2'>We were able to walk everywhere downtown</span>. We highly recommend Sutton Place.</div><div class='text-box'>This was my third time staying at Sutton Place and love staying here. <span class='review-span highlight' data-aligned-summaries='2'>Great location</span>, <span class='review-span highlight' data-aligned-summaries='0 3'>clean rooms</span>, <span class='review-span highlight' data-aligned-summaries='4'>comfortable beds</span>, friendly/helpful staff. However, I don't recommend eating <span class='review-span highlight' data-aligned-summaries='6'>breakfast at the restaurant,</span> <span class='review-span highlight' data-aligned-summaries='0 6'>pretty spendy for what you get</span>. Maybe the buffet is the better way to go. <span class='review-span highlight' data-aligned-summaries='8'>Parking is spendy but hotel usually has a deal that helps cover the cost of parking</span>. But this is my hotel of choice when I come to Vancouver!</div><div class='text-box'>First the service at Sutton Place was great and the staff was very friendly and helpful. <span class='review-span highlight' data-aligned-summaries='2'>The location is also great</span>. Unfortunately <span class='review-span highlight' data-aligned-summaries='1'>the</span> <span class='review-span highlight' data-aligned-summaries='1 5'>hotel itself is outdated and the rooms are in need of an upgrade</span>. <span class='review-span highlight' data-aligned-summaries='0 1'>The price was very reasonable</span>, but it would be nice to see this hotel receive a much needed makeover.</div><div class='text-box'>We were <span class='review-span highlight' data-aligned-summaries='2'>pleased with the location of this Hotel as it is only a 10 minute downhill walk from Canada Place from where the Cruise Ships depart</span>. <span class='review-span highlight' data-aligned-summaries='0 4'>Our room was</span> <span class='review-span highlight' data-aligned-summaries='0'>clean</span> and <span class='review-span highlight' data-aligned-summaries='4'>comfortable</span>. The Hotel is <span class='review-span highlight' data-aligned-summaries='2'>very close to the main shopping area and across the road we were able to catch the Hop-on Hop-off Trolley Tour</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='2'>It is central to all downtown activities</span> and the staff are friendly,and helpful. <span class='review-span highlight' data-aligned-summaries='6'>The restaurant is great with always a little chef's surprise</span>. We also enjoy <span class='review-span highlight' data-aligned-summaries='7'>the pool which has good hours for use</span>. I have stayed with friends and family and for business and never been disappointed.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel was clean and reasonably priced.</span> <span id="1" class="summary-sentence">The hotel does need a makeover and would improve if some of the charges were lowered.</span> <span id="2" class="summary-sentence">This hotel is located in a really great area with a really handy walk to the shopping area and restaurants, as well as a convention centre nearby.</span> <span id="3" class="summary-sentence">The rooms are spacious and flawlessly clean with everything available that you could possibly need.</span> <span id="4" class="summary-sentence">The bed was unbelievably comfortable and provide a great night's sleep.</span> <span id="5" class="summary-sentence">The hotel is a little bit outdated and in need of a bit of an upgrade though.</span> <span id="6" class="summary-sentence">The hotel had an expensive breakfast however overall the food is great.</span> <span id="7" class="summary-sentence">The pool at the hotel is open for a good amount of time for guests.</span> <span id="8" class="summary-sentence">There is also parking available which is a bit expensive, but the hotel can help out with it.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_3_a_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>I travel to Vancouver regularly on business and always stay at the Sutton Place Hotel. It is truly a top end hotel from the well appointed lobby, excellent restaurant, <span class='review-span highlight' data-aligned-summaries='4'>beautiful guest suites</span> and most important of all 5 star pulse customer service. Every staff member greets you with a pleasant smile and no request is considered too small. I stay in La Grande Residence where the one and two bedroom fully equipped suites make your stay, wether it is only a few days or a couple of weeks, relaxed and stress-free. The staff are so customer oriented that they always greet yu by name when you call the front desk and make you feel welcome on arrival by saying "Welcome back to the Sutton Place". The beds are very comfortable, you get an excellent sleep. The hotel is the preferred location for many Hollywood actors and crew shooting in Vancouver but the hotel staff treat every guest just as if they were an Oscar winner!</div><div class='text-box'>Sutton Place hotel was a great stay! The location at Burrard and Robson makes it super convenient for shopping and eating - lots of great locations around. Service was spot-on from all the staff. <span class='review-span highlight' data-aligned-summaries='1'>The hotel is a bit old</span> but <span class='review-span highlight' data-aligned-summaries='2'>everything was still clean</span> and renovated. <span class='review-span highlight' data-aligned-summaries='4'>Rooms were roomy</span> and <span class='review-span highlight' data-aligned-summaries='4'>beds really comfortable</span>. I only have 2 complaints - <span class='review-span highlight' data-aligned-summaries='0 7'>the parking is outrageous (40$ per night)</span>, and <span class='review-span highlight' data-aligned-summaries='0'>the hotel charges for internet (20$ per day)</span>. I think <span class='review-span highlight' data-aligned-summaries='0'>the hotel would be much better</span> value <span class='review-span highlight' data-aligned-summaries='0'>if they would eliminate or lower some of these charges</span>! Can definitely recommend this hotel for anyone wanting to stay in downtown Vancouver!</div><div class='text-box'>I stayed at the Sutton Place Vancouver for a 4-night business trip. During my stay I, unfortunately, came down with a really bad cold, so I used Room Service, which was excellent. I also ate in the dining room (excellent service). The "gift shop" is really more of a convenience store than a gift shop, but there are plenty of other souvenir-type shops around. <span class='review-span highlight' data-aligned-summaries='3'>Convenient walk to</span> shops, restaurants and <span class='review-span highlight' data-aligned-summaries='3'>the stunningly beautiful Vancouver Convention Centre</span>. Very, very comfortable bed. (No back pain, yay!)</div><div class='text-box'>We stayed here for 5 nights in a grand suite. <span class='review-span highlight' data-aligned-summaries='4'>The rooms were lovely - plenty of room for three of us, beautiful views</span>, very quiet. We had wi-fi and continental breakfast included in our rate - the wi-fi worked flawlessly and <span class='review-span highlight' data-aligned-summaries='5'>the morning pastries were delicious</span>. Service in this hotel is top rate - the concierges helped us with car rental, spa and restaurant reservations. And the location couldn't be better. We were able to walk everywhere downtown. We highly recommend Sutton Place.</div><div class='text-box'>This was my third time staying at Sutton Place and love staying here. Great location, <span class='review-span highlight' data-aligned-summaries='2'>clean rooms</span>, comfortable beds, friendly/helpful staff. However, I don't recommend eating breakfast at the restaurant, pretty spendy for what you get. Maybe <span class='review-span highlight' data-aligned-summaries='5'>the buffet is the better way to go</span>. <span class='review-span highlight' data-aligned-summaries='7'>Parking is spendy but hotel usually has a deal that helps cover the cost of parking</span>. But this is my hotel of choice when I come to Vancouver!</div><div class='text-box'>First the service at Sutton Place was great and the staff was very friendly and helpful. The location is also great. Unfortunately the <span class='review-span highlight' data-aligned-summaries='1'>hotel itself is outdated</span> and the rooms are in need of an upgrade. <span class='review-span highlight' data-aligned-summaries='0'>The price was very reasonable</span>, but it <span class='review-span highlight' data-aligned-summaries='1'>would be nice to see this hotel receive a much needed makeover</span>.</div><div class='text-box'>We were pleased with the location of this Hotel as it is <span class='review-span highlight' data-aligned-summaries='3'>only a 10 minute downhill walk from Canada Place</span> from <span class='review-span highlight' data-aligned-summaries='3'>where the Cruise Ships depart</span>. <span class='review-span highlight' data-aligned-summaries='2 4'>Our room was clean</span> <span class='review-span highlight' data-aligned-summaries='4'>and comfortable</span>. The Hotel is very close to the main shopping area and across the road we were able to catch the Hop-on Hop-off Trolley Tour.</div><div class='text-box'>It is central to all downtown activities and the staff are friendly,and helpful. The restaurant is great with always a little chef's surprise. <span class='review-span highlight' data-aligned-summaries='6'>We also enjoy the pool which has good hours for use</span>. I have stayed with friends and family and for business and never been disappointed.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The price of this hotel is okay</span> <span id="1" class="summary-sentence">but it feels somewhat dated and needs an overall makeover.</span> <span id="2" class="summary-sentence">That said, the place is clean.</span> <span id="3" class="summary-sentence">The hotel is situated close to the Vancouver Convention Centre and 10 minutes from Canada Place where you can catch a cruise ship.</span> <span id="4" class="summary-sentence">The rooms of the hotel were very nice and spacious, with stunning views of the surrounding area.</span> <span id="5" class="summary-sentence">The morning pastries and buffet was pretty good here at the hotel.</span> <span id="6" class="summary-sentence">There was a great pool to use for hours, which is great.</span> <span id="7" class="summary-sentence">There is a deal to help out with the somewhat pricey parking, too, if you're thinking of using a car here.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_3_a_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>I travel to Vancouver regularly on business and always stay at the Sutton Place Hotel. It is truly a top end hotel from the well appointed lobby, <span class='review-span highlight' data-aligned-summaries='0'>excellent restaurant</span>, <span class='review-span highlight' data-aligned-summaries='0'>beautiful guest suites</span> and most important of all 5 star pulse customer service. Every staff member greets you with a pleasant smile and no request is considered too small. I stay in La Grande Residence where <span class='review-span highlight' data-aligned-summaries='4'>the one and two bedroom fully equipped suites make your stay</span>, wether it is only a few days or a couple of weeks, <span class='review-span highlight' data-aligned-summaries='4'>relaxed and stress-free</span>. The staff are so customer oriented that they always greet yu by name when you call the front desk and make you feel welcome on arrival by saying "Welcome back to the Sutton Place". <span class='review-span highlight' data-aligned-summaries='3'>The beds are very comfortable</span>, <span class='review-span highlight' data-aligned-summaries='3'>you get an excellent sleep</span>. <span class='review-span highlight' data-aligned-summaries='2'>The hotel is the preferred location for many</span> Hollywood actors and crew shooting in Vancouver but the hotel staff treat every guest just as if they were an Oscar winner!</div><div class='text-box'>Sutton Place <span class='review-span highlight' data-aligned-summaries='1'>hotel was a great stay</span>! <span class='review-span highlight' data-aligned-summaries='2'>The location at Burrard and Robson makes it super convenient for shopping and eating - lots of great locations around</span>. Service was spot-on from all the staff. <span class='review-span highlight' data-aligned-summaries='0'>The hotel is a bit old</span> but everything was still clean and renovated. <span class='review-span highlight' data-aligned-summaries='4'>Rooms were roomy</span> and <span class='review-span highlight' data-aligned-summaries='3'>beds really comfortable</span>. I only have 2 complaints - <span class='review-span highlight' data-aligned-summaries='0 6'>the parking is outrageous (40$ per night</span>)<span class='review-span highlight' data-aligned-summaries='0'>, and the hotel charges for internet (20$ per day)</span>. I think <span class='review-span highlight' data-aligned-summaries='0 1'>the hotel would be much better value if they would eliminate or lower some of these charges</span>! Can definitely recommend this hotel for anyone wanting to stay in downtown Vancouver!</div><div class='text-box'>I stayed at the Sutton Place Vancouver for a 4-night business trip. During my stay I, unfortunately, <span class='review-span highlight' data-aligned-summaries='6'>came down with a really bad cold, so I used</span> <span class='review-span highlight' data-aligned-summaries='1 6'>Room Service</span>,<span class='review-span highlight' data-aligned-summaries='6'> which</span> <span class='review-span highlight' data-aligned-summaries='1 6'>was excellent</span>.<span class='review-span highlight' data-aligned-summaries='6'> I</span> <span class='review-span highlight' data-aligned-summaries='0 6'>also ate in the dining room (excellent service)</span>.<span class='review-span highlight' data-aligned-summaries='6'> The "gift shop" is really more of a convenience store than a gift shop</span>, but <span class='review-span highlight' data-aligned-summaries='2'>there are plenty of</span> other <span class='review-span highlight' data-aligned-summaries='2'>souvenir-type shops around</span>. <span class='review-span highlight' data-aligned-summaries='2'>Convenient walk to shops, restaurants and the stunningly beautiful Vancouver Convention Centre.</span> <span class='review-span highlight' data-aligned-summaries='1 3'>Very, very comfortable bed</span>.<span class='review-span highlight' data-aligned-summaries='1'> (No back pain, yay</span>!)</div><div class='text-box'>We stayed here for 5 nights in <span class='review-span highlight' data-aligned-summaries='0'>a grand suite</span>. <span class='review-span highlight' data-aligned-summaries='0'>The rooms were lovely</span> - <span class='review-span highlight' data-aligned-summaries='4'>plenty of room for three of us</span>, beautiful views, very quiet. <span class='review-span highlight' data-aligned-summaries='4'>We had wi-fi and continental breakfast included in our rate</span> - the wi-fi worked flawlessly and <span class='review-span highlight' data-aligned-summaries='5'>the morning pastries were delicious</span>. Service in this hotel is top rate - the concierges helped us with car rental, spa and restaurant reservations. <span class='review-span highlight' data-aligned-summaries='2'>And the location couldn't be better. We were able to walk everywhere downtown</span>. We highly recommend Sutton Place.</div><div class='text-box'>This was my third time staying at Sutton Place and love staying here. <span class='review-span highlight' data-aligned-summaries='2'>Great location</span>, <span class='review-span highlight' data-aligned-summaries='3'>clean rooms, comfortable beds</span>, friendly/helpful staff. However, <span class='review-span highlight' data-aligned-summaries='5'>I don't recommend eating breakfast at the restaurant, pretty spendy for what you get. Maybe the buffet is the better way to go</span>. <span class='review-span highlight' data-aligned-summaries='6'>Parking is spendy but hotel usually has a deal that helps cover the cost of parking</span>. But this is my hotel of choice when I come to Vancouver!</div><div class='text-box'>First the service at Sutton Place was great and the staff was very friendly and helpful. <span class='review-span highlight' data-aligned-summaries='2'>The location is also great</span>. Unfortunately the hotel itself is outdated and <span class='review-span highlight' data-aligned-summaries='4'>the</span> <span class='review-span highlight' data-aligned-summaries='0 4'>rooms are in need of an upgrade</span>. <span class='review-span highlight' data-aligned-summaries='0 1'>The price was very reasonable</span>, but it <span class='review-span highlight' data-aligned-summaries='0'>would be nice to see this hotel receive a much needed makeover</span>.</div><div class='text-box'>We were pleased with the location of this Hotel as it is only <span class='review-span highlight' data-aligned-summaries='2'>a 10 minute downhill walk from Canada Place from where the Cruise Ships depart</span>. <span class='review-span highlight' data-aligned-summaries='3'>Our room was clean and comfortable</span>. The Hotel is very <span class='review-span highlight' data-aligned-summaries='2'>close to the main shopping area and across the road we were able to catch the Hop-on Hop-off Trolley Tour</span>.</div><div class='text-box'>It is central to all downtown activities and the staff are friendly,and helpful. <span class='review-span highlight' data-aligned-summaries='0 5'>The restaurant is great</span> <span class='review-span highlight' data-aligned-summaries='5'>with always a little chef's surprise</span>. We also enjoy the pool which has good hours for use. <span class='review-span highlight' data-aligned-summaries='1'>I have stayed</span> with friends and family and for business <span class='review-span highlight' data-aligned-summaries='1'>and never been disappointed</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This reasonably priced hotel may be older and may need a makeover but the restaurant is great and it does have beautiful suites.</span> <span id="1" class="summary-sentence">Some of the charges could stand to be dropped to improve the hotel experience but it is not disappointing here.</span> <span id="2" class="summary-sentence">Perfect location as it is walking distance to all amenities and major attractions in the area.</span> <span id="3" class="summary-sentence">The rooms at this hotel are very clean and the beds in particular are very comfortable; perfect for a good night's sleep.</span> <span id="4" class="summary-sentence">They are also spacious and fully equipped for your stay, making the visit relaxed and stress-free, however they are in need of an upgrade.</span> <span id="5" class="summary-sentence">The food at this hotel is delicious, and is particularly pricey if you choose to eat in the restaurant as opposed to the buffet style breakfast on offer.</span> <span id="6" class="summary-sentence">Great facilities on site at this hotel, and although the parking can be quite expensive, a deal is usually provided to help with the cost.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_3_b_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>We stayed at L'Hermitage in Aug. 2008, just two months after it opened. It is a very sleek, modern hotel in a great location in downtown Vancouver. <span class='review-span highlight' data-aligned-summaries='1'>Because it was so new, the staff seemed to still be figuring things out</span>. For example, we weren't able to check into our room the first night for over an hour after the guaranteed check-in time. <span class='review-span highlight' data-aligned-summaries='2 4'>To make up for this</span>,<span class='review-span highlight' data-aligned-summaries='4'></span> <span class='review-span highlight' data-aligned-summaries='2 4'>the staff comped a round of drinks for us</span> at their wonderful guest lounge on the 5th floor. <span class='review-span highlight' data-aligned-summaries='5'>The website did not do this place justice</span> . there's a beautiful rooftop pool and hot tub and the rooms are large and luxuorious. <span class='review-span highlight' data-aligned-summaries='3'>Very nice breakfast and afternoon h'or doeurve buffets are included in the price</span>. <span class='review-span highlight' data-aligned-summaries='1'>The staff</span> was very friendly and <span class='review-span highlight' data-aligned-summaries='1'>made sure that all of our needs were met</span>. <span class='review-span highlight' data-aligned-summaries='0'>I would highly recommend this hotel to anyone</span> looking to be pampered in Vancouver!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>We will use this again</span>. We stayed on 3 separate occasions in quick succession. <span class='review-span highlight' data-aligned-summaries='1'>The staff were always helpful</span>, charming and friendly, the rooms elegant and spacious (wonderful bathrooms) and the location was great, particularly if you are flying in (2 blocks down from Vancouver City Centre station on the Canada Line. Don't even think about a cab, on a Sunday when there is no $5 surcharge it cost under $6 for my wife and me to get to the airport. Heathrow and London Underground hang your heads in shame). <span class='review-span highlight' data-aligned-summaries='3'>Treat yourself to the $17.50 breakfast buffet, it must be the best "posh" value in Vancouver</span> !</div><div class='text-box'>We are a family of 5 and had an extremely comfortable 4 night stay in their 2 bedroom suite. Kudos to Jean-michel & Hippo, Raymond, Elaisha, Mitch and a super housekeeping team for being so helpful and friendly. <span class='review-span highlight' data-aligned-summaries='0'>We felt most at home and strongly recommend to all who plan to visit Vancouver</span>. Great location with Japadog and Viet-Sub eateries and Sears, Hudson Bay, Holt Renfrew nearby. Easy access to the main attractions. <span class='review-span highlight' data-aligned-summaries='1'>The team deserves a great pat on their backs for their great work attitude</span>. Special thanks to Jean-michel for going out of your way for us.</div><div class='text-box'>This is a <span class='review-span highlight' data-aligned-summaries='0'>really great hotel</span> - <span class='review-span highlight' data-aligned-summaries='1'>near new</span>, small boutique style, great rooms more like small apartments with full kitchens. Fantastic pool and sun deck. Not a gripe, but you should know this hotel does not have room service - wasn't an issue for me, but may be for some travellers. great location - close to everything! Really <span class='review-span highlight' data-aligned-summaries='0 5'>reasonably priced compared to the other hotel</span> i stayed in during my stay in Vanvouver.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>My stay at L'Hermitage exceeded that of any other I have ever had in Vancouver</span>. I have stayed at many of the better hotels downtown while visiting this great city over the past 15 years. <span class='review-span highlight' data-aligned-summaries='1'>The staff were extraordinarily friendly and helpful</span> without being overbearing. A great experience I will be recommending to friends, family and business colleagues. Thank you L'Hermitage.</div><div class='text-box'>The front <span class='review-span highlight' data-aligned-summaries='0'>desk was fantastic</span>. Check in and check out were a breeze as they let me spend more time with my family and getting to the wedding. It was the perfect end to our wedding night, the <span class='review-span highlight' data-aligned-summaries='0'>room was top notch</span>! Thanks!</div><div class='text-box'>The amenities, <span class='review-span highlight' data-aligned-summaries='3'>breakfast buffet</span> and service <span class='review-span highlight' data-aligned-summaries='3'>at this hotel are excellent</span>. Concierge helped us reserve a table at a great restaurant nearby (Goldfish) and we used the bikes to see Stanley Park.</div><div class='text-box'>If and when I visit Canada again <span class='review-span highlight' data-aligned-summaries='0'>this hotel will be a definite</span>. It is great!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">You will want to come back again and again to this hotel because it exceeds any other hotels in the city.</span> <span id="1" class="summary-sentence">The staff have a professional attitude, although due to it being a new venue some of the staff need a bit more time to develop.</span> <span id="2" class="summary-sentence">However, we were provided a complimentary round of drinks by staff due to this.</span> <span id="3" class="summary-sentence">The hotel provides a good breakfast and also an afternoon hor d'oeuvres buffet.</span> <span id="4" class="summary-sentence">The staff also provided a complimentary round of drinks by way of an apology.</span> <span id="5" class="summary-sentence">The hotel was a very good price and exceeded expectations set out by the website.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_3_b_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>We stayed at L'Hermitage in Aug. 2008, just two months after it opened. <span class='review-span highlight' data-aligned-summaries='0'>It is a very sleek, modern hotel in a great location in downtown Vancouver</span>. <span class='review-span highlight' data-aligned-summaries='4'>Because it was so new, the staff seemed to still be figuring things out</span>. For example, <span class='review-span highlight' data-aligned-summaries='4'>we weren't able to check into our room the first night for over an hour after the guaranteed check-in time.</span> To make up for this, the staff comped a round of drinks for us at their wonderful guest lounge on the 5th floor. The website did not do this place justice . there's a beautiful rooftop pool and hot tub and <span class='review-span highlight' data-aligned-summaries='2'>the rooms are large</span> and <span class='review-span highlight' data-aligned-summaries='2'>luxuorious</span>. <span class='review-span highlight' data-aligned-summaries='5'>Very nice breakfast and afternoon h'or doeurve buffets are included in the price</span>. <span class='review-span highlight' data-aligned-summaries='3'>The staff was very friendly and made sure that all of our needs were met</span>. <span class='review-span highlight' data-aligned-summaries='0'>I would highly recommend this hotel to anyone looking to be pampered in Vancouver</span>!</div><div class='text-box'>We will use this again. We stayed on 3 separate occasions in quick succession. <span class='review-span highlight' data-aligned-summaries='3'>The staff were always helpful, charming and friendly</span>, <span class='review-span highlight' data-aligned-summaries='2'>the rooms elegant</span> and <span class='review-span highlight' data-aligned-summaries='2'>spacious</span> (<span class='review-span highlight' data-aligned-summaries='2'>wonderful bathrooms</span>) and the location was great, particularly if you are flying in (2 blocks down from Vancouver City Centre station on the Canada Line. Don't even think about a cab, on a Sunday when there is no $5 surcharge it cost under $6 for my wife and me to get to the airport. Heathrow and London Underground hang your heads in shame). <span class='review-span highlight' data-aligned-summaries='5'>Treat yourself to the $17.50 breakfast buffet</span>, <span class='review-span highlight' data-aligned-summaries='0'>it must be the best "posh" value in Vancouver</span> !</div><div class='text-box'>We are a family of 5 and had <span class='review-span highlight' data-aligned-summaries='2'>an extremely comfortable</span> 4 night stay in their <span class='review-span highlight' data-aligned-summaries='2'>2 bedroom suite</span>. <span class='review-span highlight' data-aligned-summaries='3'>Kudos to</span> Jean-michel & Hippo, Raymond, Elaisha, Mitch and <span class='review-span highlight' data-aligned-summaries='3'>a super housekeeping team</span> for being so helpful and friendly. We felt most at home and <span class='review-span highlight' data-aligned-summaries='0'>strongly recommend to all who plan to visit Vancouver</span>. <span class='review-span highlight' data-aligned-summaries='1'>Great location with</span> Japadog and Viet-Sub eateries and Sears, Hudson Bay, Holt Renfrew nearby. <span class='review-span highlight' data-aligned-summaries='1'>Easy access to the main attractions</span>. The team deserves a great pat on their backs for their great work attitude. Special thanks to Jean-michel for going out of your way for us.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>This is a really great hotel</span> - near new, small boutique style, <span class='review-span highlight' data-aligned-summaries='2'>great rooms more like small apartments with full kitchens</span>. Fantastic pool and sun deck. Not a gripe, but you should know this hotel does not have room service - wasn't an issue for me, but may be for some travellers. great location - close to everything! <span class='review-span highlight' data-aligned-summaries='6'>Really reasonably priced compared to the other hotel i stayed in</span> during my stay in Vanvouver.</div><div class='text-box'>My stay at L'Hermitage <span class='review-span highlight' data-aligned-summaries='0'>exceeded that of any other I have ever had in Vancouver</span>. I have stayed at many of the better hotels downtown while visiting this great city over the past 15 years. <span class='review-span highlight' data-aligned-summaries='3'>The staff were extraordinarily friendly and helpful</span> without being overbearing. <span class='review-span highlight' data-aligned-summaries='5'>A great experience I will be recommending</span> to friends, family and business colleagues. Thank you L'Hermitage.</div><div class='text-box'>The front desk was fantastic. <span class='review-span highlight' data-aligned-summaries='4'>Check in and check out were a breeze</span> as they let me spend more time with my family and getting to the wedding. It was the perfect end to our wedding night, the room was top notch! Thanks!</div><div class='text-box'>The amenities, <span class='review-span highlight' data-aligned-summaries='5'>breakfast buffet</span> and <span class='review-span highlight' data-aligned-summaries='3'>service at this hotel are excellent</span>. Concierge helped us reserve a table at a <span class='review-span highlight' data-aligned-summaries='1'>great restaurant nearby (Goldfish)</span> and <span class='review-span highlight' data-aligned-summaries='1'>we used the bikes to see Stanley Park</span>.</div><div class='text-box'>If and when I visit Canada again <span class='review-span highlight' data-aligned-summaries='0'>this hotel will be a definite</span>. It is great!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is the best in Vancouver.</span> <span id="1" class="summary-sentence">This hotel provides really good access to main attractions that are nearby.</span> <span id="2" class="summary-sentence">This hotel has lovely large rooms that felt very luxurious.</span> <span id="3" class="summary-sentence">The housekeeping staff who were all excellent.</span> <span id="4" class="summary-sentence">It seemed like some wrinkles were still being ironed out because this is still a new hotel but check-in and check-out were smooth and easy.</span> <span id="5" class="summary-sentence">This hotel provides a really nice breakfast as well as an afternoon buffet that's included in the price, so it's definitely recommended to take advantage of this.</span> <span id="6" class="summary-sentence">The pricing compared to other hotels makes this a really reasonable hotel.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_3_b_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'><span class='review-span highlight' data-aligned-summaries='3'>We stayed at L'Hermitage in Aug. 2008, just two months after it opened</span>. It is a very sleek, modern <span class='review-span highlight' data-aligned-summaries='1'>hotel in a great location in downtown Vancouver</span>. Because it was so new, the staff seemed to still be figuring things out. For example, we weren't able to check into our room the first night for over an hour after the guaranteed check-in time. To make up for this, <span class='review-span highlight' data-aligned-summaries='4'>the staff comped a round of drinks for us at their wonderful guest lounge on the 5th floor</span>. <span class='review-span highlight' data-aligned-summaries='6'>The website did not do this place justice</span> . <span class='review-span highlight' data-aligned-summaries='0'>there's a beautiful rooftop pool and hot tub</span> and <span class='review-span highlight' data-aligned-summaries='0 2'>the rooms are large</span> <span class='review-span highlight' data-aligned-summaries='0'>and luxuorious</span>. <span class='review-span highlight' data-aligned-summaries='4'>Very nice breakfast and afternoon h'or doeurve buffets are included in the price</span>. <span class='review-span highlight' data-aligned-summaries='0 3'>The staff</span> <span class='review-span highlight' data-aligned-summaries='3'>was very friendly and</span> <span class='review-span highlight' data-aligned-summaries='0 3'>made sure that all of our needs were met</span>. <span class='review-span highlight' data-aligned-summaries='0'>I would highly recommend this hotel to anyone looking to be pampered in Vancouver!</span></div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>We will use this again</span>. We stayed on 3 separate occasions in quick succession. <span class='review-span highlight' data-aligned-summaries='3'>The staff were always helpful, charming and friendly</span>, <span class='review-span highlight' data-aligned-summaries='0 2'>the rooms elegant and spacious</span> (wonderful bathrooms) and the <span class='review-span highlight' data-aligned-summaries='1'>location was great</span>, particularly if you are flying in (<span class='review-span highlight' data-aligned-summaries='1'>2 blocks down from Vancouver City Centre station</span> on the Canada Line. Don't even think about a cab, on a Sunday when there is no $5 surcharge it cost under $6 for my wife and me to get to the airport. Heathrow and London Underground hang your heads in shame). <span class='review-span highlight' data-aligned-summaries='4'>Treat yourself to the $17.50 breakfast buffet</span>, it must be the best "posh" value in Vancouver !</div><div class='text-box'>We are a family of 5 and had an <span class='review-span highlight' data-aligned-summaries='2'>extremely comfortable</span> 4 night stay in their 2 <span class='review-span highlight' data-aligned-summaries='2'>bedroom suite</span>. Kudos to Jean-michel & Hippo, Raymond, Elaisha, Mitch and <span class='review-span highlight' data-aligned-summaries='3'>a super housekeeping team</span> for being <span class='review-span highlight' data-aligned-summaries='3'>so helpful and friendly</span>. <span class='review-span highlight' data-aligned-summaries='0'>We felt most at home</span> and <span class='review-span highlight' data-aligned-summaries='0'>strongly recommend to all who plan to visit Vancouver</span>. Great location with <span class='review-span highlight' data-aligned-summaries='4'>Japadog and Viet-Sub eateries</span> and Sears, Hudson Bay, Holt Renfrew <span class='review-span highlight' data-aligned-summaries='4'>nearby</span>. <span class='review-span highlight' data-aligned-summaries='1'>Easy access to the main attractions</span>. <span class='review-span highlight' data-aligned-summaries='3'>The team deserves a great pat on their backs for their great work attitude</span>. Special thanks to Jean-michel for going out of your way for us.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>This is a really great</span> <span class='review-span highlight' data-aligned-summaries='0 3'>hotel</span> <span class='review-span highlight' data-aligned-summaries='3'>- near new</span>, small boutique style, great <span class='review-span highlight' data-aligned-summaries='2'>rooms more like small apartments with full kitchens</span>. Fantastic pool and sun deck. Not a gripe, but you should know <span class='review-span highlight' data-aligned-summaries='0'>this hotel does not have room service</span> - wasn't an issue for me, but may be for some travellers. <span class='review-span highlight' data-aligned-summaries='1'>great location - close to everything</span>! <span class='review-span highlight' data-aligned-summaries='5'>Really reasonably priced compared to the other hotel i stayed in during my stay in Vanvouver</span>.</div><div class='text-box'>My stay at <span class='review-span highlight' data-aligned-summaries='0'>L'Hermitage exceeded that of any other I have ever had</span> in Vancouver. I have stayed at many of the better hotels downtown while visiting this great city over the past 15 years. <span class='review-span highlight' data-aligned-summaries='3'>The staff were extraordinarily friendly and helpful without being overbearing</span>. A great experience I will be recommending to friends, family and business colleagues. Thank you L'Hermitage.</div><div class='text-box'>The <span class='review-span highlight' data-aligned-summaries='0 3'>front desk was fantastic</span>. Check in and check out were a breeze as they let me spend more time with my family and getting to the wedding. It was the perfect end to our wedding night, <span class='review-span highlight' data-aligned-summaries='0'>the room was top notch</span>! Thanks!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>The amenities, breakfast buffet and service at this hotel are excellent</span>. <span class='review-span highlight' data-aligned-summaries='3'>Concierge helped us</span> reserve a table at <span class='review-span highlight' data-aligned-summaries='4'>a great restaurant nearby</span> (Goldfish) and we used the bikes to see Stanley Park.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>If and when I visit</span> Canada again <span class='review-span highlight' data-aligned-summaries='0'>this hotel will be a definite</span>. <span class='review-span highlight' data-aligned-summaries='0'>It is great</span>!</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is of average quality, but worth the visit.</span> <span id="1" class="summary-sentence">This hotel is central to some of the major attractions in this area.</span> <span id="2" class="summary-sentence">The rooms here are large and very comfortable.</span> <span id="3" class="summary-sentence">The hotel is relatively new and the housekeeping team was friendly and helpful and everyone had a great attitude.</span> <span id="4" class="summary-sentence">The hotel offers a nice breakfast and buffet inclusive in the costs, a lovely guest lounge to enjoy drinks and nearby restaurants.</span> <span id="5" class="summary-sentence">A very well priced hotel in comparison to others in this area.</span> <span id="6" class="summary-sentence">It is even better to look at in person than on it's website.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_5_a_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>- First thing is the location, no need for public transport, we could walk from hotel to anywhere. - <span class='review-span highlight' data-aligned-summaries='6'>No need for the expencive hotel breakfast 'cause</span> in the walking distance of 20-50 meters on the Rembrandt square <span class='review-span highlight' data-aligned-summaries='6'>there are cheaper places to eat</span>. - We got a deal in the hotel and got one night for free. - In the same walking distance- on the rembrandt square- there are couple of clubs. I remember one was awesome, one was terrible, and in the third we couldn't enter, the tickets were sold out. And there is a great coffeshop just by the entrance of hotel :D - <span class='review-span highlight' data-aligned-summaries='0'>Very clean, tidy and a safe hotel for reasonable price</span>. <span class='review-span highlight' data-aligned-summaries='1'>-I'm definintely sleeping there again and recommending it to friends</span>.</div><div class='text-box'>Me and my boyfriend stayed here as a 30th Birthday treat and had a great time. <span class='review-span highlight' data-aligned-summaries='0 1 3 8'>The room was immaculate</span>, and the bed amazingly comfortable to the point that we did not leave it until lunch time on the first morning! And was just as hard on day two. <span class='review-span highlight' data-aligned-summaries='0 1'>Great location</span> too. We paid for a cab from Central St on arrival but felt rather ripped of as it was a20 and was only a 5 minute ride. On the way back we caught a tram which was much cheaper (actually it was free as we did not realise you had to pay the driver when you got on!) and just as quick. Would definitely recommend this hotel and will hopefully be going back in the near future!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='3'>the room was very small</span>, but that's not the biggest problem - the receptionists were. <span class='review-span highlight' data-aligned-summaries='7'>the wifi at the lobby was very slow</span> and <span class='review-span highlight' data-aligned-summaries='5'>the receptionists didnt even know how guests can log on</span> (user name, password and patience required). <span class='review-span highlight' data-aligned-summaries='5'>but the worst was a</span> french-speaking tall male <span class='review-span highlight' data-aligned-summaries='1 5'>receptionist</span> who <span class='review-span highlight' data-aligned-summaries='1 5'>was extremely rude</span> and made it very clear that he didnt like being asked about how to connect to the internet. he made condescending remarks in french about american tourists (and i'm not even american!). <span class='review-span highlight' data-aligned-summaries='0 1 3 8'>the carpet is filthy</span> <span class='review-span highlight' data-aligned-summaries='0 1 8'>and so is the hotel's surroundings</span> <span class='review-span highlight' data-aligned-summaries='0 8'>- noisy, crowded</span>,<span class='review-span highlight' data-aligned-summaries='0'> and the street is disgusting after rain</span>.</div><div class='text-box'>I booked this hotel after reading reviews on this site and Expedia, with a real priority for me being its <span class='review-span highlight' data-aligned-summaries='0 1 3'>cleanliness</span> <span class='review-span highlight' data-aligned-summaries='0 1'>and quietness</span>.<span class='review-span highlight' data-aligned-summaries='0'> It</span> <span class='review-span highlight' data-aligned-summaries='0 1 3'>didn't disappoint</span> on either count and had the added bonus of being in an excellent location - <span class='review-span highlight' data-aligned-summaries='2'>far enough away from the slightly too brash touristy bits</span> but near enough as not to be a long walk from anywhere useful. <span class='review-span highlight' data-aligned-summaries='3'>The modern room was nice</span> and the bathroom was excellent, although some might be surprised at the European practice of having <span class='review-span highlight' data-aligned-summaries='4'>no shower curtain so the bathroom floor gets a bit wet</span>. I'd definitely book here again.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 2'>The Hotel is perfectly placed</span> for both travel and entertainment <span class='review-span highlight' data-aligned-summaries='2'>on the edge of Rembrandt Square</span>. It is within very easy walking distance to everywhere in Central Amsterdam, <span class='review-span highlight' data-aligned-summaries='2'>but sufficiently on the edge for it to be quiet at night</span>. <span class='review-span highlight' data-aligned-summaries='6'>It has a first class seafood Bistro if you wish to eat in</span>. It's main clientele are business and corporate, which should tell you a lot about the overall quality and respect this hotel has. <span class='review-span highlight' data-aligned-summaries='0 1'>This has been my hotel of choice</span>, even when travelling privately to Amsterdam with family.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>A good hotel</span> bang <span class='review-span highlight' data-aligned-summaries='0'>in the centre of Amsterdam</span>. <span class='review-span highlight' data-aligned-summaries='3'>Rooms are clean and modern</span> and I will be staying there again. A couple of things to note: My room had mosquitos (common for AMS this summer), they were fully booked so could not give me another room but did eventually find some fly spay so problem solved. Breakfast is expensive at EUR15, just take a walk down the street and have a better breakfast in one of the cafes.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='3'>We found our room the be of nice size</span> and <span class='review-span highlight' data-aligned-summaries='4'>bothe the room and bath were easy to navigate in a wheelchair</span>. The <span class='review-span highlight' data-aligned-summaries='0 1'>beds were compfortable and the room were nicely appointed</span>. <span class='review-span highlight' data-aligned-summaries='0 1 5'>The staff was most helpful</span> with directions and other touristy information. <span class='review-span highlight' data-aligned-summaries='6'>The food in the restaurant</span>'s food <span class='review-span highlight' data-aligned-summaries='6'>was quite good with a nice selection</span>. We would recommend the Eden Rembrandt Square as our stay was quite good.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>The location of the hotel is excellent</span>. <span class='review-span highlight' data-aligned-summaries='2'>Its 5 mins from the Waterlooplein metro station</span> and hence easily accessible. <span class='review-span highlight' data-aligned-summaries='0 1'>Room service was mediocre</span> - <span class='review-span highlight' data-aligned-summaries='3'>the staff came to clean the room once in 3 days</span> in spite of a reminder. <span class='review-span highlight' data-aligned-summaries='3'>Hotel rooms were of good size</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The hotel is great and provides a safe place to stay.</span> <span id="1" class="summary-sentence">It is a favourite with guests.</span> <span id="2" class="summary-sentence">The hotel is close to the metro line and Rembrandt Square and away from the louder tourist areas.</span> <span id="3" class="summary-sentence">The room was quite small at this hotel but it was quite modern and clean.</span> <span id="4" class="summary-sentence">Everything was wheelchair-accessible which was fantastic, even if there was no shower curtain and it left the bathroom floor somewhat wet.</span> <span id="5" class="summary-sentence">The staff at the front desk were unhelpful to guests.</span> <span id="6" class="summary-sentence">The hotel provides a fantastic selection of food in their seafood bistro.</span> <span id="7" class="summary-sentence">The WiFi in the hotel lobby is very slow.</span> <span id="8" class="summary-sentence">The carpet was dirty and the exterior of the hotel is noisy and overcrowded.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_5_a_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>- First thing is the location, <span class='review-span highlight' data-aligned-summaries='1'>no need for public transport</span>, <span class='review-span highlight' data-aligned-summaries='0 1'>we could walk from hotel to anywhere</span>. - No need for the expencive hotel breakfast 'cause in the walking distance of 20-50 meters on the Rembrandt square there are cheaper places to eat. - We got a deal in the hotel and got one night for free. - <span class='review-span highlight' data-aligned-summaries='2'>In the same walking distance- on the rembrandt square- there are couple of clubs</span>. I remember one was awesome, one was terrible, and in the third we couldn't enter, the tickets were sold out. And there is a great coffeshop just by the entrance of hotel :D - <span class='review-span highlight' data-aligned-summaries='0'>Very clean, tidy and a safe hotel for reasonable price</span>. -I'm definintely sleeping there again and recommending it to friends.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Me and my boyfriend stayed here as a 30th Birthday treat and had a great time</span>. The room was immaculate, and <span class='review-span highlight' data-aligned-summaries='3'>the bed amazingly comfortable</span> to the point that we did not leave it until lunch time on the first morning! And was just as hard on day two. <span class='review-span highlight' data-aligned-summaries='0 1'>Great location too</span>. We paid for a cab <span class='review-span highlight' data-aligned-summaries='1'>from Central St</span> on arrival but felt rather ripped of as it was a20 and <span class='review-span highlight' data-aligned-summaries='1'>was only a 5 minute ride</span>. On the way back we caught a tram which was much cheaper (actually it was free as we did not realise you had to pay the driver when you got on!) and just as quick. <span class='review-span highlight' data-aligned-summaries='0'>Would definitely recommend this hotel</span> and will hopefully be going back in the near future!</div><div class='text-box'>the room was very small, but that's not the biggest problem - the receptionists were. the wifi at the lobby was very slow and the receptionists didnt even know how guests can log on (user name, password and patience required). but the worst was a french-speaking tall male <span class='review-span highlight' data-aligned-summaries='0 5'>receptionist</span> who <span class='review-span highlight' data-aligned-summaries='0 5'>was extremely rude</span> and made it very clear that he didnt like being asked about how to connect to the internet. he made condescending remarks in french about american tourists (and i'm not even american!). <span class='review-span highlight' data-aligned-summaries='0 7'>the carpet is filthy</span> <span class='review-span highlight' data-aligned-summaries='0'>and</span> <span class='review-span highlight' data-aligned-summaries='0 7'>so is the hotel's surroundings</span> <span class='review-span highlight' data-aligned-summaries='7'>- noisy</span>, <span class='review-span highlight' data-aligned-summaries='7'>crowded</span>, and <span class='review-span highlight' data-aligned-summaries='7'>the street is disgusting after rain.</span></div><div class='text-box'>I booked this hotel after reading reviews on this site and Expedia, with a real priority for me being <span class='review-span highlight' data-aligned-summaries='0'>its cleanliness and quietness</span>. It <span class='review-span highlight' data-aligned-summaries='0'>didn't disappoint</span> on either count and had the added bonus of being <span class='review-span highlight' data-aligned-summaries='1'>in an excellent location</span> - far enough away from the slightly too brash touristy bits but near enough as not to be a long walk from anywhere useful. <span class='review-span highlight' data-aligned-summaries='3'>The modern room was nice and the bathroom was excellent</span>, although some might be surprised at the European practice of having no shower curtain so the bathroom floor gets a bit wet. I'd definitely book here again.</div><div class='text-box'>The Hotel is <span class='review-span highlight' data-aligned-summaries='0'>perfectly</span> <span class='review-span highlight' data-aligned-summaries='0 1'>placed for both travel and entertainment</span> on the edge of Rembrandt Square. It is within very easy walking distance to everywhere in Central Amsterdam, but sufficiently on the edge for it to be quiet at night. <span class='review-span highlight' data-aligned-summaries='6'>It has a first class seafood Bistro</span> if you wish to eat in. It's main clientele are business and corporate, which should tell you a lot about the overall quality and respect this hotel has. <span class='review-span highlight' data-aligned-summaries='0'>This has been my hotel of choice</span>, even when travelling privately to Amsterdam with family.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>A good</span> <span class='review-span highlight' data-aligned-summaries='0 1'>hotel bang in the centre of Amsterdam</span>. Rooms are clean and modern and I will be staying there again. A couple of things to note: My room had mosquitos (common for AMS this summer), they were fully booked so could not give me another room but did eventually find some fly spay so problem solved. Breakfast is expensive at EUR15, just take a walk down the street and have a better breakfast in one of the cafes.</div><div class='text-box'>We found our room the be of nice size and <span class='review-span highlight' data-aligned-summaries='4'>bothe the room and bath were easy to navigate in a wheelchair</span>. The <span class='review-span highlight' data-aligned-summaries='0'>beds were compfortable</span> and <span class='review-span highlight' data-aligned-summaries='3'>the room were nicely appointed</span>. <span class='review-span highlight' data-aligned-summaries='5'>The</span> <span class='review-span highlight' data-aligned-summaries='0 5'>staff was most helpful</span> with directions and other touristy information. The food in the restaurant's food was quite good with a nice selection. We would recommend the Eden Rembrandt Square as our stay was quite good.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>The location of the hotel is excellent</span>. <span class='review-span highlight' data-aligned-summaries='1'>Its 5 mins from the Waterlooplein metro station and hence easily accessible</span>. Room service was mediocre - the staff came to clean the room once in 3 days in spite of a reminder. Hotel rooms were of good size.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a recommendable and respectable hotel for a great time whether you're travelling alone, with a partner, or with the family.</span> <span id="1" class="summary-sentence">The hotel is situated in a perfect location and is very accessible via the metro station that is only five minutes away.</span> <span id="2" class="summary-sentence">Adding to the great location is the fact that there are plenty of entertainment options very close-by.</span> <span id="3" class="summary-sentence">The rooms in the hotel were modern and well appointed.</span> <span id="4" class="summary-sentence">Both the room and the bathroom were easily accessible for wheelchair users too.</span> <span id="5" class="summary-sentence">Some of the staff was really rude.</span> <span id="6" class="summary-sentence">There is a great seafood bistro at the hotel.</span> <span id="7" class="summary-sentence">The hotel's carpets are absolutely filthy and the surroundings do not help with this vibe - it was crowded and noisy and after it rains the street is really disgusting.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_5_a_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>- First thing is the location, <span class='review-span highlight' data-aligned-summaries='1'>no need for public transport</span>, <span class='review-span highlight' data-aligned-summaries='0 1'>we could walk from hotel to anywhere</span>. - No need for the expencive hotel breakfast 'cause in the walking distance of <span class='review-span highlight' data-aligned-summaries='1'>20-50 meters on the Rembrandt</span> square there are cheaper places to eat. - We got a deal in the hotel and got one night for free. - <span class='review-span highlight' data-aligned-summaries='1'>In the same walking distance- on the rembrandt square- there are couple of clubs</span>. I remember one was awesome, one was terrible, and in the third we couldn't enter, the tickets were sold out. And there is a great coffeshop just by the entrance of hotel :D - <span class='review-span highlight' data-aligned-summaries='2 8'>Very clean, tidy</span> <span class='review-span highlight' data-aligned-summaries='2'>and a safe</span> <span class='review-span highlight' data-aligned-summaries='0 2 8'>hotel</span> <span class='review-span highlight' data-aligned-summaries='0'>for reasonable price</span>. -I'm definintely sleeping there again and recommending it to friends.</div><div class='text-box'>Me and my boyfriend stayed here as a 30th Birthday treat and had a great time. <span class='review-span highlight' data-aligned-summaries='2 8'>The room was immaculate</span>, and <span class='review-span highlight' data-aligned-summaries='3'>the bed amazingly comfortable</span> to the point that we did not leave it until lunch time on the first morning! And was just as hard on day two. <span class='review-span highlight' data-aligned-summaries='0'>Great location</span> too. We paid for a cab <span class='review-span highlight' data-aligned-summaries='0'>from Central St</span> on arrival but felt rather ripped of as it was a20 and <span class='review-span highlight' data-aligned-summaries='0'>was only a 5 minute ride</span>. On the way back we caught a tram which was much cheaper (actually it was free as we did not realise you had to pay the driver when you got on!) and just as quick. Would definitely recommend this hotel and will hopefully be going back in the near future!</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='2 4'>the room was very small</span>, but that's not the biggest problem - the receptionists were. <span class='review-span highlight' data-aligned-summaries='7'>the wifi at the lobby was very slow and the receptionists didnt even know how guests can log on</span> (user name, password and patience required). but the worst was a french-speaking tall <span class='review-span highlight' data-aligned-summaries='5'>male receptionist</span> who <span class='review-span highlight' data-aligned-summaries='5'>was extremely rude and made it very clear that he didnt like being asked about how to connect to the internet</span>. he made condescending remarks in french about american tourists (and i'm not even american!). <span class='review-span highlight' data-aligned-summaries='0 8'>the carpet is filthy and so is the hotel's surroundings</span> <span class='review-span highlight' data-aligned-summaries='0'>-</span> <span class='review-span highlight' data-aligned-summaries='0 8'>noisy</span>,<span class='review-span highlight' data-aligned-summaries='0'></span> <span class='review-span highlight' data-aligned-summaries='0 8'>crowded</span>,<span class='review-span highlight' data-aligned-summaries='0'> and the street is disgusting after rain</span>.</div><div class='text-box'>I booked this hotel after reading reviews on this site and Expedia, with a real priority for me being its <span class='review-span highlight' data-aligned-summaries='0 8'>cleanliness</span> <span class='review-span highlight' data-aligned-summaries='0'>and quietness</span>. It <span class='review-span highlight' data-aligned-summaries='0 8'>didn't disappoint</span> on either count and had the added bonus of being in an excellent location - far enough away from the slightly too brash touristy bits but <span class='review-span highlight' data-aligned-summaries='1'>near enough as not to be a long walk from anywhere useful</span>. <span class='review-span highlight' data-aligned-summaries='2'>The modern room was nice and the bathroom was excellent</span>, although some might be surprised at the European practice of having no shower curtain so the bathroom floor gets a bit wet. I'd definitely book here again.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>The Hotel is perfectly placed for both travel and entertainment on the edge of Rembrandt Square</span>. <span class='review-span highlight' data-aligned-summaries='0 1'>It is within very easy walking distance to everywhere in Central Amsterdam</span>, <span class='review-span highlight' data-aligned-summaries='0'>but sufficiently on the edge for it to be</span> <span class='review-span highlight' data-aligned-summaries='0 8'>quiet at night</span>. <span class='review-span highlight' data-aligned-summaries='6'>It has a first class seafood Bistro</span> if you wish to eat in. It's main clientele are business and corporate, which should tell you a lot about the overall quality and respect this hotel has. This has been my hotel of choice, even when travelling privately to Amsterdam with family.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>A good hotel bang in the centre of Amsterdam</span>. <span class='review-span highlight' data-aligned-summaries='2 8'>Rooms are clean</span> <span class='review-span highlight' data-aligned-summaries='2'>and modern</span> and I will be staying there again. A couple of things to note: <span class='review-span highlight' data-aligned-summaries='2'>My room had mosquitos (common for AMS this summer),</span> they were fully booked so could not give me another room but did eventually find some fly spay so problem solved. Breakfast is expensive at EUR15, just take a walk down the street and have a better breakfast in one of the cafes.</div><div class='text-box'>We found our room the be of nice size and bothe <span class='review-span highlight' data-aligned-summaries='4'>the room and bath were easy to navigate in a wheelchair</span>. <span class='review-span highlight' data-aligned-summaries='3'>The beds were compfortable</span> and <span class='review-span highlight' data-aligned-summaries='2'>the room were nicely appointed</span>. The staff was most helpful with directions and other touristy information. <span class='review-span highlight' data-aligned-summaries='6'>The food in the restaurant's food was quite good with a nice selection</span>. We would recommend the Eden Rembrandt Square as <span class='review-span highlight' data-aligned-summaries='0'>our stay was quite good</span>.</div><div class='text-box'>The location of the hotel is excellent. <span class='review-span highlight' data-aligned-summaries='1'>Its 5 mins from the Waterlooplein metro station</span> and hence easily accessible. Room service was mediocre - <span class='review-span highlight' data-aligned-summaries='8'>the staff came to clean the room once in 3 days in spite of a reminder.</span> <span class='review-span highlight' data-aligned-summaries='4'>Hotel rooms were of good size</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">A great hotel to stay at, it is central to the city centre of Amsterdam, yet still at a very reasonable price.</span> <span id="1" class="summary-sentence">With the hotel being only five minutes from the metro station access to travel and entertainment near Rembrandt Square or you can simply walk to most places.</span> <span id="2" class="summary-sentence">The rooms are very nice with great bathrooms.</span> <span id="3" class="summary-sentence">and the beds are so comfortable.</span> <span id="4" class="summary-sentence">Some rooms are on the small side and some are wheelchair friendly.</span> <span id="5" class="summary-sentence">Particularly rude member of staff on the reception desk that is very unhelpful.</span> <span id="6" class="summary-sentence">This hotel has a great seafood bistro restauraunt.</span> <span id="7" class="summary-sentence">Although there is Wi-Fi available at this hotel, it can be very slow and the staff aren't the most efficient at helping guests log in.</span> <span id="8" class="summary-sentence">The hotel is also quite dirty, particularly the carpets, and it can get very noisy and crowded in places.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_5_b_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Located on the Herengracht, one of the old canal rings encircling the city, <span class='review-span highlight' data-aligned-summaries='4'>the Ambassade is beautifully decorated</span> - we were open-mouthed at the quality of the furnishings. And it <span class='review-span highlight' data-aligned-summaries='5 6'>was staffed with</span> <span class='review-span highlight' data-aligned-summaries='5'>friendly,</span> <span class='review-span highlight' data-aligned-summaries='5 6'>knowledgeable</span>,<span class='review-span highlight' data-aligned-summaries='5'> multilingual</span> <span class='review-span highlight' data-aligned-summaries='5 6'>employees</span>. The location was perfect - we were within walking distance of museums, the Dam, the Red Light District, the Begjinhof, great restaurants and bars (we loved the Five Flies just around the corner, built in 1634). The breakfast was sumptuous, but seemed <span class='review-span highlight' data-aligned-summaries='0'>a bit pricey</span>, so we only tried it once. <span class='review-span highlight' data-aligned-summaries='0'>WE stayed for 3 nights, and</span> <span class='review-span highlight' data-aligned-summaries='0 1'>wouldn't hesitate to recommend it</span>.<span class='review-span highlight' data-aligned-summaries='1'></span></div><div class='text-box'>Stayed in this hotel on Saturday night for a very brief visit to the City. <span class='review-span highlight' data-aligned-summaries='5'>The staff at reception were exceptionally, kind and help and just couldn't do enough for us</span>. Joost Van Der Kwaak led the charge here and was amazing. <span class='review-span highlight' data-aligned-summaries='4'>The rooms are</span> divine, very large and <span class='review-span highlight' data-aligned-summaries='4'>beautifully decorated</span> - the most comfortable beds and pillows - <span class='review-span highlight' data-aligned-summaries='2'>we even managed to get a room with a superb view over the canal</span>. I loved the fact that everything is within walking distance - the museums, flower market etc. Will definitely go back. Yes <span class='review-span highlight' data-aligned-summaries='0'>it's a little pricey</span> but <span class='review-span highlight' data-aligned-summaries='0'>well worth every penny</span>!</div><div class='text-box'>We stayed there for around 5 days in April of this year and would definitely stay there again if finances allow. <span class='review-span highlight' data-aligned-summaries='5'>The staff was very friendly and professional</span>. The room was very nice and clean. We had <span class='review-span highlight' data-aligned-summaries='2'>a room overlooking the canal so that made it even nicer</span>. <span class='review-span highlight' data-aligned-summaries='3 7'>Free wireless internet in the room</span>. Nice clean bathroom. Comfortable bed. The location is also great, it was pretty much walking distance from everything we wanted to do. <span class='review-span highlight' data-aligned-summaries='0'>It was pretty expensive, but I do believe you get what you pay for - high quality</span>! <span class='review-span highlight' data-aligned-summaries='1'>No complaints at all</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='5'>The staff was amazingly handy in every aspect</span>. I simply found the hotel in Trip Advisor, never heard about. They rent bicycles themselves, so you are not attached to the time of rental stores. For example you can return the bike in the middle of dawn. Nice and <span class='review-span highlight' data-aligned-summaries='4'>stylish rooms</span>. They upgraded me to a better <span class='review-span highlight' data-aligned-summaries='2'>room with canal view</span>. They respond to all e-mails, request. They are 100%.</div><div class='text-box'>Spent a night at this very comfortable hotel. One of the most comfortable rooms I have ever been in. <span class='review-span highlight' data-aligned-summaries='0 1'>Everything is perfect</span>. Hotel is centrally located bu quiet. Just be careful ate at night to remember which side of the canal the hotel is on, if you forget, you may be wandering around for a while. <span class='review-span highlight' data-aligned-summaries='3 7'>Free Internet</span> <span class='review-span highlight' data-aligned-summaries='7'>and a printer too if you need it</span>.</div><div class='text-box'>Right in the center, close (walking distance) to everything you had to see in Amsterdam, bathroom is very, very clean. <span class='review-span highlight' data-aligned-summaries='3 7'>Rooms</span> are spacious <span class='review-span highlight' data-aligned-summaries='3 7'>with free internet access</span> if you have a laptop (<span class='review-span highlight' data-aligned-summaries='7'>there is also a free access near the front desk</span>) and.excellent breakfast! PS: <span class='review-span highlight' data-aligned-summaries='5 6'>The staff were incredibly</span> <span class='review-span highlight' data-aligned-summaries='5'>friendly</span> and <span class='review-span highlight' data-aligned-summaries='6'>helpful</span></div><div class='text-box'>We are fussy and can't think of anything critical to say about this hotel. Service, cleanliness, room size, breakfast, location and everything else were wonderful and, <span class='review-span highlight' data-aligned-summaries='0'>considering the quality, the cost was quite reasonable</span>.</div><div class='text-box'>I stayed at the ambassade in Oct <span class='review-span highlight' data-aligned-summaries='5'>staff: respectful,professional</span> location : <span class='review-span highlight' data-aligned-summaries='1'>ideal room</span>: standard.clean,cosy <span class='review-span highlight' data-aligned-summaries='0 1'>price:reasonable</span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">The stay at the hotel was quite expensive, but absolutely worth the cost.</span> <span id="1" class="summary-sentence">No complaints.</span> <span id="2" class="summary-sentence">The view from the room was great because it overlooked the canal.</span> <span id="3" class="summary-sentence">The wireless internet in the room was free, which is really useful.</span> <span id="4" class="summary-sentence">Even better though is that the rooms are luxurious and decorated to a lovely standard.</span> <span id="5" class="summary-sentence">All of the staff were lovely because they were friendly but professional at the same time.</span> <span id="6" class="summary-sentence">They were clearly very knowledgeable, which was just wonderful.</span> <span id="7" class="summary-sentence">The hotel provided free internet services and also the use of a printer too if needed.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_5_b_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Located on the Herengracht, one of the old canal rings encircling the city, <span class='review-span highlight' data-aligned-summaries='0'>the Ambassade is beautifully decorated</span> - we were open-mouthed at the quality of the furnishings. <span class='review-span highlight' data-aligned-summaries='4'>And it was staffed with friendly, knowledgeable, multilingual employees</span>. <span class='review-span highlight' data-aligned-summaries='0'>The location was perfect</span> - <span class='review-span highlight' data-aligned-summaries='1'>we were within walking distance of museums, the Dam, the Red Light District, the Begjinhof, great restaurants and bars</span> (we loved the Five Flies just around the corner, built in 1634). The breakfast was sumptuous, but <span class='review-span highlight' data-aligned-summaries='0'>seemed a bit pricey</span>, so we only tried it once. WE stayed for 3 nights, and wouldn't hesitate to recommend it.</div><div class='text-box'>Stayed in this hotel on Saturday night for a very brief visit to the City. <span class='review-span highlight' data-aligned-summaries='4'>The staff at reception were exceptionally, kind and help and just couldn't do enough for us</span>. Joost Van Der Kwaak led the charge here and was amazing. <span class='review-span highlight' data-aligned-summaries='2'>The rooms are</span> divine, <span class='review-span highlight' data-aligned-summaries='2'>very large</span> and beautifully decorated - the most comfortable beds and pillows - we even managed to get a room <span class='review-span highlight' data-aligned-summaries='2'>with a superb view over the canal</span>. I loved the fact that <span class='review-span highlight' data-aligned-summaries='1'>everything is within walking distance - the museums, flower market etc</span>. Will definitely go back. Yes <span class='review-span highlight' data-aligned-summaries='0'>it's a little pricey but well worth every penny</span>!</div><div class='text-box'>We stayed there for around 5 days in April of this year and would definitely stay there again if finances allow. <span class='review-span highlight' data-aligned-summaries='4'>The staff was very friendly and professional</span>. The room was very nice and clean. <span class='review-span highlight' data-aligned-summaries='2'>We had a room overlooking the canal</span> so that made it even nicer. <span class='review-span highlight' data-aligned-summaries='3 5'>Free wireless internet in the room</span>. Nice clean bathroom. Comfortable bed. <span class='review-span highlight' data-aligned-summaries='1'>The location is also great, it was pretty much walking distance from everything we wanted to do</span>. <span class='review-span highlight' data-aligned-summaries='0'>It was pretty expensive, but I do believe you get what you pay for - high quality</span>! <span class='review-span highlight' data-aligned-summaries='0'>No complaints at all</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='4'>The staff was amazingly handy in every aspect</span>. I simply found the hotel in Trip Advisor, never heard about. They rent bicycles themselves, so you are not attached to the time of rental stores. For example you can return the bike in the middle of dawn. <span class='review-span highlight' data-aligned-summaries='0'>Nice and stylish rooms</span>. They upgraded me to a better <span class='review-span highlight' data-aligned-summaries='2'>room with</span> <span class='review-span highlight' data-aligned-summaries='0 2'>canal view</span>. They respond to all e-mails, request. They are 100%.</div><div class='text-box'>Spent a night at this very comfortable hotel. One of the most comfortable rooms I have ever been in. <span class='review-span highlight' data-aligned-summaries='0'>Everything is perfect</span>. Hotel is centrally located bu quiet. Just be careful ate at night to remember which side of the canal the hotel is on, if you forget, you may be wandering around for a while. <span class='review-span highlight' data-aligned-summaries='3 5'>Free Internet</span> <span class='review-span highlight' data-aligned-summaries='5'>and a printer too if you need it</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Right in the center, close (walking distance) to everything you had to see in Amsterdam</span>, bathroom is very, very clean. <span class='review-span highlight' data-aligned-summaries='2'>Rooms are spacious</span> with <span class='review-span highlight' data-aligned-summaries='3 5'>free internet access</span> if you have a laptop (there is also a free access near the front desk) and.excellent breakfast! PS: <span class='review-span highlight' data-aligned-summaries='4'>The staff were incredibly friendly</span> and helpful</div><div class='text-box'>We are fussy and <span class='review-span highlight' data-aligned-summaries='0'>can't think of anything critical to say about this hotel</span>. Service, cleanliness, <span class='review-span highlight' data-aligned-summaries='2'>room size</span>, breakfast, <span class='review-span highlight' data-aligned-summaries='1'>location</span> and everything else <span class='review-span highlight' data-aligned-summaries='1 2'>were wonderful</span> and, considering the quality, <span class='review-span highlight' data-aligned-summaries='0'>the cost was quite reasonable</span>.</div><div class='text-box'>I stayed at the ambassade in Oct <span class='review-span highlight' data-aligned-summaries='4'>staff: respectful,professional</span> <span class='review-span highlight' data-aligned-summaries='1'>location : ideal</span> <span class='review-span highlight' data-aligned-summaries='2'>room</span>: <span class='review-span highlight' data-aligned-summaries='2'>standard.clean,cosy</span> <span class='review-span highlight' data-aligned-summaries='0'>price:reasonable</span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is a little bit pricey however it is well worth it and there is nothing at all to complain about.</span> <span id="1" class="summary-sentence">The location is ideal for those wanting to sight see, as everything is in walking distance from the hotel.</span> <span id="2" class="summary-sentence">The room in the hotel was very spacious and was overlooking the canal.</span> <span id="3" class="summary-sentence">Free wireless internet is also provided for guests.</span> <span id="4" class="summary-sentence">The staff were amiable and very professional, with a number of them able to speak different languages.</span> <span id="5" class="summary-sentence">The hotel offers free internet and also a printer if required.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_5_b_summ_2.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Located on the Herengracht, one of the old canal rings encircling the city, the Ambassade is beautifully decorated - <span class='review-span highlight' data-aligned-summaries='0'>we were open-mouthed at the quality of the furnishings</span>. <span class='review-span highlight' data-aligned-summaries='5'>And it was staffed with friendly, knowledgeable, multilingual employees</span>. <span class='review-span highlight' data-aligned-summaries='1'>The location was perfect -</span> <span class='review-span highlight' data-aligned-summaries='1 2'>we were within walking distance of museums, the Dam, the Red Light District, the Begjinhof</span>,<span class='review-span highlight' data-aligned-summaries='2'> great restaurants and bars</span> (we loved the Five Flies just around the corner, built in 1634). The breakfast was sumptuous, but seemed a bit pricey, so we only tried it once. WE stayed for 3 nights, and wouldn't hesitate to recommend it.</div><div class='text-box'>Stayed in this hotel on Saturday night for a very brief visit to the City. <span class='review-span highlight' data-aligned-summaries='5'>The staff at reception were exceptionally, kind and help</span> and just couldn't do enough for us. Joost Van Der Kwaak led the charge here and was amazing. <span class='review-span highlight' data-aligned-summaries='3'>The</span> <span class='review-span highlight' data-aligned-summaries='0 3'>rooms are</span> <span class='review-span highlight' data-aligned-summaries='0'>divine,</span> <span class='review-span highlight' data-aligned-summaries='0 3'>very large</span> <span class='review-span highlight' data-aligned-summaries='0'>and beautifully decorated</span> - <span class='review-span highlight' data-aligned-summaries='0 3'>the most comfortable beds</span> <span class='review-span highlight' data-aligned-summaries='0'>and pillows</span> - we even managed to get <span class='review-span highlight' data-aligned-summaries='3'>a room with a superb view over the canal</span>. I loved the fact that <span class='review-span highlight' data-aligned-summaries='1 2'>everything is within walking distance - the museums</span>,<span class='review-span highlight' data-aligned-summaries='1'> flower market etc</span>. Will definitely go back. Yes it's a little pricey but well worth every penny!</div><div class='text-box'>We stayed there for around 5 days in April of this year and would definitely stay there again if finances allow. <span class='review-span highlight' data-aligned-summaries='5'>The staff was very friendly and professional</span>. <span class='review-span highlight' data-aligned-summaries='3'>The room was</span> very nice and clean. We had a room <span class='review-span highlight' data-aligned-summaries='3'>overlooking the canal</span> so that made it even nicer. <span class='review-span highlight' data-aligned-summaries='6'>Free wireless internet in the room</span>. Nice clean bathroom. <span class='review-span highlight' data-aligned-summaries='0 3'>Comfortable bed</span>. <span class='review-span highlight' data-aligned-summaries='1'>The location is also great, it was pretty much walking distance from everything we wanted to do</span>. <span class='review-span highlight' data-aligned-summaries='0'>It was pretty expensive, but I do believe you get what you pay for - high quality</span>! No complaints at all.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 5'>The staff was amazingly handy in every aspect</span>. I simply found the hotel in Trip Advisor, never heard about. They rent bicycles themselves, so you are not attached to the time of rental stores. For example you can return the bike in the middle of dawn. Nice and stylish rooms. They upgraded me to a better <span class='review-span highlight' data-aligned-summaries='3'>room with canal view.</span> They respond to all e-mails, request. They are 100%.</div><div class='text-box'>Spent a night at this <span class='review-span highlight' data-aligned-summaries='0'>very comfortable hotel. One of the most comfortable rooms I have ever been in</span>. <span class='review-span highlight' data-aligned-summaries='0'>Everything is perfect</span>. Hotel is centrally located bu quiet. Just be careful ate at night to remember which side of the canal the hotel is on, if you forget, you may be wandering around for a while. <span class='review-span highlight' data-aligned-summaries='4 6'>Free Internet</span> <span class='review-span highlight' data-aligned-summaries='6'>and a printer too</span> <span class='review-span highlight' data-aligned-summaries='4 6'>if you need it</span>.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='1'>Right in the center, close (walking distance) to everything you had to see in Amsterdam</span>, bathroom is very, very clean. <span class='review-span highlight' data-aligned-summaries='3'>Rooms are spacious</span> with <span class='review-span highlight' data-aligned-summaries='4 6'>free internet access</span> if you have a laptop (there is also a free access near the front desk) and.excellent breakfast! PS: <span class='review-span highlight' data-aligned-summaries='5'>The staff were incredibly friendly and helpful</span></div><div class='text-box'>We are fussy and can't think of anything critical to say about this hotel. Service, cleanliness, <span class='review-span highlight' data-aligned-summaries='3'>room size</span>, breakfast, <span class='review-span highlight' data-aligned-summaries='1'>location</span> and everything else <span class='review-span highlight' data-aligned-summaries='1 3'>were wonderful</span> and, <span class='review-span highlight' data-aligned-summaries='0'>considering the quality, the cost was quite reasonable</span>.</div><div class='text-box'>I stayed at the ambassade in Oct <span class='review-span highlight' data-aligned-summaries='0'>staff: respectful,professional</span> <span class='review-span highlight' data-aligned-summaries='0 1'>location : ideal</span> <span class='review-span highlight' data-aligned-summaries='0'>room: standard.clean,cosy price:reasonable</span></div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">Although it is quite an expensive hotel, it is great value for money as it is of high quality and makes for a really comfortable stay.</span> <span id="1" class="summary-sentence">For ease of sightseeing this hotel's location is perfect.</span> <span id="2" class="summary-sentence">All within walking distances are the Dam, museums, the Begjinhot, restaurants and bars and the Red Light District.</span> <span id="3" class="summary-sentence">The room was spacious and overlooking the canal and very comfortable beds.</span> <span id="4" class="summary-sentence">It also came with free internet access.</span> <span id="5" class="summary-sentence">The staff were very helpful and friendly.</span> <span id="6" class="summary-sentence">The hotel does offer free internet and if you need it you can use their printer.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_6_a_summ_0.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Terrible disappointment</span> <span class='review-span highlight' data-aligned-summaries='0 1'>Maybe a 1 or 2 star</span>,<span class='review-span highlight' data-aligned-summaries='1'> but NOT 4</span>! The staff was exceptional. Very helpful and thoughtful.The rooms were a disappointment. <span class='review-span highlight' data-aligned-summaries='6'>They are all run down</span> (at least the 3 we saw), <span class='review-span highlight' data-aligned-summaries='6'>items are missing and not replaced</span>, i.e. soap dishes, etc. <span class='review-span highlight' data-aligned-summaries='7'>The carpeting is torn and worn</span>. The Air conditioners barely work, and are rusty and noisy. <span class='review-span highlight' data-aligned-summaries='3'>All the rooms we saw smell from odor</span>. We had to pay to Upgrade to the top floor to get a halfway decent room, which is still 2 star in my opinion. <span class='review-span highlight' data-aligned-summaries='8'>The elevator is not large enough for a surfboard to fit in it</span> (kind of ironic don't you think), so you have to leave your board in a lockup room in the lobby.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Great little hotel</span>! We stayed here for two days before leaving the islands after getting married on Kaua`i in August, 2004. We booked with the Entertainment Card discount, so the price ?even with daily parking ?was great. I prefer being at the eastern end of Waikiki (where the Beachside is) and it's proximity to <span class='review-span highlight' data-aligned-summaries='2'>the beach itself, right ACROSS THE STREET, is perfect</span>. <span class='review-span highlight' data-aligned-summaries='3'>The room was small</span> but nice. Upon hearing that we just got married, the desk clerk upgraded us to a full ocean view room and sent up a split of champagne ?a very nice touch. Needless to say, the view was spectacular and we enjoyed having a glass of wine on the balcony before heading out to dinner both nights.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Would recommend this hotel</span>. We stayed at this hotel in October of 2005 for 7 days. The hotel was small but we knew that when we made our reservations. We found that the stafff was extremely helpful and gave us advice on the various activities that we should participate in and would help us to sign up for them. <span class='review-span highlight' data-aligned-summaries='0 1'>If your looking for full on resort than this is not your place but it was perfect for what we needed</span>. <span class='review-span highlight' data-aligned-summaries='3'>The rooms are small</span> and there is no pool on site. Being across the street from the beach we wouldn't have used the pool anyways. We thought that is was in the perfect location, <span class='review-span highlight' data-aligned-summaries='2'>we were able to walk to everything</span>. I would recommend this hotel and would also stay here again.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Fab Location</span> <span class='review-span highlight' data-aligned-summaries='2'>Literally across the road from Waikik beach, easy walk to all Waikik has to offer</span>. Understand hotel has recently been bought by Aqua chain and looks as if it will be undergoing renovation in the near future - scaffolding all around hotel during my stay with workmen there friom 9 - 5. Interior does need updating and is rather worn and dated - however, location compensates for this.<span class='review-span highlight' data-aligned-summaries='0 4'>Breakfast is a bit of a joke</span> though and <span class='review-span highlight' data-aligned-summaries='4'>unless you are there when it goes out forget it</span>, my 1st morning there I arrived <span class='review-span highlight' data-aligned-summaries='6'>at about 8.15am to be told there was nothing left</span>! Even when there there is food left it's poor quality muffins only.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0'>Great Staff, superb location</span> - will be back ! First time visit to Hawaii - this hotel's location could not be beaten - <span class='review-span highlight' data-aligned-summaries='2'>just cross the road and you are on Waikiki beach and the International Market Place is a few yards down the road</span>. Staff are very friendly and cannot do enough to help. <span class='review-span highlight' data-aligned-summaries='3'>Rooms are spotlessly clean</span> - will definitely stay there again without hesitation.</div><div class='text-box'>Very oriental <span class='review-span highlight' data-aligned-summaries='0 1 3'>The rooms are not large</span>,<span class='review-span highlight' data-aligned-summaries='0 1'></span> <span class='review-span highlight' data-aligned-summaries='0 1 3'>but decorated beautifullly with antiques</span>. <span class='review-span highlight' data-aligned-summaries='4'>Breakfast in the atrium with</span> <span class='review-span highlight' data-aligned-summaries='4 5'>the Kona coffee was great</span>. <span class='review-span highlight' data-aligned-summaries='2'>Short walk across the stree to the beach</span>. I would recommed it to anyone.</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='0 1'>Excellent for the price</span> This was taken from the beach, the brown building to the left of the blue signed building is the</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='3'>Small room</span>.Great view View from the balcony.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This is a really great little hotel.</span> <span id="1" class="summary-sentence">It isn't a full-on resort but it was nice all the same.</span> <span id="2" class="summary-sentence">There are many things to do within walking distance.</span> <span id="3" class="summary-sentence">The hotel rooms are smaller, but clean and furnished well with antiques for some charm.</span> <span id="4" class="summary-sentence">The breakfast at the hotel was adequate.</span> <span id="5" class="summary-sentence">The coffee was great.</span> <span id="6" class="summary-sentence">There were some items missing and there was a run-down feel here.</span> <span id="7" class="summary-sentence">The carpeting did not help with the worn-down atmosphere.</span> <span id="8" class="summary-sentence">The elevators weren't that big either meaning a surfboard could not even fit in it.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>
html_files/dev/CocoTrip-dev_cont-inst_6_a_summ_1.html ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document Review</title>
8
+ <style>
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ display: flex;
12
+ justify-content: center; /* This will center the .reviews container on the screen */
13
+ align-items: flex-start;
14
+ height: 100vh;
15
+ margin: 2px; /* Remove default margin */
16
+ }
17
+
18
+ .highlight { background-color: yellow;
19
+ color: black !important; /* Dark grey for muted text */
20
+ cursor: pointer;}
21
+ .not-hover-highlight { background-color: lightyellow;
22
+ color: #606060 !important; /* Dark grey for muted text */}
23
+ .summary {
24
+ width: 50%;
25
+ font-size: 1.0rem;
26
+ padding: 10px;
27
+ height: 100vh; /* Maximum height to a third of the viewport height */
28
+ background-color: #9e9e9e0a;
29
+ }
30
+ .reviews {
31
+ width: 50%;
32
+ font-size: 0.7rem;
33
+ display: flex;
34
+ flex-wrap: wrap;
35
+ padding: 10px;
36
+ max-height: 100vh; /* Maximum height to a third of the viewport height */
37
+ overflow-y: auto; /* Enable vertical scrolling */
38
+ background-color: #9e9e9e0a; /* Light grey background */
39
+ }
40
+ .text-box {
41
+ width: calc(100% - 20px); /* Adjust based on padding */
42
+ margin: 10px;
43
+ padding: 10px;
44
+ background-color: #9e9e9e0a; /* Light grey background */
45
+ color: #606060bf;
46
+ border: 2px solid #ddd; /* Cartoonish border */
47
+ border-radius: 20px; /* Rounded corners for cartoonish effect */
48
+ position: relative;
49
+ box-shadow: 3px 3px #bbb; /* Soft shadow for depth */
50
+ }
51
+ .text-box:before {
52
+ content: '';
53
+ position: absolute;
54
+ right: 100%;
55
+ bottom: 20%;
56
+ border-top: 10px solid transparent;
57
+ border-bottom: 10px solid transparent;
58
+ border-right: 10px solid #ddd; /* Arrow matching the border */
59
+ }
60
+ .summary-box {
61
+ padding: 10px;
62
+ margin: 10px 0;
63
+ background-color: #e6e6fa; /* Lavender background for a pleasant look */
64
+ border: 1px solid #ddd; /* Light border for definition */
65
+ border-radius: 5px; /* Slightly rounded corners */
66
+ box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
67
+ cursor: pointer;
68
+ }
69
+ h4 { margin-top: 0; }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class='column reviews'><h2>Reviews</h2><div class='text-box'>Terrible disappointment Maybe a 1 or 2 star, but NOT 4! The staff was exceptional. Very helpful and thoughtful.<span class='review-span highlight' data-aligned-summaries='3 5 7'>The rooms were</span> a disappointment. They are <span class='review-span highlight' data-aligned-summaries='3 5 7'>all run down</span> (at least the 3 we saw), <span class='review-span highlight' data-aligned-summaries='8'>items are missing and not replaced</span>, i.e. soap dishes, etc. <span class='review-span highlight' data-aligned-summaries='5 7'>The carpeting is torn and worn</span>. <span class='review-span highlight' data-aligned-summaries='1'>The Air conditioners barely work, and are rusty and noisy</span>. <span class='review-span highlight' data-aligned-summaries='3'>All the rooms we saw smell from odor</span>. We <span class='review-span highlight' data-aligned-summaries='3 4'>had to pay to Upgrade to the top floor to get a halfway decent room</span>,<span class='review-span highlight' data-aligned-summaries='4'> which is still 2 star in my opinion</span>. The elevator is not large enough for a surfboard to fit in it (kind of ironic don't you think), so you have to leave your board in a lockup room in the lobby.</div><div class='text-box'>Great little hotel! We stayed here for two days before leaving the islands after getting married on Kaua`i in August, 2004. We booked with the Entertainment Card discount, so the price ?even with daily parking ?was great. I prefer being at the eastern end of Waikiki (where the Beachside is) and it's proximity to <span class='review-span highlight' data-aligned-summaries='2'>the beach itself, right ACROSS THE STREET, is perfect</span>. <span class='review-span highlight' data-aligned-summaries='3'>The room was small but nice</span>. Upon hearing that we just got married, <span class='review-span highlight' data-aligned-summaries='4'>the desk clerk upgraded us to a full ocean view room</span> and sent up a split of champagne ?a very nice touch. Needless to say, the view was spectacular and we enjoyed having a glass of wine on the balcony before heading out to dinner both nights.</div><div class='text-box'>Would recommend this hotel. We stayed at this hotel in October of 2005 for 7 days. The hotel was small but we knew that when we made our reservations. We found that the stafff was extremely helpful and gave us advice on the various activities that we should participate in and would help us to sign up for them. If your looking for full on resort than this is not your place but it was perfect for what we needed. <span class='review-span highlight' data-aligned-summaries='3'>The rooms are small</span> and there is no pool on site. Being across the street from the beach we wouldn't have used the pool anyways. We thought that is was in the perfect location, we were able to walk to everything. I would recommend this hotel and would also stay here again.</div><div class='text-box'>Fab Location Literally across the road from Waikik beach, easy walk to all Waikik has to offer. Understand <span class='review-span highlight' data-aligned-summaries='0'>hotel</span> has recently been bought by Aqua chain and <span class='review-span highlight' data-aligned-summaries='0'>looks as if it will be undergoing renovation in the near future - scaffolding all around</span> hotel during my stay with workmen there friom 9 - 5. <span class='review-span highlight' data-aligned-summaries='7'>Interior does need updating and is rather worn and dated</span> - however, location compensates for this.<span class='review-span highlight' data-aligned-summaries='6'>Breakfast is a bit of a joke</span> though and unless you are there when it goes out forget it, my 1st morning there I arrived at about 8.15am to be told there was nothing left! <span class='review-span highlight' data-aligned-summaries='6'>Even when there there is food left it's poor quality muffins only</span>.</div><div class='text-box'>Great Staff, superb location - will be back ! First time visit to Hawaii - this hotel's location could not be beaten - <span class='review-span highlight' data-aligned-summaries='2'>just cross the road and you are on Waikiki beach and the International Market Place is a few yards down the road</span>. Staff are very friendly and cannot do enough to help. <span class='review-span highlight' data-aligned-summaries='3 5'>Rooms are spotlessly clean</span> - will definitely stay there again without hesitation.</div><div class='text-box'>Very oriental <span class='review-span highlight' data-aligned-summaries='3 5'>The rooms are not large, but decorated beautifullly</span> with antiques. <span class='review-span highlight' data-aligned-summaries='6'>Breakfast in the atrium</span> with the Kona coffee <span class='review-span highlight' data-aligned-summaries='6'>was great</span>. <span class='review-span highlight' data-aligned-summaries='2'>Short walk across the stree to the beach</span>. I would recommed it to anyone.</div><div class='text-box'>Excellent for the price This was taken from the beach, the brown building to the left of the blue signed building is the</div><div class='text-box'><span class='review-span highlight' data-aligned-summaries='3'>Small room</span>.<span class='review-span highlight' data-aligned-summaries='0 3'>Great view</span> View <span class='review-span highlight' data-aligned-summaries='0'>from the balcony</span>.</div></div><div class='column summary'><h4>Summary</h4><div class='summary-box'><span id="0" class="summary-sentence">This hotel is currently undergoing renovations so the outside is an eyesore.</span> <span id="1" class="summary-sentence">Air conditioners are outdated and not well maintained too.</span> <span id="2" class="summary-sentence">There are great sights to visit nearby.</span> <span id="3" class="summary-sentence">Some of the rooms were small but nice, others smelled a bit</span> <span id="4" class="summary-sentence">so an upgrade may be necessary to get a nicer experience.</span> <span id="5" class="summary-sentence">The nicer rooms were very clean and decorated beautifully.</span> <span id="6" class="summary-sentence">The breakfast in the atrium is superb when there is enough food for everyone.</span> <span id="7" class="summary-sentence">The rooms could do with some upgrading as some of the carpet has been worn down.</span> <span id="8" class="summary-sentence">Items are sometimes missing from the rooms and the elevator is not big enough for a surfboard.</span></div></div>
74
+ <script>
75
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
76
+ sentence.addEventListener('mouseenter', function() {
77
+ const summaryId = this.getAttribute('id');
78
+ document.querySelectorAll('.review-span').forEach(span => {
79
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
80
+ span.classList.remove('highlight');
81
+ span.classList.add('not-hover-highlight');
82
+ }
83
+ });
84
+ this.classList.add('highlight');
85
+ });
86
+
87
+ sentence.addEventListener('mouseleave', function() {
88
+ const summaryId = this.getAttribute('id');
89
+ document.querySelectorAll('.review-span').forEach(span => {
90
+ if (!span.getAttribute('data-aligned-summaries').split(' ').includes(summaryId)) {
91
+ span.classList.remove('not-hover-highlight');
92
+ span.classList.add('highlight');
93
+ }
94
+ this.classList.remove('highlight');
95
+ });
96
+ });
97
+ });
98
+
99
+ document.querySelectorAll('.review-span').forEach(span => {
100
+ span.addEventListener('mouseenter', function() {
101
+ document.querySelectorAll('.review-span').forEach(span => {
102
+ if (span !== this) {
103
+ span.classList.remove('highlight');
104
+ span.classList.add('not-hover-highlight');
105
+ }
106
+ });
107
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
108
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
109
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
110
+ sentence.classList.add('highlight');
111
+ }
112
+ });
113
+ });
114
+ });
115
+
116
+ document.querySelectorAll('.review-span').forEach(span => {
117
+ span.addEventListener('mouseleave', function() {
118
+ const AlignSummariesId = this.getAttribute('data-aligned-summaries').split(' ');
119
+ document.querySelectorAll('.review-span').forEach(span => {
120
+ if (span !== this) {
121
+ span.classList.remove('not-hover-highlight');
122
+ span.classList.add('highlight');
123
+ }
124
+ });
125
+ document.querySelectorAll('.summary-sentence').forEach(sentence => {
126
+ if (AlignSummariesId.includes(sentence.getAttribute('id'))) {
127
+ sentence.classList.remove('highlight');
128
+ }
129
+ });
130
+ });
131
+ });
132
+
133
+ </script>
134
+ </body>
135
+ </html>