-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (124 loc) · 6.69 KB
/
index.html
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<title>send-e.ml — Create one-click email templates</title>
<!-- Metadata -->
<meta name="description" content="Email templates, made one click away.">
<meta name="charset" content="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Twitter card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@jareddantis">
<meta name="twitter:title" content="send-e.ml">
<meta name="twitter:description" content="Email templates, made one click away.">
<meta name="twitter:image" content="https://send-e.ml/favicon/android-chrome-512x512.png">
<!-- Resource prioritization for performance -->
<link rel="preconnect" href="https://storage.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Inter:400,700|Roboto+Mono&display=swap" as="style">
<link rel="preload" href="style/style.css" as="style">
<!-- Page styles -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inter:400,700|Roboto+Mono&display=swap" as="style">
<link rel="stylesheet" type="text/css" href="style/style.css">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#e17a8d">
<link rel="shortcut icon" href="favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="send-e.ml">
<meta name="application-name" content="send-e.ml">
<meta name="msapplication-TileColor" content="#8d9ac5">
<meta name="msapplication-config" content="favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div id="header">
<div class="left">
<h1><img src="favicon/logo.png" alt="mail icon"> send-<strong>e.ml</strong></h1>
</div>
<div class="right">
<span id="reset">Reset</span>
</div>
</div>
<div id="app">
<div class="intro">
<h2>Create one-click email templates</h2>
<p>Great for <strong>support emails, petition emails...</strong> anywhere you need a consistent email format.</p>
</div>
<!-- Composer -->
<div id="composer">
<div class="row">
<div class="label"><label for="field-recipient">To</label></div>
<div class="field"><input type="email" placeholder="recipient@example.com" id="field-recipient"></div>
</div>
<div class="row">
<div class="label"><label for="field-cc">Cc</label></div>
<div class="field"><input type="email" placeholder="Separate multiple addresses with commas" id="field-cc"></div>
</div>
<div class="row">
<div class="label"><label for="field-bcc">Bcc</label></div>
<div class="field"><input type="email" placeholder="Separate multiple addresses with commas" id="field-bcc"></div>
</div>
<div class="row">
<div class="label"><label for="field-subject">Subj</label></div>
<div class="field"><input type="text" placeholder="Email subject" maxlength="78" id="field-subject"></div>
</div>
<div class="row">
<div class="label"><label for="field-body">Body</label></div>
<div class="field"><textarea maxlength="1500" id="field-body" placeholder="Good day..."></textarea></div>
</div>
<span id="charcount">0/1500</span>
</div>
<div class="buttons">
<button id="submit">Copy link</button>
<button id="shorten">Shorten link</button>
</div>
<div id="success">
<h3 id="success-title">Success!</h3>
<p id="success-msg"></p>
</div>
<pre id="result"></pre>
<!-- Details -->
<hr>
<div class="details">
<div>
<h2>What is send-e.ml?</h2>
<p>send-e.ml allows you to create email templates that you can then access and use simply by clicking a link.
Just press the link, and your email app will magically open with everything filled out for you. <strong>All you
have to do is press send!</strong></p>
<p>This gives you the benefit of <strong>reusable templates</strong> that can be publicly accessed —
great for times when multiple people have to send similar emails, like customer support requests or petitions.</p>
</div>
<div>
<h2>How does it work?</h2>
<p>This tool allows you to create <code>mailto</code> links <a href="https://en.wikipedia.org/wiki/Mailto" target="_blank" rel="noopener">(Wikipedia ↗)</a>, which are a special type of link that directs a user to an email address instead of a webpage.</p>
<p>To use the generated <code>mailto</code> link, paste it into your browser address bar and hit Enter <strong>or</strong> shorten the link and use the shortened link instead.</p>
</div>
<div>
<h2>Which link shortener are you using?</h2>
<p>send-e.ml uses the fantastic <a href="https://shrtco.de/docs/" target="_blank" rel="noopener">shrtco.de ↗</a> link shortening API. Shortening your email template links through this app means that you agree to shrtcode's <a href="https://shrtco.de/tos" target="_blank" rel="noopener">Terms of Service ↗</a>.</p>
<p>You're free to use any other link shortener you want! Just press <strong>Copy Link</strong> and paste the link in your preferred link shortener.</p>
</div>
<div>
<h2>Is my data being stored?</h2>
<p>Link generation is performed completely on your device, all through JavaScript. None of your data is transmitted remotely from this app, until you press the <strong>Shorten Link button.</strong></p>
<p>send-e.ml itself does not use cookies.</p>
</div>
<div>
<h2>Can I see the source code?</h2>
<p>Absolutely! This website is hosted on GitHub Pages, and the source code is available on <a href="https://github.com/jareddantis/send-email" target="_blank" rel="noopener">GitHub ↗</a></p>
<p>I'd love to hear what you think! Hit me up on <a href="https://github.com/jareddantis" target="_blank" rel="noopener">Twitter ↗</a></p>
</div>
</div>
<!-- Footer -->
<div class="footer">
<p>made with <span class="red">♥</span> from the Philippines by</p>
<a href="https://dantis.me" target="_blank" rel="noopener"><img src="https://dantis.me/img/name.svg" alt="Jared Dantis"></a>
</div>
</div>
<!-- Script -->
<script type="text/javascript" src="script/script.js" defer></script>
</body>
</html>