-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcreate.html
168 lines (156 loc) · 5.24 KB
/
create.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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<!-- HTML Meta Tags -->
<title>Mailspread</title>
<meta
name="description"
content="Create and share email templates with ease !"
/>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- icons and themes -->
<meta name="theme-color" content="#11191f" />
<link
rel="icon"
href="./imgs/favicon.svg"
sizes="any"
type="image/svg+xml"
/>
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://mailspread.netlify.app/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Mailspread" />
<meta
property="og:description"
content="Create and share email templates with ease !"
/>
<meta property="og:image" content="https://i.imgur.com/JZViZMR.png" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="" />
<meta property="twitter:url" content="https://mailspread.netlify.app/" />
<meta name="twitter:title" content="Mailspread" />
<meta
name="twitter:description"
content="Create and share email templates with ease !"
/>
<meta name="twitter:image" content="https://i.imgur.com/JZViZMR.png" />
<!-- style sheet links -->
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
/>
<link rel="stylesheet" href="./styles/highlight.css" />
<link rel="stylesheet" href="./styles/global.css" />
</head>
<body>
<main class="app">
<!-- app branding -->
<h1 class="branding">
<a href="index.html">MailSpread</a> <span>Generate</span>
</h1>
<form id="templateForm">
<!-- input to address -->
<label for="to-address">To</label>
<input
id="toAddress"
required
name="toAddress"
multiple
type="email"
placeholder="Enter to emails (separated by comma)"
/>
<small>you can add multiple emails separated by commas</small>
<!-- input to subject -->
<label for="subject">Subject</label>
<input
required
name="subject"
type="text"
placeholder="Enter subject"
/>
<!-- input to body -->
<label for="body">
Body
<svg
style="cursor: pointer"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 48"
width="20px"
height="20px"
onclick="openModal()"
>
<path
fill="#2196f3"
d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"
/>
<path
fill="#fff"
d="M22 22h4v11h-4V22zM26.5 16.5c0 1.379-1.121 2.5-2.5 2.5s-2.5-1.121-2.5-2.5S22.621 14 24 14 26.5 15.121 26.5 16.5z"
/>
</svg>
</label>
<div class="textarea-container">
<textarea
spellcheck="false"
required
onInput="this.parentNode.dataset.replicatedValue = this.value"
class="body-textarea"
id="bodyTextArea"
name="body"
placeholder="Enter body (click on i button for info)"
></textarea>
</div>
<!-- form submit button -->
<button type="submit" id="submitBtn">Generate link</button>
</form>
<!-- modal to show instructions -->
<dialog id="modal">
<article>
<header class="modal-header">
<a
href="#close"
aria-label="Close"
class="close"
onClick="closeModal()"
></a>
How to use Template Tags in body
</header>
<p>
Template Tags are of form <code>{{value:type}}</code>.
<code>value</code> can be any thing like "phone", "full name",
"address", etc. <code>type</code> is the type of value like number,
text, date, etc. (all html input types are supported).
</p>
<p>
Some of the examples are <code>{{full name : text}}</code>
<code>{{roll : number}}</code>, <code>{{deadline : date}}</code> the
<b>default type is text</b> and hence mentioning it is optional. eg:
<code>{{full name}}</code>
</p>
</article>
</dialog>
<!-- footer of app -->
<footer class="footer">
<p>
Made with <span class="heart">♥</span> by
<a href="https://srujangurram.me">Srujan Gurram</a>
</p>
</footer>
</main>
<!-- Embed app.js -->
<script src="./lib/jquery.min.js"></script>
<script src="./lib/base64.js"></script>
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script src="./lib/highlight.js"></script>
<script src="./lib/autosize.min.js"></script>
<script src="./js/create.js"></script>
</body>
</html>