fuelprices/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
Edwin Eames
2025-06-08 13:21:49 -04:00
parent 942d341527
commit a4188c623d
21 changed files with 1254 additions and 1776 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
src/routes/(app)/+page.svelte
View File

@@ -1,183 +1,74 @@
<!-- src/routes/+page.svelte -->
<script lang="ts">
import "../../app.postcss";
import { onMount } from "svelte";
import { PUBLIC_BASE_URL } from "$env/static/public";
import type { company, oilprice } from '$lib/types/types'
import { newEnglandStates, mapViewBox } from '$lib/states';
import { goto } from '$app/navigation';
import { browser } from '$app/environment'; // To ensure SVG interactions only run client-side
export let company_data: company;
export let oil_price_data: oilprice;
let hoveredState: string | null = null;
let price_of_oil: string = '';
let company_name: string = '';
let company_phone_number: string = '';
onMount(async () => {
await fetch(PUBLIC_BASE_URL + "/info/price/today", {
method: "get",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((result) => (oil_price_data = result));
if (oil_price_data["ok"] == true) {
price_of_oil = oil_price_data["todays_price"];
function handleStateClick(id: string) {
goto(`/${id}`);
}
});
onMount(async () => {
await fetch(PUBLIC_BASE_URL + "/info/company", {
method: "get",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((result) => (company_data = result));
if (company_data["ok"] == true) {
company_name = company_data["company_name"];
company_phone_number = company_data["company_phone_number"];
function handleMouseEnter(stateId: string) {
if (browser) {
hoveredState = stateId;
}
}
function handleMouseLeave() {
if (browser) {
hoveredState = null;
}
}
});
</script>
<title>Auburn Oil: Quality Heating Oil Delivery in Southern Worcester County</title>
<div class="bg-blue-oil text-white">
<div class="bg-secondary px-10">
<div class="max-w-7xl justify-center py-5 mx-auto font-bold text-white">
<h1 class="text-center text-xl">Delivering Oil to Worcester County</h1>
</div>
<div class="text-center mb-8">
<p class="text-lg">Click your state to find prices.</p>
</div>
<div class="mx-auto p-0 ">
<a href="/delivery">
<img class="mx-auto p-0 m-0 overflow-hidden" src="/images/truck.png" alt="Auburn Massachusetts" />
</a>
</div>
<div class="mx-auto p-10">
<div class="mx-auto pb-5 text-5xl text-center">Order Now</div>
<div class="mx-auto text-5xl text-center">
{company_phone_number}
</div>
<div class="grid grid-cols-12 gap-5 px-5 text-center mt-10">
<div class="col-span-12 font-bold text-4xl text-blue-400 mx-auto ">
Why call Auburn Oil?
</div>
<!-- <div class="col-span-12 lg:col-span-1"></div> -->
<div class="col-span-12 lg:col-span-4 bg-base-100 p-10 ">
<div class="text-4xl mb-3">Cheaper Prices</div>
<div class="text-lg">
No Middleman. No expensive bulk plants. Direct port to door for
cheapest prices.
<div class="flex justify-center items-center">
{#if browser}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox={mapViewBox}
class="w-full max-w-md h-auto border border-gray-300 rounded-lg shadow-md"
aria-labelledby="mapTitle"
role="img"
>
<title id="mapTitle">Interactive Map of New England States</title>
{#each newEnglandStates as state}
<path
d={state.pathD}
class={`stroke-black stroke-1 cursor-pointer transition-all duration-150 ease-in-out
${hoveredState === state.id ? state.hoverFill : state.fill}`}
on:click={() => handleStateClick(state.id)}
on:mouseenter={() => handleMouseEnter(state.id)}
on:mouseleave={handleMouseLeave}
aria-label={state.id}
tabindex="0"
role="link"
on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleStateClick(state.id)}}
>
<title>{state.name}</title> <!-- Tooltip on hover -->
</path>
{/each}
</svg>
{:else}
<div class="w-full max-w-2xl h-[500px] bg-gray-200 animate-pulse rounded-lg flex justify-center items-center">
<p>Loading map...</p>
</div>
</div>
<div class="col-span-12 lg:col-span-4 bg-base-100 p-10">
<div class="text-4xl mb-3">Phone Support</div>
<div class="text-lg">
Real live person on the phone when you call.
</div>
</div>
<div class="col-span-12 lg:col-span-4 bg-base-100 p-10">
<div class="text-4xl mb-3">Top Quality Oil</div>
<div class="text-lg">
We dont cut our oil with biodiesel. We use the best available
fuel for your heating system
</div>
</div>
<!-- <div class="col-span-12 lg:col-span-1"></div> -->
<div class="col-span-12 lg:text-center text-center bg-orange-oil">
<div class="text-3xl ">
We Offer Automatic Delivery
</div>
<div class="text-xl p-5">We will automatically fill your home and keep your family comfortable without worries
about oil levels.
</div>
<div class="text-xl">Always get priority delivery status.</div>
</div>
<div class="col-span-6 text-lg text-center">
</div>
</div>
</div>
<div class="h-auto">
<div class="mx-auto p-5">
<div class="grid grid-cols-12">
<div class="col-span-12 py-5">
<div
class="font-bold text-5xl text-blue-400 max-w-7xl mx-auto text-center md:text-left"
>
Serving these communites
</div>
<div
class="font-bold text-xl bg-blue-400 text-blue-800 h-10 mb-10"
></div>
</div>
<div class="col-span-12 py-5">
<div
class="invisible md:visible h-0 md:h-auto flex gap-20 justify-center text-2xl"
>
<div >
<div class="text-2xl">Auburn</div>
<div class="text-2xl">Millbury</div>
<div class="text-2xl">Sutton</div>
<div class="text-2xl">Oxford</div>
<div class="text-2xl">North Oxford</div>
<div class="text-2xl">Webster</div>
<div class="text-2xl">SouthBridge</div>
<div class="text-2xl">Shrewsbury</div>
<div class="text-2xl">Grafton</div>
</div>
<div >
<div class="text-2xl">Dudley</div>
<div class="text-2xl">Sutton</div>
<div class="text-2xl">Charlton</div>
<div class="text-2xl">Leicester</div>
<div class="text-2xl">Cherry Valley</div>
<div class="text-2xl">Rochdale</div>
<div class="text-2xl">Spencer</div>
<div class="text-2xl">Southbridge</div>
<div class="text-2xl">Worcester</div>
</div>
</div>
<div class="visible sm:visible md:invisible h-auto sm:h-auto md:h-0">
<div class="text-center">
<div class="text-2xl">Auburn</div>
<div class="text-2xl">Millbury</div>
<div class="text-2xl">Sutton</div>
<div class="text-2xl">Oxford</div>
<div class="text-2xl">North Oxford</div>
<div class="text-2xl">Webster</div>
<div class="text-2xl">Southbridge</div>
<div class="text-2xl">Shrewsbury</div>
<div class="text-2xl">Grafton</div>
<div class="text-2xl">Dudley</div>
<div class="text-2xl">Charlton</div>
<div class="text-2xl">Leicester</div>
<div class="text-2xl">Cherry Valley</div>
<div class="text-2xl">Rochdale</div>
<div class="text-2xl">Spencer</div>
<div class="text-2xl">Sutton</div>
<div class="text-2xl">Southbridge</div>
<div class="text-2xl">Worcester</div>
</div>
</div>
</div>
<div class="col-span-12 py-5">
<div class="flex justify-center items-center ">
<img class="" src="/images/area.png" alt="Worcester County oil delivery" />
</div>
</div>
</div>
</div>
</div>
{/if}
</div>
<div class="mt-8 text-center">
<h2 class="text-2xl font-semibold mb-4">States:</h2>
<ul class="flex flex-wrap justify-center gap-4">
{#each newEnglandStates as state}
<li>
<a href="/{state.id}" class="btn btn-outline btn-secondary">{state.name}</a>
</li>
{/each}
</ul>
</div>