<!DOCTYPE html>
<html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Email Signature Builder</title>
    <link rel='stylesheet' id='brandfonts-css'  href='https://use.typekit.net/hrz3oev.css?ver=5.3.2' type='text/css' media='all' />
    <link rel="stylesheet" href="./scripts/normalize.css">
    <link rel="stylesheet" href="./scripts/flexboxgrid.css">
    <link rel="stylesheet" href="./scripts/style.css">
</head>
<body>
      <section id="instructions">
        <h2>Instructions</h2>
        <ol>
          <li>
            <p>
              Fill in the form fields that you’d like to include in your
              signature. A preview of your signature will be built as you type.
            </p>
          </li>
          <li>
            <p>
              Select the format option you’d like to use. The signature content
              will be highlighted.
            </p>
          </li>
          <li>
            <p>Copy the signature that was just highlighted:</p>
            <p>
              <strong>Windows:</strong> Press <kbd>Ctrl+C</kbd><br>
              <strong>Mac:</strong> Press <kbd>⌘+C</kbd><br>
              <strong>Or in your browser:</strong> Click <kbd>Edit</kbd> in the
              toolbar, then <kbd>Copy</kbd>
            </p>
          </li>
          <li>
            <p>Paste it into your email program of choice.</p>
          </li>
        </ol>
      </section>
      <!-- <hr /> -->
      <div class="row">
        <div class="col-xs-12 col-md-6">
          <form id="signature-fields" class="form form-stacked row">
            <div class="col-xs-12">
              <div class="control-group">
                <label for="name">Name</label>
                <input id="name" name="person[name]" type="text" data-enpassusermodified="yes" value="">
              </div>
              <div class="control-group">
                <label for="credential">Academic/Professional Designation</label>
                <input id="credential" name="person[credential]" type="text" data-enpassusermodified="yes" value="">
              </div>
              <div class="control-group">
                <label for="unit">School/College/Unit</label>
                <input id="unit" name="person[unit]" type="text" data-enpassusermodified="yes" value="">
              </div>
              <div class="control-group">
                <label for="title">Title</label>
                <input id="title" name="person[title]" type="text" data-enpassusermodified="yes" value="">
              </div>
              <div class="control-group">
                <label for="address-building">Building</label>
                <input id="address-building" name="address[building]" type="text" data-enpassusermodified="yes" value="">
              </div>
              <div class="control-group">
                <label for="address-street">Address 1</label>
                <input id="address-street" name="address[street]" type="text" data-enpassusermodified="yes" value="">
              </div>
              <div class="control-group">
                <label for="address-extended">Address 2</label>
                <input id="address-extended" name="address[extended]" type="text">
              </div>
              <div class="control-group">
                <label for="city">City</label>
                <input id="city" name="address[city]" type="text" data-enpassusermodified="yes" value="West Lafayette">
              </div>
              <div class="control-group">
                <label for="state">State</label>
                <select id="state" name="address[state]" data-enpassusermodified="yes">
                  <option value="">— Select State —</option>
                  <option value="AL">Alabama</option>
                  <option value="AK">Alaska</option>
                  <option value="AZ">Arizona</option>
                  <option value="AR">Arkansas</option>
                  <option value="CA">California</option>
                  <option value="CO">Colorado</option>
                  <option value="CT">Connecticut</option>
                  <option value="DE">Delaware</option>
                  <option value="DC">District Of Columbia</option>
                  <option value="FL">Florida</option>
                  <option value="GA">Georgia</option>
                  <option value="HI">Hawaii</option>
                  <option value="ID">Idaho</option>
                  <option value="IL">Illinois</option>
                  <option value="IN" selected="selected">Indiana</option>
                  <option value="IA">Iowa</option>
                  <option value="KS">Kansas</option>
                  <option value="KY">Kentucky</option>
                  <option value="LA">Louisiana</option>
                  <option value="ME">Maine</option>
                  <option value="MD">Maryland</option>
                  <option value="MA">Massachusetts</option>
                  <option value="MI">Michigan</option>
                  <option value="MN">Minnesota</option>
                  <option value="MS">Mississippi</option>
                  <option value="MO">Missouri</option>
                  <option value="MT">Montana</option>
                  <option value="NE">Nebraska</option>
                  <option value="NV">Nevada</option>
                  <option value="NH">New Hampshire</option>
                  <option value="NJ">New Jersey</option>
                  <option value="NM">New Mexico</option>
                  <option value="NY">New York</option>
                  <option value="NC">North Carolina</option>
                  <option value="ND">North Dakota</option>
                  <option value="OH">Ohio</option>
                  <option value="OK">Oklahoma</option>
                  <option value="OR">Oregon</option>
                  <option value="PA">Pennsylvania</option>
                  <option value="RI">Rhode Island</option>
                  <option value="SC">South Carolina</option>
                  <option value="SD">South Dakota</option>
                  <option value="TN">Tennessee</option>
                  <option value="TX">Texas</option>
                  <option value="UT">Utah</option>
                  <option value="VT">Vermont</option>
                  <option value="VA">Virginia</option>
                  <option value="WA">Washington</option>
                  <option value="WV">West Virginia</option>
                  <option value="WI">Wisconsin</option>
                  <option value="WY">Wyoming</option>
                </select>
              </div>
              <div class="control-group">
                <label for="postalcode">Postal Code</label>
                <input id="postalcode" name="address[postalcode]" type="tel" pattern="(\d{5}([\-]\d{4})?)" data-enpassusermodified="yes" value="">
              </div> 
              <div class="control-group">
                <label for="phone">Phone</label>
                <input id="phone" name="contact[phone]" type="tel" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="___-___-____" data-enpassusermodified="yes" value="">
              </div>
              <div class="control-group">
                  <label for="mobile">Mobile Phone</label>
                  <input id="mobile" name="contact[mobile]" type="tel" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="___-___-____" data-enpassusermodified="yes" value="">
              </div>
              <div class="control-group">
                <label for="email">Email</label>
                <input id="email" name="contact[email]" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" data-enpassusermodified="yes" value="">
              </div>
              <div class="control-group">
                <label for="website">Website</label>
                <input id="website" name="contact[website]" type="text">
              </div>
            </div>
              
              <!-- Hide Functionality 
              <div class="control-group">
                <label for="social" class="checkbox">Include Social Media Links?</label>
                <input id="social" type="checkbox" name="social" data-enpassusermodified="yes">
              </div>
              <div class="control-group">
                <label for="giving" class="checkbox">Include Giving Link?</label>
                <input id="giving" type="checkbox" name="giving[display]">
              </div>
              <div class="control-group">
                <label for="customGivingUrl">Custom Fund URL</label>
                <small><a href="https://gail.uga.edu/giving/commit-form-url-generator" target="_blank">Fund URL Lookup</a></small>
                <input id="customGivingUrl" name="giving[url]" placeholder="Copy/paste URL from the lookup" type="text">
              </div>
              -->
       
          </form>
        </div>
   

        <div class="col-xs-12 col-md-6">
          <div class="signatures">
            <div class="option col-xs-12 ">
              <h2 class="option-title">Option 1</h2>
              <div id="template1" class="signature"></div>
            </div>
            <div class="option col-xs-12 ">
              <h2 class="option-title">Option 2</h2>
              <div id="template2" class="signature"></div>
            </div>
            <div class="option col-xs-12 ">
              <h2 class="option-title">Option 3</h2>
              <div id="template3" class="signature"></div>
            </div>
            <div class="col-xs-12">
              <form id="signature-output" class="form">
                <textarea
                  id="signature-html"
                  name="signature"
                  hidden
                  readonly
                ></textarea>
                <div>
                  <!-- <a id="clip" class="button button-primary" data-clipboard-target="#signature-html">Copy to Clipboard</a> -->
                  <p>
                    <a id="highlight" class="button button-tertiary"
                      >Re-Select Signature Text</a
                    >
                  </p>
                  <div class="alert">
                    Formatting may be lost when pasting into Microsoft Outlook
                    client. If format looks incorrect, hover your cursor around
                    the bottom-right corner of the signature to activate
                    <em>Paste Options</em>. Click the dropdown arrow and select
                    <em>Keep Source Formatting</em>.
                  </div>
                  <h4>Client-specific Instructions</h4>
								<ul>
									<li><a href="https://support.office.com/en-us/article/Create-and-add-a-signature-to-messages-8ee5d4f4-68fd-464a-a1c1-0e1c80bb27f2" target="_blank">Microsoft Outlook</a></li>
									<li><a href="https://support.apple.com/guide/mail/create-and-use-email-signatures-mail11943/mac" target="_blank">macOS Mail</a></li>
									<!-- <li><a href="https://support.google.com/mail/answer/8395?co=GENIE.Platform%3DDesktop&hl=en" target="_blank">Gmail</a></li> -->
								</ul>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>


    <script src="./scripts/jquery_003.js"></script>
    <script src="./scripts/handlebars.js"></script>
    <script src="./scripts/jquery_002.js"></script>
    <script src="./scripts/jquery.js"></script>
    <script src="./scripts/h.js"></script>
    <script src="./scripts/app.js"></script>

    <script id="option-1" type="x-handlebars-template">

          {{> fontCSS}}

      		{{#if (or person.name person.unit person.title)}}
      			<p style="margin-bottom: 1em; font-size: 13pt; {{> fontFamily}}">
      				{{#person}}
      					{{#if name}}
      						<span style="font-weight: 900; {{> fontFamily}}">{{name}}</span>{{#if credential}}<span style="font-weight: 900;{{> fontFamily}}">, {{credential}}</span>{{/if}}
                {{/if}}
                {{#if title}}
      						{{#if name}}<br />{{/if}}
      						<span style="font-style: italic;{{> fontFamily}}">{{title}}</span>
      					{{/if}}
                {{#if unit}}
                  {{#if (or name title)}}<br />{{/if}}
                  <span style="color:#8E6F3E;{{> fontFamily}}">{{unit}}</span>
                {{/if}}
      					
      				{{/person}}
      			</p>
      		{{/if}}

      		{{#if (or address.street address.extended address.city address.state address.postalcode)}}
      				<p style=" margin-bottom: 1em; font-size: 11pt; {{> fontFamily}}">
              {{#if address.building}}
      					<span style="{{> fontFamily}}">{{address.building}}</span>
      					{{#if address.street}}<br />{{/if}}
      				{{/if}}
              {{#if address.street}}
      					<span style="{{> fontFamily}}">{{address.street}}</span>{{#if address.extended}}, <span style="{{> fontFamily}}">{{address.extended}}</span>{{/if}}
      				{{/if}}
      				{{#if (locality address)}}
      					{{#if (or address.extended address.street address.building)}}<br />{{/if}}
      					<span style="{{> fontFamily}}">{{locality address}}</span>
      				{{/if}}
      			</p>
      		{{/if}}

      		{{#if (or contact.phone contact.mobile contact.email contact.website)}}
            <p style=" margin-bottom: 1em; font-size: 11pt; {{> fontFamily}}">
      				{{#contact}}
      					{{#if phone}}
      						<span style="text-decoration: none;{{> fontFamily}}">{{{phoneLink phone}}}</span>
                {{/if}}
                {{#if mobile}}
                  {{#if phone}}<br />{{/if}}
      						<span style="text-decoration: none;{{> fontFamily}}">{{{mobileLink mobile}}}</span>
      					{{/if}}
                {{#if email}}
                  {{#if (or phone mobile)}}<br />{{/if}}
                  <span style="{{> fontFamily}}">{{{emailLink email}}}</span>{{/if}}
      					{{#if website}}
      						{{#if (or phone mobile email)}}<br />{{/if}}
      						<span style="{{> fontFamily}}">{{websiteLink website}}</span>
      					{{/if}}
      				{{/contact}}
      			</p>
      		{{/if}}

      		{{> signatureLogo}}

      		{{#social}}
      			{{> socialMediaLinks}}
      		{{/social}}

      		{{#if giving.display}}
      			{{{givingLink giving.url}}}
      		{{/if}}
      	​
    </script>
    <script id="option-2" type="x-handlebars-template">
      ​    {{> fontCSS}}
      		{{#if (or person.name person.unit person.title)}}
      			<p style="margin-bottom: 1em; font-size: 13pt; {{> fontFamily}}">
      				{{#person}}
      					{{#if name}}<span style="font-weight: 900;">{{name}}</span>{{#if credential}}<span style="font-weight: 900;">, {{credential}}</span>{{/if}}
      						{{#if (jobInline unit title)}}<br />{{/if}}
      					{{/if}}
      					{{#if (or unit title)}}<span>{{{jobInline unit title}}}</span>{{/if}}
      				{{/person}}
      			</p>
      		{{/if}}

      		{{#if (or address.street address.extended (locality address) )}}
      			<p style="margin-bottom: 1em; font-size: 11pt; {{> fontFamily}}">
      				{{#address}}
      					{{#if (or (streetCombined this) (locality this))}}
      						<span>{{streetCombined this}}{{#if (and (streetCombined this) (locality this))}} | {{/if}}{{locality this}}</span>
      						{{#if (or ../contact.phone ../contact.email ../contact.website)}}<br />{{/if}}
      					{{/if}}
      				{{/address}}
      			</p>
          {{/if}}
          
          {{#if (or contact.phone contact.mobile contact.email contact.website)}}
      			<p style="margin-bottom: 1em; font-size: 11pt; {{> fontFamily}}">
      					<span>{{{contactCombined (phoneLink contact.phone) (mobileLink contact.mobile) (emailLink contact.email) (websiteLink contact.website)}}}</span>
      			</p>
      		{{/if}}

      		{{> signatureLogo}}

      		{{#social}}
      			{{> socialMediaLinks}}
      		{{/social}}

      		{{#if giving.display}}
      			{{{givingLink giving.url}}}
      		{{/if}}
      	​
    </script>
    <script id="option-3" type="x-handlebars-template">
      ​    {{> fontCSS}}
      		{{#if (or person.name person.unit person.title person.name person.unit person.title )}}
      			<p style="margin-bottom: 1em; font-size: 13pt; {{> fontFamily}}">
      				{{#person}}
      					{{#if name}}
      						<span style="font-weight: 900;">{{name}}</span>{{#if credential}}<span style="font-weight: 900;">, {{credential}}</span>{{/if}}
      						{{#if (or unit title)}}<br />{{/if}}
      					{{/if}}
      				  {{#if (or unit title)}}<span>{{{jobInline unit title}}}</span>{{/if}}
      				{{/person}}
      			</p>
          {{/if}}
          
          {{#if (or address.street address.extended (locality address))}}
            <p style="margin-bottom: 1em; font-size: 11pt; {{> fontFamily}}">
              {{#address}}
                {{#if (or (streetCombined this) (locality this))}}
                  <span>{{streetCombined this}}{{#if (and (streetCombined this) (locality this))}} | {{/if}}{{locality this}}</span>
                {{/if}}
              {{/address}}
            </p>
          {{/if}}

      		{{#if (or contact.phone contact.mobile contact.email contact.website)}}
      			<p style="margin-bottom: 1em; font-size: 11pt; {{> fontFamily}}">
      				{{#contact}}
                {{#if phone}}
                  <span>{{{phoneLink phone}}}</span>
                {{/if}}
                {{#if mobile}}
                  {{#if phone}}<br />{{/if}}
                  <span>{{{mobileLink mobile}}}</span>
                {{/if}}
                {{#if email}}
                  {{#if (or phone mobile)}}<br />{{/if}}
                  <span>{{{emailLink email}}}</span>{{/if}}
                {{#if website}}
                  {{#if (or phone mobile email)}}<br />{{/if}}
                  <span>{{websiteLink website}}</span>
                {{/if}}
      				{{/contact}}
      			</p>
      		{{/if}}

      		{{> signatureLogo}}

      		{{#social}}
      			{{> socialMediaLinks}}
      		{{/social}}

      		{{#if giving.display}}
      			{{{givingLink giving.url}}}
      		{{/if}}
      	​
    </script>
  

</body></html>