You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
HelenaExpressApp/www/pages/telegram.html

125 lines
8.1 KiB
HTML

<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<div class="page" data-name="telegram">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link back" href="#">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Telegram</div>
</div>
</div>
<div class="page-content">
<div class="row justify-content-center">
<div class="col-100 medium-90 xlarge-75 margin-horizontal">
<div class="card margin">
<div class="card-content padding-vertical" id="telegramForm">
<div class="list media-list">
<ul>
<li>
<div class="block text-align-center">
<img src="assets/images/telegram.svg" class="margin" style="max-height: 20vh; max-width: 80%;" />
<p class="margin" id="telegram-dyncontent">
Send a telegram with Helena Express for $15.
We'll hand-deliver your message to anywhere in Helena, East Helena, Montana City, the Helena Valley, and the hills around Helena.
</p>
</div>
</li>
</ul>
</div>
<div class="list accordion-list">
<ul>
<li class="accordion-item">
<a class="item-content item-link no-padding-left" href="#">
<div class="item-inner justify-content-center no-padding-right">
<div class="item-title">More Info</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>If you put in a destination outside the Helena area, your telegram will be delivered by the postal service.
If the recipient isn't home, we'll leave a note and try again the following day, usually at a different time of day.
If nobody answers the second time, we'll either leave the telegram at their front door or,
if you request it in the special instructions, send it to them via the U.S. Mail.</p>
</div>
</div>
</li>
</ul>
</div>
<div class="list media-list">
<ul>
<li class="padding text-align-center" id="addPaymentMethodNag" style="display: none;">
<i class="fa-duotone fa-exclamation-circle fa-2x text-color-orange"></i><br>
You need an account with a linked credit card to send a telegram in the app. <span class="taptext">Tap</span><span class="clicktext">Click</span> the button to update your account.
<a class="button hapticbtn button-fill margin" href="/account"><i class="fa-solid fa-user-circle"></i> Update My Account</a>
</li>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title item-floating-label">Message</div>
<div class="item-input-wrap">
<textarea id="telegrammessage" rows="5" class="resizable" placeholder="" inputmode="latin-prose" style="font-family: 'Roboto Mono', 'Ubuntu Mono', 'Courier New', monospace; text-transform: uppercase;"></textarea>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content justify-content-left">
<label class="checkbox">
<!-- checkbox input -->
<input type="checkbox" id="stopperiodcheckbox" />
<!-- checkbox icon -->
<i class="icon-checkbox"></i>
</label>
<label for="stopperiodcheckbox" class="text-align-left padding-half">Replace end-of-sentence periods (a period followed by a space) with <span style="font-family: 'Roboto Mono', 'Ubuntu Mono', 'Courier New', monospace; white-space: nowrap;">-(STOP)-</span></label>
</li>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title item-floating-label">To</div>
<div class="item-input-wrap">
<textarea id="telegramto" rows="3" placeholder="John Smith&#10;123 Sample Rd&#10;Helena MT 59601"></textarea>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title item-floating-label">From</div>
<div class="item-input-wrap">
<textarea id="telegramfrom" rows="3" placeholder=""></textarea>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title item-floating-label">Special Instructions</div>
<div class="item-input-wrap">
<textarea id="telegraminstructions" rows="2" class="resizable" placeholder="Request specific delivery date/time, add delivery instructions, etc"></textarea>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="padding">
By pressing the "Send Telegram" button, you agree that we can
bill your saved payment method for $15.
</li>
<li class="padding">
<div class="button hapticbtn button-fill" onclick="sendTelegram()"><i class="fa-solid fa-paper-plane"></i> Send Telegram</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>