edge_framework 0.8.1 → 0.9.0
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.
- data/assets/sass/edge.scss +3 -8
- data/assets/sass/edge/_base.scss +10 -10
- data/assets/sass/edge/components/_code.scss +111 -67
- data/assets/sass/edge/components/_grid.scss +115 -40
- data/assets/sass/edge/components/_tile.scss +26 -25
- data/assets/sass/edge/components/_typography.scss +2 -1
- data/assets/sass/for-test.scss +88 -8
- data/assets/test.html +198 -16
- data/lib/edge/version.rb +1 -1
- data/template/base/assets/img/favicon-big.png +0 -0
- data/template/base/assets/img/favicon.png +0 -0
- data/template/base/assets/sass/_setting.scss +10 -10
- data/template/base/config.rb +1 -1
- data/template/html/index.html +3 -3
- data/template/php/index.php +3 -2
- data/template/php/partials/footer.php +1 -1
- data/template/php/partials/functions.php +9 -13
- data/template/php/partials/header.php +2 -2
- data/template/wordpress/footer.php +2 -2
- data/template/wordpress/header.php +2 -2
- data/template/wordpress/index.php +6 -6
- data/template/wordpress/style.css +1 -1
- metadata +3 -3
- data/template/base/assets/img/favicon.ico +0 -0
|
@@ -6,66 +6,67 @@
|
|
|
6
6
|
$max-tiles : 12 !default;
|
|
7
7
|
$tile-gutter : 15px !default;
|
|
8
8
|
|
|
9
|
+
// Calculate width and padding for tile
|
|
9
10
|
@mixin tile-calc (
|
|
10
11
|
$per-row : 0,
|
|
11
12
|
$gutter : $tile-gutter,
|
|
12
13
|
$collapse : false ) {
|
|
14
|
+
|
|
15
|
+
@if $external-call or $per-row == 0 {
|
|
16
|
+
@if $collapse {
|
|
17
|
+
padding: 0;
|
|
18
|
+
} @else {
|
|
19
|
+
padding: 0 ($gutter / 2);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
13
22
|
|
|
14
23
|
@if $per-row > 0 {
|
|
15
|
-
width
|
|
24
|
+
width: 100% / $per-row;
|
|
16
25
|
|
|
17
26
|
&:nth-of-type(#{$per-row}n+1) {
|
|
18
27
|
clear: both;
|
|
19
28
|
}
|
|
20
29
|
}
|
|
21
|
-
@else {
|
|
22
|
-
@if $collapse {
|
|
23
|
-
padding : 0;
|
|
24
|
-
} @else {
|
|
25
|
-
padding : 0 ($gutter / 2);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
30
|
}
|
|
29
31
|
|
|
32
|
+
// Create tile styling for <ul> and <li>
|
|
30
33
|
@mixin tile (
|
|
31
|
-
$large
|
|
32
|
-
$small
|
|
34
|
+
$large : 0,
|
|
35
|
+
$small : 0,
|
|
33
36
|
$gutter : $tile-gutter,
|
|
34
37
|
$collapse : false ) {
|
|
35
38
|
|
|
36
|
-
|
|
37
39
|
// For <ul> styling
|
|
38
|
-
@if $external-call or $large
|
|
40
|
+
@if $external-call or $large == 0 {
|
|
39
41
|
display : block;
|
|
40
42
|
@if $collapse {
|
|
41
43
|
margin-right: 0;
|
|
42
44
|
margin-left: 0;
|
|
43
45
|
} @else {
|
|
44
|
-
margin-right: -(
|
|
45
|
-
margin-left: -(
|
|
46
|
+
margin-right: -($gutter / 2);
|
|
47
|
+
margin-left: -($gutter / 2);
|
|
46
48
|
}
|
|
47
|
-
|
|
48
49
|
@include clearfix;
|
|
49
50
|
}
|
|
50
51
|
|
|
51
52
|
// For <li> styling
|
|
52
53
|
> li {
|
|
53
|
-
@if $external-call or $large
|
|
54
|
-
display
|
|
55
|
-
position
|
|
56
|
-
float
|
|
57
|
-
height
|
|
54
|
+
@if $external-call or $large == 0 {
|
|
55
|
+
display: block;
|
|
56
|
+
position: relative;
|
|
57
|
+
float: $default-float;
|
|
58
|
+
height: auto;
|
|
58
59
|
}
|
|
59
60
|
|
|
60
|
-
@include tile-calc($per-row:$large
|
|
61
|
+
@include tile-calc($per-row:$large, $gutter:$gutter, $collapse:$collapse);
|
|
61
62
|
|
|
62
|
-
@if $small
|
|
63
|
+
@if $small > 0 and $responsive {
|
|
63
64
|
@include below(small) {
|
|
64
65
|
&:nth-of-type(n) {
|
|
65
66
|
clear: none;
|
|
66
67
|
}
|
|
67
68
|
|
|
68
|
-
@include tile-calc($per-row:$small
|
|
69
|
+
@include tile-calc($per-row:$small, $gutter:$gutter, $collapse:$collapse);
|
|
69
70
|
}
|
|
70
71
|
}
|
|
71
72
|
} // li
|
|
@@ -87,7 +88,7 @@ EDGE Block Grid
|
|
|
87
88
|
|
|
88
89
|
@for $i from 2 through $max-tiles {
|
|
89
90
|
.large-tile-#{$i} {
|
|
90
|
-
@include tile($large
|
|
91
|
+
@include tile($large:$i);
|
|
91
92
|
}
|
|
92
93
|
}
|
|
93
94
|
|
|
@@ -102,7 +103,7 @@ EDGE Block Grid
|
|
|
102
103
|
}
|
|
103
104
|
@for $i from 1 through $max-tiles {
|
|
104
105
|
.small-tile-#{$i} {
|
|
105
|
-
@include tile($large
|
|
106
|
+
@include tile($large:$i);
|
|
106
107
|
}
|
|
107
108
|
}
|
|
108
109
|
}
|
|
@@ -88,9 +88,10 @@ body {
|
|
|
88
88
|
@include baseline();
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
h1, h2, h3, h4, h5, h6
|
|
91
|
+
h1, h2, h3, h4, h5, h6 {
|
|
92
92
|
color: $header-font-color;
|
|
93
93
|
font-family: $header-font-family;
|
|
94
|
+
font-weight: $header-font-weight;
|
|
94
95
|
}
|
|
95
96
|
|
|
96
97
|
h1 { font-size: em($h1-font-size); }
|
data/assets/sass/for-test.scss
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.demo-
|
|
41
|
+
.demo-tile {
|
|
42
42
|
p {
|
|
43
43
|
background : #eee;
|
|
44
44
|
margin-bottom : em(15px);
|
|
@@ -48,17 +48,97 @@
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
|
|
52
|
+
/* Custom Grid */
|
|
53
|
+
.cgrid-1 {
|
|
54
|
+
@include grid-column($large:5);
|
|
55
|
+
}
|
|
56
|
+
.cgrid-2 {
|
|
57
|
+
@include grid-column($large:7);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.cgrid-a1 {
|
|
61
|
+
@include grid-column($large:5, $small:10);
|
|
62
|
+
}
|
|
63
|
+
.cgrid-a2 {
|
|
64
|
+
@include grid-column($large:7, $small:2);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.cgrid-b1 {
|
|
68
|
+
@include grid-column($large:10, $small:8, $mini:6);
|
|
69
|
+
}
|
|
70
|
+
.cgrid-b2 {
|
|
71
|
+
@include grid-column($large:2, $small:4, $mini:6);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.cgrid-c1 {
|
|
75
|
+
@include grid-column($large:6, $large-offset:4, $small:6);
|
|
76
|
+
}
|
|
77
|
+
.cgrid-c2 {
|
|
78
|
+
@include grid-column($large:2, $small:6);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.cgrid-d1 {
|
|
82
|
+
@include grid-column($large:3, $large-offset:6, $small:4, $small-offset:4);
|
|
83
|
+
}
|
|
84
|
+
.cgrid-d2 {
|
|
85
|
+
@include grid-column($large:3, $small:4);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.cgrid-e1 {
|
|
89
|
+
@include grid-column($large:3, $large-offset:6, $small:4, $small-offset:4, $mini:6);
|
|
90
|
+
}
|
|
91
|
+
.cgrid-e2 {
|
|
92
|
+
@include grid-column($large:3, $small:4, $mini:6);
|
|
53
93
|
}
|
|
54
94
|
|
|
55
|
-
.
|
|
56
|
-
@include
|
|
57
|
-
|
|
95
|
+
.cgrid-f1 {
|
|
96
|
+
@include grid-column($large:3, $large-offset:6, $small:4, $small-offset:4, $mini:5, $mini-offset:1);
|
|
97
|
+
}
|
|
98
|
+
.cgrid-f2 {
|
|
99
|
+
@include grid-column($large:3, $small:4, $mini:6);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.cgrid-g1 {
|
|
103
|
+
@include grid-column($large:4, $push:8);
|
|
104
|
+
}
|
|
105
|
+
.cgrid-g2 {
|
|
106
|
+
@include grid-column($large:8, $pull:4);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.cgrid-h1 {
|
|
110
|
+
@include grid-column($large:8, $small:8);
|
|
111
|
+
}
|
|
112
|
+
.cgrid-h1-1 {
|
|
113
|
+
@include grid-column($large:5, $small:5);
|
|
114
|
+
}
|
|
115
|
+
.cgrid-h1-2 {
|
|
116
|
+
@include grid-column($large:7, $small:7);
|
|
58
117
|
}
|
|
59
|
-
|
|
60
|
-
|
|
118
|
+
.cgrid-h2 {
|
|
119
|
+
@include grid-column($large:4, $small:4);
|
|
120
|
+
}
|
|
121
|
+
.cgrid-h2-1 {
|
|
122
|
+
@include grid-column($large:6, $small:6, $center:true);
|
|
61
123
|
}
|
|
124
|
+
|
|
125
|
+
.cgrid-i0 {
|
|
126
|
+
@include grid-row($gutter:50px);
|
|
127
|
+
}
|
|
128
|
+
.cgrid-i1 {
|
|
129
|
+
@include grid-column($large:6, $gutter:50px);
|
|
130
|
+
}
|
|
131
|
+
.cgrid-i2 {
|
|
132
|
+
@include grid-column($large:6, $gutter:50px);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* Custom Tile */
|
|
136
|
+
.custom-tile1 {
|
|
137
|
+
@include tile($large:7, $small:5);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.custom-tile2 {
|
|
141
|
+
@include tile($large:5, $small:3, $collapse:true);
|
|
62
142
|
}
|
|
63
143
|
|
|
64
144
|
[data-page="form"] {
|
data/assets/test.html
CHANGED
|
@@ -19,14 +19,11 @@
|
|
|
19
19
|
}
|
|
20
20
|
</style>
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
<!--SYNTAX HIGHLIGHTER-->
|
|
24
|
-
<script type="text/javascript" src="js/edge/edge.prism.js"></script>
|
|
25
22
|
</head>
|
|
26
23
|
<body>
|
|
27
24
|
<div id="main-wrapper">
|
|
28
|
-
|
|
29
|
-
</header>
|
|
25
|
+
<!-- <header class="top-bar">
|
|
26
|
+
</header> -->
|
|
30
27
|
|
|
31
28
|
<!-- <div class="row" data-page="typography">
|
|
32
29
|
<div class="large-12 columns">
|
|
@@ -138,11 +135,11 @@
|
|
|
138
135
|
</div>
|
|
139
136
|
</div> -->
|
|
140
137
|
|
|
141
|
-
|
|
138
|
+
<div class="row" data-page="code">
|
|
142
139
|
<div class="large-12 columns">
|
|
143
140
|
<h1>EDGE Code</h1>
|
|
144
141
|
<h3>Markup</h3>
|
|
145
|
-
<pre class="line-numbers" data-lang="markup"
|
|
142
|
+
<pre class="line-numbers" data-lang="markup"><code>
|
|
146
143
|
<pre class="line-numbers" data-lang="markup" data-line="7"><code>
|
|
147
144
|
Unlike other code-highlighter, you don't need to escape < into &lt;
|
|
148
145
|
<div> ... </div>
|
|
@@ -185,12 +182,12 @@
|
|
|
185
182
|
end
|
|
186
183
|
</code></pre>
|
|
187
184
|
</div>
|
|
188
|
-
</div>
|
|
185
|
+
</div>
|
|
189
186
|
|
|
190
|
-
<div class="row" data-page="
|
|
187
|
+
<!-- <div class="row" data-page="tile">
|
|
191
188
|
<div class="large-12 columns">
|
|
192
|
-
<div class="demo-
|
|
193
|
-
<h1>
|
|
189
|
+
<div class="demo-tile">
|
|
190
|
+
<h1>Tile</h1>
|
|
194
191
|
<ul class="large-tile-7 small-tile-5">
|
|
195
192
|
<li><p>1</p></li>
|
|
196
193
|
<li><p>1</p></li>
|
|
@@ -205,8 +202,8 @@
|
|
|
205
202
|
<li><p>1</p></li>
|
|
206
203
|
<li><p>1</p></li>
|
|
207
204
|
</ul>
|
|
208
|
-
<h2>
|
|
209
|
-
<ul class="large-tile-
|
|
205
|
+
<h2>Tile Collapse</h2>
|
|
206
|
+
<ul class="large-tile-5 small-tile-3 collapse">
|
|
210
207
|
<li><p>1</p></li>
|
|
211
208
|
<li><p>1</p></li>
|
|
212
209
|
<li><p>1</p></li>
|
|
@@ -222,10 +219,46 @@
|
|
|
222
219
|
</ul>
|
|
223
220
|
</div>
|
|
224
221
|
</div>
|
|
225
|
-
</div>
|
|
222
|
+
</div> -->
|
|
226
223
|
|
|
224
|
+
<!-- <div class="row" data-page="custom-tile">
|
|
225
|
+
<div class="large-12 columns">
|
|
226
|
+
<div class="demo-tile">
|
|
227
|
+
<h1>Custom Tile</h1>
|
|
228
|
+
<ul class="custom-tile1">
|
|
229
|
+
<li><p>1</p></li>
|
|
230
|
+
<li><p>1</p></li>
|
|
231
|
+
<li><p>1</p></li>
|
|
232
|
+
<li><p>1</p></li>
|
|
233
|
+
<li><p>1</p></li>
|
|
234
|
+
<li><p>1</p></li>
|
|
235
|
+
<li><p>1</p></li>
|
|
236
|
+
<li><p>1</p></li>
|
|
237
|
+
<li><p>1</p></li>
|
|
238
|
+
<li><p>1</p></li>
|
|
239
|
+
<li><p>1</p></li>
|
|
240
|
+
<li><p>1</p></li>
|
|
241
|
+
</ul>
|
|
242
|
+
<h2>Custom Tile Collapsed</h2>
|
|
243
|
+
<ul class="custom-tile2">
|
|
244
|
+
<li><p>1</p></li>
|
|
245
|
+
<li><p>1</p></li>
|
|
246
|
+
<li><p>1</p></li>
|
|
247
|
+
<li><p>1</p></li>
|
|
248
|
+
<li><p>1</p></li>
|
|
249
|
+
<li><p>1</p></li>
|
|
250
|
+
<li><p>1</p></li>
|
|
251
|
+
<li><p>1</p></li>
|
|
252
|
+
<li><p>1</p></li>
|
|
253
|
+
<li><p>1</p></li>
|
|
254
|
+
<li><p>1</p></li>
|
|
255
|
+
<li><p>1</p></li>
|
|
256
|
+
</ul>
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
</div> -->
|
|
227
260
|
|
|
228
|
-
|
|
261
|
+
<div class="row" data-page="grid">
|
|
229
262
|
<div class="large-12 columns">
|
|
230
263
|
<div class="demo-grid">
|
|
231
264
|
<h1>Grid</h1>
|
|
@@ -356,8 +389,152 @@
|
|
|
356
389
|
|
|
357
390
|
</div>
|
|
358
391
|
</div>
|
|
359
|
-
</div>
|
|
392
|
+
</div>
|
|
393
|
+
|
|
394
|
+
<div class="row collapse demo-grid" data-page="grid">
|
|
395
|
+
<h1>Collapse not nested</h1>
|
|
396
|
+
<div class="large-8 column">
|
|
397
|
+
<p>8</p>
|
|
398
|
+
</div>
|
|
399
|
+
<div class="large-4 column">
|
|
400
|
+
<p>4</p>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
|
|
404
|
+
<div class="row demo-grid" data-page="grid">
|
|
405
|
+
<h1>Not nested</h1>
|
|
406
|
+
<div class="large-8 column">
|
|
407
|
+
<p>8</p>
|
|
408
|
+
</div>
|
|
409
|
+
<div class="large-4 column">
|
|
410
|
+
<p>4</p>
|
|
411
|
+
</div>
|
|
412
|
+
</div>
|
|
413
|
+
|
|
414
|
+
<!-- <section class="row" data-page="custom-grid">
|
|
415
|
+
<div class="large-12 column">
|
|
416
|
+
<div class="demo-grid">
|
|
417
|
+
|
|
418
|
+
<h1>Demo Custom Grid</h1>
|
|
419
|
+
<h3>Large (L) only</h3>
|
|
420
|
+
<div class="row">
|
|
421
|
+
<div class="cgrid-1 column">
|
|
422
|
+
<p>l5</p>
|
|
423
|
+
</div>
|
|
424
|
+
<div class="cgrid-2 column">
|
|
425
|
+
<p>l7</p>
|
|
426
|
+
</div>
|
|
427
|
+
</div>
|
|
428
|
+
<h3>L - Small (S)</h3>
|
|
429
|
+
<div class="row">
|
|
430
|
+
<div class="cgrid-a1 column">
|
|
431
|
+
<p>l5 s10</p>
|
|
432
|
+
</div>
|
|
433
|
+
<div class="cgrid-a2 column">
|
|
434
|
+
<p>l7 s2</p>
|
|
435
|
+
</div>
|
|
436
|
+
</div>
|
|
437
|
+
|
|
438
|
+
<h3>L-S-Mini (M) Collapse</h3>
|
|
439
|
+
<div class="row collapse">
|
|
440
|
+
<div class="cgrid-b1 column">
|
|
441
|
+
<p>l10 s8 m6</p>
|
|
442
|
+
</div>
|
|
443
|
+
<div class="cgrid-b2 column">
|
|
444
|
+
<p>l2 s4 m6</p>
|
|
445
|
+
</div>
|
|
446
|
+
</div>
|
|
447
|
+
|
|
448
|
+
<h3>L Offset (O) - S</h3>
|
|
449
|
+
<div class="row">
|
|
450
|
+
<div class="cgrid-c1 column">
|
|
451
|
+
<p>l6 lo4 s6</p>
|
|
452
|
+
</div>
|
|
453
|
+
<div class="cgrid-c2 column">
|
|
454
|
+
<p>l2 s6</p>
|
|
455
|
+
</div>
|
|
456
|
+
</div>
|
|
457
|
+
|
|
458
|
+
<h3>LO-SO</h3>
|
|
459
|
+
<div class="row">
|
|
460
|
+
<div class="cgrid-d1 column">
|
|
461
|
+
<p>l3 lo3 s4 so4</p>
|
|
462
|
+
</div>
|
|
463
|
+
<div class="cgrid-d2 column">
|
|
464
|
+
<p>l3 s4</p>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
|
|
468
|
+
<h3>LO-SO-M</h3>
|
|
469
|
+
<div class="row">
|
|
470
|
+
<div class="cgrid-e1 column">
|
|
471
|
+
<p>l3 lo3 s4 so4 m6</p>
|
|
472
|
+
</div>
|
|
473
|
+
<div class="cgrid-e2 column">
|
|
474
|
+
<p>l3 s4 m6</p>
|
|
475
|
+
</div>
|
|
476
|
+
</div>
|
|
477
|
+
|
|
478
|
+
<h3>LO-SO-MO</h3>
|
|
479
|
+
<div class="row">
|
|
480
|
+
<div class="cgrid-f1 column">
|
|
481
|
+
<p>l3 lo3 s4 so4 m5 mo1</p>
|
|
482
|
+
</div>
|
|
483
|
+
<div class="cgrid-f2 column">
|
|
484
|
+
<p>l3 s4 m6</p>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
|
|
488
|
+
<h3>L Source Ordering</h3>
|
|
489
|
+
<div class="row">
|
|
490
|
+
<div class="cgrid-g1 column">
|
|
491
|
+
<p>First col, pushed 8</p>
|
|
492
|
+
</div>
|
|
493
|
+
<div class="cgrid-g2 column">
|
|
494
|
+
<p>Second col, pulled 4</p>
|
|
495
|
+
</div>
|
|
496
|
+
</div>
|
|
497
|
+
|
|
498
|
+
<h3>Nesting</h3>
|
|
499
|
+
<div class="row">
|
|
500
|
+
<div class="cgrid-h1 column">
|
|
501
|
+
<p>l8 s8</p>
|
|
502
|
+
<div class="row">
|
|
503
|
+
<div class="cgrid-h1-1 column">
|
|
504
|
+
<p>l5 s5</p>
|
|
505
|
+
</div>
|
|
506
|
+
<div class="cgrid-h1-2 column">
|
|
507
|
+
<p>l7 s7</p>
|
|
508
|
+
</div>
|
|
509
|
+
</div>
|
|
510
|
+
</div>
|
|
511
|
+
<div class="cgrid-h2 column">
|
|
512
|
+
<p>l8 s4</p>
|
|
513
|
+
<div class="row">
|
|
514
|
+
<div class="cgrid-h2-1 column">
|
|
515
|
+
<p>l6 s6 center</p>
|
|
516
|
+
</div>
|
|
517
|
+
</div>
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
520
|
+
|
|
521
|
+
<h3>Custom Gutter</h3>
|
|
522
|
+
<div class="cgrid-i0 row">
|
|
523
|
+
<div class="cgrid-i1 column">
|
|
524
|
+
<p>l6 50px</p>
|
|
525
|
+
</div>
|
|
526
|
+
<div class="cgrid-i2 column">
|
|
527
|
+
<p>l6 50px</p>
|
|
528
|
+
</div>
|
|
529
|
+
</div>
|
|
530
|
+
|
|
531
|
+
</div>
|
|
532
|
+
</div>
|
|
533
|
+
</section> -->
|
|
534
|
+
|
|
535
|
+
|
|
360
536
|
|
|
537
|
+
|
|
361
538
|
<!-- <div class="row" data-page="form">
|
|
362
539
|
<div class="large-6 columns">
|
|
363
540
|
<h1>Form Grid</h1>
|
|
@@ -448,5 +625,10 @@
|
|
|
448
625
|
</div>
|
|
449
626
|
<footer id="footer">
|
|
450
627
|
</footer>
|
|
628
|
+
|
|
629
|
+
|
|
630
|
+
<script type="text/javascript" src="js/vendor/jquery.min.js"></script>
|
|
631
|
+
<script type="text/javascript" src="js/edge.js"></script>
|
|
632
|
+
<script type="text/javascript" src="js/edge/edge.prism.js"></script>
|
|
451
633
|
</body>
|
|
452
634
|
</html>
|