EmailWriter/index.html at master · PrestonHager/EmailWriter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html style="min-height:100%;display:flex;">
<head>
  <title>Email Writer</title>
  <link id="stylesheet" rel="stylesheet" href="style.css">
</head>
<body onload="start();">
  <div id="button-wrapper">
    <button id="preview-button" class="action-button">
      Preview
    </button>
    <button id="save-button" class="action-button">
      Save
    </button>
  </div>
  <div class="header">
    <div class="img-wrapper">
      <img class="bxb-logo" src="https://raw.githubusercontent.com/PrestonHager/EmailWriter/master/icons/logo.png" alt="Logo" title="Logo" height="auto" width="auto" style="height:8em;display:block;">
      <h1 class="logo-text">bit by bit</h1>
    </div>
    <h1 id="text-title" class="text text-title" contenteditable="true">THE TITLE WILL GO HERE</h1>
  </div>
  <div class="content">
    <div id="text-body" class="text text-body" contenteditable="true">
      <p>Dear Recipient,</p>
      <p>
        We are thrilled to offer you a great opportunity!
        What is this you might ask, well it's nothing really.
        I can't actually offer you anything because this is just filler text.
        However, if you would be so kind to try and click on the button below.
      </p>
      <p>
        This email template is updated enough that it's usable, however there will be more features added in the future.
        For now, just edit the text in each text box.
        Then click the preview button to make sure that it looks how it should.
        Finally, finish by clicking the save button.
        This will save an HTML file to your disk containing all of the email.
        Simply send this HTML file as an email and you're well on your way!
      </p>
      <p>
        A few things to note:<br>
        &nbsp&nbsp- This text is only in paragraphs for now.<br>
        &nbsp&nbsp- The button link can be changed in edit mode by clicking on it.<br>
        &nbsp&nbsp- Text boxes left blank will collapse in the final file.
      </p>
    </div>
  </div>
  <div class="footer">
    <div style="background-color:#9BDEF3;padding:1em 2em;text-align:center;">
      <h2 id="text-subheading" class="text" contenteditable="true">Wanna learn more?</h2>
      <p id="text-cta" class="text" contenteditable="true">This will just be a very short blurb. It can also be left blank.</p>
      <a id="button-cta" href="https://bitbybitcoding.org/" tabindex="-1">
        <button id="cta-button" class="cta-button" tabindex="-1">
          <div id="text-cta-button" class="text" contenteditable="true">Click Here!</div>
        </button>
      </a>
    </div>
    <div class="socials-wrapper">
      <p>
        <a href="https://www.instagram.com/_bitxbit_/" class="social undecorate" tooltip="Bit by Bit on Instagram">
          <img src="https://raw.githubusercontent.com/PrestonHager/EmailWriter/master/icons/instagram.png" alt="IG" title="Instagram" width="auto" height="auto" style="border-radius: 0.5em;">
        </a>
        <a href="https://www.linkedin.com/company/bit-by-bit-coding/" class="social undecorate" tooltip="Bit by Bit on LinkedIn">
          <img src="https://raw.githubusercontent.com/PrestonHager/EmailWriter/master/icons/linkedin.png" alt="IG" title="Instagram" width="auto" height="auto">
        </a>
        <a href="https://www.facebook.com/BitByBitCoding/" class="social undecorate" tooltip="Bit by Bit on Facebook">
          <img src="https://raw.githubusercontent.com/PrestonHager/EmailWriter/master/icons/facebook.png" alt="IG" title="Instagram" width="auto" height="auto">
        </a>
      </p>
      <p>
        <a href="https://bitbybitcoding.org/" class="undecorate">bitbybitcoding.org</a>
      </p>
      <p>
        <a href="mailto:info@bitbybitcoding.org" class="undecorate">info@bitbybitcoding.org</a>
      </p>
    </div>
  </div>
  <script src="https://unpkg.com/@popperjs/core@2"></script>
  <script src="https://unpkg.com/tippy.js@6"></script>
  <script src="script.js"></script>
</body>
</html>