257 lines
13 KiB
HTML
257 lines
13 KiB
HTML
<!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> |