bitstream/fuel-price
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add saved stations mockup with iconify-icon package
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (8.3) (push) Has been cancelled
Details
tests / ci (8.4) (push) Has been cancelled
Details
tests / ci (8.5) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Ovidiu U
2026-04-07 08:29:12 +01:00
parent 41be8e2806
commit 4b29e6fdb0
8 changed files with 1658 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
.claude/mockup/01-enhanced-fuelalert-earthy-dashboard.html Normal file
View File

@@ -0,0 +1,257 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>FuelAlert Earthy Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap');
:root {
--primary: #bb5b3e;
--bg-main: #f5ede5;
--bg-card: #faf6f3;
--text-main: #4a3f3b;
--neutral: #89726c;
--current: #22c55e;
--recent: #89726c;
--stale: #f59e0b;
--outdated: #ef4444;
--rec-now: #8B4860;
--rec-wait: #4A7C7E;
--rec-hold: #9B8B6B;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-main);
color: var(--text-main);
margin: 0;
}
h1, h2, h3, h4 {
font-family: 'Manrope', sans-serif;
}
.custom-shadow {
shadow: 0 4px 6px -1px rgba(137, 114, 108, 0.1), 0 2px 4px -1px rgba(137, 114, 108, 0.06);
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body>
<div class="w-full h-screen flex flex-col">
<!-- Header -->
<header class="shrink-0 pt-14 px-6 pb-6 bg-[#faf6f3] border-b border-[#e5ded7] flex items-center justify-between shadow-sm relative z-50">
<div class="flex items-center gap-2.5">
<div class="w-12 h-12 rounded-lg bg-[#bb5b3e] flex items-center justify-center shadow-md">
<iconify-icon class="text-white text-2xl" icon="lucide:fuel"></iconify-icon>
</div>
<h1 class="text-3xl font-black tracking-tighter text-[#bb5b3e]">FuelAlert</h1>
</div>
<button class="w-10 h-10 rounded-full bg-[#f5ede5] border border-[#e5ded7] flex items-center justify-center" id="user-profile-btn">
<iconify-icon class="text-[#89726c] text-lg" icon="lucide:user"></iconify-icon>
</button>
</header>
<main class="flex-1 overflow-y-auto">
<!-- Search & Filters -->
<section class="px-5 py-6 space-y-4">
<div class="relative">
<input
class="w-full h-14 pl-12 pr-4 bg-[#faf6f3] border border-[#e5ded7] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#bb5b3e] focus:border-transparent text-lg font-medium text-[#4a3f3b]"
placeholder="Enter postcode (e.g. SW1A)"
type="text"
value="SW1A 1AA"
>
<iconify-icon class="absolute left-4 top-1/2 -translate-y-1/2 text-[#89726c] text-xl" icon="lucide:map-pin"></iconify-icon>
</div>
<div class="flex gap-2 overflow-x-auto pb-1 no-scrollbar">
<button class="flex items-center gap-2 px-4 py-2 bg-[#faf6f3] border border-[#e5ded7] rounded-md shrink-0 text-sm font-semibold text-[#4a3f3b]">
<iconify-icon class="text-[#bb5b3e]" icon="lucide:droplets"></iconify-icon>
Petrol
<iconify-icon class="text-xs text-[#89726c]" icon="lucide:chevron-down"></iconify-icon>
</button>
<button class="flex items-center gap-2 px-4 py-2 bg-[#faf6f3] border border-[#e5ded7] rounded-md shrink-0 text-sm font-semibold text-[#4a3f3b]">
<iconify-icon class="text-[#bb5b3e]" icon="lucide:maximize"></iconify-icon>
5 miles
<iconify-icon class="text-xs text-[#89726c]" icon="lucide:chevron-down"></iconify-icon>
</button>
<button class="flex items-center gap-2 px-4 py-2 bg-[#faf6f3] border border-[#e5ded7] rounded-md shrink-0 text-sm font-semibold text-[#4a3f3b]">
<iconify-icon class="text-[#bb5b3e]" icon="lucide:arrow-up-down"></iconify-icon>
Price
<iconify-icon class="text-xs text-[#89726c]" icon="lucide:chevron-down"></iconify-icon>
</button>
</div>
</section>
<!-- Recommendation Box -->
<section class="px-5 mb-6">
<div class="bg-[#faf6f3] p-5 rounded-xl border border-[#e5ded7] shadow-sm">
<div class="flex items-start justify-between mb-3">
<div>
<p class="text-[10px] font-bold uppercase tracking-widest text-[#89726c] mb-1">Recommendation</p>
<h2 class="text-3xl font-black text-[#8B4860] leading-tight">Fill up now</h2>
</div>
<div class="flex flex-col items-center">
<div class="relative flex items-center justify-center w-12 h-12">
<svg class="w-full h-full transform -rotate-90">
<circle cx="24" cy="24" fill="transparent" r="20" stroke="#eeeae5" stroke-width="4" />
<circle cx="24" cy="24" fill="transparent" r="20" stroke="#8B4860" stroke-dasharray="125.6" stroke-dashoffset="25.1" stroke-linecap="round" stroke-width="4" />
</svg>
<span class="absolute text-[11px] font-black text-[#4a3f3b]">80%</span>
</div>
<span class="text-[9px] font-bold uppercase text-[#89726c] mt-1">Confidence</span>
</div>
</div>
<p class="text-[#6b5a55] text-sm leading-relaxed font-medium">
Local prices are at a 30-day low. Regional wholesale trends indicate a 3p per litre increase starting Monday. Securing fuel today is highly advised.
</p>
</div>
</section>
<!-- Map Section -->
<section class="relative h-[240px] w-full bg-[#eeeae5] border-y border-[#e5ded7]">
<!-- Simulated Map Patterns -->
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(#89726c 1px, transparent 1px); background-size: 30px 30px;"></div>
<div class="absolute inset-0 opacity-20" style="background-image: linear-gradient(0deg, transparent 24%, rgba(137,114,108,.2) 25%, rgba(137,114,108,.2) 26%, transparent 27%, transparent 74%, rgba(137,114,108,.2) 75%, rgba(137,114,108,.2) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(137,114,108,.2) 25%, rgba(137,114,108,.2) 26%, transparent 27%, transparent 74%, rgba(137,114,108,.2) 75%, rgba(137,114,108,.2) 76%, transparent 77%, transparent); background-size: 100px 100px;"></div>
<!-- Map Markers -->
<div class="absolute top-1/4 left-1/4 flex flex-col items-center">
<div class="px-1.5 py-0.5 bg-white border-2 border-[#22c55e] rounded text-[10px] font-bold text-[#4a3f3b] mb-0.5">142.9p</div>
<iconify-icon class="text-[#22c55e] text-3xl shadow-sm" icon="mdi:map-marker"></iconify-icon>
</div>
<div class="absolute top-1/2 left-3/4 flex flex-col items-center">
<div class="px-1.5 py-0.5 bg-white border-2 border-[#89726c] rounded text-[10px] font-bold text-[#4a3f3b] mb-0.5">145.7p</div>
<iconify-icon class="text-[#89726c] text-3xl shadow-sm" icon="mdi:map-marker"></iconify-icon>
</div>
<div class="absolute bottom-1/4 left-1/2 flex flex-col items-center">
<div class="px-1.5 py-0.5 bg-white border-2 border-[#f59e0b] rounded text-[10px] font-bold text-[#4a3f3b] mb-0.5">148.9p</div>
<iconify-icon class="text-[#f59e0b] text-3xl shadow-sm" icon="mdi:map-marker"></iconify-icon>
</div>
<!-- Map Legend -->
<div class="absolute bottom-3 left-3 bg-[#faf6f3]/90 backdrop-blur-sm border border-[#e5ded7] rounded px-3 py-2 flex gap-3">
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-[#22c55e]"></span>
<span class="text-[9px] font-bold uppercase text-[#4a3f3b]">Current</span>
</div>
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-[#89726c]"></span>
<span class="text-[9px] font-bold uppercase text-[#4a3f3b]">Recent</span>
</div>
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-[#f59e0b]"></span>
<span class="text-[9px] font-bold uppercase text-[#4a3f3b]">Stale</span>
</div>
</div>
</section>
<!-- Streamlined Station List -->
<section class="px-5 py-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-[#4a3f3b]">Stations Nearby</h3>
<span class="text-[11px] font-bold uppercase text-[#89726c] tracking-widest">26 Results</span>
</div>
<div class="space-y-2">
<!-- Row 1 -->
<div class="flex items-center justify-between bg-[#faf6f3] p-4 rounded-lg border border-[#e5ded7]">
<h4 class="font-bold text-[#4a3f3b]">Tesco Superstore</h4>
<div class="text-xl font-black text-[#22c55e]">142.9<span class="text-sm ml-0.5 font-bold uppercase">p</span></div>
</div>
<!-- Row 2 -->
<div class="flex items-center justify-between bg-[#faf6f3] p-4 rounded-lg border border-[#e5ded7]">
<h4 class="font-bold text-[#4a3f3b]">Sainsbury's Fuel</h4>
<div class="text-xl font-black text-[#22c55e]">143.1<span class="text-sm ml-0.5 font-bold uppercase">p</span></div>
</div>
<!-- Row 3 -->
<div class="flex items-center justify-between bg-[#faf6f3] p-4 rounded-lg border border-[#e5ded7]">
<h4 class="font-bold text-[#4a3f3b]">BP Connect</h4>
<div class="text-xl font-black text-[#89726c]">145.7<span class="text-sm ml-0.5 font-bold uppercase">p</span></div>
</div>
<!-- Row 4 -->
<div class="flex items-center justify-between bg-[#faf6f3] p-4 rounded-lg border border-[#e5ded7]">
<h4 class="font-bold text-[#4a3f3b]">Shell V-Power</h4>
<div class="text-xl font-black text-[#f59e0b]">148.9<span class="text-sm ml-0.5 font-bold uppercase">p</span></div>
</div>
<!-- Row 5 -->
<div class="flex items-center justify-between bg-[#faf6f3] p-4 rounded-lg border border-[#e5ded7]">
<h4 class="font-bold text-[#4a3f3b]">Esso Express</h4>
<div class="text-xl font-black text-[#ef4444]">151.2<span class="text-sm ml-0.5 font-bold uppercase">p</span></div>
</div>
</div>
</section>
<!-- Trend Sparkline -->
<section class="px-5 mb-10">
<div class="relative bg-[#faf6f3] border border-[#e5ded7] rounded-xl overflow-hidden">
<div class="p-5">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-bold text-[#4a3f3b]">14-Day Forecast</h3>
<div class="flex items-center gap-1 px-2 py-0.5 bg-[#bb5b3e]/10 text-[#bb5b3e] rounded text-[10px] font-bold uppercase">
<iconify-icon icon="lucide:sparkles"></iconify-icon>
Pro
</div>
</div>
<!-- Sparkline SVG -->
<div class="relative h-24 w-full">
<svg class="w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 40">
<path d="M0 35 Q 10 32, 20 36 T 40 30 T 60 38 T 80 25 T 100 32"
fill="none"
stroke="#bb5b3e"
stroke-linecap="round"
stroke-width="2" />
</svg>
<!-- Blur Mask -->
<div class="absolute inset-y-0 right-0 w-3/5 bg-gradient-to-r from-transparent via-[#faf6f3]/80 to-[#faf6f3] backdrop-blur-[3px] flex items-center justify-center">
<button class="flex items-center gap-2 px-4 py-2 bg-[#bb5b3e] text-white rounded-full text-xs font-bold shadow-lg active:scale-95 transition-transform" id="unlock-pro-btn">
<iconify-icon icon="lucide:lock-keyhole"></iconify-icon>
Unlock Forecast
</button>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Tab Bar -->
<footer class="shrink-0 pb-[34px] bg-[#faf6f3] border-t border-[#e5ded7]">
<nav class="flex justify-around items-center pt-3">
<a class="flex flex-col items-center gap-1 text-[#bb5b3e]" href="#" id="nav-home">
<iconify-icon class="text-2xl" icon="lucide:search"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Prices</span>
</a>
<a class="flex flex-col items-center gap-1 text-[#89726c]" href="#" id="nav-alerts">
<iconify-icon class="text-2xl" icon="lucide:bell"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Alerts</span>
</a>
<a class="flex flex-col items-center gap-1 text-[#89726c]" href="#" id="nav-map">
<iconify-icon class="text-2xl" icon="lucide:map"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Forecourts</span>
</a>
<a class="flex flex-col items-center gap-1 text-[#89726c]" href="#" id="nav-stats">
<iconify-icon class="text-2xl" icon="lucide:bar-chart-3"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Trends</span>
</a>
</nav>
</footer>
</div>
</body>
</html>

274
.claude/mockup/02-price-alerts-setup.html Normal file
View File

@@ -0,0 +1,274 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>FuelAlert - Price Alerts Setup</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap');
:root {
--primary: #bb5b3e;
--bg-main: #f5ede5;
--bg-card: #faf6f3;
--text-main: #4a3f3b;
--neutral: #89726c;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-main);
color: var(--text-main);
margin: 0;
}
h1, h2, h3, h4 {
font-family: 'Manrope', sans-serif;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider {
position: absolute;
cursor: pointer;
top: 0; left: 0; right: 0; bottom: 0;
background-color: #e5ded7;
transition: .4s; border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 18px; width: 18px;
left: 3px; bottom: 3px;
background-color: white;
transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(20px); }
</style>
<style>sd-component { display: block; }</style>
<script defer init src="https://cdn.jsdelivr.net/npm/petite-vue@0.4.1/dist/petite-vue.iife.js"></script>
</head>
<body class="bg-[#f5ede5]">
<div class="w-full h-screen flex flex-col">
<!-- Header Component -->
<!-- component: Header (2e149317-ab67-4f16-a6d2-0f4569fb7ba4) -->
<div v-scope="{ ...{&quot;showProfile&quot;:true}, $emit() {} }">
<header class="shrink-0 pt-14 px-6 pb-6 bg-[#faf6f3] border-b border-[#e5ded7] flex items-center justify-between shadow-sm relative z-50">
<div class="flex items-center gap-2.5">
<div class="w-12 h-12 rounded-lg bg-[#bb5b3e] flex items-center justify-center shadow-md">
<iconify-icon class="text-white text-2xl" icon="lucide:fuel"></iconify-icon>
</div>
<h1 class="text-3xl font-black tracking-tighter text-[#bb5b3e]">FuelAlert</h1>
</div>
<button
@click="$emit('profileClick')"
class="w-10 h-10 rounded-full bg-[#f5ede5] border border-[#e5ded7] flex items-center justify-center transition-colors hover:bg-[#eeeae5] active:scale-95"
v-if="showProfile">
<iconify-icon class="text-[#89726c] text-lg" icon="lucide:user"></iconify-icon>
</button>
</header>
</div>
<!-- /component: Header (2e149317-ab67-4f16-a6d2-0f4569fb7ba4) -->
<main class="flex-1 overflow-y-auto pb-10">
<!-- Setup Section Title -->
<section class="px-6 pt-6 pb-2">
<h2 class="text-2xl font-black text-[#4a3f3b] tracking-tight">Price Alerts</h2>
<p class="text-sm text-[#89726c] mt-1">Get notified the moment fuel prices drop.</p>
</section>
<!-- Create Alert Form Card -->
<section class="px-5 mb-8">
<div class="bg-[#faf6f3] p-5 rounded-xl border border-[#e5ded7] shadow-sm space-y-5">
<!-- Location Dropdown -->
<div class="space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-widest text-[#89726c]">Location Area</label>
<div class="relative">
<select class="w-full h-12 pl-4 pr-10 bg-[#f5ede5] border border-[#e5ded7] rounded-lg appearance-none text-sm font-medium focus:ring-2 focus:ring-[#bb5b3e] focus:outline-none">
<option>London, SW1A (Current Location)</option>
<option>Manchester, M1</option>
<option>Birmingham, B1</option>
<option>Glasgow, G1</option>
</select>
<iconify-icon class="absolute right-4 top-1/2 -translate-y-1/2 text-[#89726c]" icon="lucide:chevron-down"></iconify-icon>
</div>
</div>
<!-- Fuel Type Toggle -->
<div class="space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-widest text-[#89726c]">Fuel Type</label>
<div class="flex p-1 bg-[#f5ede5] border border-[#e5ded7] rounded-lg">
<button class="flex-1 py-2 text-xs font-bold rounded-md bg-[#bb5b3e] text-white shadow-sm">Petrol</button>
<button class="flex-1 py-2 text-xs font-bold text-[#89726c]">Diesel</button>
</div>
</div>
<!-- Price Threshold -->
<div class="space-y-1.5">
<label class="text-[10px] font-bold uppercase tracking-widest text-[#89726c]">Alert Threshold</label>
<div class="flex items-center gap-3">
<div class="relative flex-1">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-sm font-bold text-[#89726c]">Below</span>
<input class="w-full h-12 pl-16 pr-10 bg-[#f5ede5] border border-[#e5ded7] rounded-lg text-sm font-bold focus:ring-2 focus:ring-[#bb5b3e] focus:outline-none text-right" type="number" value="140">
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-sm font-bold">p</span>
</div>
</div>
</div>
<!-- Notifications Preference -->
<div class="space-y-3 pt-2">
<label class="text-[10px] font-bold uppercase tracking-widest text-[#89726c]">Notification Methods</label>
<div class="space-y-2">
<div class="flex items-center justify-between p-3 bg-[#f5ede5]/50 border border-[#e5ded7] rounded-lg">
<div class="flex items-center gap-3">
<iconify-icon class="text-lg text-[#bb5b3e]" icon="lucide:smartphone"></iconify-icon>
<span class="text-sm font-medium">Push Notification</span>
</div>
<label class="toggle-switch">
<input checked type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="flex items-center justify-between p-3 bg-[#f5ede5]/50 border border-[#e5ded7] rounded-lg">
<div class="flex items-center gap-3">
<iconify-icon class="text-lg text-[#bb5b3e]" icon="lucide:mail"></iconify-icon>
<span class="text-sm font-medium">Email Alert</span>
</div>
<label class="toggle-switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="flex items-center justify-between p-3 bg-[#f5ede5]/50 border border-[#e5ded7] rounded-lg">
<div class="flex items-center gap-3">
<iconify-icon class="text-lg text-[#bb5b3e]" icon="lucide:message-square"></iconify-icon>
<span class="text-sm font-medium">SMS (Pro Only)</span>
</div>
<label class="toggle-switch">
<input disabled opacity-50 type="checkbox">
<span class="slider"></span>
</label>
</div>
</div>
</div>
<!-- Create Button -->
<button class="w-full h-14 bg-[#bb5b3e] text-white font-black rounded-lg shadow-lg active:scale-95 transition-transform flex items-center justify-center gap-2 mt-2" id="cta-create-alert">
<iconify-icon class="text-xl" icon="lucide:plus-circle"></iconify-icon>
Create Alert
</button>
</div>
</section>
<!-- Existing Alerts List -->
<section class="px-5 pb-8">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold text-[#4a3f3b]">Active Alerts</h3>
<span class="text-[10px] font-bold uppercase text-[#89726c] tracking-widest px-2 py-0.5 bg-[#e5ded7] rounded">2 Active</span>
</div>
<div class="space-y-3">
<!-- Alert Card 1 -->
<div class="bg-[#faf6f3] p-4 rounded-xl border border-[#e5ded7] shadow-sm">
<div class="flex justify-between items-start">
<div class="space-y-1">
<div class="flex items-center gap-2">
<span class="px-1.5 py-0.5 bg-[#bb5b3e]/10 text-[#bb5b3e] text-[10px] font-bold rounded uppercase">Petrol</span>
<h4 class="font-bold text-sm">London, SW1A</h4>
</div>
<p class="text-xs text-[#89726c] font-medium">Threshold: <span class="text-[#4a3f3b] font-bold">Below 140.0p</span></p>
</div>
<label class="toggle-switch">
<input checked type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="mt-4 pt-3 border-t border-[#e5ded7] flex gap-3">
<button class="flex-1 flex items-center justify-center gap-2 py-2 bg-[#f5ede5] text-[#4a3f3b] rounded-lg text-xs font-bold active:bg-[#e5ded7]">
<iconify-icon icon="lucide:edit-3"></iconify-icon>
Edit
</button>
<button class="flex-1 flex items-center justify-center gap-2 py-2 bg-[#8B4860]/10 text-[#8B4860] rounded-lg text-xs font-bold active:bg-[#8B4860]/20">
<iconify-icon icon="lucide:trash-2"></iconify-icon>
Delete
</button>
</div>
</div>
<!-- Alert Card 2 -->
<div class="bg-[#faf6f3] p-4 rounded-xl border border-[#e5ded7] shadow-sm">
<div class="flex justify-between items-start">
<div class="space-y-1">
<div class="flex items-center gap-2">
<span class="px-1.5 py-0.5 bg-[#89726c]/10 text-[#89726c] text-[10px] font-bold rounded uppercase">Diesel</span>
<h4 class="font-bold text-sm">Manchester, M1</h4>
</div>
<p class="text-xs text-[#89726c] font-medium">Threshold: <span class="text-[#4a3f3b] font-bold">Below 145.0p</span></p>
</div>
<label class="toggle-switch">
<input checked type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="mt-4 pt-3 border-t border-[#e5ded7] flex gap-3">
<button class="flex-1 flex items-center justify-center gap-2 py-2 bg-[#f5ede5] text-[#4a3f3b] rounded-lg text-xs font-bold active:bg-[#e5ded7]">
<iconify-icon icon="lucide:edit-3"></iconify-icon>
Edit
</button>
<button class="flex-1 flex items-center justify-center gap-2 py-2 bg-[#8B4860]/10 text-[#8B4860] rounded-lg text-xs font-bold active:bg-[#8B4860]/20">
<iconify-icon icon="lucide:trash-2"></iconify-icon>
Delete
</button>
</div>
</div>
</div>
</section>
</main>
<!-- Bottom Navigation Component -->
<!-- component: BottomNavigation (3a8f5bc1-42a2-4db8-9e3b-d7045f7a7a3a) -->
<div v-scope="{ ...{&quot;activeItem&quot;:&quot;alerts&quot;,&quot;pricesHref&quot;:&quot;#&quot;,&quot;alertsHref&quot;:&quot;https://draft-06b548ac-4c56-476f-91d1-14673d811f10.preview.superdesign.dev&quot;,&quot;forecourtsHref&quot;:&quot;https://draft-fadb88fb-1d69-4dfa-8290-72bb533bdd76.preview.superdesign.dev&quot;,&quot;trendsHref&quot;:&quot;https://draft-1e6ffee2-7b50-4d1c-8c1c-2570ecfa738c.preview.superdesign.dev&quot;}, $emit() {} }">
<footer class="shrink-0 pb-[34px] bg-[#faf6f3] border-t border-[#e5ded7]">
<nav class="flex justify-around items-center pt-3">
<a :class="{ 'text-[#bb5b3e]': activeItem === 'prices', 'text-[#89726c]': activeItem !== 'prices' }" :href="pricesHref" class="flex flex-col items-center gap-1 transition-colors">
<iconify-icon class="text-2xl" icon="lucide:search"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Prices</span>
</a>
<a :class="{ 'text-[#bb5b3e]': activeItem === 'alerts', 'text-[#89726c]': activeItem !== 'alerts' }" :href="alertsHref" class="flex flex-col items-center gap-1 transition-colors">
<iconify-icon class="text-2xl" icon="lucide:bell"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Alerts</span>
</a>
<a :class="{ 'text-[#bb5b3e]': activeItem === 'forecourts', 'text-[#89726c]': activeItem !== 'forecourts' }" :href="forecourtsHref" class="flex flex-col items-center gap-1 transition-colors">
<iconify-icon class="text-2xl" icon="lucide:map"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Forecourts</span>
</a>
<a :class="{ 'text-[#bb5b3e]': activeItem === 'trends', 'text-[#89726c]': activeItem !== 'trends' }" :href="trendsHref" class="flex flex-col items-center gap-1 transition-colors">
<iconify-icon class="text-2xl" icon="lucide:bar-chart-3"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Trends</span>
</a>
</nav>
</footer>
</div>
<!-- /component: BottomNavigation (3a8f5bc1-42a2-4db8-9e3b-d7045f7a7a3a) -->
</div>
</body>
</html>

225
.claude/mockup/03-saved-stations-fuelalert.html Normal file
View File

@@ -0,0 +1,225 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Saved Stations - FuelAlert</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--primary: #bb5b3e;
--bg-main: #f5ede5;
--bg-card: #faf6f3;
--text-main: #4a3f3b;
--neutral: #89726c;
--current: #22c55e;
--recent: #89726c;
--stale: #f59e0b;
--outdated: #ef4444;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-main);
color: var(--text-main);
margin: 0;
}
h1, h2, h3, h4 {
font-family: 'Manrope', sans-serif;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
<style>sd-component { display: block; }</style>
<script defer init src="https://cdn.jsdelivr.net/npm/petite-vue@0.4.1/dist/petite-vue.iife.js"></script>
</head>
<body>
<div class="w-full h-screen flex flex-col">
<!-- Header Component -->
<!-- component: Header (2e149317-ab67-4f16-a6d2-0f4569fb7ba4) -->
<div v-scope="{ ...{&quot;showProfile&quot;:true}, $emit() {} }">
<header class="shrink-0 pt-14 px-6 pb-6 bg-[#faf6f3] border-b border-[#e5ded7] flex items-center justify-between shadow-sm relative z-50">
<div class="flex items-center gap-2.5">
<div class="w-12 h-12 rounded-lg bg-[#bb5b3e] flex items-center justify-center shadow-md">
<iconify-icon class="text-white text-2xl" icon="lucide:fuel"></iconify-icon>
</div>
<h1 class="text-3xl font-black tracking-tighter text-[#bb5b3e]">FuelAlert</h1>
</div>
<button
@click="$emit('profileClick')"
class="w-10 h-10 rounded-full bg-[#f5ede5] border border-[#e5ded7] flex items-center justify-center transition-colors hover:bg-[#eeeae5] active:scale-95"
v-if="showProfile">
<iconify-icon class="text-[#89726c] text-lg" icon="lucide:user"></iconify-icon>
</button>
</header>
</div>
<!-- /component: Header (2e149317-ab67-4f16-a6d2-0f4569fb7ba4) -->
<main class="flex-1 overflow-y-auto px-5 py-6 space-y-6">
<!-- Page Title & Stats -->
<div class="flex items-end justify-between">
<div>
<h2 class="text-3xl font-black text-[#4a3f3b] leading-tight">Saved<br/>Forecourts</h2>
<p class="text-sm text-[#89726c] mt-1">Tracking 4 locations</p>
</div>
<button class="flex items-center gap-2 px-4 py-2.5 bg-[#bb5b3e] text-white rounded-lg text-sm font-bold shadow-md active:scale-95 transition-transform">
<iconify-icon icon="lucide:plus"></iconify-icon>
Add New
</button>
</div>
<!-- Station List -->
<div class="space-y-3">
<!-- Station 1: Current -->
<div class="bg-[#faf6f3] p-4 rounded-xl border border-[#e5ded7] shadow-sm flex flex-col gap-4">
<div class="flex justify-between items-start">
<div class="space-y-0.5">
<h4 class="font-bold text-lg text-[#4a3f3b]">Tesco Superstore</h4>
<p class="text-xs text-[#89726c] flex items-center gap-1">
<iconify-icon class="text-xs" icon="lucide:map-pin"></iconify-icon>
Warwick Road, London • 0.8 mi
</p>
</div>
<div class="text-right">
<div class="text-xl font-black text-[#22c55e]">142.9<span class="text-sm font-bold uppercase ml-0.5">p</span></div>
<p class="text-[10px] font-bold text-[#22c55e] uppercase tracking-wider">Current</p>
</div>
</div>
<div class="flex items-center justify-end gap-2">
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#eeeae5] text-[#89726c] active:bg-[#e5ded7]">
<iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
</button>
<button class="flex-1 h-10 flex items-center justify-center gap-2 rounded-lg bg-[#bb5b3e]/10 text-[#bb5b3e] font-bold text-sm active:bg-[#bb5b3e]/20">
<iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
Directions
</button>
</div>
</div>
<!-- Station 2: Recent -->
<div class="bg-[#faf6f3] p-4 rounded-xl border border-[#e5ded7] shadow-sm flex flex-col gap-4">
<div class="flex justify-between items-start">
<div class="space-y-0.5">
<h4 class="font-bold text-lg text-[#4a3f3b]">BP Connect</h4>
<p class="text-xs text-[#89726c] flex items-center gap-1">
<iconify-icon class="text-xs" icon="lucide:map-pin"></iconify-icon>
Knightsbridge, London • 1.2 mi
</p>
</div>
<div class="text-right">
<div class="text-xl font-black text-[#89726c]">145.7<span class="text-sm font-bold uppercase ml-0.5">p</span></div>
<p class="text-[10px] font-bold text-[#89726c] uppercase tracking-wider">Recent</p>
</div>
</div>
<div class="flex items-center justify-end gap-2">
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#eeeae5] text-[#89726c] active:bg-[#e5ded7]">
<iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
</button>
<button class="flex-1 h-10 flex items-center justify-center gap-2 rounded-lg bg-[#bb5b3e]/10 text-[#bb5b3e] font-bold text-sm active:bg-[#bb5b3e]/20">
<iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
Directions
</button>
</div>
</div>
<!-- Station 3: Stale -->
<div class="bg-[#faf6f3] p-4 rounded-xl border border-[#e5ded7] shadow-sm flex flex-col gap-4">
<div class="flex justify-between items-start">
<div class="space-y-0.5">
<h4 class="font-bold text-lg text-[#4a3f3b]">Shell V-Power</h4>
<p class="text-xs text-[#89726c] flex items-center gap-1">
<iconify-icon class="text-xs" icon="lucide:map-pin"></iconify-icon>
Vauxhall Bridge Rd • 2.4 mi
</p>
</div>
<div class="text-right">
<div class="text-xl font-black text-[#f59e0b]">148.9<span class="text-sm font-bold uppercase ml-0.5">p</span></div>
<p class="text-[10px] font-bold text-[#f59e0b] uppercase tracking-wider">Stale</p>
</div>
</div>
<div class="flex items-center justify-end gap-2">
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#eeeae5] text-[#89726c] active:bg-[#e5ded7]">
<iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
</button>
<button class="flex-1 h-10 flex items-center justify-center gap-2 rounded-lg bg-[#bb5b3e]/10 text-[#bb5b3e] font-bold text-sm active:bg-[#bb5b3e]/20">
<iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
Directions
</button>
</div>
</div>
<!-- Station 4: Outdated -->
<div class="bg-[#faf6f3] p-4 rounded-xl border border-[#e5ded7] shadow-sm flex flex-col gap-4">
<div class="flex justify-between items-start">
<div class="space-y-0.5">
<h4 class="font-bold text-lg text-[#4a3f3b]">Esso Express</h4>
<p class="text-xs text-[#89726c] flex items-center gap-1">
<iconify-icon class="text-xs" icon="lucide:map-pin"></iconify-icon>
Kensington High St • 3.1 mi
</p>
</div>
<div class="text-right">
<div class="text-xl font-black text-[#ef4444]">151.2<span class="text-sm font-bold uppercase ml-0.5">p</span></div>
<p class="text-[10px] font-bold text-[#ef4444] uppercase tracking-wider">Outdated</p>
</div>
</div>
<div class="flex items-center justify-end gap-2">
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-[#eeeae5] text-[#89726c] active:bg-[#e5ded7]">
<iconify-icon class="text-lg" icon="lucide:trash-2"></iconify-icon>
</button>
<button class="flex-1 h-10 flex items-center justify-center gap-2 rounded-lg bg-[#bb5b3e]/10 text-[#bb5b3e] font-bold text-sm active:bg-[#bb5b3e]/20">
<iconify-icon class="text-lg" icon="lucide:navigation"></iconify-icon>
Directions
</button>
</div>
</div>
</div>
<!-- Helper Tip -->
<div class="p-5 bg-[#faf6f3]/50 rounded-xl border border-dashed border-[#e5ded7] text-center">
<iconify-icon class="text-2xl text-[#89726c] mb-2" icon="lucide:info"></iconify-icon>
<p class="text-xs text-[#89726c] font-medium leading-relaxed">
Forecourts are automatically ranked by price freshness. We recommend filling up at stations marked green for the most accurate rates.
</p>
</div>
</main>
<!-- Navigation Component -->
<!-- component: BottomNavigation (3a8f5bc1-42a2-4db8-9e3b-d7045f7a7a3a) -->
<div v-scope="{ ...{&quot;activeItem&quot;:&quot;forecourts&quot;,&quot;pricesHref&quot;:&quot;/&quot;,&quot;alertsHref&quot;:&quot;https://draft-06b548ac-4c56-476f-91d1-14673d811f10.preview.superdesign.dev&quot;,&quot;forecourtsHref&quot;:&quot;https://draft-fadb88fb-1d69-4dfa-8290-72bb533bdd76.preview.superdesign.dev&quot;,&quot;trendsHref&quot;:&quot;https://draft-1e6ffee2-7b50-4d1c-8c1c-2570ecfa738c.preview.superdesign.dev&quot;}, $emit() {} }">
<footer class="shrink-0 pb-[34px] bg-[#faf6f3] border-t border-[#e5ded7]">
<nav class="flex justify-around items-center pt-3">
<a :class="{ 'text-[#bb5b3e]': activeItem === 'prices', 'text-[#89726c]': activeItem !== 'prices' }" :href="pricesHref" class="flex flex-col items-center gap-1 transition-colors">
<iconify-icon class="text-2xl" icon="lucide:search"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Prices</span>
</a>
<a :class="{ 'text-[#bb5b3e]': activeItem === 'alerts', 'text-[#89726c]': activeItem !== 'alerts' }" :href="alertsHref" class="flex flex-col items-center gap-1 transition-colors">
<iconify-icon class="text-2xl" icon="lucide:bell"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Alerts</span>
</a>
<a :class="{ 'text-[#bb5b3e]': activeItem === 'forecourts', 'text-[#89726c]': activeItem !== 'forecourts' }" :href="forecourtsHref" class="flex flex-col items-center gap-1 transition-colors">
<iconify-icon class="text-2xl" icon="lucide:map"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Forecourts</span>
</a>
<a :class="{ 'text-[#bb5b3e]': activeItem === 'trends', 'text-[#89726c]': activeItem !== 'trends' }" :href="trendsHref" class="flex flex-col items-center gap-1 transition-colors">
<iconify-icon class="text-2xl" icon="lucide:bar-chart-3"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Trends</span>
</a>
</nav>
</footer>
</div>
<!-- /component: BottomNavigation (3a8f5bc1-42a2-4db8-9e3b-d7045f7a7a3a) -->
</div>
</body>
</html>

279
.claude/mockup/04-fuelalert-price-trends-stats.html Normal file
View File

@@ -0,0 +1,279 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>FuelAlert Price Trends & Stats</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap" rel="stylesheet">
<script defer src="https://unpkg.com/petite-vue"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap');
:root {
--primary: #bb5b3e;
--bg-main: #f5ede5;
--bg-card: #faf6f3;
--text-main: #4a3f3b;
--neutral: #89726c;
--current: #22c55e;
--recent: #89726c;
--stale: #f59e0b;
--outdated: #ef4444;
--rec-now: #8B4860;
--rec-wait: #4A7C7E;
--rec-hold: #9B8B6B;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-main);
color: var(--text-main);
margin: 0;
}
h1, h2, h3, h4 {
font-family: 'Manrope', sans-serif;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.chart-container {
position: relative;
height: 180px;
width: 100%;
}
.muted-highlight- burgundy { color: #8B4860; }
.muted-highlight-teal { color: #4A7C7E; }
.muted-highlight-sage { color: #9B8B6B; }
</style>
</head>
<body>
<div class="w-full h-screen flex flex-col bg-[#f5ede5]">
<!-- Reusable Header Component -->
<!-- component: Header (2e149317-ab67-4f16-a6d2-0f4569fb7ba4) -->
<div v-scope="{ ...{&quot;showProfile&quot;:true}, $emit() {} }">
<header class="shrink-0 pt-14 px-6 pb-6 bg-[#faf6f3] border-b border-[#e5ded7] flex items-center justify-between shadow-sm relative z-50">
<div class="flex items-center gap-2.5">
<div class="w-12 h-12 rounded-lg bg-[#bb5b3e] flex items-center justify-center shadow-md">
<iconify-icon class="text-white text-2xl" icon="lucide:fuel"></iconify-icon>
</div>
<h1 class="text-3xl font-black tracking-tighter text-[#bb5b3e]">FuelAlert</h1>
</div>
<button
@click="$emit('profileClick')"
class="w-10 h-10 rounded-full bg-[#f5ede5] border border-[#e5ded7] flex items-center justify-center transition-colors hover:bg-[#eeeae5] active:scale-95"
v-if="showProfile">
<iconify-icon class="text-[#89726c] text-lg" icon="lucide:user"></iconify-icon>
</button>
</header>
</div>
<!-- /component: Header (2e149317-ab67-4f16-a6d2-0f4569fb7ba4) -->
<main class="flex-1 overflow-y-auto pt-6 pb-10">
<!-- Page Title & Fuel Toggle -->
<div class="px-6 mb-6 flex flex-col gap-4">
<h2 class="text-2xl font-extrabold tracking-tight text-[#4a3f3b]">Market Trends</h2>
<div class="flex p-1 bg-[#eeeae5] rounded-xl w-full">
<button class="flex-1 py-2 rounded-lg bg-[#faf6f3] shadow-sm text-sm font-bold text-[#bb5b3e]">Petrol</button>
<button class="flex-1 py-2 rounded-lg text-sm font-bold text-[#89726c]">Diesel</button>
</div>
</div>
<!-- Key Metrics Summary -->
<section class="px-6 mb-6">
<div class="grid grid-cols-2 gap-3">
<div class="bg-[#faf6f3] p-4 rounded-2xl border border-[#e5ded7] flex flex-col gap-1 shadow-sm">
<span class="text-[10px] font-bold uppercase tracking-widest text-[#89726c]">30D Average</span>
<div class="text-2xl font-black text-[#4a3f3b]">146.4<span class="text-sm">p</span></div>
<div class="flex items-center gap-1 text-[10px] font-bold text-[#ef4444]">
<iconify-icon icon="lucide:trending-up"></iconify-icon>
+1.2p from last month
</div>
</div>
<div class="bg-[#faf6f3] p-4 rounded-2xl border border-[#e5ded7] flex flex-col gap-1 shadow-sm">
<span class="text-[10px] font-bold uppercase tracking-widest text-[#89726c]">Current Lowest</span>
<div class="text-2xl font-black text-[#22c55e]">139.9<span class="text-sm">p</span></div>
<div class="text-[10px] font-medium text-[#89726c]">Tesco, London SE1</div>
</div>
</div>
</section>
<!-- Main 30-Day Trend Chart -->
<section class="px-6 mb-6">
<div class="bg-[#faf6f3] p-5 rounded-2xl border border-[#e5ded7] shadow-sm">
<div class="flex items-center justify-between mb-6">
<h3 class="text-sm font-bold text-[#4a3f3b]">UK 30-Day Price Movement</h3>
<div class="flex items-center gap-4">
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-[#8B4860]"></span>
<span class="text-[10px] font-bold uppercase text-[#89726c]">Peak</span>
</div>
<div class="flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-[#4A7C7E]"></span>
<span class="text-[10px] font-bold uppercase text-[#89726c]">Low</span>
</div>
</div>
</div>
<div class="chart-container flex items-end">
<!-- Simple SVG Line Chart -->
<svg class="w-full h-full" preserveAspectRatio="none" viewBox="0 0 300 150">
<defs>
<linearGradient id="chartGradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#bb5b3e" stop-opacity="0.1" />
<stop offset="100%" stop-color="#bb5b3e" stop-opacity="0" />
</linearGradient>
</defs>
<path d="M0,120 L10,122 L20,118 L30,125 L40,110 L50,115 L60,105 L70,108 L80,100 L90,105 L100,115 L110,120 L120,135 L130,140 L140,138 L150,130 L160,125 L170,115 L180,112 L190,100 L200,95 L210,80 L220,75 L230,85 L240,90 L250,88 L260,82 L270,78 L280,75 L290,70 L300,68" fill="none" stroke="#bb5b3e" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
<path d="M0,120 L10,122 L20,118 L30,125 L40,110 L50,115 L60,105 L70,108 L80,100 L90,105 L100,115 L110,120 L120,135 L130,140 L140,138 L150,130 L160,125 L170,115 L180,112 L190,100 L200,95 L210,80 L220,75 L230,85 L240,90 L250,88 L260,82 L270,78 L280,75 L290,70 L300,68 V150 H0 Z" fill="url(#chartGradient)" />
<!-- Markers -->
<circle cx="130" cy="140" fill="#4A7C7E" r="5" />
<circle cx="220" cy="75" fill="#8B4860" r="5" />
</svg>
</div>
<div class="mt-4 flex justify-between px-1">
<div class="flex flex-col">
<span class="text-[10px] font-bold text-[#89726c]">30 Days Ago</span>
<span class="text-xs font-bold">148.2p</span>
</div>
<div class="flex flex-col items-center">
<span class="text-[10px] font-bold text-[#4A7C7E]">Lowest (May 12)</span>
<span class="text-xs font-bold">140.1p</span>
</div>
<div class="flex flex-col items-end">
<span class="text-[10px] font-bold text-[#89726c]">Current</span>
<span class="text-xs font-bold">145.9p</span>
</div>
</div>
</div>
</section>
<!-- Regional Comparison Table -->
<section class="px-6 mb-6">
<div class="bg-[#faf6f3] rounded-2xl border border-[#e5ded7] shadow-sm overflow-hidden">
<div class="px-5 py-4 border-b border-[#e5ded7] flex items-center justify-between">
<h3 class="text-sm font-bold text-[#4a3f3b]">Regional Averages</h3>
<span class="text-[10px] font-bold text-[#bb5b3e] uppercase tracking-wider">vs National</span>
</div>
<div class="divide-y divide-[#e5ded7]">
<div class="px-5 py-3.5 flex items-center justify-between">
<span class="text-sm font-medium">Greater London</span>
<div class="flex items-center gap-3">
<span class="text-sm font-black">149.2p</span>
<span class="text-[10px] font-bold text-[#ef4444] px-1.5 py-0.5 bg-red-50 rounded-md">+2.8p</span>
</div>
</div>
<div class="px-5 py-3.5 flex items-center justify-between">
<span class="text-sm font-medium">Midlands</span>
<div class="flex items-center gap-3">
<span class="text-sm font-black">145.4p</span>
<span class="text-[10px] font-bold text-[#22c55e] px-1.5 py-0.5 bg-green-50 rounded-md">-1.0p</span>
</div>
</div>
<div class="px-5 py-3.5 flex items-center justify-between">
<span class="text-sm font-medium">Northern Ireland</span>
<div class="flex items-center gap-3">
<span class="text-sm font-black">142.1p</span>
<span class="text-[10px] font-bold text-[#22c55e] px-1.5 py-0.5 bg-green-50 rounded-md">-4.3p</span>
</div>
</div>
<div class="px-5 py-3.5 flex items-center justify-between">
<span class="text-sm font-medium">North West</span>
<div class="flex items-center gap-3">
<span class="text-sm font-black">144.8p</span>
<span class="text-[10px] font-bold text-[#22c55e] px-1.5 py-0.5 bg-green-50 rounded-md">-1.6p</span>
</div>
</div>
</div>
</div>
</section>
<!-- Insights & Predictions -->
<section class="px-6 mb-10">
<div class="bg-[#faf6f3] p-5 rounded-2xl border border-[#e5ded7] shadow-sm flex flex-col gap-4">
<div class="flex items-center gap-2">
<iconify-icon class="text-[#bb5b3e]" icon="lucide:sparkles"></iconify-icon>
<h3 class="text-sm font-bold text-[#4a3f3b]">Weekly Market Insights</h3>
</div>
<div class="space-y-4">
<div class="flex gap-3">
<div class="shrink-0 w-8 h-8 rounded-full bg-[#8B4860]/10 flex items-center justify-center text-[#8B4860]">
<iconify-icon icon="lucide:arrow-up-right"></iconify-icon>
</div>
<div>
<h4 class="text-xs font-bold text-[#8B4860] uppercase mb-1">Price Warning</h4>
<p class="text-sm text-[#6b5a55] leading-relaxed">
Wholesale crude oil prices spiked 4% yesterday. Retail forecourts usually lag by 3-5 days. Expect localized jumps by the weekend.
</p>
</div>
</div>
<div class="flex gap-3">
<div class="shrink-0 w-8 h-8 rounded-full bg-[#4A7C7E]/10 flex items-center justify-center text-[#4A7C7E]">
<iconify-icon icon="lucide:navigation"></iconify-icon>
</div>
<div>
<h4 class="text-xs font-bold text-[#4A7C7E] uppercase mb-1">Strategy Tip</h4>
<p class="text-sm text-[#6b5a55] leading-relaxed">
Supermarkets in the North West are currently engaged in a price war. If you're heading that way, fill up at Tesco or Asda in Crewe for the best rates.
</p>
</div>
</div>
</div>
<div class="mt-2 pt-4 border-t border-[#e5ded7]">
<div class="flex items-center justify-between">
<div class="flex flex-col">
<span class="text-[10px] font-bold text-[#89726c] uppercase">Predicted Trend</span>
<span class="text-sm font-bold text-[#9B8B6B]">Moderate Increase</span>
</div>
<iconify-icon class="text-2xl text-[#9B8B6B]" icon="lucide:trending-up"></iconify-icon>
</div>
</div>
</div>
</section>
</main>
<!-- Reusable Bottom Navigation Component -->
<!-- component: BottomNavigation (3a8f5bc1-42a2-4db8-9e3b-d7045f7a7a3a) -->
<div v-scope="{ ...{&quot;activeItem&quot;:&quot;trends&quot;,&quot;pricesHref&quot;:&quot;#&quot;,&quot;alertsHref&quot;:&quot;https://draft-06b548ac-4c56-476f-91d1-14673d811f10.preview.superdesign.dev&quot;,&quot;forecourtsHref&quot;:&quot;https://draft-fadb88fb-1d69-4dfa-8290-72bb533bdd76.preview.superdesign.dev&quot;,&quot;trendsHref&quot;:&quot;https://draft-1e6ffee2-7b50-4d1c-8c1c-2570ecfa738c.preview.superdesign.dev&quot;}, $emit() {} }">
<footer class="shrink-0 pb-[34px] bg-[#faf6f3] border-t border-[#e5ded7]">
<nav class="flex justify-around items-center pt-3">
<a :class="{ 'text-[#bb5b3e]': activeItem === 'prices', 'text-[#89726c]': activeItem !== 'prices' }" :href="pricesHref" class="flex flex-col items-center gap-1 transition-colors">
<iconify-icon class="text-2xl" icon="lucide:search"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Prices</span>
</a>
<a :class="{ 'text-[#bb5b3e]': activeItem === 'alerts', 'text-[#89726c]': activeItem !== 'alerts' }" :href="alertsHref" class="flex flex-col items-center gap-1 transition-colors">
<iconify-icon class="text-2xl" icon="lucide:bell"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Alerts</span>
</a>
<a :class="{ 'text-[#bb5b3e]': activeItem === 'forecourts', 'text-[#89726c]': activeItem !== 'forecourts' }" :href="forecourtsHref" class="flex flex-col items-center gap-1 transition-colors">
<iconify-icon class="text-2xl" icon="lucide:map"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Forecourts</span>
</a>
<a :class="{ 'text-[#bb5b3e]': activeItem === 'trends', 'text-[#89726c]': activeItem !== 'trends' }" :href="trendsHref" class="flex flex-col items-center gap-1 transition-colors">
<iconify-icon class="text-2xl" icon="lucide:bar-chart-3"></iconify-icon>
<span class="text-[9px] font-bold uppercase">Trends</span>
</a>
</nav>
</footer>
</div>
<!-- /component: BottomNavigation (3a8f5bc1-42a2-4db8-9e3b-d7045f7a7a3a) -->
</div>
</body>
</html>

19
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"@tailwindcss/vite": "^4.1.11",
"autoprefixer": "^10.4.20",
"concurrently": "^9.0.1",
"iconify-icon": "^3.0.2",
"laravel-vite-plugin": "^3.0.0",
"leaflet": "^1.9.4",
"tailwindcss": "^4.0.7",
@@ -50,6 +51,12 @@
"tslib": "^2.4.0"
}
},
"node_modules/@iconify/types": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
"license": "MIT"
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1001,6 +1008,18 @@
"node": ">=8"
}
},
"node_modules/iconify-icon": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-3.0.2.tgz",
"integrity": "sha512-DYPAumiUeUeT/GHT8x2wrAVKn1FqZJqFH0Y5pBefapWRreV1BBvqBVMb0020YQ2njmbR59r/IathL2d2OrDrxA==",
"license": "MIT",
"dependencies": {
"@iconify/types": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/cyberalien"
}
},
"node_modules/is-fullwidth-code-point": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",

1
package.json
View File

@@ -10,6 +10,7 @@
"@tailwindcss/vite": "^4.1.11",
"autoprefixer": "^10.4.20",
"concurrently": "^9.0.1",
"iconify-icon": "^3.0.2",
"laravel-vite-plugin": "^3.0.0",
"leaflet": "^1.9.4",
"tailwindcss": "^4.0.7",

1
resources/js/app.js
View File

@@ -1,3 +1,4 @@
import 'iconify-icon';
import { stationMap } from './maps/station-map.js';
document.addEventListener('alpine:init', () => {

788
resources/views/welcome.blade.php
View File

File diff suppressed because one or more lines are too long