225 lines
12 KiB
HTML
225 lines
12 KiB
HTML
<!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="{ ...{"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 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="{ ...{"activeItem":"forecourts","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> |