AuburnOil/auburnoil_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Reformat Svelte pages, move style block, and update image asset version.

Browse Source
This commit is contained in:
Edwin Eames
2026-03-12 17:10:52 -04:00
parent 91df8c20ea
commit b9d82a7cc9
2 changed files with 138 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,17 +2,15 @@
import "../../app.postcss"; import "../../app.postcss";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { PUBLIC_BASE_URL } from "$env/static/public"; import { PUBLIC_BASE_URL } from "$env/static/public";
import type { company, oilprice } from '$lib/types/types' import type { company, oilprice } from "$lib/types/types";
import '/static/fonts.css'; import "/static/fonts.css";
export let company_data: company; export let company_data: company;
export let oil_price_data: oilprice; export let oil_price_data: oilprice;
let price_of_oil: string = ''; let price_of_oil: string = "";
let company_name: string = ''; let company_name: string = "";
let company_phone_number: string = ''; let company_phone_number: string = "";
onMount(async () => { onMount(async () => {
try { try {
const response = await fetch(PUBLIC_BASE_URL + "/info/price/today", { const response = await fetch(PUBLIC_BASE_URL + "/info/price/today", {
@@ -59,25 +57,30 @@
} }
}); });
</script> </script>
<style>
.custom-font { <link
font-family: 'EnterS', sans-serif; rel="stylesheet"
} href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
</style> />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <title
<title>Auburn Oil: Quality Heating Oil Delivery in Southern Worcester County</title> >Auburn Oil: Quality Heating Oil Delivery in Southern Worcester County</title
>
<div class="bg-blue-oil text-white"> <div class="bg-blue-oil text-white">
<div class="bg-gray-oil px-10"> <div class="bg-gray-oil px-10">
<div class="max-w-7xl justify-center py-5 mx-auto font-bold text-white"> <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> <h1 class="text-center text-xl">Delivering Oil to Worcester County</h1>
</div> </div>
</div> </div>
<div class="mx-auto p-0 "> <div class="mx-auto p-0">
<a href="/delivery"> <a href="/delivery">
<img class="mx-auto p-0 m-0 overflow-hidden" src="/images/truck.png" alt="Auburn Massachusetts" /> <img
</a> class="mx-auto p-0 m-0 overflow-hidden"
src="/images/truck.png"
alt="Auburn Massachusetts"
/>
</a>
</div> </div>
<!-- <div class="grid grid-cols-12 gap-5 px-5 text-center mt-10"> <!-- <div class="grid grid-cols-12 gap-5 px-5 text-center mt-10">
<div class="col-span-12 font-bold text-4xl text-orange-oil mx-auto custom-font"> <div class="col-span-12 font-bold text-4xl text-orange-oil mx-auto custom-font">
@@ -90,13 +93,19 @@
</div> </div>
</div> --> </div> -->
<div class="mx-auto p-10"> <div class="mx-auto p-10">
<div class="flex justify-center gap-8 md:gap-20 flex-col md:flex-row custom-font"> <div
class="flex justify-center gap-8 md:gap-20 flex-col md:flex-row custom-font"
>
<div class="text-center w-full md:w-auto"> <div class="text-center w-full md:w-auto">
<div class="pb-2 md:pb-5 text-3xl"><i class="fas fa-phone-alt mr-2"></i>Call Us</div> <div class="pb-2 md:pb-5 text-3xl">
<div class="text-3xl ">508-426-8800</div> <i class="fas fa-phone-alt mr-2"></i>Call Us
</div>
<div class="text-3xl">508-426-8800</div>
</div> </div>
<div class="text-center w-full md:w-auto"> <div class="text-center w-full md:w-auto">
<div class="pb-2 md:pb-5 text-3xl"><i class="fas fa-sms mr-2"></i>Text</div> <div class="pb-2 md:pb-5 text-3xl">
<i class="fas fa-sms mr-2"></i>Text
</div>
<div class="text-3xl">914-330-6100</div> <div class="text-3xl">914-330-6100</div>
</div> </div>
</div> </div>
@@ -108,20 +117,25 @@
</div> </div>
</div> --> </div> -->
<div class="bg-green-600 text-white p-4 mt-4 flex justify-center items-center gap-4 w-full md:w-1/2 md:mx-auto"> <div
class="bg-green-600 text-white p-4 mt-4 flex justify-center items-center gap-4 w-full md:w-1/2 md:mx-auto"
>
<img src="/images/paxton.jpg" alt="Paxton" class="w-16 h-16 rounded" /> <img src="/images/paxton.jpg" alt="Paxton" class="w-16 h-16 rounded" />
<span class="text-2xl font-bold">Now delivering to Paxton !</span> <span class="text-2xl font-bold">Now delivering to Paxton !</span>
</div> </div>
<div class="grid grid-cols-12 gap-5 px-5 text-center mt-10"> <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 "> <div class="col-span-12 font-bold text-4xl text-blue-400 mx-auto">
Why call Auburn Oil? Why call Auburn Oil?
</div> </div>
<div class="col-span-12 bg-orange-500 text-white p-6 text-center"> <div class="col-span-12 bg-orange-500 text-white p-6 text-center">
<div class="text-4xl mb-5">Lightning Fast Delivery</div> <div class="text-4xl mb-5">Lightning Fast Delivery</div>
<div class="text-xl">We're much faster than the competition, delivering home heating oil quickly and efficiently to keep your home warm.</div> <div class="text-xl">
We're much faster than the competition, delivering home heating oil
quickly and efficiently to keep your home warm.
</div>
</div> </div>
<div class="col-span-12 lg:col-span-4 bg-gray-oil text-white p-10 "> <div class="col-span-12 lg:col-span-4 bg-gray-oil text-white p-10">
<div class="text-4xl mb-3">Cheaper Prices</div> <div class="text-4xl mb-3">Cheaper Prices</div>
<div class="text-lg"> <div class="text-lg">
No Middleman. No expensive bulk plants. Direct port to door for No Middleman. No expensive bulk plants. Direct port to door for
@@ -131,37 +145,34 @@
<div class="col-span-12 lg:col-span-4 bg-gray-oil text-white p-10"> <div class="col-span-12 lg:col-span-4 bg-gray-oil text-white p-10">
<div class="text-4xl mb-3">Phone Support</div> <div class="text-4xl mb-3">Phone Support</div>
<div class="text-lg"> <div class="text-lg">
Real live person on the phone when you call. Text us if you prefer. Real live person on the phone when you call. Text us if you prefer. We
We are here to help you. are here to help you.
</div> </div>
</div> </div>
<div class="col-span-12 lg:col-span-4 bg-gray-oil text-white p-10"> <div class="col-span-12 lg:col-span-4 bg-gray-oil text-white p-10">
<div class="text-4xl mb-3">Top Quality Oil</div> <div class="text-4xl mb-3">Top Quality Oil</div>
<div class="text-lg"> <div class="text-lg">
We dont cut our oil with biodiesel. We use the best available We dont cut our oil with biodiesel. We use the best available fuel for
fuel for your heating system. your heating system.
</div> </div>
</div> </div>
<div class="col-span-12 lg:text-center text-center bg-gray-oil"> <div class="col-span-12 lg:text-center text-center bg-gray-oil">
<div class="text-3xl "> <div class="text-3xl">We Offer Automatic Delivery</div>
We Offer Automatic Delivery <div class="text-xl p-5">
</div> We will automatically fill your home and keep your family comfortable
<div class="text-xl p-5">We will automatically fill your home and keep your family comfortable without worries without worries about oil levels.
about oil levels.
</div> </div>
<div class="text-xl">Always get priority delivery status.</div> <div class="text-xl">Always get priority delivery status.</div>
</div> </div>
<div class="bg-red-500 col-span-12 lg:text-center text-center"> <div class="bg-red-500 col-span-12 lg:text-center text-center">
<div class=" bg-red-500 text-3xl mb-3">Run out of oil?</div> <div class=" bg-red-500 text-3xl mb-3">Run out of oil?</div>
<div class="bg-red-500 text-white p-4 my-4 text-center font-bold"> <div class="bg-red-500 text-white p-4 my-4 text-center font-bold">
We offer emergency after-hours, night, holiday, and weekend deliveries when you're running low or have run out of heating oil. We offer emergency after-hours, night, holiday, and weekend deliveries
when you're running low or have run out of heating oil.
</div> </div>
</div> </div>
<div class="col-span-6 text-lg text-center"> <div class="col-span-6 text-lg text-center"></div>
</div>
</div> </div>
</div> </div>
<div class="h-auto"> <div class="h-auto">
@@ -181,7 +192,7 @@
<div <div
class="invisible md:visible h-0 md:h-auto flex gap-20 justify-center text-2xl" class="invisible md:visible h-0 md:h-auto flex gap-20 justify-center text-2xl"
> >
<div > <div>
<div class="text-2xl">Auburn</div> <div class="text-2xl">Auburn</div>
<div class="text-2xl">Millbury</div> <div class="text-2xl">Millbury</div>
<div class="text-2xl">Sutton</div> <div class="text-2xl">Sutton</div>
@@ -190,7 +201,7 @@
<div class="text-2xl">Webster</div> <div class="text-2xl">Webster</div>
<div class="text-2xl">Grafton</div> <div class="text-2xl">Grafton</div>
</div> </div>
<div > <div>
<div class="text-2xl">Dudley</div> <div class="text-2xl">Dudley</div>
<div class="text-2xl">Charlton</div> <div class="text-2xl">Charlton</div>
<div class="text-2xl">Leicester</div> <div class="text-2xl">Leicester</div>
@@ -222,11 +233,21 @@
</div> </div>
</div> </div>
<div class="col-span-12 py-5"> <div class="col-span-12 py-5">
<div class="flex justify-center items-center "> <div class="flex justify-center items-center">
<img class="" src="/images/area.png" alt="Worcester County oil delivery" /> <img
class=""
src="/images/area.png?v=2"
alt="Worcester County oil delivery"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<style>
.custom-font {
font-family: "EnterS", sans-serif;
}
</style>

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

@@ -1,14 +1,13 @@
<script lang='ts'> <script lang="ts">
import "../../../app.postcss"; import "../../../app.postcss";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { PUBLIC_BASE_URL } from "$env/static/public"; import { PUBLIC_BASE_URL } from "$env/static/public";
import type { company } from '$lib/types/types' import type { company } from "$lib/types/types";
export let company_data: company; export let company_data: company;
let company_name: string = "";
let company_name: string = ''; let tel_number: string = "";
let tel_number: string = '';
onMount(async () => { onMount(async () => {
await fetch(PUBLIC_BASE_URL + "/info/company", { await fetch(PUBLIC_BASE_URL + "/info/company", {
@@ -31,70 +30,76 @@
<title>Delivery towns and Map</title> <title>Delivery towns and Map</title>
<div class="bg-gray-oil px-10"> <div class="bg-gray-oil px-10">
<div class="max-w-7xl justify-center py-5 mx-auto font-bold text-white"> <div class="max-w-7xl justify-center py-5 mx-auto font-bold text-white">
<h1>Delivery Area</h1> <h1>Delivery Area</h1>
</div> </div>
</div> </div>
<div class="h-auto"> <div class="h-auto">
<div class="mx-auto p-5"> <div class="mx-auto p-5">
<div class="grid grid-cols-12 "> <div class="grid grid-cols-12">
<div class="col-span-12 py-5 "> <div class="col-span-12 py-5">
<div class="font-bold text-blue-oil mx-auto text-center md:text-left"> <div class="font-bold text-blue-oil mx-auto text-center md:text-left">
<h3>Serving these communites</h3> <h3>Serving these communites</h3>
</div>
<div class="font-bold text-xl bg-gray-oil text-blue-oil 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-3xl">
<div >
<div class="text-2xl">Auburn</div>
<div class="text-2xl">Millbury</div>
<div class="text-2xl">Oxford</div>
<div class="text-2xl">North Oxford</div>
<div class="text-2xl">Webster</div>
<div class="text-2xl">Grafton</div>
<div class="text-2xl">Paxton</div>
<div class="text-2xl">Worcester*</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">Paxton</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">Oxford</div>
<div class="text-2xl">North Oxford</div>
<div class="text-2xl">Webster</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">Worcester</div>
</div>
</div>
</div>
<div class="col-span-12 py-5 ">
<div class="flex justify-center items-center md:h-auto">
<img class="" src="/images/area.png" alt="Worcester County oil delivery">
</div>
</div>
</div> </div>
<div
class="font-bold text-xl bg-gray-oil text-blue-oil 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-3xl"
>
<div>
<div class="text-2xl">Auburn</div>
<div class="text-2xl">Millbury</div>
<div class="text-2xl">Oxford</div>
<div class="text-2xl">North Oxford</div>
<div class="text-2xl">Webster</div>
<div class="text-2xl">Grafton</div>
<div class="text-2xl">Paxton</div>
<div class="text-2xl">Worcester*</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">Paxton</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">Oxford</div>
<div class="text-2xl">North Oxford</div>
<div class="text-2xl">Webster</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">Worcester</div>
</div>
</div>
</div>
<div class="col-span-12 py-5">
<div class="flex justify-center items-center md:h-auto">
<img
class=""
src="/images/area.png?v=2"
alt="Worcester County oil delivery"
/>
</div>
</div>
</div> </div>
</div> </div>
</div>