shooflenet/articles/circle_script/circle_setter.html
2024-09-10 13:23:53 -04:00

475 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<script src="../../static/jquery.min.js" type="text/javascript"></script>
<link href="../../static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../../static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="../../static/shoofle.css" rel="stylesheet" type="text/css">
<script src="circle_setter_utils.js" type="text/javascript"></script>
<script src="circle_setter.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
path, circle {
fill: none;
stroke: #aaa;
stroke-width: 3px;
}
svg { draggable: false; }
#testbed { display: none; }
td svg {
width: 3.5em;
height: 3.5em;
}
th label svg {
display: none;
width:3.5em;
height:3.5em;
}
#consonant-grid, #vowel-grid {
margin-left: auto;
margin-right: auto;
}
td {
padding: 0.25em;
}
.vowel-example {
padding: 1em;
}
td, .vowel-sequence {
border: 2px solid gray;
}
table > img {
width: 50%;
height: 50%;
}
svg#arena circle, svg#arena path { fill: none; stroke: #600; }
svg#arena circle { stroke: #044; }
rect { fill:transparent; }
#delete { fill:pink; }
svg#arena .enclosure { stroke: #000; }
#vowel-grid {
display: block;
}
.vowel-sequence {
display: block;
}
.vowel-example {
display: inline-block;
}
.vowel-example * {
vertical-align: middle;
}
.vowel-example > svg {
width: 3.5em;
height: 3.5em;
}
.unverified {
color: lightgray;
}
</style>
<div class="row-fluid">
<div class="span4"><!-- consonants -->
<form id="consonant_form">
<table id="consonant-grid">
<thead>
<tr class="header">
<th></th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_1" name="radicals" value="example-diacritic-1.svg">
<label for="rad_1"><img src="example-diacritic-1.svg" /></label>
</th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_2" name="radicals" value="example-diacritic-2.svg">
<label for="rad_2"><img src="example-diacritic-2.svg" /></label>
</th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_3" name="radicals" value="example-diacritic-3.svg">
<label for="rad_3"><img src="example-diacritic-3.svg" /></label>
</th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_4" name="radicals" value="example-diacritic-4.svg">
<label for="rad_4"><img src="example-diacritic-4.svg" /></label>
</th>
<th scope="col" class="diacritic-header">
<input type="radio" id="rad_5" name="radicals" value="example-diacritic-5.svg">
<label for="rad_5"><img src="example-diacritic-5.svg" /></label>
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_1_u" name="glyphs" value="consonant-mound-1.svg">
<label for="shape_1_u"><svg >
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="mound-1 megaglyph"
transform="translate(25,0)"><path
d="M -22.108869,113.14142 C -14.825778,68.277574 38.195123,67.792033 47.420373,112.9472"
class="glyph"
sodipodi:nodetypes="cc" /><path
d="m 12.100818,78.237112 c 0.463923,-33.247812 0,-74.2276752 0,-74.2276752"
class="line_1" /><path
d="M 3.5161518,80.328763 C 3.9800748,47.08095 -2.3602059,3.9361133 -2.3602059,3.9361133"
class="line_2"
sodipodi:nodetypes="cc" /><path
d="M 20.887406,80.249008 C 21.351329,47.001196 26.763764,4.1656416 26.763764,4.1656416"
class="line_3"
sodipodi:nodetypes="cc" /><path
d="M -6.9323217,68.201226 C 6.3668024,51.190717 8.8410588,52.582486 12.397801,55.829947"
class="dot_2" /><path
d="M 4.0618415,47.554015 C 17.360965,30.543506 19.835221,31.935275 23.391964,35.182736"
class="dot_1" /><path
d="M 15.195992,69.203753 C 28.495116,52.193245 30.969373,53.585014 34.526115,56.832475"
class="dot_3" /></g>
</svg></label>
</th>
<td>[m]<svg/></td>
<td>[n]<svg/></td>
<td class="unverified">[ñ]</td>
<td>[ŋ]<svg/></td>
<td></td>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_1_v" name="glyphs" value="consonant-mound-2.svg">
<label for="shape_1_v"><img src="consonant-mound-2.svg" /></label>
</th>
</tr>
<tr>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_2_u" name="glyphs" value="consonant-ohm-1.svg">
<label for="shape_2_u"><svg>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="omega-1 megaglyph"
transform="translate(25,0)">
<path
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.3829;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -20.755057,77.343458 c 0,0 0,30.618622 0.380829,46.994252 C -23.040029,95.204323 -6.4362494,84.506425 8.6829945,92.576601 23.802242,100.64678 20.107856,123.61413 -0.07606316,123.80455 H 44.10006"
class="glyph"
sodipodi:nodetypes="cczcc" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -1.7099346,89.222829 c 0.46392,-33.24781 0,-74.22767 0,-74.22767"
class="line_1" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 23.690919,125.15467 C 24.154842,91.90686 17.814561,48.76203 17.814561,48.76203"
class="line_2"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 41.062172,125.07492 c 0.46392,-33.24781 5.87636,-76.08337 5.87636,-76.08337"
class="line_3"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -12.402587,73.540483 C -5.9076651,66.117713 20.07202,31.787413 34.91756,47.251513"
class="dot_1"
inkscape:label="dot_1" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 0.413012,80.253857 C 13.712136,63.243348 16.186393,64.635117 19.743135,67.882578"
class="dot_2"
inkscape:label="dot_2" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 22.541326,81.256384 C 35.84045,64.245876 38.314707,65.637645 41.871449,68.885106"
id="path1720-1"
class="dot_3" />
</g>
</svg></label>
</th>
<td>[p], [b]<svg/></td>
<td>[t], [d]<svg/></td>
<td></td>
<td>[k], [g]<svg/></td>
<td class="unverified">[q], [ɢ]</td>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_2_v" name="glyphs" value="consonant-ohm-2.svg">
<label for="shape_2_v"><img src="consonant-ohm-2.svg" /></label>
</th>
</tr>
<tr>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_3_u" name="glyphs" value="consonant-angle-1.svg">
<label for="shape_3_u"><svg>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="angle-1 megaglyph"
transform="translate(25,0)">
<path
style="opacity:1;fill:none;stroke:#000000;stroke-width:2.88527;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -14.06223,75.917879 H 39.968325 L 39.843832,126.71158"
class="glyph" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 5.6174494,75.22561 C 6.0813724,41.977797 -0.2589083,-1.1670398 -0.2589083,-1.1670398"
class="line_2"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 22.988704,75.145855 C 23.452627,41.898043 28.865062,-0.93751155 28.865062,-0.93751155"
class="line_3"
sodipodi:nodetypes="cc" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 14.502302,74.634887 c 0.463923,-33.247813 0,-74.22767555 0,-74.22767555"
class="line_1" />
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -6.0317653,62.94798 C 7.2673588,45.937471 9.7416152,47.32924 13.298357,50.576701"
id="path1720" class="dot_2"/>
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 4.9623979,42.300769 C 18.261522,25.29026 20.735778,26.682029 24.292521,29.92949"
id="path1720-7" class="dot_1"/>
<path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 16.096549,63.950507 C 29.395673,46.939999 31.86993,48.331768 35.426672,51.579229"
id="path1720-1" class="dot_3"/>
</g>
</svg></label>
</th>
<td>[f], [v]<svg></svg></td>
<td>[s], [z]<svg></svg></td>
<td>[ʃ], [ʒ]<svg></svg></td>
<td></td>
<td class="unverified">[ʔ], [ʡ]<svg></svg></td>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_3_v" name="glyphs" value="consonant-angle-2.svg">
<label for="shape_3_v"><img src="consonant-angle-2.svg" /></label>
</th>
</tr>
<tr>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_4_u" name="glyphs" value="consonant-loop-1.svg">
<label for="shape_4_u"><svg>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="loop-1 megaglyph"
transform="translate(25,0)"><path
style="fill:none;stroke:#000000;stroke-width:3.47853;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m -17.664457,111.5189 c 17.71094207,0 50.4325,2.83413 56.735052,-9.45585 C 43.573377,93.28263 38.467691,81.072874 30.440263,79.305245 19.108262,76.809953 6.7206019,82.850589 6.8006582,96.359531 c 0.093399,15.760439 0.600371,39.624479 0.600371,39.624479"
class="path1628"
sodipodi:nodetypes="csssc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 23.808051,77.786834 c 0.463923,-33.247812 0,-74.2276754 0,-74.2276754"
class="line_1" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 15.223385,80.178675 C 15.687308,46.930858 9.347027,3.7860214 9.347027,3.7860214"
class="line_2"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 32.594639,80.098915 C 33.058562,46.851104 38.470997,4.0155494 38.470997,4.0155494"
class="line_3"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 4.774911,69.552061 C 18.074035,52.541552 20.548292,53.933321 24.105034,57.180782"
class="dot_2" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 15.769074,48.90485 C 29.068198,31.894341 31.542454,33.28611 35.099197,36.533571"
class="dot_1" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 26.903225,70.554588 C 40.202349,53.54408 42.676606,54.935849 46.233348,58.18331"
class="dot_3" /></g>
</svg></label>
</th>
<td>[θ], [ð]<svg/></td>
<td class="unverified">[ts]<svg/></td>
<td>[tʃ], [dʒ]<svg/></td>
<td>[x~χ], <span class="unverified">[ʁ]</span><svg/></td>
<td></td>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_4_v" name="glyphs" value="consonant-loop-2.svg">
<label for="shape_4_v"><img src="consonant-loop-2.svg" /></label>
</th>
</tr>
<tr>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_5_u" name="glyphs" value="consonant-wave-1.svg">
<label for="shape_5_u"><svg>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
class="wave-1 megaglyph"
transform="translate(25,0)"><path
style="fill:none;stroke:#000000;stroke-width:3.47853;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -22.617516,106.41574 C -10.15982,87.804245 -3.4056477,76.397198 -3.4056477,76.397198 c 0,0 -3.1519473,26.266232 11.2569551,26.116132 C 22.260209,102.36324 26.913083,76.847476 26.913083,76.847476 l 23.414466,29.868454"
class="glyph"
sodipodi:nodetypes="ccscc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 8.1984075,103.1525 c 0.463923,-33.247807 0,-74.22767 0,-74.22767"
class="line_1" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -3.3881142,77.627094 C -2.9241912,44.379281 -9.2644719,1.2344442 -9.2644719,1.2344442"
class="line_2"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 26.891115,78.748081 C 27.355038,45.500269 32.767473,2.6647142 32.767473,2.6647142"
class="line_3"
sodipodi:nodetypes="cc" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M -7.8328782,68.651504 C 5.4662459,51.640995 7.9405023,53.032764 11.497244,56.280225"
class="dot_2" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 3.161285,48.004293 C 16.460409,30.993784 18.934665,32.385553 22.491408,35.633014"
class="dot_1" /><path
style="fill:none;stroke:#000000;stroke-width:3.24027;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 14.295436,69.654031 C 27.59456,52.643523 30.068817,54.035292 33.625559,57.282753"
class="dot_3" /></g>
</svg></label>
</th>
<td>[w]<svg/></td>
<td>[ɹ], [l]<svg/></td>
<td>[ɾ~r], <span class="unverified">[ɬ]</span><svg/></td>
<td>[j]<svg/></td>
<td>[h]<svg/></td>
<th scope="row" class="consonant-shape">
<input type="radio" id="shape_5_v" name="glyphs" value="consonant-wave-2.svg">
<label for="shape_5_v"><img src="consonant-wave-2.svg" /></label>
</th>
</tr>
</tbody>
</table>
</form>
</div>
<div class="span4 ">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="400px" preserveAspectRatio="xMidYMax" id="arena" viewBox="-75 -105 150 210" draggable="false" >
<rect x="-200" y="-1" width="400" height="2"/>
<g transform="translate(-100,0)" id="consonant_place_group">
<g id="consonant_copy_from_here">
<rect x="-15" y="-35" width="30" height="35"/>
<g id="consonant_put_it_in_here" transform="translate(-12,-45) scale(0.3)"></g>
</g>
</g>
<circle cx="0" cy="0" r="60" id="word_circle" />
<rect x="-50" id="delete" y="80" width="100" height="80"/>
<g transform="translate(100,0)" id="vowel_place_group">
<g id="vowel_copy_from_here">
<rect x="-15" y="-35" width="30" height="35"/>
<g id="vowel_put_it_in_here" transform="translate(-6,-30) scale(0.5)"></g>
</g>
</g>
</svg>
</div>
<div class="span4"><!-- vowels -->
<div id="vowel-grid">
<div class="vowel megaglyph">
<svg>
<path
d="m -24.143392,69.705313 h 21.9728073 c 0,0 -8.7107683,-5.308618 -8.6254273,-18.536589 0.08534,-13.227971 11.8971468,-19.957943 22.88067,-20.100079 10.983523,-0.142135 24.132914,6.070091 24.270193,19.58669 0.137279,13.516599 -8.372985,19.018148 -8.372985,19.018148 l 21.57823,-0.142137"
class="base-omega vowel-base" />
<path
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
class="base-mound vowel-base" />
<path
d="m -24.143392,69.705313 c 21.9728073,0 54.541558,-0.600371 58.120012,-22.089973 C 35.199043,37.798618 21.290897,32.244199 12.511064,32.347864 3.742928,32.451391 -10.546513,37.771707 -8.5599175,48.096898 -4.5769567,68.798058 27.981866,69.673483 49.560097,69.531345"
class="base-loop vowel-base" />
<circle
class="dot-outer"
cx="12.504731"
cy="50.600185"
r="7.9595795" />
<path
d="m 12.50473,58.701897 c 0,15.634887 0,15.634887 0,15.634887"
class="emphasis-outer" />
<circle
class="dot-inner"
cx="12.50473"
cy="14.924212"
r="7.9595795" />
<path
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
class="emphasis-inner" />
<path
d="m -24.402715,49.335233 h 12.307604 c 0,0 7.3545431,-18.311313 24.915392,-18.311313 17.560849,0 23.714653,18.137348 23.714653,18.137348 l 12.907974,-0.142135"
class="base-mound" />
<path
class="triangle-inner"
d="M 12.646867,6.822496 20.187878,20.036981 4.9732929,19.960446 Z" />
<path
d="M 12.646867,6.8224964 C 12.504729,-8.9545266 12.504729,-1.2792181 12.504729,-1.2792181"
class="emphasis-inner" />
<circle
class="dot-on"
cx="12.646866"
cy="31.411909"
r="7.9595795" />
</svg>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 0 24 80" >base-omega dot-outer emphasis-outer</svg> [ɑ, a], box or bah
</div>
<div class="vowel-example">
<svg viewBox="0 0 24 80" >base-omega dot-outer</svg> [ʌ, ə], but or schwa
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >base-mound dot-inner emphasis-inner</svg> [i], beat
</div>
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >base-mound dot-inner</svg> [ɪ], bit
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >base-mound triangle-inner emphasis-inner</svg> [u], boot
</div>
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >base-mound triangle-inner</svg> [ʊ], book
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >base-mound dot-outer emphasis-outer</svg> [ɛi, e], bait
</div>
<div class="vowel-example">
<svg viewBox="0 -12 24 80" >base-mound dot-outer</svg> [ɛ], bet
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 0 24 80" >base-omega dot-inner emphasis-inner</svg> [o, ɔu], won't, boat
</div>
<div class="vowel-example">
<svg viewBox="0 0 24 80" >base-omega dot-inner</svg> [ɔ], bawk
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 0 24 80" >base-omega dot-on</svg> [æ], bat
</div>
</div>
<div class="vowel-sequence">
<div class="vowel-example">
<svg viewBox="0 0 24 80" >base-loop dot-outer</svg> [au], cow
</div>
<div class="vowel-example">
<svg viewBox="0 0 24 80" >base-loop dot-on</svg> [ai, aɪ], by
</div>
<div class="vowel-example">
<svg viewBox="0 0 24 80" >base-loop dot-inner</svg> [ɔi, ɔɪ], boy
</div>
</div>
</div>
</div>
</div>
<hr>
</body>
</html>