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

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>