279 lines
14 KiB
HTML
279 lines
14 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 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="{ ...{"showProfile":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="{ ...{"activeItem":"trends","pricesHref":"#","alertsHref":"https://draft-06b548ac-4c56-476f-91d1-14673d811f10.preview.superdesign.dev","forecourtsHref":"https://draft-fadb88fb-1d69-4dfa-8290-72bb533bdd76.preview.superdesign.dev","trendsHref":"https://draft-1e6ffee2-7b50-4d1c-8c1c-2570ecfa738c.preview.superdesign.dev"}, $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> |