<!DOCTYPE html>

<head>

<title>Scanomat Customer Follow-Up</title>

<style>

* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f3; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; }

.card { background: #fff; border-radius: 12px; border: 0.5px solid #e0ddd6; max-width: 600px; width: 100%; padding: 2rem; }

.logo { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; }

.logo-mark { width: 36px; height: 36px; background: #1a1a1a; border-radius: 6px; display: flex; align-items: center; justify-content: center; }

.logo-mark svg { width: 22px; height: 22px; fill: #fff; }

.logo-name { font-size: 15px; font-weight: 500; color: #1a1a1a; letter-spacing: 0.04em; }

h1 { font-size: 20px; font-weight: 500; color: #1a1a1a; margin-bottom: 0.4rem; }

.subtitle { font-size: 14px; color: #6b6b6b; line-height: 1.6; margin-bottom: 1.75rem; }

.divider { border: none; border-top: 0.5px solid #e0ddd6; margin: 1.5rem 0; }

.field { margin-bottom: 1.25rem; }

label { display: block; font-size: 13px; font-weight: 500; color: #3a3a3a; margin-bottom: 6px; }

.required::after { content: ' *'; color: #c0392b; }

input[type="text"], input[type="tel"], textarea, select {

width: 100%; padding: 9px 12px; border: 0.5px solid #d0cdc6; border-radius: 8px;

font-size: 14px; color: #1a1a1a; background: #fff; outline: none; transition: border-color 0.15s;

font-family: inherit;

}

input[type="text"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { border-color: #888; }

textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.prefilled { background: #f9f8f6; border-color: #dedad3; }

.prefilled-note { font-size: 11px; color: #999; margin-top: 4px; }

.radio-group { display: flex; flex-direction: column; gap: 8px; }

.radio-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0.5px solid #e0ddd6; border-radius: 8px; cursor: pointer; transition: background 0.12s, border-color 0.12s; }

.radio-item:hover { background: #f9f8f6; border-color: #c0bdb5; }

.radio-item.selected { background: #f0efeb; border-color: #1a1a1a; }

.radio-item input { accent-color: #1a1a1a; width: 15px; height: 15px; flex-shrink: 0; }

.radio-item span { font-size: 14px; color: #1a1a1a; }

.section { display: none; }

.section.visible { display: block; }

.submit-btn { width: 100%; padding: 11px; background: #1a1a1a; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; margin-top: 1.5rem; transition: background 0.15s; }

.submit-btn:hover { background: #333; }

.submit-btn:disabled { background: #aaa; cursor: not-allowed; }

.ticket-badge { display: inline-flex; align-items: center; gap: 6px; background: #f0efeb; border: 0.5px solid #d0cdc6; border-radius: 6px; padding: 4px 10px; font-size: 12px; color: #555; margin-bottom: 1.25rem; }

.ticket-badge strong { color: #1a1a1a; }

.status-msg { display: none; text-align: center; padding: 2rem 1rem; }

.status-msg.visible { display: block; }

.status-icon { font-size: 40px; margin-bottom: 1rem; }

.status-msg h2 { font-size: 18px; font-weight: 500; margin-bottom: 0.5rem; color: #1a1a1a; }

.status-msg p { font-size: 14px; color: #6b6b6b; line-height: 1.6; }

.loading-bar { height: 3px; background: #e0ddd6; border-radius: 3px; overflow: hidden; margin-bottom: 1.5rem; display: none; }

.loading-bar.active { display: block; }

.loading-bar-inner { height: 100%; width: 30%; background: #1a1a1a; border-radius: 3px; animation: slide 1.2s ease-in-out infinite; }

@keyframes slide { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} }

select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media(max-width:500px) { .two-col { grid-template-columns: 1fr; } body { padding: 1rem 0.5rem; } .card { padding: 1.25rem; } }

</style>

</head>

<body>

</svg>

</div>

<span class="logo-name">SCANOMAT</span>

</div>

<h1>Customer follow-up</h1>

<p class="subtitle">Thank you for your interest in Scanomat. We are reviewing previous enquiries to ensure we provide the most relevant follow-up and support. Please take a moment to update your information below.</p>

Reference: <strong id="ticket-id-display">—</strong>

</div>

<label for="contact-name">Contact name</label>

<div class="prefilled-note" id="note-name" style="display:none;">Pre-filled from your enquiry — edit if needed</div>

</div>

<label for="phone">Phone number</label>

<div class="prefilled-note" id="note-phone" style="display:none;">Pre-filled from your enquiry — edit if needed</div>

</div>

<label for="company">Company name</label>

<div class="prefilled-note" id="note-company" style="display:none;">Pre-filled from your enquiry — edit if needed</div>

</div>

<label class="required">What is the nature of your enquiry?</label>

<label class="radio-item"><input type="radio" name="q3" value="dealer"> <span>Becoming a dealer / distributor</span></label>

<label class="radio-item"><input type="radio" name="q3" value="endcustomer"> <span>Buying as an end customer</span></label>

</div>

<label for="year-trading" class="required">What year did your company start trading?</label>

</div>

<label class="required">Do you have technical service staff available?</label>

</div>

<label for="business-desc">Please briefly describe your current business and customer segment</label>

</div>

<label class="required">What type of customer are you?</label>

<label class="radio-item"><input type="radio" name="q7" value="workplace"> <span>Workplace / Office</span></label>

<label class="radio-item"><input type="radio" name="q7" value="horeca"> <span>HoReCa / Hospitality</span></label>

<label class="radio-item"><input type="radio" name="q7" value="professional"> <span>Professional use</span></label>

<label class="radio-item"><input type="radio" name="q7" value="private"> <span>Private use</span></label>

</div>

<label class="required">Approximate number of daily coffee users</label>

</div>

<label class="radio-item"><input type="radio" name="q9" value="new"> <span>A new project</span></label>

<label class="radio-item"><input type="radio" name="q9" value="replacement"> <span>Replacement of existing equipment</span></label>

<label class="radio-item"><input type="radio" name="q9" value="expansion"> <span>Expansion of existing setup</span></label>

</div>

<label class="required">Expected project timeline</label>

<label class="radio-item"><input type="radio" name="q10" value="immediately"> <span>Immediately</span></label>

<label class="radio-item"><input type="radio" name="q10" value="3months"> <span>Within 3 months</span></label>

<label class="radio-item"><input type="radio" name="q10" value="6months"> <span>Within 6 months</span></label>

<label class="radio-item"><input type="radio" name="q10" value="6months+"> <span>More than 6 months</span></label>

</div>

<label for="country" class="required">Country</label>

<option value="">Select your country…</option>

<option>Denmark</option><option>Sweden</option><option>Norway</option><option>Finland</option>

<option>Germany</option><option>Netherlands</option><option>Belgium</option><option>France</option>

<option>United Kingdom</option><option>Ireland</option><option>Spain</option><option>Italy</option>

<option>Switzerland</option><option>Austria</option><option>Poland</option><option>Czech Republic</option>

<option>United States</option><option>Canada</option><option>Australia</option><option>Other</option>

</select>

</div>

<label for="comments">Additional comments or requirements</label>

</div>

<button class="submit-btn" id="submit-btn" onclick="handleSubmit()">Submit</button>

</div>

<h2>Thank you for updating your information</h2>

<p>We've received your details and will be in touch shortly.</p>

</div>

<h2>Something went wrong</h2>

<p id="error-msg">We were unable to submit your response. Please try again or contact us directly.</p>

</div>

// ── CONFIG — update before deploying ───────────────────────────────────

const WORKER_URL = 'https://YOUR-WORKER.scanomat.workers.dev';

// Zendesk custom field numeric IDs — find in Admin > Objects & Rules > Tickets > Fields

const ZD_FIELDS = {

enquiry_type: 'FIELD_ID',

year_trading: 'FIELD_ID',

has_service_staff: 'FIELD_ID',

business_desc: 'FIELD_ID',

customer_type: 'FIELD_ID',

daily_users: 'FIELD_ID',

project_type: 'FIELD_ID',

timeline: 'FIELD_ID',

country: 'FIELD_ID',

};

// ── END CONFIG ──────────────────────────────────────────────────────────

const p = new URLSearchParams(window.location.search);

const ticketId = p.get('ticket_id') || '';

const urlName = p.get('name') || '';

const urlPhone = p.get('phone') || '';

const urlCo = p.get('company') || '';

if (ticketId) {

document.getElementById('ticket-id-display').textContent = '#' + ticketId;

document.getElementById('ticket-badge').style.display = 'inline-flex';

}

prefill('contact-name', urlName, 'note-name');

prefill('phone', urlPhone, 'note-phone');

prefill('company', urlCo, 'note-company');

function prefill(id, val, noteId) {

if (!val) return;

const el = document.getElementById(id);

el.value = decodeURIComponent(val);

el.classList.add('prefilled');

document.getElementById(noteId).style.display = 'block';

}

document.querySelectorAll('.radio-group').forEach(g => {

g.addEventListener('change', e => {

g.querySelectorAll('.radio-item').forEach(i => i.classList.remove('selected'));

if (e.target.type === 'radio') e.target.closest('.radio-item').classList.add('selected');

branch();

});

function branch() {

const q3 = document.querySelector('input[name="q3"]:checked')?.value;

show('section-dealer', q3 === 'dealer');

show('section-endcustomer', q3 === 'endcustomer');

show('section-shared', !!q3);

}

function show(id, on) {

document.getElementById(id).classList.toggle('visible', on);

}

async function handleSubmit() {

const q3 = document.querySelector('input[name="q3"]:checked')?.value;

if (!q3) { alert('Please select the nature of your enquiry.'); return; }

const btn = document.getElementById('submit-btn');

btn.disabled = true; btn.textContent = 'Submitting…';

document.getElementById('loading-bar').classList.add('active');

const body = buildPayload(q3);

if (!ticketId) { showThanks('yes'); return; }

try {

const res = await fetch(`${WORKER_URL}/update/${ticketId}`, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify(body)

});

if (!res.ok) throw new Error((await res.json()).error || res.statusText);

showThanks('yes');

} catch(e) {

document.getElementById('error-msg').textContent = e.message;

showThanks('error');

}

function buildPayload(q3) {

const name = document.getElementById('contact-name').value.trim();

const phone = document.getElementById('phone').value.trim();

const company = document.getElementById('company').value.trim();

const country = document.getElementById('country').value;

const comments= document.getElementById('comments').value.trim();

const fields = [{ id: ZD_FIELDS.enquiry_type, value: q3 }];

const lines = [

'📋 Follow-up form submitted',

`Contact: ${name||'—'} | Phone: ${phone||'—'} | Company: ${company||'—'}`,

`Enquiry type: ${q3 === 'dealer' ? 'Dealer / Distributor' : 'End customer'}`,

];

if (q3 === 'dealer') {

const yr = document.getElementById('year-trading').value.trim();

const svc = document.querySelector('input[name="q5"]:checked')?.value || '—';

const desc= document.getElementById('business-desc').value.trim();

fields.push(

{ id: ZD_FIELDS.year_trading, value: yr },

{ id: ZD_FIELDS.has_service_staff, value: svc },

{ id: ZD_FIELDS.business_desc, value: desc }

);

lines.push(`Trading since: ${yr||'—'}`, `Service staff: ${svc}`, `Business: ${desc||'—'}`);

} else {

const ct = document.querySelector('input[name="q7"]:checked')?.value || '—';

const du = document.querySelector('input[name="q8"]:checked')?.value || '—';

const pt = document.querySelector('input[name="q9"]:checked')?.value || '—';

const tl = document.querySelector('input[name="q10"]:checked')?.value || '—';

fields.push(

{ id: ZD_FIELDS.customer_type, value: ct },

{ id: ZD_FIELDS.daily_users, value: du },

{ id: ZD_FIELDS.project_type, value: pt },

{ id: ZD_FIELDS.timeline, value: tl }

);

lines.push(`Customer type: ${ct}`, `Daily users: ${du}`, `Project: ${pt}`, `Timeline: ${tl}`);

}

fields.push({ id: ZD_FIELDS.country, value: country });

lines.push(`Country: ${country||'—'}`);

if (comments) lines.push(`Comments: ${comments}`);

return {

contact: { name, phone, company },

custom_fields: fields,

note: lines.join('\n')

};

}

function showThanks(type) {

document.getElementById('form-area').style.display = 'none';

document.getElementById('loading-bar').classList.remove('active');

document.getElementById(`thanks-${type}`).classList.add('visible');

}

</script>

</body>

</html>