DGCchat

Running

App Files Files Community

John2121 commited on Oct 7, 2025

Commit

9859de1

verified ·

1 Parent(s): f2be9fe

Update index.html

Browse files

Files changed (1) hide show

index.html +393 -280

index.html CHANGED Viewed

@@ -2,328 +2,441 @@
 <html lang="en">
 <head>
-    <!-- Swiper.js for dynamic card carousel -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hooper Auto - Automotive Service & Repair</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&display=swap" rel="stylesheet">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        automotive: {
-                            50: '#f3f4f6', // light silver
-                            100: '#e5e7eb',
-                            200: '#d1d5db',
-                            300: '#9ca3af',
-                            400: '#6b7280', // steel gray
-                            500: '#374151', // dark steel
-                            600: '#1f2937', // near-black
-                            700: '#111827', // black
-                            800: '#18181b', // deep black
-                            900: '#0f0f10',
-                        },
-                        accent: {
-                            red: '#e11d48', // automotive red
-                            yellow: '#fbbf24', // accent yellow
-                        }
-                    },
-                    fontFamily: {
-                        'body': ['Inter', 'Arial', 'sans-serif'],
-                    }
-                }
-            }
-        }
-    </script>
     <style>
-        .portfolio-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 1rem;
-            padding: 1rem;
         }
-        .portfolio-item {
-            position: relative;
-            overflow: hidden;
-            border-radius: 1.5rem;
-            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
-            transition: box-shadow 0.3s, transform 0.3s;
         }
-        .portfolio-item:hover {
-            box-shadow: 0 20px 40px -10px #4ade80cc;
-            transform: scale(1.03);
         }
-        .portfolio-item img {
-            width: 100%;
-            height: 300px;
-            object-fit: cover;
-            transition: transform 0.3s ease;
         }
-        .portfolio-item:hover img {
-            transform: scale(1.07);
         }
-        .portfolio-overlay {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: linear-gradient(transparent, rgba(21, 128, 61, 0.9));
-            padding: 1rem;
-            color: white;
-            transform: translateY(100%);
-            transition: transform 0.3s ease;
         }
-        .portfolio-item:hover .portfolio-overlay {
-            transform: translateY(0);
         }
-        /* Fluid dynamic heading for hero */
-        .dynamic-title {
-            font-size: clamp(2.2rem, 5vw + 1rem, 4.5rem);
-            font-weight: bold;
-            line-height: 1.08;
-            letter-spacing: -0.02em;
-            text-shadow: 0 4px 24px #000a, 0 1px 0 #4ade80;
         }
-        /* Swiper active/centered slide scaling */
-        .swiper-slide .portfolio-slide {
-            transform: scale(0.85);
-            opacity: 0.7;
-            transition: transform 0.35s cubic-bezier(.4, 2, .6, 1), opacity 0.35s;
         }
-        .swiper-slide-active .portfolio-slide {
-            transform: scale(1.08);
-            opacity: 1;
-            z-index: 2;
-            box-shadow: 0 24px 60px -10px #4ade80cc, 0 2px 16px #000a;
         }
-        .swiper-slide-next .portfolio-slide,
-        .swiper-slide-prev .portfolio-slide {
-            transform: scale(0.95);
-            opacity: 0.85;
         }
     </style>
 </head>
