144 lines
8.6 KiB
HTML
144 lines
8.6 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="noticeslip">
|
|
|
|
<div class="navbar">
|
|
<div class="navbar-bg"></div>
|
|
<div class="navbar-inner">
|
|
<div class="left">
|
|
<a class="link back hapticbtn" href="#">
|
|
<i class="icon icon-back"></i>
|
|
<span class="if-not-md">Back</span>
|
|
</a>
|
|
</div>
|
|
<div class="title">Pick Up and Redeliver</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 text-align-center">
|
|
<div class="block padding-vertical-half">
|
|
Missed a delivery? For a fee, we'll pick up your oversized or signature-required item from the Helena Post Office and deliver it to your front door, even if nobody's home to sign for it.
|
|
</div>
|
|
<div class="block padding-vertical-half">
|
|
You just need to fill out this form, sign the back of the pink notice slip, and take a picture of it with this app. Information provided must match the information on the notice slip.
|
|
</div>
|
|
<div class="block padding-vertical-half">
|
|
Your item will be delivered within one business day of submitting a request, excluding postal holidays. This service is not available for Restricted Delivery or Registered Mail.
|
|
</div>
|
|
<div class="list" id="noticeform">
|
|
<ul>
|
|
<li class="item-content item-input item-input-outline">
|
|
<div class="item-inner">
|
|
<div class="item-title item-floating-label">Recipient Name</div>
|
|
<div class="item-input-wrap">
|
|
<input type="text" id="name" placeholder="Jon Doe" />
|
|
<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">Street Address</div>
|
|
<div class="item-input-wrap">
|
|
<input type="text" id="street" placeholder="1234 Example Rd, Apt 1A" />
|
|
<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">ZIP Code</div>
|
|
<div class="item-input-wrap">
|
|
<input type="text" id="zip" placeholder="59602" inputmode="numeric" />
|
|
<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">Phone Number</div>
|
|
<div class="item-input-wrap">
|
|
<input type="tel" id="phone" />
|
|
<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">Email Address</div>
|
|
<div class="item-input-wrap">
|
|
<input type="email" id="email" />
|
|
<span class="input-clear-button"></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="block">
|
|
Press the buttons to take a photo of the front and back of your signed notice slip.
|
|
|
|
<div class="row" style="min-height: 100px;">
|
|
<div class="col-50">
|
|
<div class="button button-outline margin hapticbtn" onclick="takeDocPhoto('front')"><i class="fas fa-camera"></i> Front</div>
|
|
<img src="assets/images/3849_front.png" id="noticefrontimg" style="max-width: 100%; max-height: 50vh;" />
|
|
</div>
|
|
<div class="col-50">
|
|
<div class="button button-outline margin hapticbtn" onclick="takeDocPhoto('back')"><i class="fas fa-camera"></i> Back</div>
|
|
<img src="assets/images/3849_back.png" id="noticebackimg" style="max-width: 100%; max-height: 50vh;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="block margin-vertical">
|
|
By signing below, you authorize a Helena Express agent to sign for and take possession of your item from the Helena Post Office and to deliver it to the address entered above.
|
|
</div>
|
|
<div class="signature-wrapper">
|
|
<img src="assets/images/signature-line.svg" />
|
|
<canvas id="signaturecanvas"></canvas>
|
|
<i class="fas fa-undo text-color-blue" id="signatureUndoBtn"></i>
|
|
<i class="fas fa-trash text-color-red" id="signatureClearBtn"></i>
|
|
</div>
|
|
<div class="list" id="noticesignform">
|
|
<ul>
|
|
<li class="item-content item-input item-input-outline">
|
|
<div class="item-inner">
|
|
<div class="item-title item-floating-label">Your Name</div>
|
|
<div class="item-input-wrap">
|
|
<input type="text" id="signature" />
|
|
<span class="input-clear-button"></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-content-padding">
|
|
<div class="button hapticbtn" onclick="noticeSlipPayAndFinish()"><i class="far fa-arrow-right"></i> Finish</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="popup" id="noticeslip-pay-popup">
|
|
<div class="block text-align-center">
|
|
<h2>Finish and pay</h2>
|
|
<h3>Total: $<span id="noticeslip-pay-amount"></span></h3>
|
|
<div id="noticeslip-stripe-elements">
|
|
<i class="fas fa-spin fa-spinner"></i> Loading secure card form...
|
|
</div>
|
|
<div id="noticeslip-card-errors" style="text-color-red"></div>
|
|
<br />
|
|
<br />
|
|
<div class="button hapticbtn" onclick="submitNoticeSlip()"><i class="far fa-arrow-right"></i> Pay and Submit</div>
|
|
<p><a class="button popup-close hapticbtn" href="#">Cancel</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
</div> |