Style: Merge automotive theme with APT pipeline for industry-standard UI/UX

quote-calculator.html

@@ -6,97 +6,138 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hooper Auto - Service Estimate</title>
     <link rel="stylesheet" href="../llama-universal-netlify-proxy/style.css">
-    <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>
-        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>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.3/dist/tailwind.min.css">
     <style>
-        @media (max-width: 640px) {
-            body {
-                padding: 0 !important;
-            }
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
-            .mobile-form {
-                padding: 0.5rem !important;
-            }
+        body {
+            font-family: 'Inter', Arial, sans-serif;
+            background: #111827;
+            color: #f3f4f6;
+        }
 
-            .mobile-section {
-                padding: 0.5rem !important;
-            }
+        .main-card,
+        .mobile-section {
+            background: #1f2937 !important;
+            border: 4px solid #e11d48 !important;
+            border-radius: 1.25rem !important;
+            box-shadow: 0 4px 32px 0 #0004, 0 1.5px 6px 0 #e11d48;
+            padding: 2rem !important;
+        }
 
-            .mobile-title {
-                font-size: 1.3rem !important;
-            }
+        .form-group .form-toggle {
+            background: #374151 !important;
+            color: #fbbf24 !important;
+            border-radius: 0.5rem !important;
+        }
 
-            .mobile-btn {
-                font-size: 1rem !important;
-                padding: 0.7rem 0.5rem !important;
-            }
+        .form-group .form-content {
+            background: #18181b !important;
+            border-radius: 0.5rem !important;
         }
 
-        .form-group {
-            margin-bottom: 0.5rem;
+        .form-group.open .form-content {
+            background: #18181b !important;
         }
 
-        .form-group .form-toggle {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
+        .apt-btn,
+        .mobile-btn,
+        .form-content button[type=submit] {
+            background: #e11d48 !important;
+            color: #fff !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 #e11d4822;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+        }
+
+        .apt-btn:hover,
+        .mobile-btn:hover,
+        .form-content button[type=submit]:hover {
+            background: #fbbf24 !important;
+            color: #1f2937 !important;
+        }
+
+        .form-group input,
+        .form-group select,
+        .form-group textarea {
+            background: #23272f !important;
+            color: #f3f4f6 !important;
+            border: 1.5px solid #6b7280 !important;
+            border-radius: 0.5rem !important;
+            font-size: 1.05rem;
+        }
+
+        .form-group input::placeholder,
+        .form-group textarea::placeholder {
+            color: #9ca3af !important;
+        }
+
+        .form-group label {
+            color: #fbbf24 !important;
             font-weight: 600;
-            color: #fbbf24;
-            background: #374151;
-            border-radius: 0.5rem;
-            padding: 0.5rem 1rem;
-            margin-bottom: 0.1rem;
         }
 
-        .form-group .form-content {
-            display: none;
-            padding: 0.5rem 1rem 0.7rem 1rem;
-            background: #1f2937;
-            border-radius: 0.5rem;
+        .form-group {
+            border-radius: 0.5rem !important;
+        }
+
+        .form-content {
+            border-radius: 0.5rem !important;
         }
 
         .form-group.open .form-content {
-            display: block;
+            border-radius: 0.5rem !important;
         }
 
-        .form-group .arrow {
-            transition: transform 0.2s;
+        .text-accent-red {
+            color: #e11d48 !important;
         }
 
-        .form-group.open .arrow {
-            transform: rotate(90deg);
+        .text-accent-yellow {
+            color: #fbbf24 !important;
+        }
+
+        .bg-accent-red {
+            background: #e11d48 !important;
+        }
+
+        .bg-accent-yellow {
+            background: #fbbf24 !important;
+        }
+
+        .text-automotive-50 {
+            color: #f3f4f6 !important;
+        }
+
+        .text-automotive-100 {
+            color: #e5e7eb !important;
+        }
+
+        .text-automotive-200 {
+            color: #d1d5db !important;
+        }
+
+        .bg-automotive-700 {
+            background: #111827 !important;
+        }
+
+        .bg-automotive-600 {
+            background: #1f2937 !important;
+        }
+
+        .border-accent-red {
+            border-color: #e11d48 !important;
+        }
+
+        .shadow-xl {
+            box-shadow: 0 4px 32px 0 #0004, 0 1.5px 6px 0 #e11d48 !important;
         }
     </style>
 </head>
@@ -157,25 +198,81 @@
                 </div>
                 <!-- Step 4: Output Recommendation -->
                 <div id="step4" class="mb-4 hidden">
-                    <div class="bg-automotive-500/80 rounded-lg p-4 mb-2">
-                        <div class="text-lg font-bold text-accent-red mb-1">Recommended Service:</div>
-                        <div id="apt-recommend" class="text-automotive-50 mb-2"></div>
-                        <div class="text-accent-yellow font-bold" id="apt-price"></div>
-                    </div>
-                    <div class="mb-2">
-                        <label class="block text-accent-yellow font-semibold mb-1">Your Name (optional)</label>
-                        <input type="text" id="user-name"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50 mb-2"
-                            placeholder="Your Name">
-                        <label class="block text-accent-yellow font-semibold mb-1">Email (for quote reply)</label>
-                        <input type="email" id="user-email"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50 mb-2"
-                            placeholder="hooperautorepair70@gmail.com">
-                    </div>
-                    <button id="apt-submit" class="apt-btn w-full">Request Estimate</button>
-                    <div id="apt-success" class="hidden text-accent-yellow text-center font-semibold mt-2">Request sent!
-                        Hooper Automotive will contact you soon.<br>Email: <a href="mailto:hooperautorepair70@gmail.com"
-                            class="underline">hooperautorepair70@gmail.com</a><br>Phone: (715) 421-9792</div>
+                    <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-green-200 mb-2 mobile-title">Request a Quote</h1>
+                        <p class="text-green-100 mb-2">Get a fast, friendly quote! Tell us about your 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-green-100 font-semibold mb-1">Name <span
+                                        aria-hidden="true" class="text-red-400">*</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-green-100 font-semibold mb-1">Email <span
+                                        aria-hidden="true" class="text-red-400">*</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-green-100 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-green-100 font-semibold mb-1">Service
+                                    Requested <span aria-hidden="true" class="text-red-400">*</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-green-100 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-vehicle" class="block text-green-100 font-semibold mb-1">Vehicle
+                                    Make/Model/Year</label>
+                                <input type="text" id="form-vehicle" name="vehicle"
+                                    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. 2020 Ford F-150">
+                                <label for="form-mileage"
+                                    class="block text-green-100 font-semibold mb-1">Mileage</label>
+                                <input type="text" id="form-mileage" name="mileage"
+                                    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. 42,000">
+                                <label for="form-details" class="block text-green-100 font-semibold mb-1">Problem
+                                    Description</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 the issue, symptoms, or service needed..."></textarea>
+                            </div>
+                        </div>
+                        <div class="form-group open">
+                            <div class="form-content">
+                                <button type="submit"
+                                    class="w-full bg-green-600 hover:bg-green-500 text-white font-bold py-3 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-amber-400 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!
+                            Hooper Automotive will contact you soon.<br>Email: <a
+                                href="mailto:hooperautorepair70@gmail.com"
+                                class="underline">hooperautorepair70@gmail.com</a><br>Phone: (715) 421-9792</div>
+                    </form>
                 </div>
             </div>
         </section>
@@ -186,75 +283,75 @@
     ...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;
+        // --- 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;
                 }
-                async function sendMessage() {
-                    const text = userInput.value.trim();
-                    if (!text) return;
-                    appendMessage(text, 'user');
-                    userInput.value = '';
-                    sendBtn.disabled = true;
+                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 Hooper Automotive service phone representative. Greet the customer, ask clarifying questions, and provide expert auto advice." },
+                            { 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 {
-                        const body = {
-                            model: "Llama-3.3-8B-Instruct",
-                            messages: [
-                                { role: 'system', content: "You are a helpful, friendly Hooper Automotive service phone representative. Greet the customer, ask clarifying questions, and provide expert auto advice." },
-                                { 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;
+                        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();
-                });
-            })();
+            }
+            sendBtn.onclick = sendMessage;
+            userInput.addEventListener('keydown', e => {
+                if (e.key === 'Enter') sendMessage();
+            });
+        })();
         // --- APT Step-by-Step Calculator ---
         // Variables: x1=category, x2=symptom, r1=service/price, x3=vehicle info, y1=output
         // Pipeline: y1 = f(r1(x1, x2), x3)
@@ -343,19 +440,28 @@
             // Output recommendation
             document.getElementById('apt-recommend').textContent = `${selectedService} (${selectedSymptom})`;
             document.getElementById('apt-price').textContent = selectedPrice;
+            // Autofill form fields for Formspree
+            document.getElementById('form-service').value = selectedService || '';
+            document.getElementById('form-price').value = selectedPrice || '';
+            document.getElementById('form-vehicle').value = document.getElementById('vehicle')?.value || '';
+            document.getElementById('form-mileage').value = document.getElementById('mileage')?.value || '';
             document.getElementById('step4').classList.remove('hidden');
         };
 
-        // Step 4: Submit (simulate request)
-        document.getElementById('apt-submit').onclick = function (e) {
-            e.preventDefault();
-            document.getElementById('apt-submit').disabled = true;
-            document.getElementById('apt-success').classList.remove('hidden');
-            setTimeout(() => {
-                document.getElementById('apt-submit').disabled = false;
-                document.getElementById('apt-success').classList.add('hidden');
-            }, 3000);
-        };
+        // 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');