-<body class="font-body bg-automotive-800 text-automotive-50 min-h-screen">
-    <!-- Header -->
-    <header
-        class="bg-gradient-to-r from-automotive-700 via-automotive-600 to-automotive-900 shadow-xl border-b-4 border-accent-red sticky top-0 z-50">
-        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
-            <div class="flex items-center gap-4">
-                <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <circle cx="19" cy="19" r="19" fill="#e11d48" />
-                    <rect x="8" y="16" width="22" height="6" rx="3" fill="#fbbf24" />
-                    <rect x="13" y="10" width="12" height="4" rx="2" fill="#f3f4f6" />
-                    <rect x="13" y="24" width="12" height="4" rx="2" fill="#f3f4f6" />
-                </svg>
-                <h1 class="text-3xl font-extrabold text-accent-red tracking-tight drop-shadow">Hooper Automotive LLC
-                </h1>
-            </div>
-            <div class="flex gap-4">
-                <a href="tel:+17154219792"
-                    class="bg-accent-red text-white px-6 py-3 rounded-lg font-bold hover:bg-accent-yellow hover:text-automotive-700 transition-colors flex items-center gap-2 shadow-lg">
-                    <i data-feather="phone"></i>
-                    Call
-                </a>
-                <a href="mailto:hooperautorepair70@gmail.com"
-                    class="border-2 border-accent-yellow text-accent-yellow px-6 py-3 rounded-lg font-bold hover:bg-accent-yellow hover:text-automotive-700 transition-colors flex items-center gap-2 shadow-lg">
-                    <i data-feather="mail"></i>
-                    Email
-                </a>
-            </div>
-        </div>
-    </header>
     <!-- Consistent Call/Text Contact Block -->
     <div class="w-full flex flex-col items-center mb-6">
-        <a href="tel:+17154219792"
-            class="text-2xl font-extrabold text-accent-yellow hover:text-accent-red transition-colors tracking-wide drop-shadow">Call
-            Hooper Automotive: (715) 421-9792</a>
-        <span class="text-automotive-200 text-sm mt-1">2020 4th Street South, Wisconsin Rapids, WI 54494 &bull; Wood
-            County</span>
     </div>
-    <!-- Hero Section -->
-    <section
-        class="bg-gradient-to-br from-automotive-900 via-automotive-700 to-automotive-600 py-16 relative overflow-hidden">
-        <div class="container mx-auto px-4 text-center relative z-10">
-            <h2 class="dynamic-title mb-6 text-accent-red drop-shadow-lg">Wisconsin Rapids' Most Advanced Auto Service
-            </h2>
-            <p
-                class="text-xl md:text-2xl lg:text-3xl text-automotive-100 mb-8 tracking-wide drop-shadow-lg font-semibold">
-                Professional, AI-powered automotive repair & maintenance for Central Wisconsin</p>
-            <a href="quote-calculator.html"
-                class="inline-block bg-accent-red text-white px-10 py-5 rounded-2xl font-extrabold text-xl md:text-2xl hover:bg-accent-yellow hover:text-automotive-700 transition-all duration-200 shadow-2xl mr-2 focus:outline-none focus:ring-2 focus:ring-accent-yellow focus:ring-offset-2 uppercase tracking-wider">
-                Get Instant Quote
-            </a>
-        </div>
-        <svg class="absolute right-0 top-0 w-1/2 h-full opacity-20 z-0" viewBox="0 0 400 400" fill="none">
-            <ellipse cx="200" cy="200" rx="200" ry="200" fill="#e11d48" />
-            <ellipse cx="200" cy="200" rx="120" ry="120" fill="#fbbf24" />
-            <ellipse cx="200" cy="200" rx="60" ry="60" fill="#374151" />
-        </svg>
-    </section>
-    <!-- Portfolio Grid (larger, more visual) -->
-    <section class="py-12 md:py-20 bg-gradient-to-br from-automotive-900 via-automotive-700 to-automotive-600/90">
-        <div class="container mx-auto px-2 md:px-4">
-            <div class="swiper mySwiper max-w-4xl mx-auto">
-                <div class="swiper-wrapper">
-                    <!-- Automotive Showroom Cards -->
-                    <div class="swiper-slide flex justify-center">
-                        <div
-                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-red transition-transform">
-                            <img src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=700&h=420&fit=crop&crop=center"
-                                alt="Auto Service 1"
-                                class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
-                                loading="lazy" />
-                        </div>
-                    </div>
-                    <div class="swiper-slide flex justify-center">
-                        <div
-                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-yellow transition-transform">
-                            <img src="https://images.unsplash.com/photo-1632823469850-f4b0ce1f4262?w=700&h=420&fit=crop&crop=center"
-                                alt="Auto Service 2"
-                                class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
-                                loading="lazy" />
-                        </div>
                     </div>
