Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Steelford - Master Unified Homeowner Material Quote Form</title>
    <style>
        :root {
            --steelford-blue: #0B2545;
            --steelford-royal: #134074;
            --text-dark: #1A1A1A;
            --bg-light: #FAFAFA;
            --border-color: #E5E5E5;
        }

        body {
            margin: 0;
            padding: 20px;
            background-color: #F4F6F9;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: var(--text-dark);
        }

        /* Isolated Form Container Blueprint */
        .form-section {
            max-width: 850px;
            margin: 20px auto;
            background: #FFFFFF;
            border: 2px solid var(--steelford-blue);
            padding: 40px;
            border-radius: 6px;
            box-shadow: 0 4px 20px rgba(11, 37, 69, 0.05);
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 24px;
            margin-bottom: 24px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        label {
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 8px;
            text-transform: uppercase;
            color: var(--steelford-blue);
            letter-spacing: 0.5px;
        }

        input[type="text"], input[type="tel"], input[type="email"], select {
            width: 100%;
            box-sizing: border-box;
            padding: 12px 16px;
            border: 1px solid #CCC;
            border-radius: 4px;
            font-size: 14px;
            background: #FFFFFF;
            font-family: inherit;
        }

        input:focus, select:focus {
            outline: none;
            border-color: var(--steelford-royal);
        }

        /* Live Tech Specs Readout Panel */
        .live-specs-panel {
            background: var(--bg-light);
            border: 1px dashed #BDC3C7;
            padding: 20px;
            border-radius: 4px;
            margin: 24px 0;
        }

        .specs-flex {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: space-between;
            font-size: 13px;
        }

        .spec-item {
            flex: 1;
            min-width: 130px;
        }

        .spec-item span {
            display: block;
            font-weight: 700;
            color: var(--steelford-blue);
        }

        .submit-btn {
            background-color: var(--steelford-blue);
            color: #FFFFFF;
            padding: 18px 60px;
            font-weight: 700;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: background 0.2s;
            box-shadow: 0 4px 12px rgba(11,37,69,0.2);
            width: 100%;
        }

        .submit-btn:hover {
            background-color: var(--steelford-royal);
        }

        #form-msg-output {
            margin-top: 20px;
            font-weight: 600;
            text-align: center;
            display: none;
            padding: 15px;
            border-radius: 4px;
        }
    </style>
</head>
<body>

<div class="form-section" id="quote-form-section">
    <div style="text-align: center; margin-bottom: 34px;">
        <h3 style="font-size: 22px; font-weight: 800; color: var(--steelford-blue); margin: 0 0 6px 0; text-transform: uppercase;">
            Request Residential Material Pricing Quote
        </h3>
        <p style="margin: 0; color: #555555; font-size: 14px;">
            Select your architectural profile category, style variance, and color finish options below.
        </p>
    </div>

    <form id="homeowner-quote-form">
        
        <div class="form-grid">
            <div class="form-group">
                <label>Full Name</label>
                <input type="text" id="inp-name" required placeholder="Jane Smith">
            </div>
            <div class="form-group">
                <label>Home Address</label>
                <input type="text" id="inp-address" required placeholder="789 Residential Way, Dallas, TX">
            </div>
            <div class="form-group">
                <label>Phone Number</label>
                <input type="tel" id="inp-phone" required placeholder="(555) 000-0000">
            </div>
            <div class="form-group">
                <label>Email Address</label>
                <input type="email" id="inp-email" required placeholder="jane@example.com">
            </div>
        </div>

        <div class="form-grid">
            <div class="form-group">
                <label>Roofing Style Category</label>
                <select id="form-category-dropdown">
                    <option value="Tile">Tile Systems</option>
                    <option value="Shake">Shake Systems</option>
                    <option value="Shingle">Shingle Systems</option>
                </select>
            </div>
            <div class="form-group">
                <label>Architectural Profile</label>
                <select id="form-profile-dropdown">
                    </select>
            </div>
            <div class="form-group">
                <label>Color Finish Selection</label>
                <select id="form-color-dropdown">
                    </select>
            </div>
        </div>

        <div class="live-specs-panel">
            <label style="margin-bottom: 12px; display: block; color: var(--steelford-royal)">Matched Structural Profile Specs:</label>
            <div class="specs-flex">
                <div class="spec-item"><label>Overall Length</label><span id="lbl-len">-</span></div>
                <div class="spec-item"><label>Cover Length</label><span id="lbl-eff-len">-</span></div>
                <div class="spec-item"><label>Overall Width</label><span id="lbl-width">-</span></div>
                <div class="spec-item"><label>Exposure Width</label><span id="lbl-exposure">-</span></div>
                <div class="spec-item"><label>Min Roof Pitch</label><span id="lbl-pitch">-</span></div>
                <div class="spec-item"><label>Compatibility Rule</label><span id="lbl-compat" style="color:#C0392B;">-</span></div>
            </div>
        </div>

        <div style="text-align: center; margin-top: 30px;">
            <button type="submit" id="btn-submit-quote" class="submit-btn">
                Get Material Quote
            </button>
            <div id="form-msg-output"></div>
        </div>
    </form>
