Générateur de Signature

<!doctype html>
<html xmlns= »http://www.w3.org/1999/xhtml » xmlns:v= »urn:schemas-microsoft-com:vml » xmlns:o= »urn:schemas-microsoft-com:office:office »>
<head>
<meta charset= »UTF-8″>
<meta http-equiv= »X-UA-Compatible » content= »IE=edge »>
<meta name= »viewport » content= »width=device-width, initial-scale=1″>
<title>Signature Generator</title>

<link rel= »stylesheet » href= »https://www.w3schools.com/w3css/4/w3.css »>

<style>
p.legend {
padding: 0;
margin: 6px 0;
color: grey;
font-size:15px;
line-height: 15px;
font-style: italic;
}
</style>
</head>
<body>
<h1>UTM Generator</h1>
<form class= »w3-container w3-card-4″>
<br />
<label class= »head » class= »w3-text-blue »>Prénom :</label>
<input type= »text » class= »w3-input w3-border » name= »url » placeholder= »Prénom » onkeyup= »setFirstname(this) » />
<br />
<label class= »head » class= »w3-text-blue »>Nom :</label>
<input type= »text » class= »w3-input w3-border » name= »url » placeholder= »Nom » onkeyup= »setName(this) » />
<br />
<label class= »head » class= »w3-text-blue »>Poste :</label>
<input type= »text » class= »w3-input w3-border » name= »url » placeholder= »Entrez l’url » onkeyup= »setPosition(this) » />
<br />
<label class= »head » class= »w3-text-blue »>Email :</label>
<input type= »text » class= »w3-input w3-border » name= »url » placeholder= »Entrez l’url » onkeyup= »setEmail(this) » />
<br />
<label class= »head » class= »w3-text-blue »>Téléphone :</label>
<input type= »text » class= »w3-input w3-border » name= »url » placeholder= »Téléphone » onkeyup= »setPhone(this) » />
<br />
<label class= »head » class= »w3-text-blue »>Url Photo (Gmail) :</label>
<input type= »text » class= »w3-input w3-border » name= »url » placeholder= »Url de votre photo » onkeyup= »setPhoto(this) » />
<br />
<label class= »head » class= »w3-text-blue »>Url Linkedin :</label>
<input type= »text » class= »w3-input w3-border » name= »url » placeholder= »Entrez l’url » onkeyup= »setLinkedin(this) » />
<br />
<label class= »head » class= »w3-text-blue »>Url :</label>
<input type= »text » class= »w3-input w3-border » name= »url » placeholder= »Entrez l’url » onkeyup= »setUrl(this) » />
<br />
<textarea id= »signature » style= »width: 100%; height: 400px; »></textarea>
</form>
</body>

<script>

var firstname = «  »;
var name = «  »;
var position = «  »;
var email = «  »;
var phone = «  »
var photo = «  »;
var linkedin = «  »;
var url = «  »;

function setFirstname(e) {
firstname = e.value;
final(firstname, name, position, email, phone, photo, linkedin, url);
}
function setName(e) {
name = e.value;
final(firstname, name, position, email, phone, photo, linkedin, url);
}
function setPosition(e) {
position = e.value;
final(firstname, name, position, email, phone, photo, linkedin, url);
}
function setEmail(e) {
email = e.value;
final(firstname, name, position, email, phone, photo, linkedin, url);
}
function setPhone(e) {
phone = e.value;
final(firstname, name, position, email, phone, photo, linkedin, url);
}
function setPhoto(e) {
photo = e.value;
final(firstname, name, position, email, phone, photo, linkedin, url);
}
function setLinkedin(e) {
linkedin = e.value;
final(firstname, name, position, email, phone, photo, linkedin, url);
}
function setUrl(e) {
url = e.value;
final(firstname, name, position, email, phone, photo, linkedin, url);
}