-                    <div class="swiper-slide flex justify-center">
-                        <div
-                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-red transition-transform">
-                            <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=700&h=420&fit=crop&crop=center"
-                                alt="Auto Service 3"
-                                class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
-                                loading="lazy" />
-                        </div>
                     </div>
-                    <div class="swiper-slide flex justify-center">
-                        <div
-                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-yellow transition-transform">
-                            <img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=700&h=420&fit=crop&crop=center"
-                                alt="Auto Service 4"
-                                class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
-                                loading="lazy" />
                         </div>
-                    </div>
-                    <div class="swiper-slide flex justify-center">
-                        <div
-                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-red transition-transform">
-                            <img src="https://images.unsplash.com/photo-1625047509168-a7026f36de04?w=700&h=420&fit=crop&crop=center"
-                                alt="Auto Service 5"
-                                class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
-                                loading="lazy" />
                         </div>
-                    </div>
-                    <div class="swiper-slide flex justify-center">
-                        <div
-                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-yellow transition-transform">
-                            <img src="https://images.unsplash.com/photo-1629810070755-751ac1db18b5?w=700&h=420&fit=crop&crop=center"
-                                alt="Auto Service 6"
-                                class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
-                                loading="lazy" />
                         </div>
-                    </div>
-                    <div class="swiper-slide flex justify-center">
-                        <div
-                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-red transition-transform">
-                            <img src="https://images.unsplash.com/photo-1606577924081-3b002c5e4d99?w=700&h=420&fit=crop&crop=center"
-                                alt="Auto Service 7"
-                                class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
-                                loading="lazy" />
                         </div>
-                    </div>
                 </div>
-                <!-- Swiper Pagination and Navigation -->
-                <div class="swiper-pagination"></div>
-                <div class="swiper-button-next"></div>
-                <div class="swiper-button-prev"></div>
-            </div>
-        </div>
-    </section>
-    <!-- Contact & Map Section (moved below images) -->
-    <section class="py-10 text-center">
-        <div
-            class="max-w-xl mx-auto bg-automotive-700/90 rounded-2xl shadow-2xl p-6 mb-4 border-4 border-accent-yellow">
-            <h3 class="text-2xl font-extrabold text-accent-yellow mb-2 tracking-wide">Contact & Location</h3>
-            <div class="text-automotive-100 mb-2">
-                <div><strong>Address:</strong> 2020 4th Street South, Wisconsin Rapids, WI, United States, 54494</div>
-                <div><strong>County:</strong> Wood County, WI</div>
-                <div><strong>Phone:</strong> <a href="tel:+17154219792" class="underline text-accent-red">+1
-                        715-421-9792</a></div>
-                <div><strong>Email:</strong> <a href="mailto:hooperautorepair70@gmail.com"
-                        class="underline text-accent-yellow">hooperautorepair70@gmail.com</a></div>
-            </div>
-            <div class="rounded-xl overflow-hidden border-2 border-accent-red shadow-lg mt-4">
-                <iframe width="100%" height="250" style="border:0" loading="lazy" allowfullscreen
-                    src="https://www.openstreetmap.org/export/embed.html?bbox=-89.858,44.350,-89.758,44.450&amp;layer=mapnik&amp;marker=44.400,-89.808"></iframe>
-                <div class="text-xs text-accent-yellow bg-automotive-800/90 p-1">Location: Wisconsin Rapids, WI, United
-                    States, 54494</div>
             </div>
         </div>
-    </section>
-    <!-- Swiper.js initialization for dynamic card carousel -->
     <script>
