views/agreement.ejs

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    line-height: 1.3;
    font-family: 'Helvetica', Arial, sans-serif;
  }
  h1 {
    margin: 0 0 1em;
  }
  .info {
    border-bottom: 1px solid #000;
    padding: 0 .2em;
    font-weight: bold;
  }
  .signature-block {
    margin-bottom: 3em;
  }
  .signature-field {
    min-height: 25px;
    border-bottom: 1px solid #000;
  }
  .form {
    border: 1px solid #000;
  }
  .form td {
    padding: 2px 6px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
  }
  .form tr:last-child td {
    border-bottom: none;
  }
  .form td:last-child {
    border-right: none;
  }
  .form label {
    font-size: 11px;
    margin: 0;
    padding: 0;
  }
  .form td p {
    font-size: 14px;
    padding: 2px 0 4px;
    margin: 0;
  }
</style>
</head>
<body>
  <h1>Agreement</h1>

  <p>This document was signed by <span class="info"><%= name %></span> on behalf of <span class="info"><%= company %></span>.</p>

  <div class="signature-block">
    <p class="signature-field"><img src="<%= signature %>" height="55"></p>
    <p>Name: <%= name %><br>Role: <%= role %><br>Date: <%= date %></p>
  </div>

  <table class="form" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td><label>Company name:</label><p><%= company %></p></td>
      <td><label>Country:</label><p><%= country %></p></td>
    </tr>
    <tr>
      <td><label>Name:</label><p><%= name %></p></td>
      <td><label>Role:</label><p><%= role %></p></td>
    </tr>
    <tr>
      <td colspan="2"><label>Signature:</label><p><img src="<%= signature %>" height="55"></p></td>
    </tr>
  </table>
</body>
</html>