<?xml version='1.0' encoding='ISO-8859-1' ?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='fr' xml:lang='fr'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<link rel="stylesheet" type="text/css" href="avatar.css" title="gh" />
<title>
Avatar
</title>
</head>
<body>
<link href='http://localhost/davy/img/personne0.png' rel='icon'>
<script type="text/javascript">
champ="";
formulaire="";
function ouvrir_palette(formulaire_recupere,champ_recupere)
{
formulaire=formulaire_recupere;
champ=champ_recupere;
ma_palette=window.open("palette/palette.html","Palette_de_couleur","height=380,width=400,status=0, scrollbars=0,,menubar=0");
// on ouvre la palette
}
function valid_couleur(couleur) //fonction appelée lorsqu'on valide la palette. On récupère la couleur.
{
document.forms[formulaire].elements[champ].value=couleur;
}
</script>
<h2> Creez votre avatar :</h2>
<br>
<br>
<center>
<table border="0" cellpadding="0" summary="?" >
<tr >
<td align='left' >
<h3>Avatar</h3>
</td>
</tr>
<tr >
<td align='left' >
<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:xlink="http://www.w3.org/1999/xlink">
<desc id="desc5539">Avatar</desc>
<defs id="defs5541">
<g id="tete">
<circle
cx="176"
cy="194"
r="130"
stroke="black"
fill="blue"
id="circle5544"
d="M 306,194 C 306,265.79702 247.79702,324 176,324 104.20298,324 46,265.79702 46,194 46,122.20298 104.20298,64 176,64 c 71.79702,0 130,58.20298 130,130 z" />
</g>
<!-- Début de la création de l avatar -->
</defs>
<!-- Peau -->
<path
sodipodi:type="arc"
style="fill:#A8AB1F;fill-opacity:0.69406391000000001;fill-rule:evenodd;stroke:#000000;stroke-width:1.44141793000000007;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:0.80365295000000003;stroke-dasharray:none;opacity:1"
id="peau"
sodipodi:cx="190.85249"
sodipodi:cy="183.88043"
sodipodi:rx="92.924431"
sodipodi:ry="95.06884"
d="m 283.77692,183.88043 a 92.924431,95.06884 0 1 1 -185.848858,0 92.924431,95.06884 0 1 1 185.848858,0 z"
transform="matrix(1.403424,0,0,1.3718014,-92.347035,-96.748451)"
inkscape:label="#peau" />
<!-- Oeil gauche -->
<path
sodipodi:type="arc"
style="fill:#45FC05;fill-opacity:1;stroke:#efbd11;stroke-width:1.00026774;stroke-miterlimit:4;stroke-opacity:0.26484022;stroke-dasharray:none"
id="oeilG"
sodipodi:cx="143.01825"
sodipodi:cy="107.06023"
sodipodi:rx="16.649469"
sodipodi:ry="17.903404"
d="m 159.66772,107.06023 a 16.649469,17.903404 0 1 1 -33.29894,0 16.649469,17.903404 0 1 1 33.29894,0 z"
transform="matrix(1.5188284,0,0,1.4007782,-0.20299212,-37.77583)"
inkscape:label="#yeux" />
<!-- Pupille gauche -->
<path
sodipodi:type="arc"
style="fill:#000000;fill-opacity:1;stroke:none"
id="pupilleG"
sodipodi:cx="139.00951"
sodipodi:cy="110.88095"
sodipodi:rx="5.6155505"
sodipodi:ry="5.6155505"
d="m 144.62506,110.88095 a 5.6155505,5.6155505 0 1 1 -11.2311,0 5.6155505,5.6155505 0 1 1 11.2311,0 z"
transform="matrix(1.6001247,0,0,1.5880311,-5.2469634,-64.300067)"
inkscape:label="#pupille" />
<!-- Oeil droit -->
<path
sodipodi:type="arc"
style="fill:#45FC05;fill-opacity:1;stroke:#efbd11;stroke-width:1.00026774;stroke-miterlimit:4;stroke-opacity:0.26484022;stroke-dasharray:none"
id="oeilD"
sodipodi:cx="143.01825"
sodipodi:cy="107.06023"
sodipodi:rx="16.649469"
sodipodi:ry="17.903404"
d="m 159.66772,107.06023 a 16.649469,17.903404 0 1 1 -33.29894,0 16.649469,17.903404 0 1 1 33.29894,0 z"
transform="matrix(1.5188284,0,0,1.4007782,-80.191992,-38.65833)"
inkscape:label="#yeux" />
<!-- Pupille droite-->
<path
sodipodi:type="arc"
style="fill:#000000;fill-opacity:1;stroke:none;stroke-opacity:0.80365293999999998"
id="pupilleD"
sodipodi:cx="139.00951"
sodipodi:cy="110.88095"
sodipodi:rx="5.6155505"
sodipodi:ry="5.6155505"
d="m 144.62506,110.88095 a 5.6155505,5.6155505 0 1 1 -11.2311,0 5.6155505,5.6155505 0 1 1 11.2311,0 z"
transform="matrix(1.6001247,0,0,1.5880311,-85.246963,-64.300067)"
inkscape:label="#pupille" />
<!-- Tshirt -->
<path
style="fill:#45FC05;stroke:#000000;stroke-width:1.01100004000000010;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="m 47.760189,182.27438 21.040317,14.608 15.83466,10.29199 16.164554,6.308 24.08188,4.98 43.21543,1.66 33.50087,-1.45151 24.22967,-6.18448 29.03022,-7.30401 32.65898,-13.94399 16.18675,-8.99102 c -0.74326,6.45035 -3.7249,13.47381 -6.10867,20.47099 -6.54343,20.38073 -27.72227,44.29602 -28.22196,44.29602 -6.36368,6.7901 -14.23989,12.90796 -23.09221,18.592 -0.60411,0.96519 -11.44887,7.50172 -20.06175,10.91301 -7.22374,2.65878 -12.98701,4.34391 -19.10969,6.26864 l -14.01322,1.62717 -22.98338,1.83842 -16.68994,-1.78499 c -5.11309,-0.97544 -9.90906,-1.63376 -16.33521,-3.92226 -4.8345,-1.6283 -9.70753,-3.29139 -15.50478,-5.78897 l -12.4135,-6.66059 c -3.13865,-1.73147 -7.6679,-4.85355 -11.546104,-7.32457 -3.941309,-3.12329 -7.915752,-6.28918 -13.751522,-11.8482 -5.73455,-5.05673 -10.534986,-11.67031 -15.474857,-18.05151 -4.469168,-5.97149 -7.806071,-12.50912 -11.200401,-19.01804 -4.177309,-9.74537 -7.735413,-19.55955 -9.436137,-29.5801 z"
id="tshirt"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccccccccccccccccc" />
<!-- Bas de cravate -->
<path
style="fill:#FF0000; stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 185.985,327.248 c 15.73547,-18.51232 27.30568,-27.30568 27.30568,-27.30568 l -11.57021,-29.15692 -4.16527,-19.66934 -6.71072,-6.47932 -12.72722,0 -7.17353,3.70247 -18.74373,53.45434 4.62808,2.77685 z"
id="bas_cravate"
inkscape:connector-curvature="0"/>
<!-- Haut de cravate -->
<path
style="fill:#FF0000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 162.39041,220.28175 -9.09541,13.0573 17.23488,14.64449 7.39473,-4.20153 11.62517,0 8.03791,6.45771 11.07467,-19.46215 c 0,0 -4.66545,-11.63575 -7.621,-11.63575 -2.95555,0 -38.65095,1.13993 -38.65095,1.13993 z"
id="haut_cravate"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccsc"
inkscape:label="#cravate"/>
<!-- Col gauche -->
<path
style="fill:DeepSkyBlue; stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 201.76163,218.75624 23.45612,-5.68637 28.74795,-7.58344 -11.03034,15.39318 -13.90223,13.4572 -13.32111,10.16172 -3.84904,2.56147 -2.82752,-16.32299 c -2.01552,-4.09821 -3.77811,-8.30482 -7.10179,-11.84239"
id="col_gauche"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc"
inkscape:label="#col"/>
<!-- Col droit -->
<path
style="fill:DeepSkyBlue;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 96.62283,212.30707 c 9.54031,3.18301 19.46731,4.43255 29.25939,6.35672 l 36.18364,1.61483 -8.86926,13.04323 -2.55044,14.52495 -9.49997,-2.74074 -19.55364,-9.91058 -14.13532,-10.75701 z"
id="col_droit"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc"
inkscape:label="#col"/>
<!-- bouche -->
<path
style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 167.30292,195.69684 4.11856,2.76909 c 7.2984,1.73982 16.33913,1.89412 20.79268,1.22451 l 9.74803,-2.01266 c 3.69991,-1.3347 7.16678,-1.97031 11.11672,-4.05512 4.11354,-3.25621 6.79585,-6.75096 10.16326,-10.13153 l 1.77334,-3.15259"
id="path6441"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
</svg></td>
<td align='left' >
<center>
<strong>Choix:</strong></center>
<br>
<form name='avatar' action='index.php' method='get'>
Peau:<br>
<input type='text' id='peau' name='peau' value='#A8AB1F' placeholder='Couleur de peau' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','peau')">
<br>
<br>
Yeux:<br>
<input type='text' id='yeux' name='yeux' value='#45FC05' placeholder='Couleur des yeux' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','yeux')">
<br>
<br>
T-shirt:<br>
<input type='text' id='tshirt' name='tshirt' value='#45FC05' placeholder='Couleur du t-shirt' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','tshirt')">
<br>
<br>
Cravate:<br>
<input type='text' id='cravate' name='cravate' value='#FF0000' placeholder='Couleur de la cravate' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','cravate')">
<br>
<br>
Col:<br>
<input type='text' id='col' name='col' value='DeepSkyBlue' placeholder='Couleur du col' size='10' >
<input type='button' value='Ouvrir la palette' onclick="ouvrir_palette('avatar','col')">
<br>
<br>
<span class='ps'>PS: Vous pouvez aussi ecrire les couleurs en anglais.<br>
La couleur par default est le noir.</span><br>
<br>
<input type='submit' value='Appliquer' />
<a href='image.svg' download="Votre Avatar">Download</a></form></td>
<td align='left' >
Couleurs a faire glisser:<br>
A faire en 2nd<br>
Bleu:<br>
Bleu:<br>
Bleu:<br>
Bleu:<br>
Bleu:<br>
Bleu:<br>
Bleu:<br>
Bleu:<br>
Bleu:<br>
Bleu:<br>
</td>
</tr>
</table>
</center>
</body>
</html>