Skip to content

Commit

Permalink
Add an Email Signature Generator
Browse files Browse the repository at this point in the history
  • Loading branch information
@spjmurray
spjmurray committed Feb 6, 2024
1 parent 4f98eef commit 3b3c18f
Showing 1 changed file with 191 additions and 0 deletions.
191 changes: 191 additions & 0 deletions email/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nscale Email Signature Generator</title>
<link rel="icon" href="https://assets.nscale.com/img/nscale/favicon/light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" href="https://assets.nscale.com/img/nscale/favicon/dark.svg" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="https://assets.nscale.com/css/colors.css">
<style>
body {
box-sizing: border-box;
}
body > img {
width: 300px;
height: auto;
}
form {
display: grid;
grid-template-columns: auto 1fr;
grid-auto-flow: row;
grid-gap: 1em;
}
.preview {
border: 1px solid var(--brand);
}
</style>
<script>
function copyToClipboard() {
const signature = document.getElementById('signature');

window.getSelection().removeAllRanges();

var range = document.createRange();
range.selectNode(signature);

window.getSelection().addRange(range);

document.execCommand('copy');

return false;
}

function update(element) {
console.log("got input", element);

const target = document.getElementById('p' + element.id);
console.log(target);

target.innerHTML = element.value;
}
</script>
</head>
<body>
<img src="https://assets.nscale.com/img/nscale/blue/logo.svg" />
<h1>Email Signature Generator</h1>

<h2>Instructions</h2>
<ol>
<li>Enter your details in the form below</li>
<li>Double check the preview</li>
<li>Click the button to copy the signature to the clipboard</li>
<li>In Gmail, click on <em>Settings</em> in the top right</li>
<li>Select <em>See all settings</em></li>
<li>Under <em>Signature</em>, <em>Create new</em> and name it <em>nscale</em>, then paste (e.g. <code>ctl + V</code>) into the textbox</li>
<li>Select <em>nscale</em> as the default for new emails</li>
<li>Select <em>Insert signature before the quoted text in replies</em></li>
<li>Click <em>Save changes</em> down the bottom</li>
</ol>

<h2>Your Details</h2>

<form>
<label for="forename">Forname</label>
<input id="forename" type="text" placeholder="Joe" required oninput="update(this)"/ >

<label for="surname">Surname</label>
<input id="surname" type="text" placeholder="Bloggs" required oninput="update(this)" />

<label for="jobtitle">Job title</label>
<input id="jobtitle" type="text" placeholder="Janitor" required oninput="update(this)" />

<label for="email">Email</label>
<input id="email" type="email" placeholder="[email protected]" required oninput="update(this)" />

<label for="phone">Phone number</label>

<input id="phone" type="text" placeholder="(+44) 071234 566789" required oninput="update(this)" />
</form>

<h2>Preview</h2>
<div class="preview">

<!-- This is a distillation of https://www.hubspot.com/email-signature-generator -->
<table id="signature" cellpadding="0" cellspacing="0" style="font-size: large; font-family: Arial;" class="table__StyledTable-sc-1avdl6r-0 kAbRZI">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="width: 100%; font-size: large; font-family: Arial;" class="table__StyledTable-sc-1avdl6r-0 kAbRZI">
<tbody>
<tr>
<td height="20"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="font-size: large; font-family: Arial;" class="table__StyledTable-sc-1avdl6r-0 kAbRZI">
<tbody>
<tr>
<td width="150" style="vertical-align: middle;"><span style="margin-right: 20px; display: block;" class="template3__ImageContainer-sc-vj949k-0 jeScQV"><img src="https://assets.nscale.com/img/nscale/blue/logo.png" role="presentation" style="max-width: 130px;" width="130" class="image__StyledImage-sc-hupvqm-0 gYgOut"></span></td>
<td style="vertical-align: middle;">
<h2 color="#1F1F1F" style="margin: 0px; font-size: 20px; color: rgb(31, 31, 31); font-weight: 600;" class="name__NameContainer-sc-1m457h3-0 jxbGUj"><span id="pforename">Joe</span><span>&nbsp;</span><span id="psurname">Bloggs</span></h2>
<p color="#1F1F1F" font-size="large" style="margin: 0px; color: rgb(31, 31, 31); font-size: 16px; line-height: 24px;" class="job-title__Container-sc-1hmtp73-0 ifJNJc"><span id="pjobtitle">Janitor</span></p>
</td>
<td width="30">
<div style="width: 30px;"></div>
</td>
<td color="#aabcc0" direction="vertical" width="1" height="auto" style="width: 1px; border-bottom: medium; border-left: 1px solid rgb(170, 188, 192);" class="color-divider__Divider-sc-1h38qjv-0 llIisW"></td>
<td width="30">
<div style="width: 30px;"></div>
</td>
<td style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" style="font-size: large; font-family: Arial;" class="table__StyledTable-sc-1avdl6r-0 kAbRZI">
<tbody>
<tr style="vertical-align: middle;" height="25">
<td width="30" style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" style="font-size: large; font-family: Arial;" class="table__StyledTable-sc-1avdl6r-0 kAbRZI">
<tbody>
<tr>
<td style="vertical-align: bottom;"><span color="#aabcc0" width="11" style="display: inline-block; background-color: rgb(170, 188, 192);" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#aabcc0" alt="mobilePhone" width="13" style="display: block; background-color: rgb(170, 188, 192);" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri"></span></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px; color: rgb(31, 31, 31);"><a href="tel:(+44) 07734115369" color="#1F1F1F" style="text-decoration: none; color: rgb(31, 31, 31); font-size: 12px;" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU"><span id="pphone">(+01) 02345 678901</span></a></td>
</tr>
<tr style="vertical-align: middle;" height="25">
<td width="30" style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" style="font-size: large; font-family: Arial;" class="table__StyledTable-sc-1avdl6r-0 kAbRZI">
<tbody>
<tr>
<td style="vertical-align: bottom;"><span color="#aabcc0" width="11" style="display: inline-block; background-color: rgb(170, 188, 192);" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#aabcc0" alt="emailAddress" width="13" style="display: block; background-color: rgb(170, 188, 192);" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri"></span></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px;"><a href="mailto:[email protected]" color="#1F1F1F" style="text-decoration: none; color: rgb(31, 31, 31); font-size: 12px;" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU"><span id="pemail">[email protected]</span></a></td>
</tr>
<tr style="vertical-align: middle;" height="25">
<td width="30" style="vertical-align: middle;">
<table cellpadding="0" cellspacing="0" style="font-size: large; font-family: Arial;" class="table__StyledTable-sc-1avdl6r-0 kAbRZI">
<tbody>
<tr>
<td style="vertical-align: bottom;"><span color="#aabcc0" width="11" style="display: inline-block; background-color: rgb(170, 188, 192);" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#aabcc0" alt="website" width="13" style="display: block; background-color: rgb(170, 188, 192);" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri"></span></td>
</tr>
</tbody>
</table>
</td>
<td style="padding: 0px;"><a href="https://nscale.com/" color="#1F1F1F" style="text-decoration: none; color: rgb(31, 31, 31); font-size: 12px;" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU"><span>https://nscale.com/</span></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="width: 100%; font-size: large; font-family: Arial;" class="table__StyledTable-sc-1avdl6r-0 kAbRZI">
<tbody>
<tr>
<td height="20"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

</div>

<h2>Copy your Signature</h2>
<input type="submit" onclick="copyToClipboard()" value="Copy to clipboard" />


</body>
</html>

0 comments on commit 3b3c18f

Please sign in to comment.