-        document.addEventListener('DOMContentLoaded', function () {
-            feather.replace();
-            new Swiper('.mySwiper', {
-                loop: true,
-                autoplay: { delay: 4000, disableOnInteraction: false },
-                effect: 'coverflow',
-                grabCursor: true,
-                centeredSlides: true,
-                slidesPerView: 1,
-                coverflowEffect: {
-                    rotate: 30,
-                    stretch: 0,
-                    depth: 100,
-                    modifier: 1,
-                    slideShadows: true,
-                },
-                pagination: { el: '.swiper-pagination', clickable: true },
-                navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
-                breakpoints: {
-                    768: { slidesPerView: 1 },
-                    1024: { slidesPerView: 2 },
-                },
             });
         });
-    </script>
-    <!-- Call to Action -->
-    <section class="bg-gradient-to-br from-automotive-700 via-automotive-900 to-automotive-600 py-16">
-        <div class="container mx-auto px-4 text-center">
-            <h2 class="text-4xl md:text-6xl font-extrabold mb-6 text-accent-red drop-shadow">Serving Central Wisconsin
-                Drivers</h2>
-            <p class="text-xl text-automotive-100 mb-8 font-semibold">From Stevens Point to Wausau and throughout
-                Central WI</p>
-            <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                <a href="quote-calculator.html"
-                    class="bg-accent-yellow text-automotive-700 px-10 py-5 rounded-lg font-extrabold text-xl hover:bg-accent-red hover:text-white transition-colors shadow-xl uppercase tracking-wider">Get
-                    Service Estimate</a>
-                <a href="tel:+17154219792"
-                    class="border-2 border-accent-yellow text-accent-yellow px-10 py-5 rounded-lg font-extrabold text-xl hover:bg-accent-red hover:text-white transition-colors shadow-xl uppercase tracking-wider">Call
-                    Now: (715) 421-9792</a>
-            </div>
-        </div>
-    </section>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            feather.replace();
-        });
     </script>
 </body>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contractor Project Quote & Planning</title>
