dcovington
/
Purple_Envelop_Order_Site


			
				
					
						
						
							
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta
    name="description"
    content="Order professional purple ballot envelope addressing, USPS barcode preparation, data processing, and mailing services."
  />
  <title>Purple Envelope Addressing & Barcoding</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
    rel="stylesheet"
  />
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="site-header">
    <div class="container nav-wrap">
      <a class="brand" href="#top" aria-label="Purple Envelope home">
        <span class="brand-mark" aria-hidden="true">PE</span>
        <span>
          <strong>Purple Envelope</strong>
          <small>Addressing & Barcoding</small>
        </span>
      </a>

      <nav class="main-nav" aria-label="Primary navigation">
        <a href="#services">Services</a>
        <a href="#process">Process</a>
        <a href="#order">Order</a>
        <a href="#faq">FAQ</a>
      </nav>

      <a class="button button-small button-outline" href="#order">Start an order</a>
    </div>
  </header>

  <main id="top">
    <section class="hero">
      <div class="container hero-grid">
        <div class="hero-copy">
          <span class="eyebrow">Election mail production made simple</span>
          <h1>Accurate purple envelope addressing and USPS barcode preparation.</h1>
          <p class="hero-lead">
            Upload your voter or recipient list, select your production options,
            and receive a clear order total before submitting your job.
          </p>

          <div class="hero-actions">
            <a class="button button-primary" href="#order">Build your order</a>
            <a class="button button-secondary" href="#services">View services</a>
          </div>

          <ul class="trust-list" aria-label="Service benefits">
            <li>Secure data handling</li>
            <li>Address formatting and validation</li>
            <li>Intelligent Mail barcode preparation</li>
          </ul>
        </div>

        <div class="hero-visual" aria-label="Sample addressed purple envelope">
          <div class="envelope-card">
            <div class="envelope-top">
              <span class="sample-label">ADDRESS SERVICE REQUESTED</span>
              <span class="permit">PRESORTED<br>FIRST-CLASS MAIL</span>
            </div>

            <div class="recipient-block">
              <strong>JANE SAMPLE</strong>
              <span>1234 EXAMPLE AVENUE</span>
              <span>GRAND RAPIDS MI 49503-1234</span>
            </div>

            <div class="barcode" aria-label="Sample barcode">
              <span></span><span></span><span></span><span></span><span></span>
              <span></span><span></span><span></span><span></span><span></span>
              <span></span><span></span><span></span><span></span><span></span>
              <span></span><span></span><span></span><span></span><span></span>
              <span></span><span></span><span></span><span></span><span></span>
              <span></span><span></span><span></span><span></span><span></span>
              <span></span><span></span><span></span><span></span><span></span>
              <span></span><span></span><span></span><span></span><span></span>
            </div>

            <div class="envelope-seal" aria-hidden="true"></div>
          </div>

          <div class="stat-card stat-card-one">
            <strong>99.9%</strong>
            <span>production accuracy goal</span>
          </div>

          <div class="stat-card stat-card-two">
            <strong>Fast</strong>
            <span>proof approval workflow</span>
          </div>
        </div>
      </div>
    </section>

    <section class="service-strip" aria-label="Service highlights">
      <div class="container service-strip-grid">
        <div>
          <strong>Address cleanup</strong>
          <span>Standardized mailing fields</span>
        </div>
        <div>
          <strong>USPS barcode setup</strong>
          <span>IMb-ready production data</span>
        </div>
        <div>
          <strong>Inkjet addressing</strong>
          <span>Clear, machine-readable output</span>
        </div>
        <div>
          <strong>Proof approval</strong>
          <span>Review before production begins</span>
        </div>
      </div>
    </section>

    <section class="section" id="services">
      <div class="container">
        <div class="section-heading">
          <span class="eyebrow">Complete production support</span>
          <h2>Everything needed to prepare your ballot envelopes.</h2>
          <p>
            Choose only the services you need, from basic addressing to a
            complete data-processing and mailing workflow.
          </p>
        </div>

        <div class="card-grid">
          <article class="feature-card">
            <span class="feature-number">01</span>
            <h3>Recipient addressing</h3>
            <p>
              Print recipient names, delivery addresses, city, state, ZIP Code,
              return-service endorsements, and optional identifiers.
            </p>
          </article>

          <article class="feature-card">
            <span class="feature-number">02</span>
            <h3>Barcode preparation</h3>
            <p>
              Prepare and print Intelligent Mail barcode data using the mailing
              fields and identifiers supplied for your project.
            </p>
          </article>

          <article class="feature-card">
            <span class="feature-number">03</span>
            <h3>List processing</h3>
            <p>
              Review column structure, remove obvious formatting problems,
              standardize capitalization, and identify incomplete records.
            </p>
          </article>

          <article class="feature-card">
            <span class="feature-number">04</span>
            <h3>Proof and production</h3>
            <p>
              Receive a digital sample for approval before the full envelope
              run enters production.
            </p>
          </article>
        </div>
      </div>
    </section>

    <section class="section section-muted" id="process">
      <div class="container">
        <div class="section-heading centered">
          <span class="eyebrow">Simple four-step workflow</span>
          <h2>From uploaded list to completed order.</h2>
        </div>

        <div class="process-grid">
          <div class="process-step">
            <span>1</span>
            <h3>Enter job details</h3>
            <p>Provide quantity, envelope specifications, and due date.</p>
          </div>
          <div class="process-step">
            <span>2</span>
            <h3>Upload your files</h3>
            <p>Add recipient data, artwork, instructions, or a sample envelope.</p>
          </div>
          <div class="process-step">
            <span>3</span>
            <h3>Approve your proof</h3>
            <p>Review the address placement and sample barcode before printing.</p>
          </div>
          <div class="process-step">
            <span>4</span>
            <h3>Production begins</h3>
            <p>Your approved job is addressed, checked, packed, and delivered.</p>
          </div>
        </div>
      </div>
    </section>

    <section class="section order-section" id="order">
      <div class="container">
        <div class="section-heading">
          <span class="eyebrow">Online order request</span>
          <h2>Build your envelope addressing order.</h2>
          <p>
            This form calculates an estimate. Final pricing can be confirmed
            after your data and production requirements are reviewed.
          </p>
        </div>

        <form class="order-layout" id="orderForm">
          <div class="form-panel">
            <fieldset class="form-section">
              <legend>
                <span>1</span>
                Contact information
              </legend>

              <div class="form-grid two-columns">
                <label>
                  Full name
                  <input type="text" name="fullName" autocomplete="name" required />
                </label>

                <label>
                  Organization
                  <input type="text" name="organization" autocomplete="organization" />
                </label>

                <label>
                  Email address
                  <input type="email" name="email" autocomplete="email" required />
                </label>

                <label>
                  Phone number
                  <input type="tel" name="phone" autocomplete="tel" required />
                </label>
              </div>
            </fieldset>

            <fieldset class="form-section">
              <legend>
                <span>2</span>
                Job specifications
              </legend>

              <div class="form-grid two-columns">
                <label>
                  Number of envelopes
                  <input
                    id="quantity"
                    type="number"
                    name="quantity"
                    min="100"
                    step="50"
                    value="1000"
                    required
                  />
                  <small>Minimum order: 100 envelopes</small>
                </label>

                <label>
                  Requested completion date
                  <input type="date" name="dueDate" required />
                </label>

                <label>
                  Envelope size
                  <select name="envelopeSize" id="envelopeSize">
                    <option value="standard">Standard ballot envelope</option>
                    <option value="large">Large ballot envelope</option>
                    <option value="custom">Custom size</option>
                  </select>
                </label>

                <label>
                  Envelope supply
                  <select name="envelopeSupply" id="envelopeSupply">
                    <option value="customer">I will supply the envelopes</option>
                    <option value="vendor">Please supply the envelopes</option>
                  </select>
                </label>

                <label>
                  Turnaround
                  <select name="turnaround" id="turnaround">
                    <option value="standard">Standard — 5 to 7 business days</option>
                    <option value="rush">Rush — 2 to 3 business days</option>
                  </select>
                </label>

                <label>
                  Ink color
                  <select name="inkColor">
                    <option>Black</option>
                    <option>Blue</option>
                    <option>Custom color review</option>
                  </select>
                </label>
              </div>
            </fieldset>

            <fieldset class="form-section">
              <legend>
                <span>3</span>
                Services
              </legend>

              <div class="option-grid">
                <label class="option-card">
                  <input
                    type="checkbox"
                    name="services"
                    value="addressing"
                    data-label="Envelope addressing"
                    data-rate="0.12"
                    checked
                  />
                  <span>
                    <strong>Envelope addressing</strong>
                    <small>Recipient name and mailing address</small>
                  </span>
                  <b>$0.12 each</b>
                </label>

                <label class="option-card">
                  <input
                    type="checkbox"
                    name="services"
                    value="barcode"
                    data-label="IMb barcode preparation"
                    data-rate="0.045"
                    checked
                  />
                  <span>
                    <strong>IMb barcode preparation</strong>
                    <small>Barcode data setup and printing</small>
                  </span>
                  <b>$0.045 each</b>
                </label>

                <label class="option-card">
                  <input
                    type="checkbox"
                    name="services"
                    value="cleanup"
                    data-label="Data cleanup"
                    data-flat="75"
                  />
                  <span>
                    <strong>Data cleanup</strong>
                    <small>Formatting review and exception report</small>
                  </span>
                  <b>$75 flat</b>
                </label>

                <label class="option-card">
                  <input
                    type="checkbox"
                    name="services"
                    value="casing"
                    data-label="Address casing"
                    data-rate="0.025"
                  />
                  <span>
                    <strong>Insert and seal</strong>
                    <small>Insert supplied material and seal envelopes</small>
                  </span>
                  <b>$0.025 each</b>
                </label>

                <label class="option-card">
                  <input
                    type="checkbox"
                    name="services"
                    value="proof"
                    data-label="Printed production proof"
                    data-flat="35"
                  />
                  <span>
                    <strong>Printed production proof</strong>
                    <small>Physical proof shipped before production</small>
                  </span>
                  <b>$35 flat</b>
                </label>

                <label class="option-card">
                  <input
                    type="checkbox"
                    name="services"
                    value="delivery"
                    data-label="Local delivery"
                    data-flat="45"
                  />
                  <span>
                    <strong>Local delivery</strong>
                    <small>Delivery within the designated service area</small>
                  </span>
                  <b>$45 flat</b>
                </label>
              </div>
            </fieldset>

            <fieldset class="form-section">
              <legend>
                <span>4</span>
                Files and instructions
              </legend>

              <div class="upload-grid">
                <label class="upload-box">
                  <input type="file" name="dataFile" accept=".csv,.xlsx,.xls,.txt" />
                  <span class="upload-icon" aria-hidden="true">↑</span>
                  <strong>Recipient data file</strong>
                  <small>CSV, Excel, or tab-delimited text</small>
                </label>

                <label class="upload-box">
                  <input type="file" name="artworkFile" accept=".pdf,.jpg,.jpeg,.png" />
                  <span class="upload-icon" aria-hidden="true">↑</span>
                  <strong>Artwork or sample</strong>
                  <small>PDF, JPG, or PNG</small>
                </label>
              </div>

              <label class="full-width">
                Special instructions
                <textarea
                  name="instructions"
                  rows="6"
                  placeholder="Describe placement requirements, barcode fields, endorsements, sorting, packing, delivery, or other instructions."
                ></textarea>
              </label>

              <label class="agreement">
                <input type="checkbox" required />
                <span>
                  I confirm that I am authorized to submit this data and request
                  production services for this mailing.
                </span>
              </label>
            </fieldset>
          </div>

          <aside class="summary-panel" aria-label="Order estimate">
            <div class="summary-sticky">
              <span class="eyebrow">Estimated order</span>
              <h3>Order summary</h3>

              <div class="summary-line">
                <span>Quantity</span>
                <strong id="summaryQuantity">1,000</strong>
              </div>

              <div id="serviceSummary" class="service-summary"></div>

              <div class="summary-line">
                <span>Setup fee</span>
                <strong id="setupFee">$45.00</strong>
              </div>

              <div class="summary-line rush-line" id="rushLine" hidden>
                <span>Rush surcharge</span>
                <strong id="rushFee">$0.00</strong>
              </div>

              <div class="summary-total">
                <span>Estimated total</span>
                <strong id="estimatedTotal">$210.00</strong>
              </div>

              <p class="summary-note">
                Postage, taxes, shipping, envelope stock, and unusual data work
                are not included unless selected or quoted separately.
              </p>

              <button class="button button-primary button-full" type="submit">
                Submit order request
              </button>

              <p class="secure-note">
                Your data should be transmitted using your organization’s
                approved secure process before production.
              </p>
            </div>
          </aside>
        </form>
      </div>
    </section>

    <section class="section section-muted" id="faq">
      <div class="container faq-layout">
        <div class="section-heading">
          <span class="eyebrow">Frequently asked questions</span>
          <h2>Ordering and production details.</h2>
        </div>

        <div class="faq-list">
          <details open>
            <summary>What file formats can I upload?</summary>
            <p>
              CSV and Excel files are preferred. Clearly labeled columns should
              include the recipient name, delivery address, city, state, ZIP
              Code, and any barcode-related fields required for the project.
            </p>
          </details>

          <details>
            <summary>Will I receive a proof?</summary>
            <p>
              Yes. A digital proof can be provided before production. A printed
              physical proof can also be selected as an additional service.
            </p>
          </details>

          <details>
            <summary>Does the estimate include postage?</summary>
            <p>
              No. Postage depends on the mailing class, presort results, entry
              location, and current postal requirements. It should be quoted
              separately after the mailing data is reviewed.
            </p>
          </details>

          <details>
            <summary>Can you supply the purple envelopes?</summary>
            <p>
              Yes. Select “Please supply the envelopes” in the order form.
              Stock, color, size, window configuration, and availability will
              be confirmed before production.
            </p>
          </details>
        </div>
      </div>
    </section>

    <section class="cta-section">
      <div class="container cta-card">
        <div>
          <span class="eyebrow">Need a custom production quote?</span>
          <h2>Large quantities and special ballot configurations are welcome.</h2>
        </div>
        <a class="button button-light" href="#order">Request pricing</a>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-grid">
      <div>
        <a class="brand footer-brand" href="#top">
          <span class="brand-mark" aria-hidden="true">PE</span>
          <span>
            <strong>Purple Envelope</strong>
            <small>Addressing & Barcoding</small>
          </span>
        </a>
        <p>
          Professional envelope data preparation, addressing, barcode printing,
          proofing, and production support.
        </p>
      </div>

      <div>
        <strong>Services</strong>
        <a href="#services">Addressing</a>
        <a href="#services">Barcoding</a>
        <a href="#services">Data processing</a>
      </div>

      <div>
        <strong>Ordering</strong>
        <a href="#process">How it works</a>
        <a href="#order">Get an estimate</a>
        <a href="#faq">FAQ</a>
      </div>

      <div>
        <strong>Contact</strong>
        <a href="mailto:orders@example.com">orders@example.com</a>
        <a href="tel:+15555550100">(555) 555-0100</a>
        <span>Monday–Friday, 8:00 AM–5:00 PM</span>
      </div>
    </div>

    <div class="container footer-bottom">
      <span>&copy; <span id="year"></span> Purple Envelope Services.</span>
      <span>Privacy · Terms · Data security</span>
    </div>
  </footer>

  <dialog id="confirmationDialog">
    <div class="dialog-content">
      <button class="dialog-close" type="button" aria-label="Close">&times;</button>
      <span class="dialog-icon" aria-hidden="true">✓</span>
      <h2>Order request ready</h2>
      <p>
        The front-end form is working. Connect this form to your server-side
        order endpoint, payment system, CRM, or email workflow to process live orders.
      </p>
      <button class="button button-primary dialog-button" type="button">Close</button>
    </div>
  </dialog>

  <script src="script.js"></script>
</body>
</html>