Embed

<div id="garage-calculator-widget"></div>
<script>
(function () {
  var mount = document.getElementById('garage-calculator-widget');
  if (!mount || mount.dataset.loaded) return;
  mount.dataset.loaded = 'true';

  mount.innerHTML = `
    <style>
      #garage-calculator-widget, #garage-calculator-widget * { box-sizing: border-box; }
      #garage-calculator-widget {
        font-family: Arial, sans-serif;
        color: #1f2937;
      }
      #garage-calculator-widget .gc-wrap {
        max-width: 980px;
        margin: 0 auto;
        background: #f8f5ef;
        border: 1px solid #e7dfd4;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 14px 40px rgba(0,0,0,.08);
      }
      #garage-calculator-widget .gc-head {
        background: #1d4ed8;
        color: #fff;
        padding: 28px 24px;
      }
      #garage-calculator-widget .gc-head h2 {
        margin: 0 0 8px;
        font-size: clamp(28px, 4vw, 40px);
        line-height: 1.1;
      }
      #garage-calculator-widget .gc-head p {
        margin: 0;
        color: #ffffff;
        font-size: 16px;
      }
      #garage-calculator-widget .gc-body {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        gap: 0;
      }
      #garage-calculator-widget .gc-left,
      #garage-calculator-widget .gc-right {
        padding: 24px;
      }
      #garage-calculator-widget .gc-left {
        background: #fffdf9;
        border-right: 1px solid #ece4d8;
      }
      #garage-calculator-widget .gc-right {
        background: #f4eee5;
      }
      #garage-calculator-widget .gc-label {
        display: block;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px;
        color: #3b3229;
      }
      #garage-calculator-widget .gc-options {
        display: grid;
        gap: 12px;
        margin-bottom: 20px;
      }
      #garage-calculator-widget .gc-option {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 14px;
        border: 1px solid #ddd3c5;
        border-radius: 14px;
        background: #fff;
      }
      #garage-calculator-widget .gc-option input {
        margin-top: 3px;
      }
      #garage-calculator-widget .gc-option strong {
        display: block;
        font-size: 15px;
        color: #1f2937;
      }
      #garage-calculator-widget .gc-option span {
        display: block;
        font-size: 13px;
        color: #6b7280;
        margin-top: 3px;
      }
      #garage-calculator-widget .gc-field {
        margin-bottom: 18px;
      }
      #garage-calculator-widget input[type="number"],
      #garage-calculator-widget input[type="text"],
      #garage-calculator-widget input[type="email"],
      #garage-calculator-widget input[type="tel"],
      #garage-calculator-widget textarea,
      #garage-calculator-widget select {
        width: 100%;
        min-height: 48px;
        border: 1px solid #d8ccbd;
        border-radius: 12px;
        background: #fff;
        padding: 12px 14px;
        font-size: 16px;
        color: #1f2937;
      }
      #garage-calculator-widget textarea {
        min-height: 120px;
        resize: vertical;
      }
      #garage-calculator-widget .gc-price-box {
        background: #fff;
        border: 1px solid #e0d5c7;
        border-radius: 18px;
        padding: 20px;
        margin-bottom: 18px;
      }
      #garage-calculator-widget .gc-kicker {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #1d4ed8;
        font-weight: 700;
        margin-bottom: 8px;
      }
      #garage-calculator-widget .gc-price {
        font-size: clamp(34px, 5vw, 52px);
        line-height: 1;
        font-weight: 800;
        color: #1f2937;
        margin: 0 0 10px;
      }
      #garage-calculator-widget .gc-meta {
        color: #5f5b53;
        font-size: 15px;
        line-height: 1.5;
      }
      #garage-calculator-widget .gc-includes {
        margin: 16px 0 0;
        padding: 16px;
        border-radius: 14px;
        background: #fff8ef;
        border: 1px solid #f0dcc0;
      }
      #garage-calculator-widget .gc-includes strong {
        display: block;
        margin-bottom: 8px;
        color: #7c4a10;
      }
      #garage-calculator-widget .gc-includes ul {
        margin: 0;
        padding-left: 18px;
        color: #5c4630;
      }
      #garage-calculator-widget .gc-includes li {
        margin-bottom: 6px;
        line-height: 1.45;
      }
      #garage-calculator-widget .gc-btn {
        width: 100%;
        min-height: 50px;
        border: 0;
        border-radius: 999px;
        padding: 14px 18px;
        font-size: 16px;
        font-weight: 800;
        cursor: pointer;
        transition: opacity .15s ease;
      }
      #garage-calculator-widget .gc-btn:hover { opacity: .96; }
      #garage-calculator-widget .gc-btn-primary {
        background: #1d4ed8;
        color: #fff;
      }
      #garage-calculator-widget .gc-btn-primary:hover {
        background: #1d4ed8;
      }
      #garage-calculator-widget .gc-btn-secondary {
        margin-top: 10px;
        background: #fff;
        color: #4b5563;
        border: 1px solid #d9cdbf;
      }
      #garage-calculator-widget .gc-small {
        font-size: 13px;
        color: #6b7280;
        margin-top: 10px;
        line-height: 1.5;
      }
      #garage-calculator-widget .gc-form-title {
        margin: 0 0 14px;
        font-size: 22px;
        color: #1f2937;
      }
      @media (max-width: 860px) {
        #garage-calculator-widget .gc-body { grid-template-columns: 1fr; }
        #garage-calculator-widget .gc-left { border-right: 0; border-bottom: 1px solid #ece4d8; }
      }
    </style>

    <div class="gc-wrap">
      <div class="gc-head">
        <h2>Instant Garage Floor Quote</h2>
        <p>Select a standard garage size or enter custom square footage to estimate your project.</p>
      </div>

      <div class="gc-body">
        <div class="gc-left">
          <label class="gc-label">Choose your garage size</label>
          <div class="gc-options">
            <label class="gc-option">
              <input type="radio" name="garageOption" value="2car" checked>
              <div>
                <strong>Typical 2-car garage</strong>
                <span>About 400 sq ft</span>
              </div>
            </label>
            <label class="gc-option">
              <input type="radio" name="garageOption" value="3car">
              <div>
                <strong>Typical 3-car garage</strong>
                <span>About 600 sq ft</span>
              </div>
            </label>
            <label class="gc-option">
              <input type="radio" name="garageOption" value="custom">
              <div>
                <strong>Custom square footage</strong>
                <span>Enter your exact size below</span>
              </div>
            </label>
          </div>

          <div class="gc-field">
            <label class="gc-label" for="gc-custom-feet">Custom square feet</label>
            <input id="gc-custom-feet" type="number" min="0" step="1" value="500" placeholder="Enter square feet">
          </div>

          <div class="gc-field">
            <label class="gc-label" for="gc-surface-type">Project type</label>
            <select id="gc-surface-type">
              <option value="4.75">No existing coating — $4.75 per sq ft</option>
              <option value="5.00">Existing coating removal — $5.00 per sq ft</option>
            </select>
          </div>
        </div>

        <div class="gc-right">
          <div class="gc-price-box">
            <div class="gc-kicker">Estimated project total</div>
            <div class="gc-price" id="gc-price">$1,900.00</div>
            <div class="gc-meta" id="gc-meta">400 sq ft at $4.75 per sq ft</div>

            <div class="gc-includes">
              <strong>Price includes</strong>
              <ul>
                <li>Stem walls around the perimeter of the garage</li>
                <li>Grinding and patching of standard cracks and divots</li>
                <li>Polyaspartic topcoat</li>
              </ul>
            </div>
          </div>

          <h3 class="gc-form-title">Email your quote</h3>
          <div class="gc-field">
            <label class="gc-label" for="gc-name">Your name</label>
            <input id="gc-name" type="text" placeholder="Enter your name">
          </div>
          <div class="gc-field">
            <label class="gc-label" for="gc-email">Your email</label>
            <input id="gc-email" type="email" placeholder="Enter your email">
          </div>
          <div class="gc-field">
            <label class="gc-label" for="gc-phone">Phone number</label>
            <input id="gc-phone" type="tel" placeholder="Enter your phone number">
          </div>
          <div class="gc-field">
            <label class="gc-label" for="gc-message">Project details</label>
            <textarea id="gc-message"></textarea>
          </div>
          <button class="gc-btn gc-btn-primary" id="gc-email-btn" type="button">Email Quote</button>
          <button class="gc-btn gc-btn-secondary" id="gc-copy-btn" type="button">Copy Quote Details</button>
          <div class="gc-small">Final price may vary based on site conditions and project scope.</div>
        </div>
      </div>
    </div>
  `;

  var optionEls = mount.querySelectorAll('input[name="garageOption"]');
  var customFeet = mount.querySelector('#gc-custom-feet');
  var surfaceType = mount.querySelector('#gc-surface-type');
  var priceEl = mount.querySelector('#gc-price');
  var metaEl = mount.querySelector('#gc-meta');
  var messageEl = mount.querySelector('#gc-message');
  var nameEl = mount.querySelector('#gc-name');
  var emailEl = mount.querySelector('#gc-email');
  var phoneEl = mount.querySelector('#gc-phone');
  var emailBtn = mount.querySelector('#gc-email-btn');
  var copyBtn = mount.querySelector('#gc-copy-btn');

  function currency(n) {
    return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(n);
  }

  function getSelection() {
    var selected = mount.querySelector('input[name="garageOption"]:checked').value;
    if (selected === '2car') return { label: 'Typical 2-car garage', feet: 400 };
    if (selected === '3car') return { label: 'Typical 3-car garage', feet: 600 };
    return { label: 'Custom square footage', feet: Math.max(0, Number(customFeet.value) || 0) };
  }

  function buildMessage() {
    var selection = getSelection();
    var rate = Number(surfaceType.value || 0);
    var typeLabel = surfaceType.options[surfaceType.selectedIndex].text.split(' — ')[0];
    var total = selection.feet * rate;
    var customerName = nameEl.value.trim() || 'Not provided';
    var customerEmail = emailEl.value.trim() || 'Not provided';
    var customerPhone = phoneEl.value.trim() || 'Not provided';

    return {
      selection: selection,
      rate: rate,
      typeLabel: typeLabel,
      total: total,
      body:
`Name: ${customerName}
Email: ${customerEmail}
Phone: ${customerPhone}

Quote request details:
Garage type: ${selection.label}
Square footage: ${selection.feet.toLocaleString()} sq ft
Project type: ${typeLabel}
Rate: ${currency(rate)} per sq ft
Estimated total: ${currency(total)}

Price includes:
- Stem walls around the perimeter of the garage
- Grinding and patching of standard cracks and divots
- Polyaspartic topcoat`
    };
  }

  function updateQuote() {
    var data = buildMessage();
    priceEl.textContent = currency(data.total);
    metaEl.textContent = data.selection.feet.toLocaleString() + ' sq ft at ' + currency(data.rate) + ' per sq ft';
    messageEl.value = data.body;
  }

  optionEls.forEach(function (el) {
    el.addEventListener('change', updateQuote);
  });
  customFeet.addEventListener('input', function () {
    mount.querySelector('input[value="custom"]').checked = true;
    updateQuote();
  });
  surfaceType.addEventListener('change', updateQuote);
  nameEl.addEventListener('input', updateQuote);
  emailEl.addEventListener('input', updateQuote);
  phoneEl.addEventListener('input', updateQuote);

  emailBtn.addEventListener('click', function () {
    var data = buildMessage();
    var subject = encodeURIComponent('Garage Floor Quote Request');
    var body = encodeURIComponent(data.body);
    window.location.href = 'mailto:EpoxyPros208@gmail.com?subject=' + subject + '&body=' + body;
  });

  copyBtn.addEventListener('click', async function () {
    try {
      await navigator.clipboard.writeText(messageEl.value);
      copyBtn.textContent = 'Copied';
      setTimeout(function () { copyBtn.textContent = 'Copy Quote Details'; }, 1600);
    } catch (e) {
      alert('Could not copy automatically. Please select and copy the text manually.');
    }
  });

  updateQuote();
})();
</script>


Epoxy Pros LLC

Epoxy Pros LLC is a locally owned epoxy flooring company serving Meridian, Boise, Eagle, and the surrounding Treasure Valley. We specialize in high-quality garage floor coatings, polyaspartic systems, and durable concrete coatings designed to last for years without peeling, cracking, or fading.

Our process starts with proper surface preparation using professional diamond grinding equipment to ensure maximum adhesion. Unlike cheaper coatings that fail over time, we use industrial-grade materials built to withstand heavy traffic, temperature changes, and daily wear.

We provide epoxy flooring solutions for residential garages, patios, basements, workshops, and commercial spaces. Whether you’re looking for a decorative flake system, a clean solid color finish, or a high-performance coating, we customize every project to fit your space and needs.

At Epoxy Pros, we focus on quality workmanship, attention to detail, and reliable service. Our goal is to deliver floors that not only look great but perform long-term—giving homeowners and businesses a clean, durable, and low-maintenance surface they can trust.