@multiavatar/multiavatar
Version:
Multicultural Avatar Generator
158 lines (144 loc) • 8.43 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie= edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Multiavatar - All 48 Initial Avatar Designs</title>
<style>
body, html {
width:100%;
height:100%;
}
body {
background-color: #fff;
overflow-x: hidden;
padding:0px;
margin:0px;
}
* {
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
padding: 20px;
}
.avatar {
width: 110px;
height:110px;
float:left;
margin: 10px;
}
</style>
<!-- DEVELOPMENT -->
<script src="../multiavatar.js?v=015"></script>
<!-- PRODUCTION -->
<!-- <script src="../multiavatar.min.js?v=015"></script> -->
</head>
<body>
<div id="container" class="container">
<div id="a1" class="avatar"></div>
<div id="a2" class="avatar"></div>
<div id="a3" class="avatar"></div>
<div id="a4" class="avatar"></div>
<div id="a5" class="avatar"></div>
<div id="a6" class="avatar"></div>
<div id="a7" class="avatar"></div>
<div id="a8" class="avatar"></div>
<div id="a9" class="avatar"></div>
<div id="a10" class="avatar"></div>
<div id="a11" class="avatar"></div>
<div id="a12" class="avatar"></div>
<div id="a13" class="avatar"></div>
<div id="a14" class="avatar"></div>
<div id="a15" class="avatar"></div>
<div id="a16" class="avatar"></div>
<div id="a17" class="avatar"></div>
<div id="a18" class="avatar"></div>
<div id="a19" class="avatar"></div>
<div id="a20" class="avatar"></div>
<div id="a21" class="avatar"></div>
<div id="a22" class="avatar"></div>
<div id="a23" class="avatar"></div>
<div id="a24" class="avatar"></div>
<div id="a25" class="avatar"></div>
<div id="a26" class="avatar"></div>
<div id="a27" class="avatar"></div>
<div id="a28" class="avatar"></div>
<div id="a29" class="avatar"></div>
<div id="a30" class="avatar"></div>
<div id="a31" class="avatar"></div>
<div id="a32" class="avatar"></div>
<div id="a33" class="avatar"></div>
<div id="a34" class="avatar"></div>
<div id="a35" class="avatar"></div>
<div id="a36" class="avatar"></div>
<div id="a37" class="avatar"></div>
<div id="a38" class="avatar"></div>
<div id="a39" class="avatar"></div>
<div id="a40" class="avatar"></div>
<div id="a41" class="avatar"></div>
<div id="a42" class="avatar"></div>
<div id="a43" class="avatar"></div>
<div id="a44" class="avatar"></div>
<div id="a45" class="avatar"></div>
<div id="a46" class="avatar"></div>
<div id="a47" class="avatar"></div>
<div id="a48" class="avatar"></div>
</div>
<div style="height:40px;clear:both;"></div>
<script>
function getById(id) {
return document.getElementById(id);
}
getById('a1').innerHTML = multiavatar('a', false, {'part': '00', 'theme': 'A'});
getById('a2').innerHTML = multiavatar('a', false, {'part': '00', 'theme': 'B'});
getById('a3').innerHTML = multiavatar('a', false, {'part': '00', 'theme': 'C'});
getById('a4').innerHTML = multiavatar('a', false, {'part': '01', 'theme': 'A'});
getById('a5').innerHTML = multiavatar('a', false, {'part': '01', 'theme': 'B'});
getById('a6').innerHTML = multiavatar('a', false, {'part': '01', 'theme': 'C'});
getById('a7').innerHTML = multiavatar('a', false, {'part': '02', 'theme': 'A'});
getById('a8').innerHTML = multiavatar('a', false, {'part': '02', 'theme': 'B'});
getById('a9').innerHTML = multiavatar('a', false, {'part': '02', 'theme': 'C'});
getById('a10').innerHTML = multiavatar('a', false, {'part': '03', 'theme': 'A'});
getById('a11').innerHTML = multiavatar('a', false, {'part': '03', 'theme': 'B'});
getById('a12').innerHTML = multiavatar('a', false, {'part': '03', 'theme': 'C'});
getById('a13').innerHTML = multiavatar('a', false, {'part': '04', 'theme': 'A'});
getById('a14').innerHTML = multiavatar('a', false, {'part': '04', 'theme': 'B'});
getById('a15').innerHTML = multiavatar('a', false, {'part': '04', 'theme': 'C'});
getById('a16').innerHTML = multiavatar('a', false, {'part': '05', 'theme': 'A'});
getById('a17').innerHTML = multiavatar('a', false, {'part': '05', 'theme': 'B'});
getById('a18').innerHTML = multiavatar('a', false, {'part': '05', 'theme': 'C'});
getById('a19').innerHTML = multiavatar('a', false, {'part': '06', 'theme': 'A'});
getById('a20').innerHTML = multiavatar('a', false, {'part': '06', 'theme': 'B'});
getById('a21').innerHTML = multiavatar('a', false, {'part': '06', 'theme': 'C'});
getById('a22').innerHTML = multiavatar('a', false, {'part': '07', 'theme': 'A'});
getById('a23').innerHTML = multiavatar('a', false, {'part': '07', 'theme': 'B'});
getById('a24').innerHTML = multiavatar('a', false, {'part': '07', 'theme': 'C'});
getById('a25').innerHTML = multiavatar('a', false, {'part': '08', 'theme': 'A'});
getById('a26').innerHTML = multiavatar('a', false, {'part': '08', 'theme': 'B'});
getById('a27').innerHTML = multiavatar('a', false, {'part': '08', 'theme': 'C'});
getById('a28').innerHTML = multiavatar('a', false, {'part': '09', 'theme': 'A'});
getById('a29').innerHTML = multiavatar('a', false, {'part': '09', 'theme': 'B'});
getById('a30').innerHTML = multiavatar('a', false, {'part': '09', 'theme': 'C'});
getById('a31').innerHTML = multiavatar('a', false, {'part': '10', 'theme': 'A'});
getById('a32').innerHTML = multiavatar('a', false, {'part': '10', 'theme': 'B'});
getById('a33').innerHTML = multiavatar('a', false, {'part': '10', 'theme': 'C'});
getById('a34').innerHTML = multiavatar('a', false, {'part': '11', 'theme': 'A'});
getById('a35').innerHTML = multiavatar('a', false, {'part': '11', 'theme': 'B'});
getById('a36').innerHTML = multiavatar('a', false, {'part': '11', 'theme': 'C'});
getById('a37').innerHTML = multiavatar('a', false, {'part': '12', 'theme': 'A'});
getById('a38').innerHTML = multiavatar('a', false, {'part': '12', 'theme': 'B'});
getById('a39').innerHTML = multiavatar('a', false, {'part': '12', 'theme': 'C'});
getById('a40').innerHTML = multiavatar('a', false, {'part': '13', 'theme': 'A'});
getById('a41').innerHTML = multiavatar('a', false, {'part': '13', 'theme': 'B'});
getById('a42').innerHTML = multiavatar('a', false, {'part': '13', 'theme': 'C'});
getById('a43').innerHTML = multiavatar('a', false, {'part': '14', 'theme': 'A'});
getById('a44').innerHTML = multiavatar('a', false, {'part': '14', 'theme': 'B'});
getById('a45').innerHTML = multiavatar('a', false, {'part': '14', 'theme': 'C'});
getById('a46').innerHTML = multiavatar('a', false, {'part': '15', 'theme': 'A'});
getById('a47').innerHTML = multiavatar('a', false, {'part': '15', 'theme': 'B'});
getById('a48').innerHTML = multiavatar('a', false, {'part': '15', 'theme': 'C'});
</script>
</body>
</html>