forked from PrestonHager/EmailWriter
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
82 lines (82 loc) · 6.65 KB
/
index.html
File metadata and controls
82 lines (82 loc) · 6.65 KB
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 id="header">
<div class="img-wrapper">
<img id="bxb-logo" src="https://bitbybitcoding.org/imgs/favicon.svg" alt="Logo" style="height:8em;">
<h1 class="logo-text">bit by bit</h1>
</div>
<h1 id="text-title" contenteditable="true">THE TITLE WILL GO HERE</h1>
</div>
<div id="content">
<div id="text-body" class="text" 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>
  - This text is only in paragraphs for now.<br>
  - The button link can be changed in edit mode by clicking on it.<br>
  - Text boxes left blank will collapse in the final file.
</p>
</div>
</div>
<div id="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" tabindex="-1">
<div id="text-cta-button" class="text" contenteditable="true">Click Here!</div>
</button>
</a>
</div>
<div id="socials-wrapper">
<p>
<a href="https://www.instagram.com/_bitxbit_/" class="social undecorate" tooltip="Bit by Bit on Instagram">
<svg enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="SVGID_1_" gradientTransform="matrix(0 -1.982 -1.844 0 -132.522 -51.077)" gradientUnits="userSpaceOnUse" x1="-37.106" x2="-26.555" y1="-72.705" y2="-84.047"><stop offset="0" stop-color="#fd5"/><stop offset=".5" stop-color="#ff543e"/><stop offset="1" stop-color="#c837ab"/></linearGradient><path d="m1.5 1.633c-1.886 1.959-1.5 4.04-1.5 10.362 0 5.25-.916 10.513 3.878 11.752 1.497.385 14.761.385 16.256-.002 1.996-.515 3.62-2.134 3.842-4.957.031-.394.031-13.185-.001-13.587-.236-3.007-2.087-4.74-4.526-5.091-.559-.081-.671-.105-3.539-.11-10.173.005-12.403-.448-14.41 1.633z" fill="url(#SVGID_1_)"/><path d="m11.998 3.139c-3.631 0-7.079-.323-8.396 3.057-.544 1.396-.465 3.209-.465 5.805 0 2.278-.073 4.419.465 5.804 1.314 3.382 4.79 3.058 8.394 3.058 3.477 0 7.062.362 8.395-3.058.545-1.41.465-3.196.465-5.804 0-3.462.191-5.697-1.488-7.375-1.7-1.7-3.999-1.487-7.374-1.487zm-.794 1.597c7.574-.012 8.538-.854 8.006 10.843-.189 4.137-3.339 3.683-7.211 3.683-7.06 0-7.263-.202-7.263-7.265 0-7.145.56-7.257 6.468-7.263zm5.524 1.471c-.587 0-1.063.476-1.063 1.063s.476 1.063 1.063 1.063 1.063-.476 1.063-1.063-.476-1.063-1.063-1.063zm-4.73 1.243c-2.513 0-4.55 2.038-4.55 4.551s2.037 4.55 4.55 4.55 4.549-2.037 4.549-4.55-2.036-4.551-4.549-4.551zm0 1.597c3.905 0 3.91 5.908 0 5.908-3.904 0-3.91-5.908 0-5.908z" fill="#fff"/></svg>
</a>
<a href="https://www.linkedin.com/company/bit-by-bit-coding/" class="social undecorate" tooltip="Bit by Bit on LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 382 382" style="enable-background:new 0 0 382 382;" xml:space="preserve"><path style="fill:#0077B7;" d="M347.445,0H34.555C15.471,0,0,15.471,0,34.555v312.889C0,366.529,15.471,382,34.555,382h312.889C366.529,382,382,366.529,382,347.444V34.555C382,15.471,366.529,0,347.445,0z M118.207,329.844c0,5.554-4.502,10.056-10.056,10.056H65.345c-5.554,0-10.056-4.502-10.056-10.056V150.403c0-5.554,4.502-10.056,10.056-10.056h42.806c5.554,0,10.056,4.502,10.056,10.056V329.844z M86.748,123.432c-22.459,0-40.666-18.207-40.666-40.666S64.289,42.1,86.748,42.1s40.666,18.207,40.666,40.666S109.208,123.432,86.748,123.432z M341.91,330.654c0,5.106-4.14,9.246-9.246,9.246H286.73c-5.106,0-9.246-4.14-9.246-9.246v-84.168c0-12.556,3.683-55.021-32.813-55.021c-28.309,0-34.051,29.066-35.204,42.11v97.079c0,5.106-4.139,9.246-9.246,9.246h-44.426c-5.106,0-9.246-4.14-9.246-9.246V149.593c0-5.106,4.14-9.246,9.246-9.246h44.426c5.106,0,9.246,4.14,9.246,9.246v15.655c10.497-15.753,26.097-27.912,59.312-27.912c73.552,0,73.131,68.716,73.131,106.472L341.91,330.654L341.91,330.654z"/></svg>
</a>
<a href="https://www.facebook.com/BitByBitCoding/" class="social undecorate" tooltip="Bit by Bit on Facebook">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 408.788 408.788" style="enable-background:new 0 0 408.788 408.788;" xml:space="preserve"><path style="fill:#475993;" d="M353.701,0H55.087C24.665,0,0.002,24.662,0.002,55.085v298.616c0,30.423,24.662,55.085,55.085,55.085h147.275l0.251-146.078h-37.951c-4.932,0-8.935-3.988-8.954-8.92l-0.182-47.087c-0.019-4.959,3.996-8.989,8.955-8.989h37.882v-45.498c0-52.8,32.247-81.55,79.348-81.55h38.65c4.945,0,8.955,4.009,8.955,8.955v39.704c0,4.944-4.007,8.952-8.95,8.955l-23.719,0.011c-25.615,0-30.575,12.172-30.575,30.035v39.389h56.285c5.363,0,9.524,4.683,8.892,10.009l-5.581,47.087c-0.534,4.506-4.355,7.901-8.892,7.901h-50.453l-0.251,146.078h87.631c30.422,0,55.084-24.662,55.084-55.084V55.085C408.786,24.662,384.124,0,353.701,0z"/></svg>
</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>