HTML5 Face Builder - documentation
This application allows your members to create their own Faces (or avatars). The script generates a result image which can be used wherever you want (your website or any other social network)
Thank you for purchasing my application. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Quick start
You have just purchased the HTML5 face builder application. You may use it as it (in this case all you need is to copy all the following files and folders onto your website: 'cache', 'css', 'data', 'js', 'accept_avatar.php', 'email.php' and 'index.html'), or you may integrate it with your existing project.
In order to integrate it with your project, you will need some basic skills to work with html and ftp. I hope that's not a problem for you. To add the necessary code into your project, please review all the following sections of the documentation : HTML, CSS, JAVASCRIPT, PHP and RESOURCES
HTML Structure
This application is a fluid layout with two columns (the first column is 370px). The face builder is nested within a div with a class of "container". The first column content is within a div with a class of "left", and the second column content is within a div with a class of "right". Here is the general structure.
If you would like to remove one or more sections from this application, you should do it in two places of HTML: the first is with id of 'ba_tabs', and the second is with id of 'ba_pabs'.
The full HTML structure of the application is:
<!-- primary container -->
<div class="container">
<!-- left column -->
<div class="left">
<div class="scene">
<canvas id="scene" width="340" height="340"></canvas>
<canvas id="scene2" width="340" height="340"></canvas>
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="generate"><button class="button">Generate Image</button></div>
</div><!-- end of left column -->
<!-- right column -->
<div class="right">
<!-- main type buttons -->
<div id="ba_tabs" class="ba_tabs">
<a href="#fringes" class="button">Fringe</a>
<a href="#eyebrows" class="button">Eyebrows</a>
<a href="#eyes" class="button">Eyes</a>
<a href="#mouths" class="button">Mouth</a>
<a href="#tops" class="button">Top</a>
<a href="#skins" class="button">Skin</a>
<a href="#back" class="button">Background</a>
</div><!-- end of main type buttons -->
<!-- sliding panels -->
<div id="ba_pabs" class="ba_pabs">
<span id="home"></span>
<span id="fringes"></span>
<span id="eyebrows"></span>
<span id="eyes"></span>
<span id="mouths"></span>
<span id="tops"></span>
<span id="skins"></span>
<span id="back"></span>
<!-- internal panels list is here -->
<div id="fringe">
<div class="type">
<h2>Fringe</h2>
<div class="set">
<div val="0">1</div>
<div val="1">2</div>
<div val="2">3</div>
<div val="3">4</div>
<div val="4">5</div>
<div val="5">6</div>
<div val="6">7</div>
<div val="7">8</div>
<div val="8">9</div>
<div val="9">10</div>
<div val="10">11</div>
<div val="11">12</div>
<div val="12">13</div>
<div val="13">14</div>
<div val="14">15</div>
<div val="15">16</div>
<div val="16">17</div>
<div val="17">18</div>
<div val="18">19</div>
<div val="19">20</div>
<div val="20">21</div>
<div val="21">22</div>
<div val="22">23</div>
<div val="23">24</div>
</div>
</div>
<div class="color">
<h2>Fringe color</h2>
<div class="set">
<div style="background-color:rgba(255, 255, 255, 1)" val="0"></div>
<div style="background-color:rgba(255, 255, 153, 1)" val="1"></div>
<div style="background-color:rgba(102, 204, 255, 1)" val="2"></div>
<div style="background-color:rgba(255, 204, 0, 1)" val="3"></div>
<div style="background-color:rgba(255, 102, 0, 1)" val="4"></div>
<div style="background-color:rgba(198, 0, 39, 1)" val="5"></div>
<div style="background-color:rgba(106, 0, 21, 1)" val="6"></div>
<div style="background-color:rgba(230, 153, 177, 1)" val="7"></div>
<div style="background-color:rgba(221, 0, 88, 1)" val="8"></div>
<div style="background-color:rgba(210, 168, 219, 1)" val="9"></div>
<div style="background-color:rgba(90, 46, 90, 1)" val="10"></div>
<div style="background-color:rgba(202, 228, 255, 1)" val="11"></div>
<div style="background-color:rgba(0, 34, 153, 1)" val="12"></div>
<div style="background-color:rgba(0, 213, 154, 1)" val="13"></div>
<div style="background-color:rgba(172, 206, 121, 1)" val="14"></div>
<div style="background-color:rgba(0, 102, 0, 1)" val="15"></div>
<div style="background-color:rgba(216, 173, 109, 1)" val="16"></div>
<div style="background-color:rgba(115, 77, 53, 1)" val="17"></div>
<div style="background-color:rgba(68, 46, 32, 1)" val="18"></div>
<div style="background-color:rgba(134, 107, 98, 1)" val="19"></div>
<div style="background-color:rgba(138, 60, 60, 1)" val="20"></div>
<div style="background-color:rgba(74, 32, 32, 1)" val="21"></div>
<div style="background-color:rgba(153, 153, 153, 1)" val="22"></div>
<div style="background-color:rgba(64, 53, 56, 1)" val="23"></div>
</div>
</div>
</div>
<div id="eyebrow">
<div class="type">
<h2>Eyebrows</h2>
<div class="set">
<div val="0">1</div>
<div val="1">2</div>
<div val="2">3</div>
<div val="3">4</div>
<div val="4">5</div>
<div val="5">6</div>
<div val="6">7</div>
<div val="7">8</div>
<div val="8">9</div>
<div val="9">10</div>
<div val="10">11</div>
<div val="11">12</div>
</div>
</div>
<div class="color">
<h2>Eyebrows color</h2>
<div class="set">
<div style="background-color:rgba(255, 255, 255, 1)" val="0"></div>
<div style="background-color:rgba(255, 255, 153, 1)" val="1"></div>
<div style="background-color:rgba(102, 204, 255, 1)" val="2"></div>
<div style="background-color:rgba(255, 204, 0, 1)" val="3"></div>
<div style="background-color:rgba(255, 102, 0, 1)" val="4"></div>
<div style="background-color:rgba(198, 0, 39, 1)" val="5"></div>
<div style="background-color:rgba(106, 0, 21, 1)" val="6"></div>
<div style="background-color:rgba(230, 153, 177, 1)" val="7"></div>
<div style="background-color:rgba(221, 0, 88, 1)" val="8"></div>
<div style="background-color:rgba(210, 168, 219, 1)" val="9"></div>
<div style="background-color:rgba(90, 46, 90, 1)" val="10"></div>
<div style="background-color:rgba(202, 228, 255, 1)" val="11"></div>
<div style="background-color:rgba(0, 34, 153, 1)" val="12"></div>
<div style="background-color:rgba(0, 213, 154, 1)" val="13"></div>
<div style="background-color:rgba(172, 206, 121, 1)" val="14"></div>
<div style="background-color:rgba(0, 102, 0, 1)" val="15"></div>
<div style="background-color:rgba(216, 173, 109, 1)" val="16"></div>
<div style="background-color:rgba(115, 77, 53, 1)" val="17"></div>
<div style="background-color:rgba(68, 46, 32, 1)" val="18"></div>
<div style="background-color:rgba(134, 107, 98, 1)" val="19"></div>
<div style="background-color:rgba(138, 60, 60, 1)" val="20"></div>
<div style="background-color:rgba(74, 32, 32, 1)" val="21"></div>
<div style="background-color:rgba(153, 153, 153, 1)" val="22"></div>
<div style="background-color:rgba(64, 53, 56, 1)" val="23"></div>
</div>
</div>
</div>
<div id="eye">
<div class="type">
<h2>Eyes</h2>
<div class="set">
<div val="0">1</div>
<div val="1">2</div>
<div val="2">3</div>
<div val="3">4</div>
<div val="4">5</div>
<div val="5">6</div>
<div val="6">7</div>
<div val="7">8</div>
<div val="8">9</div>
<div val="9">10</div>
<div val="10">11</div>
<div val="11">12</div>
</div>
</div>
<div class="color">
<h2>Eyes color</h2>
<div class="set">
<div style="background-color:rgba(255, 255, 255, 1)" val="0"></div>
<div style="background-color:rgba(255, 255, 153, 1)" val="1"></div>
<div style="background-color:rgba(102, 204, 255, 1)" val="2"></div>
<div style="background-color:rgba(255, 204, 0, 1)" val="3"></div>
<div style="background-color:rgba(255, 102, 0, 1)" val="4"></div>
<div style="background-color:rgba(198, 0, 39, 1)" val="5"></div>
<div style="background-color:rgba(106, 0, 21, 1)" val="6"></div>
<div style="background-color:rgba(230, 153, 177, 1)" val="7"></div>
<div style="background-color:rgba(221, 0, 88, 1)" val="8"></div>
<div style="background-color:rgba(210, 168, 219, 1)" val="9"></div>
<div style="background-color:rgba(90, 46, 90, 1)" val="10"></div>
<div style="background-color:rgba(202, 228, 255, 1)" val="11"></div>
<div style="background-color:rgba(0, 34, 153, 1)" val="12"></div>
<div style="background-color:rgba(0, 213, 154, 1)" val="13"></div>
<div style="background-color:rgba(172, 206, 121, 1)" val="14"></div>
<div style="background-color:rgba(0, 102, 0, 1)" val="15"></div>
<div style="background-color:rgba(216, 173, 109, 1)" val="16"></div>
<div style="background-color:rgba(115, 77, 53, 1)" val="17"></div>
<div style="background-color:rgba(68, 46, 32, 1)" val="18"></div>
<div style="background-color:rgba(134, 107, 98, 1)" val="19"></div>
<div style="background-color:rgba(138, 60, 60, 1)" val="20"></div>
<div style="background-color:rgba(74, 32, 32, 1)" val="21"></div>
<div style="background-color:rgba(153, 153, 153, 1)" val="22"></div>
<div style="background-color:rgba(64, 53, 56, 1)" val="23"></div>
</div>
</div>
</div>
<div id="mouth">
<div class="type">
<h2>Mouth</h2>
<div class="set">
<div val="0">1</div>
<div val="1">2</div>
<div val="2">3</div>
<div val="3">4</div>
<div val="4">5</div>
<div val="5">6</div>
<div val="6">7</div>
<div val="7">8</div>
<div val="8">9</div>
<div val="9">10</div>
<div val="10">11</div>
<div val="11">12</div>
</div>
</div>
</div>
<div id="top">
<div class="type">
<h2>Top</h2>
<div class="set">
<div val="0">1</div>
<div val="1">2</div>
<div val="2">3</div>
<div val="3">4</div>
<div val="4">5</div>
<div val="5">6</div>
<div val="6">7</div>
<div val="7">8</div>
</div>
</div>
<div class="color">
<h2>Top color</h2>
<div class="set">
<div style="background-color:rgba(255, 255, 255, 1)" val="0"></div>
<div style="background-color:rgba(255, 255, 153, 1)" val="1"></div>
<div style="background-color:rgba(102, 204, 255, 1)" val="2"></div>
<div style="background-color:rgba(255, 204, 0, 1)" val="3"></div>
<div style="background-color:rgba(255, 102, 0, 1)" val="4"></div>
<div style="background-color:rgba(198, 0, 39, 1)" val="5"></div>
<div style="background-color:rgba(106, 0, 21, 1)" val="6"></div>
<div style="background-color:rgba(230, 153, 177, 1)" val="7"></div>
<div style="background-color:rgba(221, 0, 88, 1)" val="8"></div>
<div style="background-color:rgba(210, 168, 219, 1)" val="9"></div>
<div style="background-color:rgba(90, 46, 90, 1)" val="10"></div>
<div style="background-color:rgba(202, 228, 255, 1)" val="11"></div>
<div style="background-color:rgba(0, 34, 153, 1)" val="12"></div>
<div style="background-color:rgba(0, 213, 154, 1)" val="13"></div>
<div style="background-color:rgba(172, 206, 121, 1)" val="14"></div>
<div style="background-color:rgba(0, 102, 0, 1)" val="15"></div>
<div style="background-color:rgba(216, 173, 109, 1)" val="16"></div>
<div style="background-color:rgba(115, 77, 53, 1)" val="17"></div>
<div style="background-color:rgba(68, 46, 32, 1)" val="18"></div>
<div style="background-color:rgba(134, 107, 98, 1)" val="19"></div>
<div style="background-color:rgba(138, 60, 60, 1)" val="20"></div>
<div style="background-color:rgba(74, 32, 32, 1)" val="21"></div>
<div style="background-color:rgba(153, 153, 153, 1)" val="22"></div>
<div style="background-color:rgba(64, 53, 56, 1)" val="23"></div>
</div>
</div>
</div>
<div id="skin">
<div class="color">
<h2>Skin color</h2>
<div class="set">
<div style="background-color:#fbefca" val="0"></div>
<div style="background-color:#ffd193" val="1"></div>
<div style="background-color:#ffad8a" val="2"></div>
<div style="background-color:#eba769" val="3"></div>
<div style="background-color:#ba805c" val="4"></div>
<div style="background-color:#7a4f34" val="5"></div>
</div>
</div>
</div>
<div id="back">
<div class="color">
<h2>Background color</h2>
<div class="set">
<div style="background-color:rgba(255, 255, 255, 1)" val="0"></div>
<div style="background-color:rgba(255, 255, 153, 1)" val="1"></div>
<div style="background-color:rgba(102, 204, 255, 1)" val="2"></div>
<div style="background-color:rgba(255, 204, 0, 1)" val="3"></div>
<div style="background-color:rgba(255, 102, 0, 1)" val="4"></div>
<div style="background-color:rgba(198, 0, 39, 1)" val="5"></div>
<div style="background-color:rgba(106, 0, 21, 1)" val="6"></div>
<div style="background-color:rgba(230, 153, 177, 1)" val="7"></div>
<div style="background-color:rgba(221, 0, 88, 1)" val="8"></div>
<div style="background-color:rgba(210, 168, 219, 1)" val="9"></div>
<div style="background-color:rgba(90, 46, 90, 1)" val="10"></div>
<div style="background-color:rgba(202, 228, 255, 1)" val="11"></div>
<div style="background-color:rgba(0, 34, 153, 1)" val="12"></div>
<div style="background-color:rgba(0, 213, 154, 1)" val="13"></div>
<div style="background-color:rgba(172, 206, 121, 1)" val="14"></div>
<div style="background-color:rgba(0, 102, 0, 1)" val="15"></div>
<div style="background-color:rgba(216, 173, 109, 1)" val="16"></div>
<div style="background-color:rgba(115, 77, 53, 1)" val="17"></div>
<div style="background-color:rgba(68, 46, 32, 1)" val="18"></div>
<div style="background-color:rgba(134, 107, 98, 1)" val="19"></div>
<div style="background-color:rgba(138, 60, 60, 1)" val="20"></div>
<div style="background-color:rgba(74, 32, 32, 1)" val="21"></div>
<div style="background-color:rgba(153, 153, 153, 1)" val="22"></div>
<div style="background-color:rgba(64, 53, 56, 1)" val="23"></div>
</div>
</div>
</div>
</div><!-- end of sliding panels -->
</div><!-- end of right column -->
</div><!-- end of primary container -->
<div class="result"></div>
Pay attention, that the last element with the class of 'result' is for generated Image result
CSS
This application imports one CSS files.
- My custom CSS file
This file describes the properties of interface elements: container, left and right panels, buttons:
* {
margin:0;
padding:0;
}
.send_email {
display: none;
}
.container
{
border:1px solid rgba(0,0,0,0.2);
overflow:hidden;
width:90%;
margin:1em auto;
padding:1em;
}
.left
{
display:table-cell;
float:left;
width:370px;
}
.right
{
display:table-cell;
}
.scene
{
height:340px;
position:relative;
width:340px;
}
#scene,#scene2
{
position:absolute;
}
#generate
{
margin-top:1em;
text-align:center;
}
.ba_tabs
{
overflow:hidden;
padding:1em;
}
.ba_pabs
{
padding:1em;
}
.ba_pabs span
{
display:none;
}
.ba_pabs > div
{
height:0;
overflow:hidden;
}
#fringes:target ~ #fringe,#eyebrows:target ~ #eyebrow,#eyes:target ~ #eye,#mouths:target ~ #mouth,#tops:target ~ #top,#skins:target ~ #skin, #back:target ~ #back
{
height:auto;
}
.set
{
overflow:hidden;
margin:1em 0;
}
.set div
{
border:1px solid #BBB;
border-radius:3px;
box-shadow:0 0 1px 1px #F6F6F6 inset;
-webkit-box-shadow:0 0 1px 1px #F6F6F6 inset;
color:#333;
cursor:pointer;
display:inline-block;
font:bold 12px/1 "helvetica neue",helvetica,arial,sans-serif;
text-align:center;
text-decoration:none;
text-shadow:0 1px 0 #FFF;
width:40px;
margin:2px;
padding:15px 0;
}
.button
{
background:none repeat scroll 0 0 #E3E3E3;
border:1px solid #BBB;
border-radius:3px;
box-shadow:0 0 1px 1px #F6F6F6 inset;
-webkit-box-shadow:0 0 1px 1px #F6F6F6 inset;
color:#333;
display:inline-block;
font:bold 12px/1 "helvetica neue",helvetica,arial,sans-serif;
text-align:center;
text-decoration:none;
text-shadow:0 1px 0 #FFF;
width:150px;
margin:5px;
padding:8px 0 9px;
}
.text
{
border:1px solid #BBB;
border-radius:3px;
font:bold 12px/1 "helvetica neue",helvetica,arial,sans-serif;
text-align:center;
margin:5px;
padding:8px 0 9px;
}
.set div:hover,.button:hover
{
background:none repeat scroll 0 0 #D9D9D9;
box-shadow:0 0 1px 1px #EAEAEA inset;
-webkit-box-shadow:0 0 1px 1px #EAEAEA inset;
color:#222;
cursor:pointer;
}
.set div:active,.button:active
{
background:none repeat scroll 0 0 #D0D0D0;
box-shadow:0 0 1px 1px #E3E3E3 inset;
-webkit-box-shadow:0 0 1px 1px #E3E3E3 inset;
color:#000;
}
.result .container .button
{
display: block;
margin-left: 95px;
margin-top: 15px;
}
.loading {
display: none;
margin: 0 auto;
padding-top: 110px;
width: 190px;
}
.loading > div {
background-color:#FFFFFF;
border:1px solid #000000;
float:left;
height:114px;
margin-left:5px;
width:30px;
opacity:0.1;
/* css3 transform - scale */
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
transform:scale(0.8);
/* css3 animation */
-webkit-animation-name:loading;
-webkit-animation-duration:1.2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:loading;
-moz-animation-duration:1.2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-o-animation-name:loading;
-o-animation-duration:1.2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
animation-name:loading;
animation-duration:1.2s;
animation-iteration-count:infinite;
animation-direction:linear;
}
.loading > div:nth-child(1) {
/* css3 animation */
-webkit-animation-delay:0.24s;
-moz-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
.loading > div:nth-child(2) {
/* css3 animation */
-webkit-animation-delay:0.48s;
-moz-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
.loading > div:nth-child(3) {
/* css3 animation */
-webkit-animation-delay:0.72s;
-moz-animation-delay:0.72s;
-o-animation-delay:0.72s;
animation-delay:0.72s;
}
.loading > div:nth-child(4) {
/* css3 animation */
-webkit-animation-delay:0.96s;
-moz-animation-delay:0.96s;
-o-animation-delay:0.96s;
animation-delay:0.96s;
}
.loading > div:nth-child(5) {
/* css3 animation */
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-o-animation-delay:1.2s;
animation-delay:1.2s;
}
/* css3 keyframes - loading */
@-webkit-keyframes loading {
0% {
-webkit-transform:scale(1.2);
opacity:1;
}
100% {
-webkit-transform:scale(0.7);
opacity:0.1;
}
}
@-moz-keyframes loading {
0% {
-moz-transform:scale(1.2);
opacity:1;
}
100% {
-moz-transform:scale(0.7);
opacity:0.1;
}
}
@-o-keyframes loading {
0% {
-o-transform:scale(1.2);
opacity:1;
}
100% {
-o-transform:scale(0.7);
opacity:0.1;
}
}
@keyframes loading {
0% {
transform:scale(1.2);
opacity:1;
}
100% {
transform:scale(0.7);
opacity:0.1;
}
}
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
JavaScript
This application imports two Javascript files.
- jQuery
- My custom script
Details:
- jQuery is a Javascript library that greatly reduces the amount of code that you must write.
- The face builder application is implemented as a packed plugin, so you won't need to manually edit anything in the file. It automatically add all the necessary event handlers for the interface elements (buttons)
Please pay attention, that before linking the custom JS script (builder.min.js) you have to point your current website address. Example:
var website_url = 'YOUR_WEBSITE_URL';
PHP
The 'accept_avatar.php' file is used to turn the result image (by the builder) into the JPG format (the result is saved onto your website in the 'cache' folder). Here the code of this file:
// set error reporting level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
// save file
if ($_POST['data'] != '') {
$files = glob("cache/*.jpg");
foreach($files as $file) {
if(is_file($file) && time() - filemtime($file) >= 2*24*60*60) {
@unlink($file);
}
}
$sRand = rand(100000, 999999);
$sOrigPath = 'cache/result'.$sRand.'.jpg';
@unlink($sOrigPath);
$img = $_POST['data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = strip_tags($img);
$img = str_replace(' ', '+', $img);
$decodedData = base64_decode($img);
file_put_contents($sOrigPath, $decodedData);
echo $sRand;
}
The 'email.php' file is used to send the result image to Email. Here the code of this file:
if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['file'])) {
$emailto = $emailfrom = $_POST['email'];
$name = $_POST['name'];
$file = (int)$_POST['file'];
$subject = 'Photo by '.$name;
$separator = md5(time());
$eol = PHP_EOL;
$filename = $file.".jpg";
$attachment = chunk_split(base64_encode(file_get_contents('cache/result'.$file.'.jpg')));
$headers = "From: ".$emailfrom.$eol;
$headers .= "MIME-Version: 1.0".$eol;
$headers .= "Content-Type: multipart/mixed; boundary=\"".$separator."\"";
$body = "--".$separator.$eol;
$body .= "Content-Transfer-Encoding: 7bit".$eol.$eol;
$body .= "This is a MIME encoded message.".$eol;
$body .= "--".$separator.$eol;
$body .= "Content-Type: text/html; charset=\"iso-8859-1\"".$eol;
$body .= "Content-Transfer-Encoding: 8bit".$eol.$eol;
$body .= 'Your image'.$eol;
$body .= "--".$separator.$eol;
$body .= "Content-Type: application/octet-stream; name=\"".$filename."\"".$eol;
$body .= "Content-Transfer-Encoding: base64".$eol;
$body .= "Content-Disposition: attachment".$eol.$eol;
$body .= $attachment.$eol;
$body .= "--".$separator."--";
if (mail($emailto, $subject, $body, $headers)) {
$mail_sent=true;
echo "The letter was sent";
} else {
$mail_sent=false;
echo "Error, The letter was not sent";
}
}
Resources
The application uses the following graphic resources:
- data/eyebrow.png
- data/eyes.png
- data/face.png
- data/fringes.png
- data/mouths.png
- data/tops.png
Every resource files contains multiple images of a corresponding section. In order to modify facial elements - you may edit a corresponding image file.
Credits
Once again, thank you so much for purchasing this product. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Andrew Prikaznov
Change Log
Version: 1.0.4 — Minor bug fix Version: 1.0.3 — Added function to send results via e-mail (with attached image) — Added function to automatically remove old photos (older than 2 days) Version: 1.0.2 — Made substantial improvements in the code to work with colors, added two new tops for men. Version: 1.0.1 — The following features were added: download button for image, select avatar background color, graphic loader during the image generation. Version: 1.0.0 — Release