+    <link rel="stylesheet" href="../llama-universal-netlify-proxy/style.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.3/dist/tailwind.min.css">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', Arial, sans-serif;
+            background: #0a0f0a;
+            color: #d1fae5;
+        }
+        .main-card,
+        .mobile-section {
+            background: #101d10 !important;
+            border: 4px solid #10b981 !important;
+            border-radius: 1.25rem !important;
+            box-shadow: 0 4px 32px 0 #000a, 0 1.5px 6px 0 #10b981;
+            padding: 2rem !important;
+        }
+        .form-group .form-toggle {
+            background: #134e13 !important;
+            color: #6ee7b7 !important;
+            border-radius: 0.5rem !important;
+        }
+        .form-group .form-content {
+            background: #0f1a0f !important;
+            border-radius: 0.5rem !important;
+        }
+        .form-group.open .form-content {
+            background: #18181b !important;
+        }
+        .apt-btn,
+        .mobile-btn,
+        .form-content button[type=submit] {
+            background: #10b981 !important;
+            color: #0a0f0a !important;
+            font-weight: 700;
+            border-radius: 0.5rem !important;
+            padding: 0.9rem 1.2rem !important;
+            border: none;
+            cursor: pointer;
+            transition: background 0.2s;
+            font-size: 1.15rem;
+            box-shadow: 0 2px 8px #10b98144;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+        }
+        .apt-btn:hover,
+        .mobile-btn:hover,
+        .form-content button[type=submit]:hover {
+            background: #047857 !important;
+            color: #d1fae5 !important;
+        }
+        .form-group input,
+        .form-group select,
+        .form-group textarea {
+            background: #1a2b1a !important;
+            color: #d1fae5 !important;
+            border: 1.5px solid #10b981 !important;
+            border-radius: 0.5rem !important;
+            font-size: 1.05rem;
         }
+        .form-group input::placeholder,
+        .form-group textarea::placeholder {
+            color: #6ee7b7 !important;
         }
+        .form-group label {
+            color: #6ee7b7 !important;
+            font-weight: 600;
         }
+        .form-group {
+            border-radius: 0.5rem !important;
         }
+        .form-content {
+            border-radius: 0.5rem !important;
         }
+        .form-group.open .form-content {
+            border-radius: 0.5rem !important;
         }
+        .text-accent-green {
+            color: #10b981 !important;
         }
+        .bg-accent-green {
+            background: #10b981 !important;
         }
+        .text-dark {
+            color: #0a0f0a !important;
         }
+        .bg-dark {
+            background: #0a0f0a !important;
         }
+        .shadow-xl {
+            box-shadow: 0 4px 32px 0 #000a, 0 1.5px 6px 0 #10b981 !important;
         }
     </style>
 </head>
+<body class="font-body bg-automotive-700 text-automotive-50 min-h-screen flex items-center justify-center py-8">
     <!-- Consistent Call/Text Contact Block -->
     <div class="w-full flex flex-col items-center mb-6">
     </div>
+    <!-- APT Step-by-Step Automotive Problem Calculator -->
+    <main class="w-full flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white py-8">
+        <section class="w-full max-w-lg mobile-section bg-automotive-600/90 p-6 rounded-xl shadow-lg">
+            <h1 class="text-2xl font-bold text-accent-green mb-4 mobile-title">Project Quote & Planning Tool</h1>
+            <div id="apt-flow">
+                <!-- Llama AI Chat Integration -->
+                <div id="llama-chat-container" class="mt-8">
+                    <h2 class="text-xl font-bold text-accent-green mb-2">Llama AI Chat</h2>
+                    <div id="llama-messages"></div>
+                    <div id="llama-input-row">
+                        <input id="llama-user-input" type="text" placeholder="Type your message..." />
+                        <button id="llama-send-btn">Send</button>
                     </div>
+                </div>
+                <!-- Step 1: Select Problem Category -->
+                <div id="step1" class="mb-4">
+                    <label class="block text-accent-green font-semibold mb-2">What type of project do you need?</label>
+                    <div class="grid grid-cols-2 gap-2">
+                        <button class="apt-btn" data-category="Remodeling">Remodeling</button>
+                        <button class="apt-btn" data-category="New Construction">New Construction</button>
+                        <button class="apt-btn" data-category="Exterior">Exterior</button>
+                        <button class="apt-btn" data-category="Interior">Interior</button>
+                        <button class="apt-btn" data-category="Plumbing/Electrical">Plumbing/Electrical</button>
+                        <button class="apt-btn" data-category="Other">Other</button>
                     </div>
+                </div>
+                <!-- Step 2: Select Symptom -->
+                <div id="step2" class="mb-4 hidden">
+                    <label class="block text-accent-green font-semibold mb-2">What best describes your project?</label>
+                    <div id="symptom-options" class="grid grid-cols-1 gap-2"></div>
+                </div>
+                <!-- Step 3: Vehicle Info -->
+                <div id="step3" class="mb-4 hidden">
+                    <label class="block text-accent-green font-semibold mb-1">Project Address / Site Info</label>
+                    <input type="text" id="site-info"
+                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50 mb-2"
+                        placeholder="e.g. 123 Main St, City, State">
+                    <label class="block text-accent-green font-semibold mb-1">Project Details</label>
+                    <textarea id="project-details" rows="3"
+                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50 mb-2"
+                        placeholder="Describe your project, timeline, or special needs..."></textarea>
+                    <button id="step3-next" class="apt-btn w-full mt-2">Next</button>
+                </div>
+                <!-- Step 4: Output Recommendation -->
+                <div id="step4" class="mb-4 hidden">
+                    <form id="apt-form" action="https://formspree.io/f/mjkaolga" method="POST"
+                        class="bg-green-900/80 p-6 rounded-xl shadow-lg space-y-2 mobile-form overflow-visible">
+                        <h1 class="text-2xl font-bold text-accent-green mb-2 mobile-title">Request a Project Quote</h1>
+                        <p class="text-accent-green mb-2">Get a fast, friendly quote! Tell us about your construction
+                            project and how we can help you.</p>
+                        <div class="form-group open">
+                            <div class="form-toggle" onclick="toggleGroup(this)">Contact Info <span
+                                    class="arrow">▶</span></div>
+                            <div class="form-content">
+                                <label for="user-name" class="block text-accent-green font-semibold mb-1">Name <span
+                                        aria-hidden="true" class="text-accent-green">*</span></label>
+                                <input type="text" id="user-name" name="name" required autocomplete="name"
+                                    aria-required="true"
+                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
+                                    placeholder="Your Name">
+                                <label for="user-email" class="block text-accent-green font-semibold mb-1">Email <span
+                                        aria-hidden="true" class="text-accent-green">*</span></label>
+                                <input type="email" id="user-email" name="email" required autocomplete="email"
+                                    aria-required="true"
+                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
+                                    placeholder="you@email.com">
+                                <label for="user-phone" class="block text-accent-green font-semibold mb-1">Phone</label>
+                                <input type="tel" id="user-phone" name="phone" autocomplete="tel"
+                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition"
+                                    placeholder="(optional)">
+                            </div>
                         </div>
+                        <div class="form-group">
+                            <div class="form-toggle" onclick="toggleGroup(this)">Service & Price <span
+                                    class="arrow">▶</span></div>
+                            <div class="form-content">
+                                <label for="form-service" class="block text-accent-green font-semibold mb-1">Service
+                                    Requested <span aria-hidden="true" class="text-accent-green">*</span></label>
+                                <input type="text" id="form-service" name="service" required
+                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
+                                    placeholder="Service">
+                                <label for="form-price" class="block text-accent-green font-semibold mb-1">Price</label>
+                                <input type="text" id="form-price" name="price"
+                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
+                                    placeholder="Price">
+                            </div>
                         </div>
+                        <div class="form-group">
+                            <div class="form-toggle" onclick="toggleGroup(this)">Project Details <span
+                                    class="arrow">▶</span></div>
+                            <div class="form-content">
+                                <label for="form-site" class="block text-accent-green font-semibold mb-1">Project
+                                    Address /
+                                    Site Info</label>
+                                <input type="text" id="form-site" name="site"
+                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
+                                    placeholder="e.g. 123 Main St, City, State">
+                                <label for="form-details" class="block text-accent-green font-semibold mb-1">Project
+                                    Details</label>
+                                <textarea id="form-details" name="details" rows="3"
+                                    class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition"
+                                    placeholder="Describe your project, timeline, or special needs..."></textarea>
+                            </div>
                         </div>
+                        <div class="form-group open">
+                            <div class="form-content">
+                                <button type="submit"
+                                    class="w-full bg-accent-green hover:bg-dark text-dark font-bold py-3 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-accent-green focus:ring-offset-2 mobile-btn">Send
+                                    Request</button>
+                            </div>
                         </div>
+                        <div id="apt-success" class="hidden text-green-200 text-center font-semibold mt-2">Request sent!
+                            Dondlinger General Contracting LLC will contact you soon.<br>Email: <a
+                                href="mailto:dondlingergeneralcontracting@gmail.com"
+                                class="underline">dondlingergeneralcontracting@gmail.com</a><br>Phone:
+                            (715) 459-3050 (texts are best!)</div>
+                    </form>
                 </div>
             </div>
+        </section>
+    </main>
+    <!-- Header / Contact -->
+    <header class="w-full flex flex-col items-center py-6 bg-dark text-accent-green">
+        <h1 class="text-3xl font-extrabold tracking-tight mb-2">Dondlinger General Contracting LLC</h1>
+        <div class="flex flex-col items-center gap-1">
+            <a href="tel:+17154593050" class="text-lg font-semibold hover:underline">(715) 459-3050 <span
+                    class="text-xs">(texts are best!)</span></a>
+            <a href="mailto:dondlingergeneralcontracting@gmail.com"
+                class="text-sm hover:underline">dondlingergeneralcontracting@gmail.com</a>
+            <span class="text-xs text-green-300">Wisconsin Rapids, WI</span>
         </div>
+    </header>
+    <!-- End APT Calculator -->
+    <!--
+    Previous form code commented out for reference
+    ...existing code...
+    -->
     <script>
+        // --- Llama AI Chat Only ---
+        (function () {
+            const messagesDiv = document.getElementById('llama-messages');
+            const userInput = document.getElementById('llama-user-input');
+            const sendBtn = document.getElementById('llama-send-btn');
+            const API_URL = "https://llama-universal-netlify-project.netlify.app/.netlify/functions/llama-proxy?path=/chat/completions";
+            function appendMessage(text, sender) {
+                const div = document.createElement('div');
+                div.className = 'msg ' + sender;
+                // Support markdown and preserve line breaks for AI output
+                if (sender === 'ai') {
+                    // If text is markdown, render as HTML (basic)
+                    div.innerHTML = text.replace(/\n/g, '<br>');
+                } else {
+                    div.textContent = (sender === 'user' ? 'You: ' : 'AI: ') + text;
+                }
+                messagesDiv.appendChild(div);
+                messagesDiv.scrollTop = messagesDiv.scrollHeight;
+            }
+            async function sendMessage() {
+                const text = userInput.value.trim();
+                if (!text) return;
+                appendMessage(text, 'user');
+                userInput.value = '';
+                sendBtn.disabled = true;
+                try {
+                    const body = {
+                        model: "Llama-3.3-8B-Instruct",
+                        messages: [
+                            { role: 'system', content: "You are a helpful, friendly representative for Dondlinger General Contracting LLC. Greet the customer, ask clarifying questions about their construction or remodeling project, and provide expert advice on contracting, planning, and building services." },
+                            { role: 'user', content: text }
+                        ]
+                    };
+                    const res = await fetch(API_URL, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(body)
+                    });
+                    let data, aiMsg;
+                    try {
+                        data = await res.json();
+                    } catch (jsonErr) {
+                        appendMessage('Non-JSON response: ' + await res.text(), 'ai');
+                        return;
+                    }
+                    // Industry-standard: handle OpenAI and HF-style, fallback to completion_message.content.text
+                    if (data.choices?.[0]?.message?.content) {
+                        aiMsg = data.choices[0].message.content;
+                    } else if (data.completion_message?.content?.text) {
+                        aiMsg = data.completion_message.content.text;
+                    } else if (data.completion_message?.content) {
+                        aiMsg = data.completion_message.content;
+                    } else if (data.error) {
+                        aiMsg = 'API error: ' + (data.error.message || JSON.stringify(data.error));
+                    } else {
+                        aiMsg = 'Raw response: ' + JSON.stringify(data);
+                    }
+                    appendMessage(aiMsg, 'ai');
+                } catch (e) {
+                    appendMessage('Error: ' + e.message, 'ai');
+                } finally {
+                    sendBtn.disabled = false;
+                }
+            }
+            sendBtn.onclick = sendMessage;
+            userInput.addEventListener('keydown', e => {
+                if (e.key === 'Enter') sendMessage();
             });
+        })();
+        // --- APT Step-by-Step Calculator ---
+        // Variables: x1=projectType, x2=projectDetail, r1=service/price, x3=site info, y1=output
+        // Pipeline: y1 = f(r1(x1, x2), x3)
+        // Construction project types and details
+        const aptSymptoms = {
+            "Remodeling": [
+                { sym: "Kitchen Remodel", svc: "Kitchen Renovation", price: "$10,000-$50,000" },
+                { sym: "Bathroom Remodel", svc: "Bathroom Renovation", price: "$7,000-$25,000" },
+                { sym: "Basement Finish", svc: "Basement Finishing", price: "$15,000-$40,000" },
+                { sym: "Room Addition", svc: "Room Addition", price: "$20,000-$80,000" }
+            ],
+            "New Construction": [
+                { sym: "Custom Home", svc: "Home Construction", price: "$150,000-$500,000+" },
+                { sym: "Garage Build", svc: "Garage Construction", price: "$15,000-$40,000" },
+                { sym: "Deck/Porch", svc: "Deck/Porch Build", price: "$5,000-$25,000" }
+            ],
+            "Exterior": [
+                { sym: "Roof Replacement", svc: "Roofing", price: "$8,000-$25,000" },
+                { sym: "Siding", svc: "Siding Installation", price: "$7,000-$30,000" },
+                { sym: "Window/Door", svc: "Window/Door Install", price: "$3,000-$20,000" }
+            ],
+            "Interior": [
+                { sym: "Flooring", svc: "Flooring Install", price: "$3,000-$15,000" },
+                { sym: "Painting", svc: "Interior Painting", price: "$2,000-$10,000" },
+                { sym: "Drywall", svc: "Drywall Install/Repair", price: "$1,500-$8,000" }
+            ],
+            "Plumbing/Electrical": [
+                { sym: "Plumbing Upgrade", svc: "Plumbing Work", price: "$2,000-$15,000" },
+                { sym: "Electrical Upgrade", svc: "Electrical Work", price: "$2,000-$12,000" }
+            ],
+            "Other": [
+                { sym: "General Consultation", svc: "Consultation", price: "$100-$500" },
+                { sym: "Site Inspection", svc: "Site Inspection", price: "$150-$400" }
+            ]
+        };
+        // Step state
+        let selectedCategory = null;
+        let selectedSymptom = null;
+        let selectedService = null;
+        let selectedPrice = null;
+        // Step 1: Category
+        document.querySelectorAll('.apt-btn[data-category]').forEach(btn => {
+            btn.onclick = function () {
+                selectedCategory = btn.getAttribute('data-category');
+                // Show project details for this category
+                const opts = aptSymptoms[selectedCategory] || [];
+                const so = document.getElementById('symptom-options');
+                so.innerHTML = '';
+                opts.forEach((o, i) => {
+                    const b = document.createElement('button');
+                    b.className = 'apt-btn';
+                    b.textContent = o.sym;
+                    b.onclick = function () {
+                        selectedSymptom = o.sym;
+                        selectedService = o.svc;
+                        selectedPrice = o.price;
+                        document.getElementById('step2').classList.add('hidden');
+                        document.getElementById('step3').classList.remove('hidden');
+                    };
+                    so.appendChild(b);
+                });
+                document.getElementById('step1').classList.add('hidden');
+                document.getElementById('step2').classList.remove('hidden');
+            };
         });
