Skip to content

Commit

Permalink
Update to the newer version
Browse files Browse the repository at this point in the history
  • Loading branch information
@sleepylee
sleepylee committed Oct 22, 2024
1 parent eaeeb17 commit df224af
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 63 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Note that the website URL contains UTM parameters used to track web traffic to o

## Getting Your Signature

To generate your signature, head over to [https://nimble-email-signature.herokuapp.com/](https://nimble-email-signature.herokuapp.com/)
To generate your signature, head over to [https://nimblehq.github.io/email-signature](https://nimblehq.github.io/email-signature)

This script will grab the latest email signature template and generate your signature.

Expand Down
95 changes: 33 additions & 62 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,33 @@
<div>
<table role="presentation" style="font-family: Helvetica, Arial, sans-serif; color: #0F0033;">
<tbody>
<tr>
<td>
<table role="presentation">
<tbody>
<tr>
<td style="font-size: 14px; color: #0F0033; font-weight: bold;">Your Name</td>
</tr>
<tr>
<td style="font-size: 12px; color: #6F6685;">Position</td>
</tr>
<tr>
<td>
<a href="tel:+66 (0)2 258 3649" target="_blank" style="font-size: 12px; color: #0F0033; text-decoration: none !important; display: block; margin-bottom: 4px; margin-top: 12px;">+66 (0)2 258 3649</a>
<a href="https://nimblehq.co/?utm_source=email&utm_medium=email-signature&utm_campaign=your-name" target="_blank" style="font-size: 12px; color: #0F0033; text-decoration: none !important; display: block; margin-bottom: 12px;">nimblehq.co</a>
</td>
</tr>
<tr>
<td colspan="2" class="social-icons">
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="float: left; margin-right: 8px; margin-left: 0 !important;">
<a href="https://www.facebook.com/nimblehq" target="_blank" style="font-size: 12px; font-weight: bold; line-height: 24px; color: #0F0033; text-decoration: none !important; display: inline-block; text-align: center; width: 24px; height: 24px; background-color: #EEF2F5;">
Fb
</a>
</li>
<li style="float: left; margin-right: 8px; margin-left: 0 !important;">
<a href="https://www.instagram.com/nimble_hq/" target="_blank" style="font-size: 12px; font-weight: bold; line-height: 24px; color: #0F0033; text-decoration: none !important; display: inline-block; text-align: center; width: 24px; height: 24px; background-color: #EEF2F5;">
Ig
</a>
</li>
<li style="float: left; margin-right: 8px; margin-left: 0 !important;">
<a href="https://www.linkedin.com/company/nimblehq" target="_blank" style="font-size: 12px; font-weight: bold; line-height: 24px; color: #0F0033; text-decoration: none !important; display: inline-block; text-align: center; width: 24px; height: 24px; background-color: #EEF2F5;"">
In
</a>
</li>
<li style="float: left; margin-right: 8px; margin-left: 0 !important;">
<a href="https://dribbble.com/nimblehq" target="_blank" style="font-size: 12px; font-weight: bold; line-height: 24px; color: #0F0033; text-decoration: none; display: inline-block; text-align: center; width: 24px; height: 24px; background-color: #EEF2F5;">
Db
</a>
</li>
<li style="float: left; margin-right: 8px; margin-left: 0 !important;">
<a href="https://www.behance.net/nimblehq" target="_blank" style="font-size: 12px; font-weight: bold; line-height: 24px; color: #0F0033; text-decoration: none !important; display: inline-block; text-align: center; width: 24px; height: 24px; background-color: #EEF2F5;">
Be
</a>
</li>
<li style="float: left; margin-right: 8px; margin-left: 0 !important;" >
<a href="https://medium.com/nimble" target="_blank" style="font-size: 12px; font-weight: bold; line-height: 24px; color: #0F0033; text-decoration: none !important; display: inline-block; text-align: center; width: 24px; height: 24px; background-color: #EEF2F5;">
M
</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Email Signature Generator</title>
</head>
<body>
<h1>Email Signature Generator</h1>

<form id="signatureForm">
<p>
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" name="fullName" required />
</p>
<p>
<label for="phoneNumber">Phone Number:</label>
<input type="text" id="phoneNumber" name="phoneNumber" required />
</p>
<p>
<label for="position">Position:</label>
<input type="text" id="position" name="position" required />
</p>
<button type="submit">Generate Signature</button>
</form>

<div id="signaturePreview">
<!-- The generated signature will appear here -->
</div>

<script src="script.js"></script>
</body>
</html>
83 changes: 83 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
document.getElementById("signatureForm").addEventListener("submit", function(event) {
event.preventDefault();

// Get user input
const fullName = document.getElementById("fullName").value;
const phoneNumber = document.getElementById("phoneNumber").value;
const position = document.getElementById("position").value;

// Define the email signature template
//const signatureTemplate = `
// <p><strong>${fullName}</strong></p>
// <p>${position}</p>
// <p>Phone: ${phoneNumber}</p>
//`;

const signatureTemplate = `
<div>
<table role="presentation" style="font-family: Helvetica, Arial, sans-serif; color: #0F0033;">
<tbody>
<tr>
<td>
<table role="presentation">
<tbody>
<tr>
<td style="font-size: 14px; color: #0F0033; font-weight: bold;">${fullName}</td>
</tr>
<tr>
<td style="font-size: 12px; color: #6F6685;">${position}</td>
</tr>
<tr>
<td>
<a href="tel:+66 (0)2 258 3649" target="_blank" style="font-size: 12px; color: #0F0033; text-decoration: none !important; display: block; margin-bottom: 4px; margin-top: 12px;">${phoneNumber}</a>
<a href="https://nimblehq.co/?utm_source=email&utm_medium=email-signature&utm_campaign=your-name" target="_blank" style="font-size: 12px; color: #0F0033; text-decoration: none !important; display: block; margin-bottom: 12px;">nimblehq.co</a>
</td>
</tr>
<tr>
<td colspan="2" class="social-icons">
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="float: left; margin-right: 8px; margin-left: 0 !important;">
<a href="https://www.facebook.com/nimblehq" target="_blank" style="font-size: 12px; font-weight: bold; line-height: 24px; color: #0F0033; text-decoration: none !important; display: inline-block; text-align: center; width: 24px; height: 24px; background-color: #EEF2F5;">
Fb
</a>
</li>
<li style="float: left; margin-right: 8px; margin-left: 0 !important;">
<a href="https://www.instagram.com/nimble_hq/" target="_blank" style="font-size: 12px; font-weight: bold; line-height: 24px; color: #0F0033; text-decoration: none !important; display: inline-block; text-align: center; width: 24px; height: 24px; background-color: #EEF2F5;">
Ig
</a>
</li>
<li style="float: left; margin-right: 8px; margin-left: 0 !important;">
<a href="https://www.linkedin.com/company/nimblehq" target="_blank" style="font-size: 12px; font-weight: bold; line-height: 24px; color: #0F0033; text-decoration: none !important; display: inline-block; text-align: center; width: 24px; height: 24px; background-color: #EEF2F5;"">
In
</a>
</li>
<li style="float: left; margin-right: 8px; margin-left: 0 !important;">
<a href="https://dribbble.com/nimblehq" target="_blank" style="font-size: 12px; font-weight: bold; line-height: 24px; color: #0F0033; text-decoration: none; display: inline-block; text-align: center; width: 24px; height: 24px; background-color: #EEF2F5;">
Db
</a>
</li>
<li style="float: left; margin-right: 8px; margin-left: 0 !important;">
<a href="https://www.behance.net/nimblehq" target="_blank" style="font-size: 12px; font-weight: bold; line-height: 24px; color: #0F0033; text-decoration: none !important; display: inline-block; text-align: center; width: 24px; height: 24px; background-color: #EEF2F5;">
Be
</a>
</li>
<li style="float: left; margin-right: 8px; margin-left: 0 !important;" >
<a href="https://medium.com/nimble" target="_blank" style="font-size: 12px; font-weight: bold; line-height: 24px; color: #0F0033; text-decoration: none !important; display: inline-block; text-align: center; width: 24px; height: 24px; background-color: #EEF2F5;">
M
</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
`;

// Display the generated signature in the preview area
document.getElementById("signaturePreview").innerHTML = signatureTemplate;
});

0 comments on commit df224af

Please sign in to comment.