</div>

<script>
    // Master Dynamic System Mapping Data Structure
    const structuralSystemEngine = {
        "Tile": {
            profiles: {
                "Roman Tile": {
                    url: "https://steelford.com/homeownertile",
                    specs: { length: "51-1/2\"", effLength: "49-5/8\"", width: "16-3/4\"", exposure: "14-1/2\"", pitch: "3:12 (14° slope)", copperLead: "Incompatible with COPPER & LEAD" },
                    colors: ["Black", "Red and Black", "Chestnut Cedar", "Mission Gold", "Terra Cotta"]
                }
            }
        },
        "Shake": {
            profiles: {
                "WeatherLok Shake": {
                    url: "https://steelford.com/homeownershake",
                    specs: { length: "52\"", effLength: "50-1/2\"", width: "16\"", exposure: "14-3/4\"", pitch: "3:12 (14° slope)", copperLead: "Incompatible with COPPER & LEAD" },
                    colors: ["Charcoal", "Weathered"]
                },
                "Wood Shake": {
                    url: "https://steelford.com/homeownershake",
                    specs: { length: "53-1/4\"", effLength: "51\"", width: "16-1/2\"", exposure: "15-1/8\"", pitch: "3:12 (14° slope)", copperLead: "Incompatible with COPPER & LEAD" },
                    colors: ["Black", "Timber Wood", "Slate", "Weathered Wood"]
                }
            }
        },
        "Shingle": {
            profiles: {
                "WeatherLok Shingle": {
                    url: "https://steelford.com/homeownershingle",
                    specs: { length: "51-3/4\"", effLength: "50-1/8\"", width: "15-1/2\"", exposure: "13-3/4\"", pitch: "3:12 (14° slope)", copperLead: "Incompatible with COPPER & LEAD" },
                    colors: ["Charcoal", "Weathered"]
                },
                "Stormetal Shingle": {
                    url: "https://steelford.com/homeownershingle",
                    specs: { length: "52-1/2\"", effLength: "50-7/8\"", width: "15-3/4\"", exposure: "14-1/8\"", pitch: "3:12 (14° slope)", copperLead: "Incompatible with COPPER & LEAD" },
                    colors: ["Black", "Timber Wood", "Slate", "Weathered Wood"]
                }
            }
        }
    };

    // DOM Nodes Mapping Coordinates
    const catDrop = document.getElementById('form-category-dropdown');
    const profDrop = document.getElementById('form-profile-dropdown');
    const colorDrop = document.getElementById('form-color-dropdown');

    // Structural Target Specs Tracking Targets
    const lblLen = document.getElementById('lbl-len');
    const lblEffLen = document.getElementById('lbl-eff-len');
    const lblWidth = document.getElementById('lbl-width');
    const lblExposure = document.getElementById('lbl-exposure');
    const lblPitch = document.getElementById('lbl-pitch');
    const lblCompat = document.getElementById('lbl-compat');

    // Document Initiation Runtime
    window.addEventListener('DOMContentLoaded', () => {
        executeCategoryCascadingRefresh();
    });

    // Cascading Trigger Step 1: Category Changes
    catDrop.addEventListener('change', executeCategoryCascadingRefresh);
    
    // Cascading Trigger Step 2: Profile Changes
    profDrop.addEventListener('change', executeProfileCascadingColorRefresh);

    // Cascading Trigger Step 3: Color Selection Changes
    colorDrop.addEventListener('change', executeProfileDataUIRefresh);

    function executeCategoryCascadingRefresh() {
        const activeCategory = catDrop.value;
        const profilesMap = structuralSystemEngine[activeCategory].profiles;
        
        profDrop.innerHTML = "";
        Object.keys(profilesMap).forEach(profileKey => {
            const opt = document.createElement('option');
            opt.value = profileKey;
            opt.textContent = profileKey;
            profDrop.appendChild(opt);
        });

        executeProfileCascadingColorRefresh();
    }

    function executeProfileCascadingColorRefresh() {
        const activeCategory = catDrop.value;
        const activeProfile = profDrop.value;
        const colorArray = structuralSystemEngine[activeCategory].profiles[activeProfile].colors;

        colorDrop.innerHTML = "";
        colorArray.forEach(color => {
            const opt = document.createElement('option');
            opt.value = color;
            opt.textContent = color;
            colorDrop.appendChild(opt);
        });

        executeProfileDataUIRefresh();
    }

    function executeProfileDataUIRefresh() {
        const activeCategory = catDrop.value;
        const activeProfile = profDrop.value;
        const targetProfileMetadata = structuralSystemEngine[activeCategory].profiles[activeProfile];

        if (!targetProfileMetadata) return;

        // UI Parameter Injector
        const s = targetProfileMetadata.specs;
        lblLen.textContent = s.length;
        lblEffLen.textContent = s.effLength;
        lblWidth.textContent = s.width;
        lblExposure.textContent = s.exposure;
        lblPitch.textContent = s.pitch;
        lblCompat.textContent = s.copperLead;
    }

    // Process Post Submit Workflow To Zapier Hook Pipeline
    document.getElementById('homeowner-quote-form').addEventListener('submit', function(e) {
        e.preventDefault();

        const submitBtn = document.getElementById('btn-submit-quote');
        const responseLabel = document.getElementById('form-msg-output');

        submitBtn.disabled = true;
        submitBtn.style.backgroundColor = '#777777';
        submitBtn.textContent = 'Processing Structural Quote Parameters...';

        const categoryVal = catDrop.value;
        const profileVal = profDrop.value;
        const activeRecord = structuralSystemEngine[categoryVal].profiles[profileVal];

        // Complete Structured Form Field Matrix Dictionary Pack
        const leadPayload = {
            customerName: document.getElementById('inp-name').value,
            homeAddress: document.getElementById('inp-address').value,
            phone: document.getElementById('inp-phone').value,
            email: document.getElementById('inp-email').value,
            chosenCategory: categoryVal,
            chosenProfile: profileVal,
            chosenColor: colorDrop.value,
            profileSourceUrl: activeRecord.url,
            technicalSpecifications: {
                moduleLength: activeRecord.specs.length,
                effectiveCoverLength: activeRecord.specs.effLength,
                overallWidth: activeRecord.specs.width,
                exposureWidth: activeRecord.specs.exposure,
                minimumRoofPitch: activeRecord.specs.pitch
            },
            marketSegment: 'Direct Unified Homeowner Material Quote Request',
            formTimestamp: new Date().toISOString()
        };

        // Data Transmission Action
        fetch('https://hooks.zapier.com/hooks/catch/25350516/4bu60jv/', {
            method: 'POST',
            mode: 'cors',
            body: JSON.stringify(leadPayload)
        })
        .then(() => {
            responseLabel.style.display = 'block';
            responseLabel.style.background = '#E8F8F5';
            responseLabel.style.color = '#27AE60';
            responseLabel.style.border = '1px solid #27AE60';
            responseLabel.textContent = '✔ Success! Material payload dispatched. A Steelford coordinator will calculate your structural architectural configuration pricing shortly.';
            document.getElementById('homeowner-quote-form').reset();
            executeCategoryCascadingRefresh();
        })
        .catch(err => {
            console.error('Webhook Endpoint Interface Latency:', err);
            responseLabel.style.display = 'block';
            responseLabel.style.background = '#FADBD8';
            responseLabel.style.color = '#C0392B';
            responseLabel.style.border = '1px solid #C0392B';
            responseLabel.textContent = 'Network connectivity delay. Your custom configuration properties have been stored locally.';
        })
        .finally(() => {
            submitBtn.disabled = false;
            submitBtn.style.backgroundColor = '#0B2545';
            submitBtn.textContent = 'Get Material Quote';
        });
    });