function final(firstname, name, position, email, phone, photo, linkedin, url) {

str = firstname +  » –  » + name +  » –  » + position +  » –  » + email +  » –  » + phone +  » –  » + photo +  » –  » + linkedin;

var string = ‘<table style= »border-collapse:collapse;font-family:Helvetica,sans-serif;font-size:14px;line-height:20px; » cellpadding= »0″ border= »0″> <tbody> <tr> <td border= »0″ style= »padding:16px »> <img src= »‘ + photo + ‘ » alt= »Photo ‘ + firstname + ‘ » style= »border:0;height:auto;outline:none;text-decoration:none » width= »96″ height= »96″ border= »0″/> <div style= »text-align:center;padding-top:6px »><a href= »https://twitter.com/hunteed » style= »color:rgb(17,85,204) » target= »_blank »><img src= »https://ci3.googleusercontent.com/proxy/bGzqtlrls_e9vIFsFuBXp_aqxjZ0m5cMUj8Y5G5iNOPtPQNnUKJODsVpe6y8qbgIAOe4dRaKOhZYScPfA-048Zqqm9zf1VLwZkkKNcvP9sOXKM5QgIQMs1AJmwmQA7Ot_kgbp-CG31PCkC3XoZ1uDDwBuK_nyNWslsD7dsOcaFtDLADX7iCYlY9wKHi5Iy-wbOGorxXqkFE=s0-d-e1-ft#https://docs.google.com/uc?export=download&amp;id=0BzINzeWXKBgKU0ZpczZIT0E1WWs&amp;revid=0BzINzeWXKBgKMTFCcE53N01KLzZPREZ6YWJrcUYwNU5JUzZJPQ » alt= » »></a>&nbsp;<a href= »https://www.facebook.com/hunteed/ » style= »color:rgb(17,85,204) » target= »_blank »><img src= »https://ci6.googleusercontent.com/proxy/8ZYoSA6jrbDRh-3A7UJGnPjzFlfBYoDsWM6Uoc80_dkw5-_Cb4J8FGLrF_TOuQ-ommCWLMg1g9ClNaj6C_Pe3jCdmvyeJIjQ_apCYc67Hu7lyulvsDj3IizZYQphSX-G3mf_m-6y02xEZZTYekP7cEsJUpZ7koJraRlDSd9DkZYFwYcs5an6_YobfzHFzlv_NsBS8khJdRg=s0-d-e1-ft#https://docs.google.com/uc?export=download&amp;id=0BzINzeWXKBgKeEM5dVU1cTJOZnc&amp;revid=0BzINzeWXKBgKK1Y3U01RNDBsRmpSTHNPSU13RmIyYndJbkZzPQ » alt= »Facebook »></a>&nbsp;<a href= »‘ + linkedin + ‘ » style= »color:rgb(17,85,204) » target= »_blank »><img src= »https://ci3.googleusercontent.com/proxy/3_OI9n1IXIsfRjWglynLCw4kZN-F6p-2jq5Nx5qf1kglatF-fPJryR6mS5SiQOphtVXXBqc_1iwbDaC89sew0GBkWmzl6gBAJxOm8BUMfNQPaYRQ-oN9CClfp1baOTuZcg75oBla43vCzXG-8FP6epYVuvsf0UnTg7S9wjcERZrjfZbKHxCUcYm1cSw41CQvMUuB-4uUDkA=s0-d-e1-ft#https://docs.google.com/uc?export=download&amp;id=0BzINzeWXKBgKLTcyZW0zOTItUjA&amp;revid=0BzINzeWXKBgKUU0zKzNzWHlLLzFjaVc5aTVOdThEeVZ3YzAwPQ » alt= »Linkedin »></a></div></td><td border= »0″ style= »padding:6px »> <p style= »margin:0px;padding:0px;font-size:13px; »><b>’ + firstname +  »  » + name + ‘</b></p><p style= »margin:0px;padding:0px;font-size:13px; »>’ + position + ‘</p><p style= »margin:0px;padding:0px; »> <a href= »‘ + url + ‘ » target= »_blank »><img src= »https://ci5.googleusercontent.com/proxy/sTXgUJqj9Qjy9Sp6PcVDy79XWKrG9uR7HXBifSlgIWKjgsjmqtvsniFczIJHZ3s3_54m0vBCkkifJc9_aob9XO9pPlLk3OD2_3EoGwaLZ1-RQCKzx9KjXX-eUK5xVYnRbQVVRiNqLWGUkDc=s0-d-e1-ft#https://docs.google.com/a/hunteed.com/uc?id=0ByCcrncELG0ldVdHS0QtWjdCRlU&amp;export=download » alt= »Logo Hunteed » width= »200″ height= »52″></a> </p><p style= »margin:0px;padding:0px;font-size:13px; »>33 rue du Mail 75002 Paris, France</p><p style= »margin:0px;padding:0px;font-size:13px; »><u>Email :</u> <a href= »mailto:’ + email + ‘ » target= »_blank »>’ + email + ‘</a></p><p style= »margin:0px;padding:0px;font-size:13px; »><u>Téléphone :</u> ‘ + phone + ‘</p></td></tr></tbody> </table>’;

document.getElementById(‘signature’).value = string;
}
</script>
</html>