patternfly-sass 3.3.3 → 3.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/assets/javascripts/patternfly.js +5 -5
- data/assets/javascripts/patternfly.min.js +1 -1
- data/bower.json +2 -2
- data/lib/patternfly-sass/version.rb +2 -2
- data/spec/html/area-charts.html +50 -40
- data/spec/html/bar-charts.html +192 -131
- data/spec/html/cards.html +437 -418
- data/spec/html/donut-charts.html +165 -131
- data/spec/html/index.html +3 -0
- data/spec/html/layout-alt-fixed-inner-scroll.html +437 -418
- data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html +437 -418
- data/spec/html/layout-alt-fixed-with-footer.html +437 -418
- data/spec/html/layout-alt-fixed.html +437 -418
- data/spec/html/line-charts.html +120 -86
- data/spec/html/list-view.html +128 -95
- data/spec/html/pie-charts.html +107 -78
- data/spec/html/utilization-bar-charts.html +69 -0
- data/spec/html/vertical-navigation-without-icons.html +205 -205
- data/spec/html/vertical-navigation.html +205 -205
- metadata +4 -2
data/spec/html/line-charts.html
CHANGED
@@ -43,101 +43,135 @@
|
|
43
43
|
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a>, <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://c3js.org/">http://c3js.org/</a>
|
44
44
|
</div>
|
45
45
|
<hr>
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
</div>
|
64
|
-
</div>
|
65
|
-
<h2>Spline Chart</h2>
|
66
|
-
<div class="row">
|
67
|
-
<div class="col-lg-6 col-sm-12">
|
68
|
-
<div id="splineChart" class="line-chart-pf"></div>
|
69
|
-
</div>
|
70
|
-
</div>
|
71
|
-
<h2>Single Spline Chart</h2>
|
72
|
-
<div class="row">
|
73
|
-
<div class="col-lg-6 col-sm-12">
|
74
|
-
<div id="singleSplineChart" class="line-chart-pf"></div>
|
75
|
-
</div>
|
76
|
-
</div>
|
77
|
-
<script>
|
46
|
+
<h2>Sparkline</h2>
|
47
|
+
<div class="row">
|
48
|
+
<div class="col-md-4">
|
49
|
+
<div id="sparklineChart" class="chart-pf-sparkline"></div>
|
50
|
+
<div>Less than one year remaining</div>
|
51
|
+
<script>
|
52
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
53
|
+
var sparklineChartConfig = c3ChartDefaults.getDefaultSparklineConfig();
|
54
|
+
sparklineChartConfig.bindto = '#sparklineChart';
|
55
|
+
sparklineChartConfig.data = {
|
56
|
+
columns: [
|
57
|
+
['%', 10, 14, 12, 20, 31, 27, 44, 36, 52, 55, 62, 68, 69, 88, 74, 88, 91],
|
58
|
+
],
|
59
|
+
type: 'area'
|
60
|
+
};
|
61
|
+
var sparklineChart = c3.generate(sparklineChartConfig);
|
62
|
+
</script>
|
78
63
|
|
79
|
-
|
64
|
+
</div>
|
65
|
+
</div>
|
66
|
+
<h2>Line Chart</h2>
|
67
|
+
<div class="row">
|
68
|
+
<div class="col-lg-6 col-sm-12">
|
69
|
+
<div id="lineChart" class="line-chart-pf"></div>
|
70
|
+
<script>
|
71
|
+
var lineChartDataColumns = [
|
72
|
+
['data1', 30, 200, 100, 400, 150, 250],
|
73
|
+
['data2', 50, 220, 310, 240, 115, 25],
|
74
|
+
['data3', 70, 100, 390, 295, 170, 220],
|
75
|
+
['data4', 10, 340, 30, 290, 35, 20],
|
76
|
+
['data5', 90, 150, 160, 165, 180, 5]
|
77
|
+
];
|
78
|
+
var singleLineChartDataColumns = [
|
79
|
+
['data1', 30, 200, 100, 400, 150, 250]
|
80
|
+
];
|
80
81
|
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
var sparklineChart = c3.generate(sparklineChartConfig);
|
82
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
83
|
+
var lineChartConfig = c3ChartDefaults.getDefaultLineConfig();
|
84
|
+
lineChartConfig.bindto = '#lineChart';
|
85
|
+
lineChartConfig.data = {
|
86
|
+
columns: lineChartDataColumns,
|
87
|
+
type: 'line'
|
88
|
+
};
|
89
|
+
var lineChart = c3.generate(lineChartConfig);
|
90
|
+
</script>
|
91
91
|
|
92
|
+
</div>
|
93
|
+
</div>
|
94
|
+
<h2>Single Line Chart</h2>
|
95
|
+
<div class="row">
|
96
|
+
<div class="col-lg-6 col-sm-12">
|
97
|
+
<div id="singleLineChart" class="line-chart-pf"></div>
|
98
|
+
<script>
|
99
|
+
var lineChartDataColumns = [
|
100
|
+
['data1', 30, 200, 100, 400, 150, 250],
|
101
|
+
['data2', 50, 220, 310, 240, 115, 25],
|
102
|
+
['data3', 70, 100, 390, 295, 170, 220],
|
103
|
+
['data4', 10, 340, 30, 290, 35, 20],
|
104
|
+
['data5', 90, 150, 160, 165, 180, 5]
|
105
|
+
];
|
106
|
+
var singleLineChartDataColumns = [
|
107
|
+
['data1', 30, 200, 100, 400, 150, 250]
|
108
|
+
];
|
92
109
|
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
['data1', 30, 200, 100, 400, 150, 250]
|
102
|
-
];
|
110
|
+
var singleLineChartConfig = c3ChartDefaults.getDefaultSingleLineConfig();
|
111
|
+
singleLineChartConfig.bindto = '#singleLineChart';
|
112
|
+
singleLineChartConfig.data = {
|
113
|
+
columns: singleLineChartDataColumns,
|
114
|
+
type: 'line'
|
115
|
+
};
|
116
|
+
var singleLineChart = c3.generate(singleLineChartConfig);
|
117
|
+
</script>
|
103
118
|
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
119
|
+
</div>
|
120
|
+
</div>
|
121
|
+
<h2>Spline Chart</h2>
|
122
|
+
<div class="row">
|
123
|
+
<div class="col-lg-6 col-sm-12">
|
124
|
+
<div id="splineChart" class="line-chart-pf"></div>
|
125
|
+
<script>
|
126
|
+
var lineChartDataColumns = [
|
127
|
+
['data1', 30, 200, 100, 400, 150, 250],
|
128
|
+
['data2', 50, 220, 310, 240, 115, 25],
|
129
|
+
['data3', 70, 100, 390, 295, 170, 220],
|
130
|
+
['data4', 10, 340, 30, 290, 35, 20],
|
131
|
+
['data5', 90, 150, 160, 165, 180, 5]
|
132
|
+
];
|
133
|
+
var singleLineChartDataColumns = [
|
134
|
+
['data1', 30, 200, 100, 400, 150, 250]
|
135
|
+
];
|
112
136
|
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
137
|
+
var splineChartConfig = c3ChartDefaults.getDefaultLineConfig();
|
138
|
+
splineChartConfig.bindto = '#splineChart';
|
139
|
+
splineChartConfig.data = {
|
140
|
+
columns: lineChartDataColumns,
|
141
|
+
type: 'spline'
|
142
|
+
};
|
143
|
+
var splineChart = c3.generate(splineChartConfig);
|
144
|
+
</script>
|
121
145
|
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
146
|
+
</div>
|
147
|
+
</div>
|
148
|
+
<h2>Single Spline Chart</h2>
|
149
|
+
<div class="row">
|
150
|
+
<div class="col-lg-6 col-sm-12">
|
151
|
+
<div id="singleSplineChart" class="line-chart-pf"></div>
|
152
|
+
<script>
|
153
|
+
var lineChartDataColumns = [
|
154
|
+
['data1', 30, 200, 100, 400, 150, 250],
|
155
|
+
['data2', 50, 220, 310, 240, 115, 25],
|
156
|
+
['data3', 70, 100, 390, 295, 170, 220],
|
157
|
+
['data4', 10, 340, 30, 290, 35, 20],
|
158
|
+
['data5', 90, 150, 160, 165, 180, 5]
|
159
|
+
];
|
160
|
+
var singleLineChartDataColumns = [
|
161
|
+
['data1', 30, 200, 100, 400, 150, 250]
|
162
|
+
];
|
130
163
|
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
164
|
+
var singleSplineChartConfig = c3ChartDefaults.getDefaultSingleLineConfig();
|
165
|
+
singleSplineChartConfig.bindto = '#singleSplineChart';
|
166
|
+
singleSplineChartConfig.data = {
|
167
|
+
columns: singleLineChartDataColumns,
|
168
|
+
type: 'spline'
|
169
|
+
};
|
170
|
+
var singleSplineChart = c3.generate(singleSplineChartConfig);
|
171
|
+
</script>
|
139
172
|
|
140
|
-
|
173
|
+
</div>
|
174
|
+
</div>
|
141
175
|
|
142
176
|
</div><!-- /container -->
|
143
177
|
</body>
|
data/spec/html/list-view.html
CHANGED
@@ -99,10 +99,20 @@
|
|
99
99
|
</div>
|
100
100
|
</div>
|
101
101
|
</div>
|
102
|
-
|
102
|
+
<script>
|
103
|
+
// Row Checkbox Selection
|
104
|
+
$(document).ready(function () {
|
105
|
+
$("input[type='checkbox']").change(function (e) {
|
106
|
+
if ($(this).is(":checked")) {
|
107
|
+
$(this).closest('.list-group-item').addClass("active");
|
108
|
+
} else {
|
109
|
+
$(this).closest('.list-group-item').removeClass("active");
|
110
|
+
}
|
111
|
+
});
|
112
|
+
});
|
113
|
+
</script>
|
103
114
|
<h2>Row Variations</h2>
|
104
115
|
<div class="list-group list-view-pf">
|
105
|
-
|
106
116
|
<div class="list-group-item list-view-pf-stacked">
|
107
117
|
<div class="list-view-pf-actions">
|
108
118
|
<button class="btn btn-default">Action</button>
|
@@ -151,7 +161,91 @@
|
|
151
161
|
</div>
|
152
162
|
</div>
|
153
163
|
</div>
|
164
|
+
</div>
|
165
|
+
<script>
|
166
|
+
// Donut Charts
|
167
|
+
var c3ChartDefaults = $().c3ChartDefaults();
|
168
|
+
var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
|
169
|
+
customDonutChartConfig.size.height = 71;
|
170
|
+
customDonutChartConfig.donut.width = 5;
|
171
|
+
customDonutChartConfig.bindto = '#chart1';
|
172
|
+
customDonutChartConfig.data = {
|
173
|
+
type: "donut",
|
174
|
+
columns: [
|
175
|
+
["Used", 34],
|
176
|
+
["Available", 86]
|
177
|
+
],
|
178
|
+
groups: [
|
179
|
+
["used", "available"]
|
180
|
+
],
|
181
|
+
order: null
|
182
|
+
};
|
183
|
+
c3.generate(customDonutChartConfig);
|
184
|
+
var donutChartTitle = d3.select("#chart1").select('text.c3-chart-arcs-title');
|
185
|
+
donutChartTitle.text("");
|
186
|
+
donutChartTitle.insert('tspan').text("34%").classed('list-view-donut-title', true);
|
187
|
+
|
188
|
+
customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
|
189
|
+
customDonutChartConfig.size.height = 71;
|
190
|
+
customDonutChartConfig.donut.width = 5;
|
191
|
+
customDonutChartConfig.bindto = '#chart2';
|
192
|
+
customDonutChartConfig.data = {
|
193
|
+
type: "donut",
|
194
|
+
columns: [
|
195
|
+
["Used", 21],
|
196
|
+
["Available", 79]
|
197
|
+
],
|
198
|
+
groups: [
|
199
|
+
["used", "available"]
|
200
|
+
],
|
201
|
+
order: null
|
202
|
+
};
|
203
|
+
c3.generate(customDonutChartConfig);
|
204
|
+
donutChartTitle = d3.select("#chart2").select('text.c3-chart-arcs-title');
|
205
|
+
donutChartTitle.text("");
|
206
|
+
donutChartTitle.insert('tspan').text("21%").classed('list-view-donut-title', true);
|
207
|
+
|
208
|
+
customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
|
209
|
+
customDonutChartConfig.size.height = 71;
|
210
|
+
customDonutChartConfig.donut.width = 5;
|
211
|
+
customDonutChartConfig.bindto = '#chart3';
|
212
|
+
customDonutChartConfig.data = {
|
213
|
+
type: "donut",
|
214
|
+
columns: [
|
215
|
+
["Used", 14],
|
216
|
+
["Available", 86]
|
217
|
+
],
|
218
|
+
groups: [
|
219
|
+
["used", "available"]
|
220
|
+
],
|
221
|
+
order: null
|
222
|
+
};
|
223
|
+
c3.generate(customDonutChartConfig);
|
224
|
+
donutChartTitle = d3.select("#chart3").select('text.c3-chart-arcs-title');
|
225
|
+
donutChartTitle.text("");
|
226
|
+
donutChartTitle.insert('tspan').text("14%").classed('list-view-donut-title', true);
|
154
227
|
|
228
|
+
customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
|
229
|
+
customDonutChartConfig.size.height = 71;
|
230
|
+
customDonutChartConfig.donut.width = 5;
|
231
|
+
customDonutChartConfig.bindto = '#chart4';
|
232
|
+
customDonutChartConfig.data = {
|
233
|
+
type: "donut",
|
234
|
+
columns: [
|
235
|
+
["Used", 25],
|
236
|
+
["Available", 75]
|
237
|
+
],
|
238
|
+
groups: [
|
239
|
+
["used", "available"]
|
240
|
+
],
|
241
|
+
order: null
|
242
|
+
};
|
243
|
+
c3.generate(customDonutChartConfig);
|
244
|
+
donutChartTitle = d3.select("#chart4").select('text.c3-chart-arcs-title');
|
245
|
+
donutChartTitle.text("");
|
246
|
+
donutChartTitle.insert('tspan').text("25%").classed('list-view-donut-title', true);
|
247
|
+
</script>
|
248
|
+
<div class="list-group list-view-pf">
|
155
249
|
<div class="list-group-item list-view-pf-stacked">
|
156
250
|
<div class="list-view-pf-actions">
|
157
251
|
<button class="btn btn-default">Action</button>
|
@@ -207,7 +301,8 @@
|
|
207
301
|
</div>
|
208
302
|
</div>
|
209
303
|
</div>
|
210
|
-
|
304
|
+
</div>
|
305
|
+
<div class="list-group list-view-pf">
|
211
306
|
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
|
212
307
|
<div class="list-view-pf-checkbox">
|
213
308
|
<input type="checkbox">
|
@@ -253,7 +348,20 @@
|
|
253
348
|
</div>
|
254
349
|
</div>
|
255
350
|
</div>
|
256
|
-
|
351
|
+
</div>
|
352
|
+
<script>
|
353
|
+
// Row Checkbox Selection
|
354
|
+
$(document).ready(function () {
|
355
|
+
$("input[type='checkbox']").change(function (e) {
|
356
|
+
if ($(this).is(":checked")) {
|
357
|
+
$(this).closest('.list-group-item').addClass("active");
|
358
|
+
} else {
|
359
|
+
$(this).closest('.list-group-item').removeClass("active");
|
360
|
+
}
|
361
|
+
});
|
362
|
+
});
|
363
|
+
</script>
|
364
|
+
<div class="list-group list-view-pf">
|
257
365
|
<div class="list-group-item">
|
258
366
|
<div class="list-view-pf-checkbox">
|
259
367
|
<input type="checkbox">
|
@@ -284,7 +392,20 @@
|
|
284
392
|
</div>
|
285
393
|
</div>
|
286
394
|
</div>
|
287
|
-
|
395
|
+
</div>
|
396
|
+
<script>
|
397
|
+
// Row Checkbox Selection
|
398
|
+
$(document).ready(function () {
|
399
|
+
$("input[type='checkbox']").change(function (e) {
|
400
|
+
if ($(this).is(":checked")) {
|
401
|
+
$(this).closest('.list-group-item').addClass("active");
|
402
|
+
} else {
|
403
|
+
$(this).closest('.list-group-item').removeClass("active");
|
404
|
+
}
|
405
|
+
});
|
406
|
+
});
|
407
|
+
</script>
|
408
|
+
<div class="list-group list-view-pf">
|
288
409
|
<div class="list-group-item">
|
289
410
|
<div class="list-view-pf-main-info">
|
290
411
|
<div class="list-view-pf-left">
|
@@ -312,7 +433,6 @@
|
|
312
433
|
</div>
|
313
434
|
</div>
|
314
435
|
</div>
|
315
|
-
|
316
436
|
<div class="list-group-item">
|
317
437
|
<div class="list-view-pf-main-info">
|
318
438
|
<div class="list-view-pf-left">
|
@@ -340,7 +460,6 @@
|
|
340
460
|
</div>
|
341
461
|
</div>
|
342
462
|
</div>
|
343
|
-
|
344
463
|
<div class="list-group-item">
|
345
464
|
<div class="list-view-pf-main-info">
|
346
465
|
<div class="list-view-pf-left">
|
@@ -368,7 +487,6 @@
|
|
368
487
|
</div>
|
369
488
|
</div>
|
370
489
|
</div>
|
371
|
-
|
372
490
|
<div class="list-group-item">
|
373
491
|
<div class="list-view-pf-main-info">
|
374
492
|
<div class="list-view-pf-left">
|
@@ -396,7 +514,8 @@
|
|
396
514
|
</div>
|
397
515
|
</div>
|
398
516
|
</div>
|
399
|
-
|
517
|
+
</div>
|
518
|
+
<div class="list-group list-view-pf">
|
400
519
|
<div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
|
401
520
|
<div class="list-view-pf-checkbox">
|
402
521
|
<input type="checkbox">
|
@@ -448,8 +567,6 @@
|
|
448
567
|
</div>
|
449
568
|
</div>
|
450
569
|
</div>
|
451
|
-
|
452
|
-
|
453
570
|
<script>
|
454
571
|
// Row Checkbox Selection
|
455
572
|
$(document).ready(function () {
|
@@ -461,91 +578,7 @@
|
|
461
578
|
}
|
462
579
|
});
|
463
580
|
});
|
464
|
-
|
465
|
-
// Donut Charts
|
466
|
-
var c3ChartDefaults = $().c3ChartDefaults();
|
467
|
-
var customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('34%');
|
468
|
-
customDonutChartConfig.size.height = 71;
|
469
|
-
customDonutChartConfig.donut.width = 5;
|
470
|
-
customDonutChartConfig.bindto = '#chart1';
|
471
|
-
customDonutChartConfig.data = {
|
472
|
-
type: "donut",
|
473
|
-
columns: [
|
474
|
-
["Used", 34],
|
475
|
-
["Available", 86]
|
476
|
-
],
|
477
|
-
groups: [
|
478
|
-
["used", "available"]
|
479
|
-
],
|
480
|
-
order: null
|
481
|
-
};
|
482
|
-
c3.generate(customDonutChartConfig);
|
483
|
-
var donutChartTitle = d3.select("#chart1").select('text.c3-chart-arcs-title');
|
484
|
-
donutChartTitle.text("");
|
485
|
-
donutChartTitle.insert('tspan').text("34%").classed('list-view-donut-title', true);
|
486
|
-
|
487
|
-
customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('21%');
|
488
|
-
customDonutChartConfig.size.height = 71;
|
489
|
-
customDonutChartConfig.donut.width = 5;
|
490
|
-
customDonutChartConfig.bindto = '#chart2';
|
491
|
-
customDonutChartConfig.data = {
|
492
|
-
type: "donut",
|
493
|
-
columns: [
|
494
|
-
["Used", 21],
|
495
|
-
["Available", 79]
|
496
|
-
],
|
497
|
-
groups: [
|
498
|
-
["used", "available"]
|
499
|
-
],
|
500
|
-
order: null
|
501
|
-
};
|
502
|
-
c3.generate(customDonutChartConfig);
|
503
|
-
donutChartTitle = d3.select("#chart2").select('text.c3-chart-arcs-title');
|
504
|
-
donutChartTitle.text("");
|
505
|
-
donutChartTitle.insert('tspan').text("21%").classed('list-view-donut-title', true);
|
506
|
-
|
507
|
-
customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('14%');
|
508
|
-
customDonutChartConfig.size.height = 71;
|
509
|
-
customDonutChartConfig.donut.width = 5;
|
510
|
-
customDonutChartConfig.bindto = '#chart3';
|
511
|
-
customDonutChartConfig.data = {
|
512
|
-
type: "donut",
|
513
|
-
columns: [
|
514
|
-
["Used", 14],
|
515
|
-
["Available", 86]
|
516
|
-
],
|
517
|
-
groups: [
|
518
|
-
["used", "available"]
|
519
|
-
],
|
520
|
-
order: null
|
521
|
-
};
|
522
|
-
c3.generate(customDonutChartConfig);
|
523
|
-
donutChartTitle = d3.select("#chart3").select('text.c3-chart-arcs-title');
|
524
|
-
donutChartTitle.text("");
|
525
|
-
donutChartTitle.insert('tspan').text("14%").classed('list-view-donut-title', true);
|
526
|
-
|
527
|
-
customDonutChartConfig = c3ChartDefaults.getDefaultDonutConfig('25%');
|
528
|
-
customDonutChartConfig.size.height = 71;
|
529
|
-
customDonutChartConfig.donut.width = 5;
|
530
|
-
customDonutChartConfig.bindto = '#chart4';
|
531
|
-
customDonutChartConfig.data = {
|
532
|
-
type: "donut",
|
533
|
-
columns: [
|
534
|
-
["Used", 25],
|
535
|
-
["Available", 75]
|
536
|
-
],
|
537
|
-
groups: [
|
538
|
-
["used", "available"]
|
539
|
-
],
|
540
|
-
order: null
|
541
|
-
};
|
542
|
-
c3.generate(customDonutChartConfig);
|
543
|
-
donutChartTitle = d3.select("#chart4").select('text.c3-chart-arcs-title');
|
544
|
-
donutChartTitle.text("");
|
545
|
-
donutChartTitle.insert('tspan').text("25%").classed('list-view-donut-title', true);
|
546
|
-
|
547
581
|
</script>
|
548
|
-
|
549
582
|
</div><!-- /container -->
|
550
583
|
</body>
|
551
584
|
</html>
|