135 lines
7.9 KiB
HTML
135 lines
7.9 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>United Supermarkets · Cyber Sale Survey</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
</head>
|
||
<body class="bg-slate-950 text-white min-h-screen">
|
||
<header class="max-w-3xl mx-auto px-4 py-6">
|
||
<a href="/" class="text-slate-300 underline">← Back</a>
|
||
<h1 class="mt-2 text-3xl font-extrabold">Quick Survey</h1>
|
||
<p class="text-slate-300 mt-1">Help us improve <span class="font-semibold">E-Commerce & Digital Coupons</span> at United.</p>
|
||
</header>
|
||
|
||
<main class="max-w-3xl mx-auto px-4">
|
||
<form method="post" class="bg-slate-900/60 border border-slate-800 rounded-2xl p-5 grid gap-6">
|
||
<!-- Contact (optional) -->
|
||
<div class="grid sm:grid-cols-2 gap-4">
|
||
<label class="grid gap-1">
|
||
<span class="text-sm text-slate-300">Name (optional)</span>
|
||
<input name="name" class="text-black p-2 rounded" placeholder="Your name" />
|
||
</label>
|
||
<label class="grid gap-1">
|
||
<span class="text-sm text-slate-300">Email (optional for follow-ups)</span>
|
||
<input type="email" name="email" class="text-black p-2 rounded" placeholder="you@example.com" />
|
||
</label>
|
||
</div>
|
||
<label class="inline-flex items-center gap-2 text-sm text-slate-300">
|
||
<input type="checkbox" name="email_consent" value="yes" class="h-4 w-4" />
|
||
I agree United may contact me about e-commerce and coupons.
|
||
</label>
|
||
|
||
<hr class="border-slate-800">
|
||
|
||
<!-- Shopping frequency -->
|
||
<div class="grid gap-2">
|
||
<div class="text-sm font-semibold">How often do you shop for groceries online with United?</div>
|
||
<div class="grid sm:grid-cols-4 gap-2">
|
||
<label class="flex items-center gap-2"><input type="radio" name="shop_online_freq" value="never" required> Never</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="shop_online_freq" value="rarely"> Rarely</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="shop_online_freq" value="monthly"> Monthly</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="shop_online_freq" value="weekly+"> Weekly+</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Fulfillment preference -->
|
||
<div class="grid gap-2">
|
||
<div class="text-sm font-semibold">Preferred way to get your order?</div>
|
||
<div class="grid sm:grid-cols-3 gap-2">
|
||
<label class="flex items-center gap-2"><input type="radio" name="fulfillment_preference" value="pickup" required> Curbside Pickup</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="fulfillment_preference" value="delivery"> Delivery</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="fulfillment_preference" value="in-store"> In-store Shopping</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Digital coupons -->
|
||
<div class="grid gap-2">
|
||
<div class="text-sm font-semibold">Do you use digital coupons?</div>
|
||
<div class="grid sm:grid-cols-4 gap-2">
|
||
<label class="flex items-center gap-2"><input type="radio" name="digital_coupons_use" value="often" required> Often</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="digital_coupons_use" value="sometimes"> Sometimes</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="digital_coupons_use" value="tried"> I’ve tried them</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="digital_coupons_use" value="never"> Never</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Preference: Digital vs Paper -->
|
||
<div class="grid gap-2">
|
||
<div class="text-sm font-semibold">Coupons preference</div>
|
||
<div class="grid sm:grid-cols-4 gap-2">
|
||
<label class="flex items-center gap-2"><input type="radio" name="coupons_preference" value="digital" required> Digital</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="coupons_preference" value="paper"> Paper</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="coupons_preference" value="both"> Both</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="coupons_preference" value="none"> None</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- What matters most -->
|
||
<div class="grid gap-2">
|
||
<div class="text-sm font-semibold">What matters most when ordering online? <span class="opacity-70">(pick all that apply)</span></div>
|
||
<div class="grid sm:grid-cols-3 gap-2">
|
||
<label class="flex items-center gap-2"><input type="checkbox" name="what_matters" value="price"> Low Prices</label>
|
||
<label class="flex items-center gap-2"><input type="checkbox" name="what_matters" value="fees"> Low Fees</label>
|
||
<label class="flex items-center gap-2"><input type="checkbox" name="what_matters" value="timeslots"> Convenient Time Slots</label>
|
||
<label class="flex items-center gap-2"><input type="checkbox" name="what_matters" value="speed"> Fast Pickup/Delivery</label>
|
||
<label class="flex items-center gap-2"><input type="checkbox" name="what_matters" value="substitutions"> Good Substitutions</label>
|
||
<label class="flex items-center gap-2"><input type="checkbox" name="what_matters" value="coupons"> Easy Digital Coupons</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Barriers -->
|
||
<div class="grid gap-2">
|
||
<div class="text-sm font-semibold">What keeps you from ordering online more often? <span class="opacity-70">(pick all that apply)</span></div>
|
||
<div class="grid sm:grid-cols-3 gap-2">
|
||
<label class="flex items-center gap-2"><input type="checkbox" name="barriers" value="fees"> Fees</label>
|
||
<label class="flex items-center gap-2"><input type="checkbox" name="barriers" value="pricing"> Prices</label>
|
||
<label class="flex items-center gap-2"><input type="checkbox" name="barriers" value="substitutions"> Substitutions quality</label>
|
||
<label class="flex items-center gap-2"><input type="checkbox" name="barriers" value="availability"> Item availability</label>
|
||
<label class="flex items-center gap-2"><input type="checkbox" name="barriers" value="timeslots"> Time slot availability</label>
|
||
<label class="flex items-center gap-2"><input type="checkbox" name="barriers" value="app"> App/website usability</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Device -->
|
||
<div class="grid gap-2">
|
||
<div class="text-sm font-semibold">What device do you usually use?</div>
|
||
<div class="grid sm:grid-cols-3 gap-2">
|
||
<label class="flex items-center gap-2"><input type="radio" name="device" value="phone" required> Phone</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="device" value="tablet"> Tablet</label>
|
||
<label class="flex items-center gap-2"><input type="radio" name="device" value="desktop"> Desktop/Laptop</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Free text -->
|
||
<div class="grid gap-1">
|
||
<label class="text-sm font-semibold">Anything we could improve for online shopping?</label>
|
||
<textarea name="feedback" rows="3" class="text-black p-2 rounded" placeholder="Tell us what would make United online shopping even better."></textarea>
|
||
</div>
|
||
|
||
<!-- Submit -->
|
||
<div class="flex items-center justify-between gap-3">
|
||
<p class="text-xs text-slate-400">Note: This is a quick promo survey; answers help us improve E-Commerce and coupons. </p>
|
||
<button class="bg-emerald-500 hover:bg-emerald-600 px-6 py-3 rounded-lg font-semibold text-black">Start the Game</button>
|
||
</div>
|
||
</form>
|
||
</main>
|
||
|
||
<footer class="max-w-3xl mx-auto px-4 py-8 text-center text-slate-400 text-xs">
|
||
© United Supermarkets — Cyber Sale Tailgate
|
||
</footer>
|
||
</body>
|
||
</html>
|
||
|