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

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

@@ -2,16 +2,14 @@
import "../../app.postcss";
import { onMount } from "svelte";
import { PUBLIC_BASE_URL } from "$env/static/public";
import type { company, oilprice } from '$lib/types/types'
import '/static/fonts.css';
import type { company, oilprice } from "$lib/types/types";
import "/static/fonts.css";
export let company_data: company;
export let oil_price_data: oilprice;
let price_of_oil: string = '';
let company_name: string = '';
let company_phone_number: string = '';
let price_of_oil: string = "";
let company_name: string = "";
let company_phone_number: string = "";
onMount(async () => {
try {
@@ -59,24 +57,29 @@
}
});
</script>
<style>
.custom-font {
font-family: 'EnterS', sans-serif;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<title>Auburn Oil: Quality Heating Oil Delivery in Southern Worcester County</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
/>
<title
>Auburn Oil: Quality Heating Oil Delivery in Southern Worcester County</title
>
<div class="bg-blue-oil text-white">
<div class="bg-gray-oil 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>
</div>
<div class="mx-auto p-0 ">
<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" />
<img
class="mx-auto p-0 m-0 overflow-hidden"
src="/images/truck.png"
alt="Auburn Massachusetts"
/>
</a>
</div>
<!-- <div class="grid grid-cols-12 gap-5 px-5 text-center mt-10">
@@ -90,13 +93,19 @@
</div>
</div> -->
<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="pb-2 md:pb-5 text-3xl"><i class="fas fa-phone-alt mr-2"></i>Call Us</div>
<div class="text-3xl ">508-426-8800</div>
<div class="pb-2 md:pb-5 text-3xl">
<i class="fas fa-phone-alt mr-2"></i>Call Us
</div>
<div class="text-3xl">508-426-8800</div>
</div>
<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>
</div>
@@ -108,20 +117,25 @@
</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" />
<span class="text-2xl font-bold">Now delivering to Paxton !</span>
</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 ">
<div class="col-span-12 font-bold text-4xl text-blue-400 mx-auto">
Why call Auburn Oil?
</div>
<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-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 class="col-span-12 lg:col-span-4 bg-gray-oil text-white p-10 ">
</div>
<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-lg">
No Middleman. No expensive bulk plants. Direct port to door for
@@ -131,39 +145,36 @@
<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-lg">
Real live person on the phone when you call. Text us if you prefer.
We are here to help you.
Real live person on the phone when you call. Text us if you prefer. We
are here to help you.
</div>
</div>
<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-lg">
We dont cut our oil with biodiesel. We use the best available
fuel for your heating system.
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:text-center text-center bg-gray-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 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="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-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 class="col-span-6 text-lg text-center">
<div class="col-span-6 text-lg text-center"></div>
</div>
</div>
</div>
<div class="h-auto">
<div class="mx-auto p-5">
<div class="grid grid-cols-12">
@@ -181,7 +192,7 @@
<div
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">Millbury</div>
<div class="text-2xl">Sutton</div>
@@ -190,7 +201,7 @@
<div class="text-2xl">Webster</div>
<div class="text-2xl">Grafton</div>
</div>
<div >
<div>
<div class="text-2xl">Dudley</div>
<div class="text-2xl">Charlton</div>
<div class="text-2xl">Leicester</div>
@@ -222,11 +233,21 @@
</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 class="flex justify-center items-center">
<img
class=""
src="/images/area.png?v=2"
alt="Worcester County oil delivery"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.custom-font {
font-family: "EnterS", sans-serif;
}
</style>

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

@@ -1,14 +1,13 @@
<script lang='ts'>
<script lang="ts">
import "../../../app.postcss";
import { onMount } from "svelte";
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;
let company_name: string = '';
let tel_number: string = '';
let company_name: string = "";
let tel_number: string = "";
onMount(async () => {
await fetch(PUBLIC_BASE_URL + "/info/company", {
@@ -38,18 +37,20 @@
<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="grid grid-cols-12">
<div class="col-span-12 py-5">
<div class="font-bold text-blue-oil mx-auto text-center md:text-left">
<h3>Serving these communites</h3>
</div>
<div class="font-bold text-xl bg-gray-oil text-blue-oil h-10 mb-10">
<div
class="font-bold text-xl bg-gray-oil text-blue-oil h-10 mb-10"
></div>
</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="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>
@@ -59,7 +60,7 @@
<div class="text-2xl">Paxton</div>
<div class="text-2xl">Worcester*</div>
</div>
<div >
<div>
<div class="text-2xl">Dudley</div>
<div class="text-2xl">Sutton</div>
<div class="text-2xl">Charlton</div>
@@ -90,9 +91,13 @@
</div>
</div>
</div>
<div class="col-span-12 py-5 ">
<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">
<img
class=""
src="/images/area.png?v=2"
alt="Worcester County oil delivery"
/>
</div>
</div>
</div>