</script>

</body>
</html>

STEELFORD

Steelford is an online roofing materials company focused on homeowners who want durable, long-lasting roofing options without confusion.

Regenerate this homepage to clearly position Steelford as a place where homeowners can browse and request pricing for roofing materials — not roofing services or installations.

The homepage should feel modern, clean, and product-forward, similar in structure to leading online roofing material suppliers, but more visually refined and easier to understand.

Do NOT position Steelford as a local roofing contractor.
Do NOT mention cities, states, or service areas.
Do NOT talk about installation, craftsmanship, or roofing services.

Homepage structure:

Hero Section

Headline focused on buying roofing materials

Subheadline emphasizing simplicity, durability, and homeowner clarity

Primary call to action: “View Roofing Options”

Secondary call to action: “Get a Quote”

Product Categories Section
Include clear sections for:

Metal Roofing

Stone-Coated Steel Roofing

Roofing Accessories

Each category should have a short, homeowner-friendly description and an “Explore” button.

Why Steelford Section
Focus on:

Clear product choices

Homeowner-friendly explanations

Nationwide availability

Support when questions come up

Avoid technical jargon and sales hype.

How It Works Section
Use a simple three-step flow:

Browse roofing materials

Request pricing or ask a question

Finalize details and delivery

Support / Confidence Section
Reassure homeowners that help is available if they are unsure which roofing option is right.

Design Direction

Modern and premium

Clean layout with generous spacing

Simple language for homeowners

Product-first presentation

The final homepage should clearly communicate that Steelford sells roofing materials online and makes the process simple and approachable for homeowners.