+        // Step 3: Vehicle info
+        document.getElementById('step3-next').onclick = function (e) {
+            e.preventDefault();
+            // Collect site/project info
+            const siteInfo = document.getElementById('site-info').value;
+            const projectDetails = document.getElementById('project-details').value;
+            if (!siteInfo) {
+                alert('Please enter project/site details.');
+                return;
+            }
+            document.getElementById('step3').classList.add('hidden');
+            // Output recommendation
+            // Autofill form fields for Formspree
+            document.getElementById('form-service').value = selectedService || '';
+            document.getElementById('form-price').value = selectedPrice || '';
+            document.getElementById('form-site').value = siteInfo;
+            document.getElementById('form-details').value = projectDetails;
+            document.getElementById('step4').classList.remove('hidden');
+        };
+        // Collapsible form groups (BuckRub style)
+        function toggleGroup(el) {
+            const group = el.parentElement;
+            group.classList.toggle('open');
+        }
+        // Show success message after submit
+        const aptForm = document.getElementById('apt-form');
+        if (aptForm) {
+            aptForm.addEventListener('submit', function (e) {
+                setTimeout(() => {
+                    document.getElementById('apt-success').classList.remove('hidden');
+                }, 500);
+            });
+        }
+        // Style for APT buttons
+        const style = document.createElement('style');
+        style.textContent = `.apt-btn { background: #e11d48; color: #fff; font-weight: 600; border-radius: 0.5rem; padding: 0.7rem 1rem; border: none; cursor: pointer; transition: background 0.2s; font-size: 1.1rem; } .apt-btn:hover { background: #fbbf24; color: #1f2937; }`;
+        document.head.appendChild(style);
     </script>
 </body>