-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
314 lines (313 loc) · 22.2 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
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Send Bulk SMS</title>
<link rel="icon" type="image/x-icon" href="/style/favicon.png">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="A simple interface to send bulk sms messages using the Telnyx API.">
<meta content="Telnyx, Telnyx API, Bulk SMS, Bulk Text, Send SMS, Send Text, Alphanumeric, SMS, Test Message" name="keywords">
<meta name="robots" content="all">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<div id="app" data-v-app="">
<main>
<div class="hero__container bg--black hero__container--page">
<div class="hero__image hero__image--overlay">
<picture>
<img src="style/sms-header.webp" alt="" />
</picture>
</div>
<div class="hero__content hero__content--left">
<div class="hero__content__inner container hero__content__inner--left">
<h1>Bulk SMS</h1>
<h2>Send loads of texts with a single click</h2>
</div>
</div>
</div>
<div class="services__body">
<div class="content-block">
<div class="content-block__wrapper">
<div class="content-block__image">
<picture>
<img src="style/social-messages.svg" alt="" />
</picture>
</div>
<div class="content-block__text">
<h2 class="content-block__heading ">Let's Get Texting!</h2>
<div class="content-block__body ">
<p>Complete the form below to send SMS messages with your Telnyx account.</p>
<ul>
<li>Send thousands of messages in seconds.</li>
<li>Improve your reach with alphanumeric sender names.</li>
<li>Message numbers from any country.</li>
<li>Intuitive user interface and experience.</li>
<li>Fast and accurate number validation.</li>
</ul>
<p>Sign up for a <a href="https://telnyx.com/sign-up" target="_blank" rel="noopener noreferrer">Telnyx account here.</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="services__body">
<div class="content-block">
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item flex-fill" title="Telnyx Account Details">
<div class="nav-link active rounded-circle mx-auto d-flex align-items-center justify-content-center" onclick="goToTab(1);" id="tab-step1">
<div class="progress-steps">1</div>
</div>
</li>
<li class="nav-item flex-fill" role="presentation" data-bs-toggle="tooltip" data-bs-placement="top" title="Phone Numbers">
<div class="nav-link nav-disabled rounded-circle mx-auto d-flex align-items-center justify-content-center" onclick="goToTab(2);" id="tab-step2">
<div class="progress-steps">2</div>
</div>
</li>
<li class="nav-item flex-fill" role="presentation" data-bs-toggle="tooltip" data-bs-placement="top" title="Write Message">
<div class="nav-link nav-disabled rounded-circle mx-auto d-flex align-items-center justify-content-center" onclick="goToTab(3);" id="tab-step3">
<div class="progress-steps">3</div>
</div>
</li>
<li class="nav-item flex-fill" role="presentation" data-bs-toggle="tooltip" data-bs-placement="top" title="Send Message">
<div class="nav-link nav-disabled rounded-circle mx-auto d-flex align-items-center justify-content-center" onclick="goToTab(4);" id="tab-step4">
<div class="progress-steps">4</div>
</div>
</li>
<li class="nav-item flex-fill" role="presentation" data-bs-toggle="tooltip" data-bs-placement="top" title="Send Confirmation">
<div class="nav-link nav-disabled rounded-circle mx-auto d-flex align-items-center justify-content-center" onclick="goToTab(5);" id="tab-step5">
<div class="progress-steps">5</div>
</div>
</li>
<div id="navProgressBar" class='nav-progress-bar'></div>
<div id="navLinkBar" class='nav-link-bar'></div>
</ul>
<div id="progressStepTabContents">
<div class="content-nav-block" id="step1">
<div class="content-block__wrapper">
<div class="content-block__text content-block-navigation">
<h2 class="content-block__heading">Telnyx Account Details</h2>
<div class="content-block__body">
<ul>
<li>Enter your Telnyx API key.</li>
<li>Enter your Telnyx mobile number.</li>
<li>Enter an alphanumeric name for the messages.*</li>
<li>Enter your Telnyx messaging profile ID.*</li>
<br>
<p>*Options available by ticking the alphanumeric SMS checkbox.</p>
</ul>
</div>
</div>
<div class="content-block__text content-block-navigation">
<div id="accountBalance" class="sms-balance"></div>
<div class="sms-numbers-right">
<div class="contact-form__body contact-form__body__no__border">
<div>
<label class="form-check-control">
<input type="checkbox" id="alphanumericCheck" name="alphanumericCheck"
onclick="toggleAlphanumericSMS();" />
Alphanumeric SMS (Extra costs apply)
</label>
</div>
<div class="form__section">
<div class="inputTitle">Telnyx API Key:</div>
<input type="text" id="apiKey" placeholder="Telnyx API Key" value="">
<div id="numberInput">
<div class="inputTitle">Telnyx Mobile Number:</div>
<input type="text" id="telnyxSendFrom" placeholder="Telnyx Mobile Number" value="">
</div>
<div id="alphanumericInput" class="hide-element">
<div class="inputTitle">Alphanumeric Name:</div>
<input type="text" id="telnyxAlphanumericName" onkeyup="this.value=this.value.replace(/[^a-zA-Z0-9\s]/g, '')" maxlength="11" placeholder="Alphanumeric Name up to 11 Characters" value="">
<div class="inputTitle">Telnyx Messaging Profile:</div>
<input type="text" id="telnyxMessagingProfile" placeholder="Telnyx Messaging Profile ID" value="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-block__wrapper">
<div class="content-back-forward-buttons d-flex justify-content-right">
<div class="content-simple__button">
<a id="step1-continue" class="button button--primary unicode-next nav-disabled" href="javascript:void(0);" onclick="nextTab(1);">Continue</a>
</div>
</div>
</div>
</div>
<div class="content-nav-block hide-element" id="step2">
<div class="content-block__wrapper">
<div class="content-block__text content-block-navigation">
<h2 class="content-block__heading">Phone Numbers</h2>
<div class="content-block__body">
<ul>
<li>Enter a list of numbers you want to message.</li>
<li>Separate numbers by:</li>
<ul class="subpoint">
<li>Commas</li>
<li>New lines</li>
<li>+</li>
</ul>
<li>Drag and drop a text file full of numbers into the phone number box to auto populate.</li>
<li>Check the <a href="https://telnyx.com/pricing/messaging" target="_blank" rel="noopener noreferrer">cost per message</a>.</li>
</ul>
</div>
</div>
<div class="content-block__text content-block-navigation">
<div class="sms-numbers-right">
<div class="contact-form__body contact-form__body__no__border">
<div class="form__section">
<div class="inputTitle">Phone Number List:
<label id="totalNumbers"></label>
</div>
<textarea class="fullwidth_textarea fullheight_textarea" placeholder="Populate with phone numbers including country code. E.g. +447123456789" id="phoneNumberInput" ondragover="onDragOverHandler(event)" ondrop="onFilesDropHandler(event)" ondragleave="onDragLeaveHandler(event)"></textarea>
</div>
<div>
<div id="invalidNumbers" class="hide-element">
<div id="sendErrorsText" class="error_download_delete"></div>
<img class="download_errors" onClick="downloadErrorNumbers('invalid_numbers')" src="style/download.svg" alt="" />
<img class="trash_errors" onClick="deleteErrorNumbers('invalidNumbers')" src="style/trash.svg" alt="" />
<a id="invalid_numbers" class="download_icon hidden-element" href="#" download></a>
</div>
<div id="missingCountryCodeErrors" class="hide-element">
<div id="missingCountryCodeText" class="error_download_delete"></div>
<img class="download_errors" onClick="downloadErrorNumbers('missing_country_codes')" src="style/download.svg" alt="" />
<img class="trash_errors" onClick="deleteMissingCountryCode('missingCountryCodeErrors')" src="style/trash.svg" alt="" />
<a id="missing_country_codes" class="download_icon hidden-element" href="#" download></a>
</div>
<div id="duplicateNumbers" class="hide-element">
<div id="duplicateNumbersText" class="error_download_delete"></div>
<img class="download_errors" onClick="downloadErrorNumbers('duplicate_numbers')" src="style/download.svg" alt="" />
<img class="trash_errors" onClick="deleteErrorNumbers('duplicateNumbers')" src="style/trash.svg" alt="" />
<a id="duplicate_numbers" class="download_icon " href="#" download></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-block__wrapper">
<div class="content-back-forward-buttons d-flex justify-content-between">
<div class="content-simple__button"><a class="button button--grey unicode-back" href="javascript:void(0);" onclick="previousTab(2);">Back</a>
</div>
<div class="content-simple__button">
<a id="step2-continue" class="button button--primary unicode-next nav-disabled" href="javascript:void(0);" onclick="nextTab(2);">Continue</a>
</div>
</div>
</div>
</div>
<div class="content-nav-block hide-element" id="step3">
<div class="content-block__wrapper">
<div class="content-block__text content-block-navigation">
<h2 class="content-block__heading">Write Message</h2>
<div class="content-block__body">
<p>Write a message to send to all of the numbers entered in the last section.</p>
<p>The character count and number of SMS messages will update as text is entered.*</p>
<p>*A standard SMS message is limited to 160 characters. If it goes over 160 characters it is broken up into parts of 153 characters.</p>
</div>
</div>
<div class="content-block__text content-block-navigation">
<div class="sms-numbers-right">
<div class="contact-form__body contact-form__body__no__border">
<div class="form__section">
<div class="inputTitle">SMS Message:</div>
<textarea class="fullwidth_textarea" placeholder="SMS Message" id="textMessageInput"></textarea>
</div>
<div id="characterCount">Character Count: 0</div>
<div id="smsCount">SMS Messages: 0</div>
</div>
</div>
</div>
</div>
<div class="content-block__wrapper">
<div class="content-back-forward-buttons d-flex justify-content-between">
<div class="content-simple__button"><a class="button button--grey unicode-back" href="javascript:void(0);" onclick="previousTab(3);">Back</a>
</div>
<div class="content-simple__button">
<a id="step3-continue" class="button button--primary unicode-next nav-disabled" href="javascript:void(0);" onclick="nextTab(3);">Continue</a>
</div>
</div>
</div>
</div>
<div class="content-nav-block hide-element" id="step4">
<div class="content-block__wrapper">
<div class="content-block__text content-block-navigation">
<h2 class="content-block__heading">Verify and Send</h2>
<div class="content-block__body">
<p>Please check the details of your message and the number of people the message will be delivered to.</p>
<ul>
<li id="totalSendTo"></li>
<li id="totalCharacters"></li>
<li id="totalMessages"></li>
<li id="totalErrors"></li>
<li id="totalDuplicates"></li>
</ul>
<p>Press send to complete the process.</p>
</div>
</div>
<div class="content-block__text content-block-navigation">
<div class="sms-numbers-right">
<div class="contact-form__body contact-form__body__no__border">
<div class="form__section">
<div class="inputTitle">SMS Preview:</div>
<textarea disabled class="info_textarea" id="messageToSendConfirmation"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="content-block__wrapper">
<div class="content-back-forward-buttons d-flex justify-content-between">
<div class="content-simple__button"><a class="button button--grey unicode-back" href="javascript:void(0);" onclick="previousTab(4);">Back</a>
</div>
<div class="content-simple__button"><a class="button button--primary unicode-envelope" href="javascript:void(0);" onclick="sendSMS();">Send SMS</a>
</div>
</div>
</div>
</div>
<div class="content-nav-block hide-element" id="step5">
<div class="content-block__wrapper">
<div class="content-block__text content-block-navigation">
<h2 class="content-block__heading">Confirmation</h2>
<div class="content-block__body">
<p id="confirmationSending">Send in progress, please wait.</p>
<ul>
<li id="confirmationSuccessNumber"></li>
<li id="confirmationErrorNumber"><b>0</b> messages failed to send</li>
<li id="confirmationCosts">Calculating cost...</li>
<li id="confirmationNewBalance">Calculating cost...</li>
</ul>
<p id="confirmationSendingStatus"></p>
<div id="numberSendStatusContainer" class="hide-element">
<div id="numberSendStatus" class="error_download_delete">Download the sent status report</div>
<img class="download_errors" onClick="downloadErrorNumbers('sms_sent_status_summary')" src="style/download.svg" alt="" />
<a id="sms_sent_status_summary" class="download_icon " href="#" download></a>
</div>
</div>
</div>
<div class="content-block__image">
<picture>
<img id="confirmationSendingIcon" class="image-confirmation hide-element" src="style/hardware-other.svg" alt="" />
<img id="confirmationFatalIcon" class="image-confirmation hide-element" src="style/fatal-error.svg" alt="" />
<img id="confirmationSentIcon" class="image-confirmation" src="style/email-existing.svg" alt="" />
</picture>
</div>
</div>
<div class="content-block__wrapper">
<div class="content-back-forward-buttons d-flex justify-content-left">
<div class="content-simple__button"><a class="button button--primary unicode-reset" href="javascript:void(0);" onclick="resetApplication();">Reset</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="scripts/errorHandler.js" type="text/javascript"></script>
<script src="scripts/post.js" type="text/javascript"></script>
<script src="scripts/script.js" type="text/javascript"></script>
<script src="scripts/utilities.js" type="text/javascript"></script>
<script src="scripts/libphonenumber/bundle/libphonenumber-min.js" type="text/javascript"></script>
</html>